@bigbinary/neeto-folders-frontend 1.2.0 → 2.0.1

package/dist/components.js

@@ -1,23 +1,31 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
-import _regeneratorRuntime from '@babel/runtime/regenerator';
+import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import { shallow } from 'zustand/shallow';
+import { useQueryClient } from '@tanstack/react-query';
 import { useQueryParams, useStateWithDependency } from '@bigbinary/neeto-commons-frontend/react-utils';
 import { buildUrl } from '@bigbinary/neeto-commons-frontend/utils';
 import Alert from '@bigbinary/neetoui/Alert';
-import { useTranslation, Trans } from 'react-i18next';
+import { useTranslation as useTranslation$1, Trans } from 'react-i18next';
 import { useHistory, Link, NavLink } from 'react-router-dom';
-import { c as useFolderStore, d as useDestroyFolder, a as useFolders, i as isActiveFolder, e as useFetchFolders, f as useCreateFolder, g as useUpdateFolder, h as getActiveFolderId, j as useReorderFolders, D as DEFAULT_CONFIG, u as useFolder, b as useFolderActions } from './useFolderActions-BoLQ9bAf.js';
-import { p as pathToFolder, t as treeToMap, m as measureDepth, a as mapToTree } from './pathUtils-B2uokQlx.js';
+import { c as useFolderStore, d as useDestroyFolder, a as useFolders, e as useFetchFolders, f as useCreateFolder, g as useUpdateFolder, h as useReorderFolders, D as DEFAULT_CONFIG, u as useFolder, b as useFolderActions } from './useFolderActions-BLpmmlOf.js';
+import { QUERY_KEYS } from './constants.js';
+import { p as pathToFolder, t as treeToMap, m as measureDepth, a as mapToTree, b as mapToSortedTree } from './index-Cq1DyvVr.js';
+import { a as isActiveFolder, g as getActiveFolderId, i as isArray } from './internal-G6z0jIQe.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import Pane from '@bigbinary/neetoui/Pane';
-import { forwardRef, useMemo, createElement, useState, useEffect, startTransition } from 'react';
+import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
+import _regeneratorRuntime from '@babel/runtime/regenerator';
+import React, { createElement, forwardRef, useMemo, useState, useId, useEffect, startTransition } from 'react';
 import { useField, Formik, Form } from 'formik';
 import Typography from '@bigbinary/neetoui/Typography';
 import Input from '@bigbinary/neetoui/formik/Input';
 import ActionBlock from '@bigbinary/neetoui/formik/ActionBlock';
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { t as t$1 } from 'i18next';
+import { object, string } from 'yup';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import Switch from '@bigbinary/neetoui/formik/Switch';
+import Textarea from '@bigbinary/neetoui/formik/Textarea';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { ConfigProvider, TreeSelect as TreeSelect$1 } from 'antd';
 import classNames from 'classnames';
 import Down from '@bigbinary/neeto-icons/Down';
@@ -26,21 +34,30 @@ import { values, isEmpty, assoc, pick } from 'ramda';
 import Button from '@bigbinary/neetoui/Button';
 import { noop, isNotPresent } from '@bigbinary/neeto-cist';
 import Radio from '@bigbinary/neetoui/Radio';
-import Tooltip from '@bigbinary/neetoui/Tooltip';
-import { useDraggable, useDroppable, DndContext, DragOverlay } from '@dnd-kit/core';
-import Folder from '@bigbinary/neeto-icons/Folder';
+import { useDraggable, useDroppable, DndContext, DragOverlay, useSensors, useSensor, PointerSensor } from '@dnd-kit/core';
+import Reorder from '@bigbinary/neeto-icons/Reorder';
 import Toastr from '@bigbinary/neetoui/Toastr';
 import { createPortal } from 'react-dom';
 import MoreDropdown from '@bigbinary/neeto-molecules/MoreDropdown';
 import Checkbox from '@bigbinary/neetoui/Checkbox';
 import Tree from '@bigbinary/neetoui/Tree';
-import 'i18next';
-import '@tanstack/react-query';
-import './constants.js';
 import '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 = useTranslation$1(),
+    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 = useFolderStore(function (store) {
@@ -52,8 +69,9 @@ var FoldersAlerts = function FoldersAlerts(_ref) {
   var queryParams = useQueryParams({
     toCamelCase: false
   });
+  var queryClient = useQueryClient();
   var history = useHistory();
-  var _useTranslation = useTranslation(),
+  var _useTranslation = useTranslation(config),
     t = _useTranslation.t;
   var _useFolderStore2 = useFolderStore(function (store) {
       var _store$alertState, _store$alertState2;
@@ -66,7 +84,7 @@ var FoldersAlerts = function FoldersAlerts(_ref) {
     item = _useFolderStore2.item;
   var _useDestroyFolder = useDestroyFolder(config),
     destroyFolder = _useDestroyFolder.mutateAsync,
-    isLoading = _useDestroyFolder.isLoading;
+    isPending = _useDestroyFolder.isPending;
   var _useFolders = useFolders(config),
     folders = _useFolders.folders;
   var onClose = function onClose() {
@@ -76,46 +94,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 (!(!isActiveFolder(item.sid) || !folders)) {
-              _context.next = 5;
-              break;
-            }
-            return _context.abrupt("return");
-          case 5:
-            path = pathToFolder(folders, item.id);
-            parent = path[path.length - 2];
-            if (parent) {
-              _context.next = 9;
-              break;
-            }
-            return _context.abrupt("return");
-          case 9:
-            history.replace(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 = isActiveFolder(config, item.sid);
+      // Invalidates items and folder details. Refetch only if not active folder.
+      var invalidationKeys = [].concat(_toConsumableArray(config.invalidationKeys), [[QUERY_KEYS.FOLDERS, config.type, QUERY_KEYS.DETAILS]]);
+      invalidationKeys.forEach(function (queryKey) {
+        queryClient.invalidateQueries({
+          refetchType: isActive ? "none" : "active",
+          queryKey: queryKey
+        });
+      });
+      if (isActive && folders) {
+        var path = pathToFolder(folders, item.id);
+        var parent = path[path.length - 2];
+        history.replace(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__*/jsx(Trans, {
@@ -125,12 +130,40 @@ var FoldersAlerts = function FoldersAlerts(_ref) {
     if (config.customizeAlerts) config.customizeAlerts(type, item, alertProps);
     alertProps.onSubmit = onConfirmDelete;
   }
-  return /*#__PURE__*/jsx(Alert, _objectSpread$a({}, alertProps));
+  return /*#__PURE__*/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 FORM_VALIDATION_SCHEMA = object().shape({
+  name: string().required(t$1("errors.blank", {
+    entity: t$1("common.name")
+  }))
+});
+
+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__*/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__*/forwardRef(function (_ref, ref) {
   var _fieldNames$label;
   var className = _ref.className,
@@ -151,7 +184,7 @@ var TreeSelect = /*#__PURE__*/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 = useField(name),
     _useField2 = _slicedToArray(_useField, 3),
     field = _useField2[0],
@@ -169,13 +202,40 @@ var TreeSelect = /*#__PURE__*/forwardRef(function (_ref, ref) {
       children: label
     }), /*#__PURE__*/jsx(ConfigProvider, {
       theme: {
+        token: {
+          colorBgContainer: "rgb(var(--neeto-ui-white))",
+          colorBorder: "rgb(var(--neeto-ui-gray-300))",
+          colorBorderSecondary: "rgb(var(--neeto-ui-gray-200))",
+          colorFillAlter: "rgb(var(--neeto-ui-gray-100))",
+          colorFillContent: "rgb(var(--neeto-ui-gray-100))",
+          colorFillSecondary: "rgb(var(--neeto-ui-gray-100))",
+          colorIcon: "rgb(var(--neeto-ui-gray-700))",
+          colorIconHover: "rgb(var(--neeto-ui-gray-800))",
+          colorLink: "rgb(var(--neeto-ui-primary-500))",
+          colorLinkActive: "rgb(var(--neeto-ui-primary-800))",
+          colorLinkHover: "rgb(var(--neeto-ui-primary-600))",
+          colorPrimary: "rgb(var(--neeto-ui-primary-500))",
+          colorSplit: "rgb(var(--neeto-ui-gray-100))",
+          colorText: "rgb(var(--neeto-ui-gray-800))",
+          colorTextDescription: "rgb(var(--neeto-ui-gray-700))",
+          colorTextDisabled: "rgb(var(--neeto-ui-gray-600))",
+          colorTextHeading: "rgb(var(--neeto-ui-black))",
+          colorTextPlaceholder: "rgb(var(--neeto-ui-gray-500))",
+          controlItemBgActive: "rgb(var(--neeto-ui-primary-100))",
+          controlItemBgActiveHover: "rgb(var(--neeto-ui-pastel-purple))",
+          controlItemBgHover: "rgb(var(--neeto-ui-gray-100))"
+        },
         components: {
           TreeSelect: {
-            titleHeight: 28
+            titleHeight: 28,
+            indentSize: 28,
+            nodeHoverBg: "rgb(var(--neeto-ui-gray-100))",
+            nodeSelectedBg: "rgb(var(--neeto-ui-primary-500))",
+            colorBgElevated: "rgb(var(--neeto-ui-white))"
           }
         }
       },
-      children: /*#__PURE__*/jsx(TreeSelect$1, _objectSpread$9(_objectSpread$9({
+      children: /*#__PURE__*/jsx(TreeSelect$1, _objectSpread$b(_objectSpread$b({
         treeDataSimpleMode: true,
         "data-cy": "nui-select-container-wrapper",
         dropdownStyle: {
@@ -190,8 +250,10 @@ var TreeSelect = /*#__PURE__*/forwardRef(function (_ref, ref) {
           "neeto-ui-tree-select__error": meta.error
         }),
         switcherIcon: function switcherIcon(props) {
-          return /*#__PURE__*/jsx("div", _objectSpread$9(_objectSpread$9({}, props), {}, {
-            children: /*#__PURE__*/jsx(Down, {})
+          return /*#__PURE__*/jsx("div", _objectSpread$b(_objectSpread$b({}, props), {}, {
+            children: /*#__PURE__*/jsx(Down, {
+              className: "relative"
+            })
           }));
         },
         onBlur: function onBlur() {
@@ -200,7 +262,7 @@ var TreeSelect = /*#__PURE__*/forwardRef(function (_ref, ref) {
         onChange: function onChange(value) {
           return setValue(value);
         }
-      }, _objectSpread$9({
+      }, _objectSpread$b({
         disabled: disabled,
         fieldNames: fieldNames,
         loading: loading,
@@ -237,12 +299,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 = useTranslation(),
+  var _useTranslation = useTranslation(config),
     t = _useTranslation.t;
   var _useFolderStore = useFolderStore(function (store) {
       var _store$paneState, _store$paneState2;
@@ -270,22 +355,19 @@ var AddEditPane = function AddEditPane(_ref) {
   var activeFolder = foldersMap[activeFolderSid];
   var isValidParent = (activeFolder === null || activeFolder === void 0 ? void 0 : activeFolder.meta.depth) < config.maxDepth;
   var parentId = isValidParent ? activeFolder.id : null;
+  var extraAttributes = config.extraAttributes;
   var initialValues = useMemo(function () {
-    return isEditing ? item : {
-      name: "",
+    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;
@@ -322,16 +404,21 @@ var AddEditPane = function AddEditPane(_ref) {
     }), /*#__PURE__*/jsx(Formik, {
       initialValues: initialValues,
       enableReinitialize: true,
+      validationSchema: FORM_VALIDATION_SCHEMA,
       onSubmit: onSubmitForm,
       children: function children() {
         return /*#__PURE__*/jsxs(Fragment, {
           children: [/*#__PURE__*/jsx(Pane.Body, {
+            className: "pb-6",
             children: /*#__PURE__*/jsxs(Form, {
               className: "w-full space-y-5",
               children: [/*#__PURE__*/jsx(Input, {
+                required: true,
                 label: t("folders.name"),
                 name: "name",
                 ref: setFocusField
+              }), /*#__PURE__*/jsx(ExtraAttributes, {
+                attributes: extraAttributes
               }), /*#__PURE__*/jsxs("div", {
                 children: [/*#__PURE__*/jsx(TreeSelect, {
                   allowClear: true,
@@ -340,7 +427,8 @@ var AddEditPane = function AddEditPane(_ref) {
                   name: "parentId",
                   treeData: folderOptions
                 }), /*#__PURE__*/jsx(Typography, {
-                  style: "nano",
+                  className: "mt-1",
+                  style: "body3",
                   children: t("createFolder.parentInfo")
                 })]
               })]
@@ -358,10 +446,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,
@@ -371,8 +460,8 @@ var Node = function Node(_ref, ref) {
     depth = _ref.depth,
     className = _ref.className,
     onClick = _ref.onClick,
-    rest = _objectWithoutProperties(_ref, _excluded$3);
-  var _useTranslation = useTranslation(),
+    rest = _objectWithoutProperties(_ref, _excluded$4);
+  var _useTranslation = useTranslation$1(),
     t = _useTranslation.t;
   var metaInfo = [];
   var childCount = (_folder$children$leng = (_folder$children = folder.children) === null || _folder$children === void 0 ? void 0 : _folder$children.length) !== null && _folder$children$leng !== void 0 ? _folder$children$leng : 0;
@@ -381,18 +470,18 @@ var Node = function Node(_ref, ref) {
   }));
   folder.itemCount > 0 && metaInfo.push("".concat(folder.itemCount, " ").concat(itemLabel));
   return /*#__PURE__*/jsxs("div", {
-    className: "flex",
+    className: "flex w-full min-w-0",
     children: [Array.from({
       length: depth
     }).map(function (_, index) {
       return /*#__PURE__*/jsx("span", {
-        className: "relative 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__*/jsxs("div", _objectSpread$8(_objectSpread$8({}, _objectSpread$8(_objectSpread$8({}, rest), {}, {
+    }), /*#__PURE__*/jsxs("div", _objectSpread$a(_objectSpread$a({}, _objectSpread$a(_objectSpread$a({}, rest), {}, {
       onClick: onClick,
       ref: ref
     })), {}, {
@@ -400,12 +489,14 @@ var Node = function Node(_ref, ref) {
       children: [icon, /*#__PURE__*/jsxs("div", {
         className: "ml-2",
         children: [/*#__PURE__*/jsx(Typography, {
-          style: "body3",
+          lineHeight: "snug",
+          style: "body1",
           weight: "medium",
           children: folder.name
         }), /*#__PURE__*/jsx(Typography, {
-          className: "relative -top-0.5",
-          style: "nano",
+          className: "relative mt-0.5",
+          lineHeight: "snug",
+          style: "body3",
           weight: "normal",
           children: metaInfo.join(" . ")
         })]
@@ -415,9 +506,9 @@ var Node = function Node(_ref, ref) {
 };
 var Node$1 = /*#__PURE__*/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,
@@ -425,16 +516,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 = 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 (isNotPresent(folder.children)) return null;
     return folder.children.map(function (child) {
-      return /*#__PURE__*/createElement(_SelectableNode, _objectSpread$7(_objectSpread$7({}, _objectSpread$7(_objectSpread$7({}, rest), {}, {
+      return /*#__PURE__*/createElement(_SelectableNode, _objectSpread$9(_objectSpread$9({}, _objectSpread$9(_objectSpread$9({}, rest), {}, {
+        config: config,
         item: item,
         maxDepth: maxDepth
       })), {}, {
@@ -445,33 +538,31 @@ var _SelectableNode = function SelectableNode(_ref) {
       }));
     });
   };
-  return /*#__PURE__*/jsx(Tooltip, {
-    content: t("moveToFolder.notAllowed"),
-    disabled: !isDisabled,
-    position: "top",
-    children: /*#__PURE__*/jsxs("div", {
-      className: classNames({
-        "opacity-40": isDisabled
+  return /*#__PURE__*/jsxs("div", {
+    "aria-disabled": isDisabled,
+    className: classNames({
+      "opacity-60": isDisabled
+    }),
+    title: isDisabled ? t("moveToFolder.notAllowed") : undefined,
+    children: [/*#__PURE__*/jsx(Node$1, _objectSpread$9(_objectSpread$9({}, _objectSpread$9(_objectSpread$9({}, rest), {}, {
+      depth: depth,
+      folder: folder
+    })), {}, {
+      icon: /*#__PURE__*/jsx(Radio.Item, {
+        readOnly: true,
+        checked: selection === folder.id,
+        className: "neeto-ui-radio__container",
+        name: "move-folder-option"
       }),
-      children: [/*#__PURE__*/jsx(Node$1, _objectSpread$7(_objectSpread$7({}, _objectSpread$7(_objectSpread$7({}, rest), {}, {
-        depth: depth,
-        folder: folder
-      })), {}, {
-        icon: /*#__PURE__*/jsx(Radio.Item, {
-          readOnly: true,
-          checked: selection === folder.id,
-          name: "move-folder-option"
-        }),
-        onClick: isDisabled ? noop : function () {
-          return onSelect(folder);
-        }
-      })), renderChildren()]
-    })
+      onClick: isDisabled ? noop : function () {
+        return onSelect(folder);
+      }
+    })), renderChildren()]
   });
 };
 
-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,
@@ -494,7 +585,7 @@ var PaneBody = function PaneBody(_ref) {
   var _useFetchFolders = useFetchFolders(config),
     _useFetchFolders$data = _useFetchFolders.data,
     folders = _useFetchFolders$data === void 0 ? [] : _useFetchFolders$data;
-  var _useTranslation = useTranslation(),
+  var _useTranslation = useTranslation(config),
     t = _useTranslation.t;
   var folderDepth = 0;
   if (item) {
@@ -525,14 +616,16 @@ var PaneBody = function PaneBody(_ref) {
         onClick: onAddFolder
       })]
     }), /*#__PURE__*/jsx(Pane.Body, {
+      className: "pb-6",
       children: folders.map(function (folder) {
         return /*#__PURE__*/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);
@@ -543,19 +636,19 @@ var PaneBody = function PaneBody(_ref) {
       className: "space-x-2",
       children: [/*#__PURE__*/jsxs("div", {
         className: "flex flex-1 space-x-2",
-        children: [/*#__PURE__*/jsx(Button, _objectSpread$6({
+        children: [/*#__PURE__*/jsx(Button, _objectSpread$8({
           disabled: !selection,
           label: t("common.save"),
           style: "primary",
           onClick: function onClick() {
             return onSubmit(selection);
           }
-        }, submitButtonProps)), /*#__PURE__*/jsx(Button, _objectSpread$6({
+        }, submitButtonProps)), /*#__PURE__*/jsx(Button, _objectSpread$8({
           label: t("common.cancel"),
           style: "text",
           onClick: onClose
         }, cancelButtonProps))]
-      }), onRemove && /*#__PURE__*/jsx(Button, _objectSpread$6({
+      }), onRemove && /*#__PURE__*/jsx(Button, _objectSpread$8({
         label: t("moveToFolder.remove"),
         style: "tertiary",
         onClick: onRemove
@@ -596,14 +689,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 = useDraggable({
       id: "draggable-item--".concat(folder.id),
       data: folder,
@@ -623,21 +716,22 @@ var _DraggableNode = function DraggableNode(_ref) {
   var renderChildren = function renderChildren() {
     if (isNotPresent(folder.children) || isDragging) return null;
     return folder.children.map(function (child) {
-      return /*#__PURE__*/createElement(_DraggableNode, _objectSpread$5(_objectSpread$5({}, rest), {}, {
+      return /*#__PURE__*/createElement(_DraggableNode$1, _objectSpread$7(_objectSpread$7({}, rest), {}, {
         depth: depth + 1,
         folder: child,
         key: child.id
       }));
     });
   };
-  return /*#__PURE__*/jsxs("div", {
-    children: [/*#__PURE__*/jsx(Node$1, _objectSpread$5(_objectSpread$5(_objectSpread$5({}, rest), {}, {
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx(Node$1, _objectSpread$7(_objectSpread$7(_objectSpread$7({}, rest), {}, {
       className: classNames({
-        "neeto-ui-bg-gray-100 opacity-50 ": isDragging,
+        "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)), {}, {
@@ -649,9 +743,9 @@ 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 = useState(null),
@@ -662,7 +756,7 @@ var ReorderFoldersPane = function ReorderFoldersPane(_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     changes = _useState4[0],
     setChanges = _useState4[1];
-  var _useTranslation = useTranslation(),
+  var _useTranslation = useTranslation(config),
     t = _useTranslation.t;
   var _useFetchFolders = useFetchFolders(config),
     folders = _useFetchFolders.data;
@@ -715,8 +809,10 @@ var ReorderFoldersPane = function ReorderFoldersPane(_ref) {
     });
   };
   var nodeProps = {
-    icon: /*#__PURE__*/jsx(Folder, {}),
-    itemLabel: config.itemLabel
+    icon: /*#__PURE__*/jsx(Reorder, {
+      className: "neeto-ui-text-gray-500 relative -left-[0.3125rem] flex-shrink-0"
+    }),
+    itemLabel: config.labels.item
   };
   return /*#__PURE__*/jsxs(Fragment, {
     children: [/*#__PURE__*/jsx(Pane.Header, {
@@ -731,12 +827,13 @@ var ReorderFoldersPane = function ReorderFoldersPane(_ref) {
         return setDragItem(active.data.current);
       },
       children: [/*#__PURE__*/jsx(Pane.Body, {
-        children: /*#__PURE__*/createElement(_DraggableNode, _objectSpread$4(_objectSpread$4({}, nodeProps), {}, {
+        className: "pb-6",
+        children: /*#__PURE__*/createElement(_DraggableNode$1, _objectSpread$6(_objectSpread$6({}, nodeProps), {}, {
           folder: tree,
           key: tree.id
         }))
       }), /*#__PURE__*/jsxs(Pane.Footer, {
-        className: "space-x-2",
+        className: "gap-2",
         children: [/*#__PURE__*/jsx(Button, {
           disabled: isEmpty(changes),
           label: t("common.save"),
@@ -749,7 +846,7 @@ var ReorderFoldersPane = function ReorderFoldersPane(_ref) {
         })]
       }), /*#__PURE__*/createPortal(/*#__PURE__*/jsx(DragOverlay, {
         zIndex: 99999,
-        children: dragItem && /*#__PURE__*/jsx(Node$1, _objectSpread$4(_objectSpread$4({}, nodeProps), {}, {
+        children: dragItem && /*#__PURE__*/jsx(Node$1, _objectSpread$6(_objectSpread$6({}, nodeProps), {}, {
           className: "neeto-ui-bg-gray-200",
           depth: 0,
           folder: dragItem
@@ -759,6 +856,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 = 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 = useDroppable({
+      id: "droppable-placeholder--".concat(folder.name),
+      data: {
+        id: id,
+        meta: meta
+      }
+    }),
+    setDroppableRef = _useDroppable.setNodeRef;
+  return /*#__PURE__*/jsxs("div", {
+    className: "flex w-full",
+    children: [/*#__PURE__*/jsx("div", {
+      style: {
+        width: REORDER_TREE_INDENT_WIDTH * depth
+      }
+    }), /*#__PURE__*/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 = 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 = 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__*/jsxs(React.Fragment, {
+      children: [/*#__PURE__*/jsx(PlaceholderNode, {
+        dragState: dragState,
+        folder: folder
+      }), isArray(folder.children) && folder.children.map(function (child) {
+        return /*#__PURE__*/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__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/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 = useState(initialDragState),
+    _useState2 = _slicedToArray(_useState, 2),
+    dragState = _useState2[0],
+    setDragState = _useState2[1];
+  var _useState3 = useState({}),
+    _useState4 = _slicedToArray(_useState3, 2),
+    changes = _useState4[0],
+    setChanges = _useState4[1];
+  var _useTranslation = useTranslation(config),
+    t = _useTranslation.t;
+  var _useFetchFolders = useFetchFolders(config),
+    folders = _useFetchFolders.data;
+  var _useReorderFolders = useReorderFolders(config),
+    reorderFolders = _useReorderFolders.mutate;
+  var sensors = useSensors(useSensor(PointerSensor, sensorConfig));
+  var _useStateWithDependen = 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 = useMemo(function () {
+    return mapToSortedTree(treeToMap(baseTree));
+  }, [baseTree]);
+  var onDragEnd = function onDragEnd(_ref2) {
+    var active = _ref2.active,
+      over = _ref2.over;
+    setDragState(initialDragState);
+    if (!over) return;
+    var foldersMap = 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 = 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 = mapToSortedTree(foldersMap);
+    setBaseTree(newTree);
+    setChanges(assoc(activeFolder.id, {
+      parentId: targetFolder.id,
+      index: targetIndex
+    }));
+  };
+  var onSubmit = function onSubmit() {
+    var payload = {
+      changes: changes
+    };
+    reorderFolders(payload, {
+      onSuccess: onClose
+    });
+  };
+  var nodeProps = {
+    icon: /*#__PURE__*/jsx(Reorder, {
+      className: "neeto-ui-text-gray-500 relative -left-[0.3125rem] flex-shrink-0"
+    }),
+    itemLabel: config.labels.item
+  };
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx(Pane.Header, {
+      children: /*#__PURE__*/jsx(Typography, {
+        style: "h2",
+        children: t("reorderFolder.title")
+      })
+    }), /*#__PURE__*/jsxs(DndContext, {
+      onDragEnd: onDragEnd,
+      sensors: sensors,
+      collisionDetection: closestCenter(dragState),
+      measuring: measuringConfig,
+      onDragOver: function onDragOver(_ref3) {
+        var over = _ref3.over;
+        setDragState(assoc("overItem", over === null || over === void 0 ? void 0 : over.data.current));
+      },
+      onDragStart: function onDragStart(_ref4) {
+        var active = _ref4.active;
+        setDragState(assoc("activeItem", active.data.current));
+      },
+      children: [/*#__PURE__*/jsx(Pane.Body, {
+        className: "pb-6",
+        children: /*#__PURE__*/createElement(_DraggableNode, _objectSpread$4(_objectSpread$4({}, _objectSpread$4(_objectSpread$4({}, nodeProps), {}, {
+          dragState: dragState
+        })), {}, {
+          folder: tree,
+          key: tree.id
+        }))
+      }), /*#__PURE__*/jsxs(Pane.Footer, {
+        className: "gap-2",
+        children: [/*#__PURE__*/jsx(Button, {
+          disabled: isEmpty(changes),
+          label: t("common.save"),
+          style: "primary",
+          onClick: onSubmit
+        }), /*#__PURE__*/jsx(Button, {
+          label: t("common.cancel"),
+          style: "text",
+          onClick: onClose
+        })]
+      }), /*#__PURE__*/createPortal(/*#__PURE__*/jsx(DragOverlay, {
+        zIndex: 99999,
+        children: dragState && /*#__PURE__*/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) {
@@ -786,6 +1189,7 @@ var FoldersPane = function FoldersPane(_ref) {
     config: config,
     onClose: onClose
   };
+  var ReorderPaneComponent = config.reorderMode === "reorder" ? ReorderFoldersPane : RearrangeFoldersPane;
   return /*#__PURE__*/jsx(Pane, {
     onClose: onClose,
     isOpen: !!type,
@@ -794,7 +1198,7 @@ var FoldersPane = function FoldersPane(_ref) {
       return /*#__PURE__*/jsxs(Fragment, {
         children: [(type === "edit" || type === "add") && /*#__PURE__*/jsx(AddEditPane, _objectSpread$3({}, _objectSpread$3({
           setFocusField: setFocusField
-        }, commonProps))), type === "move" && /*#__PURE__*/jsx(MoveFolderPane, _objectSpread$3({}, commonProps)), type === "reorder" && /*#__PURE__*/jsx(ReorderFoldersPane, _objectSpread$3({}, commonProps))]
+        }, commonProps))), type === "move" && /*#__PURE__*/jsx(MoveFolderPane, _objectSpread$3({}, commonProps)), type === "reorder" && /*#__PURE__*/jsx(ReorderPaneComponent, _objectSpread$3({}, commonProps))]
       });
     }
   });
@@ -819,8 +1223,9 @@ var FolderTile = function FolderTile(_ref) {
     itemLabel = _ref.itemLabel,
     folder = _ref.folder,
     actions = _ref.actions,
+    config = _ref.config,
     onSelect = _ref.onSelect;
-  var _useTranslation = useTranslation(),
+  var _useTranslation = useTranslation(config),
     t = _useTranslation.t;
   var actionCallback = function actionCallback(callback) {
     return function (event) {
@@ -848,44 +1253,42 @@ var FolderTile = function FolderTile(_ref) {
   }));
   metaInfo.push("".concat(folder.itemCount || 0, " ").concat(itemLabel));
   return /*#__PURE__*/jsxs(Link, {
-    className: "neeto-ui-bg-gray-100 neeto-ui-rounded-md m-2 w-64 border p-3",
+    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",
     to: link,
-    children: [/*#__PURE__*/jsxs("div", {
-      className: "mb-1 flex items-center justify-between",
-      children: [/*#__PURE__*/jsxs("div", {
-        className: "flex items-center",
-        children: [/*#__PURE__*/jsx(Checkbox, {
-          checked: isSelected,
-          className: "mr-2",
-          name: folder.id,
-          onChange: function onChange(event) {
-            return onSelect(folder, event.target.checked);
-          },
-          onClick: function onClick(event) {
-            return event.stopPropagation();
-          }
-        }), /*#__PURE__*/jsx(Tooltip, {
-          content: folder.name,
-          delay: [300, 0],
-          children: /*#__PURE__*/jsx(Typography, {
-            className: "line-clamp-1",
-            style: "body1",
-            weight: "medium",
-            children: folder.name
-          })
-        })]
-      }), /*#__PURE__*/jsx(MoreDropdown, {
-        menuItems: menuItems,
-        dropdownProps: {
-          onClick: function onClick(event) {
-            return event.preventDefault();
-          }
-        }
+    children: [/*#__PURE__*/jsx(Checkbox, {
+      checked: isSelected,
+      className: "m-0 flex-shrink-0 flex-grow-0 pt-0.5",
+      name: folder.id,
+      onChange: function onChange(event) {
+        return onSelect(folder, event.target.checked);
+      },
+      onClick: function onClick(event) {
+        return event.stopPropagation();
+      }
+    }), /*#__PURE__*/jsxs("span", {
+      className: "flex min-w-0 flex-grow flex-col gap-2",
+      children: [/*#__PURE__*/jsx(Typography, {
+        className: "-mt-0.5 line-clamp-2 break-words pr-8",
+        lineHeight: "snug",
+        style: "body1",
+        title: folder.name,
+        weight: "medium",
+        children: folder.name
+      }), /*#__PURE__*/jsx(Typography, {
+        className: "neeto-ui-text-gray-600",
+        style: "body3",
+        children: metaInfo.join(" . ")
       })]
-    }), /*#__PURE__*/jsx(Typography, {
-      className: "ml-6",
-      style: "body3",
-      children: metaInfo.join(" . ")
+    }), /*#__PURE__*/jsx(MoreDropdown, {
+      menuItems: menuItems,
+      dropdownButtonProps: {
+        className: "absolute right-2 top-2"
+      },
+      dropdownProps: {
+        onClick: function onClick(event) {
+          return event.preventDefault();
+        }
+      }
     })]
   });
 };
@@ -899,7 +1302,7 @@ var FoldersList = function FoldersList(_ref) {
     onSelect = _ref.onSelect;
   var config = _objectSpread$2(_objectSpread$2({}, DEFAULT_CONFIG), configProps);
   var params = useQueryParams();
-  var _useTranslation = useTranslation(),
+  var _useTranslation = useTranslation(config),
     t = _useTranslation.t;
   var fetchParams = pick(["sortBy", "orderBy"], params);
   var _useFolders = useFolders(_objectSpread$2(_objectSpread$2({}, config), {}, {
@@ -915,18 +1318,19 @@ var FoldersList = function FoldersList(_ref) {
   return /*#__PURE__*/jsxs(FoldersContext, {
     config: config,
     children: [/*#__PURE__*/jsx(Typography, {
-      className: "mb-2 mt-2",
+      className: "my-3",
       style: "h4",
       children: t("folders.title")
     }), /*#__PURE__*/jsx("div", {
-      className: "mb-6 flex flex-wrap justify-items-center",
+      className: "neeto-folders-grid-view-wrapper mb-10 grid w-full gap-4",
       children: subFolders.map(function (folder) {
         return /*#__PURE__*/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: buildUrl(config.folderPath, _objectSpread$2(_objectSpread$2({}, params), {}, {
             folderId: folder.sid
@@ -959,20 +1363,17 @@ var FolderNode = function FolderNode(_ref) {
     link = _ref.link;
   return /*#__PURE__*/jsx(NavLink, {
     activeClassName: "active",
-    className: "block",
+    className: "neeto-sidebar-folders-tree__folder-node block",
     isActive: function isActive() {
       return _isActive;
     },
     to: link,
-    children: /*#__PURE__*/jsx(Tooltip, {
-      content: folder.name,
-      delay: [300, 0],
-      children: /*#__PURE__*/jsx(Typography, {
-        className: "line-clamp-1",
-        component: "span",
-        style: "body2",
-        children: folder.name
-      })
+    children: /*#__PURE__*/jsx(Typography, {
+      className: "line-clamp-1 block truncate",
+      component: "span",
+      style: "body2",
+      title: folder.name,
+      children: folder.name
     })
   });
 };
@@ -986,7 +1387,7 @@ var FoldersTree = function FoldersTree(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     expandedKeys = _useState2[0],
     setExpandedKeys = _useState2[1];
-  var _useTranslation = useTranslation(),
+  var _useTranslation = useTranslation(config),
     t = _useTranslation.t;
   var params = useQueryParams({
     toCamelCase: false
@@ -1022,9 +1423,10 @@ var FoldersTree = function FoldersTree(_ref) {
     autoExpandParent: true,
     blockNode: true,
     showLine: true,
+    className: "neeto-sidebar-folders-tree",
     componentToken: {
-      titleHeight: 25,
-      indentSize: 25
+      titleHeight: 24,
+      indentSize: 24
     },
     fieldNames: {
       key: "sid"
@@ -1044,5 +1446,10 @@ var FoldersTree = function FoldersTree(_ref) {
   });
 };
 
+var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}
+
+var css = ".neeto-sidebar-folders-tree__folder-node{color:inherit!important}.neeto-sidebar-folders-tree.ant-tree .ant-tree-node-content-wrapper{min-width:0;padding-inline:6px!important}.neeto-sidebar-folders-tree.ant-tree .ant-tree-node-content-wrapper.ant-tree-node-selected{background-color:rgb(var(--neeto-ui-white));color:rgb(var(--neeto-ui-accent-800))!important;font-weight:500}.neeto-sidebar-folders-tree.ant-tree .ant-tree-switcher .ant-tree-switcher-icon{position:relative}.neeto-folders-grid-view-wrapper{grid-template-columns:repeat(auto-fill,minmax(256px,1fr))}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFwcC9qYXZhc2NyaXB0L3NyYy9jb21wb25lbnRzL25lZXRvLWZvbGRlcnMtbmFuby5zY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLHlDQUNFLHVCQUNGLENBRUEsb0VBRUUsV0FBQSxDQURBLDRCQUVGLENBRUEsMkZBRUUsMkNBQUEsQ0FEQSwrQ0FBQSxDQUVBLGVBQ0YsQ0FFQSxnRkFDRSxpQkFDRixDQUVBLGlDQUNFLHlEQUNGIiwic291cmNlc0NvbnRlbnQiOlsiLm5lZXRvLXNpZGViYXItZm9sZGVycy10cmVlX19mb2xkZXItbm9kZSB7XG4gIGNvbG9yOiBpbmhlcml0ICFpbXBvcnRhbnQ7XG59XG5cbi5uZWV0by1zaWRlYmFyLWZvbGRlcnMtdHJlZS5hbnQtdHJlZSAuYW50LXRyZWUtbm9kZS1jb250ZW50LXdyYXBwZXIge1xuICBwYWRkaW5nLWlubGluZTogNnB4ICFpbXBvcnRhbnQ7XG4gIG1pbi13aWR0aDogMDtcbn1cblxuLm5lZXRvLXNpZGViYXItZm9sZGVycy10cmVlLmFudC10cmVlIC5hbnQtdHJlZS1ub2RlLWNvbnRlbnQtd3JhcHBlci5hbnQtdHJlZS1ub2RlLXNlbGVjdGVkIHtcbiAgY29sb3I6IHJnYih2YXIoLS1uZWV0by11aS1hY2NlbnQtODAwKSkgIWltcG9ydGFudDtcbiAgYmFja2dyb3VuZC1jb2xvcjogcmdiKHZhcigtLW5lZXRvLXVpLXdoaXRlKSk7XG4gIGZvbnQtd2VpZ2h0OiA1MDA7XG59XG5cbi5uZWV0by1zaWRlYmFyLWZvbGRlcnMtdHJlZS5hbnQtdHJlZSAuYW50LXRyZWUtc3dpdGNoZXIgLmFudC10cmVlLXN3aXRjaGVyLWljb24ge1xuICBwb3NpdGlvbjogcmVsYXRpdmU7XG59XG5cbi5uZWV0by1mb2xkZXJzLWdyaWQtdmlldy13cmFwcGVyIHtcbiAgZ3JpZC10ZW1wbGF0ZS1jb2x1bW5zOiByZXBlYXQoYXV0by1maWxsLCBtaW5tYXgoMjU2cHgsIDFmcikpO1xufSJdfQ== */";
+n(css,{});
+
 export { FoldersContext, FoldersList, FoldersTree, MoveToFolderPane };
 //# sourceMappingURL=components.js.map