@bigbinary/neeto-folders-frontend 2.0.30 → 2.0.32

package/dist/cjs/components.js

@@ -9,7 +9,7 @@ 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-4NdTAEfb.js');
+var useFolderActions = require('../useFolderActions-BPC-4vSm.js');
 var constants = require('./constants.js');
 var utils = require('../index-DxzvHr2u.js');
 var internal = require('../internal-DKHdgJas.js');
@@ -39,6 +39,7 @@ var core = require('@dnd-kit/core');
 var Reorder = require('@bigbinary/neeto-icons/Reorder');
 var Toastr = require('@bigbinary/neetoui/Toastr');
 var reactDom = require('react-dom');
+var modifiers = require('@dnd-kit/modifiers');
 var MoreDropdown = require('@bigbinary/neeto-molecules/MoreDropdown');
 var Checkbox = require('@bigbinary/neetoui/Checkbox');
 var Tree = require('@bigbinary/neetoui/Tree');
@@ -48,21 +49,21 @@ var formik = require('formik');
 var NUITreeSelect = require('@bigbinary/neetoui/formik/TreeSelect');
 require('zustand');
 
-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; }
+function ownKeys$l(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$l(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$l(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$l(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$j(_objectSpread$j({}, config.labels), options)) : t(key, options);
+    return config !== null && config !== void 0 && config.labels ? t(key, _objectSpread$l(_objectSpread$l({}, config.labels), options)) : t(key, options);
   };
   return {
     t: modT
   };
 };
 
-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; }
+function ownKeys$k(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$k(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$k(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$k(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 +118,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$i(_objectSpread$i({}, queryParams), {}, {
+        var redirectUrl = parent ? utils$1.buildUrl(config.folderPath, _objectSpread$k(_objectSpread$k({}, queryParams), {}, {
           folderId: parent.sid
         })) : "/";
         history.replace(redirectUrl);
@@ -138,7 +139,7 @@ var FoldersAlerts = function FoldersAlerts(_ref) {
     if (config.customizeAlerts) config.customizeAlerts(type, item, alertProps);
     alertProps.onSubmit = onConfirmDelete;
   }
-  return /*#__PURE__*/jsxRuntime.jsx(Alert, _objectSpread$i({}, alertProps));
+  return /*#__PURE__*/jsxRuntime.jsx(Alert, _objectSpread$k({}, alertProps));
 };
 
 var FORM_VALIDATION_SCHEMA = yup.object().shape({
@@ -148,8 +149,8 @@ var FORM_VALIDATION_SCHEMA = yup.object().shape({
 });
 
 var _excluded$7 = ["type"];
-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; }
+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 typeComponentMap = {
   string: Input,
   "boolean": Switch,
@@ -163,7 +164,7 @@ var ExtraAttributes = function ExtraAttributes(_ref) {
       rest = _objectWithoutProperties(_ref2, _excluded$7);
     var Component = typeComponentMap[type];
     if (!Component) return null;
-    return /*#__PURE__*/React.createElement(Component, _objectSpread$h(_objectSpread$h({}, rest), {}, {
+    return /*#__PURE__*/React.createElement(Component, _objectSpread$j(_objectSpread$j({}, rest), {}, {
       key: rest.name
     }));
   });
@@ -363,8 +364,8 @@ var AddEditPane = function AddEditPane(_ref) {
 var REORDER_TREE_INDENT_WIDTH = 30;
 
 var _excluded$6 = ["icon", "itemLabel", "folder", "folderLabel", "depth", "className", "onClick"];
-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; }
+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 Node$1 = function Node(_ref, ref) {
   var _folder$children$leng, _folder$children;
   var _ref$icon = _ref.icon,
@@ -386,20 +387,20 @@ var Node$1 = function Node(_ref, ref) {
       length: depth
     }).map(function (_, index) {
       return /*#__PURE__*/jsxRuntime.jsx("span", {
-        className: "neeto-ui-border-gray-300 relative h-full flex-shrink-0 border-l",
+        className: "neeto-ui-border-gray-300 relative h-full flex-shrink-0 border-s",
         style: {
           width: REORDER_TREE_INDENT_WIDTH,
-          left: Math.round(REORDER_TREE_INDENT_WIDTH / 2)
+          insetInlineStart: Math.round(REORDER_TREE_INDENT_WIDTH / 2)
         }
       }, index);
-    }), /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread$g(_objectSpread$g({}, _objectSpread$g(_objectSpread$g({}, rest), {}, {
+    }), /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread$i(_objectSpread$i({}, _objectSpread$i(_objectSpread$i({}, rest), {}, {
       onClick: onClick,
       ref: ref
     })), {}, {
       "data-cy": "".concat(neetoCist.hyphenate(folder.name), "-folder-node"),
       className: classNames("relative my-1 flex cursor-pointer items-center px-2 py-1", className),
       children: [icon, /*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: "ml-2",
+        className: "ms-2",
         children: [/*#__PURE__*/jsxRuntime.jsx(Typography, {
           lineHeight: "snug",
           style: "body1",
@@ -419,8 +420,8 @@ var Node$1 = function Node(_ref, ref) {
 var Node$2 = /*#__PURE__*/React.forwardRef(Node$1);
 
 var _excluded$5 = ["folder", "item", "depth", "maxDepth", "disabled", "config"];
-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$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 _SelectableNode = function SelectableNode(_ref) {
   var _folder$children$leng, _folder$children;
   var folder = _ref.folder,
@@ -441,7 +442,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$f(_objectSpread$f({}, _objectSpread$f(_objectSpread$f({}, rest), {}, {
+      return /*#__PURE__*/React.createElement(_SelectableNode, _objectSpread$h(_objectSpread$h({}, _objectSpread$h(_objectSpread$h({}, rest), {}, {
         config: config,
         item: item,
         maxDepth: maxDepth
@@ -459,7 +460,7 @@ var _SelectableNode = function SelectableNode(_ref) {
       "opacity-60": isDisabled
     }),
     title: isDisabled ? t("moveToFolder.notAllowed") : undefined,
-    children: [/*#__PURE__*/jsxRuntime.jsx(Node$2, _objectSpread$f(_objectSpread$f({}, _objectSpread$f(_objectSpread$f({}, rest), {}, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(Node$2, _objectSpread$h(_objectSpread$h({}, _objectSpread$h(_objectSpread$h({}, rest), {}, {
       depth: depth,
       folder: folder,
       folderLabel: folderLabel,
@@ -479,8 +480,8 @@ var _SelectableNode = function SelectableNode(_ref) {
   });
 };
 
-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$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 createTree = function createTree(folders, isRootEnabled) {
   return isRootEnabled ? [{
     name: "/",
@@ -565,7 +566,7 @@ var PaneBody = function PaneBody(_ref) {
         style: "h2",
         children: t("moveToFolder.title")
       }), /*#__PURE__*/jsxRuntime.jsx(Button, {
-        className: "mr-2",
+        className: "me-2",
         "data-cy": "add-new-folder-button",
         label: t("folders.add"),
         style: "link",
@@ -591,7 +592,7 @@ 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$e(_objectSpread$e({
+        children: [/*#__PURE__*/jsxRuntime.jsx(Button, _objectSpread$g(_objectSpread$g({
           label: t("common.save"),
           style: "primary",
           onClick: function onClick() {
@@ -600,14 +601,14 @@ var PaneBody = function PaneBody(_ref) {
         }, submitButtonProps), {}, {
           "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({
+        })), /*#__PURE__*/jsxRuntime.jsx(Button, _objectSpread$g(_objectSpread$g({
           label: t("common.cancel"),
           style: "text",
           onClick: onClose
         }, cancelButtonProps), {}, {
           "data-cy": "cancel-button"
         }))]
-      }), onRemove && /*#__PURE__*/jsxRuntime.jsx(Button, _objectSpread$e(_objectSpread$e({
+      }), onRemove && /*#__PURE__*/jsxRuntime.jsx(Button, _objectSpread$g(_objectSpread$g({
         label: t("moveToFolder.remove"),
         style: "tertiary",
         onClick: onRemove
@@ -664,8 +665,8 @@ var MoveFolderPane = function MoveFolderPane(_ref) {
 };
 
 var _excluded$4 = ["folder", "depth", "config", "folderLabel", "itemLabel"];
-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$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 _DraggableNode$1 = function DraggableNode(_ref) {
   var folder = _ref.folder,
     _ref$depth = _ref.depth,
@@ -694,7 +695,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$d(_objectSpread$d({}, _objectSpread$d(_objectSpread$d({}, rest), {}, {
+      return /*#__PURE__*/React.createElement(_DraggableNode$1, _objectSpread$f(_objectSpread$f({}, _objectSpread$f(_objectSpread$f({}, rest), {}, {
         config: config
       })), {}, {
         depth: depth + 1,
@@ -706,14 +707,14 @@ var _DraggableNode$1 = function DraggableNode(_ref) {
     });
   };
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/jsxRuntime.jsx(Node$2, _objectSpread$d(_objectSpread$d(_objectSpread$d({}, rest), {}, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(Node$2, _objectSpread$f(_objectSpread$f(_objectSpread$f({}, 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$d(_objectSpread$d(_objectSpread$d({
+    }, _objectSpread$f(_objectSpread$f(_objectSpread$f({
       depth: depth,
       folder: folder
     }, attributes), listeners), {}, {
@@ -728,8 +729,8 @@ var _DraggableNode$1 = function DraggableNode(_ref) {
   });
 };
 
-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$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 RearrangeFoldersPane = function RearrangeFoldersPane(_ref) {
   var _tree$children$length, _tree$children, _dragItem$children$le, _dragItem$children;
   var config = _ref.config,
@@ -812,7 +813,7 @@ var RearrangeFoldersPane = function RearrangeFoldersPane(_ref) {
   });
   var nodeProps = {
     icon: /*#__PURE__*/jsxRuntime.jsx(Reorder, {
-      className: "neeto-ui-text-gray-500 relative -left-[0.3125rem] flex-shrink-0"
+      className: "neeto-ui-text-gray-500 relative -start-[0.3125rem] flex-shrink-0"
     })
   };
   if (isFetching) {
@@ -835,7 +836,7 @@ var RearrangeFoldersPane = function RearrangeFoldersPane(_ref) {
       },
       children: [/*#__PURE__*/jsxRuntime.jsx(Pane.Body, {
         className: "pb-6",
-        children: /*#__PURE__*/React.createElement(_DraggableNode$1, _objectSpread$c(_objectSpread$c({}, _objectSpread$c(_objectSpread$c({}, nodeProps), {}, {
+        children: /*#__PURE__*/React.createElement(_DraggableNode$1, _objectSpread$e(_objectSpread$e({}, _objectSpread$e(_objectSpread$e({}, nodeProps), {}, {
           config: config
         })), {}, {
           folder: tree,
@@ -857,7 +858,7 @@ var RearrangeFoldersPane = function RearrangeFoldersPane(_ref) {
         })]
       }), /*#__PURE__*/reactDom.createPortal(/*#__PURE__*/jsxRuntime.jsx(core.DragOverlay, {
         zIndex: 99999,
-        children: dragItem && /*#__PURE__*/jsxRuntime.jsx(Node$2, _objectSpread$c(_objectSpread$c({}, nodeProps), {}, {
+        children: dragItem && /*#__PURE__*/jsxRuntime.jsx(Node$2, _objectSpread$e(_objectSpread$e({}, nodeProps), {}, {
           className: "neeto-ui-bg-gray-200",
           depth: 0,
           folder: dragItem,
@@ -961,8 +962,8 @@ var PlaceholderNode = function PlaceholderNode(_ref) {
 };
 
 var _excluded$3 = ["folder", "config", "dragState", "folderLabel", "itemLabel"];
-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$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 = function DraggableNode(_ref) {
   var _overItem$meta$parent;
   var folder = _ref.folder,
@@ -998,7 +999,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$b(_objectSpread$b({}, _objectSpread$b(_objectSpread$b({}, rest), {}, {
+        return /*#__PURE__*/React.createElement(_DraggableNode, _objectSpread$d(_objectSpread$d({}, _objectSpread$d(_objectSpread$d({}, rest), {}, {
           config: config,
           dragState: dragState
         })), {}, {
@@ -1012,9 +1013,9 @@ var _DraggableNode = function DraggableNode(_ref) {
     }, "".concat(folder.id, "--container"));
   };
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/jsxRuntime.jsx(Node$2, _objectSpread$b(_objectSpread$b({
+    children: [/*#__PURE__*/jsxRuntime.jsx(Node$2, _objectSpread$d(_objectSpread$d({
       depth: folder.meta.depth
-    }, _objectSpread$b(_objectSpread$b(_objectSpread$b(_objectSpread$b({}, rest), {}, {
+    }, _objectSpread$d(_objectSpread$d(_objectSpread$d(_objectSpread$d({}, rest), {}, {
       folder: folder
     }, attributes), listeners), {}, {
       folderLabel: folderLabel,
@@ -1034,13 +1035,13 @@ var _DraggableNode = function DraggableNode(_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$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 initialDragState = {
   activeItem: null,
   overItem: null
 };
-var sensorConfig = {
+var sensorConfig$1 = {
   activationConstraint: {
     distance: 8
   }
@@ -1071,7 +1072,7 @@ var ReorderFoldersPane = function ReorderFoldersPane(_ref) {
     isFetching = _useFetchFolders.isFetching;
   var _useReorderFolders = useFolderActions.useReorderFolders(config),
     reorderFolders = _useReorderFolders.mutate;
-  var sensors = core.useSensors(core.useSensor(core.PointerSensor, sensorConfig));
+  var sensors = core.useSensors(core.useSensor(core.PointerSensor, sensorConfig$1));
   var _useFolderStore = useFolderActions.useFolderStore(function (store) {
       var _store$paneState;
       return {
@@ -1147,7 +1148,7 @@ var ReorderFoldersPane = function ReorderFoldersPane(_ref) {
   });
   var nodeProps = {
     icon: /*#__PURE__*/jsxRuntime.jsx(Reorder, {
-      className: "neeto-ui-text-gray-500 relative -left-[0.3125rem] flex-shrink-0"
+      className: "neeto-ui-text-gray-500 relative -start-[0.3125rem] flex-shrink-0"
     })
   };
   if (isFetching) {
@@ -1177,7 +1178,7 @@ var ReorderFoldersPane = function ReorderFoldersPane(_ref) {
       },
       children: [/*#__PURE__*/jsxRuntime.jsx(Pane.Body, {
         className: "pb-6",
-        children: /*#__PURE__*/React.createElement(_DraggableNode, _objectSpread$a(_objectSpread$a({}, _objectSpread$a(_objectSpread$a({}, nodeProps), {}, {
+        children: /*#__PURE__*/React.createElement(_DraggableNode, _objectSpread$c(_objectSpread$c({}, _objectSpread$c(_objectSpread$c({}, nodeProps), {}, {
           config: config,
           dragState: dragState
         })), {}, {
@@ -1200,8 +1201,8 @@ var ReorderFoldersPane = function ReorderFoldersPane(_ref) {
         })]
       }), /*#__PURE__*/reactDom.createPortal(/*#__PURE__*/jsxRuntime.jsx(core.DragOverlay, {
         zIndex: 99999,
-        children: dragState && /*#__PURE__*/jsxRuntime.jsx(Node$2, _objectSpread$a(_objectSpread$a({}, nodeProps), {}, {
-          className: "neeto-ui-bg-gray-200 pl-4 pr-12",
+        children: dragState && /*#__PURE__*/jsxRuntime.jsx(Node$2, _objectSpread$c(_objectSpread$c({}, nodeProps), {}, {
+          className: "neeto-ui-bg-gray-200 ps-4 pe-12",
           depth: 0,
           folder: dragState.activeItem,
           folderLabel: config.labels[((_dragState$activeItem = (_dragState$activeItem2 = dragState.activeItem) === null || _dragState$activeItem2 === void 0 || (_dragState$activeItem2 = _dragState$activeItem2.children) === null || _dragState$activeItem2 === void 0 ? void 0 : _dragState$activeItem2.length) !== null && _dragState$activeItem !== void 0 ? _dragState$activeItem : 0) > 1 ? "folders" : "folder"],
@@ -1213,11 +1214,11 @@ var ReorderFoldersPane = function ReorderFoldersPane(_ref) {
 };
 
 var _excluded$2 = ["type"];
-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$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 FoldersPane = function FoldersPane(_ref) {
   var configProps = _ref.config;
-  var config = _objectSpread$9(_objectSpread$9({}, useFolderActions.DEFAULT_CONFIG), configProps);
+  var config = _objectSpread$b(_objectSpread$b({}, useFolderActions.DEFAULT_CONFIG), configProps);
   var _useFolderStore = useFolderActions.useFolderStore(function (store) {
       return {
         paneState: store["paneState"],
@@ -1234,7 +1235,7 @@ var FoldersPane = function FoldersPane(_ref) {
       paneState: null
     });
   };
-  var commonProps = _objectSpread$9({
+  var commonProps = _objectSpread$b({
     config: config,
     onClose: onClose
   }, rest);
@@ -1245,9 +1246,9 @@ var FoldersPane = function FoldersPane(_ref) {
     children: function children(_ref3) {
       var setFocusField = _ref3.setFocusField;
       return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-        children: [(type === "edit" || type === "add") && /*#__PURE__*/jsxRuntime.jsx(AddEditPane, _objectSpread$9({}, _objectSpread$9({
+        children: [(type === "edit" || type === "add") && /*#__PURE__*/jsxRuntime.jsx(AddEditPane, _objectSpread$b({}, _objectSpread$b({
           setFocusField: setFocusField
-        }, commonProps))), type === "move" && /*#__PURE__*/jsxRuntime.jsx(MoveFolderPane, _objectSpread$9({}, commonProps)), type === "reorder" && /*#__PURE__*/jsxRuntime.jsx(ReorderPaneComponent, _objectSpread$9({}, commonProps))]
+        }, commonProps))), type === "move" && /*#__PURE__*/jsxRuntime.jsx(MoveFolderPane, _objectSpread$b({}, commonProps)), type === "reorder" && /*#__PURE__*/jsxRuntime.jsx(ReorderPaneComponent, _objectSpread$b({}, commonProps))]
       });
     }
   });
@@ -1265,9 +1266,13 @@ var FoldersContext = function FoldersContext(_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; }
 var FolderTile = function FolderTile(_ref) {
   var _folder$children$leng, _folder$children, _folder$children$leng2, _folder$children2;
-  var isSelected = _ref.isSelected,
+  var _ref$isPreview = _ref.isPreview,
+    isPreview = _ref$isPreview === void 0 ? false : _ref$isPreview,
+    isSelected = _ref.isSelected,
     link = _ref.link,
     folder = _ref.folder,
     actions = _ref.actions,
@@ -1275,6 +1280,18 @@ var FolderTile = function FolderTile(_ref) {
     onSelect = _ref.onSelect;
   var _useTranslation = useTranslation(config),
     t = _useTranslation.t;
+  var droppable = core.useDroppable({
+    id: "droppable-item--".concat(folder.id),
+    data: folder,
+    disabled: isPreview
+  });
+  var draggable = core.useDraggable({
+    id: "draggable-item--".concat(folder.id),
+    data: _objectSpread$a(_objectSpread$a({}, folder), {}, {
+      type: useFolderActions.DEFAULT_CONFIG.type
+    }),
+    disabled: isPreview
+  });
   var actionCallback = function actionCallback(callback) {
     return function (event) {
       event.preventDefault();
@@ -1300,10 +1317,19 @@ var FolderTile = function FolderTile(_ref) {
   var folderLabel = config.labels[((_folder$children$leng2 = (_folder$children2 = folder.children) === null || _folder$children2 === void 0 ? void 0 : _folder$children2.length) !== null && _folder$children$leng2 !== void 0 ? _folder$children$leng2 : 0) > 1 ? "folders" : "folder"];
   childCount > 0 && metaInfo.push("".concat(childCount, " ").concat(folderLabel).toLowerCase());
   metaInfo.push("".concat(folder.itemCount || 0, " ").concat(itemLabel).toLowerCase());
-  return /*#__PURE__*/jsxRuntime.jsxs(reactRouterDom.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",
+  return /*#__PURE__*/jsxRuntime.jsxs(reactRouterDom.Link, _objectSpread$a(_objectSpread$a(_objectSpread$a(_objectSpread$a(_objectSpread$a({
     "data-cy": "".concat(neetoCist.hyphenate(folder.name), "-folder-tile"),
     to: link,
+    className: classNames("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", {
+      "neeto-ui-bg-primary-100": droppable.isOver,
+      "opacity-50": draggable.isDragging,
+      "scale-75": isPreview
+    })
+  }, droppable.attributes), droppable.listeners), draggable.attributes), draggable.listeners), {}, {
+    ref: function ref(_ref2) {
+      droppable.setNodeRef(_ref2);
+      draggable.setNodeRef(_ref2);
+    },
     children: [/*#__PURE__*/jsxRuntime.jsx(Checkbox, {
       checked: isSelected,
       className: "m-0 flex-shrink-0 flex-grow-0 pt-0.5",
@@ -1317,7 +1343,7 @@ var FolderTile = function FolderTile(_ref) {
     }), /*#__PURE__*/jsxRuntime.jsxs("span", {
       className: "flex min-w-0 flex-grow flex-col gap-2",
       children: [/*#__PURE__*/jsxRuntime.jsx(Typography, {
-        className: "-mt-0.5 line-clamp-2 break-words pr-8",
+        className: "-mt-0.5 line-clamp-2 break-words pe-8",
         "data-cy": "folder-name",
         lineHeight: "snug",
         style: "body1",
@@ -1332,7 +1358,7 @@ var FolderTile = function FolderTile(_ref) {
     }), /*#__PURE__*/jsxRuntime.jsx(MoreDropdown, {
       menuItems: menuItems,
       dropdownButtonProps: {
-        className: "absolute right-2 top-2"
+        className: "absolute end-2 top-2"
       },
       dropdownProps: {
         onClick: function onClick(event) {
@@ -1340,17 +1366,77 @@ var FolderTile = function FolderTile(_ref) {
         }
       }
     })]
+  }));
+};
+
+var sensorConfig = {
+  activationConstraint: {
+    delay: 200,
+    tolerance: 5,
+    distance: 10
+  }
+};
+var FoldersDnd = function FoldersDnd(_ref) {
+  var config = _ref.config,
+    children = _ref.children,
+    onDropItem = _ref.onDrop,
+    renderItemOverlay = _ref.renderOverlay;
+  var _useState = React.useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    dragItem = _useState2[0],
+    setDragItem = _useState2[1];
+  var _useBulkUpdateFolders = useFolderActions.useBulkUpdateFolders(config),
+    onBulkUpdate = _useBulkUpdateFolders.mutate;
+  var sensors = core.useSensors(core.useSensor(core.PointerSensor, sensorConfig));
+  var onDropFolder = function onDropFolder(folder, parent) {
+    if (!folder || !parent || folder.id === parent.id) return;
+    onBulkUpdate({
+      ids: [folder.id],
+      parentId: parent.id
+    });
+  };
+  var handleDragStart = function handleDragStart(_ref2) {
+    var active = _ref2.active;
+    setDragItem(active.data.current);
+  };
+  var handleDragEnd = function handleDragEnd(_ref3) {
+    var active = _ref3.active,
+      over = _ref3.over;
+    setDragItem(null);
+    if (!active || !over) return;
+    if (active.data.current.type === useFolderActions.DEFAULT_CONFIG.type) {
+      onDropFolder(active.data.current, over.data.current);
+    } else onDropItem(active.data.current, over.data.current);
+  };
+  var renderFolderOverlay = function renderFolderOverlay(dragItem) {
+    return /*#__PURE__*/jsxRuntime.jsx(FolderTile, {
+      config: config,
+      isPreview: true,
+      actions: {},
+      folder: dragItem,
+      onSelect: neetoCist.noop
+    });
+  };
+  return /*#__PURE__*/jsxRuntime.jsxs(core.DndContext, {
+    sensors: sensors,
+    onDragEnd: handleDragEnd,
+    onDragStart: handleDragStart,
+    children: [children, /*#__PURE__*/jsxRuntime.jsx(core.DragOverlay, {
+      dropAnimation: null,
+      modifiers: [modifiers.snapCenterToCursor],
+      children: dragItem && (dragItem.type !== useFolderActions.DEFAULT_CONFIG.type ? renderItemOverlay(dragItem) : renderFolderOverlay(dragItem))
+    })]
   });
 };
 
-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 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$8(_objectSpread$8({}, useFolderActions.DEFAULT_CONFIG), configProps);
+  var config = _objectSpread$9(_objectSpread$9({}, useFolderActions.DEFAULT_CONFIG), configProps);
   var params = reactUtils.useQueryParams();
   var _useTranslation = useTranslation(config),
     t = _useTranslation.t;
@@ -1378,7 +1464,7 @@ var FoldersList = function FoldersList(_ref) {
           onSelect: onSelect,
           isSelected: selection.includes(folder.id),
           key: folder.id,
-          link: utils$1.buildUrl(config.folderPath, _objectSpread$8(_objectSpread$8({}, params), {}, {
+          link: utils$1.buildUrl(config.folderPath, _objectSpread$9(_objectSpread$9({}, params), {}, {
             folderId: folder.sid
           }))
         });
@@ -1387,6 +1473,27 @@ var FoldersList = function FoldersList(_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; }
+var DraggableWrapper = function DraggableWrapper(_ref) {
+  var data = _ref.data,
+    _ref$id = _ref.id,
+    id = _ref$id === void 0 ? data.id : _ref$id,
+    children = _ref.children;
+  var draggable = core.useDraggable({
+    id: "folders-list-draggable-item--".concat(id),
+    data: data
+  });
+  return /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread$8(_objectSpread$8(_objectSpread$8({
+    className: classNames({
+      "opacity-50": draggable.isDragging
+    })
+  }, draggable.attributes), draggable.listeners), {}, {
+    ref: draggable.setNodeRef,
+    children: children
+  }));
+};
+
 var _excluded$1 = ["isOpen", "onClose"];
 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; }
@@ -1471,15 +1578,15 @@ var Node = function Node(_ref) {
       "data-cy": "".concat(neetoCist.hyphenate(name), "-").concat(isFolder ? "folder" : "item", "-sublink"),
       title: "",
       children: [isFolder && (isExpanded ? /*#__PURE__*/jsxRuntime.jsx(FolderIconOpen, {
-        className: "flex-shrink-0 mr-1",
+        className: "flex-shrink-0 me-1",
         size: 16
       }) : /*#__PURE__*/jsxRuntime.jsx(FolderIcon, {
-        className: "flex-shrink-0 mr-1",
+        className: "flex-shrink-0 me-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 pl-0.5",
+          className: "line-clamp-1 block truncate ps-0.5",
           component: "span",
           style: "body2",
           title: name,
@@ -1487,12 +1594,12 @@ var Node = function Node(_ref) {
         }), isPrivate && /*#__PURE__*/jsxRuntime.jsx("span", {
           title: t("common.private"),
           children: /*#__PURE__*/jsxRuntime.jsx(Lock, {
-            className: "flex-shrink-0 ml-1",
+            className: "flex-shrink-0 ms-1",
             size: 16
           })
         })]
       }), hasAnyActions && /*#__PURE__*/jsxRuntime.jsxs("div", {
-        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",
+        className: "flex items-center gap-0.5 py-0.5 absolute end-0 top-0 h-full neeto-sidebar-folders-tree__folder-node-actions neeto-ui-rounded-md ps-2",
         onClick: function onClick(e) {
           e.preventDefault();
           e.stopPropagation();
@@ -1779,11 +1886,13 @@ 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: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 */";
+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-inline-end: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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFwcC9qYXZhc2NyaXB0L3NyYy9jb21wb25lbnRzL25lZXRvLWZvbGRlcnMtbmFuby5zY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLHlDQUNFLHVCQUNGLENBRUEsb0VBRUUsV0FBQSxDQURBLDRCQUVGLENBRUEsMkZBRUUsOENBQUEsQ0FEQSwrQ0FBQSxDQUVBLGVBQ0YsQ0FFQSx3REFDRSxtQkFDRixDQUVBLGdGQUNFLGlCQUNGLENBRUEsaUNBQ0UseURBQ0YsQ0FFQSwySEFDRSxnSEFDRixDQUVBLHdEQUNFLGlCQUNGLENBRUEsK0RBQ0UsVUFDRiIsInNvdXJjZXNDb250ZW50IjpbIi5uZWV0by1zaWRlYmFyLWZvbGRlcnMtdHJlZV9fZm9sZGVyLW5vZGUge1xuICBjb2xvcjogaW5oZXJpdCAhaW1wb3J0YW50O1xufVxuXG4ubmVldG8tc2lkZWJhci1mb2xkZXJzLXRyZWUuYW50LXRyZWUgLmFudC10cmVlLW5vZGUtY29udGVudC13cmFwcGVyIHtcbiAgcGFkZGluZy1pbmxpbmU6IDJweCAhaW1wb3J0YW50O1xuICBtaW4td2lkdGg6IDA7XG59XG5cbi5uZWV0by1zaWRlYmFyLWZvbGRlcnMtdHJlZS5hbnQtdHJlZSAuYW50LXRyZWUtbm9kZS1jb250ZW50LXdyYXBwZXIuYW50LXRyZWUtbm9kZS1zZWxlY3RlZCB7XG4gIGNvbG9yOiByZ2IodmFyKC0tbmVldG8tdWktYWNjZW50LTgwMCkpICFpbXBvcnRhbnQ7XG4gIGJhY2tncm91bmQtY29sb3I6IHJnYih2YXIoLS1uZWV0by11aS1ncmF5LTEwMCkpO1xuICBmb250LXdlaWdodDogNTAwO1xufVxuXG4ubmVldG8tc2lkZWJhci1mb2xkZXJzLXRyZWUuYW50LXRyZWUgLmFudC10cmVlLXN3aXRjaGVyIHtcbiAgbWFyZ2luLWlubGluZS1lbmQ6IDA7XG59XG5cbi5uZWV0by1zaWRlYmFyLWZvbGRlcnMtdHJlZS5hbnQtdHJlZSAuYW50LXRyZWUtc3dpdGNoZXIgLmFudC10cmVlLXN3aXRjaGVyLWljb24ge1xuICBwb3NpdGlvbjogcmVsYXRpdmU7XG59XG5cbi5uZWV0by1mb2xkZXJzLWdyaWQtdmlldy13cmFwcGVyIHtcbiAgZ3JpZC10ZW1wbGF0ZS1jb2x1bW5zOiByZXBlYXQoYXV0by1maWxsLCBtaW5tYXgoMjU2cHgsIDFmcikpO1xufVxuXG4ubmVldG8tc2lkZWJhci1mb2xkZXJzLXRyZWUuYW50LXRyZWUgLmFudC10cmVlLW5vZGUtY29udGVudC13cmFwcGVyOmhvdmVyIC5uZWV0by1zaWRlYmFyLWZvbGRlcnMtdHJlZV9fZm9sZGVyLW5vZGUtYWN0aW9ucyB7XG4gIGJhY2tncm91bmQtaW1hZ2U6IGxpbmVhci1ncmFkaWVudCg5MGRlZywgcmdiYSh2YXIoLS1uZWV0by11aS1ncmF5LTEwMCksIC41KSAwLCByZ2JhKHZhcigtLW5lZXRvLXVpLWdyYXktMTAwKSwgMSkgMjUlKTtcbn1cblxuLm5lZXRvLXNpZGViYXItZm9sZGVycy10cmVlLmFudC10cmVlIC5hbnQtdHJlZS10cmVlbm9kZSB7XG4gIG1hcmdpbi1ib3R0b206IDZweDtcbn1cblxuLm5lZXRvLXNpZGViYXItZm9sZGVycy10cmVlLmFudC10cmVlIC5hbnQtdHJlZS10cmVlbm9kZTo6YmVmb3JlIHtcbiAgaGVpZ2h0OiA2cHg7XG59XG4iXX0= */";
 n(css,{});
 
 exports.AddEditPane = AddEditPane;
+exports.DraggableWrapper = DraggableWrapper;
 exports.FoldersContext = FoldersContext;
+exports.FoldersDnd = FoldersDnd;
 exports.FoldersList = FoldersList;
 exports.FoldersTree = FoldersTree;
 exports.MoveToFolderPane = MoveToFolderPane;