@bigbinary/neeto-folders-frontend 2.0.25 → 2.0.27

package/dist/cjs/components.js

@@ -9,10 +9,10 @@ var utils$1 = require('@bigbinary/neeto-commons-frontend/utils');
 var Alert = require('@bigbinary/neetoui/Alert');
 var reactI18next = require('react-i18next');
 var reactRouterDom = require('react-router-dom');
-var useFolderActions = require('../useFolderActions-hz2Q6yci.js');
+var useFolderActions = require('../useFolderActions-BqMYtjKs.js');
 var constants = require('./constants.js');
-var utils = require('../index-DshpXNOY.js');
-var internal = require('../internal-D5q2PCbM.js');
+var utils = require('../index-DxzvHr2u.js');
+var internal = require('../internal-DKHdgJas.js');
 var jsxRuntime = require('react/jsx-runtime');
 var Pane = require('@bigbinary/neetoui/Pane');
 var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
@@ -48,21 +48,21 @@ var formik = require('formik');
 var NUITreeSelect = require('@bigbinary/neetoui/formik/TreeSelect');
 require('zustand');
 
-function ownKeys$f(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$f(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$f(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$f(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$j(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$j(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$j(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$j(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var useTranslation = function useTranslation(config) {
   var _useDefaultTranslatio = reactI18next.useTranslation(),
     t = _useDefaultTranslatio.t;
   var modT = function modT(key, options) {
-    return config !== null && config !== void 0 && config.labels ? t(key, _objectSpread$f(_objectSpread$f({}, config.labels), options)) : t(key, options);
+    return config !== null && config !== void 0 && config.labels ? t(key, _objectSpread$j(_objectSpread$j({}, config.labels), options)) : t(key, options);
   };
   return {
     t: modT
   };
 };
 
-function ownKeys$e(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$e(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$e(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$e(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$i(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$i(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$i(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$i(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var FoldersAlerts = function FoldersAlerts(_ref) {
   var config = _ref.config;
   var _useFolderStore = useFolderActions.useFolderStore(function (store) {
@@ -117,7 +117,7 @@ var FoldersAlerts = function FoldersAlerts(_ref) {
       if (isActive && folders) {
         var path = utils.pathToFolder(folders, item.id);
         var parent = path[path.length - 2];
-        var redirectUrl = parent ? utils$1.buildUrl(config.folderPath, _objectSpread$e(_objectSpread$e({}, queryParams), {}, {
+        var redirectUrl = parent ? utils$1.buildUrl(config.folderPath, _objectSpread$i(_objectSpread$i({}, queryParams), {}, {
           folderId: parent.sid
         })) : "/";
         history.replace(redirectUrl);
@@ -138,7 +138,7 @@ var FoldersAlerts = function FoldersAlerts(_ref) {
     if (config.customizeAlerts) config.customizeAlerts(type, item, alertProps);
     alertProps.onSubmit = onConfirmDelete;
   }
-  return /*#__PURE__*/jsxRuntime.jsx(Alert, _objectSpread$e({}, alertProps));
+  return /*#__PURE__*/jsxRuntime.jsx(Alert, _objectSpread$i({}, alertProps));
 };
 
 var FORM_VALIDATION_SCHEMA = yup.object().shape({
@@ -148,8 +148,8 @@ var FORM_VALIDATION_SCHEMA = yup.object().shape({
 });
 
 var _excluded$6 = ["type"];
-function ownKeys$d(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$d(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$d(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$d(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$h(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$h(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$h(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$h(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var typeComponentMap = {
   string: Input,
   "boolean": Switch,
@@ -163,7 +163,7 @@ var ExtraAttributes = function ExtraAttributes(_ref) {
       rest = _objectWithoutProperties(_ref2, _excluded$6);
     var Component = typeComponentMap[type];
     if (!Component) return null;
-    return /*#__PURE__*/React.createElement(Component, _objectSpread$d(_objectSpread$d({}, rest), {}, {
+    return /*#__PURE__*/React.createElement(Component, _objectSpread$h(_objectSpread$h({}, rest), {}, {
       key: rest.name
     }));
   });
@@ -363,8 +363,8 @@ var AddEditPane = function AddEditPane(_ref) {
 var REORDER_TREE_INDENT_WIDTH = 30;
 
 var _excluded$5 = ["icon", "itemLabel", "folder", "folderLabel", "depth", "className", "onClick"];
-function ownKeys$c(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$c(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$c(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$c(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$g(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$g(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$g(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$g(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Node$1 = function Node(_ref, ref) {
   var _folder$children$leng, _folder$children;
   var _ref$icon = _ref.icon,
@@ -392,7 +392,7 @@ var Node$1 = function Node(_ref, ref) {
           left: Math.round(REORDER_TREE_INDENT_WIDTH / 2)
         }
       }, index);
-    }), /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread$c(_objectSpread$c({}, _objectSpread$c(_objectSpread$c({}, rest), {}, {
+    }), /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread$g(_objectSpread$g({}, _objectSpread$g(_objectSpread$g({}, rest), {}, {
       onClick: onClick,
       ref: ref
     })), {}, {
@@ -419,14 +419,14 @@ var Node$1 = function Node(_ref, ref) {
 var Node$2 = /*#__PURE__*/React.forwardRef(Node$1);
 
 var _excluded$4 = ["folder", "item", "depth", "maxDepth", "disabled", "config"];
-function ownKeys$b(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$b(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$b(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$b(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$f(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$f(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$f(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$f(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var _SelectableNode = function SelectableNode(_ref) {
   var _folder$children$leng, _folder$children;
   var folder = _ref.folder,
     item = _ref.item,
     _ref$depth = _ref.depth,
-    depth = _ref$depth === void 0 ? 0 : _ref$depth,
+    depth = _ref$depth === void 0 ? 1 : _ref$depth,
     maxDepth = _ref.maxDepth,
     disabled = _ref.disabled,
     config = _ref.config,
@@ -441,7 +441,7 @@ var _SelectableNode = function SelectableNode(_ref) {
   var renderChildren = function renderChildren() {
     if (neetoCist.isNotPresent(folder.children)) return null;
     return folder.children.map(function (child) {
-      return /*#__PURE__*/React.createElement(_SelectableNode, _objectSpread$b(_objectSpread$b({}, _objectSpread$b(_objectSpread$b({}, rest), {}, {
+      return /*#__PURE__*/React.createElement(_SelectableNode, _objectSpread$f(_objectSpread$f({}, _objectSpread$f(_objectSpread$f({}, rest), {}, {
         config: config,
         item: item,
         maxDepth: maxDepth
@@ -459,7 +459,7 @@ var _SelectableNode = function SelectableNode(_ref) {
       "opacity-60": isDisabled
     }),
     title: isDisabled ? t("moveToFolder.notAllowed") : undefined,
-    children: [/*#__PURE__*/jsxRuntime.jsx(Node$2, _objectSpread$b(_objectSpread$b({}, _objectSpread$b(_objectSpread$b({}, rest), {}, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(Node$2, _objectSpread$f(_objectSpread$f({}, _objectSpread$f(_objectSpread$f({}, rest), {}, {
       depth: depth,
       folder: folder,
       folderLabel: folderLabel,
@@ -479,10 +479,19 @@ var _SelectableNode = function SelectableNode(_ref) {
   });
 };
 
-function ownKeys$a(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$a(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$a(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$a(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$e(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$e(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$e(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$e(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var createTree = function createTree(folders, isRootEnabled) {
+  return isRootEnabled ? [{
+    name: "/",
+    id: null,
+    children: folders
+  }] : folders;
+};
 var PaneBody = function PaneBody(_ref) {
-  var item = _ref.item,
+  var _ref$isRootEnabled = _ref.isRootEnabled,
+    isRootEnabled = _ref$isRootEnabled === void 0 ? true : _ref$isRootEnabled,
+    item = _ref.item,
     config = _ref.config,
     submitButtonProps = _ref.submitButtonProps,
     cancelButtonProps = _ref.cancelButtonProps,
@@ -516,20 +525,19 @@ var PaneBody = function PaneBody(_ref) {
     }, shallow.shallow),
     type = _useFolderStore2.type;
   var tree = React.useMemo(function () {
-    return [{
-      name: "/",
-      id: null,
-      children: folders
-    }];
-  }, [folders]);
-  var folderDepth = 0;
+    return createTree(folders, isRootEnabled);
+  }, [folders, isRootEnabled]);
+  var maxDepth = Number.POSITIVE_INFINITY;
   if (item) {
     // If item is a folder, measure the current depth from current folder to longest leaf.
     var foldersMap = utils.treeToMap(folders);
     var folder = foldersMap[item.id];
-    if (folder) folderDepth = utils.measureDepth(folder);
+    if (folder) {
+      var folderDepth = utils.measureDepth(folder) + 1; // +1 for own depth;
+      maxDepth = config.maxDepth - folderDepth;
+      if (isRootEnabled) maxDepth += 1; // +1 for root folder.
+    }
   }
-  var maxDepth = config.maxDepth - folderDepth + 1;
   var onAddFolder = function onAddFolder() {
     setFolderState({
       paneState: {
@@ -583,23 +591,23 @@ var PaneBody = function PaneBody(_ref) {
       className: "space-x-2",
       children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
         className: "flex flex-1 space-x-2",
-        children: [/*#__PURE__*/jsxRuntime.jsx(Button, _objectSpread$a(_objectSpread$a({
-          disabled: selection === parent,
+        children: [/*#__PURE__*/jsxRuntime.jsx(Button, _objectSpread$e(_objectSpread$e({
           label: t("common.save"),
           style: "primary",
           onClick: function onClick() {
             return onSubmit(selection);
           }
         }, submitButtonProps), {}, {
-          "data-cy": "save-changes-button"
-        })), /*#__PURE__*/jsxRuntime.jsx(Button, _objectSpread$a(_objectSpread$a({
+          "data-cy": "save-changes-button",
+          disabled: selection === parent || (submitButtonProps === null || submitButtonProps === void 0 ? void 0 : submitButtonProps.disabled)
+        })), /*#__PURE__*/jsxRuntime.jsx(Button, _objectSpread$e(_objectSpread$e({
           label: t("common.cancel"),
           style: "text",
           onClick: onClose
         }, cancelButtonProps), {}, {
           "data-cy": "cancel-button"
         }))]
-      }), onRemove && /*#__PURE__*/jsxRuntime.jsx(Button, _objectSpread$a(_objectSpread$a({
+      }), onRemove && /*#__PURE__*/jsxRuntime.jsx(Button, _objectSpread$e(_objectSpread$e({
         label: t("moveToFolder.remove"),
         style: "tertiary",
         onClick: onRemove
@@ -621,6 +629,7 @@ var MoveFolderPane = function MoveFolderPane(_ref) {
     }, shallow.shallow),
     item = _useFolderStore.item;
   var _useUpdateFolder = useFolderActions.useUpdateFolder(config),
+    isPending = _useUpdateFolder.isPending,
     updateFolder = _useUpdateFolder.mutate;
   var onSaveSelection = function onSaveSelection(parentId) {
     var payload = {
@@ -629,26 +638,34 @@ var MoveFolderPane = function MoveFolderPane(_ref) {
     };
     updateFolder({
       id: item.id,
-      payload: payload
+      payload: payload,
+      config: {
+        showToastr: false
+      }
     }, {
       onSuccess: function onSuccess() {
         var _config$onUpdateSucce;
         onClose();
         (_config$onUpdateSucce = config.onUpdateSuccess) === null || _config$onUpdateSucce === void 0 || _config$onUpdateSucce.call(config);
-      }
+      },
+      onError: internal.toastApiError
     });
   };
   return /*#__PURE__*/jsxRuntime.jsx(PaneBody, {
     config: config,
     item: item,
     onClose: onClose,
+    submitButtonProps: {
+      loading: isPending,
+      disabled: isPending
+    },
     onSubmit: onSaveSelection
   });
 };
 
 var _excluded$3 = ["folder", "depth", "config", "folderLabel", "itemLabel"];
-function ownKeys$9(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$9(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$9(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$9(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$d(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$d(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$d(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$d(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var _DraggableNode$1 = function DraggableNode(_ref) {
   var folder = _ref.folder,
     _ref$depth = _ref.depth,
@@ -677,7 +694,7 @@ var _DraggableNode$1 = function DraggableNode(_ref) {
     if (neetoCist.isNotPresent(folder.children) || isDragging) return null;
     return folder.children.map(function (child) {
       var _child$children$lengt, _child$children;
-      return /*#__PURE__*/React.createElement(_DraggableNode$1, _objectSpread$9(_objectSpread$9({}, _objectSpread$9(_objectSpread$9({}, rest), {}, {
+      return /*#__PURE__*/React.createElement(_DraggableNode$1, _objectSpread$d(_objectSpread$d({}, _objectSpread$d(_objectSpread$d({}, rest), {}, {
         config: config
       })), {}, {
         depth: depth + 1,
@@ -689,14 +706,14 @@ var _DraggableNode$1 = function DraggableNode(_ref) {
     });
   };
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/jsxRuntime.jsx(Node$2, _objectSpread$9(_objectSpread$9(_objectSpread$9({}, rest), {}, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(Node$2, _objectSpread$d(_objectSpread$d(_objectSpread$d({}, rest), {}, {
       className: classNames({
         "neeto-ui-rounded-lg hover:neeto-ui-bg-gray-100 w-full min-w-0 cursor-move transition-colors": true,
         "neeto-ui-bg-gray-100 opacity-50": isDragging,
         "neeto-ui-border-primary-500 border": isOver,
         "border border-transparent": !isOver
       })
-    }, _objectSpread$9(_objectSpread$9(_objectSpread$9({
+    }, _objectSpread$d(_objectSpread$d(_objectSpread$d({
       depth: depth,
       folder: folder
     }, attributes), listeners), {}, {
@@ -711,8 +728,8 @@ var _DraggableNode$1 = function DraggableNode(_ref) {
   });
 };
 
-function ownKeys$8(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$8(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$8(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$8(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$c(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$c(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$c(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$c(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var RearrangeFoldersPane = function RearrangeFoldersPane(_ref) {
   var _tree$children$length, _tree$children, _dragItem$children$le, _dragItem$children;
   var config = _ref.config,
@@ -818,7 +835,7 @@ var RearrangeFoldersPane = function RearrangeFoldersPane(_ref) {
       },
       children: [/*#__PURE__*/jsxRuntime.jsx(Pane.Body, {
         className: "pb-6",
-        children: /*#__PURE__*/React.createElement(_DraggableNode$1, _objectSpread$8(_objectSpread$8({}, _objectSpread$8(_objectSpread$8({}, nodeProps), {}, {
+        children: /*#__PURE__*/React.createElement(_DraggableNode$1, _objectSpread$c(_objectSpread$c({}, _objectSpread$c(_objectSpread$c({}, nodeProps), {}, {
           config: config
         })), {}, {
           folder: tree,
@@ -840,7 +857,7 @@ var RearrangeFoldersPane = function RearrangeFoldersPane(_ref) {
         })]
       }), /*#__PURE__*/reactDom.createPortal(/*#__PURE__*/jsxRuntime.jsx(core.DragOverlay, {
         zIndex: 99999,
-        children: dragItem && /*#__PURE__*/jsxRuntime.jsx(Node$2, _objectSpread$8(_objectSpread$8({}, nodeProps), {}, {
+        children: dragItem && /*#__PURE__*/jsxRuntime.jsx(Node$2, _objectSpread$c(_objectSpread$c({}, nodeProps), {}, {
           className: "neeto-ui-bg-gray-200",
           depth: 0,
           folder: dragItem,
@@ -944,8 +961,8 @@ var PlaceholderNode = function PlaceholderNode(_ref) {
 };
 
 var _excluded$2 = ["folder", "config", "dragState", "folderLabel", "itemLabel"];
-function ownKeys$7(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$7(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$7(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$7(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$b(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$b(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$b(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$b(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var _DraggableNode = function DraggableNode(_ref) {
   var _overItem$meta$parent;
   var folder = _ref.folder,
@@ -981,7 +998,7 @@ var _DraggableNode = function DraggableNode(_ref) {
         folder: folder
       }), internal.isArray(folder.children) && folder.children.map(function (child) {
         var _child$children$lengt, _child$children;
-        return /*#__PURE__*/React.createElement(_DraggableNode, _objectSpread$7(_objectSpread$7({}, _objectSpread$7(_objectSpread$7({}, rest), {}, {
+        return /*#__PURE__*/React.createElement(_DraggableNode, _objectSpread$b(_objectSpread$b({}, _objectSpread$b(_objectSpread$b({}, rest), {}, {
           config: config,
           dragState: dragState
         })), {}, {
@@ -995,9 +1012,9 @@ var _DraggableNode = function DraggableNode(_ref) {
     }, "".concat(folder.id, "--container"));
   };
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/jsxRuntime.jsx(Node$2, _objectSpread$7(_objectSpread$7({
+    children: [/*#__PURE__*/jsxRuntime.jsx(Node$2, _objectSpread$b(_objectSpread$b({
       depth: folder.meta.depth
-    }, _objectSpread$7(_objectSpread$7(_objectSpread$7(_objectSpread$7({}, rest), {}, {
+    }, _objectSpread$b(_objectSpread$b(_objectSpread$b(_objectSpread$b({}, rest), {}, {
       folder: folder
     }, attributes), listeners), {}, {
       folderLabel: folderLabel,
@@ -1017,8 +1034,8 @@ var _DraggableNode = function DraggableNode(_ref) {
   });
 };
 
-function ownKeys$6(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$6(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$6(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$6(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$a(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$a(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$a(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$a(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var initialDragState = {
   activeItem: null,
   overItem: null
@@ -1160,7 +1177,7 @@ var ReorderFoldersPane = function ReorderFoldersPane(_ref) {
       },
       children: [/*#__PURE__*/jsxRuntime.jsx(Pane.Body, {
         className: "pb-6",
-        children: /*#__PURE__*/React.createElement(_DraggableNode, _objectSpread$6(_objectSpread$6({}, _objectSpread$6(_objectSpread$6({}, nodeProps), {}, {
+        children: /*#__PURE__*/React.createElement(_DraggableNode, _objectSpread$a(_objectSpread$a({}, _objectSpread$a(_objectSpread$a({}, nodeProps), {}, {
           config: config,
           dragState: dragState
         })), {}, {
@@ -1183,7 +1200,7 @@ var ReorderFoldersPane = function ReorderFoldersPane(_ref) {
         })]
       }), /*#__PURE__*/reactDom.createPortal(/*#__PURE__*/jsxRuntime.jsx(core.DragOverlay, {
         zIndex: 99999,
-        children: dragState && /*#__PURE__*/jsxRuntime.jsx(Node$2, _objectSpread$6(_objectSpread$6({}, nodeProps), {}, {
+        children: dragState && /*#__PURE__*/jsxRuntime.jsx(Node$2, _objectSpread$a(_objectSpread$a({}, nodeProps), {}, {
           className: "neeto-ui-bg-gray-200 pl-4 pr-12",
           depth: 0,
           folder: dragState.activeItem,
@@ -1195,11 +1212,11 @@ var ReorderFoldersPane = function ReorderFoldersPane(_ref) {
   });
 };
 
-function ownKeys$5(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$5(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$5(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$5(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$9(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$9(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$9(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$9(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var FoldersPane = function FoldersPane(_ref) {
   var configProps = _ref.config;
-  var config = _objectSpread$5(_objectSpread$5({}, useFolderActions.DEFAULT_CONFIG), configProps);
+  var config = _objectSpread$9(_objectSpread$9({}, useFolderActions.DEFAULT_CONFIG), configProps);
   var _useFolderStore = useFolderActions.useFolderStore(function (store) {
       return {
         setFolderState: store["setFolderState"]
@@ -1229,9 +1246,9 @@ var FoldersPane = function FoldersPane(_ref) {
     children: function children(_ref2) {
       var setFocusField = _ref2.setFocusField;
       return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-        children: [(type === "edit" || type === "add") && /*#__PURE__*/jsxRuntime.jsx(AddEditPane, _objectSpread$5({}, _objectSpread$5({
+        children: [(type === "edit" || type === "add") && /*#__PURE__*/jsxRuntime.jsx(AddEditPane, _objectSpread$9({}, _objectSpread$9({
           setFocusField: setFocusField
-        }, commonProps))), type === "move" && /*#__PURE__*/jsxRuntime.jsx(MoveFolderPane, _objectSpread$5({}, commonProps)), type === "reorder" && /*#__PURE__*/jsxRuntime.jsx(ReorderPaneComponent, _objectSpread$5({}, commonProps))]
+        }, commonProps))), type === "move" && /*#__PURE__*/jsxRuntime.jsx(MoveFolderPane, _objectSpread$9({}, commonProps)), type === "reorder" && /*#__PURE__*/jsxRuntime.jsx(ReorderPaneComponent, _objectSpread$9({}, commonProps))]
       });
     }
   });
@@ -1327,14 +1344,14 @@ var FolderTile = function FolderTile(_ref) {
   });
 };
 
-function ownKeys$4(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$4(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$4(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$4(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$8(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$8(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$8(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$8(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var FoldersList = function FoldersList(_ref) {
   var _ref$selection = _ref.selection,
     selection = _ref$selection === void 0 ? [] : _ref$selection,
     configProps = _ref.config,
     onSelect = _ref.onSelect;
-  var config = _objectSpread$4(_objectSpread$4({}, useFolderActions.DEFAULT_CONFIG), configProps);
+  var config = _objectSpread$8(_objectSpread$8({}, useFolderActions.DEFAULT_CONFIG), configProps);
   var params = reactUtils.useQueryParams();
   var _useTranslation = useTranslation(config),
     t = _useTranslation.t;
@@ -1362,7 +1379,7 @@ var FoldersList = function FoldersList(_ref) {
           onSelect: onSelect,
           isSelected: selection.includes(folder.id),
           key: folder.id,
-          link: utils$1.buildUrl(config.folderPath, _objectSpread$4(_objectSpread$4({}, params), {}, {
+          link: utils$1.buildUrl(config.folderPath, _objectSpread$8(_objectSpread$8({}, params), {}, {
             folderId: folder.sid
           }))
         });
@@ -1372,8 +1389,8 @@ var FoldersList = function FoldersList(_ref) {
 };
 
 var _excluded$1 = ["isOpen", "onClose"];
-function ownKeys$3(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$7(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$7(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$7(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$7(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var MoveToFolderPane = function MoveToFolderPane(_ref) {
   var isOpen = _ref.isOpen,
     onClose = _ref.onClose,
@@ -1381,14 +1398,49 @@ var MoveToFolderPane = function MoveToFolderPane(_ref) {
   return /*#__PURE__*/jsxRuntime.jsx(Pane, {
     isOpen: isOpen,
     onClose: onClose,
-    children: /*#__PURE__*/jsxRuntime.jsx(PaneBody, _objectSpread$3({}, _objectSpread$3(_objectSpread$3({}, rest), {}, {
+    children: /*#__PURE__*/jsxRuntime.jsx(PaneBody, _objectSpread$7({}, _objectSpread$7(_objectSpread$7({}, rest), {}, {
       onClose: onClose
     })))
   });
 };
 
+function ownKeys$6(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$6(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$6(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$6(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var FolderIcon = function FolderIcon(props) {
+  return /*#__PURE__*/jsxRuntime.jsx("svg", _objectSpread$6(_objectSpread$6({
+    fill: "none",
+    height: props.size,
+    viewBox: "0 0 16 16",
+    width: props.size,
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), {}, {
+    children: /*#__PURE__*/jsxRuntime.jsx("path", {
+      d: "M3.202 12.798h9.6c.882 0 1.6-.717 1.6-1.6v-6c0-.882-.718-1.6-1.6-1.6H9.069a.8.8 0 0 1-.48-.16l-.96-.72a1.6 1.6 0 0 0-.96-.32H3.202c-.883 0-1.6.718-1.6 1.6v7.2c0 .883.717 1.6 1.6 1.6",
+      fill: "currentColor"
+    })
+  }));
+};
+
+function ownKeys$5(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$5(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$5(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$5(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var FolderIconOpen = function FolderIconOpen(props) {
+  return /*#__PURE__*/jsxRuntime.jsx("svg", _objectSpread$5(_objectSpread$5({
+    fill: "none",
+    height: props.size,
+    viewBox: "0 0 16 16",
+    width: props.size,
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), {}, {
+    children: /*#__PURE__*/jsxRuntime.jsx("path", {
+      d: "m2.2 7.24-.59 1.765V4c0-.882.717-1.6 1.6-1.6h3.467c.345 0 .682.113.96.32l.96.72c.137.105.307.16.48.16h2.932c.883 0 1.6.718 1.6 1.6v.4H4.474c-1.032 0-1.95.66-2.277 1.64zm10.544 5.56h-9.47c-.82 0-1.397-.802-1.137-1.58l1.2-3.6c.162-.49.622-.82 1.137-.82h9.47c.82 0 1.398.803 1.138 1.58l-1.2 3.6c-.163.49-.623.82-1.138.82",
+      fill: "currentColor"
+    })
+  }));
+};
+
 var Node = function Node(_ref) {
   var _isActive = _ref.isActive,
+    isExpanded = _ref.isExpanded,
     node = _ref.node,
     link = _ref.link,
     config = _ref.config;
@@ -1416,13 +1468,19 @@ var Node = function Node(_ref) {
     },
     to: link,
     children: /*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: "flex items-center justify-between w-full group",
+      className: "flex items-center justify-between w-full group relative",
       "data-cy": "".concat(neetoCist.hyphenate(name), "-").concat(isFolder ? "folder" : "item", "-sublink"),
       title: "",
-      children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+      children: [isFolder && (isExpanded ? /*#__PURE__*/jsxRuntime.jsx(FolderIconOpen, {
+        className: "flex-shrink-0 mr-1",
+        size: 16
+      }) : /*#__PURE__*/jsxRuntime.jsx(FolderIcon, {
+        className: "flex-shrink-0 mr-1",
+        size: 16
+      })), /*#__PURE__*/jsxRuntime.jsxs("div", {
         className: "flex items-center min-w-0 flex-1",
         children: [/*#__PURE__*/jsxRuntime.jsx(Typography, {
-          className: "line-clamp-1 block truncate",
+          className: "line-clamp-1 block truncate pl-0.5",
           component: "span",
           style: "body2",
           title: name,
@@ -1435,7 +1493,7 @@ var Node = function Node(_ref) {
           })
         })]
       }), hasAnyActions && /*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: "flex items-center gap-1",
+        className: "flex items-center gap-0.5 py-0.5 absolute right-0 top-0 h-full neeto-sidebar-folders-tree__folder-node-actions neeto-ui-rounded-md pl-2",
         onClick: function onClick(e) {
           e.preventDefault();
           e.stopPropagation();
@@ -1451,13 +1509,13 @@ var Node = function Node(_ref) {
               content: "Add",
               position: "top"
             },
-            className: "opacity-0 group-hover:opacity-100 transition-opacity"
+            className: "opacity-0 group-hover:opacity-100 transition-opacity neeto-sidebar-folders-tree__action-button size-5"
           }
         }), hasMoreActions && /*#__PURE__*/jsxRuntime.jsx(MoreDropdown, {
           menuItems: moreActions,
           dropdownButtonProps: {
             size: "small",
-            className: "opacity-0 group-hover:opacity-100 transition-opacity"
+            className: "opacity-0 group-hover:opacity-100 transition-opacity neeto-sidebar-folders-tree__action-button size-5"
           }
         })]
       })]
@@ -1465,6 +1523,51 @@ var Node = function Node(_ref) {
   });
 };
 
+function ownKeys$4(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$4(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$4(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$4(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var DownIcon = function DownIcon(props) {
+  return /*#__PURE__*/jsxRuntime.jsx("svg", _objectSpread$4(_objectSpread$4({
+    fill: "none",
+    height: "6",
+    viewBox: "0 0 6 6",
+    width: "6",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), {}, {
+    children: /*#__PURE__*/jsxRuntime.jsx("path", {
+      d: "M3.803 5.475a.35.35 0 0 1-.606 0l-2.425-4.2A.35.35 0 0 1 1.075.75h4.85a.35.35 0 0 1 .303.525z",
+      fill: "currentColor"
+    })
+  }));
+};
+
+function ownKeys$3(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var RightIcon = function RightIcon(props) {
+  return /*#__PURE__*/jsxRuntime.jsx("svg", _objectSpread$3(_objectSpread$3({
+    fill: "none",
+    height: "6",
+    viewBox: "0 0 6 6",
+    width: "6",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), {}, {
+    children: /*#__PURE__*/jsxRuntime.jsx("path", {
+      d: "M5.475 2.697a.35.35 0 0 1 0 .606l-4.2 2.425a.35.35 0 0 1-.525-.303V.575a.35.35 0 0 1 .525-.303z",
+      fill: "currentColor"
+    })
+  }));
+};
+
+var SwitcherIcon = function SwitcherIcon(_ref) {
+  var expanded = _ref.expanded;
+  return expanded ? /*#__PURE__*/jsxRuntime.jsx(DownIcon, {
+    className: "neeto-ui-relative",
+    size: 16
+  }) : /*#__PURE__*/jsxRuntime.jsx(RightIcon, {
+    className: "neeto-ui-relative",
+    size: 16
+  });
+};
+
 function ownKeys$2(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var splitItemsByFolder = function splitItemsByFolder(items) {
@@ -1511,10 +1614,11 @@ function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t
 var FoldersTree = function FoldersTree(_ref) {
   var configProps = _ref.config;
   var config = _objectSpread$1(_objectSpread$1({}, useFolderActions.DEFAULT_CONFIG), configProps);
-  var _useState = React.useState([]),
+  var _useState = React.useState(new Set()),
     _useState2 = _slicedToArray(_useState, 2),
-    expandedKeys = _useState2[0],
-    setExpandedKeys = _useState2[1];
+    expandedKeysSet = _useState2[0],
+    setExpandedKeysSet = _useState2[1];
+  var expandedKeys = Array.from(expandedKeysSet);
   var _useTranslation = useTranslation(config),
     t = _useTranslation.t;
   var params = reactUtils.useQueryParams({
@@ -1530,32 +1634,29 @@ var FoldersTree = function FoldersTree(_ref) {
     var _activeFolder$meta;
     if (!treeData) return;
     // When active folder changes from external sources, update expanded keys to auto expand tree.
-    var updatedExpandedKeys = _toConsumableArray(expandedKeys);
+    var updatedExpandedKeys = new Set(expandedKeysSet);
     var map = utils.treeToMap(treeData, "sid");
     var activeFolder = map[activeFolderSid];
     var parentSid = activeFolder === null || activeFolder === void 0 || (_activeFolder$meta = activeFolder.meta) === null || _activeFolder$meta === void 0 || (_activeFolder$meta = _activeFolder$meta.parent) === null || _activeFolder$meta === void 0 ? void 0 : _activeFolder$meta.sid;
-    if (parentSid && !updatedExpandedKeys.includes(parentSid)) {
-      updatedExpandedKeys.push(parentSid);
+    if (parentSid && !expandedKeysSet.has(parentSid)) {
+      updatedExpandedKeys.add(parentSid);
     }
-    setExpandedKeys(updatedExpandedKeys);
   };
   var handleExpand = function handleExpand(keys, _ref2) {
     var expanded = _ref2.expanded,
       node = _ref2.node;
-    if (expanded) {
-      setExpandedKeys(keys);
-      return;
-    }
     var keysSet = new Set(keys);
-    var _removeChildKeys = function removeChildKeys() {
-      var children = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-      children.forEach(function (child) {
-        keysSet["delete"](child.sid);
-        _removeChildKeys(child.children);
-      });
-    };
-    _removeChildKeys(node.children);
-    setExpandedKeys(_toConsumableArray(keysSet));
+    if (!expanded) {
+      var _removeChildKeys = function removeChildKeys() {
+        var children = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+        children.forEach(function (child) {
+          keysSet["delete"](child.sid);
+          _removeChildKeys(child.children);
+        });
+      };
+      _removeChildKeys(node.children);
+    }
+    setExpandedKeysSet(keysSet);
   };
   React.useEffect(function () {
     // Non urgent update.
@@ -1574,21 +1675,23 @@ var FoldersTree = function FoldersTree(_ref) {
     treeData: treeData,
     autoExpandParent: true,
     blockNode: true,
-    showLine: true,
     className: "neeto-sidebar-folders-tree",
     componentToken: {
       titleHeight: 24,
-      indentSize: 24
+      indentSize: 20
     },
     fieldNames: {
       key: "sid"
     },
     selectedKeys: [activeFolderSid],
+    showLine: false,
+    switcherIcon: SwitcherIcon,
     titleRender: function titleRender(node) {
       return /*#__PURE__*/jsxRuntime.jsx(Node, {
         config: config,
         node: node,
         isActive: node.sid === activeFolderSid,
+        isExpanded: expandedKeysSet.has(node.sid),
         link: node.link || utils$1.buildUrl(config.folderPath, _objectSpread$1(_objectSpread$1({}, params), {}, {
           folderId: node.sid
         }))
@@ -1677,7 +1780,7 @@ TreeSelect.displayName = "TreeSelect";
 
 var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}
 
-var css = ".neeto-sidebar-folders-tree__folder-node{color:inherit!important}.neeto-sidebar-folders-tree.ant-tree .ant-tree-node-content-wrapper{min-width:0;padding-inline:6px!important}.neeto-sidebar-folders-tree.ant-tree .ant-tree-node-content-wrapper.ant-tree-node-selected{background-color:rgb(var(--neeto-ui-white));color:rgb(var(--neeto-ui-accent-800))!important;font-weight:500}.neeto-sidebar-folders-tree.ant-tree .ant-tree-switcher .ant-tree-switcher-icon{position:relative}.neeto-folders-grid-view-wrapper{grid-template-columns:repeat(auto-fill,minmax(256px,1fr))}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFwcC9qYXZhc2NyaXB0L3NyYy9jb21wb25lbnRzL25lZXRvLWZvbGRlcnMtbmFuby5zY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLHlDQUNFLHVCQUNGLENBRUEsb0VBRUUsV0FBQSxDQURBLDRCQUVGLENBRUEsMkZBR0UsMkNBQUEsQ0FEQSwrQ0FBQSxDQUVBLGVBQUYsQ0FHQSxnRkFHRSxpQkFGRixDQUtBLGlDQUNFLHlEQUZGIiwic291cmNlc0NvbnRlbnQiOlsiLm5lZXRvLXNpZGViYXItZm9sZGVycy10cmVlX19mb2xkZXItbm9kZSB7XG4gIGNvbG9yOiBpbmhlcml0ICFpbXBvcnRhbnQ7XG59XG5cbi5uZWV0by1zaWRlYmFyLWZvbGRlcnMtdHJlZS5hbnQtdHJlZSAuYW50LXRyZWUtbm9kZS1jb250ZW50LXdyYXBwZXIge1xuICBwYWRkaW5nLWlubGluZTogNnB4ICFpbXBvcnRhbnQ7XG4gIG1pbi13aWR0aDogMDtcbn1cblxuLm5lZXRvLXNpZGViYXItZm9sZGVycy10cmVlLmFudC10cmVlXG4gIC5hbnQtdHJlZS1ub2RlLWNvbnRlbnQtd3JhcHBlci5hbnQtdHJlZS1ub2RlLXNlbGVjdGVkIHtcbiAgY29sb3I6IHJnYih2YXIoLS1uZWV0by11aS1hY2NlbnQtODAwKSkgIWltcG9ydGFudDtcbiAgYmFja2dyb3VuZC1jb2xvcjogcmdiKHZhcigtLW5lZXRvLXVpLXdoaXRlKSk7XG4gIGZvbnQtd2VpZ2h0OiA1MDA7XG59XG5cbi5uZWV0by1zaWRlYmFyLWZvbGRlcnMtdHJlZS5hbnQtdHJlZVxuICAuYW50LXRyZWUtc3dpdGNoZXJcbiAgLmFudC10cmVlLXN3aXRjaGVyLWljb24ge1xuICBwb3NpdGlvbjogcmVsYXRpdmU7XG59XG5cbi5uZWV0by1mb2xkZXJzLWdyaWQtdmlldy13cmFwcGVyIHtcbiAgZ3JpZC10ZW1wbGF0ZS1jb2x1bW5zOiByZXBlYXQoYXV0by1maWxsLCBtaW5tYXgoMjU2cHgsIDFmcikpO1xufVxuIl19 */";
+var css = ".neeto-sidebar-folders-tree__folder-node{color:inherit!important}.neeto-sidebar-folders-tree.ant-tree .ant-tree-node-content-wrapper{min-width:0;padding-inline:2px!important}.neeto-sidebar-folders-tree.ant-tree .ant-tree-node-content-wrapper.ant-tree-node-selected{background-color:rgb(var(--neeto-ui-gray-100));color:rgb(var(--neeto-ui-accent-800))!important;font-weight:500}.neeto-sidebar-folders-tree.ant-tree .ant-tree-switcher{margin-right:0}.neeto-sidebar-folders-tree.ant-tree .ant-tree-switcher .ant-tree-switcher-icon{position:relative}.neeto-folders-grid-view-wrapper{grid-template-columns:repeat(auto-fill,minmax(256px,1fr))}.neeto-sidebar-folders-tree.ant-tree .ant-tree-node-content-wrapper:hover .neeto-sidebar-folders-tree__folder-node-actions{background-image:linear-gradient(90deg,rgba(var(--neeto-ui-gray-100),.5) 0,rgba(var(--neeto-ui-gray-100),1) 25%)}.neeto-sidebar-folders-tree.ant-tree .ant-tree-treenode{margin-bottom:6px}.neeto-sidebar-folders-tree.ant-tree .ant-tree-treenode:before{height:6px}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFwcC9qYXZhc2NyaXB0L3NyYy9jb21wb25lbnRzL25lZXRvLWZvbGRlcnMtbmFuby5zY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLHlDQUNFLHVCQUNGLENBRUEsb0VBRUUsV0FBQSxDQURBLDRCQUVGLENBRUEsMkZBRUUsOENBQUEsQ0FEQSwrQ0FBQSxDQUVBLGVBQ0YsQ0FFQSx3REFDRSxjQUNGLENBRUEsZ0ZBQ0UsaUJBQ0YsQ0FFQSxpQ0FDRSx5REFDRixDQUVBLDJIQUNFLGdIQUNGLENBRUEsd0RBQ0UsaUJBQ0YsQ0FFQSwrREFDRSxVQUNGIiwic291cmNlc0NvbnRlbnQiOlsiLm5lZXRvLXNpZGViYXItZm9sZGVycy10cmVlX19mb2xkZXItbm9kZSB7XG4gIGNvbG9yOiBpbmhlcml0ICFpbXBvcnRhbnQ7XG59XG5cbi5uZWV0by1zaWRlYmFyLWZvbGRlcnMtdHJlZS5hbnQtdHJlZSAuYW50LXRyZWUtbm9kZS1jb250ZW50LXdyYXBwZXIge1xuICBwYWRkaW5nLWlubGluZTogMnB4ICFpbXBvcnRhbnQ7XG4gIG1pbi13aWR0aDogMDtcbn1cblxuLm5lZXRvLXNpZGViYXItZm9sZGVycy10cmVlLmFudC10cmVlIC5hbnQtdHJlZS1ub2RlLWNvbnRlbnQtd3JhcHBlci5hbnQtdHJlZS1ub2RlLXNlbGVjdGVkIHtcbiAgY29sb3I6IHJnYih2YXIoLS1uZWV0by11aS1hY2NlbnQtODAwKSkgIWltcG9ydGFudDtcbiAgYmFja2dyb3VuZC1jb2xvcjogcmdiKHZhcigtLW5lZXRvLXVpLWdyYXktMTAwKSk7XG4gIGZvbnQtd2VpZ2h0OiA1MDA7XG59XG5cbi5uZWV0by1zaWRlYmFyLWZvbGRlcnMtdHJlZS5hbnQtdHJlZSAuYW50LXRyZWUtc3dpdGNoZXIge1xuICBtYXJnaW4tcmlnaHQ6IDA7XG59XG5cbi5uZWV0by1zaWRlYmFyLWZvbGRlcnMtdHJlZS5hbnQtdHJlZSAuYW50LXRyZWUtc3dpdGNoZXIgLmFudC10cmVlLXN3aXRjaGVyLWljb24ge1xuICBwb3NpdGlvbjogcmVsYXRpdmU7XG59XG5cbi5uZWV0by1mb2xkZXJzLWdyaWQtdmlldy13cmFwcGVyIHtcbiAgZ3JpZC10ZW1wbGF0ZS1jb2x1bW5zOiByZXBlYXQoYXV0by1maWxsLCBtaW5tYXgoMjU2cHgsIDFmcikpO1xufVxuXG4ubmVldG8tc2lkZWJhci1mb2xkZXJzLXRyZWUuYW50LXRyZWUgLmFudC10cmVlLW5vZGUtY29udGVudC13cmFwcGVyOmhvdmVyIC5uZWV0by1zaWRlYmFyLWZvbGRlcnMtdHJlZV9fZm9sZGVyLW5vZGUtYWN0aW9ucyB7XG4gIGJhY2tncm91bmQtaW1hZ2U6IGxpbmVhci1ncmFkaWVudCg5MGRlZywgcmdiYSh2YXIoLS1uZWV0by11aS1ncmF5LTEwMCksIC41KSAwLCByZ2JhKHZhcigtLW5lZXRvLXVpLWdyYXktMTAwKSwgMSkgMjUlKTtcbn1cblxuLm5lZXRvLXNpZGViYXItZm9sZGVycy10cmVlLmFudC10cmVlIC5hbnQtdHJlZS10cmVlbm9kZSB7XG4gIG1hcmdpbi1ib3R0b206IDZweDtcbn1cblxuLm5lZXRvLXNpZGViYXItZm9sZGVycy10cmVlLmFudC10cmVlIC5hbnQtdHJlZS10cmVlbm9kZTo6YmVmb3JlIHtcbiAgaGVpZ2h0OiA2cHg7XG59Il19 */";
 n(css,{});
 
 exports.AddEditPane = AddEditPane;