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

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

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_Skeleton","_styled","Loader","exports","_ref","count","default","createElement","Container","Skeleton","inline","height","wrapper","SkeletonWrapper"],"sources":["index.tsx"],"sourcesContent":["import React from \"react\";\nimport { Skeleton } from \"@webiny/ui/Skeleton\";\nimport { Container, SkeletonWrapper } from \"./styled\";\n\nexport const Loader = ({ count }: { count?: number }) => {\n    return (\n        <Container>\n            <Skeleton count={count ?? 4} inline={true} height={\"100%\"} wrapper={SkeletonWrapper} />\n        </Container>\n    );\n};\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,SAAA,GAAAD,OAAA;AACA,IAAAE,OAAA,GAAAF,OAAA;AAEO,IAAMG,MAAM,GAAAC,OAAA,CAAAD,MAAA,GAAG,SAATA,MAAMA,CAAAE,IAAA,EAAsC;EAAA,IAAhCC,KAAK,GAAAD,IAAA,CAALC,KAAK;EAC1B,oBACIR,MAAA,CAAAS,OAAA,CAAAC,aAAA,CAACN,OAAA,CAAAO,SAAS,qBACNX,MAAA,CAAAS,OAAA,CAAAC,aAAA,CAACP,SAAA,CAAAS,QAAQ;IAACJ,KAAK,EAAEA,KAAK,IAAI,CAAE;IAACK,MAAM,EAAE,IAAK;IAACC,MAAM,EAAE,MAAO;IAACC,OAAO,EAAEC;EAAgB,CAAE,CAC/E,CAAC;AAEpB,CAAC","ignoreList":[]}
+{"version":3,"names":[],"sources":["index.tsx"],"sourcesContent":["export * from \"./Loader.js\";\n"],"mappings":"AAAA","ignoreList":[]}

package/components/FolderTree/MenuActions/MenuActions.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import type { FolderActionConfig } from "../../../config/index.js";
+interface MenuActionsProps {
+    folderActions: FolderActionConfig[];
+}
+export declare const MenuActions: ({ folderActions }: MenuActionsProps) => React.JSX.Element | null;
+export {};

package/components/FolderTree/MenuActions/MenuActions.js

@@ -0,0 +1,32 @@
+import React from "react";
+import { OptionsMenu } from "@webiny/app-admin";
+import { cn, IconButton } from "@webiny/admin-ui";
+import { ReactComponent as MoreVerticalIcon } from "@webiny/icons/more_vert.svg";
+import { useFolder } from "../../../hooks/index.js";
+export const MenuActions = ({
+  folderActions
+}) => {
+  const {
+    folder
+  } = useFolder();
+
+  // If the user cannot manage folder structure, no need to show the menu.
+  if (!folder.canManageStructure) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    // Let's stop click event propagation, otherwise opening the OptionsMenu event will propagate up to the main Tree Item
+    onClick: e => e.stopPropagation(),
+    className: cn("invisible group-hover:visible", "size-md cursor-pointer", "absolute top-1/2  right-sm -translate-y-1/2")
+  }, /*#__PURE__*/React.createElement(OptionsMenu, {
+    trigger: /*#__PURE__*/React.createElement(IconButton, {
+      icon: /*#__PURE__*/React.createElement(MoreVerticalIcon, null),
+      size: "xs",
+      variant: "ghost"
+    }),
+    actions: folderActions,
+    "data-testid": "folder.tree.menu-action"
+  }));
+};
+
+//# sourceMappingURL=MenuActions.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","OptionsMenu","cn","IconButton","ReactComponent","MoreVerticalIcon","useFolder","MenuActions","folderActions","folder","canManageStructure","createElement","onClick","e","stopPropagation","className","trigger","icon","size","variant","actions"],"sources":["MenuActions.tsx"],"sourcesContent":["import React from \"react\";\nimport { OptionsMenu } from \"@webiny/app-admin\";\nimport { cn, IconButton } from \"@webiny/admin-ui\";\nimport { ReactComponent as MoreVerticalIcon } from \"@webiny/icons/more_vert.svg\";\nimport type { FolderActionConfig } from \"~/config/index.js\";\nimport { useFolder } from \"~/hooks/index.js\";\n\ninterface MenuActionsProps {\n    folderActions: FolderActionConfig[];\n}\n\nexport const MenuActions = ({ folderActions }: MenuActionsProps) => {\n    const { folder } = useFolder();\n\n    // If the user cannot manage folder structure, no need to show the menu.\n    if (!folder.canManageStructure) {\n        return null;\n    }\n\n    return (\n        <div\n            // Let's stop click event propagation, otherwise opening the OptionsMenu event will propagate up to the main Tree Item\n            onClick={e => e.stopPropagation()}\n            className={cn(\n                \"invisible group-hover:visible\",\n                \"size-md cursor-pointer\",\n                \"absolute top-1/2  right-sm -translate-y-1/2\"\n            )}\n        >\n            <OptionsMenu\n                trigger={<IconButton icon={<MoreVerticalIcon />} size={\"xs\"} variant={\"ghost\"} />}\n                actions={folderActions}\n                data-testid={\"folder.tree.menu-action\"}\n            />\n        </div>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,WAAW,QAAQ,mBAAmB;AAC/C,SAASC,EAAE,EAAEC,UAAU,QAAQ,kBAAkB;AACjD,SAASC,cAAc,IAAIC,gBAAgB,QAAQ,6BAA6B;AAEhF,SAASC,SAAS;AAMlB,OAAO,MAAMC,WAAW,GAAGA,CAAC;EAAEC;AAAgC,CAAC,KAAK;EAChE,MAAM;IAAEC;EAAO,CAAC,GAAGH,SAAS,CAAC,CAAC;;EAE9B;EACA,IAAI,CAACG,MAAM,CAACC,kBAAkB,EAAE;IAC5B,OAAO,IAAI;EACf;EAEA,oBACIV,KAAA,CAAAW,aAAA;IACI;IACAC,OAAO,EAAEC,CAAC,IAAIA,CAAC,CAACC,eAAe,CAAC,CAAE;IAClCC,SAAS,EAAEb,EAAE,CACT,+BAA+B,EAC/B,wBAAwB,EACxB,6CACJ;EAAE,gBAEFF,KAAA,CAAAW,aAAA,CAACV,WAAW;IACRe,OAAO,eAAEhB,KAAA,CAAAW,aAAA,CAACR,UAAU;MAACc,IAAI,eAAEjB,KAAA,CAAAW,aAAA,CAACN,gBAAgB,MAAE,CAAE;MAACa,IAAI,EAAE,IAAK;MAACC,OAAO,EAAE;IAAQ,CAAE,CAAE;IAClFC,OAAO,EAAEZ,aAAc;IACvB,eAAa;EAA0B,CAC1C,CACA,CAAC;AAEd,CAAC","ignoreList":[]}

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

@@ -1,2 +1 @@
-import React from "react";
-export declare const MenuActions: () => React.JSX.Element | null;
+export * from "./MenuActions.js";

package/components/FolderTree/MenuActions/index.js

@@ -1,31 +1,3 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.MenuActions = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _appAdmin = require("@webiny/app-admin");
-var _config = require("../../../config");
-var _hooks = require("../../../hooks");
-var _styled = require("./styled");
-var MenuActions = exports.MenuActions = function MenuActions() {
-  var _useFolder = (0, _hooks.useFolder)(),
-    folder = _useFolder.folder;
-  var _useAcoConfig = (0, _config.useAcoConfig)(),
-    folderConfig = _useAcoConfig.folder;
-
-  // If the user cannot manage folder structure, no need to show the menu.
-  if (!folder.canManageStructure) {
-    return null;
-  }
-  return /*#__PURE__*/_react.default.createElement(_styled.Container, {
-    className: "folder-tree-menu-action"
-  }, /*#__PURE__*/_react.default.createElement(_appAdmin.OptionsMenu, {
-    actions: folderConfig.actions,
-    "data-testid": "folder.tree.menu-action"
-  }));
-};
+export * from "./MenuActions.js";
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_appAdmin","_config","_hooks","_styled","MenuActions","exports","_useFolder","useFolder","folder","_useAcoConfig","useAcoConfig","folderConfig","canManageStructure","default","createElement","Container","className","OptionsMenu","actions"],"sources":["index.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { OptionsMenu } from \"@webiny/app-admin\";\nimport { useAcoConfig } from \"~/config\";\nimport { useFolder } from \"~/hooks\";\n\nimport { Container } from \"./styled\";\n\nexport const MenuActions = () => {\n    const { folder } = useFolder();\n    const { folder: folderConfig } = useAcoConfig();\n\n    // If the user cannot manage folder structure, no need to show the menu.\n    if (!folder.canManageStructure) {\n        return null;\n    }\n\n    return (\n        <Container className={\"folder-tree-menu-action\"}>\n            <OptionsMenu actions={folderConfig.actions} data-testid={\"folder.tree.menu-action\"} />\n        </Container>\n    );\n};\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAEA,IAAAC,SAAA,GAAAD,OAAA;AACA,IAAAE,OAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AAEA,IAAAI,OAAA,GAAAJ,OAAA;AAEO,IAAMK,WAAW,GAAAC,OAAA,CAAAD,WAAA,GAAG,SAAdA,WAAWA,CAAA,EAAS;EAC7B,IAAAE,UAAA,GAAmB,IAAAC,gBAAS,EAAC,CAAC;IAAtBC,MAAM,GAAAF,UAAA,CAANE,MAAM;EACd,IAAAC,aAAA,GAAiC,IAAAC,oBAAY,EAAC,CAAC;IAA/BC,YAAY,GAAAF,aAAA,CAApBD,MAAM;;EAEd;EACA,IAAI,CAACA,MAAM,CAACI,kBAAkB,EAAE;IAC5B,OAAO,IAAI;EACf;EAEA,oBACIf,MAAA,CAAAgB,OAAA,CAAAC,aAAA,CAACX,OAAA,CAAAY,SAAS;IAACC,SAAS,EAAE;EAA0B,gBAC5CnB,MAAA,CAAAgB,OAAA,CAAAC,aAAA,CAACd,SAAA,CAAAiB,WAAW;IAACC,OAAO,EAAEP,YAAY,CAACO,OAAQ;IAAC,eAAa;EAA0B,CAAE,CAC9E,CAAC;AAEpB,CAAC","ignoreList":[]}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./MenuActions.js\";\n"],"mappings":"AAAA","ignoreList":[]}

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

@@ -0,0 +1,15 @@
+import React from "react";
+import type { FolderActionConfig } from "../../../config/AcoConfig.js";
+interface FolderProps {
+    text: string;
+    isRoot: boolean;
+    hasNonInheritedPermissions?: boolean;
+    canManagePermissions?: boolean;
+}
+export declare const FolderNode: ({ isRoot, hasNonInheritedPermissions, canManagePermissions, text }: FolderProps) => React.JSX.Element;
+type NodeProps = {
+    folderActions: FolderActionConfig[];
+    enableActions?: boolean;
+};
+export declare const Node: ({ folderActions, enableActions }: NodeProps) => React.JSX.Element;
+export {};

package/components/FolderTree/Node/Node.js

@@ -0,0 +1,55 @@
+import React from "react";
+import { Text, Tree } from "@webiny/admin-ui";
+import { ReactComponent as Folder } from "@webiny/icons/folder.svg";
+import { ReactComponent as FolderShared } from "@webiny/icons/folder_shared.svg";
+import { ReactComponent as HomeIcon } from "@webiny/icons/home.svg";
+import { MenuActions } from "../MenuActions/index.js";
+import { ROOT_FOLDER } from "../../../constants.js";
+import { useFolder } from "../../../hooks/index.js";
+export const FolderNode = ({
+  isRoot,
+  hasNonInheritedPermissions,
+  canManagePermissions,
+  text
+}) => {
+  let icon = /*#__PURE__*/React.createElement(HomeIcon, null);
+  if (!isRoot) {
+    if (hasNonInheritedPermissions && canManagePermissions) {
+      icon = /*#__PURE__*/React.createElement(FolderShared, null);
+    } else {
+      icon = /*#__PURE__*/React.createElement(Folder, null);
+    }
+  }
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Tree.Item.Icon, {
+    label: "Folder",
+    element: icon
+  }), /*#__PURE__*/React.createElement(Text, {
+    as: "div",
+    className: "truncate"
+  }, text));
+};
+export const Node = ({
+  folderActions,
+  enableActions
+}) => {
+  const {
+    folder
+  } = useFolder();
+  const {
+    hasNonInheritedPermissions,
+    canManagePermissions,
+    title,
+    id
+  } = folder || {};
+  const isRoot = id === ROOT_FOLDER;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FolderNode, {
+    isRoot: isRoot,
+    text: title,
+    hasNonInheritedPermissions: hasNonInheritedPermissions,
+    canManagePermissions: canManagePermissions
+  }), enableActions && !isRoot && /*#__PURE__*/React.createElement(MenuActions, {
+    folderActions: folderActions
+  }));
+};
+
+//# sourceMappingURL=Node.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","Text","Tree","ReactComponent","Folder","FolderShared","HomeIcon","MenuActions","ROOT_FOLDER","useFolder","FolderNode","isRoot","hasNonInheritedPermissions","canManagePermissions","text","icon","createElement","Fragment","Item","Icon","label","element","as","className","Node","folderActions","enableActions","folder","title","id"],"sources":["Node.tsx"],"sourcesContent":["import React from \"react\";\nimport { Text, Tree } from \"@webiny/admin-ui\";\nimport { ReactComponent as Folder } from \"@webiny/icons/folder.svg\";\nimport { ReactComponent as FolderShared } from \"@webiny/icons/folder_shared.svg\";\nimport { ReactComponent as HomeIcon } from \"@webiny/icons/home.svg\";\nimport { MenuActions } from \"../MenuActions/index.js\";\nimport { ROOT_FOLDER } from \"~/constants.js\";\nimport { useFolder } from \"~/hooks/index.js\";\nimport type { FolderActionConfig } from \"~/config/AcoConfig.js\";\n\ninterface FolderProps {\n    text: string;\n    isRoot: boolean;\n    hasNonInheritedPermissions?: boolean;\n    canManagePermissions?: boolean;\n}\n\nexport const FolderNode = ({\n    isRoot,\n    hasNonInheritedPermissions,\n    canManagePermissions,\n    text\n}: FolderProps) => {\n    let icon = <HomeIcon />;\n\n    if (!isRoot) {\n        if (hasNonInheritedPermissions && canManagePermissions) {\n            icon = <FolderShared />;\n        } else {\n            icon = <Folder />;\n        }\n    }\n\n    return (\n        <>\n            <Tree.Item.Icon label={\"Folder\"} element={icon} />\n            <Text as={\"div\"} className={\"truncate\"}>\n                {text}\n            </Text>\n        </>\n    );\n};\n\ntype NodeProps = {\n    folderActions: FolderActionConfig[];\n    enableActions?: boolean;\n};\n\nexport const Node = ({ folderActions, enableActions }: NodeProps) => {\n    const { folder } = useFolder();\n\n    const { hasNonInheritedPermissions, canManagePermissions, title, id } = folder || {};\n    const isRoot = id === ROOT_FOLDER;\n\n    return (\n        <>\n            <FolderNode\n                isRoot={isRoot}\n                text={title}\n                hasNonInheritedPermissions={hasNonInheritedPermissions}\n                canManagePermissions={canManagePermissions}\n            />\n            {enableActions && !isRoot && <MenuActions folderActions={folderActions} />}\n        </>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,EAAEC,IAAI,QAAQ,kBAAkB;AAC7C,SAASC,cAAc,IAAIC,MAAM,QAAQ,0BAA0B;AACnE,SAASD,cAAc,IAAIE,YAAY,QAAQ,iCAAiC;AAChF,SAASF,cAAc,IAAIG,QAAQ,QAAQ,wBAAwB;AACnE,SAASC,WAAW;AACpB,SAASC,WAAW;AACpB,SAASC,SAAS;AAUlB,OAAO,MAAMC,UAAU,GAAGA,CAAC;EACvBC,MAAM;EACNC,0BAA0B;EAC1BC,oBAAoB;EACpBC;AACS,CAAC,KAAK;EACf,IAAIC,IAAI,gBAAGf,KAAA,CAAAgB,aAAA,CAACV,QAAQ,MAAE,CAAC;EAEvB,IAAI,CAACK,MAAM,EAAE;IACT,IAAIC,0BAA0B,IAAIC,oBAAoB,EAAE;MACpDE,IAAI,gBAAGf,KAAA,CAAAgB,aAAA,CAACX,YAAY,MAAE,CAAC;IAC3B,CAAC,MAAM;MACHU,IAAI,gBAAGf,KAAA,CAAAgB,aAAA,CAACZ,MAAM,MAAE,CAAC;IACrB;EACJ;EAEA,oBACIJ,KAAA,CAAAgB,aAAA,CAAAhB,KAAA,CAAAiB,QAAA,qBACIjB,KAAA,CAAAgB,aAAA,CAACd,IAAI,CAACgB,IAAI,CAACC,IAAI;IAACC,KAAK,EAAE,QAAS;IAACC,OAAO,EAAEN;EAAK,CAAE,CAAC,eAClDf,KAAA,CAAAgB,aAAA,CAACf,IAAI;IAACqB,EAAE,EAAE,KAAM;IAACC,SAAS,EAAE;EAAW,GAClCT,IACC,CACR,CAAC;AAEX,CAAC;AAOD,OAAO,MAAMU,IAAI,GAAGA,CAAC;EAAEC,aAAa;EAAEC;AAAyB,CAAC,KAAK;EACjE,MAAM;IAAEC;EAAO,CAAC,GAAGlB,SAAS,CAAC,CAAC;EAE9B,MAAM;IAAEG,0BAA0B;IAAEC,oBAAoB;IAAEe,KAAK;IAAEC;EAAG,CAAC,GAAGF,MAAM,IAAI,CAAC,CAAC;EACpF,MAAMhB,MAAM,GAAGkB,EAAE,KAAKrB,WAAW;EAEjC,oBACIR,KAAA,CAAAgB,aAAA,CAAAhB,KAAA,CAAAiB,QAAA,qBACIjB,KAAA,CAAAgB,aAAA,CAACN,UAAU;IACPC,MAAM,EAAEA,MAAO;IACfG,IAAI,EAAEc,KAAM;IACZhB,0BAA0B,EAAEA,0BAA2B;IACvDC,oBAAoB,EAAEA;EAAqB,CAC9C,CAAC,EACDa,aAAa,IAAI,CAACf,MAAM,iBAAIX,KAAA,CAAAgB,aAAA,CAACT,WAAW;IAACkB,aAAa,EAAEA;EAAc,CAAE,CAC3E,CAAC;AAEX,CAAC","ignoreList":[]}

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

@@ -1,22 +1 @@
-import React from "react";
-import { NodeModel } from "@minoru/react-dnd-treeview";
-import { DndFolderItemData, FolderItem } from "../../../types";
-declare type NodeProps = {
-    node: NodeModel<DndFolderItemData>;
-    depth: number;
-    isOpen: boolean;
-    enableActions?: boolean;
-    onToggle: (id: string | number) => void;
-    onClick: (data: FolderItem) => void;
-};
-declare type FolderProps = {
-    text: string;
-    isRoot: boolean;
-    isOpen: boolean;
-    isFocused?: boolean;
-    hasNonInheritedPermissions?: boolean;
-    canManagePermissions?: boolean;
-};
-export declare const FolderNode: ({ isRoot, isFocused, hasNonInheritedPermissions, canManagePermissions, text }: FolderProps) => React.JSX.Element;
-export declare const Node: ({ node, depth, isOpen, enableActions, onToggle, onClick }: NodeProps) => React.JSX.Element;
-export {};
+export * from "./Node.js";

package/components/FolderTree/Node/index.js

@@ -1,92 +1,3 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Node = exports.FolderNode = void 0;
-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_sharedFill = require("@material-symbols/svg-400/rounded/folder_shared-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 _hooks = require("../../../hooks");
-var FolderNode = exports.FolderNode = function FolderNode(_ref) {
-  var isRoot = _ref.isRoot,
-    isFocused = _ref.isFocused,
-    hasNonInheritedPermissions = _ref.hasNonInheritedPermissions,
-    canManagePermissions = _ref.canManagePermissions,
-    text = _ref.text;
-  var icon = /*#__PURE__*/_react.default.createElement(_home.ReactComponent, null);
-  if (!isRoot) {
-    if (hasNonInheritedPermissions && canManagePermissions) {
-      icon = /*#__PURE__*/_react.default.createElement(_folder_sharedFill.ReactComponent, null);
-    } else {
-      icon = /*#__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));
-};
-var Node = exports.Node = function Node(_ref2) {
-  var node = _ref2.node,
-    depth = _ref2.depth,
-    isOpen = _ref2.isOpen,
-    enableActions = _ref2.enableActions,
-    onToggle = _ref2.onToggle,
-    onClick = _ref2.onClick;
-  var _useFolder = (0, _hooks.useFolder)(),
-    folder = _useFolder.folder;
-  var isRoot = folder.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 === 1 ? 4 : (depth - 1) * 20 + 8;
-  var dragOverProps = (0, _reactDndTreeview.useDragOver)(folder.id, isOpen, onToggle);
-  var handleToggle = function handleToggle(e) {
-    e.stopPropagation();
-    onToggle(folder.id);
-  };
-  var handleClick = function handleClick(e) {
-    e.stopPropagation();
-    onClick(folder);
-    if (folder.id !== _constants.ROOT_FOLDER) {
-      onToggle(folder.id);
-    }
-  };
-  var id = (0, _react.useMemo)(function () {
-    var _parseIdentifier = (0, _utils.parseIdentifier)(String(folder.id)),
-      id = _parseIdentifier.id;
-    return id;
-  }, [folder.id]);
-  var _ref3 = folder || {},
-    hasNonInheritedPermissions = _ref3.hasNonInheritedPermissions,
-    canManagePermissions = _ref3.canManagePermissions;
-  return /*#__PURE__*/_react.default.createElement(_styled.Container, Object.assign({
-    isFocused: !!node.data?.isFocused,
-    style: {
-      paddingInlineStart: indent
-    }
-  }, 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,
-    className: "aco-folder-".concat(id)
-  }, /*#__PURE__*/_react.default.createElement(FolderNode, {
-    isRoot: isRoot,
-    text: node.text,
-    hasNonInheritedPermissions: hasNonInheritedPermissions,
-    canManagePermissions: canManagePermissions,
-    isOpen: isRoot ? true : isOpen,
-    isFocused: !!node.data?.isFocused
-  })), enableActions && !isRoot && /*#__PURE__*/_react.default.createElement(_MenuActions.MenuActions, null));
-};
+export * from "./Node.js";
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_arrow_right","_folderFill","_folder_sharedFill","_home","_reactDndTreeview","_MenuActions","_styled","_utils","_constants","_hooks","FolderNode","exports","_ref","isRoot","isFocused","hasNonInheritedPermissions","canManagePermissions","text","icon","default","createElement","ReactComponent","Fragment","FolderIcon","Text","className","use","Node","_ref2","node","depth","isOpen","enableActions","onToggle","onClick","_useFolder","useFolder","folder","id","ROOT_FOLDER","indent","dragOverProps","useDragOver","handleToggle","e","stopPropagation","handleClick","useMemo","_parseIdentifier","parseIdentifier","String","_ref3","Container","Object","assign","data","style","paddingInlineStart","ArrowIcon","Content","concat","MenuActions"],"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 FolderShared } from \"@material-symbols/svg-400/rounded/folder_shared-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 { DndFolderItemData, FolderItem } from \"~/types\";\nimport { parseIdentifier } from \"@webiny/utils\";\nimport { ROOT_FOLDER } from \"~/constants\";\nimport { useFolder } from \"~/hooks\";\n\ntype NodeProps = {\n    node: NodeModel<DndFolderItemData>;\n    depth: number;\n    isOpen: boolean;\n    enableActions?: boolean;\n    onToggle: (id: string | number) => void;\n    onClick: (data: FolderItem) => void;\n};\n\ntype FolderProps = {\n    text: string;\n    isRoot: boolean;\n    isOpen: boolean;\n    isFocused?: boolean;\n    hasNonInheritedPermissions?: boolean;\n    canManagePermissions?: boolean;\n};\n\nexport const FolderNode = ({\n    isRoot,\n    isFocused,\n    hasNonInheritedPermissions,\n    canManagePermissions,\n    text\n}: FolderProps) => {\n    let icon = <HomeIcon />;\n\n    if (!isRoot) {\n        if (hasNonInheritedPermissions && canManagePermissions) {\n            icon = <FolderShared />;\n        } else {\n            icon = <Folder />;\n        }\n    }\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 = ({ node, depth, isOpen, enableActions, onToggle, onClick }: NodeProps) => {\n    const { folder } = useFolder();\n    const isRoot = folder.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(folder.id, isOpen, onToggle);\n\n    const handleToggle = (e: React.MouseEvent) => {\n        e.stopPropagation();\n        onToggle(folder.id);\n    };\n\n    const handleClick = (e: React.MouseEvent) => {\n        e.stopPropagation();\n        onClick(folder);\n        if (folder.id !== ROOT_FOLDER) {\n            onToggle(folder.id);\n        }\n    };\n\n    const id = useMemo(() => {\n        const { id } = parseIdentifier(String(folder.id));\n        return id;\n    }, [folder.id]);\n\n    const { hasNonInheritedPermissions, canManagePermissions } = folder || {};\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                    hasNonInheritedPermissions={hasNonInheritedPermissions}\n                    canManagePermissions={canManagePermissions}\n                    isOpen={isRoot ? true : isOpen}\n                    isFocused={!!node.data?.isFocused}\n                />\n            </Content>\n            {enableActions && !isRoot && <MenuActions />}\n        </Container>\n    );\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./Node.js\";\n"],"mappings":"AAAA","ignoreList":[]}

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

@@ -0,0 +1,6 @@
+import React from "react";
+type NodePreviewProps = {
+    text: string;
+};
+export declare const NodePreview: ({ text }: NodePreviewProps) => React.JSX.Element;
+export {};

package/components/FolderTree/NodePreview/NodePreview.js

@@ -0,0 +1,18 @@
+import React from "react";
+import { Tree } from "@webiny/admin-ui";
+import { FolderNode } from "../Node/index.js";
+export const NodePreview = ({
+  text
+}) => {
+  return /*#__PURE__*/React.createElement(Tree.Item, {
+    className: "bg-neutral-dark/10 absolute z-150",
+    style: {
+      maxWidth: 256
+    }
+  }, /*#__PURE__*/React.createElement(FolderNode, {
+    text: text,
+    isRoot: false
+  }));
+};
+
+//# sourceMappingURL=NodePreview.js.map

package/components/FolderTree/NodePreview/NodePreview.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Tree","FolderNode","NodePreview","text","createElement","Item","className","style","maxWidth","isRoot"],"sources":["NodePreview.tsx"],"sourcesContent":["import React from \"react\";\nimport { Tree } from \"@webiny/admin-ui\";\nimport { FolderNode } from \"../Node/index.js\";\n\ntype NodePreviewProps = {\n    text: string;\n};\n\nexport const NodePreview = ({ text }: NodePreviewProps) => {\n    return (\n        <Tree.Item className={\"bg-neutral-dark/10 absolute z-150\"} style={{ maxWidth: 256 }}>\n            <FolderNode text={text} isRoot={false} />\n        </Tree.Item>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,QAAQ,kBAAkB;AACvC,SAASC,UAAU;AAMnB,OAAO,MAAMC,WAAW,GAAGA,CAAC;EAAEC;AAAuB,CAAC,KAAK;EACvD,oBACIJ,KAAA,CAAAK,aAAA,CAACJ,IAAI,CAACK,IAAI;IAACC,SAAS,EAAE,mCAAoC;IAACC,KAAK,EAAE;MAAEC,QAAQ,EAAE;IAAI;EAAE,gBAChFT,KAAA,CAAAK,aAAA,CAACH,UAAU;IAACE,IAAI,EAAEA,IAAK;IAACM,MAAM,EAAE;EAAM,CAAE,CACjC,CAAC;AAEpB,CAAC","ignoreList":[]}

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

@@ -1,8 +1 @@
-import React from "react";
-import { DragLayerMonitorProps } from "@minoru/react-dnd-treeview";
-import { DndFolderItemData } from "../../../types";
-declare type NodePreviewProps = {
-    monitorProps: DragLayerMonitorProps<DndFolderItemData>;
-};
-export declare const NodePreview: (props: NodePreviewProps) => React.JSX.Element;
-export {};
+export * from "./NodePreview.js";

package/components/FolderTree/NodePreview/index.js

@@ -1,20 +1,3 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.NodePreview = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _Node = require("../Node");
-var _styled = require("./styled");
-var NodePreview = exports.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,
-    isRoot: false
-  }));
-};
+export * from "./NodePreview.js";
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_Node","_styled","NodePreview","exports","props","item","monitorProps","default","createElement","Container","FolderNode","text","isOpen","isRoot"],"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 { DndFolderItemData } from \"~/types\";\n\ntype NodePreviewProps = {\n    monitorProps: DragLayerMonitorProps<DndFolderItemData>;\n};\n\nexport const NodePreview = (props: NodePreviewProps) => {\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,WAAW,GAAAC,OAAA,CAAAD,WAAA,GAAG,SAAdA,WAAWA,CAAIE,KAAuB,EAAK;EACpD,IAAMC,IAAI,GAAGD,KAAK,CAACE,YAAY,CAACD,IAAI;EAEpC,oBACIR,MAAA,CAAAU,OAAA,CAAAC,aAAA,CAACP,OAAA,CAAAQ,SAAS,qBACNZ,MAAA,CAAAU,OAAA,CAAAC,aAAA,CAACR,KAAA,CAAAU,UAAU;IAACC,IAAI,EAAEN,IAAI,CAACM,IAAK;IAACC,MAAM,EAAE,KAAM;IAACC,MAAM,EAAE;EAAM,CAAE,CACrD,CAAC;AAEpB,CAAC","ignoreList":[]}
+{"version":3,"names":[],"sources":["index.tsx"],"sourcesContent":["export * from \"./NodePreview.js\";\n"],"mappings":"AAAA","ignoreList":[]}

package/components/FolderTree/index.d.ts

@@ -1,13 +1,16 @@
 import React from "react";
-import { Loader } from "./Loader";
-import { FolderItem } from "../../types";
+import type { FolderDto } from "../../domain/folder/FolderDto.js";
+import { Loader } from "./Loader/index.js";
+import type { FolderActionConfig } from "../../config/AcoConfig.js";
 export { Loader };
 export interface FolderTreeProps {
-    onFolderClick: (data: FolderItem) => void;
+    folderActions?: FolderActionConfig[];
+    onFolderClick: (data: FolderDto) => void;
     enableCreate?: boolean;
     rootFolderLabel?: string;
     enableActions?: boolean;
+    dropConfirmation?: boolean;
     focusedFolderId?: string;
     hiddenFolderIds?: string[];
 }
-export declare const FolderTree: ({ focusedFolderId, hiddenFolderIds, enableActions, enableCreate, onFolderClick, rootFolderLabel }: FolderTreeProps) => React.JSX.Element;
+export declare const FolderTree: ({ folderActions, focusedFolderId, hiddenFolderIds, enableActions, enableCreate, onFolderClick, dropConfirmation, rootFolderLabel }: FolderTreeProps) => React.JSX.Element;

package/components/FolderTree/index.js

@@ -1,80 +1,67 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.FolderTree = void 0;
-Object.defineProperty(exports, "Loader", {
-  enumerable: true,
-  get: function get() {
-    return _Loader.Loader;
-  }
-});
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-var _react = _interopRequireWildcard(require("react"));
-var _Tooltip = require("@webiny/ui/Tooltip");
-var _useFolders2 = require("../../hooks/useFolders");
-var _ButtonCreate = require("./ButtonCreate");
-var _Empty = require("./Empty");
-var _Loader = require("./Loader");
-var _List = require("./List");
-var _styled = require("./styled");
-var _constants = require("../../constants");
-var _config = require("../../config");
-var FolderTree = exports.FolderTree = function FolderTree(_ref) {
-  var focusedFolderId = _ref.focusedFolderId,
-    hiddenFolderIds = _ref.hiddenFolderIds,
-    enableActions = _ref.enableActions,
-    enableCreate = _ref.enableCreate,
-    onFolderClick = _ref.onFolderClick,
-    rootFolderLabel = _ref.rootFolderLabel;
-  var _useFolders = (0, _useFolders2.useFolders)(),
-    folders = _useFolders.folders,
-    flp = _useFolders.folderLevelPermissions;
-  var localFolders = (0, _react.useMemo)(function () {
+import React, { useMemo } from "react";
+import { Tooltip } from "@webiny/admin-ui";
+import { useGetFolderLevelPermission } from "../../features/folders/getFolderLevelPermission/index.js";
+import { useLoadFolderHierarchy } from "../../features/folders/loadFolderHierarchy/index.js";
+import { ButtonCreate } from "./ButtonCreate/index.js";
+import { Loader } from "./Loader/index.js";
+import { List } from "./List/index.js";
+import { ROOT_FOLDER } from "../../constants.js";
+export { Loader };
+export const FolderTree = ({
+  folderActions = [],
+  focusedFolderId,
+  hiddenFolderIds,
+  enableActions,
+  enableCreate,
+  onFolderClick,
+  dropConfirmation,
+  rootFolderLabel
+}) => {
+  const {
+    folders,
+    getIsFolderLoading
+  } = useLoadFolderHierarchy();
+  const {
+    getFolderLevelPermission: canManageStructure
+  } = useGetFolderLevelPermission("canManageStructure");
+  const localFolders = useMemo(() => {
     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 renderList = function renderList() {
-    if (!folders) {
-      return /*#__PURE__*/_react.default.createElement(_Loader.Loader, null);
-    }
-    var createButton = null;
-    if (enableCreate) {
-      var canCreate = flp.canManageStructure(focusedFolderId);
-      createButton = /*#__PURE__*/_react.default.createElement(_ButtonCreate.CreateButton, {
-        disabled: !canCreate
-      });
-      if (!canCreate) {
-        createButton = /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
-          content: "Cannot create folder because you're not an owner."
-        }, createButton);
-      }
-    }
-    if (localFolders.length > 0) {
-      return /*#__PURE__*/_react.default.createElement(_config.AcoWithConfig, null, /*#__PURE__*/_react.default.createElement(_List.List, {
-        folders: localFolders,
-        onFolderClick: onFolderClick,
-        focusedFolderId: focusedFolderId,
-        hiddenFolderIds: hiddenFolderIds,
-        enableActions: enableActions
-      }), enableCreate && createButton);
+    return folders.map(item => item.id === ROOT_FOLDER && rootFolderLabel ? {
+      ...item,
+      title: rootFolderLabel
+    } : item);
+  }, [folders, rootFolderLabel]);
+  const createButton = useMemo(() => {
+    if (!enableCreate) {
+      return null;
     }
-    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Empty.Empty, null), createButton);
-  };
-  return /*#__PURE__*/_react.default.createElement(_styled.Container, null, renderList());
+    const canCreate = canManageStructure(focusedFolderId);
+    const button = /*#__PURE__*/React.createElement(ButtonCreate, {
+      disabled: !canCreate
+    });
+    return canCreate ? button : /*#__PURE__*/React.createElement(Tooltip, {
+      content: `Cannot create folder because you're not an owner.`,
+      trigger: button
+    });
+  }, [enableCreate, canManageStructure, focusedFolderId, localFolders]);
+  if (getIsFolderLoading()) {
+    return /*#__PURE__*/React.createElement(Loader, null);
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: "my-xs"
+  }, /*#__PURE__*/React.createElement(List, {
+    dropConfirmation: dropConfirmation,
+    folders: localFolders,
+    folderActions: folderActions,
+    onFolderClick: onFolderClick,
+    focusedFolderId: focusedFolderId,
+    hiddenFolderIds: hiddenFolderIds,
+    enableActions: enableActions
+  }), enableCreate && /*#__PURE__*/React.createElement("div", {
+    className: "m-xs-plus mt-sm-plus mb-lg pl-sm-extra"
+  }, createButton));
 };
 
 //# sourceMappingURL=index.js.map

package/components/FolderTree/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_Tooltip","_useFolders2","_ButtonCreate","_Empty","_Loader","_List","_styled","_constants","_config","FolderTree","exports","_ref","focusedFolderId","hiddenFolderIds","enableActions","enableCreate","onFolderClick","rootFolderLabel","_useFolders","useFolders","folders","flp","folderLevelPermissions","localFolders","useMemo","reduce","acc","item","id","ROOT_FOLDER","concat","_toConsumableArray2","default","_objectSpread2","title","renderList","createElement","Loader","createButton","canCreate","canManageStructure","CreateButton","disabled","Tooltip","content","length","AcoWithConfig","List","Fragment","Empty","Container"],"sources":["index.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { Tooltip } from \"@webiny/ui/Tooltip\";\nimport { useFolders } from \"~/hooks/useFolders\";\nimport { CreateButton } from \"./ButtonCreate\";\nimport { Empty } from \"./Empty\";\nimport { Loader } from \"./Loader\";\nimport { List } from \"./List\";\nimport { Container } from \"./styled\";\nimport { FolderItem } from \"~/types\";\nimport { ROOT_FOLDER } from \"~/constants\";\nimport { AcoWithConfig } from \"~/config\";\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 = ({\n    focusedFolderId,\n    hiddenFolderIds,\n    enableActions,\n    enableCreate,\n    onFolderClick,\n    rootFolderLabel\n}: FolderTreeProps) => {\n    const { folders, folderLevelPermissions: flp } = 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 renderList = () => {\n        if (!folders) {\n            return <Loader />;\n        }\n\n        let createButton = null;\n        if (enableCreate) {\n            const canCreate = flp.canManageStructure(focusedFolderId!);\n\n            createButton = <CreateButton disabled={!canCreate} />;\n\n            if (!canCreate) {\n                createButton = (\n                    <Tooltip content={`Cannot create folder because you're not an owner.`}>\n                        {createButton}\n                    </Tooltip>\n                );\n            }\n        }\n\n        if (localFolders.length > 0) {\n            return (\n                <AcoWithConfig>\n                    <List\n                        folders={localFolders}\n                        onFolderClick={onFolderClick}\n                        focusedFolderId={focusedFolderId}\n                        hiddenFolderIds={hiddenFolderIds}\n                        enableActions={enableActions}\n                    />\n                    {enableCreate && createButton}\n                </AcoWithConfig>\n            );\n        }\n\n        return (\n            <>\n                <Empty />\n                {createButton}\n            </>\n        );\n    };\n    return <Container>{renderList()}</Container>;\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","useMemo","Tooltip","useGetFolderLevelPermission","useLoadFolderHierarchy","ButtonCreate","Loader","List","ROOT_FOLDER","FolderTree","folderActions","focusedFolderId","hiddenFolderIds","enableActions","enableCreate","onFolderClick","dropConfirmation","rootFolderLabel","folders","getIsFolderLoading","getFolderLevelPermission","canManageStructure","localFolders","map","item","id","title","createButton","canCreate","button","createElement","disabled","content","trigger","className"],"sources":["index.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { Tooltip } from \"@webiny/admin-ui\";\nimport type { FolderDto } from \"~/domain/folder/FolderDto.js\";\nimport { useGetFolderLevelPermission } from \"~/features/folders/getFolderLevelPermission/index.js\";\nimport { useLoadFolderHierarchy } from \"~/features/folders/loadFolderHierarchy/index.js\";\nimport { ButtonCreate } from \"./ButtonCreate/index.js\";\nimport { Loader } from \"./Loader/index.js\";\nimport { List } from \"./List/index.js\";\nimport { ROOT_FOLDER } from \"~/constants.js\";\nimport type { FolderActionConfig } from \"~/config/AcoConfig.js\";\n\nexport { Loader };\n\nexport interface FolderTreeProps {\n    folderActions?: FolderActionConfig[];\n    onFolderClick: (data: FolderDto) => void;\n    enableCreate?: boolean;\n    rootFolderLabel?: string;\n    enableActions?: boolean;\n    dropConfirmation?: boolean;\n    focusedFolderId?: string;\n    hiddenFolderIds?: string[];\n}\n\nexport const FolderTree = ({\n    folderActions = [],\n    focusedFolderId,\n    hiddenFolderIds,\n    enableActions,\n    enableCreate,\n    onFolderClick,\n    dropConfirmation,\n    rootFolderLabel\n}: FolderTreeProps) => {\n    const { folders, getIsFolderLoading } = useLoadFolderHierarchy();\n    const { getFolderLevelPermission: canManageStructure } =\n        useGetFolderLevelPermission(\"canManageStructure\");\n\n    const localFolders = useMemo(() => {\n        if (!folders) {\n            return [];\n        }\n\n        return folders.map(item =>\n            item.id === ROOT_FOLDER && rootFolderLabel ? { ...item, title: rootFolderLabel } : item\n        );\n    }, [folders, rootFolderLabel]);\n\n    const createButton = useMemo(() => {\n        if (!enableCreate) {\n            return null;\n        }\n\n        const canCreate = canManageStructure(focusedFolderId!);\n        const button = <ButtonCreate disabled={!canCreate} />;\n\n        return canCreate ? (\n            button\n        ) : (\n            <Tooltip\n                content={`Cannot create folder because you're not an owner.`}\n                trigger={button}\n            />\n        );\n    }, [enableCreate, canManageStructure, focusedFolderId, localFolders]);\n\n    if (getIsFolderLoading()) {\n        return <Loader />;\n    }\n\n    return (\n        <div className=\"my-xs\">\n            <List\n                dropConfirmation={dropConfirmation}\n                folders={localFolders}\n                folderActions={folderActions}\n                onFolderClick={onFolderClick}\n                focusedFolderId={focusedFolderId}\n                hiddenFolderIds={hiddenFolderIds}\n                enableActions={enableActions}\n            />\n            {enableCreate && (\n                <div className={\"m-xs-plus mt-sm-plus mb-lg pl-sm-extra\"}>{createButton}</div>\n            )}\n        </div>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,SAASC,OAAO,QAAQ,kBAAkB;AAE1C,SAASC,2BAA2B;AACpC,SAASC,sBAAsB;AAC/B,SAASC,YAAY;AACrB,SAASC,MAAM;AACf,SAASC,IAAI;AACb,SAASC,WAAW;AAGpB,SAASF,MAAM;AAaf,OAAO,MAAMG,UAAU,GAAGA,CAAC;EACvBC,aAAa,GAAG,EAAE;EAClBC,eAAe;EACfC,eAAe;EACfC,aAAa;EACbC,YAAY;EACZC,aAAa;EACbC,gBAAgB;EAChBC;AACa,CAAC,KAAK;EACnB,MAAM;IAAEC,OAAO;IAAEC;EAAmB,CAAC,GAAGf,sBAAsB,CAAC,CAAC;EAChE,MAAM;IAAEgB,wBAAwB,EAAEC;EAAmB,CAAC,GAClDlB,2BAA2B,CAAC,oBAAoB,CAAC;EAErD,MAAMmB,YAAY,GAAGrB,OAAO,CAAC,MAAM;IAC/B,IAAI,CAACiB,OAAO,EAAE;MACV,OAAO,EAAE;IACb;IAEA,OAAOA,OAAO,CAACK,GAAG,CAACC,IAAI,IACnBA,IAAI,CAACC,EAAE,KAAKjB,WAAW,IAAIS,eAAe,GAAG;MAAE,GAAGO,IAAI;MAAEE,KAAK,EAAET;IAAgB,CAAC,GAAGO,IACvF,CAAC;EACL,CAAC,EAAE,CAACN,OAAO,EAAED,eAAe,CAAC,CAAC;EAE9B,MAAMU,YAAY,GAAG1B,OAAO,CAAC,MAAM;IAC/B,IAAI,CAACa,YAAY,EAAE;MACf,OAAO,IAAI;IACf;IAEA,MAAMc,SAAS,GAAGP,kBAAkB,CAACV,eAAgB,CAAC;IACtD,MAAMkB,MAAM,gBAAG7B,KAAA,CAAA8B,aAAA,CAACzB,YAAY;MAAC0B,QAAQ,EAAE,CAACH;IAAU,CAAE,CAAC;IAErD,OAAOA,SAAS,GACZC,MAAM,gBAEN7B,KAAA,CAAA8B,aAAA,CAAC5B,OAAO;MACJ8B,OAAO,EAAE,mDAAoD;MAC7DC,OAAO,EAAEJ;IAAO,CACnB,CACJ;EACL,CAAC,EAAE,CAACf,YAAY,EAAEO,kBAAkB,EAAEV,eAAe,EAAEW,YAAY,CAAC,CAAC;EAErE,IAAIH,kBAAkB,CAAC,CAAC,EAAE;IACtB,oBAAOnB,KAAA,CAAA8B,aAAA,CAACxB,MAAM,MAAE,CAAC;EACrB;EAEA,oBACIN,KAAA,CAAA8B,aAAA;IAAKI,SAAS,EAAC;EAAO,gBAClBlC,KAAA,CAAA8B,aAAA,CAACvB,IAAI;IACDS,gBAAgB,EAAEA,gBAAiB;IACnCE,OAAO,EAAEI,YAAa;IACtBZ,aAAa,EAAEA,aAAc;IAC7BK,aAAa,EAAEA,aAAc;IAC7BJ,eAAe,EAAEA,eAAgB;IACjCC,eAAe,EAAEA,eAAgB;IACjCC,aAAa,EAAEA;EAAc,CAChC,CAAC,EACDC,YAAY,iBACTd,KAAA,CAAA8B,aAAA;IAAKI,SAAS,EAAE;EAAyC,GAAEP,YAAkB,CAEhF,CAAC;AAEd,CAAC","ignoreList":[]}

package/components/Search/Search.d.ts

@@ -2,6 +2,7 @@ import React from "react";
 interface SearchProps {
     value: string;
     onChange: (value: string) => void;
+    placeholder: string;
 }
-export declare const Search: ({ value, onChange }: SearchProps) => React.JSX.Element;
+export declare const Search: ({ value, onChange, placeholder }: SearchProps) => React.JSX.Element;
 export {};