@bigbinary/neeto-folders-frontend 2.0.4 → 2.0.5

package/README.md

@@ -222,7 +222,7 @@ import * as components from "@bigbinary/neeto-folders-frontend/components";
     />;
     ```
 
-4.  `MoveToFoldersPane`: This component can be used in host applications to move
+4.  `MoveToFolderPane`: This component can be used in host applications to move
     items to a folder. Component renders current list of folders in pane with
     radio buttons and invokes callbacks for folder selections.
 
@@ -255,9 +255,9 @@ import * as components from "@bigbinary/neeto-folders-frontend/components";
     Sample usage:
 
     ```jsx
-    import { MoveToFoldersPane } from "@bigbinary/neeto-folders-frontend/components";
+    import { MoveToFolderPane } from "@bigbinary/neeto-folders-frontend/components";
     // ....
-    <MoveToFoldersPane
+    <MoveToFolderPane
       item={itemToMove}
       onSelect={onSelectFolder}
       selection={folderSelection}

package/app/javascript/src/translations/en.json

@@ -10,9 +10,9 @@
     "folders": "Folders",
     "item": "Item",
     "items": "Items",
-    "private": "Private"
+    "private": "Private",
+    "moveToFolder": "Move to folder"
   },
-
   "createFolder": {
     "parentInfo": "Leave the option empty to create {{ folder }} at the root level",
     "parentTitle": "Parent {{ folder }}"
@@ -26,7 +26,6 @@
     "add": "Add new {{ folder }}",
     "edit": "Edit {{ folder }}",
     "name": "{{ folder }} name",
-    "subfolderCount": "{{count}} sub {{ folders }}",
     "noFolders": "No {{ folder }} to show"
   },
   "moveToFolder": {
@@ -38,7 +37,6 @@
   "reorderFolder": {
     "title": "Reorder {{ folders }}"
   },
-
   "errors": {
     "blank": "{{entity}} cannot be blank"
   }

package/dist/cjs/components.js

@@ -18,10 +18,10 @@ var Pane = require('@bigbinary/neetoui/Pane');
 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 Form = require('@bigbinary/neetoui/formik/Form');
 var i18next = require('i18next');
 var yup = require('yup');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
@@ -30,9 +30,11 @@ var Textarea = require('@bigbinary/neetoui/formik/Textarea');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var antd = require('antd');
 var classNames = require('classnames');
+var formik = require('formik');
 var Down = require('@bigbinary/neeto-icons/Down');
 var Label = require('@bigbinary/neetoui/Label');
 var ramda = require('ramda');
+var useHotkeys = require('@bigbinary/neeto-hotkeys');
 var Button = require('@bigbinary/neetoui/Button');
 var neetoCist = require('@bigbinary/neeto-cist');
 var Radio = require('@bigbinary/neetoui/Radio');
@@ -250,7 +252,7 @@ var TreeSelect = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         suffixIcon: /*#__PURE__*/jsxRuntime.jsx(Down, {}),
         treeNodeFilterProp: (_fieldNames$label = fieldNames === null || fieldNames === void 0 ? void 0 : fieldNames.label) !== null && _fieldNames$label !== void 0 ? _fieldNames$label : "title",
         value: field.value || undefined,
-        className: classNames("neeto-ui-tree-select__wrapper", className, {
+        className: classNames("neeto-ui-tree-select__wrapper nf-tree-select", className, {
           "neeto-ui-tree-select__error": meta.error
         }),
         switcherIcon: function switcherIcon(props) {
@@ -405,54 +407,55 @@ var AddEditPane = function AddEditPane(_ref) {
         style: "h2",
         children: isEditing ? t("folders.edit") : t("folders.add")
       })
-    }), /*#__PURE__*/jsxRuntime.jsx(formik.Formik, {
-      initialValues: initialValues,
-      enableReinitialize: true,
-      validationSchema: FORM_VALIDATION_SCHEMA,
-      onSubmit: onSubmitForm,
-      children: function children() {
-        return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-          children: [/*#__PURE__*/jsxRuntime.jsx(Pane.Body, {
-            className: "pb-6",
-            children: /*#__PURE__*/jsxRuntime.jsxs(formik.Form, {
-              className: "w-full space-y-5",
-              children: [/*#__PURE__*/jsxRuntime.jsx(Input, {
-                required: true,
-                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,
-                  showSearch: true,
-                  label: t("createFolder.parentTitle"),
-                  name: "parentId",
-                  treeData: folderOptions
-                }), /*#__PURE__*/jsxRuntime.jsx(Typography, {
-                  className: "mt-1",
-                  style: "body3",
-                  children: t("createFolder.parentInfo")
-                })]
+    }), /*#__PURE__*/jsxRuntime.jsx(Form, {
+      className: "flex flex-grow flex-col",
+      formikProps: {
+        initialValues: initialValues,
+        enableReinitialize: true,
+        validationSchema: FORM_VALIDATION_SCHEMA,
+        onSubmit: onSubmitForm
+      },
+      children: /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/jsxRuntime.jsx(Pane.Body, {
+          className: "pb-6",
+          children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+            className: "w-full space-y-5",
+            children: [/*#__PURE__*/jsxRuntime.jsx(Input, {
+              required: true,
+              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,
+                showSearch: true,
+                label: t("createFolder.parentTitle"),
+                name: "parentId",
+                treeData: folderOptions
+              }), /*#__PURE__*/jsxRuntime.jsx(Typography, {
+                className: "mt-1",
+                style: "body3",
+                children: t("createFolder.parentInfo")
               })]
-            })
-          }), /*#__PURE__*/jsxRuntime.jsx(Pane.Footer, {
-            children: /*#__PURE__*/jsxRuntime.jsx(ActionBlock, {
-              cancelButtonProps: {
-                onClick: onClose
-              }
-            })
-          })]
-        });
-      }
+            })]
+          })
+        }), /*#__PURE__*/jsxRuntime.jsx(Pane.Footer, {
+          children: /*#__PURE__*/jsxRuntime.jsx(ActionBlock, {
+            cancelButtonProps: {
+              onClick: onClose
+            }
+          })
+        })]
+      })
     })]
   });
 };
 
 var REORDER_TREE_INDENT_WIDTH = 30;
 
-var _excluded$4 = ["icon", "itemLabel", "folder", "depth", "className", "onClick"];
+var _excluded$4 = ["icon", "itemLabel", "folder", "folderLabel", "depth", "className", "onClick"];
 function ownKeys$a(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$a(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$a(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$a(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Node = function Node(_ref, ref) {
@@ -461,18 +464,15 @@ var Node = function Node(_ref, ref) {
     icon = _ref$icon === void 0 ? null : _ref$icon,
     itemLabel = _ref.itemLabel,
     folder = _ref.folder,
+    folderLabel = _ref.folderLabel,
     depth = _ref.depth,
     className = _ref.className,
     onClick = _ref.onClick,
     rest = _objectWithoutProperties(_ref, _excluded$4);
-  var _useTranslation = reactI18next.useTranslation(),
-    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;
-  childCount > 0 && metaInfo.push(t("folders.subfolderCount", {
-    count: childCount
-  }));
-  folder.itemCount > 0 && metaInfo.push("".concat(folder.itemCount, " ").concat(itemLabel));
+  childCount > 0 && metaInfo.push("".concat(childCount, " ").concat(folderLabel).toLowerCase());
+  folder.itemCount > 0 && metaInfo.push("".concat(folder.itemCount, " ").concat(itemLabel).toLowerCase());
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: "flex w-full min-w-0",
     children: [Array.from({
@@ -514,6 +514,7 @@ 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$children$leng, _folder$children;
   var folder = _ref.folder,
     item = _ref.item,
     _ref$depth = _ref.depth,
@@ -527,6 +528,8 @@ var _SelectableNode = function SelectableNode(_ref) {
   var _useTranslation = useTranslation(config),
     t = _useTranslation.t;
   var isDisabled = disabled || (item === null || item === void 0 ? void 0 : item.id) === folder.id || depth > maxDepth;
+  var itemLabel = config.labels[folder.itemCount > 1 ? "items" : "item"];
+  var folderLabel = config.labels[((_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) > 1 ? "folders" : "folder"];
   var renderChildren = function renderChildren() {
     if (neetoCist.isNotPresent(folder.children)) return null;
     return folder.children.map(function (child) {
@@ -550,7 +553,9 @@ var _SelectableNode = function SelectableNode(_ref) {
     title: isDisabled ? t("moveToFolder.notAllowed") : undefined,
     children: [/*#__PURE__*/jsxRuntime.jsx(Node$1, _objectSpread$9(_objectSpread$9({}, _objectSpread$9(_objectSpread$9({}, rest), {}, {
       depth: depth,
-      folder: folder
+      folder: folder,
+      folderLabel: folderLabel,
+      itemLabel: itemLabel
     })), {}, {
       icon: /*#__PURE__*/jsxRuntime.jsx(Radio.Item, {
         readOnly: true,
@@ -591,6 +596,13 @@ var PaneBody = function PaneBody(_ref) {
     folders = _useFetchFolders$data === void 0 ? [] : _useFetchFolders$data;
   var _useTranslation = useTranslation(config),
     t = _useTranslation.t;
+  var _useFolderStore2 = useFolderActions.useFolderStore(function (store) {
+      var _store$paneState;
+      return {
+        type: (_store$paneState = store["paneState"]) === null || _store$paneState === void 0 ? void 0 : _store$paneState["type"]
+      };
+    }, shallow.shallow),
+    type = _useFolderStore2.type;
   var tree = React.useMemo(function () {
     return [{
       name: "/",
@@ -614,6 +626,12 @@ var PaneBody = function PaneBody(_ref) {
       }
     });
   };
+  useHotkeys(["command+enter", "enter"], function () {
+    return onSubmit(selection);
+  }, {
+    mode: "global",
+    enabled: !!type
+  });
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [/*#__PURE__*/jsxRuntime.jsxs(Pane.Header, {
       className: "flex items-center justify-between",
@@ -636,7 +654,6 @@ var PaneBody = function PaneBody(_ref) {
           maxDepth: maxDepth,
           selection: selection,
           disabled: (item === null || item === void 0 ? void 0 : item.id) === folder.id || maxDepth <= 0,
-          itemLabel: config.labels.item,
           key: folder.id,
           onSelect: function onSelect(folder) {
             return setSelection(folder.id);
@@ -700,13 +717,16 @@ var MoveFolderPane = function MoveFolderPane(_ref) {
   });
 };
 
-var _excluded$2 = ["folder", "depth"];
+var _excluded$2 = ["folder", "depth", "config", "folderLabel", "itemLabel"];
 function ownKeys$7(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$7(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$7(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$7(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var _DraggableNode$1 = function DraggableNode(_ref) {
   var folder = _ref.folder,
     _ref$depth = _ref.depth,
     depth = _ref$depth === void 0 ? 0 : _ref$depth,
+    config = _ref.config,
+    folderLabel = _ref.folderLabel,
+    itemLabel = _ref.itemLabel,
     rest = _objectWithoutProperties(_ref, _excluded$2);
   var _useDraggable = core.useDraggable({
       id: "draggable-item--".concat(folder.id),
@@ -727,10 +747,15 @@ var _DraggableNode$1 = 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$1, _objectSpread$7(_objectSpread$7({}, rest), {}, {
+      var _child$children$lengt, _child$children;
+      return /*#__PURE__*/React.createElement(_DraggableNode$1, _objectSpread$7(_objectSpread$7({}, _objectSpread$7(_objectSpread$7({}, rest), {}, {
+        config: config
+      })), {}, {
         depth: depth + 1,
         folder: child,
-        key: child.id
+        itemLabel: config.labels[(child === null || child === void 0 ? void 0 : child.itemCount) > 1 ? "items" : "item"],
+        key: child.id,
+        folderLabel: config.labels[((_child$children$lengt = child === null || child === void 0 || (_child$children = child.children) === null || _child$children === void 0 ? void 0 : _child$children.length) !== null && _child$children$lengt !== void 0 ? _child$children$lengt : 0) > 1 ? "folders" : "folder"]
       }));
     });
   };
@@ -742,10 +767,13 @@ var _DraggableNode$1 = function DraggableNode(_ref) {
         "neeto-ui-border-primary-500 border": isOver,
         "border border-transparent": !isOver
       })
-    }, _objectSpread$7(_objectSpread$7({
+    }, _objectSpread$7(_objectSpread$7(_objectSpread$7({
       depth: depth,
       folder: folder
-    }, attributes), listeners)), {}, {
+    }, attributes), listeners), {}, {
+      folderLabel: folderLabel,
+      itemLabel: itemLabel
+    })), {}, {
       ref: function ref(_ref2) {
         setDroppableRef(_ref2);
         setDraggableRef(_ref2);
@@ -757,6 +785,7 @@ var _DraggableNode$1 = function DraggableNode(_ref) {
 function ownKeys$6(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$6(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$6(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$6(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var RearrangeFoldersPane = function RearrangeFoldersPane(_ref) {
+  var _tree$children$length, _tree$children, _dragItem$children$le, _dragItem$children;
   var config = _ref.config,
     onClose = _ref.onClose;
   var _useState = React.useState(null),
@@ -773,6 +802,13 @@ var RearrangeFoldersPane = function RearrangeFoldersPane(_ref) {
     folders = _useFetchFolders.data;
   var _useReorderFolders = useFolderActions.useReorderFolders(config),
     reorderFolders = _useReorderFolders.mutate;
+  var _useFolderStore = useFolderActions.useFolderStore(function (store) {
+      var _store$paneState;
+      return {
+        type: (_store$paneState = store["paneState"]) === null || _store$paneState === void 0 ? void 0 : _store$paneState["type"]
+      };
+    }, shallow.shallow),
+    type = _useFolderStore.type;
   var _useStateWithDependen = reactUtils.useStateWithDependency(function () {
       return {
         name: "/",
@@ -819,11 +855,14 @@ var RearrangeFoldersPane = function RearrangeFoldersPane(_ref) {
       onSuccess: onClose
     });
   };
+  useHotkeys(["command+enter", "enter"], onSubmit, {
+    mode: "global",
+    enabled: !!type
+  });
   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, {
@@ -839,9 +878,13 @@ var RearrangeFoldersPane = function RearrangeFoldersPane(_ref) {
       },
       children: [/*#__PURE__*/jsxRuntime.jsx(Pane.Body, {
         className: "pb-6",
-        children: /*#__PURE__*/React.createElement(_DraggableNode$1, _objectSpread$6(_objectSpread$6({}, nodeProps), {}, {
+        children: /*#__PURE__*/React.createElement(_DraggableNode$1, _objectSpread$6(_objectSpread$6({}, _objectSpread$6(_objectSpread$6({}, nodeProps), {}, {
+          config: config
+        })), {}, {
           folder: tree,
-          key: tree.id
+          itemLabel: config.labels[(tree === null || tree === void 0 ? void 0 : tree.itemCount) > 1 ? "items" : "item"],
+          key: tree.id,
+          folderLabel: config.labels[((_tree$children$length = tree === null || tree === void 0 || (_tree$children = tree.children) === null || _tree$children === void 0 ? void 0 : _tree$children.length) !== null && _tree$children$length !== void 0 ? _tree$children$length : 0) > 1 ? "folders" : "folder"]
         }))
       }), /*#__PURE__*/jsxRuntime.jsxs(Pane.Footer, {
         className: "gap-2",
@@ -860,7 +903,9 @@ var RearrangeFoldersPane = function RearrangeFoldersPane(_ref) {
         children: dragItem && /*#__PURE__*/jsxRuntime.jsx(Node$1, _objectSpread$6(_objectSpread$6({}, nodeProps), {}, {
           className: "neeto-ui-bg-gray-200",
           depth: 0,
-          folder: dragItem
+          folder: dragItem,
+          folderLabel: config.labels[((_dragItem$children$le = dragItem === null || dragItem === void 0 || (_dragItem$children = dragItem.children) === null || _dragItem$children === void 0 ? void 0 : _dragItem$children.length) !== null && _dragItem$children$le !== void 0 ? _dragItem$children$le : 0) > 1 ? "folders" : "folder"],
+          itemLabel: config.labels[(dragItem === null || dragItem === void 0 ? void 0 : dragItem.itemCount) > 1 ? "items" : "item"]
         }))
       }), document.body)]
     })]
@@ -958,13 +1003,16 @@ var PlaceholderNode = function PlaceholderNode(_ref) {
   });
 };
 
-var _excluded$1 = ["folder", "dragState"];
+var _excluded$1 = ["folder", "config", "dragState", "folderLabel", "itemLabel"];
 function ownKeys$5(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$5(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$5(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$5(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var _DraggableNode = function DraggableNode(_ref) {
   var _overItem$meta$parent;
   var folder = _ref.folder,
+    config = _ref.config,
     dragState = _ref.dragState,
+    folderLabel = _ref.folderLabel,
+    itemLabel = _ref.itemLabel,
     rest = _objectWithoutProperties(_ref, _excluded$1);
   var overItem = dragState.overItem;
   var isOverItem = folder.id === (overItem === null || overItem === void 0 ? void 0 : overItem.id);
@@ -992,12 +1040,16 @@ var _DraggableNode = function DraggableNode(_ref) {
         dragState: dragState,
         folder: folder
       }), internal.isArray(folder.children) && folder.children.map(function (child) {
+        var _child$children$lengt, _child$children;
         return /*#__PURE__*/React.createElement(_DraggableNode, _objectSpread$5(_objectSpread$5({}, _objectSpread$5(_objectSpread$5({}, rest), {}, {
+          config: config,
           dragState: dragState
         })), {}, {
           depth: child.meta.depth,
           folder: child,
-          key: child.id
+          itemLabel: config.labels[(child === null || child === void 0 ? void 0 : child.itemCount) > 1 ? "items" : "item"],
+          key: child.id,
+          folderLabel: config.labels[((_child$children$lengt = child === null || child === void 0 || (_child$children = child.children) === null || _child$children === void 0 ? void 0 : _child$children.length) !== null && _child$children$lengt !== void 0 ? _child$children$lengt : 0) > 1 ? "folders" : "folder"]
         }));
       })]
     }, "".concat(folder.id, "--container"));
@@ -1005,9 +1057,12 @@ var _DraggableNode = function DraggableNode(_ref) {
   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), {}, {
+    }, _objectSpread$5(_objectSpread$5(_objectSpread$5(_objectSpread$5({}, rest), {}, {
       folder: folder
-    }, attributes), listeners)), {}, {
+    }, attributes), listeners), {}, {
+      folderLabel: folderLabel,
+      itemLabel: itemLabel
+    })), {}, {
       className: classNames({
         "hover:neeto-ui-bg-gray-100 w-full cursor-move transition-colors": true,
         "neeto-ui-bg-gray-100 opacity-50": isDragging,
@@ -1041,6 +1096,7 @@ var measuringConfig = {
 
 // Reorder with support for position adjustment
 var ReorderFoldersPane = function ReorderFoldersPane(_ref) {
+  var _tree$children$length, _tree$children, _dragState$activeItem, _dragState$activeItem2, _dragState$activeItem3;
   var config = _ref.config,
     onClose = _ref.onClose;
   var _useState = React.useState(initialDragState),
@@ -1058,6 +1114,13 @@ var ReorderFoldersPane = function ReorderFoldersPane(_ref) {
   var _useReorderFolders = useFolderActions.useReorderFolders(config),
     reorderFolders = _useReorderFolders.mutate;
   var sensors = core.useSensors(core.useSensor(core.PointerSensor, sensorConfig));
+  var _useFolderStore = useFolderActions.useFolderStore(function (store) {
+      var _store$paneState;
+      return {
+        type: (_store$paneState = store["paneState"]) === null || _store$paneState === void 0 ? void 0 : _store$paneState["type"]
+      };
+    }, shallow.shallow),
+    type = _useFolderStore.type;
   var _useStateWithDependen = reactUtils.useStateWithDependency(function () {
       return {
         name: "/",
@@ -1116,11 +1179,14 @@ var ReorderFoldersPane = function ReorderFoldersPane(_ref) {
       onSuccess: onClose
     });
   };
+  useHotkeys(["command+enter", "enter"], onSubmit, {
+    mode: "global",
+    enabled: !!type
+  });
   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, {
@@ -1144,10 +1210,13 @@ var ReorderFoldersPane = function ReorderFoldersPane(_ref) {
       children: [/*#__PURE__*/jsxRuntime.jsx(Pane.Body, {
         className: "pb-6",
         children: /*#__PURE__*/React.createElement(_DraggableNode, _objectSpread$4(_objectSpread$4({}, _objectSpread$4(_objectSpread$4({}, nodeProps), {}, {
+          config: config,
           dragState: dragState
         })), {}, {
           folder: tree,
-          key: tree.id
+          itemLabel: config.labels[(tree === null || tree === void 0 ? void 0 : tree.itemCount) > 1 ? "items" : "item"],
+          key: tree.id,
+          folderLabel: config.labels[((_tree$children$length = tree === null || tree === void 0 || (_tree$children = tree.children) === null || _tree$children === void 0 ? void 0 : _tree$children.length) !== null && _tree$children$length !== void 0 ? _tree$children$length : 0) > 1 ? "folders" : "folder"]
         }))
       }), /*#__PURE__*/jsxRuntime.jsxs(Pane.Footer, {
         className: "gap-2",
@@ -1166,7 +1235,9 @@ var ReorderFoldersPane = function ReorderFoldersPane(_ref) {
         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
+          folder: dragState.activeItem,
+          folderLabel: config.labels[((_dragState$activeItem = (_dragState$activeItem2 = dragState.activeItem) === null || _dragState$activeItem2 === void 0 || (_dragState$activeItem2 = _dragState$activeItem2.children) === null || _dragState$activeItem2 === void 0 ? void 0 : _dragState$activeItem2.length) !== null && _dragState$activeItem !== void 0 ? _dragState$activeItem : 0) > 1 ? "folders" : "folder"],
+          itemLabel: config.labels[((_dragState$activeItem3 = dragState.activeItem) === null || _dragState$activeItem3 === void 0 ? void 0 : _dragState$activeItem3.itemCount) > 1 ? "items" : "item"]
         }))
       }), document.body)]
     })]
@@ -1228,10 +1299,9 @@ var FoldersContext = function FoldersContext(_ref) {
 };
 
 var FolderTile = function FolderTile(_ref) {
-  var _folder$children$leng, _folder$children;
+  var _folder$children$leng, _folder$children, _folder$children$leng2, _folder$children2;
   var isSelected = _ref.isSelected,
     link = _ref.link,
-    itemLabel = _ref.itemLabel,
     folder = _ref.folder,
     actions = _ref.actions,
     config = _ref.config,
@@ -1250,7 +1320,7 @@ var FolderTile = function FolderTile(_ref) {
     onClick: actionCallback(actions.onEdit)
   }, {
     key: "move",
-    label: t("common.move"),
+    label: t("common.moveToFolder"),
     onClick: actionCallback(actions.onMove)
   }, {
     key: "delete",
@@ -1259,10 +1329,10 @@ var FolderTile = function FolderTile(_ref) {
   }];
   var metaInfo = [];
   var childCount = (_folder$children$leng = (_folder$children = folder.children) === null || _folder$children === void 0 ? void 0 : _folder$children.length) !== null && _folder$children$leng !== void 0 ? _folder$children$leng : 0;
-  childCount > 0 && metaInfo.push(t("folders.subfolderCount", {
-    count: childCount
-  }));
-  metaInfo.push("".concat(folder.itemCount || 0, " ").concat(itemLabel));
+  var itemLabel = config.labels[folder.itemCount > 1 ? "items" : "item"];
+  var folderLabel = config.labels[((_folder$children$leng2 = (_folder$children2 = folder.children) === null || _folder$children2 === void 0 ? void 0 : _folder$children2.length) !== null && _folder$children$leng2 !== void 0 ? _folder$children$leng2 : 0) > 1 ? "folders" : "folder"];
+  childCount > 0 && metaInfo.push("".concat(childCount, " ").concat(folderLabel).toLowerCase());
+  metaInfo.push("".concat(folder.itemCount || 0, " ").concat(itemLabel).toLowerCase());
   return /*#__PURE__*/jsxRuntime.jsxs(reactRouterDom.Link, {
     className: "neeto-ui-bg-gray-50 neeto-ui-border-gray-200 neeto-ui-rounded-md hover:neeto-ui-border-primary-500 relative flex max-w-full items-start gap-2 border-2 p-3 transition-colors ease-in",
     to: link,
@@ -1337,7 +1407,6 @@ var FoldersList = function FoldersList(_ref) {
           folder: folder,
           onSelect: onSelect,
           isSelected: selection.includes(folder.id),
-          itemLabel: config.labels.item,
           key: folder.id,
           link: utils$1.buildUrl(config.folderPath, _objectSpread$2(_objectSpread$2({}, params), {}, {
             folderId: folder.sid
@@ -1468,7 +1537,7 @@ 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== */";
+var css = ".neeto-sidebar-folders-tree__folder-node{color:inherit!important}.neeto-sidebar-folders-tree.ant-tree .ant-tree-node-content-wrapper{min-width:0;padding-inline:6px!important}.neeto-sidebar-folders-tree.ant-tree .ant-tree-node-content-wrapper.ant-tree-node-selected{background-color:rgb(var(--neeto-ui-white));color:rgb(var(--neeto-ui-accent-800))!important;font-weight:500}.neeto-sidebar-folders-tree.ant-tree .ant-tree-switcher .ant-tree-switcher-icon{position:relative}.neeto-folders-grid-view-wrapper{grid-template-columns:repeat(auto-fill,minmax(256px,1fr))}.nf-tree-select .ant-select-clear{height:16px;margin-top:-8px;width:16px}.nf-tree-select .ant-select-clear svg{height:16px;width:16px}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFwcC9qYXZhc2NyaXB0L3NyYy9jb21wb25lbnRzL25lZXRvLWZvbGRlcnMtbmFuby5zY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLHlDQUNFLHVCQUNGLENBRUEsb0VBRUUsV0FBQSxDQURBLDRCQUVGLENBRUEsMkZBR0UsMkNBQUEsQ0FEQSwrQ0FBQSxDQUVBLGVBQUYsQ0FHQSxnRkFHRSxpQkFGRixDQUtBLGlDQUNFLHlEQUZGLENBTUUsa0NBRUUsV0FBQSxDQUNBLGVBQUEsQ0FGQSxVQURKLENBS0ksc0NBRUUsV0FBQSxDQURBLFVBRk4iLCJzb3VyY2VzQ29udGVudCI6WyIubmVldG8tc2lkZWJhci1mb2xkZXJzLXRyZWVfX2ZvbGRlci1ub2RlIHtcbiAgY29sb3I6IGluaGVyaXQgIWltcG9ydGFudDtcbn1cblxuLm5lZXRvLXNpZGViYXItZm9sZGVycy10cmVlLmFudC10cmVlIC5hbnQtdHJlZS1ub2RlLWNvbnRlbnQtd3JhcHBlciB7XG4gIHBhZGRpbmctaW5saW5lOiA2cHggIWltcG9ydGFudDtcbiAgbWluLXdpZHRoOiAwO1xufVxuXG4ubmVldG8tc2lkZWJhci1mb2xkZXJzLXRyZWUuYW50LXRyZWVcbiAgLmFudC10cmVlLW5vZGUtY29udGVudC13cmFwcGVyLmFudC10cmVlLW5vZGUtc2VsZWN0ZWQge1xuICBjb2xvcjogcmdiKHZhcigtLW5lZXRvLXVpLWFjY2VudC04MDApKSAhaW1wb3J0YW50O1xuICBiYWNrZ3JvdW5kLWNvbG9yOiByZ2IodmFyKC0tbmVldG8tdWktd2hpdGUpKTtcbiAgZm9udC13ZWlnaHQ6IDUwMDtcbn1cblxuLm5lZXRvLXNpZGViYXItZm9sZGVycy10cmVlLmFudC10cmVlXG4gIC5hbnQtdHJlZS1zd2l0Y2hlclxuICAuYW50LXRyZWUtc3dpdGNoZXItaWNvbiB7XG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbn1cblxuLm5lZXRvLWZvbGRlcnMtZ3JpZC12aWV3LXdyYXBwZXIge1xuICBncmlkLXRlbXBsYXRlLWNvbHVtbnM6IHJlcGVhdChhdXRvLWZpbGwsIG1pbm1heCgyNTZweCwgMWZyKSk7XG59XG5cbi5uZi10cmVlLXNlbGVjdCB7XG4gIC5hbnQtc2VsZWN0LWNsZWFyIHtcbiAgICB3aWR0aDogMTZweDtcbiAgICBoZWlnaHQ6IDE2cHg7XG4gICAgbWFyZ2luLXRvcDogLThweDtcblxuICAgIHN2ZyB7XG4gICAgICB3aWR0aDogMTZweDtcbiAgICAgIGhlaWdodDogMTZweDtcbiAgICB9XG4gIH1cbn1cbiJdfQ== */";
 n(css,{});
 
 exports.FoldersContext = FoldersContext;