@vitrosoftware/common-ui-ts 1.1.24 → 1.1.27

package/dist/index.js

@@ -68,38 +68,27 @@ var app$1 = {
 			action: {
 				conf: {
 					single: "Выполнить действие '{{actionCode}}'",
-					multi: "Выполнить действие '{{actionCode}}'"
+					multi: "Выполнить действие '{{actionCode}}'",
+					std: "Выполнить действие '{{actionCode}}'"
 				},
 				progress: {
 					single: "Выполняется действие '{{actionCode}}'",
-					multi: "Выполняется действие '{{actionCode}}'"
+					multi: "Выполняется действие '{{actionCode}}'",
+					std: "Выполняется действие '{{actionCode}}'"
 				},
 				success: {
 					single: "Действие '{{actionCode}}' выполнено успешно",
-					multi: "Действие '{{actionCode}}' выполнено успешно"
+					multi: "Действие '{{actionCode}}' выполнено успешно. Кол-во элементов: {{count}}",
+					std: "Действие '{{actionCode}}' выполнено успешно"
 				},
 				error: {
 					single: "Действие '{{actionCode}}' выполнено с ошибками",
-					multi: "Действие '{{actionCode}}' выполнено с ошибками"
-				},
-				warning: {
-					single: "Действие '{{actionCode}}' выполнено с замечаниями",
-					multi: "Действие '{{actionCode}}' выполнено с замечаниями"
+					multi: "Действие '{{actionCode}}' выполнено с ошибками",
+					std: "Действие '{{actionCode}}' выполнено с ошибками"
 				},
 				pending: "В ожидании",
 				processing: "Выполняется",
-				complete: "Завершено",
-				"delete": {
-					success_one: "Успешно удален {{count}} объект",
-					success_few: "Успешно удалено {{count}} объекта",
-					success_many: "Успешно удалено {{count}} объектов",
-					progress_one: "Остался {{count}} объект из {{itemCount}}",
-					progress_few: "Осталось {{count}} объекта из {{itemCount}}",
-					progress_many: "Осталось {{count}} объектов из {{itemCount}}",
-					error_one: "Удален {{count}} объект из {{itemCount}}",
-					error_few: "Удалено {{count}} объекта из {{itemCount}}",
-					error_many: "Удалено {{count}} объектов из {{itemCount}}"
-				}
+				complete: "Завершено"
 			}
 		},
 		uploader: {
@@ -128,8 +117,8 @@ var app$1 = {
 			}
 		},
 		actionHandler: {
-			itemCount: "Выбранных объектов: {{itemCount}}",
-			itemName: "Выбран объект: {{itemName}}"
+			itemCount: "Выбранных элементов: {{itemCount}}",
+			itemName: "Элемент: {{itemName}}"
 		},
 		login: {
 			title: "Вход",
@@ -261,6 +250,7 @@ var ScrollBar = function ScrollBar(props) {
   EVENT["HISTORY_UPDATE"] = "vitro.history.update";
   EVENT["HISTORY_CHANGED"] = "vitro.history.changed";
   EVENT["DROP"] = "drop";
+  EVENT["CONTEXTMENU"] = "contextmenu";
 })(exports.EVENT || (exports.EVENT = {}));
 
 var styles$1 = {"vitro-breadcrumbs":"_breadcrumbs_vitro-breadcrumbs_3r4NcQY","vitro-breadcrumbs-list-wrap":"_breadcrumbs_vitro-breadcrumbs-list-wrap_1_JBrw0","vitro-breadcrumbs-list":"_breadcrumbs_vitro-breadcrumbs-list_1SNtgtJ","vitro-breadcrumbs-button":"_breadcrumbs_vitro-breadcrumbs-button_3fazq3c","vitro-root":"_breadcrumbs_vitro-root_1S5-6AY","vitro-drop-down-list":"_breadcrumbs_vitro-drop-down-list_2PhrR2a"};
@@ -20113,41 +20103,6 @@ var jstree = createCommonjsModule(function (module) {
 }));
 });
 
-var TreeViewConfig = /*#__PURE__*/function () {
-  function TreeViewConfig() {}
-  TreeViewConfig.getConfig = function getConfig() {
-    return {
-      core: {
-        check_callback: true,
-        themes: {
-          dots: false
-        },
-        multiple: false,
-        data: function data(obj, cb) {}
-      },
-      plugins: ["search", "unique", "types", "wholerow", "themes", "sort", "state"],
-      types: {
-        folder: {
-          icon: "folder",
-          new_node: "New Folder"
-        },
-        file: {
-          icon: "file",
-          valid_children: [""],
-          new_node: "New File"
-        }
-      },
-      checkbox: {
-        three_state: false
-      },
-      contextmenu: function contextmenu() {
-        return [];
-      }
-    };
-  };
-  return TreeViewConfig;
-}();
-
 var METHOD;
 (function (METHOD) {
   METHOD["GET_PATH"] = "get_path";
@@ -20167,6 +20122,13 @@ var METHOD;
   METHOD["OPEN_NODE"] = "open_node";
   METHOD["EDIT"] = "edit";
   METHOD["GET_PARENT"] = "get_parent";
+  METHOD["GET_CHECKED"] = "get_checked";
+  METHOD["GET_UNDETERMINED"] = "get_undetermined";
+  METHOD["GET_CHECKED_DESCENDANTS"] = "get_checked_descendants";
+  METHOD["GET_TOP_CHECKED"] = "get_top_checked";
+  METHOD["GET_BOTTOM_CHECKED"] = "get_bottom_checked";
+  METHOD["IS_CHECKED"] = "is_checked";
+  METHOD["IS_UNDETERMINED"] = "is_undetermined";
 })(METHOD || (METHOD = {}));
 var EVENT;
 (function (EVENT) {
@@ -20174,20 +20136,91 @@ var EVENT;
   EVENT["SELECT_NODE"] = "select_node.jstree";
   EVENT["LOADED"] = "loaded.jstree";
   EVENT["MODEL"] = "model.jstree";
+  EVENT["DBLCLICK"] = "dblclick.jstree";
 })(EVENT || (EVENT = {}));
 var NODE_TYPE;
 (function (NODE_TYPE) {
   NODE_TYPE["FOLDER"] = "folder";
   NODE_TYPE["FILE"] = "file";
 })(NODE_TYPE || (NODE_TYPE = {}));
+var PLUGIN;
+(function (PLUGIN) {
+  PLUGIN["STATE"] = "state";
+  PLUGIN["CHECKBOX"] = "checkbox";
+  PLUGIN["SEARCH"] = "search";
+  PLUGIN["UNIQUE"] = "unique";
+  PLUGIN["TYPES"] = "types";
+  PLUGIN["WHOLEROW"] = "wholerow";
+  PLUGIN["THEMES"] = "themes";
+  PLUGIN["SORT"] = "sort";
+})(PLUGIN || (PLUGIN = {}));
+var CASCADE;
+(function (CASCADE) {
+  CASCADE["UP"] = "up";
+  CASCADE["DOWN"] = "down";
+  CASCADE["UNDETERMINED"] = "undetermined";
+})(CASCADE || (CASCADE = {}));
 
 var TreeViewConstants = {
     __proto__: null,
     get METHOD () { return METHOD; },
     get EVENT () { return EVENT; },
-    get NODE_TYPE () { return NODE_TYPE; }
+    get NODE_TYPE () { return NODE_TYPE; },
+    get PLUGIN () { return PLUGIN; },
+    get CASCADE () { return CASCADE; }
 };
 
+var TreeViewConfig = /*#__PURE__*/function () {
+  function TreeViewConfig() {}
+  TreeViewConfig.getConfig = function getConfig(id, checkboxSelect, saveChecked) {
+    return {
+      core: {
+        check_callback: true,
+        themes: {
+          dots: false
+        },
+        multiple: false,
+        data: function data(obj, cb) {}
+      },
+      plugins: function () {
+        var pluginList = [PLUGIN.UNIQUE, PLUGIN.TYPES, PLUGIN.WHOLEROW, PLUGIN.THEMES, PLUGIN.SORT, PLUGIN.STATE];
+        if (checkboxSelect) {
+          pluginList.push(PLUGIN.CHECKBOX);
+        }
+        return pluginList;
+      }(),
+      types: {
+        folder: {
+          icon: NODE_TYPE.FOLDER
+        },
+        file: {
+          icon: NODE_TYPE.FILE,
+          valid_children: [CTRL.EMPTY]
+        }
+      },
+      state: {
+        key: id,
+        filter: function filter(state) {
+          if (!saveChecked) {
+            delete state.checkbox;
+          }
+          return state;
+        }
+      },
+      checkbox: {
+        visible: true,
+        three_state: false,
+        tie_selection: false,
+        cascade: CASCADE.DOWN
+      },
+      contextmenu: function contextmenu() {
+        return [];
+      }
+    };
+  };
+  return TreeViewConfig;
+}();
+
 var JsTreeViewContextImpl = /*#__PURE__*/function () {
   function JsTreeViewContextImpl(jsTree) {
     this.jsTree = jsTree;
@@ -20273,20 +20306,47 @@ var JsTreeViewContextImpl = /*#__PURE__*/function () {
   _proto.getParent = function getParent(node) {
     return this.jsTree.jstree(METHOD.GET_PARENT, node);
   };
+  _proto.getChecked = function getChecked(full) {
+    return this.jsTree.jstree(METHOD.GET_CHECKED, full);
+  };
+  _proto.getUndetermined = function getUndetermined(full) {
+    return this.jsTree.jstree(METHOD.GET_UNDETERMINED, full);
+  };
+  _proto.getCheckedChildList = function getCheckedChildList(id) {
+    return this.jsTree.jstree(METHOD.GET_CHECKED_DESCENDANTS, id);
+  };
+  _proto.getTopChecked = function getTopChecked(full) {
+    return this.jsTree.jstree(METHOD.GET_TOP_CHECKED, full);
+  };
+  _proto.getBottomChecked = function getBottomChecked(full) {
+    return this.jsTree.jstree(METHOD.GET_BOTTOM_CHECKED, full);
+  };
+  _proto.isChecked = function isChecked(node) {
+    return this.jsTree.jstree(METHOD.IS_CHECKED, node);
+  };
+  _proto.isUndetermined = function isUndetermined(node) {
+    return this.jsTree.jstree(METHOD.IS_UNDETERMINED, node);
+  };
   return JsTreeViewContextImpl;
 }();
 
 var styles$3 = {"vitro-tree-view":"_tree-view_vitro-tree-view_3oii-CW"};
 
+var CSS_CLASS_JSTREE_NODE = 'jstree-node';
 var TreeView = function TreeView(props) {
   var _useState = React.useState(null),
     jsTreeTreeView = _useState[0],
     setJsTreeTreeView = _useState[1];
   var jsTreeRef = React.useRef(null);
-  var config = TreeViewConfig.getConfig();
+  var config = TreeViewConfig.getConfig(props.id, props.isCheckboxSelect, props.isSaveCheckboxState);
   var jsTreeView;
   React.useEffect(function () {
     config.core.data = props.getData;
+    if (props.isCheckboxSelect) {
+      jquery(document).on(exports.EVENT.CONTEXTMENU, CTRL.DOT + CSS_CLASS_JSTREE_NODE, function (e) {
+        return checkNode(e, jsTreeView);
+      });
+    }
     jquery(jsTreeRef.current).jstree(config);
     var jsTree = jquery(jsTreeRef.current);
     jsTreeView = new JsTreeViewContextImpl(jsTree);
@@ -20294,18 +20354,33 @@ var TreeView = function TreeView(props) {
     if (props.onInit) {
       props.onInit(jsTreeView);
     }
+    return function () {
+      jquery(document).off(exports.EVENT.CONTEXTMENU, CTRL.DOT + CSS_CLASS_JSTREE_NODE, function (e) {
+        return checkNode(e, jsTreeView);
+      });
+    };
   }, [jsTreeRef]);
   React.useEffect(function () {
     return function () {
-      if (jsTreeRef.current) {
+      if (jsTreeTreeView && jsTreeRef.current) {
         jsTreeTreeView.dispose();
       }
     };
   }, []);
+  var checkNode = function checkNode(e, treeView) {
+    e.preventDefault();
+    e.stopPropagation();
+    var nodeId = e.currentTarget.id;
+    var node = treeView.getNode(nodeId);
+    if (!node.state.checked) {
+      node.state.checked = true;
+      treeView.redrawNode(node, false);
+    }
+  };
   return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
     ref: jsTreeRef,
     id: props.id,
-    className: styles$3["vitro-tree-view"]
+    className: styles$3['vitro-tree-view']
   }));
 };
 
@@ -20623,6 +20698,7 @@ var EVENT$1;
   EVENT["ON_CUSTOM_END_EDIT"] = "OnCustomEndEdit";
   EVENT["ON_CUSTOM_START_EDIT"] = "OnCustomStartEdit";
   EVENT["ON_ENDED_DRAG"] = "OnEndedDrag";
+  EVENT["ON_END_DRAG"] = "OnEndDrag";
   EVENT["ON_FILTER_OPERATOR"] = "OnFilterOperator";
   EVENT["ON_FILTER"] = "OnFilter";
   EVENT["ON_GANTT_CHANGED"] = "OnGanttChanged";
@@ -21145,6 +21221,7 @@ var TelerikUploaderContextImpl = /*#__PURE__*/function () {
   };
   _proto.error = function error(e) {
     this.errorCount += e.files.length;
+    this.setErrorMessage(e.files[0], e.XMLHttpRequest.response);
   };
   _proto.progress = function progress(e) {
     this.progressInfo.show();
@@ -21223,6 +21300,17 @@ var TelerikUploaderContextImpl = /*#__PURE__*/function () {
   _proto.setAthorizationToken = function setAthorizationToken(token) {
     this.token = token;
   };
+  _proto.setErrorMessage = function setErrorMessage(file, resp) {
+    if (this.settings.handleError) {
+      var response = JSON.parse(resp);
+      var error = this.settings.handleError(response);
+      var message = error.message;
+      if (message) {
+        $$1(this.container).find(".k-file[data-uid='" + file.uid + "'] .k-file-validation-message").text(message);
+      }
+      console.error(error);
+    }
+  };
   _proto.setFileImage = function setFileImage(file) {
     if (this.settings.getFileImage) {
       var image = this.settings.getFileImage(file.name);
@@ -59501,18 +59589,19 @@ var LOCALE$1;
 (function (LOCALE) {
   LOCALE["CONF_SINGLE"] = "app.common.msg.action.conf.single";
   LOCALE["CONF_MULTI"] = "app.common.msg.action.conf.multi";
+  LOCALE["CONF_STD"] = "app.common.msg.action.conf.std";
   LOCALE["ITEM_COUNT"] = "app.common.actionHandler.itemCount";
   LOCALE["ITEM_NAME"] = "app.common.actionHandler.itemName";
   LOCALE["SUCCESS_SINGLE"] = "app.common.msg.action.success.single";
   LOCALE["SUCCESS_MULTI"] = "app.common.msg.action.success.multi";
+  LOCALE["SUCCESS_STD"] = "app.common.msg.action.success.std";
   LOCALE["ERROR_SINGLE"] = "app.common.msg.action.error.single";
   LOCALE["ERROR_MULTI"] = "app.common.msg.action.error.multi";
+  LOCALE["ERROR_STD"] = "app.common.msg.action.error.std";
   LOCALE["PROGRESS_SINGLE"] = "app.common.msg.action.progress.single";
   LOCALE["PROGRESS_MULTI"] = "app.common.msg.action.progress.multi";
-  LOCALE["WARNING_SINGLE"] = "app.common.msg.action.warning.single";
-  LOCALE["WARNING_MULTI"] = "app.common.msg.action.warning.multi";
+  LOCALE["PROGRESS_STD"] = "app.common.msg.action.progress.std";
   LOCALE["ACTION"] = "app.common.action";
-  LOCALE["ACTION_MSG"] = "app.common.msg.action";
   LOCALE["ERROR_MSG"] = "app.common.msg.error";
   LOCALE["SUCCESS"] = "success";
   LOCALE["PROGRESS"] = "progress";
@@ -59567,9 +59656,15 @@ var ActionInfo = function ActionInfo(props) {
     if (props.failResult && props.failResult.flat().find(function (itm) {
       return itm.id === item.id;
     })) {
+      var errorMessage = localeService.create(LOCALE$1.COMPLETE);
+      props.failResult.forEach(function (result) {
+        if (result[0].id === item.id && result[1].message) {
+          errorMessage = result[1].message;
+        }
+      });
       info = {
         error: true,
-        text: localeService.create(LOCALE$1.COMPLETE)
+        text: errorMessage
       };
     }
     return info;
@@ -59579,28 +59674,25 @@ var ActionInfo = function ActionInfo(props) {
     var successCount = props.successResult ? props.successResult.length : 0;
     var failCount = props.failResult ? props.failResult.length : 0;
     if (props.action === actionMap.progress) {
-      var key = [LOCALE$1.ACTION_MSG, props.actionCode, LOCALE$1.PROGRESS].join(CTRL.DOT);
-      return localeService.create(key, {
+      return localeService.create(LOCALE$1.PROGRESS_STD, {
         count: count - successCount - failCount,
         itemCount: count
       });
     }
     if (props.action === actionMap.after) {
       if (props.isSuccess) {
-        var _key = [LOCALE$1.ACTION_MSG, props.actionCode, LOCALE$1.SUCCESS].join(CTRL.DOT);
-        return localeService.create(_key, {
+        return localeService.create(LOCALE$1.SUCCESS_STD, {
           count: successCount,
           itemCount: count
         });
       } else {
         if (successCount) {
-          var _key2 = [LOCALE$1.ACTION_MSG, props.actionCode, LOCALE$1.ERROR].join(CTRL.DOT);
-          return localeService.create(_key2, {
+          return localeService.create(LOCALE$1.ERROR_STD, {
             count: successCount,
             itemCount: count
           });
         } else {
-          return localeService.create(LOCALE$1.ERROR_MSG, {
+          return localeService.create(LOCALE$1.ERROR_STD, {
             count: successCount,
             itemCount: count
           });
@@ -59679,9 +59771,10 @@ var ActionHandler = function ActionHandler(props) {
     };
   }, []);
   var data = React.useMemo(function () {
+    var itemList = props.itemList || props.item ? props.itemList || [props.item] : [];
     return {
-      itemList: props.itemList || [props.item],
-      itemCount: props.itemList ? props.itemList.length : [props.item].length
+      itemList: itemList,
+      itemCount: itemList.length
     };
   }, []);
   var progressBarRef = React.useRef(null);
@@ -59722,7 +59815,6 @@ var ActionHandler = function ActionHandler(props) {
       window.removeEventListener(exports.EVENT.KEYDOWN, onEscClick, false);
     };
   }, []);
-  if (!props.item && !props.itemList) return null;
   var init = function init() {
     if (props.onBeforeAction) {
       props.onBeforeAction();
@@ -59732,7 +59824,11 @@ var ActionHandler = function ActionHandler(props) {
       if (props.confirmText && props.confirmText()) {
         confText = props.confirmText(data.itemCount);
       } else {
-        if (data.itemCount === 1) {
+        if (data.itemCount == 0) {
+          confText = localeService.create(LOCALE$1.CONF_STD, {
+            actionCode: action
+          });
+        } else if (data.itemCount === 1) {
           confText = localeService.create(LOCALE$1.CONF_SINGLE, {
             actionCode: action,
             itemCount: data.itemCount
@@ -59749,6 +59845,9 @@ var ActionHandler = function ActionHandler(props) {
     setCurrentAction(actionMap$1.before);
   };
   var finish = function finish(success, error, successResult, failResult) {
+    if (failResult.length) {
+      setShow(true);
+    }
     setSuccess(success);
     setCurrentAction(actionMap$1.after);
     if (props.onAfterAction) {
@@ -59757,7 +59856,7 @@ var ActionHandler = function ActionHandler(props) {
     if (props.isBlockInterface) {
       setBlockInterface(false);
     }
-    if (!props.isShowAfterAction) {
+    if (!props.isShowAfterAction && !failResult.length) {
       close(error, successResult, failResult);
       return;
     }
@@ -59783,28 +59882,44 @@ var ActionHandler = function ActionHandler(props) {
     if (success) {
       setIcon(styles$7['vitro-icon-success']);
       setState(styles$7['vitro-success']);
-      var key = [LOCALE$1.ACTION_MSG, props.actionCode, LOCALE$1.SUCCESS].join(CTRL.DOT);
-      setText(localeService.create(key, {
-        actionCode: action,
-        count: successResult.length
-      }));
+      setSuccessText(action, successResult);
     } else if (successResult.length && failResult.length) {
       setIcon(styles$7['vitro-icon-warning']);
       setState(styles$7['vitro-warning']);
-      var _key = data.itemCount === 1 ? LOCALE$1.WARNING_SINGLE : LOCALE$1.WARNING_MULTI;
-      setText(localeService.create(_key, {
-        actionCode: action,
-        itemCount: data.itemCount
-      }));
+      setErrorText(action, failResult);
     } else {
       setIcon(styles$7['vitro-icon-error']);
       setState(styles$7['vitro-error']);
-      var _key2 = data.itemCount === 1 ? LOCALE$1.ERROR_SINGLE : LOCALE$1.ERROR_MULTI;
-      setText(localeService.create(_key2, {
-        actionCode: action,
-        itemCount: data.itemCount
-      }));
+      setErrorText(action, failResult);
+    }
+  };
+  var setSuccessText = function setSuccessText(action, result) {
+    var key;
+    if (data.itemCount == 0) {
+      key = LOCALE$1.SUCCESS_STD;
+    } else if (data.itemCount === 1) {
+      key = LOCALE$1.SUCCESS_SINGLE;
+    } else {
+      key = LOCALE$1.SUCCESS_MULTI;
     }
+    setText(localeService.create(key, {
+      actionCode: action,
+      count: result.length
+    }));
+  };
+  var setErrorText = function setErrorText(action, result) {
+    var key;
+    if (data.itemCount == 0) {
+      key = LOCALE$1.ERROR_STD;
+    } else if (data.itemCount === 1) {
+      key = LOCALE$1.ERROR_SINGLE;
+    } else {
+      key = LOCALE$1.ERROR_MULTI;
+    }
+    setText(localeService.create(key, {
+      actionCode: action,
+      itemCount: result.length
+    }));
   };
   var setProgress = function setProgress(index) {
     var percent = index * 100 / data.itemCount;
@@ -59837,7 +59952,7 @@ var ActionHandler = function ActionHandler(props) {
       }
       ;
       if (!props.isShowProgress && !props.isShowAfterAction && !props.isConfirm) {
-        close();
+        hideDialog();
       }
       ;
       var _temp2 = function () {
@@ -59858,6 +59973,16 @@ var ActionHandler = function ActionHandler(props) {
     }
   };
   var process = function process() {
+    try {
+      if (data.itemList.length) {
+        return processItemList();
+      }
+      return processAction();
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  var processItemList = function processItemList() {
     try {
       var _temp5 = function _temp5() {
         return {
@@ -59882,7 +60007,11 @@ var ActionHandler = function ActionHandler(props) {
           _interrupt = true;
           return;
         }
-        if (data.itemCount > 1) {
+        if (data.itemCount === 0) {
+          setText(localeService.create(LOCALE$1.PROGRESS_STD, {
+            actionCode: action
+          }));
+        } else if (data.itemCount > 1) {
           setText(localeService.create(LOCALE$1.PROGRESS_MULTI, {
             idx: _i + 1,
             itemCount: data.itemCount,
@@ -59906,6 +60035,7 @@ var ActionHandler = function ActionHandler(props) {
           setFailResult(_failResult);
           _success = false;
           setSuccess(false);
+          console.error(error);
         });
         if (_temp3 && _temp3.then) return _temp3.then(function () {});
       });
@@ -59914,6 +60044,35 @@ var ActionHandler = function ActionHandler(props) {
       return Promise.reject(e);
     }
   };
+  var processAction = function processAction() {
+    try {
+      var _temp7 = function _temp7() {
+        return {
+          success: _success2,
+          successResult: _successResult2,
+          failResult: _failResult2
+        };
+      };
+      var _successResult2 = [];
+      var _failResult2 = [];
+      var _success2 = true;
+      var _temp6 = _catch(function () {
+        return Promise.resolve(props.processItem({})).then(function (result) {
+          _successResult2.push([{}, result]);
+          setSuccessResult(_successResult2);
+        });
+      }, function (error) {
+        _failResult2.push([{}, error]);
+        setFailResult(_failResult2);
+        _success2 = false;
+        setSuccess(false);
+        console.error(error);
+      });
+      return Promise.resolve(_temp6 && _temp6.then ? _temp6.then(_temp7) : _temp7(_temp6));
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
   var onEnter = function onEnter() {
     if (!props.isShowProgress && !props.isShowAfterAction && !props.isConfirm) {
       window.document.body.click();
@@ -59936,7 +60095,7 @@ var ActionHandler = function ActionHandler(props) {
   };
   var close = function close(error, successResult, failResult) {
     if (isCloseEnabled) {
-      if ( props.onAfterActionClose) {
+      if (currentAction == actionMap$1.after && props.onAfterActionClose) {
         props.onAfterActionClose(error, successResult, failResult);
       }
       hideDialog();
@@ -60090,6 +60249,9 @@ var DropdownButton = function DropdownButton(props) {
   var dropItemList = props.itemList.filter(function (x) {
     return !x.isOverflow;
   });
+  var isShowImage = props.itemList.find(function (item) {
+    return !!item.imageUrl;
+  }) ? true : false;
   return React__default.createElement("div", {
     className: styles$b['vitro-dropdown-button'] + CTRL.SPACE + (props.className || CTRL.EMPTY)
   }, overflowItemList.map(function (item) {
@@ -60132,11 +60294,12 @@ var DropdownButton = function DropdownButton(props) {
       onClick: function onClick(e) {
         return x.onClick(x.value, e);
       }
+    }, isShowImage && React__default.createElement("div", {
+      className: styles$b['vitro-icon']
     }, x.imageUrl && React__default.createElement(Icon, {
       defaultUrl: x.imageUrl,
-      hoverUrl: x.imageHoverUrl,
-      className: styles$b['vitro-icon']
-    }), React__default.createElement("span", null, x.text));
+      hoverUrl: x.imageHoverUrl
+    })), React__default.createElement("span", null, x.text));
   }))));
 };
 
@@ -60241,7 +60404,7 @@ var TabGroupComponent = function TabGroupComponent(props) {
     }
   }, [currentTab, props.itemList]);
   return React__default.createElement("div", {
-    className: styles$c['vitro-tab'],
+    className: styles$c['vitro-tab'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY),
     ref: ref
   }, React__default.createElement(TabGroupHeader, {
     itemList: props.itemList,
@@ -63210,11 +63373,12 @@ var CommandMenuSubItem = function CommandMenuSubItem(props) {
   return React__default.createElement(DropdownItem$2, {
     onClick: onClick,
     toggle: props.toggle === false ? false : true
+  }, props.isShowImage && React__default.createElement("div", {
+    className: styles$u['vitro-icon']
   }, props.imageUrl && React__default.createElement(Icon, {
     defaultUrl: props.imageUrl,
-    hoverUrl: props.imageHoverUrl,
-    className: styles$u['vitro-icon']
-  }), React__default.createElement("span", null, props.text));
+    hoverUrl: props.imageHoverUrl
+  })), React__default.createElement("span", null, props.text));
 };
 
 var CommandMenuItemHeader = function CommandMenuItemHeader(props) {
@@ -63241,6 +63405,10 @@ var CommandMenuItemHeader = function CommandMenuItemHeader(props) {
 };
 
 var CommandMenuDropdownButton = function CommandMenuDropdownButton(props) {
+  var _props$itemList;
+  var isShowImage = (_props$itemList = props.itemList) !== null && _props$itemList !== void 0 && _props$itemList.find(function (item) {
+    return item.imageUrl;
+  }) ? true : false;
   return React__default.createElement(UncontrolledDropdown, {
     nav: true,
     inNavbar: true,
@@ -63254,7 +63422,9 @@ var CommandMenuDropdownButton = function CommandMenuDropdownButton(props) {
     return React__default.createElement(CommandMenuSubItem, Object.assign({
       toggle: props.toggle,
       key: i.text
-    }, i));
+    }, i, {
+      isShowImage: isShowImage
+    }));
   }), props.children));
 };
 
@@ -63532,9 +63702,9 @@ var Alert$1 = function Alert(props) {
   return React__default.createElement("div", {
     tabIndex: 1,
     onBlur: onFocusOut,
-    ref: ref
+    ref: ref,
+    className: className
   }, React__default.createElement(BootstrapAlert, {
-    className: className,
     variant: props.type,
     onClose: props.onClose
   }, React__default.createElement("div", {
@@ -63570,52 +63740,27 @@ var DialogComponent = function DialogComponent(props) {
   }, props.children);
 };
 
-var headerStyles = {"vitro-dialog-header":"_dialog-header_vitro-dialog-header_2W3GraU"};
+var styles$z = {"vitro-dialog-content":"_dialog-content_vitro-dialog-content_qQNWu6x"};
 
-var DialogHeader = function DialogHeader(props) {
-  return React__default.createElement("div", {
-    className: headerStyles['vitro-dialog-header']
-  }, props.title);
-};
-
-var dialogStyles = {"vitro-dialog":"_dialog_vitro-dialog_2NzcRZg"};
-
-var styles$z = {"vitro-dialog-button-close":"_dialog-button-close_vitro-dialog-button-close_1p27cEz","vitro-button-close":"_dialog-button-close_vitro-button-close_2BpzTR0"};
-
-var Dialog = function Dialog(props) {
-  var className = dialogStyles['vitro-dialog'];
-  var onClose = function onClose() {
-    if (props.onClose) {
-      props.onClose();
-    }
-  };
-  var onOutsideClick = function onOutsideClick(e) {
-    if (e.target && e.target.className === className) {
-      onClose();
-    }
-  };
+var DialogContent = function DialogContent(props) {
   return React__default.createElement("div", {
-    className: className,
-    onClick: onOutsideClick
-  }, React__default.createElement(DialogComponent, {
-    width: props.width,
-    height: props.height
-  }, props.isDismissible && React__default.createElement("button", {
-    className: styles$z['vitro-dialog-button-close'],
-    onClick: onClose
-  }), React__default.createElement(DialogHeader, {
-    title: props.title
-  }), props.children.length ? props.children.map(function (child) {
-    return React__default.cloneElement(child, _extends({}, props));
-  }) : React__default.cloneElement(props.children, _extends({}, props))));
+    className: styles$z['vitro-dialog-content'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY)
+  }, props.children);
 };
 
-var styles$A = {"vitro-dialog-content":"_dialog-content_vitro-dialog-content_qQNWu6x"};
+var styles$A = {"vitro-dialog-header":"_dialog-header_vitro-dialog-header_2W3GraU","vitro-title":"_dialog-header_vitro-title_2k8SPhE","vitro-description":"_dialog-header_vitro-description_Hiq51VI","vitro-icon":"_dialog-header_vitro-icon_3GtsVWO"};
 
-var DialogContent = function DialogContent(props) {
+var DialogHeader = function DialogHeader(props) {
   return React__default.createElement("div", {
-    className: styles$A['vitro-dialog-content']
-  }, props.children);
+    className: styles$A['vitro-dialog-header']
+  }, props.imageUrl && React__default.createElement(Icon, {
+    defaultUrl: props.imageUrl,
+    className: styles$A['vitro-icon']
+  }), React__default.createElement("div", null, React__default.createElement("h1", {
+    className: styles$A['vitro-title']
+  }, props.title), props.description && React__default.createElement("h2", {
+    className: styles$A['vitro-description']
+  }, props.description)));
 };
 
 var styles$B = {"vitro-dialog-button":"_dialog-button_vitro-dialog-button_1fQ5l22"};
@@ -63626,6 +63771,8 @@ var DialogButton = function DialogButton(props) {
   }));
 };
 
+var dialogButtonCloseStyles = {"vitro-dialog-button-close":"_dialog-button-close_vitro-dialog-button-close_1p27cEz","vitro-button-close":"_dialog-button-close_vitro-button-close_2BpzTR0"};
+
 var DialogCloseButton = function DialogCloseButton(props) {
   React.useEffect(function () {
     window.document.addEventListener(exports.EVENT.KEYDOWN, escFunction, false);
@@ -63642,7 +63789,7 @@ var DialogCloseButton = function DialogCloseButton(props) {
     onClick: props.onClose,
     text: props.text,
     isDisabled: props.isDisabled,
-    className: styles$z['vitro-button-close']
+    className: dialogButtonCloseStyles['vitro-button-close']
   });
 };
 
@@ -63656,18 +63803,77 @@ var LOCALE$5;
 var styles$C = {"vitro-dialog-footer":"_dialog-footer_vitro-dialog-footer_2vUQ3aG"};
 
 var DialogFooter = function DialogFooter(props) {
+  var _props$buttonList, _props$buttonList2;
   var localeService = inversifyReact.useInjection(SERVICE.LOCALE);
-  var labelClose = props.labelClose || localeService.create(props.onActionClick ? LOCALE$5.ACTION_CANCEL : LOCALE$5.ACTION_CLOSE);
-  var labelAction = props.labelAction || localeService.create(LOCALE$5.ACTION_SAVE);
+  var labelClose = props.labelClose || localeService.create((_props$buttonList = props.buttonList) !== null && _props$buttonList !== void 0 && _props$buttonList.length ? LOCALE$5.ACTION_CANCEL : LOCALE$5.ACTION_CLOSE);
+  var onClose = function onClose() {
+    if (props.onClose) {
+      props.onClose(props.dialog);
+    }
+  };
   return React__default.createElement("div", {
     className: styles$C['vitro-dialog-footer']
-  }, props.children, props.onActionClick && React__default.createElement(DialogButton, {
-    text: labelAction,
-    onClick: props.onActionClick
-  }), props.isDismissible && React__default.createElement(DialogCloseButton, {
+  }, props.isDismissible && props.onClose && React__default.createElement(DialogCloseButton, {
     text: labelClose,
-    onClose: props.onClose ? props.onClose : function () {}
-  }));
+    isDisabled: !props.isDismissible,
+    onClose: onClose
+  }), (_props$buttonList2 = props.buttonList) !== null && _props$buttonList2 !== void 0 && _props$buttonList2.length ? props.buttonList.map(function (button) {
+    return React__default.createElement(DialogButton, {
+      text: button.text,
+      onClick: function onClick() {
+        return button.onClick(props.dialog);
+      },
+      isDisabled: button.isDisabled,
+      className: button.className
+    });
+  }) : null);
+};
+
+var dialogStyles = {"vitro-dialog":"_dialog_vitro-dialog_2NzcRZg"};
+
+var Dialog = function Dialog(props) {
+  var _props$buttonList;
+  var _useState = React.useState(null),
+    component = _useState[0],
+    setComponent = _useState[1];
+  var className = dialogStyles['vitro-dialog'];
+  var showFooter = !props.isHideFooter && (((_props$buttonList = props.buttonList) === null || _props$buttonList === void 0 ? void 0 : _props$buttonList.length) || props.onClose);
+  React.useEffect(function () {
+    if (props.content) {
+      var c = React__default.createElement(props.content.component, props.content.props);
+      setComponent(c);
+    }
+  }, [props.content]);
+  var onClose = function onClose() {
+    if (props.onClose) {
+      props.onClose(props.dialog);
+    }
+  };
+  var onOutsideClick = function onOutsideClick(e) {
+    if (e.target && e.target.className === className) {
+      onClose();
+    }
+  };
+  return React__default.createElement("div", {
+    className: className,
+    onClick: onOutsideClick
+  }, React__default.createElement(DialogComponent, {
+    width: props.width,
+    height: props.height
+  }, props.isDismissible && React__default.createElement("button", {
+    className: dialogButtonCloseStyles['vitro-dialog-button-close'],
+    onClick: onClose
+  }), React__default.createElement(DialogHeader, {
+    title: props.title,
+    description: props.description,
+    imageUrl: props.imageUrl
+  }), component && React__default.createElement(DialogContent, null, component), props.children, showFooter ? React__default.createElement(DialogFooter, {
+    dialog: props.dialog,
+    buttonList: props.buttonList,
+    labelClose: props.labelClose,
+    onClose: props.onClose,
+    isDismissible: props.isDismissible
+  }) : null));
 };
 
 var styles$D = {"vitro-user-profile":"_user-profile_vitro-user-profile_11XpBoQ","vitro-dropdown-item":"_user-profile_vitro-dropdown-item_dSErsta"};
@@ -63795,6 +64001,47 @@ var ActivityItem = function ActivityItem(props) {
   })));
 };
 
+var styles$G = {"vitro-message-input":"_message-input_vitro-message-input_3MkcjWD","vitro-control":"_message-input_vitro-control_1PUSjq9","vitro-button-send":"_message-input_vitro-button-send_1vktQrZ"};
+
+var MessageInput = function MessageInput(props) {
+  var inputRef = React.useRef(null);
+  var onEnter = function onEnter() {
+    if (inputRef.current) {
+      props.onSubmit(inputRef.current.value);
+      inputRef.current.value = CTRL.EMPTY;
+    }
+  };
+  var onKeyDown = function onKeyDown(e) {
+    if (e.keyCode === 13) {
+      e.preventDefault();
+      onEnter();
+    }
+  };
+  var onChange = function onChange(e) {
+    if (props.onChange) {
+      props.onChange(e, inputRef.current.value);
+    }
+  };
+  return React__default.createElement("div", {
+    className: styles$G['vitro-message-input'],
+    onDrop: props.onDrop
+  }, React__default.createElement(Avatar, {
+    userName: props.userName,
+    image: props.userImageUrl
+  }), React__default.createElement("div", {
+    className: styles$G['vitro-control']
+  }, React__default.createElement("textarea", {
+    ref: inputRef,
+    disabled: props.isDisabled,
+    placeholder: props.placeholder,
+    onChange: onChange,
+    onKeyDown: onKeyDown
+  }), props.children, React__default.createElement("button", {
+    onClick: onEnter,
+    className: styles$G['vitro-button-send']
+  })));
+};
+
 exports.ACTION_HANDLER = ActionHandlerConstants;
 exports.ALERT = AlertConstants;
 exports.ActionHandler = ActionHandler;
@@ -63824,6 +64071,7 @@ exports.IssueTile = IssueTile;
 exports.Label = Label;
 exports.Login = Login;
 exports.LookupPicker = LookupPicker;
+exports.MessageInput = MessageInput;
 exports.MicroFrontend = MicroFrontend;
 exports.PdfViewer = PdfViewer;
 exports.ScrollBar = ScrollBar;