@vitrosoftware/common-ui-ts 1.1.117 → 1.1.119

package/dist/index.js

@@ -475,11 +475,15 @@ var ScrollBar = function ScrollBar(props) {
       }
     };
   }, []);
+  var onWheel = function onWheel(e) {
+    e.stopPropagation();
+  };
   return React__default.createElement("div", {
     ref: ref,
     className: props.className || CTRL.EMPTY
   }, React__default.createElement("div", {
     ref: props.contentRef,
+    onWheel: onWheel,
     className: styles$1['vitro-scrollbar-content'] + (props.contentClassName ? CTRL.SPACE + props.contentClassName : CTRL.EMPTY)
   }, element && props.children));
 };
@@ -21326,6 +21330,12 @@ var TreeGridTableViewContextImpl = /*#__PURE__*/function () {
   _proto.showPopup = function showPopup(menu, func) {
     this.grid.ShowPopup(menu, func);
   };
+  _proto.getShownRows = function getShownRows() {
+    return this.grid.GetShownRows();
+  };
+  _proto.getShownCols = function getShownCols(section) {
+    return this.grid.GetShownCols(section);
+  };
   _createClass(TreeGridTableViewContextImpl, [{
     key: "columnList",
     get: function get() {
@@ -21390,6 +21400,11 @@ var TreeGridTableViewContextImpl = /*#__PURE__*/function () {
     get: function get() {
       return this.grid.Rows.Header;
     }
+  }, {
+    key: "mainTag",
+    get: function get() {
+      return this.grid.MainTag;
+    }
   }]);
   return TreeGridTableViewContextImpl;
 }();
@@ -21436,6 +21451,7 @@ var EVENT$1;
   EVENT["ON_INIT"] = "OnInit";
   EVENT["ON_CUSTOM_AJAX"] = "OnCustomAjax";
   EVENT["ON_CLICK_SIDE_BUTTON"] = "OnClickSideButton";
+  EVENT["ON_SCROLL"] = "OnScroll";
 })(EVENT$1 || (EVENT$1 = {}));
 var URL;
 (function (URL) {
@@ -22387,10 +22403,15 @@ var PLACEMENT;
   PLACEMENT["RIGHT"] = "right";
   PLACEMENT["BOTTOM"] = "bottom";
 })(PLACEMENT || (PLACEMENT = {}));
+var TRIGGER;
+(function (TRIGGER) {
+  TRIGGER["HOVER"] = "hover";
+})(TRIGGER || (TRIGGER = {}));
 
 var TooltipConstants = {
     __proto__: null,
-    get PLACEMENT () { return PLACEMENT; }
+    get PLACEMENT () { return PLACEMENT; },
+    get TRIGGER () { return TRIGGER; }
 };
 
 var classnames = createCommonjsModule(function (module) {
@@ -60219,8 +60240,11 @@ var Tooltip$1 = function Tooltip(props) {
       hide: 0
     },
     show: props.isShow,
+    flip: props.isFlip,
+    trigger: TRIGGER.HOVER,
     overlay: React__default.createElement(TooltipComponent, {
-      className: styles$8['vitro-tooltip']
+      className: styles$8['vitro-tooltip'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY),
+      style: props.style
     }, props.text)
   }, props.children);
 };
@@ -60416,6 +60440,9 @@ var ExpandCollapseButton = function ExpandCollapseButton(props) {
   React.useEffect(function () {
     setIsExpanded(props.isExpanded || false);
   }, [props.isExpanded]);
+  var onMouseDown = function onMouseDown(e) {
+    e.preventDefault();
+  };
   var onClick = function onClick(e) {
     e.stopPropagation();
     setIsExpanded(!isExpanded);
@@ -60423,6 +60450,7 @@ var ExpandCollapseButton = function ExpandCollapseButton(props) {
   };
   return React__default.createElement("button", {
     onClick: onClick,
+    onMouseDown: onMouseDown,
     className: styles$g['vitro-expand-collapse-button'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY)
   }, props.expandImage && props.collapseImage ? React__default.createElement(React__default.Fragment, null, isExpanded ? props.collapseImage : props.expandImage) : React__default.createElement("div", {
     className: isExpanded ? styles$g['vitro-expanded'] : styles$g['vitro-collapsed']
@@ -61177,10 +61205,13 @@ var DropdownButton = function DropdownButton(props) {
     ref: buttonRef
   }, props.title && React__default.createElement("span", {
     className: styles$m['vitro-title']
-  }, props.title), React__default.createElement("span", {
+  }, props.title), props.imageUrl ? React__default.createElement(Image, {
+    defaultUrl: props.imageUrl,
+    hoverUrl: props.imageHoverUrl
+  }) : React__default.createElement("span", {
     className: styles$m['vitro-dropdown-icon']
   })), React__default.createElement(BootstrapDropdown.Menu, {
-    renderOnMount: true,
+    renderOnMount: false,
     flip: props.isFlip !== false,
     style: props.menuStyle || {}
   }, React__default.createElement(ScrollBar, null, itemList.map(function (x) {
@@ -61522,7 +61553,7 @@ var AUTOCOMPLETE;
   AUTOCOMPLETE["OFF"] = "off";
 })(AUTOCOMPLETE || (AUTOCOMPLETE = {}));
 
-var styles$s = {"vitro-control":"_input_vitro-control_1DmPFkF","vitro-read-only":"_input_vitro-read-only_3f-cBbK","vitro-label":"_input_vitro-label_2XBESiY","vitro-focus":"_input_vitro-focus_1txynr8","vitro-error":"_input_vitro-error_1T3dLzB","vitro-left-label":"_input_vitro-left-label_D9Fpvpd","vitro-error-text":"_input_vitro-error-text_QpZK56k","vitro-button-copy":"_input_vitro-button-copy_jjyktjx"};
+var styles$s = {"vitro-control":"_input_vitro-control_1DmPFkF","vitro-read-only":"_input_vitro-read-only_3f-cBbK","vitro-label":"_input_vitro-label_2XBESiY","vitro-focus":"_input_vitro-focus_1txynr8","vitro-error":"_input_vitro-error_1T3dLzB","vitro-left-label":"_input_vitro-left-label_D9Fpvpd","vitro-error-text":"_input_vitro-error-text_QpZK56k","vitro-button-copy":"_input_vitro-button-copy_jjyktjx","vitro-tooltip":"_input_vitro-tooltip_2DcJtbX"};
 
 var Input = React.forwardRef(function (props, ref) {
   var control;
@@ -61535,11 +61566,37 @@ var Input = React.forwardRef(function (props, ref) {
   var _useState3 = React.useState(CTRL.EMPTY),
     state = _useState3[0],
     setState = _useState3[1];
+  var _useState4 = React.useState(true),
+    isShowTooltip = _useState4[0],
+    setIsShowTooltip = _useState4[1];
   var inputRef = React.useRef(null);
+  var resizeObserver = new window.ResizeObserver(function (entries) {
+    for (var _iterator = _createForOfIteratorHelperLoose(entries), _step; !(_step = _iterator()).done;) {
+      var entry = _step.value;
+      if (entry.target === inputRef.current) {
+        setIsShowTooltip(getIsShowTooltip());
+      }
+    }
+  });
+  React.useEffect(function () {
+    if (inputRef && inputRef.current && !props.isMultiline) {
+      resizeObserver.observe(inputRef.current);
+    }
+  }, [inputRef]);
+  React.useEffect(function () {
+    return function () {
+      resizeObserver.disconnect();
+    };
+  }, []);
   React.useEffect(function () {
     var value = props.value ? props.value : CTRL.EMPTY;
     setInputValue(value);
   }, [props.value]);
+  React.useEffect(function () {
+    if (!state) {
+      setIsShowTooltip(getIsShowTooltip());
+    }
+  }, [inputValue]);
   React.useEffect(function () {
     setState(props.errorMessage || props.isError ? styles$s['vitro-error'] : CTRL.EMPTY);
   }, [props.errorMessage, props.isError]);
@@ -61550,6 +61607,11 @@ var Input = React.forwardRef(function (props, ref) {
     if (props.maxHeight) jsonStyle.maxHeight = props.maxHeight + UNIT.PX;
     setStyle(jsonStyle);
   }, [props.height, props.minHeight, props.maxHeight]);
+  React.useEffect(function () {
+    if (state === styles$s['vitro-focus'] && inputRef.current && document.activeElement !== inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [state]);
   React.useImperativeHandle(ref, function () {
     return {
       focus: function focus() {
@@ -61576,12 +61638,16 @@ var Input = React.forwardRef(function (props, ref) {
   };
   var onBlur = function onBlur(e) {
     setState(props.errorMessage || props.isError ? styles$s['vitro-error'] : CTRL.EMPTY);
+    setIsShowTooltip(getIsShowTooltip());
     if (props.onBlur) {
       props.onBlur(e);
     }
   };
   var onFocus = function onFocus(e) {
+    var _inputRef$current;
     setState(styles$s['vitro-focus']);
+    setIsShowTooltip(false);
+    (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
     if (props.onFocus) {
       props.onFocus(e);
     }
@@ -61609,6 +61675,13 @@ var Input = React.forwardRef(function (props, ref) {
     }
     window.removeEventListener(exports.EVENT.MOUSEUP, remainHeight);
   };
+  var getIsShowTooltip = function getIsShowTooltip() {
+    if (inputRef.current && inputRef.current.scrollWidth > inputRef.current.clientWidth) {
+      return true;
+    } else {
+      return false;
+    }
+  };
   if (props.isMultiline) {
     control = React__default.createElement("textarea", {
       ref: inputRef,
@@ -61663,7 +61736,12 @@ var Input = React.forwardRef(function (props, ref) {
     classList.push(state);
     return classList.join(CTRL.SPACE);
   };
-  return React__default.createElement("div", {
+  return React__default.createElement(Tooltip$1, {
+    text: props.isMultiline || isShowTooltip === false ? CTRL.EMPTY : inputValue,
+    placement: PLACEMENT.BOTTOM,
+    isShow: isShowTooltip === false ? false : undefined,
+    className: styles$s['vitro-tooltip']
+  }, React__default.createElement("div", {
     className: getClassName()
   }, props.label && React__default.createElement(Label, {
     text: props.label,
@@ -61675,7 +61753,7 @@ var Input = React.forwardRef(function (props, ref) {
     onClick: copyValue
   }) : null, props.children, props.errorMessage && React__default.createElement("span", {
     className: styles$s['vitro-error-text']
-  }, props.errorMessage));
+  }, props.errorMessage)));
 });
 
 var styles$t = {"vitro-issue-tile-footer":"_issue-tile-footer_vitro-issue-tile-footer_KtHOieL","vitro-issue-tile-status":"_issue-tile-footer_vitro-issue-tile-status_3OjC56L","vitro-status-color":"_issue-tile-footer_vitro-status-color_hhLb22J","vitro-button-more":"_issue-tile-footer_vitro-button-more_1RyVAeR"};
@@ -62025,7 +62103,7 @@ var Viewer = function Viewer(props) {
 };
 
 var name = "@vitrosoftware/common-ui-ts";
-var version$1 = "1.1.117";
+var version$1 = "1.1.119";
 var description = "vitro software common ui ts";
 var author = "";
 var license = "MIT";
@@ -63165,26 +63243,70 @@ var TimePicker = React.forwardRef(function (props, ref) {
   }, props.errorMessage));
 });
 
-var styles$L = {"vitro-selected-item-multi":"_lookup-picker-selected-item_vitro-selected-item-multi_bzL7ugZ","vitro-selected-item":"_lookup-picker-selected-item_vitro-selected-item_hw-euth","vitro-button-close":"_lookup-picker-selected-item_vitro-button-close_1SRnr_0"};
+var styles$L = {"vitro-flex-box":"_flex-box_vitro-flex-box_3jGTD6k"};
+
+var FlexBox = React.forwardRef(function (props, ref) {
+  return React__default.createElement("div", Object.assign({}, props, {
+    ref: ref,
+    style: props.gap ? {
+      gridGap: props.gap + UNIT.PX
+    } : {},
+    className: styles$L['vitro-flex-box'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY)
+  }), props.children);
+});
+
+var styles$M = {"vitro-selected-item-multi":"_lookup-picker-selected-item_vitro-selected-item-multi_bzL7ugZ","vitro-selected-item":"_lookup-picker-selected-item_vitro-selected-item_hw-euth","vitro-button-close":"_lookup-picker-selected-item_vitro-button-close_1SRnr_0"};
+
+var styles$N = {"vitro-lookup-picker":"_lookup-picker_vitro-lookup-picker_1aXYQEG","vitro-content":"_lookup-picker_vitro-content_37L0slb","vitro-lookup-picker-multi-select":"_lookup-picker_vitro-lookup-picker-multi-select_3Lkq2tk","vitro-read-only":"_lookup-picker_vitro-read-only_32NOdGB","vitro-label":"_lookup-picker_vitro-label_2QoJkUz","vitro-focus":"_lookup-picker_vitro-focus_2UGpxXD","vitro-error":"_lookup-picker_vitro-error_dF7iopC","vitro-error-text":"_lookup-picker_vitro-error-text_273lqvD","vitro-button-copy":"_lookup-picker_vitro-button-copy_2UIHHZD","vitro-right":"_lookup-picker_vitro-right_1XFsL1w","vitro-button-close":"_lookup-picker_vitro-button-close_3_Qndrj","vitro-button-collapse-up":"_lookup-picker_vitro-button-collapse-up_3i0OJub","vitro-button-collapse-bottom":"_lookup-picker_vitro-button-collapse-bottom_3o0Pl83","vitro-tooltip":"_lookup-picker_vitro-tooltip_2a12Z4P"};
 
 var htmlValueStyles = {"vitro-item-html-value":"_lookup-picker-html-value_vitro-item-html-value_2QBoTey"};
 
+var SelectedValueListItem = function SelectedValueListItem(props) {
+  var _useState = React.useState(CTRL.EMPTY),
+    tooltipText = _useState[0],
+    setTooltipText = _useState[1];
+  var className = props.isMultiSelect ? styles$M['vitro-selected-item-multi'] : styles$M['vitro-selected-item'];
+  var title = props.selectedValueTemplate(props.item);
+  React.useEffect(function () {
+    if (props.isMultiSelect) {
+      setTooltipText(title);
+    } else {
+      props.setTooltipText(title);
+    }
+  }, []);
+  return React__default.createElement(Tooltip$1, {
+    text: tooltipText,
+    placement: PLACEMENT.BOTTOM,
+    className: styles$N['vitro-tooltip'],
+    isFlip: true
+  }, React__default.createElement("div", {
+    className: className
+  }, props.getHtmlValue && props.getHtmlValue(props.item) ? React__default.createElement(FlexBox, {
+    className: htmlValueStyles['vitro-item-html-value']
+  }, props.getHtmlValue(props.item)) : null, React__default.createElement("span", null, title), props.isMultiSelect && React__default.createElement(ImageButton, {
+    onClick: function onClick() {
+      return props.onOptionValueDelete(props.item.id);
+    },
+    className: styles$M['vitro-button-close']
+  })));
+};
+
 var SelectedValueList = function SelectedValueList(props) {
-  var className = props.isMultiSelect ? styles$L['vitro-selected-item-multi'] : styles$L['vitro-selected-item'];
+  React.useEffect(function () {
+    return function () {
+      props.setTooltipText(CTRL.EMPTY);
+    };
+  }, []);
   return React__default.createElement(React__default.Fragment, null, props.list.map(function (x) {
-    var title = props.selectedValueTemplate(x);
-    return React__default.createElement("div", {
+    return React__default.createElement(SelectedValueListItem, {
       key: x.id,
-      className: className,
-      title: title
-    }, props.getHtmlValue && props.getHtmlValue(x) ? React__default.createElement("div", {
-      className: htmlValueStyles['vitro-item-html-value']
-    }, props.getHtmlValue(x)) : null, React__default.createElement("span", null, title), props.isMultiSelect && React__default.createElement("div", {
-      onClick: function onClick() {
-        return props.onOptionValueDelete(x.id);
-      },
-      className: styles$L['vitro-button-close']
-    }));
+      item: x,
+      isMultiSelect: props.isMultiSelect,
+      selectedValueTemplate: props.selectedValueTemplate,
+      onOptionValueDelete: props.onOptionValueDelete,
+      getHtmlValue: props.getHtmlValue,
+      setTooltipText: props.setTooltipText
+    });
   }));
 };
 
@@ -63227,7 +63349,7 @@ var ValueList = function ValueList(props) {
     if (scrollableElement && scrollableElement.scrollTop === 0) {
       scrollableElement.scrollTop = 1;
     }
-  });
+  }, []);
   React.useEffect(function () {
     if (props.isFlip) {
       setStyle(null);
@@ -63246,22 +63368,34 @@ var ValueList = function ValueList(props) {
     }
   }, [props.isVisible]);
   var createDisplayValue = function createDisplayValue(item) {
-    return props.inputValue ? props.filterValueTemplate(item).replace(reg, function (str) {
+    var _props$filterValueTem;
+    return props.inputValue ? (_props$filterValueTem = props.filterValueTemplate(item)) === null || _props$filterValueTem === void 0 ? void 0 : _props$filterValueTem.replace(reg, function (str) {
       return "<span class=" + valueListStyles['vitro-keyword-highlight'] + ">" + str + '</span>';
     }) : props.filterValueTemplate(item);
   };
+  var sortValueList = function sortValueList(a, b) {
+    var _props$filterValueTem2, _props$filterValueTem3;
+    var indexA = (_props$filterValueTem2 = props.filterValueTemplate(a)) === null || _props$filterValueTem2 === void 0 ? void 0 : _props$filterValueTem2.search(reg);
+    var indexB = (_props$filterValueTem3 = props.filterValueTemplate(b)) === null || _props$filterValueTem3 === void 0 ? void 0 : _props$filterValueTem3.search(reg);
+    if (indexA < indexB) {
+      return -1;
+    } else if (indexA > indexB) {
+      return 1;
+    }
+    return 0;
+  };
   return React__default.createElement(Overlay$1, {
     show: props.isVisible,
     target: props.contentRef,
     container: props.isFlip ? props.containerRef : null,
-    placement: exports.PLACEMENT.AUTO,
+    placement: props.placement || exports.PLACEMENT.AUTO,
     flip: props.isFlip ? true : false
   }, React__default.createElement("div", {
     style: style ? style : {},
     className: valueListStyles['vitro-value-list']
   }, React__default.createElement(ScrollBar, {
     onInit: setScrollableElement
-  }, props.isPending && React__default.createElement(Progress, null), !props.isPending && React__default.createElement(React__default.Fragment, null, props.list.length > 0 ? props.list.map(function (x) {
+  }, props.isPending && React__default.createElement(Progress, null), !props.isPending && React__default.createElement(React__default.Fragment, null, props.list.length > 0 ? props.list.sort(sortValueList).map(function (x) {
     return React__default.createElement(ValueListItem, {
       item: x,
       onSelect: props.onOptionValueSelect,
@@ -63278,8 +63412,6 @@ var LOCALE$5;
   LOCALE["PLACEHOLDER_EMPTY"] = "app.common.lookupPicker.empty";
 })(LOCALE$5 || (LOCALE$5 = {}));
 
-var styles$M = {"vitro-lookup-picker":"_lookup-picker_vitro-lookup-picker_1aXYQEG","vitro-content":"_lookup-picker_vitro-content_37L0slb","vitro-lookup-picker-multi-select":"_lookup-picker_vitro-lookup-picker-multi-select_3Lkq2tk","vitro-read-only":"_lookup-picker_vitro-read-only_32NOdGB","vitro-label":"_lookup-picker_vitro-label_2QoJkUz","vitro-focus":"_lookup-picker_vitro-focus_2UGpxXD","vitro-error":"_lookup-picker_vitro-error_dF7iopC","vitro-error-text":"_lookup-picker_vitro-error-text_273lqvD","vitro-button-copy":"_lookup-picker_vitro-button-copy_2UIHHZD","vitro-right":"_lookup-picker_vitro-right_1XFsL1w","vitro-button-close":"_lookup-picker_vitro-button-close_3_Qndrj","vitro-button-collapse-up":"_lookup-picker_vitro-button-collapse-up_3i0OJub","vitro-button-collapse-bottom":"_lookup-picker_vitro-button-collapse-bottom_3o0Pl83"};
-
 var $$5 = window.$;
 var LookupPicker = React.forwardRef(function (props, ref) {
   var createDefaultSelectedValueList = props.selectedValueList ? props.selectedValueList : props.selectedValue ? [props.selectedValue] : [];
@@ -63301,14 +63433,18 @@ var LookupPicker = React.forwardRef(function (props, ref) {
   var _useState6 = React.useState(null),
     valueListRequestToken = _useState6[0],
     setValueListRequestToken = _useState6[1];
-  var _useState7 = React.useState(props.isDisabled || props.isReadOnly ? styles$M['vitro-read-only'] : CTRL.EMPTY),
+  var _useState7 = React.useState(props.isDisabled || props.isReadOnly ? styles$N['vitro-read-only'] : CTRL.EMPTY),
     state = _useState7[0],
     setState = _useState7[1];
+  var _useState8 = React.useState(CTRL.EMPTY),
+    tooltipText = _useState8[0],
+    setTooltipText = _useState8[1];
   var localeService = props.container ? props.container.get(SERVICE.LOCALE) : inversifyReact.useInjection(SERVICE.LOCALE);
   var isEditable = !props.isDisabled && !props.isReadOnly;
   var inputRef = React.useRef(null);
   var contentRef = React.useRef(null);
   var containerRef = React.useRef(null);
+  var isShowTooltipRef = React.useRef(true);
   var updatePending = function updatePending(valueList) {
     return setPending(valueList ? false : true);
   };
@@ -63327,6 +63463,7 @@ var LookupPicker = React.forwardRef(function (props, ref) {
   }, [props.selectedValueList]);
   React.useEffect(function () {
     if (valueListVisible && inputRef && inputRef.current) {
+      isShowTooltipRef.current = false;
       inputRef.current.focus();
       if (props.isReadOnly) {
         if (props.valueList) {
@@ -63396,8 +63533,17 @@ var LookupPicker = React.forwardRef(function (props, ref) {
     }
   }, [selectedValueList]);
   React.useEffect(function () {
-    setState(props.errorMessage && !valueListVisible ? styles$M['vitro-error'] : valueListVisible ? state : CTRL.EMPTY);
+    setState(props.errorMessage && !valueListVisible ? styles$N['vitro-error'] : valueListVisible ? state : CTRL.EMPTY);
   }, [props.errorMessage]);
+  React.useEffect(function () {
+    if (inputRef.current) {
+      if (state === styles$N['vitro-focus'] && document.activeElement !== inputRef.current && !tooltipText) {
+        inputRef.current.focus();
+      } else if (state !== styles$N['vitro-focus']) {
+        isShowTooltipRef.current = true;
+      }
+    }
+  }, [state, tooltipText]);
   var updateFilteredValueList = function updateFilteredValueList(valueList) {
     var availableValueList = inputValue ? filteredValueList : valueList;
     if (inputValue && inputValue.length >= (props.charCount || 0)) {
@@ -63418,9 +63564,11 @@ var LookupPicker = React.forwardRef(function (props, ref) {
     return props.selectedValueTemplate ? props.selectedValueTemplate(value) : value.title;
   };
   var onChange = function onChange(e) {
-    setState(styles$M['vitro-focus']);
+    var _inputRef$current;
+    setState(styles$N['vitro-focus']);
     setValueListVisible(true);
     setInputValue(e.target.value);
+    (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
   };
   var onKeyDown = function onKeyDown(e) {
     var keyBoardBackSpace = 8;
@@ -63462,8 +63610,8 @@ var LookupPicker = React.forwardRef(function (props, ref) {
   };
   var onOptionValueDelete = function onOptionValueDelete(id) {
     if (!props.isDisabled) {
-      var _inputRef$current;
-      (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
+      var _inputRef$current2;
+      (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.focus();
       var newSelectedValueList = id ? selectedValueList.filter(function (x) {
         return x.id !== id;
       }) : [];
@@ -63485,12 +63633,15 @@ var LookupPicker = React.forwardRef(function (props, ref) {
           return x;
         }), props.name);
       }
-      setState(props.errorMessage ? styles$M['vitro-error'] : CTRL.EMPTY);
+      setState(props.errorMessage ? styles$N['vitro-error'] : CTRL.EMPTY);
     }
   };
   var onFocus = function onFocus(e) {
-    setState(styles$M['vitro-focus']);
+    var _inputRef$current3;
+    isShowTooltipRef.current = false;
+    setState(styles$N['vitro-focus']);
     setValueListVisible(true);
+    (_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 ? void 0 : _inputRef$current3.focus();
     if (props.onFocus) {
       props.onFocus(e);
     }
@@ -63507,12 +63658,12 @@ var LookupPicker = React.forwardRef(function (props, ref) {
     }).join(CTRL.COMMA));
   };
   var getClassName = function getClassName() {
-    var classList = [styles$M['vitro-lookup-picker'], props.className];
+    var classList = [styles$N['vitro-lookup-picker'], props.className];
     if (props.isDisabled || props.isReadOnly) {
-      classList.push(styles$M['vitro-read-only']);
+      classList.push(styles$N['vitro-read-only']);
     }
     if (props.isMultiSelect) {
-      classList.push(styles$M['vitro-lookup-picker-multi-select']);
+      classList.push(styles$N['vitro-lookup-picker-multi-select']);
     }
     classList.push(state);
     return classList.join(CTRL.SPACE);
@@ -63523,7 +63674,13 @@ var LookupPicker = React.forwardRef(function (props, ref) {
     }
     return null;
   };
-  return React__default.createElement("div", {
+  return React__default.createElement(Tooltip$1, {
+    text: tooltipText,
+    placement: PLACEMENT.BOTTOM,
+    className: styles$N['vitro-tooltip'],
+    isShow: isShowTooltipRef.current === false ? false : undefined,
+    isFlip: true
+  }, React__default.createElement("div", {
     className: getClassName(),
     tabIndex: 1,
     onBlur: onFocusOut,
@@ -63532,9 +63689,9 @@ var LookupPicker = React.forwardRef(function (props, ref) {
     text: props.label,
     isRequired: props.isRequired,
     width: props.labelWidth,
-    className: styles$M['vitro-label']
+    className: styles$N['vitro-label']
   }), React__default.createElement("div", {
-    className: styles$M['vitro-content'],
+    className: styles$N['vitro-content'],
     onClick: onFocus,
     ref: contentRef
   }, selectedValueList && selectedValueList.length > 0 && (props.isMultiSelect ? true : inputValue.length === 0) ? React__default.createElement(SelectedValueList, {
@@ -63542,7 +63699,8 @@ var LookupPicker = React.forwardRef(function (props, ref) {
     onOptionValueDelete: onOptionValueDelete,
     selectedValueTemplate: selectedValueTemplate,
     isMultiSelect: props.isMultiSelect,
-    getHtmlValue: getHtmlValue
+    getHtmlValue: getHtmlValue,
+    setTooltipText: setTooltipText
   }) : !valueListVisible && React__default.createElement(React__default.Fragment, null, props.placeholder), isEditable && React__default.createElement("input", {
     ref: inputRef,
     value: inputValue,
@@ -63550,9 +63708,9 @@ var LookupPicker = React.forwardRef(function (props, ref) {
     onChange: onChange,
     onFocus: onFocus
   }), !props.isDisabled && props.children, React__default.createElement("div", {
-    className: styles$M['vitro-right']
+    className: styles$N['vitro-right']
   }, props.isShowButtonClear !== false && !props.isMultiSelect && selectedValueList && selectedValueList.length > 0 && isEditable && React__default.createElement("div", {
-    className: styles$M['vitro-button-close'],
+    className: styles$N['vitro-button-close'],
     onClick: function onClick() {
       return onOptionValueDelete();
     }
@@ -63560,9 +63718,9 @@ var LookupPicker = React.forwardRef(function (props, ref) {
     onClick: function onClick() {
       return onCollapseButtonClick(valueListVisible);
     },
-    className: valueListVisible ? styles$M['vitro-button-collapse-up'] : styles$M['vitro-button-collapse-bottom']
+    className: valueListVisible ? styles$N['vitro-button-collapse-up'] : styles$N['vitro-button-collapse-bottom']
   }), props.isReadOnly ? React__default.createElement("span", {
-    className: styles$M['vitro-button-copy'],
+    className: styles$N['vitro-button-copy'],
     onClick: copyValue
   }) : null)), isEditable && (!props.filterMinLength || props.filterMinLength <= inputValue.length) && React__default.createElement(ValueList, {
     isPending: pending,
@@ -63575,44 +63733,45 @@ var LookupPicker = React.forwardRef(function (props, ref) {
     containerRef: containerRef.current,
     isVisible: valueListVisible,
     emptyPlaceholder: props.emptyPlaceholder || localeService.create(LOCALE$5.PLACEHOLDER_EMPTY),
-    getHtmlValue: getHtmlValue
+    getHtmlValue: getHtmlValue,
+    placement: props.dropdownPlacement
   }), props.errorMessage && React__default.createElement("span", {
-    className: styles$M['vitro-error-text']
-  }, props.errorMessage));
+    className: styles$N['vitro-error-text']
+  }, props.errorMessage)));
 });
 
-var styles$N = {"vitro-command-menu":"_command-menu_vitro-command-menu_l82vtIh"};
+var styles$O = {"vitro-command-menu":"_command-menu_vitro-command-menu_l82vtIh"};
 
 var CommandMenu = function CommandMenu(props) {
   return React__default.createElement("nav", {
-    className: styles$N['vitro-command-menu'] + CTRL.SPACE + 'navbar'
+    className: styles$O['vitro-command-menu'] + CTRL.SPACE + 'navbar'
   }, React__default.createElement("ul", {
     className: 'nav'
   }, props.children));
 };
 
-var styles$O = {"vitro-command-menu-button":"_command-menu-button_vitro-command-menu-button_2IiXVbP","vitro-image":"_command-menu-button_vitro-image_27yILgG"};
+var styles$P = {"vitro-command-menu-button":"_command-menu-button_vitro-command-menu-button_2IiXVbP","vitro-image":"_command-menu-button_vitro-image_27yILgG"};
 
 var CommandMenuButton = function CommandMenuButton(props) {
   return React__default.createElement("li", null, React__default.createElement(Button$2, Object.assign({
-    className: styles$O['vitro-command-menu-button'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY),
-    imageClassName: styles$O['vitro-image']
+    className: styles$P['vitro-command-menu-button'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY),
+    imageClassName: styles$P['vitro-image']
   }, props)));
 };
 
 var itemStyles = {"vitro-item":"_command-menu-item_vitro-item_2pVhk23"};
 
-var styles$P = {"vitro-item-lookup-picker":"_command-menu-lookup-picker_vitro-item-lookup-picker_28SsSpP","vitro-command-menu-lookup-picker":"_command-menu-lookup-picker_vitro-command-menu-lookup-picker_1840wlg","vitro-content":"_command-menu-lookup-picker_vitro-content_3fNJUmC","vitro-value-list":"_command-menu-lookup-picker_vitro-value-list_3_OCO0r","ps":"_command-menu-lookup-picker_ps_2nXaPqA","ps--active-y":"_command-menu-lookup-picker_ps--active-y_1PYkoqT","vitro-selected-item":"_command-menu-lookup-picker_vitro-selected-item_2oLYUbH","vitro-item":"_command-menu-lookup-picker_vitro-item_16ocUuf","vitro-right":"_command-menu-lookup-picker_vitro-right_3sBWu8H"};
+var styles$Q = {"vitro-item-lookup-picker":"_command-menu-lookup-picker_vitro-item-lookup-picker_28SsSpP","vitro-command-menu-lookup-picker":"_command-menu-lookup-picker_vitro-command-menu-lookup-picker_1840wlg","vitro-content":"_command-menu-lookup-picker_vitro-content_3fNJUmC","vitro-value-list":"_command-menu-lookup-picker_vitro-value-list_3_OCO0r","ps":"_command-menu-lookup-picker_ps_2nXaPqA","ps--active-y":"_command-menu-lookup-picker_ps--active-y_1PYkoqT","vitro-selected-item":"_command-menu-lookup-picker_vitro-selected-item_2oLYUbH","vitro-item":"_command-menu-lookup-picker_vitro-item_16ocUuf","vitro-right":"_command-menu-lookup-picker_vitro-right_3sBWu8H"};
 
 var CommandMenuLookupPicker = function CommandMenuLookupPicker(props) {
   return React__default.createElement("li", {
-    className: itemStyles['vitro-item'] + CTRL.SPACE + 'nav-item ' + styles$P['vitro-item-lookup-picker']
+    className: itemStyles['vitro-item'] + CTRL.SPACE + 'nav-item ' + styles$Q['vitro-item-lookup-picker']
   }, React__default.createElement(LookupPicker, Object.assign({}, props, {
-    className: styles$P['vitro-command-menu-lookup-picker'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY)
+    className: styles$Q['vitro-command-menu-lookup-picker'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY)
   })));
 };
 
-var styles$Q = {"vitro-command-menu-dropdown-button":"_command-menu-dropdown-button_vitro-command-menu-dropdown-button_2ImIuc3","vitro-dropdown-button-container":"_command-menu-dropdown-button_vitro-dropdown-button-container_29qd-_O","vitro-right":"_command-menu-dropdown-button_vitro-right_uTzkzdJ","vitro-image":"_command-menu-dropdown-button_vitro-image_2VNGo-H","vitro-button-collapse-bottom":"_command-menu-dropdown-button_vitro-button-collapse-bottom_1OS_X_a","vitro-scrollbar":"_command-menu-dropdown-button_vitro-scrollbar_1J6dT6q"};
+var styles$R = {"vitro-command-menu-dropdown-button":"_command-menu-dropdown-button_vitro-command-menu-dropdown-button_2ImIuc3","vitro-dropdown-button-container":"_command-menu-dropdown-button_vitro-dropdown-button-container_29qd-_O","vitro-right":"_command-menu-dropdown-button_vitro-right_uTzkzdJ","vitro-image":"_command-menu-dropdown-button_vitro-image_2VNGo-H","vitro-button-collapse-bottom":"_command-menu-dropdown-button_vitro-button-collapse-bottom_1OS_X_a","vitro-scrollbar":"_command-menu-dropdown-button_vitro-scrollbar_1J6dT6q"};
 
 var CommandMenuSubItem = function CommandMenuSubItem(props) {
   var onClick = function onClick(e) {
@@ -63631,7 +63790,7 @@ var CommandMenuSubItem = function CommandMenuSubItem(props) {
     onClick: onClick,
     toggle: props.toggle === false ? false : true
   }, props.isShowImage && React__default.createElement("div", {
-    className: styles$Q['vitro-image']
+    className: styles$R['vitro-image']
   }, props.imageUrl && React__default.createElement(Image, {
     defaultUrl: props.imageUrl,
     hoverUrl: props.imageHoverUrl
@@ -63665,15 +63824,15 @@ var CommandMenuItemHeader = function CommandMenuItemHeader(props) {
     onMouseLeave: function onMouseLeave() {
       return setIsHover(false);
     },
-    className: itemStyles['vitro-item'] + CTRL.SPACE + styles$Q['vitro-command-menu-dropdown-button'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY),
+    className: itemStyles['vitro-item'] + CTRL.SPACE + styles$R['vitro-command-menu-dropdown-button'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY),
     "data-show": props.isVisibleFunction
   }, props.imageUrl && React__default.createElement(Image, {
     isHover: isHover,
     defaultUrl: props.imageUrl,
     hoverUrl: props.imageHoverUrl,
-    className: styles$Q['vitro-image']
+    className: styles$R['vitro-image']
   }), React__default.createElement("span", null, props.text), !props.isHideChevronDown && React__default.createElement("div", {
-    className: styles$Q['vitro-button-collapse-bottom']
+    className: styles$R['vitro-button-collapse-bottom']
   }));
 };
 
@@ -63688,7 +63847,7 @@ var CommandMenuDropdownButton = function CommandMenuDropdownButton(props) {
   return React__default.createElement(reactstrap.UncontrolledDropdown, {
     nav: true,
     inNavbar: true,
-    className: styles$Q['vitro-dropdown-button-container'] + (isRight ? CTRL.SPACE + styles$Q['vitro-right'] : CTRL.EMPTY)
+    className: styles$R['vitro-dropdown-button-container'] + (isRight ? CTRL.SPACE + styles$R['vitro-right'] : CTRL.EMPTY)
   }, React__default.createElement(reactstrap.DropdownToggle, {
     nav: true,
     caret: true
@@ -63696,7 +63855,7 @@ var CommandMenuDropdownButton = function CommandMenuDropdownButton(props) {
     className: props.className,
     setIsRight: setIsRight
   }))), React__default.createElement(reactstrap.DropdownMenu, null, React__default.createElement(ScrollBar, {
-    className: styles$Q['vitro-scrollbar'],
+    className: styles$R['vitro-scrollbar'],
     isHideScrollX: true
   }, props.itemList && props.itemList.map(function (i) {
     return React__default.createElement(CommandMenuSubItem, Object.assign({
@@ -63708,7 +63867,7 @@ var CommandMenuDropdownButton = function CommandMenuDropdownButton(props) {
   }), props.children)));
 };
 
-var styles$R = {"vitro-item":"_sidebar-item_vitro-item_1BR_7F0","vitro-image":"_sidebar-item_vitro-image_2A82YI0","vitro-item-text":"_sidebar-item_vitro-item-text_1kK_aIZ","vitro-active":"_sidebar-item_vitro-active_7p5iOhY","vitro-hover":"_sidebar-item_vitro-hover_1mECzme","vitro-group-item":"_sidebar-item_vitro-group-item_ZADCctV","vitro-item-list":"_sidebar-item_vitro-item-list_17dWov1","vitro-expanded":"_sidebar-item_vitro-expanded_3qb1vOx","vitro-collapsed":"_sidebar-item_vitro-collapsed_2EhVmXL","vitro-display-none":"_sidebar-item_vitro-display-none_2WwKi5v","vitro-scrollbar":"_sidebar-item_vitro-scrollbar___xylIx","vitro-button-close":"_sidebar-item_vitro-button-close_2Kdf-ob"};
+var styles$S = {"vitro-item":"_sidebar-item_vitro-item_1BR_7F0","vitro-image":"_sidebar-item_vitro-image_2A82YI0","vitro-item-text":"_sidebar-item_vitro-item-text_1kK_aIZ","vitro-active":"_sidebar-item_vitro-active_7p5iOhY","vitro-hover":"_sidebar-item_vitro-hover_1mECzme","vitro-group-item":"_sidebar-item_vitro-group-item_ZADCctV","vitro-item-list":"_sidebar-item_vitro-item-list_17dWov1","vitro-expanded":"_sidebar-item_vitro-expanded_3qb1vOx","vitro-collapsed":"_sidebar-item_vitro-collapsed_2EhVmXL","vitro-display-none":"_sidebar-item_vitro-display-none_2WwKi5v","vitro-scrollbar":"_sidebar-item_vitro-scrollbar___xylIx","vitro-button-close":"_sidebar-item_vitro-button-close_2Kdf-ob"};
 
 var Item$2 = function Item(props) {
   var _useState = React.useState(false),
@@ -63745,10 +63904,10 @@ var Item$2 = function Item(props) {
     defaultUrl: props.imageUrl,
     hoverUrl: props.imageHoverUrl,
     isHover: props.isHover,
-    className: styles$R['vitro-image']
+    className: styles$S['vitro-image']
   })), React__default.createElement("span", {
     ref: textRef,
-    className: styles$R['vitro-item-text'] + (!(props.isSidebarExpanded || props.isMobileView) ? CTRL.SPACE + styles$R['vitro-display-none'] : CTRL.EMPTY)
+    className: styles$S['vitro-item-text'] + (!(props.isSidebarExpanded || props.isMobileView) ? CTRL.SPACE + styles$S['vitro-display-none'] : CTRL.EMPTY)
   }, props.text)));
 };
 
@@ -63770,7 +63929,7 @@ var LinkItem$1 = function LinkItem(props) {
     isHover = _useState[0],
     setIsHover = _useState[1];
   var isActive = !!props.link && (props.link === props.currentUrl && (!props.activeItem || props.activeItem === props.id) || props.altUrlList && props.altUrlList.includes(props.currentUrl));
-  var className = isActive ? styles$R['vitro-active'] : isHover ? styles$R['vitro-hover'] : CTRL.EMPTY;
+  var className = isActive ? styles$S['vitro-active'] : isHover ? styles$S['vitro-hover'] : CTRL.EMPTY;
   var onClick = function onClick(e) {
     if (!props.isDisabled) {
       if (props.onClick) {
@@ -63795,7 +63954,7 @@ var LinkItem$1 = function LinkItem(props) {
     style: {
       width: props.linkItemWidth ? props.linkItemWidth + UNIT.PX : WIDTH_AUTO
     },
-    className: styles$R['vitro-item']
+    className: styles$S['vitro-item']
   }, (props.link || props.onClick) && React__default.createElement("button", {
     onMouseEnter: function onMouseEnter() {
       return setIsHover(true);
@@ -63835,7 +63994,7 @@ var LinkItem$1 = function LinkItem(props) {
   }))));
 };
 
-var styles$S = {"vitro-slide-up-panel":"_slide-up-panel_vitro-slide-up-panel_2EOSLHK","vitro-content":"_slide-up-panel_vitro-content_1er6bcv","vitro-expanded":"_slide-up-panel_vitro-expanded_2f2dYt6","vitro-button-close":"_slide-up-panel_vitro-button-close_2iM7SFL"};
+var styles$T = {"vitro-slide-up-panel":"_slide-up-panel_vitro-slide-up-panel_2EOSLHK","vitro-content":"_slide-up-panel_vitro-content_1er6bcv","vitro-expanded":"_slide-up-panel_vitro-expanded_2f2dYt6","vitro-button-close":"_slide-up-panel_vitro-button-close_2iM7SFL"};
 
 var SlideUpPanel = function SlideUpPanel(props) {
   var _useState = React.useState(props.isShow),
@@ -63899,13 +64058,13 @@ var SlideUpPanel = function SlideUpPanel(props) {
     target: props.container,
     placement: exports.PLACEMENT.TOP
   }, React__default.createElement("div", {
-    className: styles$S['vitro-slide-up-panel'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY)
+    className: styles$T['vitro-slide-up-panel'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY)
   }, React__default.createElement("div", {
-    className: styles$S['vitro-content'] + (isExpanded ? CTRL.SPACE + styles$S['vitro-expanded'] : CTRL.EMPTY),
+    className: styles$T['vitro-content'] + (isExpanded ? CTRL.SPACE + styles$T['vitro-expanded'] : CTRL.EMPTY),
     ref: contentRef
   }, React__default.createElement("button", {
     ref: buttonRef,
-    className: styles$S['vitro-button-close'],
+    className: styles$T['vitro-button-close'],
     onTouchStart: onTouchStart,
     onTouchEnd: onTouchEnd,
     onTouchMove: onTouchMove,
@@ -63990,7 +64149,7 @@ var GroupItem = function GroupItem(props) {
       setIsHover(focus);
     }
   };
-  var className = isActive ? styles$R['vitro-active'] : isHover ? styles$R['vitro-hover'] : CTRL.EMPTY;
+  var className = isActive ? styles$S['vitro-active'] : isHover ? styles$S['vitro-hover'] : CTRL.EMPTY;
   var content = React__default.createElement(React__default.Fragment, null, props.itemList && props.itemList.map(function (i) {
     return i.link || i.onClick ? React__default.createElement(LinkItem$1, Object.assign({
       link: i.link,
@@ -64019,7 +64178,7 @@ var GroupItem = function GroupItem(props) {
     style: {
       width: props.linkItemWidth ? props.linkItemWidth + UNIT.PX : WIDTH_AUTO$1
     },
-    className: styles$R['vitro-item'] + CTRL.SPACE + styles$R['vitro-group-item']
+    className: styles$S['vitro-item'] + CTRL.SPACE + styles$S['vitro-group-item']
   }, React__default.createElement("button", {
     onMouseEnter: function onMouseEnter() {
       return _onFocus(true);
@@ -64038,7 +64197,7 @@ var GroupItem = function GroupItem(props) {
   }, React__default.createElement(Item$2, Object.assign({}, props, {
     isHover: isHover || isActive
   })), props.isSidebarExpanded && !props.isMobileView && React__default.createElement("span", {
-    className: isExpanded ? styles$R['vitro-expanded'] : styles$R['vitro-collapsed']
+    className: isExpanded ? styles$S['vitro-expanded'] : styles$S['vitro-collapsed']
   })), props.isMobileView ? React__default.createElement(SlideUpPanel, {
     isShow: isExpanded,
     container: props.container,
@@ -64046,9 +64205,9 @@ var GroupItem = function GroupItem(props) {
       return props.setActiveItem(CTRL.EMPTY);
     }
   }, React__default.createElement(ScrollBar, {
-    className: styles$R['vitro-scrollbar']
+    className: styles$S['vitro-scrollbar']
   }, content)) : React__default.createElement("ul", {
-    className: styles$R['vitro-item-list'] + CTRL.SPACE + (props.isSidebarExpanded ? !isExpanded ? styles$R['vitro-display-none'] : CTRL.EMPTY : styles$R['vitro-display-none'])
+    className: styles$S['vitro-item-list'] + CTRL.SPACE + (props.isSidebarExpanded ? !isExpanded ? styles$S['vitro-display-none'] : CTRL.EMPTY : styles$S['vitro-display-none'])
   }, content)));
 };
 
@@ -64077,7 +64236,7 @@ var Section = function Section(props) {
   })) : React__default.createElement(React__default.Fragment, null));
 };
 
-var styles$T = {"vitro-sidebar":"_sidebar_vitro-sidebar_1IxGYiU","vitro-scrollbar":"_sidebar_vitro-scrollbar_2PtQGQD","vitro-sidebar-section-list":"_sidebar_vitro-sidebar-section-list_1nGto5m","vitro-scroll-container":"_sidebar_vitro-scroll-container_3K-iJy8","vitro-button-more":"_sidebar_vitro-button-more_3s9oZY9","vitro-logo-container":"_sidebar_vitro-logo-container_31O5Ly-","vitro-logo":"_sidebar_vitro-logo_1qxi8L_","vitro-scroll-content":"_sidebar_vitro-scroll-content_2RUBhZd"};
+var styles$U = {"vitro-sidebar":"_sidebar_vitro-sidebar_1IxGYiU","vitro-scrollbar":"_sidebar_vitro-scrollbar_2PtQGQD","vitro-sidebar-section-list":"_sidebar_vitro-sidebar-section-list_1nGto5m","vitro-scroll-container":"_sidebar_vitro-scroll-container_3K-iJy8","vitro-button-more":"_sidebar_vitro-button-more_3s9oZY9","vitro-logo-container":"_sidebar_vitro-logo-container_31O5Ly-","vitro-logo":"_sidebar_vitro-logo_1qxi8L_","vitro-scroll-content":"_sidebar_vitro-scroll-content_2RUBhZd"};
 
 var SectionList = React.forwardRef(function (props, ref) {
   if (!props.itemList || props.itemList.length === 0) {
@@ -64085,7 +64244,7 @@ var SectionList = React.forwardRef(function (props, ref) {
   }
   return React__default.createElement("ul", {
     ref: ref,
-    className: styles$T['vitro-sidebar-section-list']
+    className: styles$U['vitro-sidebar-section-list']
   }, props.itemList.map(function (section) {
     return React__default.createElement(Section, Object.assign({
       isExpanded: props.isExpanded,
@@ -64180,12 +64339,12 @@ var Sidebar = function Sidebar(props) {
     var width = containerWidth / count;
     setLinkItemWidth(width);
   };
-  var className = styles$T['vitro-sidebar'] + (props.theme ? CTRL.SPACE + props.theme : CTRL.EMPTY) + CTRL.SPACE + (isMobileView ? 'vitro-bottom-menu' : CTRL.EMPTY);
+  var className = styles$U['vitro-sidebar'] + (props.theme ? CTRL.SPACE + props.theme : CTRL.EMPTY) + CTRL.SPACE + (isMobileView ? 'vitro-bottom-menu' : CTRL.EMPTY);
   return React__default.createElement("div", {
     className: className,
     id: 'vitro-sidebar'
   }, !isMobileView ? React__default.createElement(React__default.Fragment, null, React__default.createElement(ScrollBar, {
-    className: styles$T['vitro-scrollbar']
+    className: styles$U['vitro-scrollbar']
   }, React__default.createElement(SectionList, {
     itemList: itemList,
     currentUrl: currentUrl,
@@ -64203,18 +64362,18 @@ var Sidebar = function Sidebar(props) {
     isMobileView: isMobileView,
     isDisabled: props.isDisabled
   })), React__default.createElement("div", {
-    className: styles$T['vitro-logo-container']
+    className: styles$U['vitro-logo-container']
   }, React__default.createElement(Item$2, {
     text: props.logoText,
     imageUrl: props.logo,
     isSidebarExpanded: !props.sidebar,
     isMobileView: isMobileView,
-    className: styles$T['vitro-logo']
+    className: styles$U['vitro-logo']
   }))) : React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
-    className: styles$T['vitro-scroll-container'],
+    className: styles$U['vitro-scroll-container'],
     ref: menuRef
   }, React__default.createElement("div", {
-    className: styles$T['vitro-scroll-content'],
+    className: styles$U['vitro-scroll-content'],
     ref: scrollContentRef
   }, React__default.createElement(SectionList, {
     container: menuRef.current,
@@ -64232,36 +64391,36 @@ var Sidebar = function Sidebar(props) {
     width: linkItemWidth,
     isSidebarExpanded: !props.sidebar,
     isMobileView: isMobileView,
-    className: styles$T['vitro-logo']
+    className: styles$U['vitro-logo']
   }))), React__default.createElement("button", {
     onClick: scroll,
-    className: styles$T['vitro-button-more']
+    className: styles$U['vitro-button-more']
   })));
 };
 
-var styles$U = {"vitro-item":"_activity-item_vitro-item_3Tprske","vitro-active":"_activity-item_vitro-active_2kENgvf","vitro-title":"_activity-item_vitro-title__QItISm","vitro-due-date":"_activity-item_vitro-due-date_1mBIraY","vitro-content":"_activity-item_vitro-content_3Lt7XRy","vitro-message":"_activity-item_vitro-message_1ndqhgR","vitro-flex":"_activity-item_vitro-flex_37IxBWe","vitro-dropdown-button":"_activity-item_vitro-dropdown-button_1J50ja7","vitro-avatar":"_activity-item_vitro-avatar_218ZqAk"};
+var styles$V = {"vitro-item":"_activity-item_vitro-item_3Tprske","vitro-active":"_activity-item_vitro-active_2kENgvf","vitro-title":"_activity-item_vitro-title__QItISm","vitro-due-date":"_activity-item_vitro-due-date_1mBIraY","vitro-content":"_activity-item_vitro-content_3Lt7XRy","vitro-message":"_activity-item_vitro-message_1ndqhgR","vitro-flex":"_activity-item_vitro-flex_37IxBWe","vitro-dropdown-button":"_activity-item_vitro-dropdown-button_1J50ja7","vitro-avatar":"_activity-item_vitro-avatar_218ZqAk"};
 
 var ActivityItem = function ActivityItem(props) {
   return React__default.createElement("div", {
-    className: styles$U['vitro-item'] + (props.isActive ? CTRL.SPACE + styles$U['vitro-active'] : CTRL.EMPTY)
+    className: styles$V['vitro-item'] + (props.isActive ? CTRL.SPACE + styles$V['vitro-active'] : CTRL.EMPTY)
   }, React__default.createElement("div", {
-    className: styles$U['vitro-flex']
+    className: styles$V['vitro-flex']
   }, React__default.createElement(Avatar, {
     userName: props.userName,
     image: props.userImageUrl,
-    className: styles$U['vitro-avatar']
+    className: styles$V['vitro-avatar']
   }), React__default.createElement("div", {
-    className: styles$U['vitro-content']
+    className: styles$V['vitro-content']
   }, React__default.createElement("div", null, React__default.createElement("div", {
-    className: styles$U['vitro-title']
+    className: styles$V['vitro-title']
   }, React__default.createElement("span", null, props.title || props.userName), props.isShowDetail && React__default.createElement("span", {
-    className: styles$U['vitro-due-date']
+    className: styles$V['vitro-due-date']
   }, props.date), props.isShowDetail && props.dropdownItemList && React__default.createElement(DropdownButton, {
     itemList: props.dropdownItemList,
     onToggle: props.onDropdownToggle,
-    className: styles$U['vitro-dropdown-button']
+    className: styles$V['vitro-dropdown-button']
   })), React__default.createElement("div", {
-    className: styles$U['vitro-message'] + (props.variant ? CTRL.SPACE + props.variant : CTRL.EMPTY)
+    className: styles$V['vitro-message'] + (props.variant ? CTRL.SPACE + props.variant : CTRL.EMPTY)
   }, React__default.createElement("p", {
     dangerouslySetInnerHTML: {
       __html: props.message
@@ -64269,46 +64428,46 @@ var ActivityItem = function ActivityItem(props) {
   }), props.children)))));
 };
 
-var styles$V = {"vitro-task-user-list":"_task-user-list_vitro-task-user-list_3GBJVjt"};
+var styles$W = {"vitro-task-user-list":"_task-user-list_vitro-task-user-list_3GBJVjt"};
 
 var TaskUserList = function TaskUserList(props) {
   return React__default.createElement("div", {
-    className: styles$V['vitro-task-user-list']
+    className: styles$W['vitro-task-user-list']
   }, props.itemList && props.itemList.map(function (x) {
     return React__default.createElement(ActivityItem, Object.assign({}, x));
   }));
 };
 
-var styles$W = {"vitro-task-tile":"_task-tile_vitro-task-tile_35bZu48","vitro-active":"_task-tile_vitro-active_11W9nJz","vitro-content":"_task-tile_vitro-content_rl2ERCQ","vitro-description":"_task-tile_vitro-description_qtyUbLy","vitro-comment":"_task-tile_vitro-comment_2im2AJj","vitro-title":"_task-tile_vitro-title_1pXrIrB","vitro-top-right":"_task-tile_vitro-top-right_19tbPX4","vitro-dropdown-button":"_task-tile_vitro-dropdown-button_2YgEUdg","vitro-bottom-right":"_task-tile_vitro-bottom-right_2E9WAle","vitro-button-cancel":"_task-tile_vitro-button-cancel_1lgja1K"};
+var styles$X = {"vitro-task-tile":"_task-tile_vitro-task-tile_35bZu48","vitro-active":"_task-tile_vitro-active_11W9nJz","vitro-content":"_task-tile_vitro-content_rl2ERCQ","vitro-description":"_task-tile_vitro-description_qtyUbLy","vitro-comment":"_task-tile_vitro-comment_2im2AJj","vitro-title":"_task-tile_vitro-title_1pXrIrB","vitro-top-right":"_task-tile_vitro-top-right_19tbPX4","vitro-dropdown-button":"_task-tile_vitro-dropdown-button_2YgEUdg","vitro-bottom-right":"_task-tile_vitro-bottom-right_2E9WAle","vitro-button-cancel":"_task-tile_vitro-button-cancel_1lgja1K"};
 
 var TaskTile = function TaskTile(props) {
   return React__default.createElement("div", {
-    className: styles$W['vitro-task-tile'] + (props.isActive ? CTRL.SPACE + styles$W['vitro-active'] : CTRL.EMPTY),
+    className: styles$X['vitro-task-tile'] + (props.isActive ? CTRL.SPACE + styles$X['vitro-active'] : CTRL.EMPTY),
     onClick: props.onClick
   }, props.dropdownItemList && React__default.createElement("div", {
-    className: styles$W['vitro-top-right']
+    className: styles$X['vitro-top-right']
   }, React__default.createElement(DropdownButton, {
     itemList: props.dropdownItemList,
-    className: styles$W['vitro-dropdown-button']
+    className: styles$X['vitro-dropdown-button']
   })), props.isShowDeleteButton && React__default.createElement("div", {
-    className: styles$W['vitro-button-cancel'],
+    className: styles$X['vitro-button-cancel'],
     onClick: props.onDeleteClick
   }), props.description && React__default.createElement("div", {
-    className: styles$W['vitro-description']
+    className: styles$X['vitro-description']
   }, props.description), React__default.createElement("div", {
-    className: styles$W['vitro-title']
+    className: styles$X['vitro-title']
   }, props.title), props.comment && React__default.createElement("div", {
-    className: styles$W['vitro-comment']
+    className: styles$X['vitro-comment']
   }, props.comment), React__default.createElement("div", {
-    className: styles$W['vitro-content']
+    className: styles$X['vitro-content']
   }, props.userList && React__default.createElement(TaskUserList, {
     itemList: props.userList
   })), React__default.createElement("div", {
-    className: styles$W['vitro-bottom-right']
+    className: styles$X['vitro-bottom-right']
   }, props.dateComment, " \xA0 ", props.date), props.children);
 };
 
-var styles$X = {"vitro-alert":"_alert_vitro-alert_3sPAkJb","vitro-alert-content":"_alert_vitro-alert-content_10fW1n4","vitro-button-close":"_alert_vitro-button-close_39K9cqW","vitro-icon":"_alert_vitro-icon_pK385gF","vitro-text":"_alert_vitro-text_37Erxqj","vitro-alert-action-list":"_alert_vitro-alert-action-list_2XzbaCO","vitro-position-center":"_alert_vitro-position-center_1r_lK_e"};
+var styles$Y = {"vitro-alert":"_alert_vitro-alert_3sPAkJb","vitro-alert-content":"_alert_vitro-alert-content_10fW1n4","vitro-button-close":"_alert_vitro-button-close_39K9cqW","vitro-icon":"_alert_vitro-icon_pK385gF","vitro-text":"_alert_vitro-text_37Erxqj","vitro-alert-action-list":"_alert_vitro-alert-action-list_2XzbaCO","vitro-position-center":"_alert_vitro-position-center_1r_lK_e"};
 
 var Alert$1 = function Alert(props) {
   var ref = React.useRef(null);
@@ -64340,7 +64499,7 @@ var Alert$1 = function Alert(props) {
     }
   };
   var actionList = props.actionList && React__default.createElement("div", {
-    className: styles$X['vitro-alert-action-list']
+    className: styles$Y['vitro-alert-action-list']
   }, props.actionList.map(function (a) {
     return React__default.createElement(Button$1, {
       key: a.text,
@@ -64349,7 +64508,7 @@ var Alert$1 = function Alert(props) {
       }
     }, a.text);
   }));
-  var className = styles$X['vitro-alert'] + CTRL.SPACE + (props.isPositionCenter && styles$X['vitro-position-center']) + CTRL.SPACE + (props.className ? props.className : CTRL.EMPTY);
+  var className = styles$Y['vitro-alert'] + CTRL.SPACE + (props.isPositionCenter && styles$Y['vitro-position-center']) + CTRL.SPACE + (props.className ? props.className : CTRL.EMPTY);
   return React__default.createElement("div", {
     tabIndex: 1,
     onBlur: onFocusOut,
@@ -64359,13 +64518,13 @@ var Alert$1 = function Alert(props) {
     variant: props.type,
     onClose: props.onClose
   }, React__default.createElement("div", {
-    className: styles$X['vitro-alert-content']
+    className: styles$Y['vitro-alert-content']
   }, React__default.createElement("div", {
-    className: styles$X['vitro-icon']
+    className: styles$Y['vitro-icon']
   }), React__default.createElement("div", {
-    className: styles$X['vitro-text']
+    className: styles$Y['vitro-text']
   }, props.title && React__default.createElement("strong", null, props.title), props.text, !props.text && props.children), !props.isMultiline && actionList, props.isDismissible && React__default.createElement("div", {
-    className: styles$X['vitro-button-close'],
+    className: styles$Y['vitro-button-close'],
     onClick: onClose
   })), props.text && props.children, props.isMultiline && actionList));
 };
@@ -64382,7 +64541,7 @@ var AlertConstants = {
     get TYPE () { return TYPE$2; }
 };
 
-var styles$Y = {"vitro-user-profile":"_user-profile_vitro-user-profile_11XpBoQ","vitro-dropdown-item":"_user-profile_vitro-dropdown-item_dSErsta","vitro-avatar":"_user-profile_vitro-avatar_3SzDPAi"};
+var styles$Z = {"vitro-user-profile":"_user-profile_vitro-user-profile_11XpBoQ","vitro-dropdown-item":"_user-profile_vitro-dropdown-item_dSErsta","vitro-avatar":"_user-profile_vitro-avatar_3SzDPAi"};
 
 var UserProfileMenuItem = function UserProfileMenuItem(props) {
   var onClick = function onClick() {
@@ -64393,7 +64552,7 @@ var UserProfileMenuItem = function UserProfileMenuItem(props) {
   };
   if (props.link) {
     return React__default.createElement("div", {
-      className: styles$Y['vitro-dropdown-item'],
+      className: styles$Z['vitro-dropdown-item'],
       onClick: onClick
     }, React__default.createElement("a", {
       href: props.link
@@ -64404,7 +64563,7 @@ var UserProfileMenuItem = function UserProfileMenuItem(props) {
   }
   if (props.onClick) {
     return React__default.createElement("div", {
-      className: styles$Y['vitro-dropdown-item'],
+      className: styles$Z['vitro-dropdown-item'],
       key: props.text,
       onClick: onClick
     }, props.imageUrl && React__default.createElement(Image, {
@@ -64438,15 +64597,15 @@ var UserProfile = function UserProfile(props) {
   return React__default.createElement(reactstrap.Dropdown, {
     isOpen: dropdownOpen,
     toggle: toggle,
-    className: styles$Y['vitro-user-profile']
+    className: styles$Z['vitro-user-profile']
   }, React__default.createElement(reactstrap.DropdownToggle, {
     caret: true
   }, React__default.createElement("div", null, React__default.createElement("span", {
-    className: styles$Y['vitro-text-color-white']
+    className: styles$Z['vitro-text-color-white']
   }, createSurnameWithInitials(props.userName)), React__default.createElement(Avatar, {
     userName: props.userName,
     image: props.image,
-    className: styles$Y['vitro-avatar']
+    className: styles$Z['vitro-avatar']
   }))), React__default.createElement(reactstrap.DropdownMenu, {
     right: true
   }, props.dropdownMenuItemList && props.dropdownMenuItemList.length > 0 && props.dropdownMenuItemList.map(function (item) {
@@ -64456,7 +64615,7 @@ var UserProfile = function UserProfile(props) {
   })));
 };
 
-var styles$Z = {"vitro-avatar":"_user-lookup-picker_vitro-avatar_2vI-SeH"};
+var styles$_ = {"vitro-avatar":"_user-lookup-picker_vitro-avatar_2vI-SeH"};
 
 var UserLookupPicker = React.forwardRef(function (props, ref) {
   var lookupPickerRef = React.useRef(null);
@@ -64464,7 +64623,7 @@ var UserLookupPicker = React.forwardRef(function (props, ref) {
     var prop = props.getHtmlValueTemplateProps(item);
     if (props.isMultiSelect) {
       return _extends({}, prop, {
-        className: styles$Z['vitro-avatar']
+        className: styles$_['vitro-avatar']
       });
     }
     return prop;
@@ -64485,7 +64644,7 @@ var UserLookupPicker = React.forwardRef(function (props, ref) {
   }));
 });
 
-var styles$_ = {"vitro-title":"_activity_vitro-title_1rdvvaa","vitro-dropdown-button":"_activity_vitro-dropdown-button_12258nJ","vitro-activity":"_activity_vitro-activity_1u7YeF3"};
+var styles$$ = {"vitro-title":"_activity_vitro-title_1rdvvaa","vitro-dropdown-button":"_activity_vitro-dropdown-button_12258nJ","vitro-activity":"_activity_vitro-activity_1u7YeF3"};
 
 var Activity = function Activity(props) {
   var onDrop = function onDrop(e) {
@@ -64498,16 +64657,16 @@ var Activity = function Activity(props) {
     className: 'vitro-activity',
     onDrop: onDrop
   }, (props.filterDropdownList || props.title) && React__default.createElement("div", {
-    className: styles$_['vitro-title']
+    className: styles$$['vitro-title']
   }, props.filterDropdownList && React__default.createElement(DropdownButton, {
     itemList: props.filterDropdownList,
-    className: styles$_['vitro-dropdown-button']
+    className: styles$$['vitro-dropdown-button']
   }), props.title && React__default.createElement("h3", null, props.title)), React__default.createElement("div", {
     className: 'vitro-content'
   }, props.children));
 };
 
-var styles$$ = {"vitro-file":"_file_vitro-file_2xkXgkS","vitro-preview":"_file_vitro-preview_2RVdrbm","vitro-preview-container":"_file_vitro-preview-container_2dmbDD7","vitro-flex":"_file_vitro-flex_3nGTlWX","vitro-image":"_file_vitro-image_2Bt3otk","vitro-file-name":"_file_vitro-file-name_2t9Y643","vitro-file-size":"_file_vitro-file-size_15f_E_0","vitro-dropdown-button":"_file_vitro-dropdown-button_3MgI2n9"};
+var styles$10 = {"vitro-file":"_file_vitro-file_2xkXgkS","vitro-preview":"_file_vitro-preview_2RVdrbm","vitro-preview-container":"_file_vitro-preview-container_2dmbDD7","vitro-flex":"_file_vitro-flex_3nGTlWX","vitro-image":"_file_vitro-image_2Bt3otk","vitro-file-name":"_file_vitro-file-name_2t9Y643","vitro-file-size":"_file_vitro-file-size_15f_E_0","vitro-dropdown-button":"_file_vitro-dropdown-button_3MgI2n9"};
 
 var File = function File(props) {
   var onClick = function onClick() {
@@ -64515,33 +64674,33 @@ var File = function File(props) {
       props.onClick(props.id);
     }
   };
-  var className = [styles$$['vitro-file'], props.className || CTRL.EMPTY, props.isImage ? styles$$['vitro-preview'] : CTRL.EMPTY].join(CTRL.SPACE);
+  var className = [styles$10['vitro-file'], props.className || CTRL.EMPTY, props.isImage ? styles$10['vitro-preview'] : CTRL.EMPTY].join(CTRL.SPACE);
   return React__default.createElement("div", {
     className: className
   }, props.actionList && props.actionList.length ? React__default.createElement(DropdownButton, {
     itemList: props.actionList,
-    className: styles$$['vitro-dropdown-button']
+    className: styles$10['vitro-dropdown-button']
   }) : null, React__default.createElement(Tooltip$1, {
     placement: PLACEMENT.TOP,
     text: props.tooltip || CTRL.EMPTY
   }, React__default.createElement("div", {
-    className: styles$$['vitro-preview-container'],
+    className: styles$10['vitro-preview-container'],
     onClick: onClick
   }, React__default.createElement("img", {
     src: props.preview
   }))), !props.isImage && React__default.createElement("div", {
-    className: styles$$['vitro-flex']
+    className: styles$10['vitro-flex']
   }, props.image && React__default.createElement("img", {
     src: props.image,
-    className: styles$$['vitro-image']
+    className: styles$10['vitro-image']
   }), React__default.createElement("div", null, React__default.createElement("span", {
-    className: styles$$['vitro-file-name']
+    className: styles$10['vitro-file-name']
   }, props.name), React__default.createElement("span", {
-    className: styles$$['vitro-file-size']
+    className: styles$10['vitro-file-size']
   }, props.size))));
 };
 
-var styles$10 = {"vitro-file-list-container":"_attached-file-list_vitro-file-list-container_5PIFyI7","vitro-overflow-button":"_attached-file-list_vitro-overflow-button_39QxX1m","vitro-item-count":"_attached-file-list_vitro-item-count_35PIT1U","vitro-file":"_attached-file-list_vitro-file_2mPE3Rq"};
+var styles$11 = {"vitro-file-list-container":"_attached-file-list_vitro-file-list-container_5PIFyI7","vitro-overflow-button":"_attached-file-list_vitro-overflow-button_39QxX1m","vitro-item-count":"_attached-file-list_vitro-item-count_35PIT1U","vitro-file":"_attached-file-list_vitro-file_2mPE3Rq"};
 
 var AttachedFileListItem = function AttachedFileListItem(props) {
   var _useState = React.useState(null),
@@ -64557,14 +64716,14 @@ var AttachedFileListItem = function AttachedFileListItem(props) {
   return React__default.createElement(React__default.Fragment, null, props.fileList.map(function (file, index) {
     if (index < props.maxVisibleFileCount) {
       return React__default.createElement(File, Object.assign({}, file, {
-        className: styles$10['vitro-file']
+        className: styles$11['vitro-file']
       }));
     }
     return React__default.createElement(React__default.Fragment, null);
   }), props.fileList.length > props.maxVisibleFileCount && !hiddenFileList ? React__default.createElement("div", {
-    className: styles$10['vitro-overflow-button']
+    className: styles$11['vitro-overflow-button']
   }, React__default.createElement("div", {
-    className: styles$10['vitro-item-count'],
+    className: styles$11['vitro-item-count'],
     onClick: function onClick() {
       return onHiddenFileListClick(props.fileList.slice(props.maxVisibleFileCount));
     }
@@ -64573,10 +64732,10 @@ var AttachedFileListItem = function AttachedFileListItem(props) {
     text: props.hiddenFileCountTooltip || CTRL.EMPTY
   }, React__default.createElement("div", null, CTRL.PLUS + (props.fileList.length - props.maxVisibleFileCount)))), React__default.createElement(File, Object.assign({}, props.fileList[props.maxVisibleFileCount], {
     actionList: [],
-    className: styles$10['vitro-file']
+    className: styles$11['vitro-file']
   }))) : null, hiddenFileList && hiddenFileList.map(function (file) {
     return React__default.createElement(File, Object.assign({}, file, {
-      className: styles$10['vitro-file']
+      className: styles$11['vitro-file']
     }));
   }));
 };
@@ -64612,7 +64771,7 @@ var AttachedFileList = function AttachedFileList(props) {
     }
   };
   return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
-    className: styles$10['vitro-file-list-container']
+    className: styles$11['vitro-file-list-container']
   }, imageList && React__default.createElement(AttachedFileListItem, {
     fileList: imageList,
     maxVisibleFileCount: maxImageCount,
@@ -64626,7 +64785,7 @@ var AttachedFileList = function AttachedFileList(props) {
   })));
 };
 
-var styles$11 = {"vitro-activity-message":"_activity-message_vitro-activity-message_3GdyQuC","vitro-item":"_activity-message_vitro-item_3Q-7zX3","vitro-value":"_activity-message_vitro-value_O4DpuTR","vitro-message":"_activity-message_vitro-message_25otUOy","vitro-field-name":"_activity-message_vitro-field-name_hdjdQbg","vitro-separator":"_activity-message_vitro-separator_vxgHLaH"};
+var styles$12 = {"vitro-activity-message":"_activity-message_vitro-activity-message_3GdyQuC","vitro-item":"_activity-message_vitro-item_3Q-7zX3","vitro-value":"_activity-message_vitro-value_O4DpuTR","vitro-message":"_activity-message_vitro-message_25otUOy","vitro-field-name":"_activity-message_vitro-field-name_hdjdQbg","vitro-separator":"_activity-message_vitro-separator_vxgHLaH"};
 
 var ActivityMessage = function ActivityMessage(props) {
   var _useState = React.useState(false),
@@ -64668,25 +64827,25 @@ var ActivityMessage = function ActivityMessage(props) {
     return false;
   };
   return React__default.createElement(React__default.Fragment, null, props.changedValueList.length ? React__default.createElement("div", {
-    className: styles$11['vitro-activity-message']
+    className: styles$12['vitro-activity-message']
   }, props.changedValueList.map(function (item) {
     return React__default.createElement("div", {
-      className: styles$11['vitro-item']
+      className: styles$12['vitro-item']
     }, item.fieldName && React__default.createElement("span", {
-      className: styles$11['vitro-field-name']
+      className: styles$12['vitro-field-name']
     }, "" + item.fieldName + CTRL.COLON), item.oldValue && React__default.createElement(React__default.Fragment, null, React__default.createElement(Tooltip$1, {
       text: item.oldValue,
       isShow: isShowOldValueTooltip ? undefined : false
     }, React__default.createElement("div", {
-      className: styles$11['vitro-value'],
+      className: styles$12['vitro-value'],
       ref: oldValueRef
     }, item.oldValue)), React__default.createElement("span", {
-      className: styles$11['vitro-separator']
+      className: styles$12['vitro-separator']
     })), item.newValue && React__default.createElement(Tooltip$1, {
       text: item.newValue,
       isShow: isShowNewValueTooltip ? undefined : false
     }, React__default.createElement("div", {
-      className: item.isMessage ? styles$11['vitro-message'] : styles$11['vitro-value'],
+      className: item.isMessage ? styles$12['vitro-message'] : styles$12['vitro-value'],
       ref: newValueRef
     }, item.newValue)));
   })) : null, props.fileList && props.fileList.length ? React__default.createElement(AttachedFileList, Object.assign({
@@ -64713,7 +64872,7 @@ var LOCALE$6;
   LOCALE["ADD_FILE"] = "app.common.messageInput.action.addFile";
 })(LOCALE$6 || (LOCALE$6 = {}));
 
-var styles$12 = {"vitro-attached-file-container":"_attached-file_vitro-attached-file-container_3AhHHlm","vitro-attached-file":"_attached-file_vitro-attached-file_1R6PPQN","vitro-button-remove":"_attached-file_vitro-button-remove_3ehToHf"};
+var styles$13 = {"vitro-attached-file-container":"_attached-file_vitro-attached-file-container_3AhHHlm","vitro-attached-file":"_attached-file_vitro-attached-file_1R6PPQN","vitro-button-remove":"_attached-file_vitro-button-remove_3ehToHf"};
 
 var AttachedFile = function AttachedFile(props) {
   var _useState = React.useState(null),
@@ -64751,34 +64910,22 @@ var AttachedFile = function AttachedFile(props) {
     return null;
   }
   return React__default.createElement("div", {
-    className: styles$12['vitro-attached-file-container']
+    className: styles$13['vitro-attached-file-container']
   }, React__default.createElement(Tooltip$1, {
     placement: PLACEMENT.TOP,
     text: localeService.create(LOCALE$6.DELETE_FILE)
   }, React__default.createElement("button", {
-    className: styles$12['vitro-button-remove'],
+    className: styles$13['vitro-button-remove'],
     onClick: function onClick() {
       return props.onDelete(props.index);
     }
   })), React__default.createElement(File, Object.assign({
     id: "" + props.index
   }, file, {
-    className: styles$12['vitro-attached-file']
+    className: styles$13['vitro-attached-file']
   })));
 };
 
-var styles$13 = {"vitro-flex-box":"_flex-box_vitro-flex-box_3jGTD6k"};
-
-var FlexBox = React.forwardRef(function (props, ref) {
-  return React__default.createElement("div", Object.assign({}, props, {
-    ref: ref,
-    style: props.gap ? {
-      gridGap: props.gap + UNIT.PX
-    } : {},
-    className: styles$13['vitro-flex-box'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY)
-  }), props.children);
-});
-
 var styles$14 = {"vitro-message-input":"_message-input_vitro-message-input_3MkcjWD","vitro-control":"_message-input_vitro-control_1PUSjq9","vitro-message":"_message-input_vitro-message_2EJSy-9","vitro-placeholder":"_message-input_vitro-placeholder_1FBfIqN","vitro-button-add-file":"_message-input_vitro-button-add-file_1qdtHHq","vitro-button-send":"_message-input_vitro-button-send_1vktQrZ","vitro-display-none":"_message-input_vitro-display-none_2dYTZ22","vitro-attached-file-list":"_message-input_vitro-attached-file-list_l95S4VR","vitro-flex":"_message-input_vitro-flex_18M_7xU"};
 
 var MessageInput = React.forwardRef(function (props, ref) {
@@ -66114,18 +66261,18 @@ var Search = function Search(props) {
   }))));
   return React__default.createElement("div", {
     ref: searchRef,
-    className: (props.isMobileView ? styles$1b['vitro-search-mobile'] : styles$1b['vitro-search']) + CTRL.SPACE + state
+    className: (props.isMobileView || props.isMinifiedInput ? styles$1b['vitro-search-mobile'] : styles$1b['vitro-search']) + CTRL.SPACE + state
   }, React__default.createElement(SearchInput, {
     searchCriterionList: selectedSearchCriterionList,
     onCancel: onCancelSearch,
     onSubmit: onSearch,
-    onSearchClick: props.isMobileView ? onSettingsClick : undefined,
+    onSearchClick: props.isMobileView || props.isMinifiedInput ? onSettingsClick : undefined,
     onRemoveValue: onRemoveValue,
     onChange: onInputChange,
     placeholder: props.inputPlaceholder,
     onFocus: onFocusInput,
     isActive: state || isShowDialog ? true : false,
-    isMobileView: props.isMobileView,
+    isMobileView: props.isMobileView ? true : props.isMinifiedInput,
     className: styles$1b['vitro-control']
   }, (state || isShowDialog) && React__default.createElement(ImageButton, {
     onClick: onSettingsClick,
@@ -66165,7 +66312,30 @@ var SplitterConstants = {
 };
 
 var Splitter = function Splitter(props) {
+  var ref = React.useRef();
+  var resizeObserver = new window.ResizeObserver(function (entries) {
+    for (var _iterator = _createForOfIteratorHelperLoose(entries), _step; !(_step = _iterator()).done;) {
+      var entry = _step.value;
+      if (ref.current && entry.target === ref.current.paneWrapper && props.onWrapperResized) {
+        props.onWrapperResized(ref);
+      }
+    }
+  });
+  React.useEffect(function () {
+    if (ref.current) {
+      resizeObserver.observe(ref.current.paneWrapper);
+      if (props.onInit) {
+        props.onInit(ref.current);
+      }
+    }
+  }, [ref]);
+  React.useEffect(function () {
+    return function () {
+      resizeObserver.disconnect();
+    };
+  }, []);
   return React__default.createElement(ReactSplitter, {
+    ref: ref,
     position: props.position || POSITION$1.VERTICAL,
     primaryPaneMaxWidth: (props.maxWidth ? props.maxWidth : WIDTH.DEFAULT_MAX) + CTRL.PERCENT,
     primaryPaneMinWidth: (props.minWidth ? props.minWidth : WIDTH.DEFAULT_MIN) + CTRL.PERCENT,
@@ -66821,7 +66991,7 @@ var LOCALE$c;
   LOCALE["SETTING_SYSTEM_INFO"] = "systemInformation";
 })(LOCALE$c || (LOCALE$c = {}));
 
-var styles$1u = {"vitro-system-exception-dialog":"_system-exception-dialog_vitro-system-exception-dialog_2UVdbuB","vitro-image":"_system-exception-dialog_vitro-image_XG5PD8h","vitro-exception":"_system-exception-dialog_vitro-exception_2bLGF01","vitro-scrollbar-content":"_system-exception-dialog_vitro-scrollbar-content_2sob8Xl","vitro-label":"_system-exception-dialog_vitro-label_1Nbb_It","vitro-input":"_system-exception-dialog_vitro-input_262484M","vitro-flex":"_system-exception-dialog_vitro-flex_EHka5VC","vitro-settings-list":"_system-exception-dialog_vitro-settings-list_6N3QiPa","vitro-checkbox":"_system-exception-dialog_vitro-checkbox_354NjHR"};
+var styles$1u = {"vitro-system-exception-dialog":"_system-exception-dialog_vitro-system-exception-dialog_2UVdbuB","vitro-image":"_system-exception-dialog_vitro-image_XG5PD8h","vitro-exception":"_system-exception-dialog_vitro-exception_2bLGF01","vitro-exception-message":"_system-exception-dialog_vitro-exception-message_2S8ZwQP","vitro-label":"_system-exception-dialog_vitro-label_1Nbb_It","vitro-input":"_system-exception-dialog_vitro-input_262484M","vitro-flex":"_system-exception-dialog_vitro-flex_EHka5VC","vitro-settings-list":"_system-exception-dialog_vitro-settings-list_6N3QiPa","vitro-checkbox":"_system-exception-dialog_vitro-checkbox_354NjHR"};
 
 var settingsList = [LOCALE$c.SETTING_SCREENSHOT, LOCALE$c.SETTING_EXCEPTION_TEXT, LOCALE$c.SETTING_USER_NAME, LOCALE$c.SETTING_SYSTEM_INFO];
 var SystemExceptionDialog = function SystemExceptionDialog(props) {
@@ -66862,6 +67032,10 @@ var SystemExceptionDialog = function SystemExceptionDialog(props) {
   var updateIsMobileView = function updateIsMobileView() {
     setIsMobileView(window.innerWidth < exports.MOBILE_VIEW.WIDTH);
   };
+  var blockAction = function blockAction(e) {
+    e.preventDefault();
+    return false;
+  };
   var buttonList = [{
     onClick: onConfirm,
     text: props.labelConfirm || localeService.create(LOCALE$c.ACTION_SEND)
@@ -66899,11 +67073,16 @@ var SystemExceptionDialog = function SystemExceptionDialog(props) {
     ref: inputRef,
     className: styles$1u['vitro-input'],
     isMultiline: true
-  }), React__default.createElement("div", {
+  }), props.message && React__default.createElement("div", {
     className: styles$1u['vitro-exception']
-  }, React__default.createElement(ScrollBar, {
-    contentClassName: styles$1u['vitro-scrollbar-content']
-  }, props.stackTrace))));
+  }, React__default.createElement(ScrollBar, null, React__default.createElement("div", {
+    onCut: blockAction,
+    onPaste: blockAction,
+    onBeforeInput: blockAction,
+    spellCheck: false,
+    contentEditable: true,
+    className: styles$1u['vitro-exception-message']
+  }, props.message)))));
 };
 
 var styles$1v = {"vitro-star-button":"_star-button_vitro-star-button_1_mQ_Gq","vitro-hidden":"_star-button_vitro-hidden_oRKUkzt","vitro-active":"_star-button_vitro-active_2UV6u5C"};
@@ -66948,9 +67127,15 @@ var SiteItem = function SiteItem(props) {
       setIsShowStar(false);
     }
   };
+  var onMouseDown = function onMouseDown(e) {
+    if (props.onMouseDown) {
+      props.onMouseDown(e);
+    }
+  };
   var className = [styles$1w['vitro-item'], props.className || CTRL.EMPTY, props.isActive ? styles$1w['vitro-active'] : CTRL.EMPTY, props.isMobileView && styles$1w['vitro-mobile-view']].join(CTRL.SPACE);
   return React__default.createElement(FlexBox, {
     onClick: props.onClick,
+    onMouseDown: onMouseDown,
     onMouseOver: onMouseOver,
     onMouseLeave: onMouseLeave,
     className: className
@@ -67007,12 +67192,17 @@ var SiteSelect = function SiteSelect(props) {
   var updateIsMobileView = function updateIsMobileView() {
     window.innerWidth < exports.MOBILE_VIEW.WIDTH ? setIsMobileView(true) : setIsMobileView(false);
   };
-  var onSelect = function onSelect(item) {
+  var onItemSelect = function onItemSelect(item) {
     if (props.onChange) {
       props.onChange(item);
     }
     setIsExpanded(false);
   };
+  var onItemMouseDown = function onItemMouseDown(item, mouseEvent) {
+    if (props.onMouseDown && props.onMouseDown(item, mouseEvent)) {
+      setIsExpanded(false);
+    }
+  };
   var getItem = function getItem(item) {
     return React__default.createElement(SiteItem, {
       key: item.id,
@@ -67023,7 +67213,10 @@ var SiteSelect = function SiteSelect(props) {
       isActive: item.id === props.activeItem.id,
       isMobileView: isMobileView,
       onClick: function onClick() {
-        return onSelect(item);
+        return onItemSelect(item);
+      },
+      onMouseDown: function onMouseDown(e) {
+        return onItemMouseDown(item, e);
       },
       onStar: props.onStarChange ? function (isStarActive) {
         return onStarChange(isStarActive, item);
@@ -67068,7 +67261,7 @@ var SiteSelect = function SiteSelect(props) {
   }, React__default.createElement(SiteItem, Object.assign({}, props.rootItem, {
     isMobileView: isMobileView,
     onClick: function onClick() {
-      return onSelect(props.rootItem);
+      return onItemSelect(props.rootItem);
     },
     className: styles$1x['vitro-root-item']
   })), React__default.createElement(FlexBox, {