@bigbinary/neeto-folders-frontend 1.1.0

package/dist/cjs/components.js

@@ -0,0 +1,931 @@
+'use strict';
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
+var _regeneratorRuntime = require('@babel/runtime/regenerator');
+var shallow = require('zustand/shallow');
+var reactUtils = require('@bigbinary/neeto-commons-frontend/react-utils');
+var utils = require('@bigbinary/neeto-commons-frontend/utils');
+var Alert = require('@bigbinary/neetoui/Alert');
+var reactI18next = require('react-i18next');
+var reactRouterDom = require('react-router-dom');
+var useFolderActions = require('../useFolderActions-DCs7hXdW.js');
+var pathUtils = require('../pathUtils-CHuLm_t6.js');
+var jsxRuntime = require('react/jsx-runtime');
+var Pane = require('@bigbinary/neetoui/Pane');
+var react = require('react');
+var formik = require('formik');
+var Typography = require('@bigbinary/neetoui/Typography');
+var Input = require('@bigbinary/neetoui/formik/Input');
+var Select = require('@bigbinary/neetoui/formik/Select');
+var ActionBlock = require('@bigbinary/neetoui/formik/ActionBlock');
+var ramda = require('ramda');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var Button = require('@bigbinary/neetoui/Button');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var classNames = require('classnames');
+var neetoCist = require('@bigbinary/neeto-cist');
+var Radio = require('@bigbinary/neetoui/Radio');
+var Tooltip = require('@bigbinary/neetoui/Tooltip');
+var core = require('@dnd-kit/core');
+var Folder = require('@bigbinary/neeto-icons/Folder');
+var Toastr = require('@bigbinary/neetoui/Toastr');
+var reactDom = require('react-dom');
+var MoreDropdown = require('@bigbinary/neeto-molecules/MoreDropdown');
+var Checkbox = require('@bigbinary/neetoui/Checkbox');
+var Tree = require('@bigbinary/neetoui/Tree');
+require('i18next');
+require('@tanstack/react-query');
+require('./constants.js');
+require('zustand');
+
+function ownKeys$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 FoldersAlerts = function FoldersAlerts(_ref) {
+  var config = _ref.config;
+  var _useFolderStore = useFolderActions.useFolderStore(function (store) {
+      return {
+        setFolderState: store["setFolderState"]
+      };
+    }, shallow.shallow),
+    setFolderState = _useFolderStore.setFolderState;
+  var queryParams = reactUtils.useQueryParams({
+    toCamelCase: false
+  });
+  var history = reactRouterDom.useHistory();
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var _useFolderStore2 = useFolderActions.useFolderStore(function (store) {
+      var _store$alertState, _store$alertState2;
+      return {
+        type: (_store$alertState = store["alertState"]) === null || _store$alertState === void 0 ? void 0 : _store$alertState["type"],
+        item: (_store$alertState2 = store["alertState"]) === null || _store$alertState2 === void 0 ? void 0 : _store$alertState2["item"]
+      };
+    }, shallow.shallow),
+    type = _useFolderStore2.type,
+    item = _useFolderStore2.item;
+  var _useDestroyFolder = useFolderActions.useDestroyFolder(config),
+    destroyFolder = _useDestroyFolder.mutateAsync,
+    isLoading = _useDestroyFolder.isLoading;
+  var _useFolders = useFolderActions.useFolders(config),
+    folders = _useFolders.folders;
+  var onClose = function onClose() {
+    return setFolderState({
+      alertState: null
+    });
+  };
+  var alertProps = {
+    isOpen: !!type,
+    isSubmitting: isLoading,
+    onClose: onClose
+  };
+  var onConfirmDelete = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      var path, parent;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            _context.next = 2;
+            return destroyFolder(item.id);
+          case 2:
+            onClose();
+            if (!(!useFolderActions.isActiveFolder(item.sid) || !folders)) {
+              _context.next = 5;
+              break;
+            }
+            return _context.abrupt("return");
+          case 5:
+            path = pathUtils.pathToFolder(folders, item.id);
+            parent = path[path.length - 2];
+            if (parent) {
+              _context.next = 9;
+              break;
+            }
+            return _context.abrupt("return");
+          case 9:
+            history.replace(utils.buildUrl(config.folderPath, _objectSpread$9(_objectSpread$9({}, queryParams), {}, {
+              folderId: parent.sid
+            })));
+          case 10:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function onConfirmDelete() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  if (type === "delete") {
+    alertProps.title = t("deleteFolder.title");
+    alertProps.message = /*#__PURE__*/jsxRuntime.jsx(reactI18next.Trans, {
+      i18nKey: "deleteFolder.info",
+      values: item
+    });
+    if (config.customizeAlerts) config.customizeAlerts(type, item, alertProps);
+    alertProps.onSubmit = onConfirmDelete;
+  }
+  return /*#__PURE__*/jsxRuntime.jsx(Alert, _objectSpread$9({}, alertProps));
+};
+
+var flattenTree = ramda.pipe(pathUtils.treeToMap, ramda.values);
+var AddEditPane = function AddEditPane(_ref) {
+  var config = _ref.config,
+    onClose = _ref.onClose;
+  var _useFolderStore = useFolderActions.useFolderStore(function (store) {
+      var _store$paneState, _store$paneState2;
+      return {
+        type: (_store$paneState = store["paneState"]) === null || _store$paneState === void 0 ? void 0 : _store$paneState["type"],
+        item: (_store$paneState2 = store["paneState"]) === null || _store$paneState2 === void 0 ? void 0 : _store$paneState2["item"]
+      };
+    }, shallow.shallow),
+    type = _useFolderStore.type,
+    item = _useFolderStore.item;
+  var _useFetchFolders = useFolderActions.useFetchFolders(config),
+    folders = _useFetchFolders.data;
+  var _useCreateFolder = useFolderActions.useCreateFolder(config),
+    createFolder = _useCreateFolder.mutate;
+  var _useUpdateFolder = useFolderActions.useUpdateFolder(config),
+    updateFolder = _useUpdateFolder.mutateAsync;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var isEditing = type === "edit" && item;
+  var initialValues = isEditing ? item : {
+    name: "",
+    parentId: null
+  };
+  var folderOptions = react.useMemo(function () {
+    return flattenTree(folders);
+  }, [folders]);
+  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
+            };
+            if (!isEditing) {
+              _context.next = 6;
+              break;
+            }
+            _context.next = 4;
+            return updateFolder({
+              id: item.id,
+              payload: payload
+            });
+          case 4:
+            _context.next = 8;
+            break;
+          case 6:
+            _context.next = 8;
+            return createFolder(payload);
+          case 8:
+            onClose();
+          case 9:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function onSubmitForm(_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(Pane.Header, {
+      children: /*#__PURE__*/jsxRuntime.jsx(Typography, {
+        style: "h2",
+        children: isEditing ? t("folders.edit") : t("folders.add")
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx(formik.Formik, {
+      initialValues: initialValues,
+      onSubmit: onSubmitForm,
+      children: function children(_ref3) {
+        var setFieldValue = _ref3.setFieldValue;
+        return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+          children: [/*#__PURE__*/jsxRuntime.jsx(Pane.Body, {
+            children: /*#__PURE__*/jsxRuntime.jsxs(formik.Form, {
+              className: "w-full space-y-5",
+              children: [/*#__PURE__*/jsxRuntime.jsx(Input, {
+                label: t("folders.name"),
+                name: "name"
+              }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+                children: [/*#__PURE__*/jsxRuntime.jsx(Select, {
+                  isClearable: true,
+                  filterOption: function filterOption(_ref4) {
+                    var value = _ref4.value;
+                    return value !== initialValues.id;
+                  },
+                  getOptionLabel: ramda.prop("name"),
+                  getOptionValue: ramda.prop("id"),
+                  label: t("createFolder.parentTitle"),
+                  name: "parentId",
+                  options: folderOptions,
+                  onChange: function onChange(option) {
+                    return setFieldValue("parentId", option ? option.id : null);
+                  }
+                }), /*#__PURE__*/jsxRuntime.jsx(Typography, {
+                  style: "nano",
+                  children: t("createFolder.parentInfo")
+                })]
+              })]
+            })
+          }), /*#__PURE__*/jsxRuntime.jsx(Pane.Footer, {
+            children: /*#__PURE__*/jsxRuntime.jsx(ActionBlock, {
+              cancelButtonProps: {
+                onClick: onClose
+              }
+            })
+          })]
+        });
+      }
+    })]
+  });
+};
+
+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 Node = function Node(_ref, ref) {
+  var _folder$children$leng, _folder$children;
+  var _ref$icon = _ref.icon,
+    icon = _ref$icon === void 0 ? null : _ref$icon,
+    itemLabel = _ref.itemLabel,
+    folder = _ref.folder,
+    depth = _ref.depth,
+    className = _ref.className,
+    onClick = _ref.onClick,
+    rest = _objectWithoutProperties(_ref, _excluded$3);
+  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));
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "flex",
+    children: [Array.from({
+      length: depth
+    }).map(function (_, index) {
+      return /*#__PURE__*/jsxRuntime.jsx("span", {
+        className: "relative border-l",
+        style: {
+          width: indentSize,
+          left: Math.round(indentSize / 2)
+        }
+      }, index);
+    }), /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread$8(_objectSpread$8({}, _objectSpread$8(_objectSpread$8({}, rest), {}, {
+      onClick: onClick,
+      ref: ref
+    })), {}, {
+      className: classNames("relative my-1 flex cursor-pointer items-center px-2 py-1", className),
+      children: [icon, /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "ml-2",
+        children: [/*#__PURE__*/jsxRuntime.jsx(Typography, {
+          style: "body3",
+          weight: "medium",
+          children: folder.name
+        }), /*#__PURE__*/jsxRuntime.jsx(Typography, {
+          className: "relative -top-0.5",
+          style: "nano",
+          weight: "normal",
+          children: metaInfo.join(" . ")
+        })]
+      })]
+    }))]
+  });
+};
+var Node$1 = /*#__PURE__*/react.forwardRef(Node);
+
+var _excluded$2 = ["folder", "item", "depth", "maxDepth", "disabled"];
+function ownKeys$7(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$7(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$7(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$7(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var _SelectableNode = function SelectableNode(_ref) {
+  var folder = _ref.folder,
+    item = _ref.item,
+    _ref$depth = _ref.depth,
+    depth = _ref$depth === void 0 ? 0 : _ref$depth,
+    maxDepth = _ref.maxDepth,
+    disabled = _ref.disabled,
+    rest = _objectWithoutProperties(_ref, _excluded$2);
+  var selection = rest.selection,
+    onSelect = rest.onSelect;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var isDisabled = disabled || (item === null || item === void 0 ? void 0 : item.id) === folder.id || depth > maxDepth;
+  var renderChildren = function renderChildren() {
+    if (neetoCist.isNotPresent(folder.children)) return null;
+    return folder.children.map(function (child) {
+      return /*#__PURE__*/react.createElement(_SelectableNode, _objectSpread$7(_objectSpread$7({}, _objectSpread$7(_objectSpread$7({}, rest), {}, {
+        item: item,
+        maxDepth: maxDepth
+      })), {}, {
+        depth: depth + 1,
+        disabled: isDisabled,
+        folder: child,
+        key: child.id
+      }));
+    });
+  };
+  return /*#__PURE__*/jsxRuntime.jsx(Tooltip, {
+    content: t("moveToFolder.notAllowed"),
+    disabled: !isDisabled,
+    position: "top",
+    children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: classNames({
+        "opacity-40": isDisabled
+      }),
+      children: [/*#__PURE__*/jsxRuntime.jsx(Node$1, _objectSpread$7(_objectSpread$7({}, _objectSpread$7(_objectSpread$7({}, rest), {}, {
+        depth: depth,
+        folder: folder
+      })), {}, {
+        icon: /*#__PURE__*/jsxRuntime.jsx(Radio.Item, {
+          readOnly: true,
+          checked: selection === folder.id,
+          name: "move-folder-option"
+        }),
+        onClick: isDisabled ? neetoCist.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; }
+var PaneBody = function PaneBody(_ref) {
+  var item = _ref.item,
+    config = _ref.config,
+    submitButtonProps = _ref.submitButtonProps,
+    cancelButtonProps = _ref.cancelButtonProps,
+    removeButtonProps = _ref.removeButtonProps,
+    onSubmit = _ref.onSubmit,
+    onClose = _ref.onClose,
+    onRemove = _ref.onRemove;
+  var _useState = react.useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    selection = _useState2[0],
+    setSelection = _useState2[1];
+  var _useFolderStore = useFolderActions.useFolderStore(function (store) {
+      return {
+        setFolderState: store["setFolderState"]
+      };
+    }, shallow.shallow),
+    setFolderState = _useFolderStore.setFolderState;
+  var _useFetchFolders = useFolderActions.useFetchFolders(config),
+    _useFetchFolders$data = _useFetchFolders.data,
+    folders = _useFetchFolders$data === void 0 ? [] : _useFetchFolders$data;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var folderDepth = 0;
+  if (item) {
+    // If item is a folder, measure the current depth from current folder to longest leaf.
+    var foldersMap = pathUtils.treeToMap(folders);
+    var folder = foldersMap[item.id];
+    if (folder) folderDepth = pathUtils.measureDepth(folder);
+  }
+  var maxDepth = config.maxDepth - folderDepth;
+  var onAddFolder = function onAddFolder() {
+    setFolderState({
+      paneState: {
+        type: "add",
+        item: null
+      }
+    });
+  };
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsxs(Pane.Header, {
+      className: "flex items-center justify-between",
+      children: [/*#__PURE__*/jsxRuntime.jsx(Typography, {
+        style: "h2",
+        children: t("moveToFolder.title")
+      }), /*#__PURE__*/jsxRuntime.jsx(Button, {
+        className: "mr-2",
+        label: t("folders.add"),
+        style: "link",
+        onClick: onAddFolder
+      })]
+    }), /*#__PURE__*/jsxRuntime.jsx(Pane.Body, {
+      children: folders.map(function (folder) {
+        return /*#__PURE__*/react.createElement(_SelectableNode, {
+          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,
+          key: folder.id,
+          onSelect: function onSelect(folder) {
+            return setSelection(folder.id);
+          }
+        });
+      })
+    }), /*#__PURE__*/jsxRuntime.jsxs(Pane.Footer, {
+      className: "space-x-2",
+      children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "flex flex-1 space-x-2",
+        children: [/*#__PURE__*/jsxRuntime.jsx(Button, _objectSpread$6({
+          disabled: !selection,
+          label: t("common.save"),
+          style: "primary",
+          onClick: function onClick() {
+            return onSubmit(selection);
+          }
+        }, submitButtonProps)), /*#__PURE__*/jsxRuntime.jsx(Button, _objectSpread$6({
+          label: t("common.cancel"),
+          style: "text",
+          onClick: onClose
+        }, cancelButtonProps))]
+      }), onRemove && /*#__PURE__*/jsxRuntime.jsx(Button, _objectSpread$6({
+        label: t("moveToFolder.remove"),
+        style: "tertiary",
+        onClick: onRemove
+      }, removeButtonProps))]
+    })]
+  });
+};
+
+var MoveFolderPane = function MoveFolderPane(_ref) {
+  var config = _ref.config,
+    onClose = _ref.onClose;
+  var _useFolderStore = useFolderActions.useFolderStore(function (store) {
+      var _store$paneState;
+      return {
+        item: (_store$paneState = store["paneState"]) === null || _store$paneState === void 0 ? void 0 : _store$paneState["item"]
+      };
+    }, shallow.shallow),
+    item = _useFolderStore.item;
+  var _useUpdateFolder = useFolderActions.useUpdateFolder(config),
+    updateFolder = _useUpdateFolder.mutate;
+  var onSaveSelection = function onSaveSelection(parentId) {
+    var payload = {
+      id: item.id,
+      parentId: parentId
+    };
+    updateFolder({
+      id: item.id,
+      payload: payload
+    }, {
+      onSuccess: onClose
+    });
+  };
+  return /*#__PURE__*/jsxRuntime.jsx(PaneBody, {
+    config: config,
+    item: item,
+    onClose: onClose,
+    onSubmit: onSaveSelection
+  });
+};
+
+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 folder = _ref.folder,
+    _ref$depth = _ref.depth,
+    depth = _ref$depth === void 0 ? 0 : _ref$depth,
+    rest = _objectWithoutProperties(_ref, _excluded$1);
+  var _useDraggable = core.useDraggable({
+      id: "draggable-item--".concat(folder.id),
+      data: folder,
+      disabled: depth <= 0
+    }),
+    isDragging = _useDraggable.isDragging,
+    attributes = _useDraggable.attributes,
+    listeners = _useDraggable.listeners,
+    setDraggableRef = _useDraggable.setNodeRef;
+  var _useDroppable = core.useDroppable({
+      id: "droppable-item--".concat(folder.id),
+      data: folder,
+      disabled: isDragging
+    }),
+    isOver = _useDroppable.isOver,
+    setDroppableRef = _useDroppable.setNodeRef;
+  var renderChildren = function renderChildren() {
+    if (neetoCist.isNotPresent(folder.children) || isDragging) return null;
+    return folder.children.map(function (child) {
+      return /*#__PURE__*/react.createElement(_DraggableNode, _objectSpread$5(_objectSpread$5({}, rest), {}, {
+        depth: depth + 1,
+        folder: child,
+        key: child.id
+      }));
+    });
+  };
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    children: [/*#__PURE__*/jsxRuntime.jsx(Node$1, _objectSpread$5(_objectSpread$5(_objectSpread$5({}, rest), {}, {
+      className: classNames({
+        "neeto-ui-bg-gray-100 opacity-50 ": isDragging,
+        "neeto-ui-border-primary-500 border": isOver,
+        "border border-transparent": !isOver
+      })
+    }, _objectSpread$5(_objectSpread$5({
+      depth: depth,
+      folder: folder
+    }, attributes), listeners)), {}, {
+      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 ReorderFoldersPane = function ReorderFoldersPane(_ref) {
+  var config = _ref.config,
+    onClose = _ref.onClose;
+  var _useState = react.useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    dragItem = _useState2[0],
+    setDragItem = _useState2[1];
+  var _useState3 = react.useState({}),
+    _useState4 = _slicedToArray(_useState3, 2),
+    changes = _useState4[0],
+    setChanges = _useState4[1];
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var _useFetchFolders = useFolderActions.useFetchFolders(config),
+    folders = _useFetchFolders.data;
+  var _useReorderFolders = useFolderActions.useReorderFolders(config),
+    reorderFolders = _useReorderFolders.mutate;
+  var _useStateWithDependen = reactUtils.useStateWithDependency(function () {
+      return {
+        name: "/",
+        id: null,
+        children: folders
+      };
+    }, [folders]),
+    _useStateWithDependen2 = _slicedToArray(_useStateWithDependen, 2),
+    tree = _useStateWithDependen2[0],
+    setTree = _useStateWithDependen2[1];
+  var onDragEnd = function onDragEnd(_ref2) {
+    var _activeFolder$meta$pa;
+    var active = _ref2.active,
+      over = _ref2.over;
+    setDragItem(null);
+    if (!over) return;
+    var foldersMap = pathUtils.treeToMap(tree);
+    var activeFolder = foldersMap[active.data.current.id];
+    var overFolder = foldersMap[over.data.current.id];
+
+    // Check moving inside same directory
+    if (((_activeFolder$meta$pa = activeFolder.meta.parent) === null || _activeFolder$meta$pa === void 0 ? void 0 : _activeFolder$meta$pa.id) === overFolder.id) 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 activeDepth = pathUtils.measureDepth(activeFolder);
+    var overDepth = overFolder.meta.depth;
+    if (activeDepth + overDepth >= config.maxDepth + 1) {
+      Toastr.error(t("moveToFolder.depthExceeded", {
+        maxDepth: config.maxDepth
+      }));
+      return;
+    }
+    activeFolder.meta.parent = overFolder;
+    var newTree = pathUtils.mapToTree(foldersMap);
+    setTree(newTree);
+    setChanges(ramda.assoc(activeFolder.id, overFolder.id));
+  };
+  var onSubmit = function onSubmit() {
+    var payload = {
+      changes: changes
+    };
+    reorderFolders(payload, {
+      onSuccess: onClose
+    });
+  };
+  var nodeProps = {
+    icon: /*#__PURE__*/jsxRuntime.jsx(Folder, {}),
+    itemLabel: config.itemLabel
+  };
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(Pane.Header, {
+      children: /*#__PURE__*/jsxRuntime.jsx(Typography, {
+        style: "h2",
+        children: t("reorderFolder.title")
+      })
+    }), /*#__PURE__*/jsxRuntime.jsxs(core.DndContext, {
+      onDragEnd: onDragEnd,
+      onDragStart: function onDragStart(_ref3) {
+        var active = _ref3.active;
+        return setDragItem(active.data.current);
+      },
+      children: [/*#__PURE__*/jsxRuntime.jsx(Pane.Body, {
+        children: /*#__PURE__*/react.createElement(_DraggableNode, _objectSpread$4(_objectSpread$4({}, nodeProps), {}, {
+          folder: tree,
+          key: tree.id
+        }))
+      }), /*#__PURE__*/jsxRuntime.jsxs(Pane.Footer, {
+        className: "space-x-2",
+        children: [/*#__PURE__*/jsxRuntime.jsx(Button, {
+          disabled: ramda.isEmpty(changes),
+          label: t("common.save"),
+          style: "primary",
+          onClick: onSubmit
+        }), /*#__PURE__*/jsxRuntime.jsx(Button, {
+          label: t("common.cancel"),
+          style: "text",
+          onClick: onClose
+        })]
+      }), /*#__PURE__*/reactDom.createPortal(/*#__PURE__*/jsxRuntime.jsx(core.DragOverlay, {
+        zIndex: 99999,
+        children: dragItem && /*#__PURE__*/jsxRuntime.jsx(Node$1, _objectSpread$4(_objectSpread$4({}, nodeProps), {}, {
+          className: "neeto-ui-bg-gray-200",
+          depth: 0,
+          folder: dragItem
+        }))
+      }), 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) {
+  var configProps = _ref.config;
+  var config = _objectSpread$3(_objectSpread$3({}, useFolderActions.DEFAULT_CONFIG), configProps);
+  var _useFolderStore = useFolderActions.useFolderStore(function (store) {
+      return {
+        setFolderState: store["setFolderState"]
+      };
+    }, shallow.shallow),
+    setFolderState = _useFolderStore.setFolderState;
+  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 onClose = function onClose() {
+    return setFolderState({
+      paneState: null
+    });
+  };
+  var commonProps = {
+    config: config,
+    onClose: onClose
+  };
+  return /*#__PURE__*/jsxRuntime.jsxs(Pane, {
+    onClose: onClose,
+    isOpen: !!type,
+    children: [(type === "edit" || type === "add") && /*#__PURE__*/jsxRuntime.jsx(AddEditPane, _objectSpread$3({}, commonProps)), type === "move" && /*#__PURE__*/jsxRuntime.jsx(MoveFolderPane, _objectSpread$3({}, commonProps)), type === "reorder" && /*#__PURE__*/jsxRuntime.jsx(ReorderFoldersPane, _objectSpread$3({}, commonProps))]
+  });
+};
+
+var FoldersContext = function FoldersContext(_ref) {
+  var config = _ref.config,
+    children = _ref.children;
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [children, /*#__PURE__*/jsxRuntime.jsx(FoldersPane, {
+      config: config
+    }), /*#__PURE__*/jsxRuntime.jsx(FoldersAlerts, {
+      config: config
+    })]
+  });
+};
+
+var FolderTile = function FolderTile(_ref) {
+  var _folder$children$leng, _folder$children;
+  var isSelected = _ref.isSelected,
+    link = _ref.link,
+    itemLabel = _ref.itemLabel,
+    folder = _ref.folder,
+    actions = _ref.actions,
+    onSelect = _ref.onSelect;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var actionCallback = function actionCallback(callback) {
+    return function (event) {
+      event.preventDefault();
+      callback(folder);
+    };
+  };
+  var menuItems = [{
+    key: "edit",
+    label: t("common.edit"),
+    onClick: actionCallback(actions.onEdit)
+  }, {
+    key: "move",
+    label: t("common.move"),
+    onClick: actionCallback(actions.onMove)
+  }, {
+    key: "delete",
+    label: t("common.delete"),
+    onClick: actionCallback(actions.onDelete)
+  }];
+  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));
+  return /*#__PURE__*/jsxRuntime.jsxs(reactRouterDom.Link, {
+    className: "neeto-ui-bg-gray-100 neeto-ui-rounded-md m-2 w-64 border p-3",
+    to: link,
+    children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "mb-1 flex items-center justify-between",
+      children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "flex items-center",
+        children: [/*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx(Tooltip, {
+          content: folder.name,
+          delay: [300, 0],
+          children: /*#__PURE__*/jsxRuntime.jsx(Typography, {
+            className: "line-clamp-1",
+            style: "body1",
+            weight: "medium",
+            children: folder.name
+          })
+        })]
+      }), /*#__PURE__*/jsxRuntime.jsx(MoreDropdown, {
+        menuItems: menuItems,
+        dropdownProps: {
+          onClick: function onClick(event) {
+            return event.preventDefault();
+          }
+        }
+      })]
+    }), /*#__PURE__*/jsxRuntime.jsx(Typography, {
+      className: "ml-6",
+      style: "body3",
+      children: metaInfo.join(" . ")
+    })]
+  });
+};
+
+function ownKeys$2(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var FoldersList = function FoldersList(_ref) {
+  var _ref$selection = _ref.selection,
+    selection = _ref$selection === void 0 ? [] : _ref$selection,
+    configProps = _ref.config,
+    onSelect = _ref.onSelect;
+  var config = _objectSpread$2(_objectSpread$2({}, useFolderActions.DEFAULT_CONFIG), configProps);
+  var params = reactUtils.useQueryParams({
+    toCamelCase: false
+  });
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var _useFolders = useFolderActions.useFolders(config),
+    folders = _useFolders.folders;
+  var _useFolder = useFolderActions.useFolder(config),
+    folderId = _useFolder.folderId,
+    folder = _useFolder.folder;
+  var actions = useFolderActions.useFolderActions(config);
+  var subFolders = folderId ? folder === null || folder === void 0 ? void 0 : folder.children : folders;
+  if (neetoCist.isNotPresent(subFolders)) return null;
+  return /*#__PURE__*/jsxRuntime.jsxs(FoldersContext, {
+    config: config,
+    children: [/*#__PURE__*/jsxRuntime.jsx(Typography, {
+      className: "mb-2 mt-2",
+      style: "h4",
+      children: t("folders.title")
+    }), /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "mb-6 flex flex-wrap justify-items-center",
+      children: subFolders.map(function (folder) {
+        return /*#__PURE__*/react.createElement(FolderTile, {
+          actions: actions,
+          folder: folder,
+          onSelect: onSelect,
+          isSelected: selection.includes(folder.id),
+          itemLabel: config.itemLabel,
+          key: folder.id,
+          link: utils.buildUrl(config.folderPath, _objectSpread$2(_objectSpread$2({}, params), {}, {
+            folderId: folder.sid
+          }))
+        });
+      })
+    })]
+  });
+};
+
+var _excluded = ["isOpen", "onClose"];
+function ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var MoveToFolderPane = function MoveToFolderPane(_ref) {
+  var isOpen = _ref.isOpen,
+    onClose = _ref.onClose,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/jsxRuntime.jsx(Pane, {
+    isOpen: isOpen,
+    onClose: onClose,
+    children: /*#__PURE__*/jsxRuntime.jsx(PaneBody, _objectSpread$1({}, _objectSpread$1(_objectSpread$1({}, rest), {}, {
+      onClose: onClose
+    })))
+  });
+};
+
+var FolderNode = function FolderNode(_ref) {
+  var _isActive = _ref.isActive,
+    folder = _ref.folder,
+    link = _ref.link;
+  return /*#__PURE__*/jsxRuntime.jsx(reactRouterDom.NavLink, {
+    activeClassName: "active",
+    className: "block",
+    isActive: function isActive() {
+      return _isActive;
+    },
+    to: link,
+    children: /*#__PURE__*/jsxRuntime.jsx(Tooltip, {
+      content: folder.name,
+      delay: [300, 0],
+      children: /*#__PURE__*/jsxRuntime.jsx(Typography, {
+        className: "line-clamp-1",
+        component: "span",
+        style: "body2",
+        children: folder.name
+      })
+    })
+  });
+};
+
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var FoldersTree = function FoldersTree(_ref) {
+  var configProps = _ref.config;
+  var config = _objectSpread(_objectSpread({}, useFolderActions.DEFAULT_CONFIG), configProps);
+  var _useState = react.useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    expandedKeys = _useState2[0],
+    setExpandedKeys = _useState2[1];
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var params = reactUtils.useQueryParams({
+    toCamelCase: false
+  });
+  var activeFolderSid = useFolderActions.getActiveFolderId(config);
+  var _useFetchFolders = useFolderActions.useFetchFolders(config),
+    folders = _useFetchFolders.data;
+  var updateExpandedKeys = function updateExpandedKeys() {
+    var _activeFolder$meta;
+    if (!folders) return;
+    // When active folder changes from external sources, update expanded keys to auto expand tree.
+    var expandedKeys = [];
+    var map = pathUtils.treeToMap(folders, "sid");
+    var activeFolder = map[activeFolderSid];
+    var parentSid = activeFolder === null || activeFolder === void 0 || (_activeFolder$meta = activeFolder.meta) === null || _activeFolder$meta === void 0 || (_activeFolder$meta = _activeFolder$meta.parent) === null || _activeFolder$meta === void 0 ? void 0 : _activeFolder$meta.sid;
+    if (parentSid) expandedKeys.push(parentSid);
+    setExpandedKeys(expandedKeys);
+  };
+  react.useEffect(function () {
+    // Non urgent update.
+    react.startTransition(updateExpandedKeys);
+  }, [activeFolderSid, folders]);
+  if (neetoCist.isNotPresent(folders)) {
+    return /*#__PURE__*/jsxRuntime.jsx(Typography, {
+      className: "w-full text-center",
+      style: "body2",
+      weight: "semibold",
+      children: t("folders.noFolders")
+    });
+  }
+  return /*#__PURE__*/jsxRuntime.jsx(Tree, {
+    expandedKeys: expandedKeys,
+    autoExpandParent: true,
+    blockNode: true,
+    showLine: true,
+    componentToken: {
+      titleHeight: 25,
+      indentSize: 25
+    },
+    fieldNames: {
+      key: "sid"
+    },
+    selectedKeys: [activeFolderSid],
+    treeData: folders,
+    titleRender: function titleRender(folder) {
+      return /*#__PURE__*/jsxRuntime.jsx(FolderNode, {
+        folder: folder,
+        isActive: folder.sid === activeFolderSid,
+        link: utils.buildUrl(config.folderPath, _objectSpread(_objectSpread({}, params), {}, {
+          folderId: folder.sid
+        }))
+      });
+    },
+    onExpand: setExpandedKeys
+  });
+};
+
+exports.FoldersContext = FoldersContext;
+exports.FoldersList = FoldersList;
+exports.FoldersTree = FoldersTree;
+exports.MoveToFolderPane = MoveToFolderPane;
+//# sourceMappingURL=components.js.map