@bigbinary/neeto-folders-frontend 2.0.23 → 2.0.25

package/README.md

@@ -266,6 +266,30 @@ import * as components from "@bigbinary/neeto-folders-frontend/components";
     />;
     ```
 
+5. `AddEditPane`: This component can be used in host applications to add or edit folders.
+
+    ##### Props:
+
+    - `config`: A config object to customize the folders behavior.
+
+    - `onClose()`: Callback invoked when the pane is closed.
+
+    - `folderSid`: It is optional. The SID of the parent folder where new folder should be created. If not provided, uses the active folder from URL.
+
+    - `setFocusField`: Ref callback to set focus on the name input field when pane opens.
+
+    Sample usage:
+
+    ```jsx
+    import { AddEditPane } from "@bigbinary/neeto-folders-frontend/components";
+    // ....
+    <AddEditPane
+      {...{ setFocusField, onClose }}
+      config={foldersConfig}
+      folderSid={selectedFolderSid}
+    />;
+    ```
+
 #### Hooks
 
 ```js

package/dist/cjs/components.js

@@ -9,10 +9,10 @@ var utils$1 = require('@bigbinary/neeto-commons-frontend/utils');
 var Alert = require('@bigbinary/neetoui/Alert');
 var reactI18next = require('react-i18next');
 var reactRouterDom = require('react-router-dom');
-var useFolderActions = require('../useFolderActions-CEJXB-Ff.js');
+var useFolderActions = require('../useFolderActions-hz2Q6yci.js');
 var constants = require('./constants.js');
-var utils = require('../index-Bkom-uV7.js');
-var internal = require('../internal-xADvDa75.js');
+var utils = require('../index-DshpXNOY.js');
+var internal = require('../internal-D5q2PCbM.js');
 var jsxRuntime = require('react/jsx-runtime');
 var Pane = require('@bigbinary/neetoui/Pane');
 var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
@@ -44,10 +44,8 @@ var Checkbox = require('@bigbinary/neetoui/Checkbox');
 var Tree = require('@bigbinary/neetoui/Tree');
 var Lock = require('@bigbinary/neeto-icons/Lock');
 var Plus = require('@bigbinary/neeto-icons/Plus');
-var antd = require('antd');
 var formik = require('formik');
-var Down = require('@bigbinary/neeto-icons/Down');
-var Label = require('@bigbinary/neetoui/Label');
+var NUITreeSelect = require('@bigbinary/neetoui/formik/TreeSelect');
 require('zustand');
 
 function ownKeys$f(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -208,7 +206,8 @@ var AddEditPane = function AddEditPane(_ref) {
   var _config$addEditValida;
   var setFocusField = _ref.setFocusField,
     config = _ref.config,
-    onClose = _ref.onClose;
+    onClose = _ref.onClose,
+    folderSid = _ref.folderSid;
   var _useTranslation = useTranslation(config),
     t = _useTranslation.t;
   var _useFolderStore = useFolderActions.useFolderStore(function (store) {
@@ -227,7 +226,7 @@ var AddEditPane = function AddEditPane(_ref) {
   var _useUpdateFolder = useFolderActions.useUpdateFolder(config),
     updateFolder = _useUpdateFolder.mutateAsync;
   var isEditing = type === "edit" && item;
-  var activeFolderSid = internal.getActiveFolderId(config);
+  var activeFolderSid = folderSid || internal.getActiveFolderId(config);
   var extraAttributes = config.extraAttributes;
   var filteredExtraAttributes = React.useMemo(function () {
     return filterExtraAttributes(extraAttributes, isEditing);
@@ -335,6 +334,7 @@ var AddEditPane = function AddEditPane(_ref) {
                   config: config,
                   allowClear: true,
                   showSearch: true,
+                  initialValue: folderSid,
                   label: t("createFolder.parentTitle"),
                   name: "parentId"
                 }), /*#__PURE__*/jsxRuntime.jsx(Typography, {
@@ -1435,7 +1435,7 @@ var Node = function Node(_ref) {
           })
         })]
       }), hasAnyActions && /*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: "flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity",
+        className: "flex items-center gap-1",
         onClick: function onClick(e) {
           e.preventDefault();
           e.stopPropagation();
@@ -1450,13 +1450,15 @@ var Node = function Node(_ref) {
             tooltipProps: {
               content: "Add",
               position: "top"
-            }
+            },
+            className: "opacity-0 group-hover:opacity-100 transition-opacity"
           }
         }), hasMoreActions && /*#__PURE__*/jsxRuntime.jsx(MoreDropdown, {
+          menuItems: moreActions,
           dropdownButtonProps: {
-            size: "small"
-          },
-          menuItems: moreActions
+            size: "small",
+            className: "opacity-0 group-hover:opacity-100 transition-opacity"
+          }
         })]
       })]
     })
@@ -1601,164 +1603,84 @@ var createFolderOptions = function createFolderOptions(foldersMap, config) {
     var _folder$meta$parent;
     return {
       id: folder.id,
-      title: folder.name,
+      label: folder.name,
       value: folder.id,
-      pId: (_folder$meta$parent = folder.meta.parent) === null || _folder$meta$parent === void 0 ? void 0 : _folder$meta$parent.id,
-      disabled: folder.meta.depth >= config.maxDepth
+      pId: (_folder$meta$parent = folder.meta.parent) === null || _folder$meta$parent === void 0 ? void 0 : _folder$meta$parent.id
     };
+  }, function (folder) {
+    return folder.meta.depth < config.maxDepth;
   });
 };
 
-var _excluded = ["className", "disabled", "fieldNames", "label", "loading", "name", "placeholder", "required", "showSearch", "size", "config"];
+var _excluded = ["label", "name", "placeholder", "disabled", "loading", "required", "showSearch", "size", "fieldNames", "config", "initialValue"];
 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 TreeSelect = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _fieldNames$label;
-  var className = _ref.className,
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-    fieldNames = _ref.fieldNames,
-    _ref$label = _ref.label,
+  var _ref$label = _ref.label,
     label = _ref$label === void 0 ? "" : _ref$label,
-    _ref$loading = _ref.loading,
-    loading = _ref$loading === void 0 ? false : _ref$loading,
     name = _ref.name,
     _ref$placeholder = _ref.placeholder,
     placeholder = _ref$placeholder === void 0 ? "" : _ref$placeholder,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$loading = _ref.loading,
+    loading = _ref$loading === void 0 ? false : _ref$loading,
     _ref$required = _ref.required,
     required = _ref$required === void 0 ? false : _ref$required,
     _ref$showSearch = _ref.showSearch,
     showSearch = _ref$showSearch === void 0 ? true : _ref$showSearch,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? "middle" : _ref$size,
+    fieldNames = _ref.fieldNames,
     config = _ref.config,
+    initialValue = _ref.initialValue,
     otherProps = _objectWithoutProperties(_ref, _excluded);
   var _useFetchFolders = useFolderActions.useFetchFolders(config),
     folders = _useFetchFolders.data;
-  var _useField = formik.useField(name),
-    _useField2 = _slicedToArray(_useField, 3),
-    field = _useField2[0],
-    meta = _useField2[1],
-    _useField2$ = _useField2[2],
-    setValue = _useField2$.setValue,
-    setTouched = _useField2$.setTouched;
   var _useFormikContext = formik.useFormikContext(),
-    values = _useFormikContext.values;
+    values = _useFormikContext.values,
+    setFieldValue = _useFormikContext.setFieldValue;
   var foldersMap = React.useMemo(function () {
     return folders ? utils.treeToMap(folders, "sid") : null;
   }, [folders]);
-  var activeFolderSid = internal.getActiveFolderId(config);
+  var activeFolderSid = initialValue || internal.getActiveFolderId(config);
   var activeFolder = foldersMap[activeFolderSid];
   var isValidParent = (activeFolder === null || activeFolder === void 0 ? void 0 : activeFolder.meta.depth) < config.maxDepth;
   var parentId = isValidParent ? activeFolder.id : null;
   React.useEffect(function () {
-    if (values.name === "") {
-      setValue(parentId);
-    }
-  }, [parentId]);
+    if (values.name !== "") return;
+    setFieldValue(name, parentId);
+  }, [parentId, name]);
   var folderOptions = React.useMemo(function () {
     return createFolderOptions(foldersMap, config);
   }, [foldersMap]);
-  var hasLeafNodes = folderOptions === null || folderOptions === void 0 ? void 0 : folderOptions.some(function (node) {
-    return (node === null || node === void 0 ? void 0 : node.pId) !== null;
-  });
-  return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: "neeto-ui-input__wrapper",
-    children: [label && /*#__PURE__*/jsxRuntime.jsx(Label, {
-      required: required,
-      children: label
-    }), /*#__PURE__*/jsxRuntime.jsx(antd.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,
-            indentSize: 28,
-            nodeHoverBg: "rgb(var(--neeto-ui-gray-100))",
-            nodeSelectedBg: "rgb(var(--neeto-ui-primary-500))",
-            colorBgElevated: "rgb(var(--neeto-ui-white))"
-          }
-        }
-      },
-      children: /*#__PURE__*/jsxRuntime.jsx(antd.TreeSelect, _objectSpread(_objectSpread({
-        treeDataSimpleMode: true,
-        "data-cy": "nui-select-container-wrapper",
-        dropdownStyle: {
-          zIndex: 100000
-        },
-        name: field.name,
-        popupClassName: "neeto-ui-tree-select-dropdown",
-        suffixIcon: /*#__PURE__*/jsxRuntime.jsx(Down, {}),
-        treeData: folderOptions,
-        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 nf-tree-select", className, {
-          "neeto-ui-tree-select__error": meta.error
-        }),
-        switcherIcon: function switcherIcon(props) {
-          return /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread(_objectSpread({}, props), {}, {
-            children: /*#__PURE__*/jsxRuntime.jsx(Down, {
-              className: "relative"
-            })
-          }));
-        },
-        onBlur: function onBlur() {
-          return setTouched(true);
-        },
-        onChange: function onChange(value) {
-          return setValue(value !== null && value !== void 0 ? value : null);
-        }
-      }, _objectSpread({
-        disabled: disabled,
-        fieldNames: fieldNames,
-        loading: loading,
-        placeholder: placeholder,
-        ref: ref,
-        showSearch: showSearch,
-        size: size
-      }, otherProps)), {}, {
-        dropdownRender: function dropdownRender(menu) {
-          return hasLeafNodes ? menu : /*#__PURE__*/jsxRuntime.jsx("div", {
-            className: "-mx-5 -ml-6",
-            children: menu
-          });
-        }
-      }))
-    }), meta.error && /*#__PURE__*/jsxRuntime.jsx("p", {
-      className: "neeto-ui-input__error",
-      children: meta.error
-    })]
-  });
+  return /*#__PURE__*/jsxRuntime.jsx(NUITreeSelect, _objectSpread({
+    treeDataSimpleMode: true,
+    "data-cy": "nui-select-container-wrapper",
+    treeData: folderOptions,
+    treeNodeFilterProp: (_fieldNames$label = fieldNames === null || fieldNames === void 0 ? void 0 : fieldNames.label) !== null && _fieldNames$label !== void 0 ? _fieldNames$label : "title"
+  }, _objectSpread({
+    disabled: disabled,
+    fieldNames: fieldNames,
+    label: label,
+    loading: loading,
+    name: name,
+    placeholder: placeholder,
+    ref: ref,
+    required: required,
+    showSearch: showSearch,
+    size: size
+  }, otherProps)));
 });
 TreeSelect.displayName = "TreeSelect";
 
 var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}
 
-var css = ".neeto-sidebar-folders-tree__folder-node{color:inherit!important}.neeto-sidebar-folders-tree.ant-tree .ant-tree-node-content-wrapper{min-width:0;padding-inline: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== */";
+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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFwcC9qYXZhc2NyaXB0L3NyYy9jb21wb25lbnRzL25lZXRvLWZvbGRlcnMtbmFuby5zY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLHlDQUNFLHVCQUNGLENBRUEsb0VBRUUsV0FBQSxDQURBLDRCQUVGLENBRUEsMkZBR0UsMkNBQUEsQ0FEQSwrQ0FBQSxDQUVBLGVBQUYsQ0FHQSxnRkFHRSxpQkFGRixDQUtBLGlDQUNFLHlEQUZGIiwic291cmNlc0NvbnRlbnQiOlsiLm5lZXRvLXNpZGViYXItZm9sZGVycy10cmVlX19mb2xkZXItbm9kZSB7XG4gIGNvbG9yOiBpbmhlcml0ICFpbXBvcnRhbnQ7XG59XG5cbi5uZWV0by1zaWRlYmFyLWZvbGRlcnMtdHJlZS5hbnQtdHJlZSAuYW50LXRyZWUtbm9kZS1jb250ZW50LXdyYXBwZXIge1xuICBwYWRkaW5nLWlubGluZTogNnB4ICFpbXBvcnRhbnQ7XG4gIG1pbi13aWR0aDogMDtcbn1cblxuLm5lZXRvLXNpZGViYXItZm9sZGVycy10cmVlLmFudC10cmVlXG4gIC5hbnQtdHJlZS1ub2RlLWNvbnRlbnQtd3JhcHBlci5hbnQtdHJlZS1ub2RlLXNlbGVjdGVkIHtcbiAgY29sb3I6IHJnYih2YXIoLS1uZWV0by11aS1hY2NlbnQtODAwKSkgIWltcG9ydGFudDtcbiAgYmFja2dyb3VuZC1jb2xvcjogcmdiKHZhcigtLW5lZXRvLXVpLXdoaXRlKSk7XG4gIGZvbnQtd2VpZ2h0OiA1MDA7XG59XG5cbi5uZWV0by1zaWRlYmFyLWZvbGRlcnMtdHJlZS5hbnQtdHJlZVxuICAuYW50LXRyZWUtc3dpdGNoZXJcbiAgLmFudC10cmVlLXN3aXRjaGVyLWljb24ge1xuICBwb3NpdGlvbjogcmVsYXRpdmU7XG59XG5cbi5uZWV0by1mb2xkZXJzLWdyaWQtdmlldy13cmFwcGVyIHtcbiAgZ3JpZC10ZW1wbGF0ZS1jb2x1bW5zOiByZXBlYXQoYXV0by1maWxsLCBtaW5tYXgoMjU2cHgsIDFmcikpO1xufVxuIl19 */";
 n(css,{});
 
+exports.AddEditPane = AddEditPane;
 exports.FoldersContext = FoldersContext;
 exports.FoldersList = FoldersList;
 exports.FoldersTree = FoldersTree;