@vitrosoftware/common-ui-ts 1.1.70 → 1.1.72

package/dist/index.js

@@ -5,6 +5,7 @@ var React__default = _interopDefault(React);
 var commonUi = require('@vitrosoftware/common-ui');
 var inversifyReact = require('inversify-react');
 var jsxRuntime = require('react/jsx-runtime');
+var ReactSplitter = _interopDefault(require('m-react-splitters'));
 
 var app = {
 	common: {
@@ -164,6 +165,168 @@ var commonRu = {
 	app: app$1
 };
 
+function _defineProperties(target, props) {
+  for (var i = 0; i < props.length; i++) {
+    var descriptor = props[i];
+    descriptor.enumerable = descriptor.enumerable || false;
+    descriptor.configurable = true;
+    if ("value" in descriptor) descriptor.writable = true;
+    Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor);
+  }
+}
+function _createClass(Constructor, protoProps, staticProps) {
+  if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+  if (staticProps) _defineProperties(Constructor, staticProps);
+  Object.defineProperty(Constructor, "prototype", {
+    writable: false
+  });
+  return Constructor;
+}
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends.apply(this, arguments);
+}
+function _inheritsLoose(subClass, superClass) {
+  subClass.prototype = Object.create(superClass.prototype);
+  subClass.prototype.constructor = subClass;
+  _setPrototypeOf(subClass, superClass);
+}
+function _getPrototypeOf(o) {
+  _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) {
+    return o.__proto__ || Object.getPrototypeOf(o);
+  };
+  return _getPrototypeOf(o);
+}
+function _setPrototypeOf(o, p) {
+  _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
+    o.__proto__ = p;
+    return o;
+  };
+  return _setPrototypeOf(o, p);
+}
+function _isNativeReflectConstruct() {
+  if (typeof Reflect === "undefined" || !Reflect.construct) return false;
+  if (Reflect.construct.sham) return false;
+  if (typeof Proxy === "function") return true;
+  try {
+    Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
+    return true;
+  } catch (e) {
+    return false;
+  }
+}
+function _construct(Parent, args, Class) {
+  if (_isNativeReflectConstruct()) {
+    _construct = Reflect.construct.bind();
+  } else {
+    _construct = function _construct(Parent, args, Class) {
+      var a = [null];
+      a.push.apply(a, args);
+      var Constructor = Function.bind.apply(Parent, a);
+      var instance = new Constructor();
+      if (Class) _setPrototypeOf(instance, Class.prototype);
+      return instance;
+    };
+  }
+  return _construct.apply(null, arguments);
+}
+function _isNativeFunction(fn) {
+  return Function.toString.call(fn).indexOf("[native code]") !== -1;
+}
+function _wrapNativeSuper(Class) {
+  var _cache = typeof Map === "function" ? new Map() : undefined;
+  _wrapNativeSuper = function _wrapNativeSuper(Class) {
+    if (Class === null || !_isNativeFunction(Class)) return Class;
+    if (typeof Class !== "function") {
+      throw new TypeError("Super expression must either be null or a function");
+    }
+    if (typeof _cache !== "undefined") {
+      if (_cache.has(Class)) return _cache.get(Class);
+      _cache.set(Class, Wrapper);
+    }
+    function Wrapper() {
+      return _construct(Class, arguments, _getPrototypeOf(this).constructor);
+    }
+    Wrapper.prototype = Object.create(Class.prototype, {
+      constructor: {
+        value: Wrapper,
+        enumerable: false,
+        writable: true,
+        configurable: true
+      }
+    });
+    return _setPrototypeOf(Wrapper, Class);
+  };
+  return _wrapNativeSuper(Class);
+}
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+  return target;
+}
+function _unsupportedIterableToArray(o, minLen) {
+  if (!o) return;
+  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === "Object" && o.constructor) n = o.constructor.name;
+  if (n === "Map" || n === "Set") return Array.from(o);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+}
+function _arrayLikeToArray(arr, len) {
+  if (len == null || len > arr.length) len = arr.length;
+  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
+  return arr2;
+}
+function _createForOfIteratorHelperLoose(o, allowArrayLike) {
+  var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
+  if (it) return (it = it.call(o)).next.bind(it);
+  if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
+    if (it) o = it;
+    var i = 0;
+    return function () {
+      if (i >= o.length) return {
+        done: true
+      };
+      return {
+        done: false,
+        value: o[i++]
+      };
+    };
+  }
+  throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _toPrimitive(input, hint) {
+  if (typeof input !== "object" || input === null) return input;
+  var prim = input[Symbol.toPrimitive];
+  if (prim !== undefined) {
+    var res = prim.call(input, hint || "default");
+    if (typeof res !== "object") return res;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return (hint === "string" ? String : Number)(input);
+}
+function _toPropertyKey(arg) {
+  var key = _toPrimitive(arg, "string");
+  return typeof key === "symbol" ? key : String(key);
+}
+
 var CTRL = function CTRL() {};
 CTRL.DOT = '.';
 CTRL.SEMICOLON = ';';
@@ -194,7 +357,7 @@ CTRL.QUOTATION_MARK = '\'';
 CTRL.ZERO = '0';
 CTRL.ASTERISK = '*';
 
-var styles = {"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-separator":"_breadcrumbs_vitro-separator_3RKZZBc","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"};
+var styles = {"vitro-breadcrumbs":"_breadcrumbs_vitro-breadcrumbs_3r4NcQY","vitro-breadcrumbs-list-container":"_breadcrumbs_vitro-breadcrumbs-list-container_OVqyIE3","vitro-breadcrumbs-list":"_breadcrumbs_vitro-breadcrumbs-list_1SNtgtJ","vitro-separator":"_breadcrumbs_vitro-separator_3RKZZBc","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"};
 
 var Item = function Item(props) {
   var onClick = function onClick() {
@@ -269,6 +432,8 @@ var ScrollBar = function ScrollBar(props) {
   EVENT["CONTEXTMENU"] = "contextmenu";
 })(exports.EVENT || (exports.EVENT = {}));
 
+var ELEMENT_CANVAS = 'canvas';
+var CANVAS_CONTEXT = '2d';
 var Breadcrumbs = function Breadcrumbs(props) {
   var _useState = React.useState([]),
     displayItemList = _useState[0],
@@ -276,7 +441,7 @@ var Breadcrumbs = function Breadcrumbs(props) {
   var _useState2 = React.useState([]),
     dropdownItemList = _useState2[0],
     setDropdownItemList = _useState2[1];
-  var _useState3 = React.useState([]),
+  var _useState3 = React.useState(props.itemList || []),
     itemList = _useState3[0],
     setItemList = _useState3[1];
   var _useState4 = React.useState(null),
@@ -288,60 +453,96 @@ var Breadcrumbs = function Breadcrumbs(props) {
   var _useState6 = React.useState(null),
     windowWidth = _useState6[0],
     setWindowWidth = _useState6[1];
-  var _useState7 = React.useState(false),
-    isMobileView = _useState7[0],
-    setIsMobileView = _useState7[1];
+  var _useState7 = React.useState(null),
+    containerWidth = _useState7[0],
+    setContainerWidth = _useState7[1];
+  var _useState8 = React.useState(false),
+    isMobileView = _useState8[0],
+    setIsMobileView = _useState8[1];
+  var resizeTimeout = React.useMemo(function () {
+    return {
+      id: null
+    };
+  }, []);
   var menuRef = React.useRef(null);
-  var updateBreadcrumbsView = function updateBreadcrumbsView() {
-    if (windowWidth) {
-      windowWidth < 800 ? setIsMobileView(true) : setIsMobileView(false);
+  var containerRef = React.useRef(null);
+  var listRef = React.useRef(null);
+  var resizeObserver = new window.ResizeObserver(function (entries) {
+    for (var _iterator = _createForOfIteratorHelperLoose(entries), _step; !(_step = _iterator()).done;) {
+      var entry = _step.value;
+      if (containerRef && entry.target === containerRef.current) {
+        if (resizeTimeout.id) {
+          clearTimeout(resizeTimeout.id);
+        }
+        resizeTimeout.id = setTimeout(function () {
+          var _containerRef$current;
+          resizeTimeout.id = null;
+          setContainerWidth(((_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.clientWidth) || null);
+        }, 200);
+      }
     }
-  };
+  });
   React.useEffect(function () {
     updateBreadcrumbsView();
   }, [windowWidth]);
   React.useEffect(function () {
     window.addEventListener(exports.EVENT.MOUSEDOWN, clickOutside);
     window.addEventListener(exports.EVENT.RESIZE, handleResize);
-    handleResize();
-    return function () {
-      window.removeEventListener(exports.EVENT.MOUSEDOWN, clickOutside);
-      window.removeEventListener(exports.EVENT.RESIZE, handleResize);
-    };
-  }, []);
-  React.useEffect(function () {
     if (props.updateEvent) {
       window.addEventListener(props.updateEvent, updateItemList);
     }
     if (props.resetEvent) {
       window.addEventListener(props.resetEvent, resetItemList);
     }
+    handleResize();
     return function () {
+      window.removeEventListener(exports.EVENT.MOUSEDOWN, clickOutside);
+      window.removeEventListener(exports.EVENT.RESIZE, handleResize);
       if (props.updateEvent) {
         window.removeEventListener(props.updateEvent, updateItemList);
       }
       if (props.resetEvent) {
         window.removeEventListener(props.resetEvent, resetItemList);
       }
+      resizeObserver.disconnect();
     };
   }, []);
   React.useEffect(function () {
-    var initialItemList = props.itemList && props.itemList.length ? props.itemList : itemList;
-    if (initialItemList && initialItemList.length) {
+    if (containerRef && containerRef.current) {
+      resizeObserver.observe(containerRef.current);
+    }
+  }, [containerRef]);
+  React.useEffect(function () {
+    if (props.itemList) {
+      setItemList(getItemList(props.itemList));
+    }
+  }, [props.itemList]);
+  React.useEffect(function () {
+    if (itemList && itemList.length) {
       if (isMobileView) {
-        initItemListMobileView(initialItemList);
+        initItemListMobileView(itemList);
       } else {
-        initItemList(initialItemList);
+        initItemList(itemList);
       }
     } else {
       setDisplayItemList([]);
       setDropdownItemList([]);
     }
-  }, [props.itemList, itemList]);
+  }, [itemList]);
+  React.useEffect(function () {
+    if (itemList && itemList.length && !isMobileView) {
+      initItemList(itemList);
+    }
+  }, [containerWidth]);
+  var updateBreadcrumbsView = function updateBreadcrumbsView() {
+    if (windowWidth) {
+      windowWidth < 800 ? setIsMobileView(true) : setIsMobileView(false);
+    }
+  };
   var updateItemList = function updateItemList(e) {
     if (props.getItemList) {
       props.getItemList(e).then(function (list) {
-        setItemList(list);
+        setItemList(getItemList(list));
       });
     }
   };
@@ -349,23 +550,68 @@ var Breadcrumbs = function Breadcrumbs(props) {
     setItemList([]);
   };
   var initItemListMobileView = function initItemListMobileView(itemList) {
-    var lastItem = itemList[itemList.length - 1];
+    var list = [].concat(itemList);
+    var lastItem = list[list.length - 1];
     if (!props.wrapRoot) {
-      var root = itemList.shift();
+      var root = list.shift();
       setRootItem(root);
     }
     setDisplayItemList([lastItem]);
-    setDropdownItemList(itemList.slice(0, itemList.length - 1));
+    setDropdownItemList(list.slice(0, list.length - 1).reverse());
   };
   var initItemList = function initItemList(itemList) {
-    var defaultDisplayItemCount = 5;
-    var displayItemCount = props.displayItemCount || defaultDisplayItemCount;
+    var list = [].concat(itemList);
     if (!props.wrapRoot) {
-      var root = itemList.shift();
+      var root = list.shift();
       setRootItem(root);
     }
-    setDisplayItemList(itemList.slice(-displayItemCount));
-    setDropdownItemList(itemList.slice(0, -displayItemCount));
+    var count = getDisplayItemCount(list);
+    setDisplayItemList(list.slice(-count));
+    setDropdownItemList(list.slice(0, -count).reverse());
+  };
+  var getItemList = function getItemList(itemList) {
+    if (listRef.current) {
+      var canvas = document.createElement(ELEMENT_CANVAS);
+      var font = window.getComputedStyle(listRef.current).font;
+      var newItemList = itemList.map(function (item) {
+        return _extends({}, item, {
+          width: getTextWidth(item.text, canvas, font)
+        });
+      });
+      return newItemList;
+    }
+    return itemList;
+  };
+  var getTextWidth = function getTextWidth(text, canvas, font) {
+    var context = canvas.getContext(CANVAS_CONTEXT);
+    context.font = font;
+    var _context$measureText = context.measureText(text),
+      width = _context$measureText.width;
+    return width + 24;
+  };
+  var getMaxWidth = function getMaxWidth() {
+    if (containerRef && containerRef.current && listRef && listRef.current) {
+      return listRef.current.offsetWidth;
+    }
+    return 0;
+  };
+  var getDisplayItemCount = function getDisplayItemCount(itemList) {
+    var maxWidth = getMaxWidth();
+    var itemCount = props.displayItemCount || 5;
+    var width = 0;
+    var list = [].concat(itemList).reverse();
+    for (var _iterator2 = _createForOfIteratorHelperLoose(list.entries()), _step2; !(_step2 = _iterator2()).done;) {
+      var _step2$value = _step2.value,
+        index = _step2$value[0],
+        item = _step2$value[1];
+      if (width + item.width < maxWidth) {
+        width += item.width;
+      } else {
+        itemCount = index < itemCount ? index : itemCount;
+        break;
+      }
+    }
+    return itemCount ? itemCount : 1;
   };
   var handleResize = function handleResize() {
     setWindowWidth(window.innerWidth);
@@ -388,9 +634,11 @@ var Breadcrumbs = function Breadcrumbs(props) {
   }, props.text ? React__default.createElement("h2", {
     className: titleClassName
   }, props.text) : null, React__default.createElement("div", {
-    className: styles['vitro-breadcrumbs-list-wrap']
+    className: styles['vitro-breadcrumbs-list-container'],
+    ref: containerRef
   }, React__default.createElement("ul", {
-    className: styles['vitro-breadcrumbs-list']
+    className: styles['vitro-breadcrumbs-list'],
+    ref: listRef
   }, displayItemList.map(function (item, i) {
     return React__default.createElement(Item, {
       id: item.id,
@@ -398,7 +646,7 @@ var Breadcrumbs = function Breadcrumbs(props) {
         return onItemClick(item);
       },
       isShowSeparator: i !== displayItemList.length - 1
-    }, item.text);
+    }, React__default.createElement("span", null, item.text));
   })), dropdownItemList.length ? React__default.createElement("div", {
     onClick: showDropdownMenu,
     className: styles['vitro-breadcrumbs-button']
@@ -20412,168 +20660,6 @@ var TreeView = function TreeView(props) {
   }));
 };
 
-function _defineProperties(target, props) {
-  for (var i = 0; i < props.length; i++) {
-    var descriptor = props[i];
-    descriptor.enumerable = descriptor.enumerable || false;
-    descriptor.configurable = true;
-    if ("value" in descriptor) descriptor.writable = true;
-    Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor);
-  }
-}
-function _createClass(Constructor, protoProps, staticProps) {
-  if (protoProps) _defineProperties(Constructor.prototype, protoProps);
-  if (staticProps) _defineProperties(Constructor, staticProps);
-  Object.defineProperty(Constructor, "prototype", {
-    writable: false
-  });
-  return Constructor;
-}
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-function _inheritsLoose(subClass, superClass) {
-  subClass.prototype = Object.create(superClass.prototype);
-  subClass.prototype.constructor = subClass;
-  _setPrototypeOf(subClass, superClass);
-}
-function _getPrototypeOf(o) {
-  _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) {
-    return o.__proto__ || Object.getPrototypeOf(o);
-  };
-  return _getPrototypeOf(o);
-}
-function _setPrototypeOf(o, p) {
-  _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
-    o.__proto__ = p;
-    return o;
-  };
-  return _setPrototypeOf(o, p);
-}
-function _isNativeReflectConstruct() {
-  if (typeof Reflect === "undefined" || !Reflect.construct) return false;
-  if (Reflect.construct.sham) return false;
-  if (typeof Proxy === "function") return true;
-  try {
-    Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
-    return true;
-  } catch (e) {
-    return false;
-  }
-}
-function _construct(Parent, args, Class) {
-  if (_isNativeReflectConstruct()) {
-    _construct = Reflect.construct.bind();
-  } else {
-    _construct = function _construct(Parent, args, Class) {
-      var a = [null];
-      a.push.apply(a, args);
-      var Constructor = Function.bind.apply(Parent, a);
-      var instance = new Constructor();
-      if (Class) _setPrototypeOf(instance, Class.prototype);
-      return instance;
-    };
-  }
-  return _construct.apply(null, arguments);
-}
-function _isNativeFunction(fn) {
-  return Function.toString.call(fn).indexOf("[native code]") !== -1;
-}
-function _wrapNativeSuper(Class) {
-  var _cache = typeof Map === "function" ? new Map() : undefined;
-  _wrapNativeSuper = function _wrapNativeSuper(Class) {
-    if (Class === null || !_isNativeFunction(Class)) return Class;
-    if (typeof Class !== "function") {
-      throw new TypeError("Super expression must either be null or a function");
-    }
-    if (typeof _cache !== "undefined") {
-      if (_cache.has(Class)) return _cache.get(Class);
-      _cache.set(Class, Wrapper);
-    }
-    function Wrapper() {
-      return _construct(Class, arguments, _getPrototypeOf(this).constructor);
-    }
-    Wrapper.prototype = Object.create(Class.prototype, {
-      constructor: {
-        value: Wrapper,
-        enumerable: false,
-        writable: true,
-        configurable: true
-      }
-    });
-    return _setPrototypeOf(Wrapper, Class);
-  };
-  return _wrapNativeSuper(Class);
-}
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-  return target;
-}
-function _unsupportedIterableToArray(o, minLen) {
-  if (!o) return;
-  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
-  var n = Object.prototype.toString.call(o).slice(8, -1);
-  if (n === "Object" && o.constructor) n = o.constructor.name;
-  if (n === "Map" || n === "Set") return Array.from(o);
-  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
-}
-function _arrayLikeToArray(arr, len) {
-  if (len == null || len > arr.length) len = arr.length;
-  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
-  return arr2;
-}
-function _createForOfIteratorHelperLoose(o, allowArrayLike) {
-  var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
-  if (it) return (it = it.call(o)).next.bind(it);
-  if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
-    if (it) o = it;
-    var i = 0;
-    return function () {
-      if (i >= o.length) return {
-        done: true
-      };
-      return {
-        done: false,
-        value: o[i++]
-      };
-    };
-  }
-  throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-function _toPrimitive(input, hint) {
-  if (typeof input !== "object" || input === null) return input;
-  var prim = input[Symbol.toPrimitive];
-  if (prim !== undefined) {
-    var res = prim.call(input, hint || "default");
-    if (typeof res !== "object") return res;
-    throw new TypeError("@@toPrimitive must return a primitive value.");
-  }
-  return (hint === "string" ? String : Number)(input);
-}
-function _toPropertyKey(arg) {
-  var key = _toPrimitive(arg, "string");
-  return typeof key === "symbol" ? key : String(key);
-}
-
 var w$1 = window;
 if (!w$1.tableViewList) {
   w$1.tableViewList = new Map();
@@ -20969,6 +21055,7 @@ var ATTRIBUTE;
   ATTRIBUTE["ORIG_NAME"] = "Orig";
   ATTRIBUTE["ALIGN"] = "Align";
   ATTRIBUTE["TIP"] = "Tip";
+  ATTRIBUTE["TIP_POSITION"] = "TipPosition";
 })(ATTRIBUTE || (ATTRIBUTE = {}));
 var DRAG_ITEM_TYPE;
 (function (DRAG_ITEM_TYPE) {
@@ -21029,6 +21116,7 @@ var ACTION;
 (function (ACTION) {
   ACTION["SHOW_POPUP_MENU"] = "ShowPopupMenu";
   ACTION["SHOW_MENU"] = "ShowMenu";
+  ACTION["CLEAR_FILTER"] = "ClearFilter";
 })(ACTION || (ACTION = {}));
 var SECTION;
 (function (SECTION) {
@@ -21962,39 +22050,57 @@ var classnames = createCommonjsModule(function (module) {
 
 	var hasOwn = {}.hasOwnProperty;
 
-	function classNames() {
-		var classes = [];
+	function classNames () {
+		var classes = '';
 
 		for (var i = 0; i < arguments.length; i++) {
 			var arg = arguments[i];
-			if (!arg) continue;
+			if (arg) {
+				classes = appendClass(classes, parseValue(arg));
+			}
+		}
 
-			var argType = typeof arg;
+		return classes;
+	}
 
-			if (argType === 'string' || argType === 'number') {
-				classes.push(arg);
-			} else if (Array.isArray(arg)) {
-				if (arg.length) {
-					var inner = classNames.apply(null, arg);
-					if (inner) {
-						classes.push(inner);
-					}
-				}
-			} else if (argType === 'object') {
-				if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {
-					classes.push(arg.toString());
-					continue;
-				}
+	function parseValue (arg) {
+		if (typeof arg === 'string' || typeof arg === 'number') {
+			return arg;
+		}
 
-				for (var key in arg) {
-					if (hasOwn.call(arg, key) && arg[key]) {
-						classes.push(key);
-					}
-				}
+		if (typeof arg !== 'object') {
+			return '';
+		}
+
+		if (Array.isArray(arg)) {
+			return classNames.apply(null, arg);
+		}
+
+		if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {
+			return arg.toString();
+		}
+
+		var classes = '';
+
+		for (var key in arg) {
+			if (hasOwn.call(arg, key) && arg[key]) {
+				classes = appendClass(classes, key);
 			}
 		}
 
-		return classes.join(' ');
+		return classes;
+	}
+
+	function appendClass (value, newClass) {
+		if (!newClass) {
+			return value;
+		}
+	
+		if (value) {
+			return value + ' ' + newClass;
+		}
+	
+		return value + newClass;
 	}
 
 	if ( module.exports) {
@@ -55095,6 +55201,29 @@ function useEventCallback(fn) {
   }, [ref]);
 }
 
+var divWithClassName = (className => /*#__PURE__*/React.forwardRef((p, ref) => /*#__PURE__*/jsxRuntime.jsx("div", {
+  ...p,
+  ref: ref,
+  className: classnames(p.className, className)
+})));
+
+const DivStyledAsH4 = divWithClassName('h4');
+DivStyledAsH4.displayName = 'DivStyledAsH4';
+const AlertHeading = /*#__PURE__*/React.forwardRef(({
+  className,
+  bsPrefix,
+  as: Component = DivStyledAsH4,
+  ...props
+}, ref) => {
+  bsPrefix = useBootstrapPrefix(bsPrefix, 'alert-heading');
+  return /*#__PURE__*/jsxRuntime.jsx(Component, {
+    ref: ref,
+    className: classnames(className, bsPrefix),
+    ...props
+  });
+});
+AlertHeading.displayName = 'AlertHeading';
+
 /**
  * A convenience hook around `useState` designed to be paired with
  * the component [callback ref](https://reactjs.org/docs/refs-and-the-dom.html#callback-refs) api.
@@ -55338,6 +55467,21 @@ const Anchor = /*#__PURE__*/React.forwardRef((_ref, ref) => {
 });
 Anchor.displayName = 'Anchor';
 
+const AlertLink = /*#__PURE__*/React.forwardRef(({
+  className,
+  bsPrefix,
+  as: Component = Anchor,
+  ...props
+}, ref) => {
+  bsPrefix = useBootstrapPrefix(bsPrefix, 'alert-link');
+  return /*#__PURE__*/jsxRuntime.jsx(Component, {
+    ref: ref,
+    className: classnames(className, bsPrefix),
+    ...props
+  });
+});
+AlertLink.displayName = 'AlertLink';
+
 const fadeStyles = {
   [ENTERING]: 'show',
   [ENTERED]: 'show'
@@ -55401,55 +55545,6 @@ const CloseButton = /*#__PURE__*/React.forwardRef(({
 CloseButton.displayName = 'CloseButton';
 CloseButton.propTypes = propTypes$1;
 
-var divWithClassName = (className => /*#__PURE__*/React.forwardRef((p, ref) => /*#__PURE__*/jsxRuntime.jsx("div", {
-  ...p,
-  ref: ref,
-  className: classnames(p.className, className)
-})));
-
-var rHyphen = /-(.)/g;
-function camelize(string) {
-  return string.replace(rHyphen, function (_, chr) {
-    return chr.toUpperCase();
-  });
-}
-
-const pascalCase = str => str[0].toUpperCase() + camelize(str).slice(1);
-// TODO: emstricten & fix the typing here! `createWithBsPrefix<TElementType>...`
-function createWithBsPrefix(prefix, {
-  displayName = pascalCase(prefix),
-  Component,
-  defaultProps
-} = {}) {
-  const BsComponent = /*#__PURE__*/React.forwardRef(({
-    className,
-    bsPrefix,
-    as: Tag = Component || 'div',
-    ...props
-  }, ref) => {
-    const componentProps = {
-      ...defaultProps,
-      ...props
-    };
-    const resolvedPrefix = useBootstrapPrefix(bsPrefix, prefix);
-    return /*#__PURE__*/jsxRuntime.jsx(Tag, {
-      ref: ref,
-      className: classnames(className, resolvedPrefix),
-      ...componentProps
-    });
-  });
-  BsComponent.displayName = displayName;
-  return BsComponent;
-}
-
-const DivStyledAsH4 = divWithClassName('h4');
-DivStyledAsH4.displayName = 'DivStyledAsH4';
-const AlertHeading = createWithBsPrefix('alert-heading', {
-  Component: DivStyledAsH4
-});
-const AlertLink = createWithBsPrefix('alert-link', {
-  Component: Anchor
-});
 const Alert = /*#__PURE__*/React.forwardRef((uncontrolledProps, ref) => {
   const {
     bsPrefix,
@@ -55606,7 +55701,8 @@ function useTimeout() {
     }
     return {
       set,
-      clear
+      clear,
+      handleRef
     };
   }, []);
 }
@@ -58005,7 +58101,7 @@ function $b5e257d569688ac6$var$useCounter(isDisabled = false) {
     let ref = (React.useRef)(null);
     // eslint-disable-next-line rulesdir/pure-render
     if (ref.current === null && !isDisabled) {
-        var _React___SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED, _React___SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED_ReactCurrentOwner;
+        var _React___SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED_ReactCurrentOwner, _React___SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
         // In strict mode, React renders components twice, and the ref will be reset to null on the second render.
         // This means our id counter will be incremented twice instead of once. This is a problem because on the
         // server, components are only rendered once and so ids generated on the server won't match the client.
@@ -58398,6 +58494,40 @@ Dropdown.Item = DropdownItem;
 const DropdownContext$1 = /*#__PURE__*/React.createContext({});
 DropdownContext$1.displayName = 'DropdownContext';
 
+const DropdownDivider = /*#__PURE__*/React.forwardRef(({
+  className,
+  bsPrefix,
+  as: Component = 'hr',
+  role = 'separator',
+  ...props
+}, ref) => {
+  bsPrefix = useBootstrapPrefix(bsPrefix, 'dropdown-divider');
+  return /*#__PURE__*/jsxRuntime.jsx(Component, {
+    ref: ref,
+    className: classnames(className, bsPrefix),
+    role: role,
+    ...props
+  });
+});
+DropdownDivider.displayName = 'DropdownDivider';
+
+const DropdownHeader = /*#__PURE__*/React.forwardRef(({
+  className,
+  bsPrefix,
+  as: Component = 'div',
+  role = 'heading',
+  ...props
+}, ref) => {
+  bsPrefix = useBootstrapPrefix(bsPrefix, 'dropdown-header');
+  return /*#__PURE__*/jsxRuntime.jsx(Component, {
+    ref: ref,
+    className: classnames(className, bsPrefix),
+    role: role,
+    ...props
+  });
+});
+DropdownHeader.displayName = 'DropdownHeader';
+
 const DropdownItem$1 = /*#__PURE__*/React.forwardRef(({
   bsPrefix,
   className,
@@ -58425,6 +58555,21 @@ const DropdownItem$1 = /*#__PURE__*/React.forwardRef(({
 });
 DropdownItem$1.displayName = 'DropdownItem';
 
+const DropdownItemText = /*#__PURE__*/React.forwardRef(({
+  className,
+  bsPrefix,
+  as: Component = 'span',
+  ...props
+}, ref) => {
+  bsPrefix = useBootstrapPrefix(bsPrefix, 'dropdown-item-text');
+  return /*#__PURE__*/jsxRuntime.jsx(Component, {
+    ref: ref,
+    className: classnames(className, bsPrefix),
+    ...props
+  });
+});
+DropdownItemText.displayName = 'DropdownItemText';
+
 const context$1 = /*#__PURE__*/React.createContext(null);
 context$1.displayName = 'InputGroupContext';
 
@@ -58580,20 +58725,6 @@ const DropdownToggle$1 = /*#__PURE__*/React.forwardRef(({
 });
 DropdownToggle$1.displayName = 'DropdownToggle';
 
-const DropdownHeader = createWithBsPrefix('dropdown-header', {
-  defaultProps: {
-    role: 'heading'
-  }
-});
-const DropdownDivider = createWithBsPrefix('dropdown-divider', {
-  Component: 'hr',
-  defaultProps: {
-    role: 'separator'
-  }
-});
-const DropdownItemText = createWithBsPrefix('dropdown-item-text', {
-  Component: 'span'
-});
 const Dropdown$1 = /*#__PURE__*/React.forwardRef((pProps, ref) => {
   const {
     bsPrefix,
@@ -59111,7 +59242,20 @@ module.exports = exports['default'];
 
 unwrapExports(all_1);
 
-var NavItem$1 = createWithBsPrefix('nav-item');
+const NavItem$1 = /*#__PURE__*/React.forwardRef(({
+  className,
+  bsPrefix,
+  as: Component = 'div',
+  ...props
+}, ref) => {
+  bsPrefix = useBootstrapPrefix(bsPrefix, 'nav-item');
+  return /*#__PURE__*/jsxRuntime.jsx(Component, {
+    ref: ref,
+    className: classnames(className, bsPrefix),
+    ...props
+  });
+});
+NavItem$1.displayName = 'NavItem';
 
 const NavLink = /*#__PURE__*/React.forwardRef(({
   bsPrefix,
@@ -59325,9 +59469,35 @@ const Overlay = /*#__PURE__*/React.forwardRef((props, outerRef) => {
 });
 Overlay.displayName = 'Overlay';
 
-var PopoverHeader = createWithBsPrefix('popover-header');
+const PopoverHeader = /*#__PURE__*/React.forwardRef(({
+  className,
+  bsPrefix,
+  as: Component = 'div',
+  ...props
+}, ref) => {
+  bsPrefix = useBootstrapPrefix(bsPrefix, 'popover-header');
+  return /*#__PURE__*/jsxRuntime.jsx(Component, {
+    ref: ref,
+    className: classnames(className, bsPrefix),
+    ...props
+  });
+});
+PopoverHeader.displayName = 'PopoverHeader';
 
-var PopoverBody = createWithBsPrefix('popover-body');
+const PopoverBody = /*#__PURE__*/React.forwardRef(({
+  className,
+  bsPrefix,
+  as: Component = 'div',
+  ...props
+}, ref) => {
+  bsPrefix = useBootstrapPrefix(bsPrefix, 'popover-body');
+  return /*#__PURE__*/jsxRuntime.jsx(Component, {
+    ref: ref,
+    className: classnames(className, bsPrefix),
+    ...props
+  });
+});
+PopoverBody.displayName = 'PopoverBody';
 
 // Need to use this instead of typeof Component to get proper type checking.
 
@@ -59501,10 +59671,11 @@ const Overlay$1 = /*#__PURE__*/React.forwardRef(({
     popperConfig == null ? void 0 : popperConfig.onFirstUpdate == null ? void 0 : popperConfig.onFirstUpdate(state);
   });
   useIsomorphicEffect(() => {
-    if (firstRenderedState) {
+    if (firstRenderedState && outerProps.target) {
+      // Must wait for target element to resolve before updating popper.
       popperRef.current.scheduleUpdate == null ? void 0 : popperRef.current.scheduleUpdate();
     }
-  }, [firstRenderedState]);
+  }, [firstRenderedState, outerProps.target]);
   React.useEffect(() => {
     if (!outerShow) {
       setFirstRenderedState(null);
@@ -59588,7 +59759,8 @@ handler, args, relatedNative) {
     handler(...args);
   }
 }
-function OverlayTrigger({
+const triggerType = propTypes.oneOf(['click', 'hover', 'focus']);
+const OverlayTrigger = ({
   trigger = ['hover', 'focus'],
   overlay,
   children,
@@ -59600,7 +59772,7 @@ function OverlayTrigger({
   placement,
   flip = placement && placement.indexOf('auto') !== -1,
   ...props
-}) {
+}) => {
   const triggerNodeRef = React.useRef(null);
   const mergedRef = useMergedRefs(triggerNodeRef, children.ref);
   const timeout = useTimeout();
@@ -59683,7 +59855,7 @@ function OverlayTrigger({
       children: overlay
     })]
   });
-}
+};
 
 var Icon = function Icon(props) {
   return React__default.createElement(React__default.Fragment, null, React__default.createElement("img", {
@@ -59701,9 +59873,11 @@ var Icon = function Icon(props) {
   }));
 };
 
+var UNIT = function UNIT() {};
+UNIT.PX = 'px';
+
 var styles$6 = {"vitro-button":"_button_vitro-button_hVfBuSO","vitro-animation-ripple":"_button_vitro-animation-ripple_7CFAk_a"};
 
-var PX_UNIT = 'px';
 var HTML_ELEMENT_SPAN = 'span';
 var TYPE_BUTTON = 'button';
 var Button$2 = function Button(props) {
@@ -59719,9 +59893,9 @@ var Button$2 = function Button(props) {
       var circle = window.document.createElement(HTML_ELEMENT_SPAN);
       var diameter = Math.max(button.clientWidth, button.clientHeight);
       var radius = diameter / 2;
-      circle.style.width = circle.style.height = diameter + PX_UNIT;
-      circle.style.left = e.clientX - button.getBoundingClientRect().left - radius + PX_UNIT;
-      circle.style.top = e.clientY - button.getBoundingClientRect().top - radius + PX_UNIT;
+      circle.style.width = circle.style.height = diameter + UNIT.PX;
+      circle.style.left = e.clientX - button.getBoundingClientRect().left - radius + UNIT.PX;
+      circle.style.top = e.clientY - button.getBoundingClientRect().top - radius + UNIT.PX;
       circle.classList.add('vitro-effect-ripple');
       var ripple = button.getElementsByClassName('vitro-effect-ripple')[0];
       if (ripple) {
@@ -60713,12 +60887,11 @@ var GetGroupControl = function GetGroupControl(props) {
 
 var styles$e = {"vitro-label":"_label_vitro-label_it8WNUE","vitro-required":"_label_vitro-required_2-bSGif"};
 
-var PX_UNIT$1 = 'px';
 var Label = function Label(props) {
   return React__default.createElement("div", {
     className: styles$e['vitro-label'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY),
     style: props.width ? {
-      width: props.width + PX_UNIT$1
+      width: props.width + UNIT.PX
     } : undefined
   }, props.text, props.isRequired && React__default.createElement("span", {
     className: styles$e['vitro-required']
@@ -60741,7 +60914,6 @@ KEY_CODE.ENTER = 13;
 
 var styles$f = {"vitro-control":"_input_vitro-control_1DmPFkF","vitro-focus":"_input_vitro-focus_1txynr8","vitro-label":"_input_vitro-label_2XBESiY","vitro-read-only":"_input_vitro-read-only_3f-cBbK","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 PX_UNIT$2 = 'px';
 var Input = React.forwardRef(function (props, ref) {
   var control;
   var _useState = React.useState({}),
@@ -60763,9 +60935,9 @@ var Input = React.forwardRef(function (props, ref) {
   }, [props.errorMessage, props.isError]);
   React.useEffect(function () {
     var jsonStyle = {};
-    if (props.height) jsonStyle.height = props.height + PX_UNIT$2;
-    if (props.minHeight) jsonStyle.minHeight = props.minHeight + PX_UNIT$2;
-    if (props.maxHeight) jsonStyle.maxHeight = props.maxHeight + PX_UNIT$2;
+    if (props.height) jsonStyle.height = props.height + UNIT.PX;
+    if (props.minHeight) jsonStyle.minHeight = props.minHeight + UNIT.PX;
+    if (props.maxHeight) jsonStyle.maxHeight = props.maxHeight + UNIT.PX;
     setStyle(jsonStyle);
   }, [props.height, props.minHeight, props.maxHeight]);
   React.useImperativeHandle(ref, function () {
@@ -60955,7 +61127,7 @@ var Avatar = function Avatar(props) {
   var className = styles$h['vitro-avatar'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY);
   return React__default.createElement("div", {
     className: className,
-    style: {
+    style: props.image ? {} : {
       background: getBackground()
     }
   }, props.image ? React__default.createElement("img", {
@@ -61475,51 +61647,88 @@ var LABEL_POSITION;
   LABEL_POSITION["LEFT"] = "left";
 })(LABEL_POSITION || (LABEL_POSITION = {}));
 
-var styles$n = {"vitro-control":"_date-picker_vitro-control_2AYXegb","vitro-button-copy":"_date-picker_vitro-button-copy_1cGY1Uu","vitro-control-container":"_date-picker_vitro-control-container_2CVwecs","vitro-focus":"_date-picker_vitro-focus_2cJKcKr","vitro-label":"_date-picker_vitro-label_2jh9qxb","vitro-read-only":"_date-picker_vitro-read-only_2NZoMN5","vitro-error":"_date-picker_vitro-error_3DkgZiN","vitro-left-label":"_date-picker_vitro-left-label_ZFhZFS9","vitro-error-text":"_date-picker_vitro-error-text_15CdrRj"};
+var PLACEMENT$1;
+(function (PLACEMENT) {
+  PLACEMENT["TOP"] = "top";
+  PLACEMENT["BOTTOM"] = "bottom";
+  PLACEMENT["LEFT"] = "left";
+  PLACEMENT["RIGHT"] = "right";
+  PLACEMENT["AUTO"] = "auto";
+})(PLACEMENT$1 || (PLACEMENT$1 = {}));
+
+var styles$n = {"vitro-control":"_date-picker_vitro-control_2AYXegb","vitro-display-none":"_date-picker_vitro-display-none_2wJx8XG","vitro-button-copy":"_date-picker_vitro-button-copy_1cGY1Uu","vitro-control-container":"_date-picker_vitro-control-container_2CVwecs","vitro-focus":"_date-picker_vitro-focus_2cJKcKr","vitro-label":"_date-picker_vitro-label_2jh9qxb","vitro-read-only":"_date-picker_vitro-read-only_2NZoMN5","vitro-error":"_date-picker_vitro-error_3DkgZiN","vitro-left-label":"_date-picker_vitro-left-label_ZFhZFS9","vitro-error-text":"_date-picker_vitro-error-text_15CdrRj"};
 
 var $$3 = window.$;
 var DatePicker = React.forwardRef(function (props, ref) {
-  var _useState = React.useState(CTRL.EMPTY),
-    state = _useState[0],
-    setState = _useState[1];
-  var container = React.useRef(null);
+  var _useState = React.useState(false),
+    ready = _useState[0],
+    setReady = _useState[1];
+  var _useState2 = React.useState(CTRL.EMPTY),
+    state = _useState2[0],
+    setState = _useState2[1];
+  var _useState3 = React.useState(null),
+    style = _useState3[0],
+    setStyle = _useState3[1];
+  var _useState4 = React.useState(false),
+    isOpened = _useState4[0],
+    setIsOpened = _useState4[1];
+  var controlRef = React.useRef(null);
+  var containerRef = React.useRef(null);
   var inputRef = React.useRef(null);
   var componentName = 'kendoDatePicker';
   React.useEffect(function () {
-    var config = {
-      culture: props.culture || CULTURE.RU,
-      dateInput: true,
-      value: props.value,
-      start: props.start,
-      depth: props.depth,
-      format: props.format,
-      disableDates: function disableDates(date) {
-        if (!props.isWorkDay) {
-          return false;
-        }
-        return props.isWorkDay(date);
-      },
-      open: function open(e) {
-        onFocus(e);
-        if (props.onOpen) {
-          props.onOpen(e, $$3(container.current));
-        }
-      },
-      change: function change(e) {
-        if (props.onChange) {
-          props.onChange(e.sender.value(), props.name);
+    if (containerRef.current && inputRef.current) {
+      init();
+    }
+  }, [inputRef, containerRef]);
+  React.useEffect(function () {
+    if (ready) {
+      if (props.value) {
+        $$3(inputRef.current).data(componentName).value(new Date(props.value));
+      } else {
+        $$3(inputRef.current).data(componentName).value(null);
+        setOptions({
+          dateInput: true
+        });
+      }
+    }
+  }, [props.value]);
+  React.useEffect(function () {
+    if (ready) {
+      setOptions({
+        disableDates: function disableDates(date) {
+          if (!props.isWorkDay) {
+            return false;
+          }
+          return props.isWorkDay(date);
         }
-      },
-      close: function close(e) {
-        onBlur(e);
-        if (props.onClose) {
-          props.onClose(e.sender.value(), props.name);
+      });
+    }
+  }, [props.isWorkDay]);
+  React.useEffect(function () {
+    props.errorMessage ? setState(styles$n['vitro-error']) : setState(CTRL.EMPTY);
+  }, [props.errorMessage]);
+  React.useEffect(function () {
+    if (isOpened && !props.isFlipDropdown && controlRef.current) {
+      setStyle({
+        width: controlRef.current.offsetWidth + UNIT.PX,
+        inset: controlRef.current.offsetHeight + UNIT.PX + " auto auto 0px"
+      });
+    } else {
+      setStyle(null);
+    }
+  }, [isOpened]);
+  React.useImperativeHandle(ref, function () {
+    return {
+      focus: function focus() {
+        if (inputRef.current) {
+          inputRef.current.focus();
         }
-      },
-      popup: {
-        appendTo: $$3(container.current)
       }
     };
+  });
+  var init = function init() {
+    var config = getConfig();
     if (props.minValue) {
       config.min = props.minValue;
     }
@@ -61533,74 +61742,41 @@ var DatePicker = React.forwardRef(function (props, ref) {
     var picker = $$3(inputRef.current).data(componentName);
     picker.enable(!props.isDisabled);
     picker.readonly(props.isReadOnly === true);
-  }, [inputRef]);
-  React.useEffect(function () {
-    if (props.value) {
-      $$3(inputRef.current).data(componentName).value(new Date(props.value));
-    } else {
-      $$3(inputRef.current).data(componentName).value(null);
-      $$3(inputRef.current).data(componentName).setOptions({
-        dateInput: true
-      });
-    }
-  }, [props.value]);
-  React.useEffect(function () {
-    $$3(inputRef.current).data(componentName).setOptions({
-      change: function change(e) {
-        if (props.onChange) {
-          props.onChange(e.sender.value(), props.name);
-        }
-      }
-    });
-  }, [props.onChange]);
-  React.useEffect(function () {
-    $$3(inputRef.current).data(componentName).setOptions({
+    setReady(true);
+  };
+  var getConfig = function getConfig() {
+    var config = {
+      culture: props.culture || CULTURE.RU,
+      dateInput: true,
+      value: props.value,
+      start: props.start,
+      depth: props.depth,
+      format: props.format,
+      animation: false,
       disableDates: function disableDates(date) {
         if (!props.isWorkDay) {
           return false;
         }
         return props.isWorkDay(date);
-      }
-    });
-  }, [props.isWorkDay]);
-  React.useEffect(function () {
-    $$3(inputRef.current).data(componentName).setOptions({
+      },
       open: function open(e) {
-        onFocus(e);
-        if (props.onOpen) {
-          props.onOpen(e, $$3(container.current));
-        }
-      }
-    });
-  }, [props.onOpen]);
-  React.useEffect(function () {
-    $$3(inputRef.current).data(componentName).setOptions({
+        onOpen(e);
+      },
+      change: function change(e) {
+        onChange(e);
+      },
       close: function close(e) {
-        onBlur(e);
-        if (props.onClose) {
-          props.onClose(e.sender.value(), props.name);
-        }
-      }
-    });
-  }, [props.onClose]);
-  React.useEffect(function () {
-    if (props.minValue) $$3(inputRef.current).data(componentName).min(props.minValue);
-  }, [props.minValue]);
-  React.useEffect(function () {
-    if (props.maxValue) $$3(inputRef.current).data(componentName).max(props.maxValue);
-  }, [props.maxValue]);
-  React.useEffect(function () {
-    props.errorMessage ? setState(styles$n['vitro-error']) : setState(CTRL.EMPTY);
-  }, [props.errorMessage]);
-  React.useImperativeHandle(ref, function () {
-    return {
-      focus: function focus() {
-        if (inputRef.current) {
-          inputRef.current.focus();
-        }
+        onClose(e);
+      },
+      popup: {
+        appendTo: $$3(containerRef.current)
       }
     };
-  });
+    return config;
+  };
+  var setOptions = function setOptions(options) {
+    $$3(inputRef.current).data(componentName).setOptions(options);
+  };
   var onFocus = function onFocus(e) {
     setState(styles$n['vitro-focus']);
     if (props.onFocus) {
@@ -61613,6 +61789,25 @@ var DatePicker = React.forwardRef(function (props, ref) {
       props.onBlur(e);
     }
   };
+  var onOpen = function onOpen(e) {
+    setIsOpened(true);
+    onFocus(e);
+    if (props.onOpen) {
+      props.onOpen(e, $$3(containerRef.current));
+    }
+  };
+  var onClose = function onClose(e) {
+    setIsOpened(false);
+    onBlur(e);
+    if (props.onClose) {
+      props.onClose(e.sender.value(), props.name);
+    }
+  };
+  var onChange = function onChange(e) {
+    if (props.onChange) {
+      props.onChange(e.sender.value(), props.name);
+    }
+  };
   var copyValue = function copyValue() {
     navigator.clipboard.writeText("" + props.value);
   };
@@ -61628,7 +61823,8 @@ var DatePicker = React.forwardRef(function (props, ref) {
     return classList.join(CTRL.SPACE);
   };
   return React__default.createElement("div", {
-    className: getClassName()
+    className: getClassName(),
+    ref: controlRef
   }, props.label && React__default.createElement(Label, {
     text: props.label,
     isRequired: props.isRequired,
@@ -61642,10 +61838,19 @@ var DatePicker = React.forwardRef(function (props, ref) {
   }), props.isReadOnly ? React__default.createElement("span", {
     className: styles$n['vitro-button-copy'],
     onClick: copyValue
-  }) : null, React__default.createElement("div", {
-    ref: container,
+  }) : null, props.isFlipDropdown ? React__default.createElement("div", {
+    ref: containerRef,
     className: styles$n['vitro-control-container']
-  }), props.errorMessage && React__default.createElement("span", {
+  }) : React__default.createElement(Overlay$1, {
+    show: true,
+    target: inputRef.current,
+    placement: PLACEMENT$1.AUTO
+  }, React__default.createElement("div", {
+    style: style ? style : {},
+    className: styles$n['vitro-control-container'] + (style ? CTRL.EMPTY : CTRL.SPACE + styles$n['vitro-display-none'])
+  }, React__default.createElement("div", {
+    ref: containerRef
+  }))), props.errorMessage && React__default.createElement("span", {
     className: styles$n['vitro-error-text']
   }, props.errorMessage));
 });
@@ -61667,60 +61872,105 @@ var COMPONENT_TYPE;
   COMPONENT_TYPE["MODERN"] = "modern";
 })(COMPONENT_TYPE || (COMPONENT_TYPE = {}));
 
-var styles$o = {"vitro-control":"_time-picker_vitro-control_1sx07It","vitro-button-copy":"_time-picker_vitro-button-copy_QZg3bTW","vitro-control-container":"_time-picker_vitro-control-container_3ys3rMN","vitro-focus":"_time-picker_vitro-focus_wmhPjvE","vitro-label":"_time-picker_vitro-label_2b97aCy","vitro-error":"_time-picker_vitro-error_2ZmK0I5","vitro-read-only":"_time-picker_vitro-read-only_NlE18Zm","vitro-left-label":"_time-picker_vitro-left-label_3NRmFYH","vitro-error-text":"_time-picker_vitro-error-text_2BNoBKW"};
+var styles$o = {"vitro-control":"_time-picker_vitro-control_1sx07It","vitro-display-none":"_time-picker_vitro-display-none_3GgWh46","vitro-button-copy":"_time-picker_vitro-button-copy_QZg3bTW","vitro-control-container":"_time-picker_vitro-control-container_3ys3rMN","vitro-focus":"_time-picker_vitro-focus_wmhPjvE","vitro-label":"_time-picker_vitro-label_2b97aCy","vitro-error":"_time-picker_vitro-error_2ZmK0I5","vitro-read-only":"_time-picker_vitro-read-only_NlE18Zm","vitro-left-label":"_time-picker_vitro-left-label_3NRmFYH","vitro-error-text":"_time-picker_vitro-error-text_2BNoBKW"};
 
 var $$4 = window.$;
 var TimePicker = React.forwardRef(function (props, ref) {
-  var _useState = React.useState(CTRL.EMPTY),
-    state = _useState[0],
-    setState = _useState[1];
-  var container = React.useRef(null);
+  var _useState = React.useState(false),
+    ready = _useState[0],
+    setReady = _useState[1];
+  var _useState2 = React.useState(CTRL.EMPTY),
+    state = _useState2[0],
+    setState = _useState2[1];
+  var _useState3 = React.useState(null),
+    style = _useState3[0],
+    setStyle = _useState3[1];
+  var _useState4 = React.useState(false),
+    isOpened = _useState4[0],
+    setIsOpened = _useState4[1];
+  var controlRef = React.useRef(null);
+  var containerRef = React.useRef(null);
   var inputRef = React.useRef(null);
   var componentName = 'kendoTimePicker';
   React.useEffect(function () {
-    $$4(inputRef.current).kendoTimePicker({
+    if (containerRef.current && inputRef.current) {
+      init();
+    }
+  }, [inputRef, containerRef]);
+  React.useEffect(function () {
+    if (isOpened && !props.isFlipDropdown && controlRef.current) {
+      setStyle({
+        width: controlRef.current.offsetWidth + UNIT.PX,
+        inset: controlRef.current.offsetHeight + UNIT.PX + " auto auto 0px"
+      });
+    } else {
+      setStyle(null);
+    }
+  }, [isOpened]);
+  React.useEffect(function () {
+    if (ready) {
+      $$4(inputRef.current).data(componentName).value(props.value);
+    }
+  }, [props.value]);
+  React.useImperativeHandle(ref, function () {
+    return {
+      focus: function focus() {
+        if (inputRef.current) {
+          inputRef.current.focus();
+        }
+      }
+    };
+  });
+  var init = function init() {
+    var config = getConfig();
+    $$4(inputRef.current).kendoTimePicker(config);
+    var picker = $$4(inputRef.current).data(componentName);
+    picker.enable(!props.isDisabled);
+    picker.readonly(props.isReadOnly === true);
+    setReady(true);
+  };
+  var getConfig = function getConfig() {
+    var config = {
       format: props.format || FORMAT.HH_MM,
       componentType: COMPONENT_TYPE.MODERN,
       culture: props.culture || CULTURE$1.RU,
       value: props.value,
+      animation: false,
       dateInput: true,
       change: function change(e) {
-        if (props.onChange) {
-          props.onChange(e.sender.value());
-        }
+        onChange(e);
       },
       open: function open(e) {
-        onFocus(e);
-        if (props.onOpen) {
-          props.onOpen(e, $$4(container.current));
-        }
+        onOpen(e);
       },
       close: function close(e) {
-        onBlur(e);
-        if (props.onClose) {
-          props.onClose(e, $$4(container.current));
-        }
+        onClose(e);
       },
       popup: {
-        appendTo: $$4(container.current)
-      }
-    });
-    var picker = $$4(inputRef.current).data(componentName);
-    picker.enable(!props.isDisabled);
-    picker.readonly(props.isReadOnly === true);
-  }, [inputRef]);
-  React.useEffect(function () {
-    $$4(inputRef.current).data(componentName).value(props.value);
-  }, [props.value]);
-  React.useImperativeHandle(ref, function () {
-    return {
-      focus: function focus() {
-        if (inputRef.current) {
-          inputRef.current.focus();
-        }
+        appendTo: $$4(containerRef.current)
       }
     };
-  });
+    return config;
+  };
+  var onOpen = function onOpen(e) {
+    setIsOpened(true);
+    onFocus(e);
+    if (props.onOpen) {
+      props.onOpen(e, $$4(containerRef.current));
+    }
+  };
+  var onClose = function onClose(e) {
+    setIsOpened(false);
+    onBlur(e);
+    if (props.onClose) {
+      props.onClose(e, $$4(containerRef.current));
+    }
+  };
+  var onChange = function onChange(e) {
+    if (props.onChange) {
+      props.onChange(e.sender.value());
+    }
+  };
   var onFocus = function onFocus(e) {
     setState(styles$o['vitro-focus']);
     if (props.onFocus) {
@@ -61748,7 +61998,8 @@ var TimePicker = React.forwardRef(function (props, ref) {
     return classList.join(CTRL.SPACE);
   };
   return React__default.createElement("div", {
-    className: getClassName()
+    className: getClassName(),
+    ref: controlRef
   }, props.label && React__default.createElement(Label, {
     text: props.label,
     isRequired: props.isRequired,
@@ -61762,10 +62013,19 @@ var TimePicker = React.forwardRef(function (props, ref) {
   }), props.isReadOnly ? React__default.createElement("span", {
     className: styles$o['vitro-button-copy'],
     onClick: copyValue
-  }) : null, React__default.createElement("div", {
-    ref: container,
+  }) : null, props.isFlipDropdown ? React__default.createElement("div", {
+    ref: containerRef,
     className: styles$o['vitro-control-container']
-  }), props.errorMessage && React__default.createElement("span", {
+  }) : React__default.createElement(Overlay$1, {
+    show: true,
+    target: inputRef.current,
+    placement: PLACEMENT$1.AUTO
+  }, React__default.createElement("div", {
+    style: style ? style : {},
+    className: styles$o['vitro-control-container'] + (style ? CTRL.EMPTY : CTRL.SPACE + styles$o['vitro-display-none'])
+  }, React__default.createElement("div", {
+    ref: containerRef
+  }))), props.errorMessage && React__default.createElement("span", {
     className: styles$o['vitro-error-text']
   }, props.errorMessage));
 });
@@ -61793,7 +62053,7 @@ var SelectedValueList = function SelectedValueList(props) {
   }));
 };
 
-var styles$q = {"vitro-value-list":"_lookup-picker-value-list_vitro-value-list_LSdCMjq","vitro-item":"_lookup-picker-value-list_vitro-item_7yZBz5u","vitro-item-html-value":"_lookup-picker-value-list_vitro-item-html-value_1yl9tXx","vitro-placeholder-empty":"_lookup-picker-value-list_vitro-placeholder-empty_fTVHWwc","vitro-keyword-highlight":"_lookup-picker-value-list_vitro-keyword-highlight_1uESHan","vitro-display-none":"_lookup-picker-value-list_vitro-display-none_2kDzC6K"};
+var valueListStyles = {"vitro-value-list":"_lookup-picker-value-list_vitro-value-list_LSdCMjq","vitro-item":"_lookup-picker-value-list_vitro-item_7yZBz5u","vitro-item-html-value":"_lookup-picker-value-list_vitro-item-html-value_1yl9tXx","vitro-placeholder-empty":"_lookup-picker-value-list_vitro-placeholder-empty_fTVHWwc","vitro-keyword-highlight":"_lookup-picker-value-list_vitro-keyword-highlight_1uESHan","vitro-display-none":"_lookup-picker-value-list_vitro-display-none_2kDzC6K"};
 
 var ValueListItem = function ValueListItem(props) {
   var _onKeyDown = function onKeyDown(e, id) {
@@ -61804,7 +62064,7 @@ var ValueListItem = function ValueListItem(props) {
   };
   return React__default.createElement("div", {
     key: props.item.id,
-    className: styles$q['vitro-item'],
+    className: valueListStyles['vitro-item'],
     onKeyDown: function onKeyDown(e) {
       return _onKeyDown(e);
     },
@@ -61826,19 +62086,39 @@ var ValueList = function ValueList(props) {
   var _useState = React.useState(null),
     scrollableElement = _useState[0],
     setScrollableElement = _useState[1];
+  var _useState2 = React.useState(null),
+    style = _useState2[0],
+    setStyle = _useState2[1];
   var reg = new RegExp(props.inputValue, FLAG);
   React.useEffect(function () {
     if (scrollableElement && scrollableElement.scrollTop === 0) {
       scrollableElement.scrollTop = 1;
     }
   });
+  React.useEffect(function () {
+    if (props.isVisible && !props.isFlip && props.contentRef) {
+      setStyle({
+        width: props.contentRef.offsetWidth + UNIT.PX,
+        inset: props.contentRef.offsetHeight + UNIT.PX + " auto auto 0px"
+      });
+    } else {
+      setStyle(null);
+    }
+  }, [props.isVisible]);
   var createDisplayValue = function createDisplayValue(item) {
     return props.inputValue ? props.filterValueTemplate(item).replace(reg, function (str) {
-      return "<span class=" + styles$q['vitro-keyword-highlight'] + ">" + str + '</span>';
+      return "<span class=" + valueListStyles['vitro-keyword-highlight'] + ">" + str + '</span>';
     }) : props.filterValueTemplate(item);
   };
-  return React__default.createElement("div", {
-    className: styles$q['vitro-value-list'] + (props.isVisible ? CTRL.EMPTY : CTRL.SPACE + styles$q['vitro-display-none'])
+  return React__default.createElement(Overlay$1, {
+    show: props.isVisible,
+    target: props.contentRef,
+    container: props.isFlip ? props.containerRef : null,
+    placement: PLACEMENT$1.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(commonUi.Progress, null), !props.isPending && React__default.createElement(React__default.Fragment, null, props.list.length > 0 ? props.list.map(function (x) {
@@ -61849,8 +62129,8 @@ var ValueList = function ValueList(props) {
       htmlValue: props.getHtmlValue && props.getHtmlValue(x)
     });
   }) : React__default.createElement("div", {
-    className: styles$q['vitro-placeholder-empty']
-  }, props.emptyPlaceholder))));
+    className: valueListStyles['vitro-placeholder-empty']
+  }, props.emptyPlaceholder)))));
 };
 
 var LOCALE$4;
@@ -61858,7 +62138,7 @@ var LOCALE$4;
   LOCALE["PLACEHOLDER_EMPTY"] = "app.common.lookupPicker.empty";
 })(LOCALE$4 || (LOCALE$4 = {}));
 
-var styles$r = {"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-focus":"_lookup-picker_vitro-focus_2UGpxXD","vitro-label":"_lookup-picker_vitro-label_2QoJkUz","vitro-read-only":"_lookup-picker_vitro-read-only_32NOdGB","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 styles$q = {"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-focus":"_lookup-picker_vitro-focus_2UGpxXD","vitro-label":"_lookup-picker_vitro-label_2QoJkUz","vitro-read-only":"_lookup-picker_vitro-read-only_32NOdGB","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) {
@@ -61881,12 +62161,14 @@ 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$r['vitro-read-only'] : CTRL.EMPTY),
+  var _useState7 = React.useState(props.isDisabled || props.isReadOnly ? styles$q['vitro-read-only'] : CTRL.EMPTY),
     state = _useState7[0],
     setState = _useState7[1];
   var localeService = 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 updatePending = function updatePending(valueList) {
     return setPending(valueList ? false : true);
   };
@@ -61904,22 +62186,24 @@ var LookupPicker = React.forwardRef(function (props, ref) {
     }
   }, [props.selectedValueList]);
   React.useEffect(function () {
-    valueListVisible && inputRef && inputRef.current && inputRef.current.focus();
-    if (props.isReadOnly) {
-      if (props.valueList) {
-        updateFilteredValueList(props.valueList);
-      } else if (props.getAllValueList) {
-        setPending(true);
-        var requestToken = {
-          cancel: false
-        };
-        if (valueListRequestToken) {
-          valueListRequestToken.cancel = true;
+    if (valueListVisible && inputRef && inputRef.current) {
+      inputRef.current.focus();
+      if (props.isReadOnly) {
+        if (props.valueList) {
+          updateFilteredValueList(props.valueList);
+        } else if (props.getAllValueList) {
+          setPending(true);
+          var requestToken = {
+            cancel: false
+          };
+          if (valueListRequestToken) {
+            valueListRequestToken.cancel = true;
+          }
+          setValueListRequestToken(requestToken);
+          props.getAllValueList().then(function (valueList) {
+            return onGetValueList(valueList, requestToken);
+          });
         }
-        setValueListRequestToken(requestToken);
-        props.getAllValueList().then(function (valueList) {
-          return onGetValueList(valueList, requestToken);
-        });
       }
     }
   }, [valueListVisible]);
@@ -61971,7 +62255,7 @@ var LookupPicker = React.forwardRef(function (props, ref) {
     }
   }, [selectedValueList]);
   React.useEffect(function () {
-    setState(props.errorMessage ? styles$r['vitro-error'] : CTRL.EMPTY);
+    setState(props.errorMessage ? styles$q['vitro-error'] : CTRL.EMPTY);
   }, [props.errorMessage]);
   var updateFilteredValueList = function updateFilteredValueList(valueList) {
     var availableValueList = inputValue ? filteredValueList : valueList;
@@ -61993,7 +62277,7 @@ var LookupPicker = React.forwardRef(function (props, ref) {
     return props.selectedValueTemplate ? props.selectedValueTemplate(value) : value.title;
   };
   var onChange = function onChange(e) {
-    setState(styles$r['vitro-focus']);
+    setState(styles$q['vitro-focus']);
     setValueListVisible(true);
     setInputValue(e.target.value);
   };
@@ -62047,9 +62331,10 @@ var LookupPicker = React.forwardRef(function (props, ref) {
   };
   var onFocusOut = function onFocusOut(e) {
     var target = e.currentTarget;
-    setState(props.errorMessage ? styles$r['vitro-error'] : CTRL.EMPTY);
+    setState(props.errorMessage ? styles$q['vitro-error'] : CTRL.EMPTY);
     setTimeout(function () {
-      if (!target.contains(document.activeElement)) {
+      var _document$activeEleme;
+      if (!target.contains(document.activeElement) && !((_document$activeEleme = document.activeElement) !== null && _document$activeEleme !== void 0 && _document$activeEleme.classList.contains(valueListStyles['vitro-item']))) {
         setValueListVisible(false);
         setInputValue(CTRL.EMPTY);
         if (props.onBlur && !props.isDisabled) {
@@ -62061,7 +62346,7 @@ var LookupPicker = React.forwardRef(function (props, ref) {
     });
   };
   var onFocus = function onFocus(e) {
-    setState(styles$r['vitro-focus']);
+    setState(styles$q['vitro-focus']);
     setValueListVisible(true);
     if (props.onFocus) {
       props.onFocus(e);
@@ -62079,12 +62364,12 @@ var LookupPicker = React.forwardRef(function (props, ref) {
     }).join(CTRL.COMMA));
   };
   var getClassName = function getClassName() {
-    var classList = [styles$r['vitro-lookup-picker'], props.className];
+    var classList = [styles$q['vitro-lookup-picker'], props.className];
     if (props.isDisabled || props.isReadOnly) {
-      classList.push(styles$r['vitro-read-only']);
+      classList.push(styles$q['vitro-read-only']);
     }
     if (props.isMultiSelect) {
-      classList.push(styles$r['vitro-lookup-picker-multi-select']);
+      classList.push(styles$q['vitro-lookup-picker-multi-select']);
     }
     classList.push(state);
     return classList.join(CTRL.SPACE);
@@ -62098,15 +62383,17 @@ var LookupPicker = React.forwardRef(function (props, ref) {
   return React__default.createElement("div", {
     className: getClassName(),
     tabIndex: 1,
-    onBlur: onFocusOut
+    onBlur: onFocusOut,
+    ref: containerRef
   }, props.label && React__default.createElement(Label, {
     text: props.label,
     isRequired: props.isRequired,
     width: props.labelWidth,
-    className: styles$r['vitro-label']
+    className: styles$q['vitro-label']
   }), React__default.createElement("div", {
-    className: styles$r['vitro-content'],
-    onClick: onFocus
+    className: styles$q['vitro-content'],
+    onClick: onFocus,
+    ref: contentRef
   }, selectedValueList && selectedValueList.length > 0 && (props.isMultiSelect ? true : inputValue.length === 0) ? React__default.createElement(SelectedValueList, {
     list: selectedValueList,
     onOptionValueDelete: onOptionValueDelete,
@@ -62120,9 +62407,9 @@ var LookupPicker = React.forwardRef(function (props, ref) {
     onChange: onChange,
     onClick: onFocus
   }), !props.isDisabled && props.children, React__default.createElement("div", {
-    className: styles$r['vitro-right']
+    className: styles$q['vitro-right']
   }, !props.isMultiSelect && selectedValueList && selectedValueList.length > 0 && isEditable && React__default.createElement("div", {
-    className: styles$r['vitro-button-close'],
+    className: styles$q['vitro-button-close'],
     onClick: function onClick() {
       return onOptionValueDelete();
     }
@@ -62130,52 +62417,55 @@ var LookupPicker = React.forwardRef(function (props, ref) {
     onClick: function onClick() {
       return onCollapseButtonClick(valueListVisible);
     },
-    className: valueListVisible ? styles$r['vitro-button-collapse-up'] : styles$r['vitro-button-collapse-bottom']
+    className: valueListVisible ? styles$q['vitro-button-collapse-up'] : styles$q['vitro-button-collapse-bottom']
   }), props.isReadOnly ? React__default.createElement("span", {
-    className: styles$r['vitro-button-copy'],
+    className: styles$q['vitro-button-copy'],
     onClick: copyValue
   }) : null)), isEditable && (!props.filterMinLength || props.filterMinLength <= inputValue.length) && React__default.createElement(ValueList, {
     isPending: pending,
     inputValue: inputValue,
     list: filteredValueList,
+    isFlip: props.isFlipDropdown,
     filterValueTemplate: filterValueTemplate,
     onOptionValueSelect: onOptionValueSelect,
+    contentRef: contentRef.current,
+    containerRef: containerRef.current,
     isVisible: valueListVisible,
     emptyPlaceholder: props.emptyPlaceholder || localeService.create(LOCALE$4.PLACEHOLDER_EMPTY),
     getHtmlValue: getHtmlValue
   }), props.errorMessage && React__default.createElement("span", {
-    className: styles$r['vitro-error-text']
+    className: styles$q['vitro-error-text']
   }, props.errorMessage));
 });
 
-var styles$s = {"vitro-command-menu":"_command-menu_vitro-command-menu_l82vtIh"};
+var styles$r = {"vitro-command-menu":"_command-menu_vitro-command-menu_l82vtIh"};
 
 var CommandMenu = function CommandMenu(props) {
   return React__default.createElement("nav", {
-    className: styles$s['vitro-command-menu'] + CTRL.SPACE + 'navbar'
+    className: styles$r['vitro-command-menu'] + CTRL.SPACE + 'navbar'
   }, React__default.createElement("ul", {
     className: 'nav'
   }, props.children));
 };
 
-var styles$t = {"vitro-command-menu-button":"_command-menu-button_vitro-command-menu-button_2IiXVbP","vitro-icon":"_command-menu-button_vitro-icon_1xB4d09"};
+var styles$s = {"vitro-command-menu-button":"_command-menu-button_vitro-command-menu-button_2IiXVbP","vitro-icon":"_command-menu-button_vitro-icon_1xB4d09"};
 
 var CommandMenuButton = function CommandMenuButton(props) {
   return React__default.createElement("li", null, React__default.createElement(Button$2, Object.assign({
-    className: styles$t['vitro-command-menu-button'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY),
-    imageClassName: styles$t['vitro-icon']
+    className: styles$s['vitro-command-menu-button'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY),
+    imageClassName: styles$s['vitro-icon']
   }, props)));
 };
 
 var itemStyles = {"vitro-item":"_command-menu-item_vitro-item_2pVhk23"};
 
-var styles$u = {"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$t = {"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$u['vitro-item-lookup-picker']
+    className: itemStyles['vitro-item'] + CTRL.SPACE + 'nav-item ' + styles$t['vitro-item-lookup-picker']
   }, React__default.createElement(LookupPicker, Object.assign({}, props, {
-    className: styles$u['vitro-command-menu-lookup-picker'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY)
+    className: styles$t['vitro-command-menu-lookup-picker'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY)
   })));
 };
 
@@ -63047,11 +63337,17 @@ var Dropdown$2 = /*#__PURE__*/function (_React$Component) {
       var container = this.getContainer();
       var menu = this.getMenu();
       var toggle = this.getToggle();
+
+      // Add a conditional check to avoid using toggle 
+      // if there is no toggle component in the dropdown
+      if (!toggle) {
+        return;
+      }
       var targetIsToggle = toggle.contains(e.target);
       var clickIsInMenu = menu && menu.contains(e.target) && menu !== e.target;
       var clickIsInInput = false;
       if (container) {
-        // this is only for InputGroup with type dropdown
+        // This is only for InputGroup with type dropdown
         clickIsInInput = container.classList.contains('input-group') && container.classList.contains('dropdown') && e.target.tagName === 'INPUT';
       }
       if ((targetIsToggle && !clickIsInInput || clickIsInMenu) && (e.type !== 'keyup' || e.which === keyCodes.tab)) {
@@ -63496,6 +63792,11 @@ var DropdownMenu$2 = /*#__PURE__*/function (_React$Component) {
           name: 'flip',
           enabled: !!flip
         }]);
+        var persistStyles = {};
+        if (persist) {
+          persistStyles.display = 'block';
+          persistStyles.visibility = this.context.isOpen ? 'visible' : 'hidden';
+        }
         var popper = /*#__PURE__*/React__default.createElement(Popper, {
           placement: poperPlacement,
           modifiers: poperModifiers,
@@ -63505,7 +63806,7 @@ var DropdownMenu$2 = /*#__PURE__*/function (_React$Component) {
             style = _ref.style,
             placement = _ref.placement,
             update = _ref.update;
-          var combinedStyle = _objectSpread$1(_objectSpread$1({}, _this.props.style), style);
+          var combinedStyle = _objectSpread$1(_objectSpread$1(_objectSpread$1({}, _this.props.style), persistStyles), style);
           var handleRef = function handleRef(tagRef) {
             // Send the ref to `react-popper`
             ref(tagRef);
@@ -63541,7 +63842,8 @@ var DropdownMenu$2 = /*#__PURE__*/function (_React$Component) {
         ref: onMenuRef,
         "aria-hidden": !this.context.isOpen,
         className: classes,
-        "data-popper-placement": attrs.placement
+        "data-popper-placement": attrs.placement,
+        "data-bs-popper": "static"
       }));
     }
   }]);
@@ -63552,8 +63854,8 @@ DropdownMenu$2.contextType = DropdownContext$2;
 
 function _typeof$4(obj) { "@babel/helpers - typeof"; return _typeof$4 = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof$4(obj); }
 var _excluded$d = ["className", "color", "cssModule", "caret", "split", "nav", "tag", "innerRef"];
-function _defineProperty$3(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _extends$7() { _extends$7 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$7.apply(this, arguments); }
+function _defineProperty$3(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _objectWithoutProperties$5(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$e(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose$e(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 function _classCallCheck$3(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -63648,19 +63950,9 @@ var DropdownToggle$2 = /*#__PURE__*/function (_React$Component) {
       } else {
         Tag = tag;
       }
-      if (this.context.inNavbar) {
-        return /*#__PURE__*/React__default.createElement(Tag, _extends$7({}, props, {
-          className: classes,
-          onClick: this.onClick,
-          ref: this.context.onToggleRef,
-          "aria-expanded": this.context.isOpen,
-          "aria-haspopup": this.getRole(),
-          children: children
-        }));
-      }
-      return /*#__PURE__*/React__default.createElement(Reference, {
-        innerRef: innerRef
-      }, function (_ref) {
+
+      // extracted the rendering of the Tag component
+      var returnFunction = function returnFunction(_ref) {
         var ref = _ref.ref;
         var handleRef = function handleRef(tagRef) {
           ref(tagRef);
@@ -63674,7 +63966,19 @@ var DropdownToggle$2 = /*#__PURE__*/function (_React$Component) {
           "aria-haspopup": _this2.getRole(),
           children: children
         }));
-      });
+      };
+
+      // No Reference component if the component is in Navbar
+      if (this.context.inNavbar) {
+        return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, returnFunction({
+          ref: this.context.onToggleRef
+        }));
+      }
+
+      // Normal rendering if component not in NavBar
+      return /*#__PURE__*/React__default.createElement(Reference, {
+        innerRef: innerRef
+      }, returnFunction);
     }
   }]);
   return DropdownToggle;
@@ -63742,7 +64046,7 @@ UncontrolledDropdown.propTypes = _objectSpread$2({
   onToggle: propTypes.func
 }, Dropdown$2.propTypes);
 
-var styles$v = {"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-icon":"_command-menu-dropdown-button_vitro-icon_36InzPx","vitro-button-collapse-bottom":"_command-menu-dropdown-button_vitro-button-collapse-bottom_1OS_X_a"};
+var styles$u = {"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-icon":"_command-menu-dropdown-button_vitro-icon_36InzPx","vitro-button-collapse-bottom":"_command-menu-dropdown-button_vitro-button-collapse-bottom_1OS_X_a"};
 
 var CommandMenuSubItem = function CommandMenuSubItem(props) {
   var onClick = function onClick(e) {
@@ -63761,7 +64065,7 @@ var CommandMenuSubItem = function CommandMenuSubItem(props) {
     onClick: onClick,
     toggle: props.toggle === false ? false : true
   }, props.isShowImage && React__default.createElement("div", {
-    className: styles$v['vitro-icon']
+    className: styles$u['vitro-icon']
   }, props.imageUrl && React__default.createElement(Icon, {
     defaultUrl: props.imageUrl,
     hoverUrl: props.imageHoverUrl
@@ -63779,15 +64083,15 @@ var CommandMenuItemHeader = function CommandMenuItemHeader(props) {
     onMouseLeave: function onMouseLeave() {
       return setIsHover(false);
     },
-    className: itemStyles['vitro-item'] + CTRL.SPACE + styles$v['vitro-command-menu-dropdown-button'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY),
+    className: itemStyles['vitro-item'] + CTRL.SPACE + styles$u['vitro-command-menu-dropdown-button'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY),
     "data-show": props.isVisibleFunction
   }, props.imageUrl && React__default.createElement(Icon, {
     isHover: isHover,
     defaultUrl: props.imageUrl,
     hoverUrl: props.imageHoverUrl,
-    className: styles$v['vitro-icon']
+    className: styles$u['vitro-icon']
   }), React__default.createElement("span", null, props.text), !props.isHideChevronDown && React__default.createElement("div", {
-    className: styles$v['vitro-button-collapse-bottom']
+    className: styles$u['vitro-button-collapse-bottom']
   }));
 };
 
@@ -63799,7 +64103,7 @@ var CommandMenuDropdownButton = function CommandMenuDropdownButton(props) {
   return React__default.createElement(UncontrolledDropdown, {
     nav: true,
     inNavbar: true,
-    className: styles$v['vitro-dropdown-button-container']
+    className: styles$u['vitro-dropdown-button-container']
   }, React__default.createElement(DropdownToggle$2, {
     nav: true,
     caret: true
@@ -63815,18 +64119,18 @@ var CommandMenuDropdownButton = function CommandMenuDropdownButton(props) {
   }), props.children));
 };
 
-var styles$w = {"vitro-icon-text":"_sidebar-item_vitro-icon-text_3ROhyLK","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-icon":"_sidebar-item_vitro-icon_2B88tow","vitro-item":"_sidebar-item_vitro-item_1BR_7F0"};
+var styles$v = {"vitro-icon-text":"_sidebar-item_vitro-icon-text_3ROhyLK","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-icon":"_sidebar-item_vitro-icon_2B88tow","vitro-item":"_sidebar-item_vitro-item_1BR_7F0"};
 
 var Item$1 = function Item(props) {
   return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", null, React__default.createElement(Icon, {
     defaultUrl: props.imageUrl,
     hoverUrl: props.imageHoverUrl,
     isHover: props.isHover,
-    className: styles$w['vitro-icon']
+    className: styles$v['vitro-icon']
   }), React__default.createElement("span", {
-    className: styles$w['vitro-icon-text']
+    className: styles$v['vitro-icon-text']
   }, props.text)), React__default.createElement("span", {
-    className: styles$w['vitro-item-text']
+    className: styles$v['vitro-item-text']
   }, props.text));
 };
 
@@ -63837,14 +64141,13 @@ var TARGET;
 })(TARGET || (TARGET = {}));
 
 var w$8 = window;
-var PX_UNIT$3 = 'px';
 var WIDTH_AUTO = 'auto';
 var LinkItem$1 = function LinkItem(props) {
   var _useState = React.useState(false),
     isHover = _useState[0],
     setIsHover = _useState[1];
   var isActive = props.link === props.currentUrl || props.activeItem === props.id || props.altUrlList && props.altUrlList.includes(props.currentUrl);
-  var className = isActive ? styles$w['vitro-active'] : isHover ? styles$w['vitro-hover'] : CTRL.EMPTY;
+  var className = isActive ? styles$v['vitro-active'] : isHover ? styles$v['vitro-hover'] : CTRL.EMPTY;
   var onClick = function onClick(e) {
     if (props.link) {
       var event = new CustomEvent(exports.EVENT.HISTORY_UPDATE, {
@@ -63863,9 +64166,9 @@ var LinkItem$1 = function LinkItem(props) {
       return setIsHover(false);
     },
     style: {
-      width: props.linkItemWidth ? props.linkItemWidth + PX_UNIT$3 : WIDTH_AUTO
+      width: props.linkItemWidth ? props.linkItemWidth + UNIT.PX : WIDTH_AUTO
     },
-    className: styles$w['vitro-item']
+    className: styles$v['vitro-item']
   }, props.link && React__default.createElement("a", {
     onClick: onClick,
     className: className
@@ -63913,7 +64216,7 @@ var SectionList = React.forwardRef(function (props, ref) {
   }));
 });
 
-var styles$x = {"vitro-sidebar":"_sidebar_vitro-sidebar_1IxGYiU","vitro-scroll-container":"_sidebar_vitro-scroll-container_3K-iJy8","vitro-button-more":"_sidebar_vitro-button-more_3s9oZY9"};
+var styles$w = {"vitro-sidebar":"_sidebar_vitro-sidebar_1IxGYiU","vitro-scroll-container":"_sidebar_vitro-scroll-container_3K-iJy8","vitro-button-more":"_sidebar_vitro-button-more_3s9oZY9"};
 
 var Sidebar = function Sidebar(props) {
   var _useState = React.useState(window.location.pathname),
@@ -63988,7 +64291,7 @@ var Sidebar = function Sidebar(props) {
     var width = containerWidth / count;
     setLinkItemWidth(width);
   };
-  var className = styles$x['vitro-sidebar'] + (props.theme ? CTRL.SPACE + props.theme : CTRL.EMPTY) + CTRL.SPACE + (isMobileView ? 'vitro-bottom-menu' : CTRL.EMPTY);
+  var className = styles$w['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'
@@ -64001,7 +64304,7 @@ var Sidebar = function Sidebar(props) {
     currentUrl: currentUrl,
     activeItem: props.activeItem
   })) : React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
-    className: styles$x['vitro-scroll-container'],
+    className: styles$w['vitro-scroll-container'],
     ref: menuRef
   }, React__default.createElement(SectionList, {
     itemList: itemList,
@@ -64011,40 +64314,40 @@ var Sidebar = function Sidebar(props) {
     linkItemWidth: linkItemWidth
   })), React__default.createElement("button", {
     onClick: scroll,
-    className: styles$x['vitro-button-more']
+    className: styles$w['vitro-button-more']
   })));
 };
 
-var styles$y = {"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$y['vitro-task-tile'] + (props.isActive ? CTRL.SPACE + styles$y['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$y['vitro-top-right']
+    className: styles$x['vitro-top-right']
   }, React__default.createElement(DropdownButton, {
     itemList: props.dropdownItemList,
-    className: styles$y['vitro-dropdown-button']
+    className: styles$x['vitro-dropdown-button']
   })), props.isShowDeleteButton && React__default.createElement("div", {
-    className: styles$y['vitro-button-cancel'],
+    className: styles$x['vitro-button-cancel'],
     onClick: props.onDeleteClick
   }), props.description && React__default.createElement("div", {
-    className: styles$y['vitro-description']
+    className: styles$x['vitro-description']
   }, props.description), React__default.createElement("div", {
-    className: styles$y['vitro-title']
+    className: styles$x['vitro-title']
   }, props.title), props.comment && React__default.createElement("div", {
-    className: styles$y['vitro-comment']
+    className: styles$x['vitro-comment']
   }, props.comment), React__default.createElement("div", {
-    className: styles$y['vitro-content']
+    className: styles$x['vitro-content']
   }, props.userList && React__default.createElement(commonUi.TaskUserList, {
     itemList: props.userList
   })), React__default.createElement("div", {
-    className: styles$y['vitro-bottom-right']
+    className: styles$x['vitro-bottom-right']
   }, props.dateComment, " \xA0 ", props.date), props.children);
 };
 
-var styles$z = {"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);
@@ -64076,7 +64379,7 @@ var Alert$1 = function Alert(props) {
     }
   };
   var actionList = props.actionList && React__default.createElement("div", {
-    className: styles$z['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,
@@ -64085,7 +64388,7 @@ var Alert$1 = function Alert(props) {
       }
     }, a.text);
   }));
-  var className = styles$z['vitro-alert'] + CTRL.SPACE + (props.isPositionCenter && styles$z['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,
@@ -64095,13 +64398,13 @@ var Alert$1 = function Alert(props) {
     variant: props.type,
     onClose: props.onClose
   }, React__default.createElement("div", {
-    className: styles$z['vitro-alert-content']
+    className: styles$y['vitro-alert-content']
   }, React__default.createElement("div", {
-    className: styles$z['vitro-icon']
+    className: styles$y['vitro-icon']
   }), React__default.createElement("div", {
-    className: styles$z['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$z['vitro-button-close'],
+    className: styles$y['vitro-button-close'],
     onClick: onClose
   })), props.text && props.children, props.isMultiline && actionList));
 };
@@ -64127,34 +64430,34 @@ var DialogComponent = function DialogComponent(props) {
   }, props.children);
 };
 
-var styles$A = {"vitro-dialog-content":"_dialog-content_vitro-dialog-content_qQNWu6x"};
+var styles$z = {"vitro-dialog-content":"_dialog-content_vitro-dialog-content_qQNWu6x"};
 
 var DialogContent = function DialogContent(props) {
   return React__default.createElement("div", {
-    className: styles$A['vitro-dialog-content'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY)
+    className: styles$z['vitro-dialog-content'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY)
   }, props.children);
 };
 
-var styles$B = {"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 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 DialogHeader = function DialogHeader(props) {
   return React__default.createElement("div", {
-    className: styles$B['vitro-dialog-header']
+    className: styles$A['vitro-dialog-header']
   }, props.imageUrl && React__default.createElement(Icon, {
     defaultUrl: props.imageUrl,
-    className: styles$B['vitro-icon']
+    className: styles$A['vitro-icon']
   }), React__default.createElement("div", null, React__default.createElement("h1", {
-    className: styles$B['vitro-title']
+    className: styles$A['vitro-title']
   }, props.title), props.description && React__default.createElement("h2", {
-    className: styles$B['vitro-description']
+    className: styles$A['vitro-description']
   }, props.description)));
 };
 
-var styles$C = {"vitro-dialog-button":"_dialog-button_vitro-dialog-button_1fQ5l22"};
+var styles$B = {"vitro-dialog-button":"_dialog-button_vitro-dialog-button_1fQ5l22"};
 
 var DialogButton = function DialogButton(props) {
   return React__default.createElement(Button$2, Object.assign({}, props, {
-    className: styles$C['vitro-dialog-button'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY)
+    className: styles$B['vitro-dialog-button'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY)
   }));
 };
 
@@ -64187,7 +64490,7 @@ var LOCALE$5;
   LOCALE["ACTION_SAVE"] = "app.common.action.save";
 })(LOCALE$5 || (LOCALE$5 = {}));
 
-var styles$D = {"vitro-dialog-footer":"_dialog-footer_vitro-dialog-footer_2vUQ3aG"};
+var styles$C = {"vitro-dialog-footer":"_dialog-footer_vitro-dialog-footer_2vUQ3aG"};
 
 var DialogFooter = function DialogFooter(props) {
   var _props$buttonList, _props$buttonList2;
@@ -64199,7 +64502,7 @@ var DialogFooter = function DialogFooter(props) {
     }
   };
   return React__default.createElement("div", {
-    className: styles$D['vitro-dialog-footer']
+    className: styles$C['vitro-dialog-footer']
   }, props.isDismissible && props.onClose && React__default.createElement(DialogCloseButton, {
     text: labelClose,
     isDisabled: !props.isDismissible,
@@ -64263,7 +64566,7 @@ var Dialog = function Dialog(props) {
   }) : null));
 };
 
-var styles$E = {"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$D = {"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() {
@@ -64274,7 +64577,7 @@ var UserProfileMenuItem = function UserProfileMenuItem(props) {
   };
   if (props.link) {
     return React__default.createElement("div", {
-      className: styles$E['vitro-dropdown-item'],
+      className: styles$D['vitro-dropdown-item'],
       onClick: onClick
     }, React__default.createElement("a", {
       href: props.link
@@ -64285,7 +64588,7 @@ var UserProfileMenuItem = function UserProfileMenuItem(props) {
   }
   if (props.onClick) {
     return React__default.createElement("div", {
-      className: styles$E['vitro-dropdown-item'],
+      className: styles$D['vitro-dropdown-item'],
       key: props.text,
       onClick: onClick
     }, props.imageUrl && React__default.createElement(Icon, {
@@ -64319,15 +64622,15 @@ var UserProfile = function UserProfile(props) {
   return React__default.createElement(Dropdown$2, {
     isOpen: dropdownOpen,
     toggle: toggle,
-    className: styles$E['vitro-user-profile']
+    className: styles$D['vitro-user-profile']
   }, React__default.createElement(DropdownToggle$2, {
     caret: true
   }, React__default.createElement("div", null, React__default.createElement("span", {
-    className: styles$E['vitro-text-color-white']
+    className: styles$D['vitro-text-color-white']
   }, createSurnameWithInitials(props.userName)), React__default.createElement(Avatar, {
     userName: props.userName,
     image: props.image,
-    className: styles$E['vitro-avatar']
+    className: styles$D['vitro-avatar']
   }))), React__default.createElement(DropdownMenu$2, {
     right: true
   }, props.dropdownMenuItemList && props.dropdownMenuItemList.length > 0 && props.dropdownMenuItemList.map(function (item) {
@@ -64337,7 +64640,7 @@ var UserProfile = function UserProfile(props) {
   })));
 };
 
-var styles$F = {"vitro-avatar":"_user-lookup-picker_vitro-avatar_2vI-SeH"};
+var styles$E = {"vitro-avatar":"_user-lookup-picker_vitro-avatar_2vI-SeH"};
 
 var UserLookupPicker = React.forwardRef(function (props, ref) {
   var lookupPickerRef = React.useRef(null);
@@ -64345,7 +64648,7 @@ var UserLookupPicker = React.forwardRef(function (props, ref) {
     var prop = props.getHtmlValueTemplateProps(item);
     if (props.isMultiSelect) {
       return _extends({}, prop, {
-        className: styles$F['vitro-avatar']
+        className: styles$E['vitro-avatar']
       });
     }
     return prop;
@@ -64366,44 +64669,44 @@ var UserLookupPicker = React.forwardRef(function (props, ref) {
   }));
 });
 
-var styles$G = {"vitro-title":"_activity_vitro-title_1rdvvaa","vitro-dropdown-button":"_activity_vitro-dropdown-button_12258nJ","vitro-activity":"_activity_vitro-activity_1u7YeF3"};
+var styles$F = {"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) {
   return React__default.createElement("div", {
     className: 'vitro-activity'
   }, (props.filterDropdownList || props.title) && React__default.createElement("div", {
-    className: styles$G['vitro-title']
+    className: styles$F['vitro-title']
   }, props.filterDropdownList && React__default.createElement(DropdownButton, {
     itemList: props.filterDropdownList,
-    className: styles$G['vitro-dropdown-button']
+    className: styles$F['vitro-dropdown-button']
   }), props.title && React__default.createElement("h3", null, props.title)), React__default.createElement("div", {
     className: 'vitro-content'
   }, props.children));
 };
 
-var styles$H = {"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$G = {"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$H['vitro-item'] + (props.isActive ? CTRL.SPACE + styles$H['vitro-active'] : CTRL.EMPTY)
+    className: styles$G['vitro-item'] + (props.isActive ? CTRL.SPACE + styles$G['vitro-active'] : CTRL.EMPTY)
   }, React__default.createElement("div", {
-    className: styles$H['vitro-flex']
+    className: styles$G['vitro-flex']
   }, React__default.createElement(Avatar, {
     userName: props.userName,
     image: props.userImageUrl,
-    className: styles$H['vitro-avatar']
+    className: styles$G['vitro-avatar']
   }), React__default.createElement("div", {
-    className: styles$H['vitro-content']
+    className: styles$G['vitro-content']
   }, React__default.createElement("div", null, React__default.createElement("div", {
-    className: styles$H['vitro-title']
+    className: styles$G['vitro-title']
   }, React__default.createElement("span", null, props.title || props.userName), props.isShowDetail && React__default.createElement("span", {
-    className: styles$H['vitro-due-date']
+    className: styles$G['vitro-due-date']
   }, props.date), props.isShowDetail && props.dropdownItemList && React__default.createElement(DropdownButton, {
     itemList: props.dropdownItemList,
     onToggle: props.onDropdownToggle,
-    className: styles$H['vitro-dropdown-button']
+    className: styles$G['vitro-dropdown-button']
   })), React__default.createElement("div", {
-    className: styles$H['vitro-message'] + (props.variant ? CTRL.SPACE + props.variant : CTRL.EMPTY)
+    className: styles$G['vitro-message'] + (props.variant ? CTRL.SPACE + props.variant : CTRL.EMPTY)
   }, React__default.createElement("p", {
     dangerouslySetInnerHTML: {
       __html: props.message
@@ -64411,36 +64714,36 @@ var ActivityItem = function ActivityItem(props) {
   }), props.children)))));
 };
 
-var PLACEMENT$1;
+var PLACEMENT$2;
 (function (PLACEMENT) {
   PLACEMENT["LEFT"] = "left";
   PLACEMENT["TOP"] = "top";
   PLACEMENT["RIGHT"] = "right";
   PLACEMENT["BOTTOM"] = "bottom";
-})(PLACEMENT$1 || (PLACEMENT$1 = {}));
+})(PLACEMENT$2 || (PLACEMENT$2 = {}));
 
 var TooltipConstants = {
     __proto__: null,
-    get PLACEMENT () { return PLACEMENT$1; }
+    get PLACEMENT () { return PLACEMENT$2; }
 };
 
-var styles$I = {"vitro-tooltip":"_tooltip_vitro-tooltip_JvGPShz"};
+var styles$H = {"vitro-tooltip":"_tooltip_vitro-tooltip_JvGPShz"};
 
 var Tooltip$1 = function Tooltip(props) {
   return React__default.createElement(OverlayTrigger, {
-    placement: props.placement || PLACEMENT$1.TOP,
+    placement: props.placement || PLACEMENT$2.TOP,
     delay: {
       show: 750,
       hide: 0
     },
     show: props.isShow,
     overlay: React__default.createElement(TooltipComponent, {
-      className: styles$I['vitro-tooltip']
+      className: styles$H['vitro-tooltip']
     }, props.text)
   }, props.children);
 };
 
-var styles$J = {"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$I = {"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),
@@ -64482,25 +64785,25 @@ var ActivityMessage = function ActivityMessage(props) {
     return false;
   };
   return React__default.createElement("div", {
-    className: styles$J['vitro-activity-message']
+    className: styles$I['vitro-activity-message']
   }, props.changedValueList.map(function (item) {
     return React__default.createElement("div", {
-      className: styles$J['vitro-item']
+      className: styles$I['vitro-item']
     }, item.fieldName && React__default.createElement("span", {
-      className: styles$J['vitro-field-name']
+      className: styles$I['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$J['vitro-value'],
+      className: styles$I['vitro-value'],
       ref: oldValueRef
     }, item.oldValue)), React__default.createElement("span", {
-      className: styles$J['vitro-separator']
+      className: styles$I['vitro-separator']
     })), React__default.createElement(Tooltip$1, {
       text: item.newValue,
       isShow: isShowNewValueTooltip ? undefined : false
     }, React__default.createElement("div", {
-      className: item.isMessage ? styles$J['vitro-message'] : styles$J['vitro-value'],
+      className: item.isMessage ? styles$I['vitro-message'] : styles$I['vitro-value'],
       ref: newValueRef
     }, item.newValue)));
   }));
@@ -64522,7 +64825,7 @@ var LOCALE$6;
   LOCALE["PLACEHOLDER"] = "app.common.messageInput.placeholder";
 })(LOCALE$6 || (LOCALE$6 = {}));
 
-var styles$K = {"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"};
+var styles$J = {"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"};
 
 var NEW_LINE = '\n';
 var MessageInput = function MessageInput(props) {
@@ -64573,14 +64876,14 @@ var MessageInput = function MessageInput(props) {
     }
   };
   return React__default.createElement("div", {
-    className: styles$K['vitro-message-input'],
+    className: styles$J['vitro-message-input'],
     onDrop: props.onDrop
   }, React__default.createElement("div", {
-    className: styles$K['vitro-control']
+    className: styles$J['vitro-control']
   }, !props.isDisabled && React__default.createElement(ScrollBar, {
     isHideScrollX: true
   }, React__default.createElement("div", {
-    className: styles$K['vitro-message'],
+    className: styles$J['vitro-message'],
     ref: inputRef,
     onChange: onChange,
     onKeyDown: onKeyDown,
@@ -64588,17 +64891,17 @@ var MessageInput = function MessageInput(props) {
     onBlur: onBlur,
     contentEditable: true
   }, isShowPlaceholder && React__default.createElement("span", {
-    className: styles$K['vitro-placeholder']
+    className: styles$J['vitro-placeholder']
   }, props.placeholder || localeService.create(LOCALE$6.PLACEHOLDER)))), props.children, props.onAddFile && React__default.createElement("button", {
     onClick: props.onAddFile,
-    className: styles$K['vitro-button-add-file']
+    className: styles$J['vitro-button-add-file']
   })), React__default.createElement("button", {
     onClick: onEnter,
-    className: styles$K['vitro-button-send']
+    className: styles$J['vitro-button-send']
   }));
 };
 
-var styles$L = {"vitro-image-picker-root":"_image-picker_vitro-image-picker-root_AqOYRhP","vitro-image-picker-dropdown-wrapper":"_image-picker_vitro-image-picker-dropdown-wrapper_8Tr_BBS","vitro-image-picker-defaultIcon-wrapper":"_image-picker_vitro-image-picker-defaultIcon-wrapper_1XLKgLW","vitro-image-picker-icon-wrapper":"_image-picker_vitro-image-picker-icon-wrapper_3DNyLS0","vitro-image-picker-input":"_image-picker_vitro-image-picker-input_12jFFNU","vitro-icon-default":"_image-picker_vitro-icon-default_2Hdhta2","vitro-image-picker-label-wrapper":"_image-picker_vitro-image-picker-label-wrapper_WRLzUYM","vitro-image-picker-wrapper":"_image-picker_vitro-image-picker-wrapper_dlZyYFL"};
+var styles$K = {"vitro-image-picker-root":"_image-picker_vitro-image-picker-root_AqOYRhP","vitro-image-picker-dropdown-wrapper":"_image-picker_vitro-image-picker-dropdown-wrapper_8Tr_BBS","vitro-image-picker-defaultIcon-wrapper":"_image-picker_vitro-image-picker-defaultIcon-wrapper_1XLKgLW","vitro-image-picker-icon-wrapper":"_image-picker_vitro-image-picker-icon-wrapper_3DNyLS0","vitro-image-picker-input":"_image-picker_vitro-image-picker-input_12jFFNU","vitro-icon-default":"_image-picker_vitro-icon-default_2Hdhta2","vitro-image-picker-label-wrapper":"_image-picker_vitro-image-picker-label-wrapper_WRLzUYM","vitro-image-picker-wrapper":"_image-picker_vitro-image-picker-wrapper_dlZyYFL"};
 
 var ACTION$1;
 (function (ACTION) {
@@ -64617,16 +64920,16 @@ var ImagePicker = function ImagePicker(props) {
   var renderPreview = function renderPreview() {
     if (props.defaultUrl) {
       return React__default.createElement("div", {
-        className: props.classNameDefaultIcon ? props.classNameDefaultIcon : styles$L['vitro-image-picker-icon-wrapper']
+        className: props.classNameDefaultIcon ? props.classNameDefaultIcon : styles$K['vitro-image-picker-icon-wrapper']
       }, React__default.createElement(Icon, {
         defaultUrl: props.defaultUrl,
-        className: props.classNameIcon ? props.classNameIcon : styles$L['vitro-image-picker-icon']
+        className: props.classNameIcon ? props.classNameIcon : styles$K['vitro-image-picker-icon']
       }));
     } else {
       return React__default.createElement("div", {
-        className: props.classNameDefaultIcon ? props.classNameDefaultIcon : styles$L['vitro-image-picker-defaultIcon-wrapper']
+        className: props.classNameDefaultIcon ? props.classNameDefaultIcon : styles$K['vitro-image-picker-defaultIcon-wrapper']
       }, React__default.createElement("div", {
-        className: styles$L['vitro-icon-default']
+        className: styles$K['vitro-icon-default']
       }));
     }
   };
@@ -64666,27 +64969,26 @@ var ImagePicker = function ImagePicker(props) {
     return (_props$itemList = props.itemList) !== null && _props$itemList !== void 0 && _props$itemList.length ? result.concat(props.itemList) : result;
   }, [props.itemList, props.defaultUrl]);
   return React__default.createElement("div", {
-    className: styles$L['vitro-image-picker-wrapper']
+    className: styles$K['vitro-image-picker-wrapper']
   }, React__default.createElement("div", {
-    className: styles$L['vitro-image-picker-label-wrapper']
+    className: styles$K['vitro-image-picker-label-wrapper']
   }, props.label ? props.label : ''), React__default.createElement("div", {
-    className: props.classNameRoot ? props.classNameRoot : styles$L['vitro-image-picker-root']
+    className: props.classNameRoot ? props.classNameRoot : styles$K['vitro-image-picker-root']
   }, React__default.createElement(DropdownButton, {
     itemList: defaultItemList,
-    className: styles$L['vitro-image-picker-dropdown-wrapper']
+    className: styles$K['vitro-image-picker-dropdown-wrapper']
   }), React__default.createElement("input", {
     type: 'file',
-    className: styles$L['vitro-image-picker-input'],
+    className: styles$K['vitro-image-picker-input'],
     ref: inputFileRef,
     onChange: onChange,
     accept: "image/*"
   }), renderPreview()));
 };
 
-var styles$M = {"vitro-criterion-container":"_criterion_vitro-criterion-container_2cYcSkL","vitro-block":"_criterion_vitro-block_3E9-RXM","vitro-control":"_criterion_vitro-control_2JLaybj","vitro-label":"_criterion_vitro-label_3F6a8dj","vitro-operator-select-container":"_criterion_vitro-operator-select-container_3OkjzXG","vitro-operator-select":"_criterion_vitro-operator-select_1guNlk9","vitro-operator-list":"_criterion_vitro-operator-list_3A2VZsd","vitro-button-cancel":"_criterion_vitro-button-cancel_2C2G0sL","vitro-focus":"_criterion_vitro-focus_3FNLsoN","vitro-error":"_criterion_vitro-error_3pvFrlW","vitro-condition-select":"_criterion_vitro-condition-select_1hTBBg-","vitro-icon":"_criterion_vitro-icon_1DmS0jh","vitro-condition-list-container":"_criterion_vitro-condition-list-container_ERfumwB","vitro-operator-list-container":"_criterion_vitro-operator-list-container_RgT0R_Z","vitro-condition-list":"_criterion_vitro-condition-list_10UIxJI"};
+var styles$L = {"vitro-criterion-container":"_criterion_vitro-criterion-container_2cYcSkL","vitro-block":"_criterion_vitro-block_3E9-RXM","vitro-control":"_criterion_vitro-control_2JLaybj","vitro-label":"_criterion_vitro-label_3F6a8dj","vitro-operator-select-container":"_criterion_vitro-operator-select-container_3OkjzXG","vitro-operator-select":"_criterion_vitro-operator-select_1guNlk9","vitro-operator-list":"_criterion_vitro-operator-list_3A2VZsd","vitro-button-cancel":"_criterion_vitro-button-cancel_2C2G0sL","vitro-focus":"_criterion_vitro-focus_3FNLsoN","vitro-error":"_criterion_vitro-error_3pvFrlW","vitro-condition-select":"_criterion_vitro-condition-select_1hTBBg-","vitro-icon":"_criterion_vitro-icon_1DmS0jh","vitro-condition-list-container":"_criterion_vitro-condition-list-container_ERfumwB","vitro-operator-list-container":"_criterion_vitro-operator-list-container_RgT0R_Z","vitro-condition-list":"_criterion_vitro-condition-list_10UIxJI"};
 
 var ROOT_ID = 'root';
-var PX_UNIT$4 = 'px';
 var ConditionSelect = React.forwardRef(function (props, ref) {
   var _useState = React.useState(props.defaultValue || props.itemList[0]),
     condition = _useState[0],
@@ -64742,13 +65044,13 @@ var ConditionSelect = React.forwardRef(function (props, ref) {
     var root = document.getElementById(ROOT_ID);
     if (position && root) {
       var container = document.createElement('div');
-      container.className = styles$M['vitro-condition-list-container'];
-      container.style.left = position.left + PX_UNIT$4;
-      container.style.top = position.top + PX_UNIT$4;
+      container.className = styles$L['vitro-condition-list-container'];
+      container.style.left = position.left + UNIT.PX;
+      container.style.top = position.top + UNIT.PX;
       setConditionListContainer(container);
       var content = React__default.createElement("ul", {
         ref: listRef,
-        className: styles$M['vitro-condition-list'],
+        className: styles$L['vitro-condition-list'],
         onBlur: onBlur
       }, props.itemList.map(function (item) {
         return React__default.createElement("li", {
@@ -64757,7 +65059,7 @@ var ConditionSelect = React.forwardRef(function (props, ref) {
           }
         }, item.imageUrl && React__default.createElement(Icon, {
           defaultUrl: item.imageUrl,
-          className: styles$M['vitro-icon']
+          className: styles$L['vitro-icon']
         }), item.text);
       }));
       reactDom.render(content, container);
@@ -64766,16 +65068,15 @@ var ConditionSelect = React.forwardRef(function (props, ref) {
   };
   return React__default.createElement(React__default.Fragment, null, condition && React__default.createElement("div", {
     ref: ref,
-    className: styles$M['vitro-condition-select']
+    className: styles$L['vitro-condition-select']
   }, React__default.createElement("div", {
     onClick: toggleSelect
   }, condition.imageUrl ? React__default.createElement(Icon, {
     defaultUrl: condition.imageUrl,
-    className: styles$M['vitro-icon']
+    className: styles$L['vitro-icon']
   }) : condition.text)));
 });
 
-var PX_UNIT$5 = 'px';
 var ROOT_ID$1 = 'root';
 var Criterion = function Criterion(props) {
   var _useState = React.useState(props.operatorList[0]),
@@ -64821,7 +65122,7 @@ var Criterion = function Criterion(props) {
   }, []);
   React.useEffect(function () {
     if (labelRef && labelRef.current && conditionSelectRef && conditionSelectRef.current) {
-      conditionSelectRef.current.style.left = labelRef.current.offsetWidth + 8 + PX_UNIT$5;
+      conditionSelectRef.current.style.left = labelRef.current.offsetWidth + 8 + UNIT.PX;
     }
   }, [labelRef]);
   React.useEffect(function () {
@@ -64852,13 +65153,13 @@ var Criterion = function Criterion(props) {
     onChange(value);
   };
   var onFocus = function onFocus(e) {
-    setState(styles$M['vitro-focus']);
+    setState(styles$L['vitro-focus']);
     if (componentProps.onFocus) {
       componentProps.onFocus(e);
     }
   };
   var onBlur = function onBlur(e) {
-    setState(componentProps.errorMessage ? styles$M['vitro-error'] : CTRL.EMPTY);
+    setState(componentProps.errorMessage ? styles$L['vitro-error'] : CTRL.EMPTY);
     if (componentProps.onBlur) {
       componentProps.onBlur(e);
     }
@@ -64888,12 +65189,12 @@ var Criterion = function Criterion(props) {
     var root = document.getElementById(ROOT_ID$1);
     if (position && root) {
       var container = document.createElement('div');
-      container.className = styles$M['vitro-operator-list-container'];
-      container.style.left = position.right + PX_UNIT$5;
-      container.style.top = position.top + PX_UNIT$5;
+      container.className = styles$L['vitro-operator-list-container'];
+      container.style.left = position.right + UNIT.PX;
+      container.style.top = position.top + UNIT.PX;
       setOperatorListContainer(container);
       var content = React__default.createElement("ul", {
-        className: styles$M['vitro-operator-list']
+        className: styles$L['vitro-operator-list']
       }, props.operatorList.map(function (item) {
         return React__default.createElement("li", {
           onClick: function onClick() {
@@ -64906,25 +65207,25 @@ var Criterion = function Criterion(props) {
     }
   };
   return React__default.createElement("div", {
-    className: styles$M['vitro-criterion-container']
+    className: styles$L['vitro-criterion-container']
   }, React__default.createElement("div", {
-    className: styles$M['vitro-operator-select-container']
+    className: styles$L['vitro-operator-select-container']
   }, props.isShowOperatorSelect && React__default.createElement("div", {
     ref: operatorSelectRef,
-    className: styles$M['vitro-operator-select'],
+    className: styles$L['vitro-operator-select'],
     onClick: toggleOperatorSelect
   }, React__default.createElement("div", null, operator.text))), React__default.createElement("div", {
-    className: styles$M['vitro-control'] + CTRL.SPACE + state
+    className: styles$L['vitro-control'] + CTRL.SPACE + state
   }, React__default.createElement("div", {
     ref: labelRef,
-    className: styles$M['vitro-label']
+    className: styles$L['vitro-label']
   }, React__default.createElement("span", null, props.label)), React__default.createElement(ConditionSelect, {
     ref: conditionSelectRef,
     itemList: props.conditionList,
     onSelect: onConditionClick,
     defaultValue: defaultCondition
   }), React__default.createElement(props.content.component, _extends({}, componentProps, {
-    className: styles$M['vitro-control'],
+    className: styles$L['vitro-control'],
     onBlur: onBlur,
     onFocus: onFocus,
     onChange: onControlChange,
@@ -64936,7 +65237,7 @@ var Criterion = function Criterion(props) {
     onClick: function onClick() {
       return props.onDelete(componentProps.id);
     },
-    className: styles$M['vitro-button-cancel']
+    className: styles$L['vitro-button-cancel']
   }));
 };
 
@@ -64946,7 +65247,7 @@ var LOCALE$8;
   LOCALE["EMPTY_PLACEHOLDER"] = "app.common.search.checkboxList.emptyPlaceholder";
 })(LOCALE$8 || (LOCALE$8 = {}));
 
-var styles$N = {"vitro-control":"_input_vitro-control__btu7j_","vitro-active":"_input_vitro-active_jxhGdE8","vitro-focus":"_input_vitro-focus_3tuxmPs","vitro-button-search":"_input_vitro-button-search_15PeWCS","vitro-search-value-list":"_input_vitro-search-value-list_2I_KVY5","vitro-button-cancel":"_input_vitro-button-cancel_YqNZPj-","vitro-button-settings":"_input_vitro-button-settings_1w9FwYt","vitro-search-value":"_input_vitro-search-value_1ZbcNTJ"};
+var styles$M = {"vitro-control":"_input_vitro-control__btu7j_","vitro-active":"_input_vitro-active_jxhGdE8","vitro-focus":"_input_vitro-focus_3tuxmPs","vitro-button-search":"_input_vitro-button-search_15PeWCS","vitro-search-value-list":"_input_vitro-search-value-list_2I_KVY5","vitro-button-cancel":"_input_vitro-button-cancel_YqNZPj-","vitro-button-settings":"_input_vitro-button-settings_1w9FwYt","vitro-search-value":"_input_vitro-search-value_1ZbcNTJ"};
 
 var NEW_LINE$1 = '\n';
 var Input$1 = function Input(props) {
@@ -64992,15 +65293,15 @@ var Input$1 = function Input(props) {
     onSubmit();
   };
   var onFocus = function onFocus() {
-    setState(styles$N['vitro-focus']);
+    setState(styles$M['vitro-focus']);
     if (props.onFocus) {
       props.onFocus();
     }
   };
   var getClassName = function getClassName() {
-    var classList = [styles$N['vitro-control'], props.className || CTRL.EMPTY, state];
+    var classList = [styles$M['vitro-control'], props.className || CTRL.EMPTY, state];
     if (props.isActive) {
-      classList.push(styles$N['vitro-active']);
+      classList.push(styles$M['vitro-active']);
     }
     return classList.join(CTRL.SPACE);
   };
@@ -65043,24 +65344,24 @@ var Input$1 = function Input(props) {
     var firstValue = valueList[0];
     var list = valueList.slice(1);
     return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
-      className: styles$N['vitro-search-value']
+      className: styles$M['vitro-search-value']
     }, React__default.createElement("span", null, getTextValue(firstValue)), React__default.createElement("button", {
       onClick: function onClick() {
         return onRemoveValue([firstValue]);
       },
-      className: styles$N['vitro-button-cancel']
+      className: styles$M['vitro-button-cancel']
     })), list.length >= 1 ? React__default.createElement(Tooltip$1, {
       text: getTextValueList(list),
-      placement: PLACEMENT$1.BOTTOM
+      placement: PLACEMENT$2.BOTTOM
     }, React__default.createElement("div", {
-      className: styles$N['vitro-search-value']
+      className: styles$M['vitro-search-value']
     }, localeService.create(LOCALE$8.INPUT_MORE, {
       count: list.length
     }), React__default.createElement("button", {
       onClick: function onClick() {
         return onRemoveValue(list);
       },
-      className: styles$N['vitro-button-cancel']
+      className: styles$M['vitro-button-cancel']
     }))) : null);
   };
   var onSearchClick = function onSearchClick() {
@@ -65073,10 +65374,10 @@ var Input$1 = function Input(props) {
   return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
     className: getClassName()
   }, React__default.createElement("button", {
-    className: styles$N['vitro-button-search'] + (props.isSettingsActive ? CTRL.SPACE + styles$N['vitro-active'] : CTRL.EMPTY),
+    className: styles$M['vitro-button-search'] + (props.isSettingsActive ? CTRL.SPACE + styles$M['vitro-active'] : CTRL.EMPTY),
     onClick: onSearchClick
   }), !props.isMobileView && React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
-    className: styles$N['vitro-search-value-list']
+    className: styles$M['vitro-search-value-list']
   }, props.valueList.length ? getSelectedValueList(props.valueList) : React__default.createElement("input", {
     type: 'text',
     ref: inputRef,
@@ -65087,10 +65388,10 @@ var Input$1 = function Input(props) {
     placeholder: !props.isActive ? props.placeholder : CTRL.EMPTY
   })), props.isActive && React__default.createElement(React__default.Fragment, null, props.isShowSettings && React__default.createElement("button", {
     onClick: onSettingsClick,
-    className: styles$N['vitro-button-settings'] + (props.isSettingsActive ? CTRL.SPACE + styles$N['vitro-active'] : CTRL.EMPTY)
+    className: styles$M['vitro-button-settings'] + (props.isSettingsActive ? CTRL.SPACE + styles$M['vitro-active'] : CTRL.EMPTY)
   }), React__default.createElement("button", {
     onClick: onCancel,
-    className: styles$N['vitro-button-cancel']
+    className: styles$M['vitro-button-cancel']
   })))));
 };
 
@@ -65214,6 +65515,7 @@ var FieldIterator = React.forwardRef(function (props, ref) {
       },
       isRow: isControlRow(field.internalName),
       field: field,
+      isFlipDropdown: !props.isVisibleOverflow,
       ref: React.createRef()
     };
     return control;
@@ -65277,7 +65579,7 @@ var FieldIterator = React.forwardRef(function (props, ref) {
   })));
 });
 
-var styles$O = {"vitro-search":"_search_vitro-search_QkJksC_","vitro-active":"_search_vitro-active_1HhQOCR","vitro-settings-dialog":"_search_vitro-settings-dialog_1_c5bIg","vitro-filter":"_search_vitro-filter_2n-Y-mS","vitro-add-field":"_search_vitro-add-field_2hHt1Z2","vitro-add-field-button":"_search_vitro-add-field-button_30hdXYn","vitro-add-field-dialog":"_search_vitro-add-field-dialog_3gC92SF","vitro-footer":"_search_vitro-footer_1-ya4xk","vitro-button-cancel":"_search_vitro-button-cancel_1M8UkMM"};
+var styles$N = {"vitro-search":"_search_vitro-search_QkJksC_","vitro-active":"_search_vitro-active_1HhQOCR","vitro-settings-dialog":"_search_vitro-settings-dialog_1_c5bIg","vitro-filter":"_search_vitro-filter_2n-Y-mS","vitro-add-field":"_search_vitro-add-field_2hHt1Z2","vitro-add-field-button":"_search_vitro-add-field-button_30hdXYn","vitro-add-field-dialog":"_search_vitro-add-field-dialog_3gC92SF","vitro-footer":"_search_vitro-footer_1-ya4xk","vitro-button-cancel":"_search_vitro-button-cancel_1M8UkMM"};
 
 var Filter = function Filter(props) {
   var _useState = React.useState(null),
@@ -65335,17 +65637,18 @@ var Filter = function Filter(props) {
     props.onChange(changedFieldValueMap);
   };
   return React__default.createElement("div", {
-    className: styles$O['vitro-filter']
+    className: styles$N['vitro-filter']
   }, componentMap && React__default.createElement(FieldIterator, {
     fieldList: props.fieldList,
     fieldValueMap: fieldValueMap,
     changedFieldValueMap: changedFieldValueMap,
     componentMap: componentMap,
-    onChange: onChange
+    onChange: onChange,
+    isVisibleOverflow: true
   }));
 };
 
-var styles$P = {"vitro-checkbox-list":"_checkbox-list_vitro-checkbox-list_1iZSkkv","vitro-control":"_checkbox-list_vitro-control_cxgm4cj","vitro-checkbox":"_checkbox-list_vitro-checkbox_1EqsnoQ"};
+var styles$O = {"vitro-checkbox-list":"_checkbox-list_vitro-checkbox-list_1iZSkkv","vitro-control":"_checkbox-list_vitro-control_cxgm4cj","vitro-checkbox":"_checkbox-list_vitro-checkbox_1EqsnoQ"};
 
 var CheckboxList = function CheckboxList(props) {
   var _useState = React.useState(props.itemList),
@@ -65398,18 +65701,18 @@ var CheckboxList = function CheckboxList(props) {
       onChange: function onChange(value, name) {
         return _onChange(value, item.id);
       },
-      className: styles$P['vitro-checkbox']
+      className: styles$O['vitro-checkbox']
     });
   };
   return React__default.createElement("div", {
-    className: styles$P['vitro-checkbox-list']
+    className: styles$O['vitro-checkbox-list']
   }, React__default.createElement(Input$1, {
     valueList: [],
     onCancel: onSearchCancel,
     onChange: onInputChange,
     onSubmit: onInputChange,
     isActive: false,
-    className: styles$P['vitro-control'],
+    className: styles$O['vitro-control'],
     isMobileView: false
   }), React__default.createElement(ScrollBar, null, isShowSearchResult ? searchItemList.length ? searchItemList.map(function (item) {
     return getCheckbox(item);
@@ -65484,7 +65787,7 @@ var Search = function Search(props) {
   }, [window.innerWidth]);
   React.useEffect(function () {
     if (selectedSearchCriterionList.length) {
-      setState(styles$O['vitro-active']);
+      setState(styles$N['vitro-active']);
     }
   }, [selectedSearchCriterionList]);
   React.useEffect(function () {
@@ -65624,7 +65927,7 @@ var Search = function Search(props) {
     }
   };
   var onFocusInput = function onFocusInput() {
-    setState(styles$O['vitro-active']);
+    setState(styles$N['vitro-active']);
   };
   var onRemoveValue = function onRemoveValue(valueList) {
     setSearchCriterionList(valueList);
@@ -65632,7 +65935,7 @@ var Search = function Search(props) {
   };
   return React__default.createElement("div", {
     ref: searchRef,
-    className: styles$O['vitro-search'] + CTRL.SPACE + state
+    className: styles$N['vitro-search'] + CTRL.SPACE + state
   }, React__default.createElement(Input$1, {
     valueList: selectedSearchCriterionList,
     onSettingsClick: onSettingsClick,
@@ -65647,7 +65950,7 @@ var Search = function Search(props) {
     isMobileView: isMobileView,
     isShowSettings: true
   }), isShowDialog && React__default.createElement("div", {
-    className: styles$O['vitro-settings-dialog']
+    className: styles$N['vitro-settings-dialog']
   }, React__default.createElement(Filter, {
     fieldList: filterFieldList,
     valueList: selectedSearchCriterionList,
@@ -65658,30 +65961,112 @@ var Search = function Search(props) {
     getConditionList: props.getConditionList,
     getDefaultCondition: props.getDefaultCondition
   }), isShowAddFieldButton && React__default.createElement("div", {
-    className: styles$O['vitro-add-field']
+    className: styles$N['vitro-add-field']
   }, React__default.createElement(Button$2, {
     text: props.labelAddField,
     onClick: onAddField,
-    className: styles$O['vitro-add-field-button']
+    className: styles$N['vitro-add-field-button']
   }), isShowAddFieldDialog && React__default.createElement("div", {
     ref: addFieldDialogRef,
-    className: styles$O['vitro-add-field-dialog']
+    className: styles$N['vitro-add-field-dialog']
   }, React__default.createElement(CheckboxList, {
     itemList: checkboxFieldList,
     onChange: onFieldListChange,
     isAllSelected: props.isAllFieldsVisible
   }))), React__default.createElement("div", {
-    className: styles$O['vitro-footer']
+    className: styles$N['vitro-footer']
   }, React__default.createElement(Button$2, {
     text: props.labelCancel,
     onClick: closeSettings,
-    className: styles$O['vitro-button-cancel']
+    className: styles$N['vitro-button-cancel']
   }), React__default.createElement(Button$2, {
     text: props.labelSearch,
     onClick: onSubmit
   }))));
 };
 
+var POSITION$1;
+(function (POSITION) {
+  POSITION["HORIZONTAL"] = "horizontal";
+  POSITION["VERTICAL"] = "vertical";
+})(POSITION$1 || (POSITION$1 = {}));
+var WIDTH;
+(function (WIDTH) {
+  WIDTH[WIDTH["DEFAULT"] = 70] = "DEFAULT";
+  WIDTH[WIDTH["DEFAULT_MIN"] = 50] = "DEFAULT_MIN";
+  WIDTH[WIDTH["DEFAULT_MAX"] = 80] = "DEFAULT_MAX";
+})(WIDTH || (WIDTH = {}));
+
+var SplitterConstants = {
+    __proto__: null,
+    get POSITION () { return POSITION$1; },
+    get WIDTH () { return WIDTH; }
+};
+
+var Splitter = function Splitter(props) {
+  return React__default.createElement(ReactSplitter, {
+    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,
+    primaryPaneWidth: (props.width ? props.width : WIDTH.DEFAULT) + CTRL.PERCENT,
+    postPoned: props.isPostPoned,
+    maximizedPrimaryPane: props.isMaximizedPrimaryPane,
+    minimalizedPrimaryPane: props.isMinimalizedPrimaryPane,
+    dispatchResize: props.isDispatchResize,
+    onDragFinished: props.onDragFinished,
+    className: props.className
+  }, props.children);
+};
+
+var styles$P = {"vitro-route-item":"_route-item_vitro-route-item_bBCgBZG","vitro-route-item-body":"_route-item_vitro-route-item-body_1_1fjOZ","vitro-route-item-content":"_route-item_vitro-route-item-content_2CcLogk","vitro-button-collapse":"_route-item_vitro-button-collapse_1kVB5Vo","vitro-button-expand":"_route-item_vitro-button-expand_3IuABa1","vitro-button-hide-comment":"_route-item_vitro-button-hide-comment_2CiY-Ch","vitro-button-show-comment":"_route-item_vitro-button-show-comment_DJt2SLC","vitro-avatar":"_route-item_vitro-avatar_3Dypnmz","vitro-date":"_route-item_vitro-date_3ojnKSb","vitro-route-item-header":"_route-item_vitro-route-item-header_y69bLwZ","vitro-flex":"_route-item_vitro-flex_3ebkqZ9","vitro-comment":"_route-item_vitro-comment_2K7RwrZ","vitro-status-color":"_route-item_vitro-status-color_VgXzXKD"};
+
+var RouteItem = function RouteItem(props) {
+  var _useState = React.useState(true),
+    isExpanded = _useState[0],
+    setIsExpanded = _useState[1];
+  var _useState2 = React.useState(false),
+    isShowComment = _useState2[0],
+    setIsShowComment = _useState2[1];
+  return React__default.createElement("div", {
+    className: styles$P['vitro-route-item']
+  }, props.children ? React__default.createElement("button", {
+    className: isExpanded ? styles$P['vitro-button-collapse'] : styles$P['vitro-button-expand'],
+    onClick: function onClick() {
+      return setIsExpanded(!isExpanded);
+    }
+  }) : null, React__default.createElement("div", {
+    className: styles$P['vitro-route-item-content']
+  }, props.userName && props.status && React__default.createElement("div", {
+    className: styles$P['vitro-route-item-header']
+  }, React__default.createElement("div", null, React__default.createElement("div", null, React__default.createElement(Avatar, {
+    userName: props.userName,
+    image: props.userImage,
+    className: styles$P['vitro-avatar']
+  }), props.userName), React__default.createElement("div", {
+    className: styles$P['vitro-date']
+  }, props.date)), React__default.createElement("div", null, React__default.createElement("div", null, props.statusColor && React__default.createElement("div", {
+    className: styles$P['vitro-status-color'],
+    style: {
+      background: props.statusColor
+    }
+  }), props.status), React__default.createElement("div", null, React__default.createElement("a", {
+    href: props.itemUrl
+  }, CTRL.SHARP + props.itemId)))), React__default.createElement("div", {
+    className: styles$P['vitro-route-item-body']
+  }, React__default.createElement("div", {
+    className: styles$P['vitro-flex']
+  }, React__default.createElement("span", null, props.name), props.comment && React__default.createElement("button", {
+    className: isShowComment ? styles$P['vitro-button-hide-comment'] : styles$P['vitro-button-show-comment'],
+    onClick: function onClick() {
+      return setIsShowComment(!isShowComment);
+    }
+  })), isShowComment && props.comment && React__default.createElement("div", {
+    className: styles$P['vitro-comment']
+  }, props.comment)), isExpanded && React__default.createElement("div", {
+    className: styles$P['vitro-route-item-child']
+  }, props.children)));
+};
+
 exports.ACTION_HANDLER = ActionHandlerConstants;
 exports.ALERT = AlertConstants;
 exports.ActionHandler = ActionHandler;
@@ -65722,9 +66107,12 @@ exports.NUMBER_INPUT = NumberInputConstants;
 exports.NumberInput = NumberInput;
 exports.PasswordInput = PasswordInput;
 exports.PdfViewer = PdfViewer;
+exports.RouteItem = RouteItem;
+exports.SPLITTER = SplitterConstants;
 exports.ScrollBar = ScrollBar;
 exports.Search = Search;
 exports.Sidebar = Sidebar;
+exports.Splitter = Splitter;
 exports.TABLE_VIEW = TableViewConstants;
 exports.TOOLTIP = TooltipConstants;
 exports.TREE_VIEW = TreeViewConstants;