@bigbinary/neeto-folders-frontend 1.1.7 → 2.0.0

package/dist/cjs/components.js

@@ -1,25 +1,31 @@
 'use strict';
 
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
-var _regeneratorRuntime = require('@babel/runtime/regenerator');
+var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
 var shallow = require('zustand/shallow');
+var reactQuery = require('@tanstack/react-query');
 var reactUtils = require('@bigbinary/neeto-commons-frontend/react-utils');
-var utils = require('@bigbinary/neeto-commons-frontend/utils');
+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-BSW7tGU6.js');
-var pathUtils = require('../pathUtils-W8cEGsHR.js');
+var useFolderActions = require('../useFolderActions-D8xGNhk0.js');
+var constants = require('./constants.js');
+var utils = require('../index-BFO1zYNo.js');
+var internal = require('../internal-CS6_tPWL.js');
 var jsxRuntime = require('react/jsx-runtime');
 var Pane = require('@bigbinary/neetoui/Pane');
-var react = require('react');
+var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
+var _regeneratorRuntime = require('@babel/runtime/regenerator');
+var React = require('react');
 var formik = require('formik');
 var Typography = require('@bigbinary/neetoui/Typography');
 var Input = require('@bigbinary/neetoui/formik/Input');
 var ActionBlock = require('@bigbinary/neetoui/formik/ActionBlock');
-var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var Switch = require('@bigbinary/neetoui/formik/Switch');
+var Textarea = require('@bigbinary/neetoui/formik/Textarea');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var antd = require('antd');
 var classNames = require('classnames');
 var Down = require('@bigbinary/neeto-icons/Down');
@@ -36,12 +42,23 @@ var MoreDropdown = require('@bigbinary/neeto-molecules/MoreDropdown');
 var Checkbox = require('@bigbinary/neetoui/Checkbox');
 var Tree = require('@bigbinary/neetoui/Tree');
 require('i18next');
-require('@tanstack/react-query');
-require('./constants.js');
 require('zustand');
 
-function ownKeys$a(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$a(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$a(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$a(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$e(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$e(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$e(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$e(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var 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$e(_objectSpread$e({}, config.labels), options)) : t(key, options);
+  };
+  return {
+    t: modT
+  };
+};
+
+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 FoldersAlerts = function FoldersAlerts(_ref) {
   var config = _ref.config;
   var _useFolderStore = useFolderActions.useFolderStore(function (store) {
@@ -53,8 +70,9 @@ var FoldersAlerts = function FoldersAlerts(_ref) {
   var queryParams = reactUtils.useQueryParams({
     toCamelCase: false
   });
+  var queryClient = reactQuery.useQueryClient();
   var history = reactRouterDom.useHistory();
-  var _useTranslation = reactI18next.useTranslation(),
+  var _useTranslation = useTranslation(config),
     t = _useTranslation.t;
   var _useFolderStore2 = useFolderActions.useFolderStore(function (store) {
       var _store$alertState, _store$alertState2;
@@ -67,7 +85,7 @@ var FoldersAlerts = function FoldersAlerts(_ref) {
     item = _useFolderStore2.item;
   var _useDestroyFolder = useFolderActions.useDestroyFolder(config),
     destroyFolder = _useDestroyFolder.mutateAsync,
-    isLoading = _useDestroyFolder.isLoading;
+    isPending = _useDestroyFolder.isPending;
   var _useFolders = useFolderActions.useFolders(config),
     folders = _useFolders.folders;
   var onClose = function onClose() {
@@ -77,46 +95,33 @@ var FoldersAlerts = function FoldersAlerts(_ref) {
   };
   var alertProps = {
     isOpen: !!type,
-    isSubmitting: isLoading,
+    isSubmitting: isPending,
     onClose: onClose
   };
-  var onConfirmDelete = /*#__PURE__*/function () {
-    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-      var path, parent;
-      return _regeneratorRuntime.wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
-          case 0:
-            _context.next = 2;
-            return destroyFolder(item.id);
-          case 2:
-            onClose();
-            if (!(!useFolderActions.isActiveFolder(item.sid) || !folders)) {
-              _context.next = 5;
-              break;
-            }
-            return _context.abrupt("return");
-          case 5:
-            path = pathUtils.pathToFolder(folders, item.id);
-            parent = path[path.length - 2];
-            if (parent) {
-              _context.next = 9;
-              break;
-            }
-            return _context.abrupt("return");
-          case 9:
-            history.replace(utils.buildUrl(config.folderPath, _objectSpread$a(_objectSpread$a({}, queryParams), {}, {
-              folderId: parent.sid
-            })));
-          case 10:
-          case "end":
-            return _context.stop();
-        }
-      }, _callee);
-    }));
-    return function onConfirmDelete() {
-      return _ref2.apply(this, arguments);
+  var onConfirmDelete = function onConfirmDelete() {
+    var onSuccess = function onSuccess() {
+      var isActive = internal.isActiveFolder(config, item.sid);
+      // Invalidates items and folder details. Refetch only if not active folder.
+      var invalidationKeys = [].concat(_toConsumableArray(config.invalidationKeys), [[constants.QUERY_KEYS.FOLDERS, config.type, constants.QUERY_KEYS.DETAILS]]);
+      invalidationKeys.forEach(function (queryKey) {
+        queryClient.invalidateQueries({
+          refetchType: isActive ? "none" : "active",
+          queryKey: queryKey
+        });
+      });
+      if (isActive && folders) {
+        var path = utils.pathToFolder(folders, item.id);
+        var parent = path[path.length - 2];
+        history.replace(utils$1.buildUrl(config.folderPath, _objectSpread$d(_objectSpread$d({}, queryParams), {}, {
+          folderId: parent ? parent.sid : ""
+        })));
+      }
     };
-  }();
+    destroyFolder(item.id, {
+      onSuccess: onSuccess,
+      onSettled: onClose
+    });
+  };
   if (type === "delete") {
     alertProps.title = t("deleteFolder.title");
     alertProps.message = /*#__PURE__*/jsxRuntime.jsx(reactI18next.Trans, {
@@ -126,13 +131,35 @@ var FoldersAlerts = function FoldersAlerts(_ref) {
     if (config.customizeAlerts) config.customizeAlerts(type, item, alertProps);
     alertProps.onSubmit = onConfirmDelete;
   }
-  return /*#__PURE__*/jsxRuntime.jsx(Alert, _objectSpread$a({}, alertProps));
+  return /*#__PURE__*/jsxRuntime.jsx(Alert, _objectSpread$d({}, alertProps));
 };
 
-var _excluded$4 = ["className", "disabled", "fieldNames", "label", "loading", "name", "placeholder", "required", "showSearch", "size", "treeData"];
-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 TreeSelect = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
+var _excluded$6 = ["type"];
+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 typeComponentMap = {
+  string: Input,
+  "boolean": Switch,
+  textarea: Textarea
+};
+var ExtraAttributes = function ExtraAttributes(_ref) {
+  var attributes = _ref.attributes;
+  if (!Array.isArray(attributes)) return null;
+  return attributes.map(function (_ref2) {
+    var type = _ref2.type,
+      rest = _objectWithoutProperties(_ref2, _excluded$6);
+    var Component = typeComponentMap[type];
+    if (!Component) return null;
+    return /*#__PURE__*/React.createElement(Component, _objectSpread$c(_objectSpread$c({}, rest), {}, {
+      key: rest.name
+    }));
+  });
+};
+
+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__*/React.forwardRef(function (_ref, ref) {
   var _fieldNames$label;
   var className = _ref.className,
     _ref$disabled = _ref.disabled,
@@ -152,7 +179,7 @@ var TreeSelect = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? "middle" : _ref$size,
     treeData = _ref.treeData,
-    otherProps = _objectWithoutProperties(_ref, _excluded$4);
+    otherProps = _objectWithoutProperties(_ref, _excluded$5);
   var _useField = formik.useField(name),
     _useField2 = _slicedToArray(_useField, 3),
     field = _useField2[0],
@@ -203,7 +230,7 @@ var TreeSelect = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
           }
         }
       },
-      children: /*#__PURE__*/jsxRuntime.jsx(antd.TreeSelect, _objectSpread$9(_objectSpread$9({
+      children: /*#__PURE__*/jsxRuntime.jsx(antd.TreeSelect, _objectSpread$b(_objectSpread$b({
         treeDataSimpleMode: true,
         "data-cy": "nui-select-container-wrapper",
         dropdownStyle: {
@@ -218,7 +245,7 @@ var TreeSelect = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
           "neeto-ui-tree-select__error": meta.error
         }),
         switcherIcon: function switcherIcon(props) {
-          return /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread$9(_objectSpread$9({}, props), {}, {
+          return /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread$b(_objectSpread$b({}, props), {}, {
             children: /*#__PURE__*/jsxRuntime.jsx(Down, {
               className: "relative"
             })
@@ -230,7 +257,7 @@ var TreeSelect = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
         onChange: function onChange(value) {
           return setValue(value);
         }
-      }, _objectSpread$9({
+      }, _objectSpread$b({
         disabled: disabled,
         fieldNames: fieldNames,
         loading: loading,
@@ -267,12 +294,35 @@ var createFolderOptions = function createFolderOptions(foldersMap, config) {
     };
   });
 };
+var createInitialValues = function createInitialValues(defaults, extraAttrs) {
+  var values = {
+    name: "",
+    parentId: defaults.parentId || null
+  };
+  extraAttrs === null || extraAttrs === void 0 || extraAttrs.forEach(function (_ref) {
+    var name = _ref.name,
+      defaultValue = _ref.defaultValue;
+    values[name] = defaultValue;
+  });
+  return values;
+};
+var createPayload = function createPayload(values, extraAttrs) {
+  var payload = {
+    name: values.name,
+    parentId: values.parentId
+  };
+  extraAttrs === null || extraAttrs === void 0 || extraAttrs.forEach(function (_ref2) {
+    var name = _ref2.name;
+    payload[name] = values[name];
+  });
+  return payload;
+};
 
 var AddEditPane = function AddEditPane(_ref) {
   var setFocusField = _ref.setFocusField,
     config = _ref.config,
     onClose = _ref.onClose;
-  var _useTranslation = reactI18next.useTranslation(),
+  var _useTranslation = useTranslation(config),
     t = _useTranslation.t;
   var _useFolderStore = useFolderActions.useFolderStore(function (store) {
       var _store$paneState, _store$paneState2;
@@ -290,32 +340,29 @@ var AddEditPane = function AddEditPane(_ref) {
   var _useUpdateFolder = useFolderActions.useUpdateFolder(config),
     updateFolder = _useUpdateFolder.mutateAsync;
   var isEditing = type === "edit" && item;
-  var foldersMap = react.useMemo(function () {
-    return pathUtils.treeToMap(folders, "sid");
+  var foldersMap = React.useMemo(function () {
+    return utils.treeToMap(folders, "sid");
   }, [folders]);
-  var folderOptions = react.useMemo(function () {
+  var folderOptions = React.useMemo(function () {
     return createFolderOptions(foldersMap, config);
   }, [foldersMap]);
-  var activeFolderSid = useFolderActions.getActiveFolderId(config);
+  var activeFolderSid = internal.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 initialValues = react.useMemo(function () {
-    return isEditing ? item : {
-      name: "",
+  var extraAttributes = config.extraAttributes;
+  var initialValues = React.useMemo(function () {
+    return isEditing ? item : createInitialValues({
       parentId: parentId
-    };
-  }, [isEditing, item, parentId]);
+    }, extraAttributes);
+  }, [isEditing, item, parentId, extraAttributes]);
   var onSubmitForm = /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(values) {
       var payload;
       return _regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
-            payload = {
-              name: values.name,
-              parent_id: values.parentId
-            };
+            payload = createPayload(values, extraAttributes);
             if (!isEditing) {
               _context.next = 6;
               break;
@@ -363,6 +410,8 @@ var AddEditPane = function AddEditPane(_ref) {
                 label: t("folders.name"),
                 name: "name",
                 ref: setFocusField
+              }), /*#__PURE__*/jsxRuntime.jsx(ExtraAttributes, {
+                attributes: extraAttributes
               }), /*#__PURE__*/jsxRuntime.jsxs("div", {
                 children: [/*#__PURE__*/jsxRuntime.jsx(TreeSelect, {
                   allowClear: true,
@@ -390,10 +439,11 @@ var AddEditPane = function AddEditPane(_ref) {
   });
 };
 
-var _excluded$3 = ["icon", "itemLabel", "folder", "depth", "className", "onClick"];
-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 indentSize = 30;
+var REORDER_TREE_INDENT_WIDTH = 30;
+
+var _excluded$4 = ["icon", "itemLabel", "folder", "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 Node = function Node(_ref, ref) {
   var _folder$children$leng, _folder$children;
   var _ref$icon = _ref.icon,
@@ -403,7 +453,7 @@ var Node = function Node(_ref, ref) {
     depth = _ref.depth,
     className = _ref.className,
     onClick = _ref.onClick,
-    rest = _objectWithoutProperties(_ref, _excluded$3);
+    rest = _objectWithoutProperties(_ref, _excluded$4);
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
   var metaInfo = [];
@@ -418,13 +468,13 @@ var Node = function Node(_ref, ref) {
       length: depth
     }).map(function (_, index) {
       return /*#__PURE__*/jsxRuntime.jsx("span", {
-        className: "neeto-ui-border-gray-300 relative flex-shrink-0 border-l",
+        className: "neeto-ui-border-gray-300 relative h-full flex-shrink-0 border-l",
         style: {
-          width: indentSize,
-          left: Math.round(indentSize / 2)
+          width: REORDER_TREE_INDENT_WIDTH,
+          left: Math.round(REORDER_TREE_INDENT_WIDTH / 2)
         }
       }, index);
-    }), /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread$8(_objectSpread$8({}, _objectSpread$8(_objectSpread$8({}, rest), {}, {
+    }), /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread$a(_objectSpread$a({}, _objectSpread$a(_objectSpread$a({}, rest), {}, {
       onClick: onClick,
       ref: ref
     })), {}, {
@@ -447,11 +497,11 @@ var Node = function Node(_ref, ref) {
     }))]
   });
 };
-var Node$1 = /*#__PURE__*/react.forwardRef(Node);
+var Node$1 = /*#__PURE__*/React.forwardRef(Node);
 
-var _excluded$2 = ["folder", "item", "depth", "maxDepth", "disabled"];
-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", "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 _SelectableNode = function SelectableNode(_ref) {
   var folder = _ref.folder,
     item = _ref.item,
@@ -459,16 +509,18 @@ var _SelectableNode = function SelectableNode(_ref) {
     depth = _ref$depth === void 0 ? 0 : _ref$depth,
     maxDepth = _ref.maxDepth,
     disabled = _ref.disabled,
-    rest = _objectWithoutProperties(_ref, _excluded$2);
+    config = _ref.config,
+    rest = _objectWithoutProperties(_ref, _excluded$3);
   var selection = rest.selection,
     onSelect = rest.onSelect;
-  var _useTranslation = reactI18next.useTranslation(),
+  var _useTranslation = useTranslation(config),
     t = _useTranslation.t;
   var isDisabled = disabled || (item === null || item === void 0 ? void 0 : item.id) === folder.id || depth > maxDepth;
   var renderChildren = function renderChildren() {
     if (neetoCist.isNotPresent(folder.children)) return null;
     return folder.children.map(function (child) {
-      return /*#__PURE__*/react.createElement(_SelectableNode, _objectSpread$7(_objectSpread$7({}, _objectSpread$7(_objectSpread$7({}, rest), {}, {
+      return /*#__PURE__*/React.createElement(_SelectableNode, _objectSpread$9(_objectSpread$9({}, _objectSpread$9(_objectSpread$9({}, rest), {}, {
+        config: config,
         item: item,
         maxDepth: maxDepth
       })), {}, {
@@ -485,7 +537,7 @@ var _SelectableNode = function SelectableNode(_ref) {
       "opacity-60": isDisabled
     }),
     title: isDisabled ? t("moveToFolder.notAllowed") : undefined,
-    children: [/*#__PURE__*/jsxRuntime.jsx(Node$1, _objectSpread$7(_objectSpread$7({}, _objectSpread$7(_objectSpread$7({}, rest), {}, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(Node$1, _objectSpread$9(_objectSpread$9({}, _objectSpread$9(_objectSpread$9({}, rest), {}, {
       depth: depth,
       folder: folder
     })), {}, {
@@ -502,8 +554,8 @@ var _SelectableNode = function SelectableNode(_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$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 PaneBody = function PaneBody(_ref) {
   var item = _ref.item,
     config = _ref.config,
@@ -513,7 +565,7 @@ var PaneBody = function PaneBody(_ref) {
     onSubmit = _ref.onSubmit,
     onClose = _ref.onClose,
     onRemove = _ref.onRemove;
-  var _useState = react.useState(null),
+  var _useState = React.useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     selection = _useState2[0],
     setSelection = _useState2[1];
@@ -526,14 +578,14 @@ var PaneBody = function PaneBody(_ref) {
   var _useFetchFolders = useFolderActions.useFetchFolders(config),
     _useFetchFolders$data = _useFetchFolders.data,
     folders = _useFetchFolders$data === void 0 ? [] : _useFetchFolders$data;
-  var _useTranslation = reactI18next.useTranslation(),
+  var _useTranslation = useTranslation(config),
     t = _useTranslation.t;
   var folderDepth = 0;
   if (item) {
     // If item is a folder, measure the current depth from current folder to longest leaf.
-    var foldersMap = pathUtils.treeToMap(folders);
+    var foldersMap = utils.treeToMap(folders);
     var folder = foldersMap[item.id];
-    if (folder) folderDepth = pathUtils.measureDepth(folder);
+    if (folder) folderDepth = utils.measureDepth(folder);
   }
   var maxDepth = config.maxDepth - folderDepth;
   var onAddFolder = function onAddFolder() {
@@ -559,13 +611,14 @@ var PaneBody = function PaneBody(_ref) {
     }), /*#__PURE__*/jsxRuntime.jsx(Pane.Body, {
       className: "pb-6",
       children: folders.map(function (folder) {
-        return /*#__PURE__*/react.createElement(_SelectableNode, {
+        return /*#__PURE__*/React.createElement(_SelectableNode, {
+          config: config,
           folder: folder,
           item: item,
           maxDepth: maxDepth,
           selection: selection,
           disabled: (item === null || item === void 0 ? void 0 : item.id) === folder.id || maxDepth <= 0,
-          itemLabel: config.itemLabel,
+          itemLabel: config.labels.item,
           key: folder.id,
           onSelect: function onSelect(folder) {
             return setSelection(folder.id);
@@ -576,19 +629,19 @@ 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$6({
+        children: [/*#__PURE__*/jsxRuntime.jsx(Button, _objectSpread$8({
           disabled: !selection,
           label: t("common.save"),
           style: "primary",
           onClick: function onClick() {
             return onSubmit(selection);
           }
-        }, submitButtonProps)), /*#__PURE__*/jsxRuntime.jsx(Button, _objectSpread$6({
+        }, submitButtonProps)), /*#__PURE__*/jsxRuntime.jsx(Button, _objectSpread$8({
           label: t("common.cancel"),
           style: "text",
           onClick: onClose
         }, cancelButtonProps))]
-      }), onRemove && /*#__PURE__*/jsxRuntime.jsx(Button, _objectSpread$6({
+      }), onRemove && /*#__PURE__*/jsxRuntime.jsx(Button, _objectSpread$8({
         label: t("moveToFolder.remove"),
         style: "tertiary",
         onClick: onRemove
@@ -629,14 +682,14 @@ var MoveFolderPane = function MoveFolderPane(_ref) {
   });
 };
 
-var _excluded$1 = ["folder", "depth"];
-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 _DraggableNode = function DraggableNode(_ref) {
+var _excluded$2 = ["folder", "depth"];
+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 _DraggableNode$1 = function DraggableNode(_ref) {
   var folder = _ref.folder,
     _ref$depth = _ref.depth,
     depth = _ref$depth === void 0 ? 0 : _ref$depth,
-    rest = _objectWithoutProperties(_ref, _excluded$1);
+    rest = _objectWithoutProperties(_ref, _excluded$2);
   var _useDraggable = core.useDraggable({
       id: "draggable-item--".concat(folder.id),
       data: folder,
@@ -656,7 +709,7 @@ var _DraggableNode = function DraggableNode(_ref) {
   var renderChildren = function renderChildren() {
     if (neetoCist.isNotPresent(folder.children) || isDragging) return null;
     return folder.children.map(function (child) {
-      return /*#__PURE__*/react.createElement(_DraggableNode, _objectSpread$5(_objectSpread$5({}, rest), {}, {
+      return /*#__PURE__*/React.createElement(_DraggableNode$1, _objectSpread$7(_objectSpread$7({}, rest), {}, {
         depth: depth + 1,
         folder: child,
         key: child.id
@@ -664,14 +717,14 @@ var _DraggableNode = function DraggableNode(_ref) {
     });
   };
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/jsxRuntime.jsx(Node$1, _objectSpread$5(_objectSpread$5(_objectSpread$5({}, rest), {}, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(Node$1, _objectSpread$7(_objectSpread$7(_objectSpread$7({}, 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$5(_objectSpread$5({
+    }, _objectSpread$7(_objectSpread$7({
       depth: depth,
       folder: folder
     }, attributes), listeners)), {}, {
@@ -683,20 +736,20 @@ 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; }
-var ReorderFoldersPane = function ReorderFoldersPane(_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; }
+var RearrangeFoldersPane = function RearrangeFoldersPane(_ref) {
   var config = _ref.config,
     onClose = _ref.onClose;
-  var _useState = react.useState(null),
+  var _useState = React.useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     dragItem = _useState2[0],
     setDragItem = _useState2[1];
-  var _useState3 = react.useState({}),
+  var _useState3 = React.useState({}),
     _useState4 = _slicedToArray(_useState3, 2),
     changes = _useState4[0],
     setChanges = _useState4[1];
-  var _useTranslation = reactI18next.useTranslation(),
+  var _useTranslation = useTranslation(config),
     t = _useTranslation.t;
   var _useFetchFolders = useFolderActions.useFetchFolders(config),
     folders = _useFetchFolders.data;
@@ -718,7 +771,7 @@ var ReorderFoldersPane = function ReorderFoldersPane(_ref) {
       over = _ref2.over;
     setDragItem(null);
     if (!over) return;
-    var foldersMap = pathUtils.treeToMap(tree);
+    var foldersMap = utils.treeToMap(tree);
     var activeFolder = foldersMap[active.data.current.id];
     var overFolder = foldersMap[over.data.current.id];
 
@@ -727,7 +780,7 @@ var ReorderFoldersPane = function ReorderFoldersPane(_ref) {
 
     // Check moving to a folder with depth greater than the allowed limit.
     // maxDepth + 1 due to extra root node added for the tree
-    var activeDepth = pathUtils.measureDepth(activeFolder);
+    var activeDepth = utils.measureDepth(activeFolder);
     var overDepth = overFolder.meta.depth;
     if (activeDepth + overDepth >= config.maxDepth + 1) {
       Toastr.error(t("moveToFolder.depthExceeded", {
@@ -736,7 +789,7 @@ var ReorderFoldersPane = function ReorderFoldersPane(_ref) {
       return;
     }
     activeFolder.meta.parent = overFolder;
-    var newTree = pathUtils.mapToTree(foldersMap);
+    var newTree = utils.mapToTree(foldersMap);
     setTree(newTree);
     setChanges(ramda.assoc(activeFolder.id, overFolder.id));
   };
@@ -752,7 +805,7 @@ var ReorderFoldersPane = function ReorderFoldersPane(_ref) {
     icon: /*#__PURE__*/jsxRuntime.jsx(Reorder, {
       className: "neeto-ui-text-gray-500 relative -left-[0.3125rem] flex-shrink-0"
     }),
-    itemLabel: config.itemLabel
+    itemLabel: config.labels.item
   };
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [/*#__PURE__*/jsxRuntime.jsx(Pane.Header, {
@@ -768,7 +821,7 @@ var ReorderFoldersPane = function ReorderFoldersPane(_ref) {
       },
       children: [/*#__PURE__*/jsxRuntime.jsx(Pane.Body, {
         className: "pb-6",
-        children: /*#__PURE__*/react.createElement(_DraggableNode, _objectSpread$4(_objectSpread$4({}, nodeProps), {}, {
+        children: /*#__PURE__*/React.createElement(_DraggableNode$1, _objectSpread$6(_objectSpread$6({}, nodeProps), {}, {
           folder: tree,
           key: tree.id
         }))
@@ -786,7 +839,7 @@ var ReorderFoldersPane = function ReorderFoldersPane(_ref) {
         })]
       }), /*#__PURE__*/reactDom.createPortal(/*#__PURE__*/jsxRuntime.jsx(core.DragOverlay, {
         zIndex: 99999,
-        children: dragItem && /*#__PURE__*/jsxRuntime.jsx(Node$1, _objectSpread$4(_objectSpread$4({}, nodeProps), {}, {
+        children: dragItem && /*#__PURE__*/jsxRuntime.jsx(Node$1, _objectSpread$6(_objectSpread$6({}, nodeProps), {}, {
           className: "neeto-ui-bg-gray-200",
           depth: 0,
           folder: dragItem
@@ -796,6 +849,312 @@ var ReorderFoldersPane = function ReorderFoldersPane(_ref) {
   });
 };
 
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+var distanceBetween = function distanceBetween(p1, p2) {
+  return Math.sqrt(Math.pow(p1.x - p2.x, 2) + Math.pow(p1.y - p2.y, 2));
+};
+var centerOfRectangle = function centerOfRectangle(rect) {
+  var left = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : rect.left;
+  var top = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : rect.top;
+  return {
+    x: left + rect.width * 0.5,
+    y: top + rect.height * 0.5
+  };
+};
+var closestCenter = function closestCenter(_ref) {
+  var activeItem = _ref.activeItem;
+  return function (_ref2) {
+    var collisionRect = _ref2.collisionRect,
+      droppableRects = _ref2.droppableRects,
+      droppableContainers = _ref2.droppableContainers;
+    var centerRect = centerOfRectangle(collisionRect, collisionRect.left - 30, collisionRect.top - 30);
+    var minDistance = Number.POSITIVE_INFINITY;
+    var collision = {
+      id: undefined
+    };
+
+    // eslint-disable-next-line @bigbinary/neeto/use-array-methods
+    var _iterator = _createForOfIteratorHelper(droppableContainers),
+      _step;
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var droppableContainer = _step.value;
+        var rect = droppableRects.get(droppableContainer.id);
+        if (!rect || droppableContainer.id === activeItem.id) continue;
+        var distance = distanceBetween(centerOfRectangle(rect), centerRect);
+        if (distance < minDistance) {
+          minDistance = distance;
+          collision = {
+            id: droppableContainer.id,
+            data: {
+              droppableContainer: droppableContainer,
+              value: distance
+            }
+          };
+        }
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+    return [collision];
+  };
+};
+
+var PlaceholderNode = function PlaceholderNode(_ref) {
+  var folder = _ref.folder,
+    dragState = _ref.dragState;
+  var overItem = dragState.overItem;
+  var id = React.useId();
+  var isOver = id === (overItem === null || overItem === void 0 ? void 0 : overItem.id);
+  var depth = folder.meta.depth + 1;
+  var meta = {
+    parent: folder,
+    index: -1,
+    depth: depth
+  };
+  var _useDroppable = core.useDroppable({
+      id: "droppable-placeholder--".concat(folder.name),
+      data: {
+        id: id,
+        meta: meta
+      }
+    }),
+    setDroppableRef = _useDroppable.setNodeRef;
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "flex w-full",
+    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+      style: {
+        width: REORDER_TREE_INDENT_WIDTH * depth
+      }
+    }), /*#__PURE__*/jsxRuntime.jsx("div", {
+      ref: setDroppableRef,
+      className: classNames({
+        "min-w-0 flex-1 transition-colors": true,
+        "neeto-ui-border-primary-500 border-b-2": isOver
+      })
+    })]
+  });
+};
+
+var _excluded$1 = ["folder", "dragState"];
+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 _DraggableNode = function DraggableNode(_ref) {
+  var _overItem$meta$parent;
+  var folder = _ref.folder,
+    dragState = _ref.dragState,
+    rest = _objectWithoutProperties(_ref, _excluded$1);
+  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);
+  var isRoot = folder.meta.depth <= 0;
+  var _useDraggable = core.useDraggable({
+      id: "draggable-item--".concat(folder.id),
+      data: folder,
+      disabled: isRoot
+    }),
+    isDragging = _useDraggable.isDragging,
+    attributes = _useDraggable.attributes,
+    listeners = _useDraggable.listeners,
+    setDraggableRef = _useDraggable.setNodeRef;
+  var _useDroppable = core.useDroppable({
+      id: "droppable-item--".concat(folder.id),
+      data: folder,
+      disabled: isRoot || isDragging
+    }),
+    setDroppableRef = _useDroppable.setNodeRef;
+  var renderChildren = function renderChildren() {
+    if (isDragging) return null;
+    return /*#__PURE__*/jsxRuntime.jsxs(React.Fragment, {
+      children: [/*#__PURE__*/jsxRuntime.jsx(PlaceholderNode, {
+        dragState: dragState,
+        folder: folder
+      }), internal.isArray(folder.children) && folder.children.map(function (child) {
+        return /*#__PURE__*/React.createElement(_DraggableNode, _objectSpread$5(_objectSpread$5({}, _objectSpread$5(_objectSpread$5({}, rest), {}, {
+          dragState: dragState
+        })), {}, {
+          depth: child.meta.depth,
+          folder: child,
+          key: child.id
+        }));
+      })]
+    }, "".concat(folder.id, "--container"));
+  };
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(Node$1, _objectSpread$5(_objectSpread$5({
+      depth: folder.meta.depth
+    }, _objectSpread$5(_objectSpread$5(_objectSpread$5({}, rest), {}, {
+      folder: folder
+    }, attributes), listeners)), {}, {
+      className: classNames({
+        "hover:neeto-ui-bg-gray-100 w-full cursor-move transition-colors": true,
+        "neeto-ui-bg-gray-100 opacity-50": isDragging,
+        "neeto-ui-bg-primary-50": isOverParent,
+        "neeto-ui-border-primary-500 border-b-2": isOverItem
+      }),
+      ref: function ref(_ref2) {
+        setDroppableRef(_ref2);
+        setDraggableRef(_ref2);
+      }
+    })), renderChildren()]
+  });
+};
+
+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 initialDragState = {
+  activeItem: null,
+  overItem: null
+};
+var sensorConfig = {
+  activationConstraint: {
+    distance: 8
+  }
+};
+var measuringConfig = {
+  droppable: {
+    frequency: 500
+  }
+};
+
+// Reorder with support for position adjustment
+var ReorderFoldersPane = function ReorderFoldersPane(_ref) {
+  var config = _ref.config,
+    onClose = _ref.onClose;
+  var _useState = React.useState(initialDragState),
+    _useState2 = _slicedToArray(_useState, 2),
+    dragState = _useState2[0],
+    setDragState = _useState2[1];
+  var _useState3 = React.useState({}),
+    _useState4 = _slicedToArray(_useState3, 2),
+    changes = _useState4[0],
+    setChanges = _useState4[1];
+  var _useTranslation = useTranslation(config),
+    t = _useTranslation.t;
+  var _useFetchFolders = useFolderActions.useFetchFolders(config),
+    folders = _useFetchFolders.data;
+  var _useReorderFolders = useFolderActions.useReorderFolders(config),
+    reorderFolders = _useReorderFolders.mutate;
+  var sensors = core.useSensors(core.useSensor(core.PointerSensor, sensorConfig));
+  var _useStateWithDependen = reactUtils.useStateWithDependency(function () {
+      return {
+        name: "/",
+        id: null,
+        children: folders
+      };
+    }, [folders]),
+    _useStateWithDependen2 = _slicedToArray(_useStateWithDependen, 2),
+    baseTree = _useStateWithDependen2[0],
+    setBaseTree = _useStateWithDependen2[1];
+
+  // Decorates tree with meta info. Can be optimized when needed.
+  var tree = React.useMemo(function () {
+    return utils.mapToSortedTree(utils.treeToMap(baseTree));
+  }, [baseTree]);
+  var onDragEnd = function onDragEnd(_ref2) {
+    var active = _ref2.active,
+      over = _ref2.over;
+    setDragState(initialDragState);
+    if (!over) return;
+    var foldersMap = utils.treeToMap(tree);
+    var activeFolder = foldersMap[active.data.current.id];
+    var targetFolder = foldersMap[over.data.current.meta.parent.id];
+    var targetIndex = over.data.current.meta.index + 1; // `index` starts from -1 with placeholder
+
+    // Guards: Check moving inside invalid directories.
+    if (!targetFolder || activeFolder.id === targetFolder.id) return;
+    if (activeFolder.meta.parent.id === targetFolder.id && activeFolder.meta.index === targetIndex) {
+      return;
+    }
+
+    // Check moving to a folder with depth greater than the allowed limit.
+    // maxDepth + 1 due to extra root node added for the tree
+    var srcDepth = utils.measureDepth(activeFolder);
+    var dstDepth = targetFolder.meta.depth;
+    if (srcDepth + dstDepth >= config.maxDepth + 1) {
+      Toastr.error(t("moveToFolder.depthExceeded", {
+        maxDepth: config.maxDepth
+      }));
+      return;
+    }
+    activeFolder.meta.parent = targetFolder;
+    activeFolder.meta.__index = targetIndex;
+    var newTree = utils.mapToSortedTree(foldersMap);
+    setBaseTree(newTree);
+    setChanges(ramda.assoc(activeFolder.id, {
+      parentId: targetFolder.id,
+      index: targetIndex
+    }));
+  };
+  var onSubmit = function onSubmit() {
+    var payload = {
+      changes: changes
+    };
+    reorderFolders(payload, {
+      onSuccess: onClose
+    });
+  };
+  var nodeProps = {
+    icon: /*#__PURE__*/jsxRuntime.jsx(Reorder, {
+      className: "neeto-ui-text-gray-500 relative -left-[0.3125rem] flex-shrink-0"
+    }),
+    itemLabel: config.labels.item
+  };
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(Pane.Header, {
+      children: /*#__PURE__*/jsxRuntime.jsx(Typography, {
+        style: "h2",
+        children: t("reorderFolder.title")
+      })
+    }), /*#__PURE__*/jsxRuntime.jsxs(core.DndContext, {
+      onDragEnd: onDragEnd,
+      sensors: sensors,
+      collisionDetection: closestCenter(dragState),
+      measuring: measuringConfig,
+      onDragOver: function onDragOver(_ref3) {
+        var over = _ref3.over;
+        setDragState(ramda.assoc("overItem", over === null || over === void 0 ? void 0 : over.data.current));
+      },
+      onDragStart: function onDragStart(_ref4) {
+        var active = _ref4.active;
+        setDragState(ramda.assoc("activeItem", active.data.current));
+      },
+      children: [/*#__PURE__*/jsxRuntime.jsx(Pane.Body, {
+        className: "pb-6",
+        children: /*#__PURE__*/React.createElement(_DraggableNode, _objectSpread$4(_objectSpread$4({}, _objectSpread$4(_objectSpread$4({}, nodeProps), {}, {
+          dragState: dragState
+        })), {}, {
+          folder: tree,
+          key: tree.id
+        }))
+      }), /*#__PURE__*/jsxRuntime.jsxs(Pane.Footer, {
+        className: "gap-2",
+        children: [/*#__PURE__*/jsxRuntime.jsx(Button, {
+          disabled: ramda.isEmpty(changes),
+          label: t("common.save"),
+          style: "primary",
+          onClick: onSubmit
+        }), /*#__PURE__*/jsxRuntime.jsx(Button, {
+          label: t("common.cancel"),
+          style: "text",
+          onClick: onClose
+        })]
+      }), /*#__PURE__*/reactDom.createPortal(/*#__PURE__*/jsxRuntime.jsx(core.DragOverlay, {
+        zIndex: 99999,
+        children: dragState && /*#__PURE__*/jsxRuntime.jsx(Node$1, _objectSpread$4(_objectSpread$4({}, nodeProps), {}, {
+          className: "neeto-ui-bg-gray-200 pl-4 pr-12",
+          depth: 0,
+          folder: dragState.activeItem
+        }))
+      }), document.body)]
+    })]
+  });
+};
+
 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 FoldersPane = function FoldersPane(_ref) {
@@ -823,6 +1182,7 @@ var FoldersPane = function FoldersPane(_ref) {
     config: config,
     onClose: onClose
   };
+  var ReorderPaneComponent = config.reorderMode === "reorder" ? ReorderFoldersPane : RearrangeFoldersPane;
   return /*#__PURE__*/jsxRuntime.jsx(Pane, {
     onClose: onClose,
     isOpen: !!type,
@@ -831,7 +1191,7 @@ var FoldersPane = function FoldersPane(_ref) {
       return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [(type === "edit" || type === "add") && /*#__PURE__*/jsxRuntime.jsx(AddEditPane, _objectSpread$3({}, _objectSpread$3({
           setFocusField: setFocusField
-        }, commonProps))), type === "move" && /*#__PURE__*/jsxRuntime.jsx(MoveFolderPane, _objectSpread$3({}, commonProps)), type === "reorder" && /*#__PURE__*/jsxRuntime.jsx(ReorderFoldersPane, _objectSpread$3({}, commonProps))]
+        }, commonProps))), type === "move" && /*#__PURE__*/jsxRuntime.jsx(MoveFolderPane, _objectSpread$3({}, commonProps)), type === "reorder" && /*#__PURE__*/jsxRuntime.jsx(ReorderPaneComponent, _objectSpread$3({}, commonProps))]
       });
     }
   });
@@ -856,8 +1216,9 @@ var FolderTile = function FolderTile(_ref) {
     itemLabel = _ref.itemLabel,
     folder = _ref.folder,
     actions = _ref.actions,
+    config = _ref.config,
     onSelect = _ref.onSelect;
-  var _useTranslation = reactI18next.useTranslation(),
+  var _useTranslation = useTranslation(config),
     t = _useTranslation.t;
   var actionCallback = function actionCallback(callback) {
     return function (event) {
@@ -934,7 +1295,7 @@ var FoldersList = function FoldersList(_ref) {
     onSelect = _ref.onSelect;
   var config = _objectSpread$2(_objectSpread$2({}, useFolderActions.DEFAULT_CONFIG), configProps);
   var params = reactUtils.useQueryParams();
-  var _useTranslation = reactI18next.useTranslation(),
+  var _useTranslation = useTranslation(config),
     t = _useTranslation.t;
   var fetchParams = ramda.pick(["sortBy", "orderBy"], params);
   var _useFolders = useFolderActions.useFolders(_objectSpread$2(_objectSpread$2({}, config), {}, {
@@ -956,14 +1317,15 @@ var FoldersList = function FoldersList(_ref) {
     }), /*#__PURE__*/jsxRuntime.jsx("div", {
       className: "neeto-folders-grid-view-wrapper mb-10 grid w-full gap-4",
       children: subFolders.map(function (folder) {
-        return /*#__PURE__*/react.createElement(FolderTile, {
+        return /*#__PURE__*/React.createElement(FolderTile, {
           actions: actions,
+          config: config,
           folder: folder,
           onSelect: onSelect,
           isSelected: selection.includes(folder.id),
-          itemLabel: config.itemLabel,
+          itemLabel: config.labels.item,
           key: folder.id,
-          link: utils.buildUrl(config.folderPath, _objectSpread$2(_objectSpread$2({}, params), {}, {
+          link: utils$1.buildUrl(config.folderPath, _objectSpread$2(_objectSpread$2({}, params), {}, {
             folderId: folder.sid
           }))
         });
@@ -1014,16 +1376,16 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 var FoldersTree = function FoldersTree(_ref) {
   var configProps = _ref.config;
   var config = _objectSpread(_objectSpread({}, useFolderActions.DEFAULT_CONFIG), configProps);
-  var _useState = react.useState([]),
+  var _useState = React.useState([]),
     _useState2 = _slicedToArray(_useState, 2),
     expandedKeys = _useState2[0],
     setExpandedKeys = _useState2[1];
-  var _useTranslation = reactI18next.useTranslation(),
+  var _useTranslation = useTranslation(config),
     t = _useTranslation.t;
   var params = reactUtils.useQueryParams({
     toCamelCase: false
   });
-  var activeFolderSid = useFolderActions.getActiveFolderId(config);
+  var activeFolderSid = internal.getActiveFolderId(config);
   var _useFetchFolders = useFolderActions.useFetchFolders(config),
     folders = _useFetchFolders.data;
   var updateExpandedKeys = function updateExpandedKeys() {
@@ -1031,15 +1393,15 @@ var FoldersTree = function FoldersTree(_ref) {
     if (!folders) return;
     // When active folder changes from external sources, update expanded keys to auto expand tree.
     var expandedKeys = [];
-    var map = pathUtils.treeToMap(folders, "sid");
+    var map = utils.treeToMap(folders, "sid");
     var activeFolder = map[activeFolderSid];
     var parentSid = activeFolder === null || activeFolder === void 0 || (_activeFolder$meta = activeFolder.meta) === null || _activeFolder$meta === void 0 || (_activeFolder$meta = _activeFolder$meta.parent) === null || _activeFolder$meta === void 0 ? void 0 : _activeFolder$meta.sid;
     if (parentSid) expandedKeys.push(parentSid);
     setExpandedKeys(expandedKeys);
   };
-  react.useEffect(function () {
+  React.useEffect(function () {
     // Non urgent update.
-    react.startTransition(updateExpandedKeys);
+    React.startTransition(updateExpandedKeys);
   }, [activeFolderSid, folders]);
   if (neetoCist.isNotPresent(folders)) {
     return /*#__PURE__*/jsxRuntime.jsx(Typography, {
@@ -1068,7 +1430,7 @@ var FoldersTree = function FoldersTree(_ref) {
       return /*#__PURE__*/jsxRuntime.jsx(FolderNode, {
         folder: folder,
         isActive: folder.sid === activeFolderSid,
-        link: utils.buildUrl(config.folderPath, _objectSpread(_objectSpread({}, params), {}, {
+        link: utils$1.buildUrl(config.folderPath, _objectSpread(_objectSpread({}, params), {}, {
           folderId: folder.sid
         }))
       });