@bigbinary/neeto-folders-frontend 2.0.10 → 2.0.12

package/dist/components.js

@@ -7,44 +7,44 @@ import { buildUrl, showThumbsUpToastr } from '@bigbinary/neeto-commons-frontend/
 import Alert from '@bigbinary/neetoui/Alert';
 import { useTranslation as useTranslation$1, Trans } from 'react-i18next';
 import { useHistory, Link, NavLink } from 'react-router-dom';
-import { c as useFolderStore, d as useDestroyFolder, a as useFolders, e as useFetchFolders, f as useCreateFolder, g as useUpdateFolder, h as useReorderFolders, D as DEFAULT_CONFIG, u as useFolder, b as useFolderActions } from './useFolderActions-DQUMayG_.js';
+import { c as useFolderStore, d as useDestroyFolder, a as useFolders, e as useFetchFolders, f as useCreateFolder, g as useUpdateFolder, h as useReorderFolders, D as DEFAULT_CONFIG, u as useFolder, b as useFolderActions } from './useFolderActions--QXsOnUm.js';
 import { QUERY_KEYS } from './constants.js';
-import { p as pathToFolder, t as treeToMap, m as measureDepth, a as mapToTree, b as mapToSortedTree } from './index-CO0LgS5v.js';
-import { a as isActiveFolder, m as mapObj, g as getActiveFolderId, i as isArray } from './internal-B2c8gwOa.js';
+import { p as pathToFolder, t as treeToMap, m as measureDepth, a as mapToTree, b as mapToSortedTree } from './index-DWQZ8Va7.js';
+import { a as isActiveFolder, i as isArray, g as getActiveFolderId, m as mapObj } from './internal-PLqSv_EP.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import Pane from '@bigbinary/neetoui/Pane';
 import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
 import _regeneratorRuntime from '@babel/runtime/regenerator';
-import React, { createElement, forwardRef, useMemo, useState, useId, useEffect, startTransition } from 'react';
+import React, { createElement, useMemo, forwardRef, useState, useId, useEffect, startTransition } from 'react';
 import Typography from '@bigbinary/neetoui/Typography';
 import Spinner from '@bigbinary/neetoui/Spinner';
 import Input from '@bigbinary/neetoui/formik/Input';
 import ActionBlock from '@bigbinary/neetoui/formik/ActionBlock';
 import Form from '@bigbinary/neetoui/formik/Form';
+import { isEmpty, assoc } from 'ramda';
 import { t as t$1 } from 'i18next';
 import { object, string } from 'yup';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import Switch from '@bigbinary/neetoui/formik/Switch';
 import Textarea from '@bigbinary/neetoui/formik/Textarea';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { ConfigProvider, TreeSelect as TreeSelect$1 } from 'antd';
-import classNames from 'classnames';
-import { useField } from 'formik';
-import Down from '@bigbinary/neeto-icons/Down';
-import Label from '@bigbinary/neetoui/Label';
 import useHotkeys from '@bigbinary/neeto-hotkeys';
 import Button from '@bigbinary/neetoui/Button';
-import { noop, isNotPresent } from '@bigbinary/neeto-cist';
+import { hyphenate, noop, isNotPresent } from '@bigbinary/neeto-cist';
+import classNames from 'classnames';
 import Radio from '@bigbinary/neetoui/Radio';
 import { useDraggable, useDroppable, DndContext, DragOverlay, useSensors, useSensor, PointerSensor } from '@dnd-kit/core';
 import Reorder from '@bigbinary/neeto-icons/Reorder';
 import Toastr from '@bigbinary/neetoui/Toastr';
-import { isEmpty, assoc } from 'ramda';
 import { createPortal } from 'react-dom';
 import MoreDropdown from '@bigbinary/neeto-molecules/MoreDropdown';
 import Checkbox from '@bigbinary/neetoui/Checkbox';
 import Tree from '@bigbinary/neetoui/Tree';
 import Lock from '@bigbinary/neeto-icons/Lock';
+import { ConfigProvider, TreeSelect as TreeSelect$1 } from 'antd';
+import { useField } from 'formik';
+import Down from '@bigbinary/neeto-icons/Down';
+import Label from '@bigbinary/neetoui/Label';
 import 'zustand';
 
 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; }
@@ -168,146 +168,6 @@ var ExtraAttributes = function ExtraAttributes(_ref) {
   });
 };
 
-var _excluded$5 = ["className", "disabled", "fieldNames", "label", "loading", "name", "placeholder", "required", "showSearch", "size", "treeData"];
-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 TreeSelect = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var _fieldNames$label;
-  var className = _ref.className,
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-    fieldNames = _ref.fieldNames,
-    _ref$label = _ref.label,
-    label = _ref$label === void 0 ? "" : _ref$label,
-    _ref$loading = _ref.loading,
-    loading = _ref$loading === void 0 ? false : _ref$loading,
-    name = _ref.name,
-    _ref$placeholder = _ref.placeholder,
-    placeholder = _ref$placeholder === void 0 ? "" : _ref$placeholder,
-    _ref$required = _ref.required,
-    required = _ref$required === void 0 ? false : _ref$required,
-    _ref$showSearch = _ref.showSearch,
-    showSearch = _ref$showSearch === void 0 ? true : _ref$showSearch,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? "middle" : _ref$size,
-    treeData = _ref.treeData,
-    otherProps = _objectWithoutProperties(_ref, _excluded$5);
-  var _useField = useField(name),
-    _useField2 = _slicedToArray(_useField, 3),
-    field = _useField2[0],
-    meta = _useField2[1],
-    _useField2$ = _useField2[2],
-    setValue = _useField2$.setValue,
-    setTouched = _useField2$.setTouched;
-  var hasLeafNodes = treeData === null || treeData === void 0 ? void 0 : treeData.some(function (node) {
-    return (node === null || node === void 0 ? void 0 : node.pId) !== null;
-  });
-  return /*#__PURE__*/jsxs("div", {
-    className: "neeto-ui-input__wrapper",
-    children: [label && /*#__PURE__*/jsx(Label, {
-      required: required,
-      children: label
-    }), /*#__PURE__*/jsx(ConfigProvider, {
-      theme: {
-        token: {
-          colorBgContainer: "rgb(var(--neeto-ui-white))",
-          colorBorder: "rgb(var(--neeto-ui-gray-300))",
-          colorBorderSecondary: "rgb(var(--neeto-ui-gray-200))",
-          colorFillAlter: "rgb(var(--neeto-ui-gray-100))",
-          colorFillContent: "rgb(var(--neeto-ui-gray-100))",
-          colorFillSecondary: "rgb(var(--neeto-ui-gray-100))",
-          colorIcon: "rgb(var(--neeto-ui-gray-700))",
-          colorIconHover: "rgb(var(--neeto-ui-gray-800))",
-          colorLink: "rgb(var(--neeto-ui-primary-500))",
-          colorLinkActive: "rgb(var(--neeto-ui-primary-800))",
-          colorLinkHover: "rgb(var(--neeto-ui-primary-600))",
-          colorPrimary: "rgb(var(--neeto-ui-primary-500))",
-          colorSplit: "rgb(var(--neeto-ui-gray-100))",
-          colorText: "rgb(var(--neeto-ui-gray-800))",
-          colorTextDescription: "rgb(var(--neeto-ui-gray-700))",
-          colorTextDisabled: "rgb(var(--neeto-ui-gray-600))",
-          colorTextHeading: "rgb(var(--neeto-ui-black))",
-          colorTextPlaceholder: "rgb(var(--neeto-ui-gray-500))",
-          controlItemBgActive: "rgb(var(--neeto-ui-primary-100))",
-          controlItemBgActiveHover: "rgb(var(--neeto-ui-pastel-purple))",
-          controlItemBgHover: "rgb(var(--neeto-ui-gray-100))"
-        },
-        components: {
-          TreeSelect: {
-            titleHeight: 28,
-            indentSize: 28,
-            nodeHoverBg: "rgb(var(--neeto-ui-gray-100))",
-            nodeSelectedBg: "rgb(var(--neeto-ui-primary-500))",
-            colorBgElevated: "rgb(var(--neeto-ui-white))"
-          }
-        }
-      },
-      children: /*#__PURE__*/jsx(TreeSelect$1, _objectSpread$b(_objectSpread$b({
-        treeDataSimpleMode: true,
-        "data-cy": "nui-select-container-wrapper",
-        dropdownStyle: {
-          zIndex: 100000
-        },
-        name: field.name,
-        popupClassName: "neeto-ui-tree-select-dropdown",
-        suffixIcon: /*#__PURE__*/jsx(Down, {}),
-        treeNodeFilterProp: (_fieldNames$label = fieldNames === null || fieldNames === void 0 ? void 0 : fieldNames.label) !== null && _fieldNames$label !== void 0 ? _fieldNames$label : "title",
-        value: field.value || undefined,
-        className: classNames("neeto-ui-tree-select__wrapper nf-tree-select", className, {
-          "neeto-ui-tree-select__error": meta.error
-        }),
-        switcherIcon: function switcherIcon(props) {
-          return /*#__PURE__*/jsx("div", _objectSpread$b(_objectSpread$b({}, props), {}, {
-            children: /*#__PURE__*/jsx(Down, {
-              className: "relative"
-            })
-          }));
-        },
-        onBlur: function onBlur() {
-          return setTouched(true);
-        },
-        onChange: function onChange(value) {
-          return setValue(value !== null && value !== void 0 ? value : null);
-        }
-      }, _objectSpread$b({
-        disabled: disabled,
-        fieldNames: fieldNames,
-        loading: loading,
-        placeholder: placeholder,
-        ref: ref,
-        showSearch: showSearch,
-        size: size,
-        treeData: treeData
-      }, otherProps)), {}, {
-        dropdownRender: function dropdownRender(menu) {
-          return hasLeafNodes ? menu : /*#__PURE__*/jsx("div", {
-            className: "-mx-5 -ml-6",
-            children: menu
-          });
-        }
-      }))
-    }), meta.error && /*#__PURE__*/jsx("p", {
-      className: "neeto-ui-input__error",
-      children: meta.error
-    })]
-  });
-});
-TreeSelect.displayName = "TreeSelect";
-
-var createFolderOptions = function createFolderOptions(foldersMap, activeFolder, config) {
-  return mapObj(foldersMap, function (folder) {
-    var _folder$meta$parent;
-    return {
-      id: folder.id,
-      title: folder.name,
-      value: folder.id,
-      pId: (_folder$meta$parent = folder.meta.parent) === null || _folder$meta$parent === void 0 ? void 0 : _folder$meta$parent.id,
-      disabled: folder.meta.depth >= config.maxDepth
-    };
-  }, function (folder) {
-    return folder.id !== (activeFolder === null || activeFolder === void 0 ? void 0 : activeFolder.id);
-  });
-};
 var createInitialValues = function createInitialValues(defaults, extraAttrs) {
   var values = {
     name: "",
@@ -348,20 +208,12 @@ var AddEditPane = function AddEditPane(_ref) {
     type = _useFolderStore.type,
     item = _useFolderStore.item;
   var _useFetchFolders = useFetchFolders(config),
-    folders = _useFetchFolders.data,
     isFetching = _useFetchFolders.isFetching;
   var _useCreateFolder = useCreateFolder(config),
     createFolder = _useCreateFolder.mutate;
   var _useUpdateFolder = useUpdateFolder(config),
     updateFolder = _useUpdateFolder.mutateAsync;
   var isEditing = type === "edit" && item;
-  var foldersMap = useMemo(function () {
-    return treeToMap(folders, "sid");
-  }, [folders]);
-  var activeFolderSid = getActiveFolderId(config);
-  var activeFolder = foldersMap[activeFolderSid];
-  var isValidParent = (activeFolder === null || activeFolder === void 0 ? void 0 : activeFolder.meta.depth) < config.maxDepth;
-  var parentId = isValidParent ? activeFolder.id : null;
   var extraAttributes = config.extraAttributes;
   var handleError = function handleError(setStatus, error) {
     var response = error.response;
@@ -418,14 +270,9 @@ var AddEditPane = function AddEditPane(_ref) {
       return _ref3.apply(this, arguments);
     };
   }();
-  var folderOptions = useMemo(function () {
-    return createFolderOptions(foldersMap, item, config);
-  }, [foldersMap, item]);
   var initialValues = useMemo(function () {
-    return isEditing ? item : createInitialValues({
-      parentId: parentId
-    }, extraAttributes);
-  }, [isEditing, item, parentId, extraAttributes]);
+    return isEditing ? item : createInitialValues({}, extraAttributes);
+  }, [isEditing, item, extraAttributes]);
   if (isFetching) {
     return /*#__PURE__*/jsx(Pane.Body, {
       className: "flex items-center justify-center",
@@ -462,11 +309,11 @@ var AddEditPane = function AddEditPane(_ref) {
                 attributes: extraAttributes
               }), /*#__PURE__*/jsxs("div", {
                 children: [/*#__PURE__*/jsx(TreeSelect, {
+                  config: config,
                   allowClear: true,
                   showSearch: true,
                   label: t("createFolder.parentTitle"),
-                  name: "parentId",
-                  treeData: folderOptions
+                  name: "parentId"
                 }), /*#__PURE__*/jsx(Typography, {
                   className: "mt-1",
                   style: "body3",
@@ -492,9 +339,9 @@ var AddEditPane = function AddEditPane(_ref) {
 
 var REORDER_TREE_INDENT_WIDTH = 30;
 
-var _excluded$4 = ["icon", "itemLabel", "folder", "folderLabel", "depth", "className", "onClick"];
-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 _excluded$5 = ["icon", "itemLabel", "folder", "folderLabel", "depth", "className", "onClick"];
+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 Node = function Node(_ref, ref) {
   var _folder$children$leng, _folder$children;
   var _ref$icon = _ref.icon,
@@ -505,7 +352,7 @@ var Node = function Node(_ref, ref) {
     depth = _ref.depth,
     className = _ref.className,
     onClick = _ref.onClick,
-    rest = _objectWithoutProperties(_ref, _excluded$4);
+    rest = _objectWithoutProperties(_ref, _excluded$5);
   var metaInfo = [];
   var childCount = (_folder$children$leng = (_folder$children = folder.children) === null || _folder$children === void 0 ? void 0 : _folder$children.length) !== null && _folder$children$leng !== void 0 ? _folder$children$leng : 0;
   childCount > 0 && metaInfo.push("".concat(childCount, " ").concat(folderLabel).toLowerCase());
@@ -522,10 +369,11 @@ var Node = function Node(_ref, ref) {
           left: Math.round(REORDER_TREE_INDENT_WIDTH / 2)
         }
       }, index);
-    }), /*#__PURE__*/jsxs("div", _objectSpread$a(_objectSpread$a({}, _objectSpread$a(_objectSpread$a({}, rest), {}, {
+    }), /*#__PURE__*/jsxs("div", _objectSpread$b(_objectSpread$b({}, _objectSpread$b(_objectSpread$b({}, rest), {}, {
       onClick: onClick,
       ref: ref
     })), {}, {
+      "data-cy": "".concat(hyphenate(folder.name), "-folder-node"),
       className: classNames("relative my-1 flex cursor-pointer items-center px-2 py-1", className),
       children: [icon, /*#__PURE__*/jsxs("div", {
         className: "ml-2",
@@ -547,9 +395,9 @@ var Node = function Node(_ref, ref) {
 };
 var Node$1 = /*#__PURE__*/forwardRef(Node);
 
-var _excluded$3 = ["folder", "item", "depth", "maxDepth", "disabled", "config"];
-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 _excluded$4 = ["folder", "item", "depth", "maxDepth", "disabled", "config"];
+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 _SelectableNode = function SelectableNode(_ref) {
   var _folder$children$leng, _folder$children;
   var folder = _ref.folder,
@@ -559,7 +407,7 @@ var _SelectableNode = function SelectableNode(_ref) {
     maxDepth = _ref.maxDepth,
     disabled = _ref.disabled,
     config = _ref.config,
-    rest = _objectWithoutProperties(_ref, _excluded$3);
+    rest = _objectWithoutProperties(_ref, _excluded$4);
   var selection = rest.selection,
     onSelect = rest.onSelect;
   var _useTranslation = useTranslation(config),
@@ -570,7 +418,7 @@ var _SelectableNode = function SelectableNode(_ref) {
   var renderChildren = function renderChildren() {
     if (isNotPresent(folder.children)) return null;
     return folder.children.map(function (child) {
-      return /*#__PURE__*/createElement(_SelectableNode, _objectSpread$9(_objectSpread$9({}, _objectSpread$9(_objectSpread$9({}, rest), {}, {
+      return /*#__PURE__*/createElement(_SelectableNode, _objectSpread$a(_objectSpread$a({}, _objectSpread$a(_objectSpread$a({}, rest), {}, {
         config: config,
         item: item,
         maxDepth: maxDepth
@@ -588,7 +436,7 @@ var _SelectableNode = function SelectableNode(_ref) {
       "opacity-60": isDisabled
     }),
     title: isDisabled ? t("moveToFolder.notAllowed") : undefined,
-    children: [/*#__PURE__*/jsx(Node$1, _objectSpread$9(_objectSpread$9({}, _objectSpread$9(_objectSpread$9({}, rest), {}, {
+    children: [/*#__PURE__*/jsx(Node$1, _objectSpread$a(_objectSpread$a({}, _objectSpread$a(_objectSpread$a({}, rest), {}, {
       depth: depth,
       folder: folder,
       folderLabel: folderLabel,
@@ -598,6 +446,7 @@ var _SelectableNode = function SelectableNode(_ref) {
         readOnly: true,
         checked: selection === folder.id,
         className: "neeto-ui-radio__container",
+        "data-cy": "".concat(hyphenate(folder.name), "-folder-option"),
         name: "move-folder-option"
       }),
       onClick: isDisabled ? noop : function () {
@@ -607,8 +456,8 @@ var _SelectableNode = function SelectableNode(_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$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 PaneBody = function PaneBody(_ref) {
   var item = _ref.item,
     config = _ref.config,
@@ -684,6 +533,7 @@ var PaneBody = function PaneBody(_ref) {
         children: t("moveToFolder.title")
       }), /*#__PURE__*/jsx(Button, {
         className: "mr-2",
+        "data-cy": "add-new-folder-button",
         label: t("folders.add"),
         style: "link",
         onClick: onAddFolder
@@ -708,23 +558,29 @@ var PaneBody = function PaneBody(_ref) {
       className: "space-x-2",
       children: [/*#__PURE__*/jsxs("div", {
         className: "flex flex-1 space-x-2",
-        children: [/*#__PURE__*/jsx(Button, _objectSpread$8({
+        children: [/*#__PURE__*/jsx(Button, _objectSpread$9(_objectSpread$9({
           disabled: selection === undefined,
           label: t("common.save"),
           style: "primary",
           onClick: function onClick() {
             return onSubmit(selection);
           }
-        }, submitButtonProps)), /*#__PURE__*/jsx(Button, _objectSpread$8({
+        }, submitButtonProps), {}, {
+          "data-cy": "save-changes-button"
+        })), /*#__PURE__*/jsx(Button, _objectSpread$9(_objectSpread$9({
           label: t("common.cancel"),
           style: "text",
           onClick: onClose
-        }, cancelButtonProps))]
-      }), onRemove && /*#__PURE__*/jsx(Button, _objectSpread$8({
+        }, cancelButtonProps), {}, {
+          "data-cy": "cancel-button"
+        }))]
+      }), onRemove && /*#__PURE__*/jsx(Button, _objectSpread$9(_objectSpread$9({
         label: t("moveToFolder.remove"),
         style: "tertiary",
         onClick: onRemove
-      }, removeButtonProps))]
+      }, removeButtonProps), {}, {
+        "data-cy": "remove-from-folder-button"
+      }))]
     })]
   });
 };
@@ -765,9 +621,9 @@ var MoveFolderPane = function MoveFolderPane(_ref) {
   });
 };
 
-var _excluded$2 = ["folder", "depth", "config", "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; }
+var _excluded$3 = ["folder", "depth", "config", "folderLabel", "itemLabel"];
+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 _DraggableNode$1 = function DraggableNode(_ref) {
   var folder = _ref.folder,
     _ref$depth = _ref.depth,
@@ -775,7 +631,7 @@ var _DraggableNode$1 = function DraggableNode(_ref) {
     config = _ref.config,
     folderLabel = _ref.folderLabel,
     itemLabel = _ref.itemLabel,
-    rest = _objectWithoutProperties(_ref, _excluded$2);
+    rest = _objectWithoutProperties(_ref, _excluded$3);
   var _useDraggable = useDraggable({
       id: "draggable-item--".concat(folder.id),
       data: folder,
@@ -796,7 +652,7 @@ var _DraggableNode$1 = function DraggableNode(_ref) {
     if (isNotPresent(folder.children) || isDragging) return null;
     return folder.children.map(function (child) {
       var _child$children$lengt, _child$children;
-      return /*#__PURE__*/createElement(_DraggableNode$1, _objectSpread$7(_objectSpread$7({}, _objectSpread$7(_objectSpread$7({}, rest), {}, {
+      return /*#__PURE__*/createElement(_DraggableNode$1, _objectSpread$8(_objectSpread$8({}, _objectSpread$8(_objectSpread$8({}, rest), {}, {
         config: config
       })), {}, {
         depth: depth + 1,
@@ -808,14 +664,14 @@ var _DraggableNode$1 = function DraggableNode(_ref) {
     });
   };
   return /*#__PURE__*/jsxs(Fragment, {
-    children: [/*#__PURE__*/jsx(Node$1, _objectSpread$7(_objectSpread$7(_objectSpread$7({}, rest), {}, {
+    children: [/*#__PURE__*/jsx(Node$1, _objectSpread$8(_objectSpread$8(_objectSpread$8({}, 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$7(_objectSpread$7(_objectSpread$7({
+    }, _objectSpread$8(_objectSpread$8(_objectSpread$8({
       depth: depth,
       folder: folder
     }, attributes), listeners), {}, {
@@ -830,8 +686,8 @@ var _DraggableNode$1 = 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$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 RearrangeFoldersPane = function RearrangeFoldersPane(_ref) {
   var _tree$children$length, _tree$children, _dragItem$children$le, _dragItem$children;
   var config = _ref.config,
@@ -937,7 +793,7 @@ var RearrangeFoldersPane = function RearrangeFoldersPane(_ref) {
       },
       children: [/*#__PURE__*/jsx(Pane.Body, {
         className: "pb-6",
-        children: /*#__PURE__*/createElement(_DraggableNode$1, _objectSpread$6(_objectSpread$6({}, _objectSpread$6(_objectSpread$6({}, nodeProps), {}, {
+        children: /*#__PURE__*/createElement(_DraggableNode$1, _objectSpread$7(_objectSpread$7({}, _objectSpread$7(_objectSpread$7({}, nodeProps), {}, {
           config: config
         })), {}, {
           folder: tree,
@@ -959,7 +815,7 @@ var RearrangeFoldersPane = function RearrangeFoldersPane(_ref) {
         })]
       }), /*#__PURE__*/createPortal(/*#__PURE__*/jsx(DragOverlay, {
         zIndex: 99999,
-        children: dragItem && /*#__PURE__*/jsx(Node$1, _objectSpread$6(_objectSpread$6({}, nodeProps), {}, {
+        children: dragItem && /*#__PURE__*/jsx(Node$1, _objectSpread$7(_objectSpread$7({}, nodeProps), {}, {
           className: "neeto-ui-bg-gray-200",
           depth: 0,
           folder: dragItem,
@@ -1062,9 +918,9 @@ var PlaceholderNode = function PlaceholderNode(_ref) {
   });
 };
 
-var _excluded$1 = ["folder", "config", "dragState", "folderLabel", "itemLabel"];
-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 _excluded$2 = ["folder", "config", "dragState", "folderLabel", "itemLabel"];
+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 _DraggableNode = function DraggableNode(_ref) {
   var _overItem$meta$parent;
   var folder = _ref.folder,
@@ -1072,7 +928,7 @@ var _DraggableNode = function DraggableNode(_ref) {
     dragState = _ref.dragState,
     folderLabel = _ref.folderLabel,
     itemLabel = _ref.itemLabel,
-    rest = _objectWithoutProperties(_ref, _excluded$1);
+    rest = _objectWithoutProperties(_ref, _excluded$2);
   var overItem = dragState.overItem;
   var isOverItem = folder.id === (overItem === null || overItem === void 0 ? void 0 : overItem.id);
   var isOverParent = folder.id === (overItem === null || overItem === void 0 || (_overItem$meta$parent = overItem.meta.parent) === null || _overItem$meta$parent === void 0 ? void 0 : _overItem$meta$parent.id);
@@ -1100,7 +956,7 @@ var _DraggableNode = function DraggableNode(_ref) {
         folder: folder
       }), isArray(folder.children) && folder.children.map(function (child) {
         var _child$children$lengt, _child$children;
-        return /*#__PURE__*/createElement(_DraggableNode, _objectSpread$5(_objectSpread$5({}, _objectSpread$5(_objectSpread$5({}, rest), {}, {
+        return /*#__PURE__*/createElement(_DraggableNode, _objectSpread$6(_objectSpread$6({}, _objectSpread$6(_objectSpread$6({}, rest), {}, {
           config: config,
           dragState: dragState
         })), {}, {
@@ -1114,9 +970,9 @@ var _DraggableNode = function DraggableNode(_ref) {
     }, "".concat(folder.id, "--container"));
   };
   return /*#__PURE__*/jsxs(Fragment, {
-    children: [/*#__PURE__*/jsx(Node$1, _objectSpread$5(_objectSpread$5({
+    children: [/*#__PURE__*/jsx(Node$1, _objectSpread$6(_objectSpread$6({
       depth: folder.meta.depth
-    }, _objectSpread$5(_objectSpread$5(_objectSpread$5(_objectSpread$5({}, rest), {}, {
+    }, _objectSpread$6(_objectSpread$6(_objectSpread$6(_objectSpread$6({}, rest), {}, {
       folder: folder
     }, attributes), listeners), {}, {
       folderLabel: folderLabel,
@@ -1136,8 +992,8 @@ var _DraggableNode = function DraggableNode(_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$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 initialDragState = {
   activeItem: null,
   overItem: null
@@ -1279,7 +1135,7 @@ var ReorderFoldersPane = function ReorderFoldersPane(_ref) {
       },
       children: [/*#__PURE__*/jsx(Pane.Body, {
         className: "pb-6",
-        children: /*#__PURE__*/createElement(_DraggableNode, _objectSpread$4(_objectSpread$4({}, _objectSpread$4(_objectSpread$4({}, nodeProps), {}, {
+        children: /*#__PURE__*/createElement(_DraggableNode, _objectSpread$5(_objectSpread$5({}, _objectSpread$5(_objectSpread$5({}, nodeProps), {}, {
           config: config,
           dragState: dragState
         })), {}, {
@@ -1302,7 +1158,7 @@ var ReorderFoldersPane = function ReorderFoldersPane(_ref) {
         })]
       }), /*#__PURE__*/createPortal(/*#__PURE__*/jsx(DragOverlay, {
         zIndex: 99999,
-        children: dragState && /*#__PURE__*/jsx(Node$1, _objectSpread$4(_objectSpread$4({}, nodeProps), {}, {
+        children: dragState && /*#__PURE__*/jsx(Node$1, _objectSpread$5(_objectSpread$5({}, nodeProps), {}, {
           className: "neeto-ui-bg-gray-200 pl-4 pr-12",
           depth: 0,
           folder: dragState.activeItem,
@@ -1314,11 +1170,11 @@ var ReorderFoldersPane = function ReorderFoldersPane(_ref) {
   });
 };
 
-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$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 FoldersPane = function FoldersPane(_ref) {
   var configProps = _ref.config;
-  var config = _objectSpread$3(_objectSpread$3({}, DEFAULT_CONFIG), configProps);
+  var config = _objectSpread$4(_objectSpread$4({}, DEFAULT_CONFIG), configProps);
   var _useFolderStore = useFolderStore(function (store) {
       return {
         setFolderState: store["setFolderState"]
@@ -1348,9 +1204,9 @@ var FoldersPane = function FoldersPane(_ref) {
     children: function children(_ref2) {
       var setFocusField = _ref2.setFocusField;
       return /*#__PURE__*/jsxs(Fragment, {
-        children: [(type === "edit" || type === "add") && /*#__PURE__*/jsx(AddEditPane, _objectSpread$3({}, _objectSpread$3({
+        children: [(type === "edit" || type === "add") && /*#__PURE__*/jsx(AddEditPane, _objectSpread$4({}, _objectSpread$4({
           setFocusField: setFocusField
-        }, commonProps))), type === "move" && /*#__PURE__*/jsx(MoveFolderPane, _objectSpread$3({}, commonProps)), type === "reorder" && /*#__PURE__*/jsx(ReorderPaneComponent, _objectSpread$3({}, commonProps))]
+        }, commonProps))), type === "move" && /*#__PURE__*/jsx(MoveFolderPane, _objectSpread$4({}, commonProps)), type === "reorder" && /*#__PURE__*/jsx(ReorderPaneComponent, _objectSpread$4({}, commonProps))]
       });
     }
   });
@@ -1405,6 +1261,7 @@ var FolderTile = function FolderTile(_ref) {
   metaInfo.push("".concat(folder.itemCount || 0, " ").concat(itemLabel).toLowerCase());
   return /*#__PURE__*/jsxs(Link, {
     className: "neeto-ui-bg-gray-50 neeto-ui-border-gray-200 neeto-ui-rounded-md hover:neeto-ui-border-primary-500 relative flex max-w-full items-start gap-2 border-2 p-3 transition-colors ease-in",
+    "data-cy": "".concat(hyphenate(folder.name), "-folder-tile"),
     to: link,
     children: [/*#__PURE__*/jsx(Checkbox, {
       checked: isSelected,
@@ -1420,6 +1277,7 @@ var FolderTile = function FolderTile(_ref) {
       className: "flex min-w-0 flex-grow flex-col gap-2",
       children: [/*#__PURE__*/jsx(Typography, {
         className: "-mt-0.5 line-clamp-2 break-words pr-8",
+        "data-cy": "folder-name",
         lineHeight: "snug",
         style: "body1",
         title: folder.name,
@@ -1444,14 +1302,14 @@ var FolderTile = function FolderTile(_ref) {
   });
 };
 
-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; }
+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 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$2(_objectSpread$2({}, DEFAULT_CONFIG), configProps);
+  var config = _objectSpread$3(_objectSpread$3({}, DEFAULT_CONFIG), configProps);
   var params = useQueryParams();
   var _useTranslation = useTranslation(config),
     t = _useTranslation.t;
@@ -1470,6 +1328,7 @@ var FoldersList = function FoldersList(_ref) {
       children: t("folders.title")
     }), /*#__PURE__*/jsx("div", {
       className: "neeto-folders-grid-view-wrapper mb-10 grid w-full gap-4",
+      "data-cy": "folders-list",
       children: subFolders.map(function (folder) {
         return /*#__PURE__*/createElement(FolderTile, {
           actions: actions,
@@ -1478,7 +1337,7 @@ var FoldersList = function FoldersList(_ref) {
           onSelect: onSelect,
           isSelected: selection.includes(folder.id),
           key: folder.id,
-          link: buildUrl(config.folderPath, _objectSpread$2(_objectSpread$2({}, params), {}, {
+          link: buildUrl(config.folderPath, _objectSpread$3(_objectSpread$3({}, params), {}, {
             folderId: folder.sid
           }))
         });
@@ -1487,17 +1346,17 @@ var FoldersList = function FoldersList(_ref) {
   });
 };
 
-var _excluded = ["isOpen", "onClose"];
-function ownKeys$1(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$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var _excluded$1 = ["isOpen", "onClose"];
+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 MoveToFolderPane = function MoveToFolderPane(_ref) {
   var isOpen = _ref.isOpen,
     onClose = _ref.onClose,
-    rest = _objectWithoutProperties(_ref, _excluded);
+    rest = _objectWithoutProperties(_ref, _excluded$1);
   return /*#__PURE__*/jsx(Pane, {
     isOpen: isOpen,
     onClose: onClose,
-    children: /*#__PURE__*/jsx(PaneBody, _objectSpread$1({}, _objectSpread$1(_objectSpread$1({}, rest), {}, {
+    children: /*#__PURE__*/jsx(PaneBody, _objectSpread$2({}, _objectSpread$2(_objectSpread$2({}, rest), {}, {
       onClose: onClose
     })))
   });
@@ -1520,6 +1379,7 @@ var FolderNode = function FolderNode(_ref) {
     to: link,
     children: /*#__PURE__*/jsxs("div", {
       className: "flex items-center",
+      "data-cy": "".concat(hyphenate(name), "-folder-sublink"),
       children: [/*#__PURE__*/jsx(Typography, {
         className: "line-clamp-1 block truncate",
         component: "span",
@@ -1537,11 +1397,11 @@ var FolderNode = function FolderNode(_ref) {
   });
 };
 
-function ownKeys(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) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$1(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$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var FoldersTree = function FoldersTree(_ref) {
   var configProps = _ref.config;
-  var config = _objectSpread(_objectSpread({}, DEFAULT_CONFIG), configProps);
+  var config = _objectSpread$1(_objectSpread$1({}, DEFAULT_CONFIG), configProps);
   var _useState = useState([]),
     _useState2 = _slicedToArray(_useState, 2),
     expandedKeys = _useState2[0],
@@ -1616,7 +1476,7 @@ var FoldersTree = function FoldersTree(_ref) {
       return /*#__PURE__*/jsx(FolderNode, {
         folder: folder,
         isActive: folder.sid === activeFolderSid,
-        link: buildUrl(config.folderPath, _objectSpread(_objectSpread({}, params), {}, {
+        link: buildUrl(config.folderPath, _objectSpread$1(_objectSpread$1({}, params), {}, {
           folderId: folder.sid
         }))
       });
@@ -1625,10 +1485,164 @@ var FoldersTree = function FoldersTree(_ref) {
   });
 };
 
+var createFolderOptions = function createFolderOptions(foldersMap, config) {
+  return mapObj(foldersMap, function (folder) {
+    var _folder$meta$parent;
+    return {
+      id: folder.id,
+      title: folder.name,
+      value: folder.id,
+      pId: (_folder$meta$parent = folder.meta.parent) === null || _folder$meta$parent === void 0 ? void 0 : _folder$meta$parent.id,
+      disabled: folder.meta.depth >= config.maxDepth
+    };
+  });
+};
+
+var _excluded = ["className", "disabled", "fieldNames", "label", "loading", "name", "placeholder", "required", "showSearch", "size", "config"];
+function ownKeys(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) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var TreeSelect = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var _fieldNames$label;
+  var className = _ref.className,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    fieldNames = _ref.fieldNames,
+    _ref$label = _ref.label,
+    label = _ref$label === void 0 ? "" : _ref$label,
+    _ref$loading = _ref.loading,
+    loading = _ref$loading === void 0 ? false : _ref$loading,
+    name = _ref.name,
+    _ref$placeholder = _ref.placeholder,
+    placeholder = _ref$placeholder === void 0 ? "" : _ref$placeholder,
+    _ref$required = _ref.required,
+    required = _ref$required === void 0 ? false : _ref$required,
+    _ref$showSearch = _ref.showSearch,
+    showSearch = _ref$showSearch === void 0 ? true : _ref$showSearch,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? "middle" : _ref$size,
+    config = _ref.config,
+    otherProps = _objectWithoutProperties(_ref, _excluded);
+  var _useFetchFolders = useFetchFolders(config),
+    folders = _useFetchFolders.data;
+  var _useField = useField(name),
+    _useField2 = _slicedToArray(_useField, 3),
+    field = _useField2[0],
+    meta = _useField2[1],
+    _useField2$ = _useField2[2],
+    setValue = _useField2$.setValue,
+    setTouched = _useField2$.setTouched;
+  var foldersMap = useMemo(function () {
+    return folders ? treeToMap(folders, "sid") : null;
+  }, [folders]);
+  var activeFolderSid = getActiveFolderId(config);
+  var activeFolder = foldersMap[activeFolderSid];
+  var isValidParent = (activeFolder === null || activeFolder === void 0 ? void 0 : activeFolder.meta.depth) < config.maxDepth;
+  var parentId = isValidParent ? activeFolder.id : null;
+  useEffect(function () {
+    setValue(parentId);
+  }, [parentId]);
+  var folderOptions = useMemo(function () {
+    return createFolderOptions(foldersMap, config);
+  }, [foldersMap]);
+  var hasLeafNodes = folderOptions === null || folderOptions === void 0 ? void 0 : folderOptions.some(function (node) {
+    return (node === null || node === void 0 ? void 0 : node.pId) !== null;
+  });
+  return /*#__PURE__*/jsxs("div", {
+    className: "neeto-ui-input__wrapper",
+    children: [label && /*#__PURE__*/jsx(Label, {
+      required: required,
+      children: label
+    }), /*#__PURE__*/jsx(ConfigProvider, {
+      theme: {
+        token: {
+          colorBgContainer: "rgb(var(--neeto-ui-white))",
+          colorBorder: "rgb(var(--neeto-ui-gray-300))",
+          colorBorderSecondary: "rgb(var(--neeto-ui-gray-200))",
+          colorFillAlter: "rgb(var(--neeto-ui-gray-100))",
+          colorFillContent: "rgb(var(--neeto-ui-gray-100))",
+          colorFillSecondary: "rgb(var(--neeto-ui-gray-100))",
+          colorIcon: "rgb(var(--neeto-ui-gray-700))",
+          colorIconHover: "rgb(var(--neeto-ui-gray-800))",
+          colorLink: "rgb(var(--neeto-ui-primary-500))",
+          colorLinkActive: "rgb(var(--neeto-ui-primary-800))",
+          colorLinkHover: "rgb(var(--neeto-ui-primary-600))",
+          colorPrimary: "rgb(var(--neeto-ui-primary-500))",
+          colorSplit: "rgb(var(--neeto-ui-gray-100))",
+          colorText: "rgb(var(--neeto-ui-gray-800))",
+          colorTextDescription: "rgb(var(--neeto-ui-gray-700))",
+          colorTextDisabled: "rgb(var(--neeto-ui-gray-600))",
+          colorTextHeading: "rgb(var(--neeto-ui-black))",
+          colorTextPlaceholder: "rgb(var(--neeto-ui-gray-500))",
+          controlItemBgActive: "rgb(var(--neeto-ui-primary-100))",
+          controlItemBgActiveHover: "rgb(var(--neeto-ui-pastel-purple))",
+          controlItemBgHover: "rgb(var(--neeto-ui-gray-100))"
+        },
+        components: {
+          TreeSelect: {
+            titleHeight: 28,
+            indentSize: 28,
+            nodeHoverBg: "rgb(var(--neeto-ui-gray-100))",
+            nodeSelectedBg: "rgb(var(--neeto-ui-primary-500))",
+            colorBgElevated: "rgb(var(--neeto-ui-white))"
+          }
+        }
+      },
+      children: /*#__PURE__*/jsx(TreeSelect$1, _objectSpread(_objectSpread({
+        treeDataSimpleMode: true,
+        "data-cy": "nui-select-container-wrapper",
+        dropdownStyle: {
+          zIndex: 100000
+        },
+        name: field.name,
+        popupClassName: "neeto-ui-tree-select-dropdown",
+        suffixIcon: /*#__PURE__*/jsx(Down, {}),
+        treeData: folderOptions,
+        treeNodeFilterProp: (_fieldNames$label = fieldNames === null || fieldNames === void 0 ? void 0 : fieldNames.label) !== null && _fieldNames$label !== void 0 ? _fieldNames$label : "title",
+        value: field.value || undefined,
+        className: classNames("neeto-ui-tree-select__wrapper nf-tree-select", className, {
+          "neeto-ui-tree-select__error": meta.error
+        }),
+        switcherIcon: function switcherIcon(props) {
+          return /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({}, props), {}, {
+            children: /*#__PURE__*/jsx(Down, {
+              className: "relative"
+            })
+          }));
+        },
+        onBlur: function onBlur() {
+          return setTouched(true);
+        },
+        onChange: function onChange(value) {
+          return setValue(value !== null && value !== void 0 ? value : null);
+        }
+      }, _objectSpread({
+        disabled: disabled,
+        fieldNames: fieldNames,
+        loading: loading,
+        placeholder: placeholder,
+        ref: ref,
+        showSearch: showSearch,
+        size: size
+      }, otherProps)), {}, {
+        dropdownRender: function dropdownRender(menu) {
+          return hasLeafNodes ? menu : /*#__PURE__*/jsx("div", {
+            className: "-mx-5 -ml-6",
+            children: menu
+          });
+        }
+      }))
+    }), meta.error && /*#__PURE__*/jsx("p", {
+      className: "neeto-ui-input__error",
+      children: meta.error
+    })]
+  });
+});
+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))}.nf-tree-select .ant-select-clear{height:16px;margin-top:-8px;width:16px}.nf-tree-select .ant-select-clear svg{height:16px;width:16px}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFwcC9qYXZhc2NyaXB0L3NyYy9jb21wb25lbnRzL25lZXRvLWZvbGRlcnMtbmFuby5zY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLHlDQUNFLHVCQUNGLENBRUEsb0VBRUUsV0FBQSxDQURBLDRCQUVGLENBRUEsMkZBR0UsMkNBQUEsQ0FEQSwrQ0FBQSxDQUVBLGVBQUYsQ0FHQSxnRkFHRSxpQkFGRixDQUtBLGlDQUNFLHlEQUZGLENBTUUsa0NBRUUsV0FBQSxDQUNBLGVBQUEsQ0FGQSxVQURKLENBS0ksc0NBRUUsV0FBQSxDQURBLFVBRk4iLCJzb3VyY2VzQ29udGVudCI6WyIubmVldG8tc2lkZWJhci1mb2xkZXJzLXRyZWVfX2ZvbGRlci1ub2RlIHtcbiAgY29sb3I6IGluaGVyaXQgIWltcG9ydGFudDtcbn1cblxuLm5lZXRvLXNpZGViYXItZm9sZGVycy10cmVlLmFudC10cmVlIC5hbnQtdHJlZS1ub2RlLWNvbnRlbnQtd3JhcHBlciB7XG4gIHBhZGRpbmctaW5saW5lOiA2cHggIWltcG9ydGFudDtcbiAgbWluLXdpZHRoOiAwO1xufVxuXG4ubmVldG8tc2lkZWJhci1mb2xkZXJzLXRyZWUuYW50LXRyZWVcbiAgLmFudC10cmVlLW5vZGUtY29udGVudC13cmFwcGVyLmFudC10cmVlLW5vZGUtc2VsZWN0ZWQge1xuICBjb2xvcjogcmdiKHZhcigtLW5lZXRvLXVpLWFjY2VudC04MDApKSAhaW1wb3J0YW50O1xuICBiYWNrZ3JvdW5kLWNvbG9yOiByZ2IodmFyKC0tbmVldG8tdWktd2hpdGUpKTtcbiAgZm9udC13ZWlnaHQ6IDUwMDtcbn1cblxuLm5lZXRvLXNpZGViYXItZm9sZGVycy10cmVlLmFudC10cmVlXG4gIC5hbnQtdHJlZS1zd2l0Y2hlclxuICAuYW50LXRyZWUtc3dpdGNoZXItaWNvbiB7XG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbn1cblxuLm5lZXRvLWZvbGRlcnMtZ3JpZC12aWV3LXdyYXBwZXIge1xuICBncmlkLXRlbXBsYXRlLWNvbHVtbnM6IHJlcGVhdChhdXRvLWZpbGwsIG1pbm1heCgyNTZweCwgMWZyKSk7XG59XG5cbi5uZi10cmVlLXNlbGVjdCB7XG4gIC5hbnQtc2VsZWN0LWNsZWFyIHtcbiAgICB3aWR0aDogMTZweDtcbiAgICBoZWlnaHQ6IDE2cHg7XG4gICAgbWFyZ2luLXRvcDogLThweDtcblxuICAgIHN2ZyB7XG4gICAgICB3aWR0aDogMTZweDtcbiAgICAgIGhlaWdodDogMTZweDtcbiAgICB9XG4gIH1cbn1cbiJdfQ== */";
 n(css,{});
 
-export { FoldersContext, FoldersList, FoldersTree, MoveToFolderPane };
+export { FoldersContext, FoldersList, FoldersTree, MoveToFolderPane, TreeSelect };
 //# sourceMappingURL=components.js.map