@vitrosoftware/common-ui-ts 1.1.227 → 1.1.228

package/dist/index.js

@@ -516,10 +516,13 @@ var styles$1 = {"vitro-scrollbar-content":"_scrollbar_vitro-scrollbar-content_3H
 
 var CSS_CLASS_SCROLL_Y = 'ps-scroll-y';
 var w = window;
-var ScrollBar = function ScrollBar(props) {
+var ScrollBar = React.forwardRef(function (props, outerRef) {
   var ref = React.useRef(null);
   var scrollElementRef = React.useRef(null);
   var observerRef = React.useRef();
+  React.useImperativeHandle(outerRef, function () {
+    return ref.current;
+  }, []);
   React.useEffect(function () {
     return function () {
       if (observerRef.current) {
@@ -579,7 +582,7 @@ var ScrollBar = function ScrollBar(props) {
         });
       }
       if (props.onInit) {
-        props.onInit(ref.current);
+        props.onInit(ref.current, scrollElement);
       }
       if (props.isFocusOnScroll && ref.current) {
         ref.current.addEventListener(CSS_CLASS_SCROLL_Y, function () {
@@ -591,7 +594,9 @@ var ScrollBar = function ScrollBar(props) {
     }
   };
   var onWheel = function onWheel(e) {
-    e.stopPropagation();
+    if (props.isPreventParentScroll) {
+      e.stopPropagation();
+    }
   };
   var onScrollY = function onScrollY(e) {
     if (ref.current && props.onScrollY) {
@@ -601,12 +606,12 @@ var ScrollBar = function ScrollBar(props) {
   return React__default.createElement("div", {
     ref: ref,
     className: props.className || CTRL.EMPTY
-  }, React__default.createElement("div", {
+  }, React__default.createElement("div", Object.assign({}, props, {
     ref: props.contentRef,
     onWheel: onWheel,
     className: styles$1['vitro-scrollbar-content'] + (props.contentClassName ? CTRL.SPACE + props.contentClassName : CTRL.EMPTY)
-  }, props.children));
-};
+  }), props.children));
+});
 
 (function (EVENT) {
   EVENT["MOUSEDOWN"] = "mousedown";
@@ -21128,6 +21133,7 @@ var CFG_ATTRIBUTE;
   CFG_ATTRIBUTE["SHOW_V_SCROLL"] = "ShowVScroll";
   CFG_ATTRIBUTE["MID_WIDTH"] = "MidWidth";
   CFG_ATTRIBUTE["RIGHT_WIDTH"] = "RightWidth";
+  CFG_ATTRIBUTE["SCROLL_TOP"] = "ScrollTop";
 })(CFG_ATTRIBUTE || (CFG_ATTRIBUTE = {}));
 var URL;
 (function (URL) {
@@ -21199,6 +21205,11 @@ var ATTRIBUTE$1;
   ATTRIBUTE["ADDED"] = "Added";
   ATTRIBUTE["FORMULA"] = "Formula";
   ATTRIBUTE["FORMAT"] = "Format";
+  ATTRIBUTE["SPAN"] = "Span";
+  ATTRIBUTE["LANG"] = "Lang";
+  ATTRIBUTE["GMT"] = "GMT";
+  ATTRIBUTE["ACTIONS"] = "Actions";
+  ATTRIBUTE["MENU"] = "Menu";
 })(ATTRIBUTE$1 || (ATTRIBUTE$1 = {}));
 var DRAG_ITEM_TYPE;
 (function (DRAG_ITEM_TYPE) {
@@ -21413,6 +21424,7 @@ var TableViewServiceImpl = /*#__PURE__*/function () {
     this.gridChangesFormat = 'JSON';
     this.searchCriterionMap = new Map();
     this.visibleColumnList = [];
+    this.disabledActionList = [];
     this.grid = grid;
     this.id = grid.id;
     this.grid.Source.Upload.Format = this.gridChangesFormat;
@@ -21425,6 +21437,7 @@ var TableViewServiceImpl = /*#__PURE__*/function () {
     } else {
       this.clearSearchCriterionList(searchId);
     }
+    this.grid.searchCriterionList = Array.from(this.searchCriterionMap.values()).flat();
   };
   _proto.setCfgAttribute = function setCfgAttribute(attr, value) {
     var attrList = attr.split(CTRL.DOT);
@@ -21810,7 +21823,7 @@ var TableViewServiceImpl = /*#__PURE__*/function () {
       var filterContentTypeListJson = JSON.stringify(this.filterContentTypeList);
       newData = this.setXmlPart(newData, "FilterContentTypeList='" + filterContentTypeListJson + "'", XML_TAG.PAGE_SETTINGS);
     }
-    newData = this.setSearchCriterionLisXml(newData);
+    newData = this.setSearchCriterionListXml(newData);
     newData = this.setVisibleColumnListXml(newData);
     return newData;
   };
@@ -21831,7 +21844,7 @@ var TableViewServiceImpl = /*#__PURE__*/function () {
     }
     return xmlString;
   };
-  _proto.setSearchCriterionLisXml = function setSearchCriterionLisXml(data) {
+  _proto.setSearchCriterionListXml = function setSearchCriterionListXml(data) {
     var searchCriterionList = this.getSearchCriterionList();
     if (searchCriterionList && searchCriterionList.length) {
       var searchCriterionListJson = JSON.stringify(searchCriterionList);
@@ -21863,6 +21876,12 @@ var TableViewServiceImpl = /*#__PURE__*/function () {
       }
     }
   };
+  _proto.getNextCol = function getNextCol(col) {
+    return this.grid.GetNextCol(col);
+  };
+  _proto.getLastVisible = function getLastVisible() {
+    return this.grid.GetLastVisible();
+  };
   _createClass(TableViewServiceImpl, [{
     key: "columnList",
     get: function get() {
@@ -21981,10 +22000,84 @@ var TableViewServiceImpl = /*#__PURE__*/function () {
     get: function get() {
       return this.grid.Source;
     }
+  }, {
+    key: "linkItemId",
+    get: function get() {
+      return this.grid.linkItemId;
+    },
+    set: function set(id) {
+      this.grid.linkItemId = id;
+    }
   }]);
   return TableViewServiceImpl;
 }();
 
+var TableViewOnCustomAjaxServiceImpl = /*#__PURE__*/function () {
+  function TableViewOnCustomAjaxServiceImpl(ajaxService) {
+    this.id = EVENT$1.ON_CUSTOM_AJAX;
+    this.data = 'Data';
+    this.dataRequestUrl = '/api/tableViewRequest/' + this.data;
+    this.dataResultString = '<Grid><Body><B /></Body></Grid>';
+    this.getRequest = 'Get';
+    this.treeGrid = 'treegrid/';
+    this.api = '/api/';
+    this.cacheVersionParam = 'CacheVersion';
+    this.ajaxService = ajaxService;
+  }
+  var _proto = TableViewOnCustomAjaxServiceImpl.prototype;
+  _proto.process = function process(tableView, source, data, func) {
+    var success = function success(ret) {
+      return func(0, ret);
+    };
+    if (source.Url && source.Url.indexOf(this.dataRequestUrl) === 0) {
+      success(this.dataResultString);
+      return true;
+    }
+    var fail = function fail() {
+      return func(0, '<Grid><IO / > <Body><B Pos="0" Count = "0" /> </Body></Grid>');
+    };
+    var url = source.Url;
+    if (url.indexOf(this.api) !== 0) {
+      url = this.getTreeGridFileUrl(tableView[this.cacheVersionParam], source);
+    }
+    if (source.Method === this.getRequest) {
+      this.ajaxService.get(url, tableView.scope).then(success)["catch"](fail);
+    } else {
+      var formData = new FormData();
+      formData.set(this.data, data);
+      this.ajaxService.post(url, formData, tableView.scope).then(success)["catch"](fail);
+    }
+    return true;
+  };
+  _proto.getTreeGridFileUrl = function getTreeGridFileUrl(cacheVersion, source) {
+    var url = source.Url;
+    if (url[0] !== CTRL.SLASH) {
+      if (url.indexOf(this.treeGrid) !== 0) {
+        url = this.treeGrid + source.Url;
+      }
+      url = CTRL.SLASH + url;
+    }
+    if (url.indexOf(CTRL.QUESTION) === -1) {
+      url += CTRL.QUESTION + this.cacheVersionParam + CTRL.EQUAL + cacheVersion;
+    }
+    return url;
+  };
+  return TableViewOnCustomAjaxServiceImpl;
+}();
+
+var SERVICE = function SERVICE() {};
+SERVICE.LOCALE = 'LocaleService';
+SERVICE.LOCAL_STORAGE = 'LocalStorageService';
+SERVICE.COLUMN = 'ColumnService';
+SERVICE.GUID = 'GuidService';
+SERVICE.EVENT = 'EventService';
+SERVICE.IMAGE = 'ImageService';
+SERVICE.ITEM = 'ItemService';
+SERVICE.CONTENT_TYPE = 'ContentTypeService';
+SERVICE.LOOKUP_LIST_ITEM = 'LookupListItemService';
+SERVICE.ITEM_SELECT_DIALOG = 'ItemSelectDialogService';
+SERVICE.AJAX = 'AjaxService';
+
 var styles$5 = {"vitro-table-view":"_table-view_vitro-table-view_1tTs32D"};
 
 var w$2 = window;
@@ -22056,6 +22149,22 @@ var TreeGrid = function TreeGrid(props) {
       return [URL.API, controller, dataKey, props.listCode].join(CTRL.SLASH);
     }
   };
+  var initOnCustomAjax = function initOnCustomAjax() {
+    if (props.onCustomAjax) {
+      var onCustomAjax = props.onCustomAjax;
+      w$2.TGSetEvent(EVENT$1.ON_CUSTOM_AJAX, props.id, function (grid, source, data, func) {
+        return onCustomAjax(grid, source, data, func);
+      });
+    } else if (props.container) {
+      var ajaxService = props.container.get(SERVICE.AJAX);
+      if (ajaxService) {
+        var tableViewOnCustomAjaxService = new TableViewOnCustomAjaxServiceImpl(ajaxService);
+        w$2.TGSetEvent(EVENT$1.ON_CUSTOM_AJAX, props.id, function (grid, source, data, func) {
+          return tableViewOnCustomAjaxService.process(grid, source, data, func);
+        });
+      }
+    }
+  };
   React.useEffect(function () {
     if (prevGridIdRef.current) {
       disposeTableViewById(prevGridIdRef.current);
@@ -22065,15 +22174,10 @@ var TreeGrid = function TreeGrid(props) {
       w$2.TGSetEvent(EVENT$1.ON_LOADED, props.id, function (grid, next) {
         return onGridLoaded(grid, next);
       });
-      w$2.TGSetEvent(EVENT$1.ON_INIT, props.id, function (grid, reload) {
+      w$2.TGSetEvent(EVENT$1.ON_INIT, props.id, function (grid) {
         return onGridInit(grid);
       });
-      if (props.onCustomAjax) {
-        var onCustomAjax = props.onCustomAjax;
-        w$2.TGSetEvent(EVENT$1.ON_CUSTOM_AJAX, props.id, function (grid, source, data, func) {
-          return onCustomAjax(grid, source, data, func);
-        });
-      }
+      initOnCustomAjax();
     }
     if (w$2.TreeGrid) {
       if (props.layout || props.data) {
@@ -22175,6 +22279,7 @@ var MicroFrontendServiceImpl = /*#__PURE__*/function () {
 
 var styles$6 = {"vitro-micro-frontend":"_micro-frontend_vitro-micro-frontend_3PhlRuX"};
 
+var index = 1;
 var MicroFrontend = React.forwardRef(function (props, ref) {
   var _useState = React.useState(),
     id = _useState[0],
@@ -22189,7 +22294,7 @@ var MicroFrontend = React.forwardRef(function (props, ref) {
       if (props.data.containerId) {
         setId(props.data.containerId);
       } else {
-        var containerId = id ? id : getId(rootRef.current);
+        var containerId = (id ? id : getId(rootRef.current)) + CTRL.DASH + index++;
         setId(containerId);
         props.data.containerId = containerId;
       }
@@ -22724,18 +22829,6 @@ var DropZone = React.forwardRef(function (props, ref) {
   }, props.label)));
 });
 
-var SERVICE = function SERVICE() {};
-SERVICE.LOCALE = 'LocaleService';
-SERVICE.LOCAL_STORAGE = 'LocalStorageService';
-SERVICE.COLUMN = 'ColumnService';
-SERVICE.GUID = 'GuidService';
-SERVICE.EVENT = 'EventService';
-SERVICE.IMAGE = 'ImageService';
-SERVICE.ITEM = 'ItemService';
-SERVICE.CONTENT_TYPE = 'ContentTypeService';
-SERVICE.LOOKUP_LIST_ITEM = 'LookupListItemService';
-SERVICE.ITEM_SELECT_DIALOG = 'ItemSelectDialogService';
-
 var styles$a = {"vitro-uploader":"_uploader_vitro-uploader_237vX7T","vitro-upload-container":"_uploader_vitro-upload-container_2ASGHSS","vitro-drop-zone":"_uploader_vitro-drop-zone_3w2dluc","vitro-progress-info":"_uploader_vitro-progress-info_J4BRjZ0","vitro-button-close":"_uploader_vitro-button-close_30As0AM","vitro-button-show":"_uploader_vitro-button-show_uUmWVJc","vitro-button-hide":"_uploader_vitro-button-hide_LYS1px9","vitro-hidden":"_uploader_vitro-hidden_12825pc","vitro-progress":"_uploader_vitro-progress_2NtaSj2","vitro-progress-bar":"_uploader_vitro-progress-bar_3YXLbbu"};
 
 var $$2 = window.$;
@@ -56386,35 +56479,6 @@ var BootstrapAlert = Object.assign(Alert, {
   Heading: AlertHeading
 });
 
-const Button$1 = /*#__PURE__*/React.forwardRef(({
-  as,
-  bsPrefix,
-  variant = 'primary',
-  size,
-  active = false,
-  disabled = false,
-  className,
-  ...props
-}, ref) => {
-  const prefix = useBootstrapPrefix(bsPrefix, 'btn');
-  const [buttonProps, {
-    tagName
-  }] = useButtonProps({
-    tagName: as,
-    disabled,
-    ...props
-  });
-  const Component = tagName;
-  return /*#__PURE__*/jsxRuntime.jsx(Component, {
-    ...buttonProps,
-    ...props,
-    ref: ref,
-    disabled: disabled,
-    className: classnames(className, prefix, active && 'active', variant && `${prefix}-${variant}`, size && `${prefix}-${size}`, props.href && disabled && 'disabled')
-  });
-});
-Button$1.displayName = 'Button';
-
 const context = /*#__PURE__*/React.createContext(null);
 context.displayName = 'CardHeaderContext';
 
@@ -59912,11 +59976,12 @@ var DialogComponent = function DialogComponent(props) {
   }, props.children);
 };
 
-var styles$e = {"vitro-dialog-content":"_dialog-content_vitro-dialog-content_qQNWu6x"};
+var styles$e = {"vitro-dialog-content":"_dialog-content_vitro-dialog-content_qQNWu6x","vitro-dialog-content-padding":"_dialog-content_vitro-dialog-content-padding_oVEc6Z4"};
 
 var DialogContent = function DialogContent(props) {
+  var className = [styles$e['vitro-dialog-content'], props.isCustomContainer ? CTRL.EMPTY : styles$e['vitro-dialog-content-padding'], props.className || CTRL.EMPTY].join(CTRL.SPACE);
   return React__default.createElement("div", {
-    className: styles$e['vitro-dialog-content'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY)
+    className: className
   }, props.children);
 };
 
@@ -59983,7 +60048,7 @@ var styles$h = {"vitro-button":"_button_vitro-button_hVfBuSO","vitro-animation-r
 
 var HTML_ELEMENT_SPAN = 'span';
 var TYPE_BUTTON = 'button';
-var Button$2 = React.forwardRef(function (props, ref) {
+var Button$1 = React.forwardRef(function (props, ref) {
   var _useState = React.useState(false),
     pending = _useState[0],
     setPending = _useState[1];
@@ -60062,7 +60127,7 @@ var Button$2 = React.forwardRef(function (props, ref) {
 });
 
 var ButtonCancel = function ButtonCancel(props) {
-  return React__default.createElement(Button$2, Object.assign({}, props, {
+  return React__default.createElement(Button$1, Object.assign({}, props, {
     className: STYLE.OUTLINE_LIGHT + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY)
   }));
 };
@@ -60074,7 +60139,7 @@ var ButtonGroup = React.forwardRef(function (props, ref) {
     ref: ref,
     className: styles$i['vitro-button-group'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY)
   }, props.itemList && props.itemList.length > 0 ? props.itemList.map(function (item, index) {
-    return React__default.createElement(Button$2, Object.assign({}, item, {
+    return React__default.createElement(Button$1, Object.assign({}, item, {
       key: index
     }));
   }) : null, props.children);
@@ -60150,7 +60215,7 @@ var DialogFooter = function DialogFooter(props) {
     onClick: props.onClose,
     className: styles$k['vitro-button']
   }), (_props$buttonList2 = props.buttonList) !== null && _props$buttonList2 !== void 0 && _props$buttonList2.length ? props.buttonList.map(function (button) {
-    return React__default.createElement(Button$2, Object.assign({}, button, {
+    return React__default.createElement(Button$1, Object.assign({}, button, {
       onClick: function onClick() {
         var _button$onClick;
         return (_button$onClick = button.onClick) === null || _button$onClick === void 0 ? void 0 : _button$onClick.call(button, props.dialog);
@@ -60289,7 +60354,8 @@ var Dialog = function Dialog(props) {
     content: props.headerContent,
     className: props.headerClassName
   }), component && React__default.createElement(DialogContent, {
-    className: props.contentClassName
+    className: props.contentClassName,
+    isCustomContainer: props.isCustomContentContainer
   }, component), props.children, isMobileView && props.hiddenContent && React__default.createElement(DialogDetailExpandButton, {
     onClick: onClickDetailButton
   }), props.hiddenContent && React__default.createElement("div", {
@@ -61101,25 +61167,188 @@ var OverflowButton = function OverflowButton(props) {
   });
 };
 
+var CSS_PROPERTY = function CSS_PROPERTY() {};
+CSS_PROPERTY.FONT_WEIGHT = 'font-weight';
+CSS_PROPERTY.FONT_SIZE = 'font-size';
+CSS_PROPERTY.FONT_FAMILY = 'font-family';
+
+var ValueTooltip = React.forwardRef(function (props, ref) {
+  var _useState = React.useState(false),
+    isEnabled = _useState[0],
+    setIsEnabled = _useState[1];
+  var _useState2 = React.useState(false),
+    isShow = _useState2[0],
+    setIsShow = _useState2[1];
+  var _useState3 = React.useState(props.text),
+    text = _useState3[0],
+    _setText = _useState3[1];
+  var canvasRef = React.useRef();
+  var containerRef = React.useRef();
+  var onShowTimeout = React.useMemo(function () {
+    return {
+      id: null
+    };
+  }, []);
+  var resizeObserver = React__default.useMemo(function () {
+    return new window.ResizeObserver(function (entries) {
+      for (var _iterator = _createForOfIteratorHelperLoose(entries), _step; !(_step = _iterator()).done;) {
+        var entry = _step.value;
+        setIsEnabled(isValueOverflow(text, entry.target));
+      }
+    });
+  }, [text]);
+  React.useEffect(function () {
+    if (props.containerRef && props.containerRef.current) {
+      containerRef.current = props.containerRef.current;
+      resizeObserver.observe(containerRef.current);
+      containerRef.current.addEventListener(exports.EVENT.MOUSEENTER, onMouseEnter);
+      containerRef.current.addEventListener(exports.EVENT.MOUSELEAVE, onMouseLeave);
+    }
+    return function () {
+      if (containerRef.current) {
+        containerRef.current.removeEventListener(exports.EVENT.MOUSEENTER, onMouseEnter);
+        containerRef.current.removeEventListener(exports.EVENT.MOUSELEAVE, onMouseLeave);
+      }
+    };
+  }, [props.containerRef, resizeObserver]);
+  React.useEffect(function () {
+    return function () {
+      resizeObserver.disconnect();
+    };
+  }, []);
+  React.useEffect(function () {
+    _setText(props.text);
+    if (containerRef.current) {
+      setIsEnabled(isValueOverflow(props.text, containerRef.current));
+    } else {
+      setIsEnabled(true);
+    }
+  }, [props.text]);
+  React.useEffect(function () {
+    if (props.onUpdate) {
+      props.onUpdate(isEnabled);
+    }
+  }, [isEnabled]);
+  React.useImperativeHandle(ref, function () {
+    return {
+      update: function update() {
+        if (containerRef.current) {
+          setIsEnabled(isValueOverflow(text, containerRef.current));
+        }
+      },
+      setIsShow: function setIsShow(value) {
+        if (value === false) {
+          setIsEnabled(false);
+        } else {
+          if (containerRef.current) {
+            setIsEnabled(isValueOverflow(text, containerRef.current));
+          } else {
+            setIsEnabled(true);
+          }
+        }
+      },
+      setText: function setText(value) {
+        _setText(value);
+      }
+    };
+  });
+  var isValueOverflow = function isValueOverflow(value, container) {
+    if (props.isMultiline) {
+      return isValueVerticalOverflow(container);
+    }
+    return isValueHorizontalOverflow(value, container);
+  };
+  var isValueHorizontalOverflow = function isValueHorizontalOverflow(value, container) {
+    var textWidth = getTextWidth(value, getCanvasFont(container), container.scrollWidth);
+    if (container && textWidth > getAvailableWidth(container)) {
+      return true;
+    } else {
+      return false;
+    }
+  };
+  var isValueVerticalOverflow = function isValueVerticalOverflow(container) {
+    return container.clientHeight + 1 < container.scrollHeight;
+  };
+  var getTextWidth = function getTextWidth(text, font, scrollWidth) {
+    if (!canvasRef.current) {
+      canvasRef.current = document.createElement('canvas');
+    }
+    var canvas = canvasRef.current;
+    var context = canvas.getContext('2d');
+    if (context) {
+      context.font = font;
+      var metrics = context.measureText(text);
+      return metrics.width;
+    }
+    return scrollWidth;
+  };
+  var getAvailableWidth = function getAvailableWidth(element) {
+    var style = getComputedStyle(element);
+    var paddingX = getNumber(style.paddingLeft) + getNumber(style.paddingRight);
+    var borderX = getNumber(style.borderLeftWidth) + getNumber(style.borderRightWidth);
+    return element.offsetWidth - paddingX - borderX;
+  };
+  var getNumber = function getNumber(value) {
+    return parseFloat(value) || 0;
+  };
+  var getCssStyle = function getCssStyle(element, prop) {
+    return window.getComputedStyle(element, null).getPropertyValue(prop);
+  };
+  var getCanvasFont = function getCanvasFont(el) {
+    if (el === void 0) {
+      el = document.body;
+    }
+    var fontWeight = getCssStyle(el, CSS_PROPERTY.FONT_WEIGHT);
+    var fontSize = getCssStyle(el, CSS_PROPERTY.FONT_SIZE);
+    var fontFamily = getCssStyle(el, CSS_PROPERTY.FONT_FAMILY);
+    return fontWeight + " " + fontSize + " " + fontFamily;
+  };
+  var onMouseEnter = function onMouseEnter(e) {
+    if (onShowTimeout.id) {
+      clearTimeout(onShowTimeout.id);
+    }
+    if (e.target == containerRef.current) {
+      onShowTimeout.id = setTimeout(function () {
+        setIsShow(true);
+      }, 750);
+    }
+  };
+  var onMouseLeave = function onMouseLeave(e) {
+    if (onShowTimeout.id) {
+      clearTimeout(onShowTimeout.id);
+    }
+    setTimeout(function () {
+      return setIsShow(false);
+    }, 300);
+  };
+  return React__default.createElement(Tooltip$1, Object.assign({}, props, {
+    text: text,
+    isShow: isEnabled ? isShow : false,
+    isHideOnHover: false
+  }), props.children);
+});
+
 var styles$r = {"vitro-tab":"_tab-group_vitro-tab_1Qb50HL","vitro-item":"_tab-group_vitro-item_2YnBcmb","active":"_tab-group_active_3M-IIR2"};
 
 var Tab = function Tab(props) {
-  if (!props.icon && !props.title) {
-    return null;
-  }
+  var linkRef = React.useRef(null);
   return React__default.createElement("div", {
     key: props.index,
     className: styles$r['vitro-item']
+  }, React__default.createElement(ValueTooltip, {
+    text: props.text,
+    containerRef: linkRef
   }, React__default.createElement(Nav$2.Item, {
     className: props.active ? styles$r['active'] : undefined,
     onClick: function onClick() {
       return props.onClick(props.index);
     }
   }, React__default.createElement(Nav$2.Link, {
-    eventKey: props.eventKey
-  }, React__default.createElement("span", null, props.icon && React__default.createElement(Image, {
-    defaultUrl: props.icon
-  }), props.title))));
+    eventKey: props.eventKey,
+    ref: linkRef
+  }, React__default.createElement("span", null, props.imageUrl && React__default.createElement(Image, {
+    defaultUrl: props.imageUrl
+  }), props.text)))));
 };
 
 var TabGroupHeader = function TabGroupHeader(props) {
@@ -61167,8 +61396,8 @@ var TabGroupHeader = function TabGroupHeader(props) {
         active: index === props.currentTab,
         onClick: onClick,
         eventKey: item.eventKey,
-        icon: item.icon,
-        title: item.text
+        imageUrl: item.imageUrl,
+        text: item.text
       });
     }
     if (activeItem && activeItem.index === index) {
@@ -61182,8 +61411,8 @@ var TabGroupHeader = function TabGroupHeader(props) {
     active: true,
     onClick: function onClick() {},
     eventKey: activeItem.eventKey,
-    icon: activeItem.icon,
-    title: activeItem.text
+    imageUrl: activeItem.imageUrl,
+    text: activeItem.text
   }), props.itemList && props.wrap && React__default.createElement(OverflowButton, {
     list: overflowTabList,
     offset: props.itemList.length - overflowTabList.length,
@@ -61247,10 +61476,11 @@ var TabGroupComponent = React.forwardRef(function (props, forwardedRef) {
     }
     return null;
   };
+  var isShowHeader = props.itemList.length === 1 ? props.itemList[0].isAlwaysShown === true : true;
   return React__default.createElement("div", {
     className: styles$r['vitro-tab'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY),
     ref: ref
-  }, props.itemList.length === 1 && props.isHideSingleHeader === true ? null : React__default.createElement(TabGroupHeader, {
+  }, isShowHeader ? React__default.createElement(TabGroupHeader, {
     itemList: props.itemList.map(function (item, index) {
       return _extends({}, item, {
         index: index
@@ -61261,7 +61491,7 @@ var TabGroupComponent = React.forwardRef(function (props, forwardedRef) {
     changeTab: changeTab,
     wrap: props.wrap,
     isDisabled: props.isDisabled
-  }), React__default.createElement("div", {
+  }) : null, React__default.createElement("div", {
     className: 'vitro-content'
   }, getContent()));
 });
@@ -61304,7 +61534,9 @@ var ViewPart = function ViewPart(props) {
   React.useEffect(function () {
     if (props.component) {
       props.props.settings = props.settings;
-      var _component = React__default.createElement(props.component, props.props);
+      var _component = React__default.createElement(props.component, _extends({}, props.props, {
+        scrollElementRef: props.scrollElementRef
+      }));
       setComponent(_component);
     } else {
       setComponent(null);
@@ -61334,6 +61566,7 @@ var styles$u = {"vitro-view":"_view_vitro-view_1NKb-kU","vitro-tab":"_view_vitro
 
 var GroupControl = function GroupControl(props) {
   var scrollbarContentRef = React.useRef(null);
+  var scrollElementRef = React.useRef();
   React.useEffect(function () {
     scrollIntoView();
   }, [props.item.id]);
@@ -61342,16 +61575,22 @@ var GroupControl = function GroupControl(props) {
       scrollbarContentRef.current.scrollIntoView();
     }
   };
+  var onInit = function onInit(elem, scrollElement) {
+    scrollElementRef.current = scrollElement;
+  };
   return React__default.createElement(ControlGroup, {
     horizontal: true
   }, React__default.createElement(ScrollBar, {
     contentClassName: styles$u['vitro-content'],
-    contentRef: scrollbarContentRef
+    contentRef: scrollbarContentRef,
+    key: props.key,
+    onInit: onInit
   }, props.componentList && props.componentList.map(function (viewPart) {
     return React__default.createElement(ViewPart, {
       component: viewPart.component,
       settings: viewPart.settings,
       props: props,
+      scrollElementRef: scrollElementRef,
       item: props.item,
       className: styles$u['vitro-view-part']
     });
@@ -61363,17 +61602,18 @@ var View = React.forwardRef(function (props, ref) {
     tabList = _useState[0],
     setTabList = _useState[1];
   var createTabList = function createTabList(tabList) {
-    return tabList.map(function (tab) {
-      return {
+    return tabList.map(function (tab, index) {
+      return _extends({}, tab, {
         text: tab.text,
         content: {
           component: GroupControl,
           props: {
             item: props.item,
-            componentList: tab.componentList
+            componentList: tab.componentList,
+            key: index
           }
         }
-      };
+      });
     });
   };
   React.useEffect(function () {
@@ -61382,12 +61622,11 @@ var View = React.forwardRef(function (props, ref) {
     }
   }, [props.tabList]);
   return tabList && React__default.createElement("div", {
-    className: styles$u['vitro-view']
+    className: styles$u['vitro-view'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY)
   }, React__default.createElement(TabGroup, {
     itemList: tabList,
     isDisabled: props.isDisabled,
     className: styles$u['vitro-tab'],
-    isHideSingleHeader: props.isHideSingleTabHeader,
     ref: ref,
     wrap: true
   }));
@@ -61512,7 +61751,7 @@ var TabButtonGroup = function TabButtonGroup(props) {
     return ((_tabList$index = tabList[index]) === null || _tabList$index === void 0 ? void 0 : _tabList$index.id) == activeItem;
   };
   var getTabButton = function getTabButton(item, index) {
-    return React__default.createElement(Button$2, {
+    return React__default.createElement(Button$1, {
       key: item.id,
       className: isTabButtonActive(index) ? styles$v[CSS_CLASS_ACTIVE] : CTRL.EMPTY,
       text: item.text,
@@ -61543,7 +61782,7 @@ var TabButtonGroup = function TabButtonGroup(props) {
     }
     overflowTabList.push(item);
     return null;
-  }), activeItemTabBtn && React__default.createElement(Button$2, {
+  }), activeItemTabBtn && React__default.createElement(Button$1, {
     key: activeItemTabBtn.id,
     className: styles$v[CSS_CLASS_ACTIVE],
     text: activeItemTabBtn.text,
@@ -62565,7 +62804,7 @@ var AddFieldButton = React.forwardRef(function (props, ref) {
   };
   return React__default.createElement("div", {
     className: styles$H['vitro-add-field']
-  }, React__default.createElement(Button$2, {
+  }, React__default.createElement(Button$1, {
     ref: addFieldButtonRef,
     text: props.labelAddField,
     onClick: props.onAddField,
@@ -62933,170 +63172,9 @@ var CriterionFieldIterator = function CriterionFieldIterator(props) {
   })));
 };
 
-var CSS_PROPERTY = function CSS_PROPERTY() {};
-CSS_PROPERTY.FONT_WEIGHT = 'font-weight';
-CSS_PROPERTY.FONT_SIZE = 'font-size';
-CSS_PROPERTY.FONT_FAMILY = 'font-family';
-
-var ValueTooltip = React.forwardRef(function (props, ref) {
-  var _useState = React.useState(false),
-    isEnabled = _useState[0],
-    setIsEnabled = _useState[1];
-  var _useState2 = React.useState(false),
-    isShow = _useState2[0],
-    setIsShow = _useState2[1];
-  var _useState3 = React.useState(props.text),
-    text = _useState3[0],
-    _setText = _useState3[1];
-  var canvasRef = React.useRef();
-  var containerRef = React.useRef();
-  var onShowTimeout = React.useMemo(function () {
-    return {
-      id: null
-    };
-  }, []);
-  var resizeObserver = React__default.useMemo(function () {
-    return new window.ResizeObserver(function (entries) {
-      for (var _iterator = _createForOfIteratorHelperLoose(entries), _step; !(_step = _iterator()).done;) {
-        var entry = _step.value;
-        setIsEnabled(isValueOverflow(text, entry.target));
-      }
-    });
-  }, [text]);
-  React.useEffect(function () {
-    if (props.containerRef && props.containerRef.current) {
-      containerRef.current = props.containerRef.current;
-      resizeObserver.observe(containerRef.current);
-      containerRef.current.addEventListener(exports.EVENT.MOUSEENTER, onMouseEnter);
-      containerRef.current.addEventListener(exports.EVENT.MOUSELEAVE, onMouseLeave);
-    }
-    return function () {
-      if (containerRef.current) {
-        containerRef.current.removeEventListener(exports.EVENT.MOUSEENTER, onMouseEnter);
-        containerRef.current.removeEventListener(exports.EVENT.MOUSELEAVE, onMouseLeave);
-      }
-    };
-  }, [props.containerRef, resizeObserver]);
-  React.useEffect(function () {
-    return function () {
-      resizeObserver.disconnect();
-    };
-  }, []);
-  React.useEffect(function () {
-    _setText(props.text);
-    if (containerRef.current) {
-      setIsEnabled(isValueOverflow(props.text, containerRef.current));
-    } else {
-      setIsEnabled(true);
-    }
-  }, [props.text]);
-  React.useEffect(function () {
-    if (props.onUpdate) {
-      props.onUpdate(isEnabled);
-    }
-  }, [isEnabled]);
-  React.useImperativeHandle(ref, function () {
-    return {
-      update: function update() {
-        if (containerRef.current) {
-          setIsEnabled(isValueOverflow(text, containerRef.current));
-        }
-      },
-      setIsShow: function setIsShow(value) {
-        if (value === false) {
-          setIsEnabled(false);
-        } else {
-          if (containerRef.current) {
-            setIsEnabled(isValueOverflow(text, containerRef.current));
-          } else {
-            setIsEnabled(true);
-          }
-        }
-      },
-      setText: function setText(value) {
-        _setText(value);
-      }
-    };
-  });
-  var isValueOverflow = function isValueOverflow(value, container) {
-    if (props.isMultiline) {
-      return isValueVerticalOverflow(container);
-    }
-    return isValueHorizontalOverflow(value, container);
-  };
-  var isValueHorizontalOverflow = function isValueHorizontalOverflow(value, container) {
-    var textWidth = getTextWidth(value, getCanvasFont(container), container.scrollWidth);
-    if (container && textWidth > getAvailableWidth(container)) {
-      return true;
-    } else {
-      return false;
-    }
-  };
-  var isValueVerticalOverflow = function isValueVerticalOverflow(container) {
-    return container.clientHeight + 1 < container.scrollHeight;
-  };
-  var getTextWidth = function getTextWidth(text, font, scrollWidth) {
-    if (!canvasRef.current) {
-      canvasRef.current = document.createElement('canvas');
-    }
-    var canvas = canvasRef.current;
-    var context = canvas.getContext('2d');
-    if (context) {
-      context.font = font;
-      var metrics = context.measureText(text);
-      return metrics.width;
-    }
-    return scrollWidth;
-  };
-  var getAvailableWidth = function getAvailableWidth(element) {
-    var style = getComputedStyle(element);
-    var paddingX = getNumber(style.paddingLeft) + getNumber(style.paddingRight);
-    var borderX = getNumber(style.borderLeftWidth) + getNumber(style.borderRightWidth);
-    return element.offsetWidth - paddingX - borderX;
-  };
-  var getNumber = function getNumber(value) {
-    return parseFloat(value) || 0;
-  };
-  var getCssStyle = function getCssStyle(element, prop) {
-    return window.getComputedStyle(element, null).getPropertyValue(prop);
-  };
-  var getCanvasFont = function getCanvasFont(el) {
-    if (el === void 0) {
-      el = document.body;
-    }
-    var fontWeight = getCssStyle(el, CSS_PROPERTY.FONT_WEIGHT);
-    var fontSize = getCssStyle(el, CSS_PROPERTY.FONT_SIZE);
-    var fontFamily = getCssStyle(el, CSS_PROPERTY.FONT_FAMILY);
-    return fontWeight + " " + fontSize + " " + fontFamily;
-  };
-  var onMouseEnter = function onMouseEnter(e) {
-    if (onShowTimeout.id) {
-      clearTimeout(onShowTimeout.id);
-    }
-    if (e.target == containerRef.current) {
-      onShowTimeout.id = setTimeout(function () {
-        setIsShow(true);
-      }, 750);
-    }
-  };
-  var onMouseLeave = function onMouseLeave(e) {
-    if (onShowTimeout.id) {
-      clearTimeout(onShowTimeout.id);
-    }
-    setTimeout(function () {
-      return setIsShow(false);
-    }, 300);
-  };
-  return React__default.createElement(Tooltip$1, Object.assign({}, props, {
-    text: text,
-    isShow: isEnabled ? isShow : false,
-    isHideOnHover: false
-  }), props.children);
-});
-
 var styles$M = {"vitro-selected-item-multi":"_lookup-picker-selected-item_vitro-selected-item-multi_bzL7ugZ","vitro-selected-item":"_lookup-picker-selected-item_vitro-selected-item_hw-euth","vitro-button-close":"_lookup-picker-selected-item_vitro-button-close_1SRnr_0"};
 
-var styles$N = {"vitro-lookup-picker":"_lookup-picker_vitro-lookup-picker_1aXYQEG","vitro-content":"_lookup-picker_vitro-content_37L0slb","vitro-lookup-picker-multi-select":"_lookup-picker_vitro-lookup-picker-multi-select_3Lkq2tk","vitro-value-container":"_lookup-picker_vitro-value-container_3GeBIaW","vitro-right":"_lookup-picker_vitro-right_1XFsL1w","vitro-read-only":"_lookup-picker_vitro-read-only_32NOdGB","vitro-label":"_lookup-picker_vitro-label_2QoJkUz","vitro-focus":"_lookup-picker_vitro-focus_2UGpxXD","vitro-error":"_lookup-picker_vitro-error_dF7iopC","vitro-error-message":"_lookup-picker_vitro-error-message_2iBjyRP","vitro-copy-button":"_lookup-picker_vitro-copy-button_3UItrZb","vitro-button-close":"_lookup-picker_vitro-button-close_3_Qndrj","vitro-button-collapse-up":"_lookup-picker_vitro-button-collapse-up_3i0OJub","vitro-button-collapse-bottom":"_lookup-picker_vitro-button-collapse-bottom_3o0Pl83","vitro-tooltip":"_lookup-picker_vitro-tooltip_2a12Z4P","vitro-library-button":"_lookup-picker_vitro-library-button_1zwNYAA"};
+var styles$N = {"vitro-lookup-picker":"_lookup-picker_vitro-lookup-picker_1aXYQEG","vitro-content":"_lookup-picker_vitro-content_37L0slb","vitro-read-only":"_lookup-picker_vitro-read-only_32NOdGB","vitro-label":"_lookup-picker_vitro-label_2QoJkUz","vitro-focus":"_lookup-picker_vitro-focus_2UGpxXD","vitro-error":"_lookup-picker_vitro-error_dF7iopC","vitro-error-message":"_lookup-picker_vitro-error-message_2iBjyRP","vitro-copy-button":"_lookup-picker_vitro-copy-button_3UItrZb","vitro-value-container":"_lookup-picker_vitro-value-container_3GeBIaW","vitro-multi-value-container":"_lookup-picker_vitro-multi-value-container_2ScQ_Ua","vitro-lookup-picker-multi-select":"_lookup-picker_vitro-lookup-picker-multi-select_3Lkq2tk","vitro-button-close":"_lookup-picker_vitro-button-close_3_Qndrj","vitro-button-collapse-up":"_lookup-picker_vitro-button-collapse-up_3i0OJub","vitro-button-collapse-bottom":"_lookup-picker_vitro-button-collapse-bottom_3o0Pl83","vitro-tooltip":"_lookup-picker_vitro-tooltip_2a12Z4P","vitro-right":"_lookup-picker_vitro-right_1XFsL1w","vitro-library-button":"_lookup-picker_vitro-library-button_1zwNYAA"};
 
 var htmlValueStyles = {"vitro-item-html-value":"_lookup-picker-html-value_vitro-item-html-value_2QBoTey"};
 
@@ -63193,9 +63271,15 @@ var ValueList = function ValueList(props) {
   }, []);
   React.useEffect(function () {
     if (props.isVisible && props.contentRef) {
-      setStyle({
-        width: props.contentRef.offsetWidth + UNIT.PX
-      });
+      if (props.isFullWidth !== false) {
+        setStyle({
+          width: props.contentRef.offsetWidth + UNIT.PX
+        });
+      } else {
+        setStyle({
+          minWidth: props.contentRef.offsetWidth + UNIT.PX
+        });
+      }
     } else {
       setStyle({
         width: 0
@@ -63226,13 +63310,15 @@ var ValueList = function ValueList(props) {
     isShow: props.isVisible,
     target: props.contentRef,
     placement: props.placement,
+    allowedAutoPlacements: props.allowedAutoPlacements,
     isFlip: props.isFlip,
     className: valueListStyles['vitro-value-list'],
     style: style ? style : {}
   }, React__default.createElement("div", {
     onMouseDown: onMouseDown
   }, React__default.createElement(ScrollBar, {
-    onInit: setScrollableElement
+    onInit: setScrollableElement,
+    isPreventParentScroll: true
   }, props.isPending && React__default.createElement(Progress, null), !props.isPending && React__default.createElement(React__default.Fragment, null, props.list.length > 0 ? props.list.sort(sortValueList).map(function (x) {
     return React__default.createElement(ValueListItem, {
       item: x,
@@ -63244,7 +63330,7 @@ var ValueList = function ValueList(props) {
     className: valueListStyles['vitro-placeholder-empty']
   }, props.emptyPlaceholder))), props.button && React__default.createElement(FlexBox, {
     className: valueListStyles['vitro-flex']
-  }, React__default.createElement(Button$2, Object.assign({}, props.button, {
+  }, React__default.createElement(Button$1, Object.assign({}, props.button, {
     className: valueListStyles['vitro-button']
   })))));
 };
@@ -63300,9 +63386,10 @@ var CopyButton = function CopyButton(props) {
   });
 };
 
-var RightButtonGroup = function RightButtonGroup(props) {
+var RightButtonGroup = React.forwardRef(function (props, ref) {
   return React__default.createElement(FlexBox, {
-    className: styles$N['vitro-right']
+    className: styles$N['vitro-right'],
+    ref: ref
   }, props.isShowButtonClear && React__default.createElement(ImageButton, {
     className: styles$N['vitro-button-close'],
     onClick: function onClick() {
@@ -63322,7 +63409,7 @@ var RightButtonGroup = function RightButtonGroup(props) {
       return props.selectedValueTemplate(x);
     }).join(CTRL.COMMA)
   }) : null);
-};
+});
 
 var LOCALE$6;
 (function (LOCALE) {
@@ -63361,6 +63448,8 @@ var LookupPicker = React.forwardRef(function (props, ref) {
   var contentRef = React.useRef(null);
   var containerRef = React.useRef(null);
   var isShowTooltipRef = React.useRef(true);
+  var scrollBarRef = React.useRef(null);
+  var rightButtonGroupRef = React.useRef(null);
   var updatePending = function updatePending(valueList) {
     return setPending(valueList ? false : true);
   };
@@ -63436,9 +63525,6 @@ var LookupPicker = React.forwardRef(function (props, ref) {
       }
     }
   };
-  React.useEffect(function () {
-    onInputValueUpdated();
-  }, [inputValue]);
   React.useEffect(function () {
     if (props.valueList && selectedValueList) {
       updateFilteredValueList(props.valueList.filter(function (x) {
@@ -63479,12 +63565,16 @@ var LookupPicker = React.forwardRef(function (props, ref) {
   var selectedValueTemplate = function selectedValueTemplate(value) {
     return props.selectedValueTemplate ? props.selectedValueTemplate(value) : value.title;
   };
+  var expandValueList = function expandValueList() {
+    if (props.getAllValueList || props.getValueList) {
+      setValueListVisible(true);
+    }
+  };
   var onChange = function onChange(e) {
-    var _inputRef$current;
     setState(styles$N['vitro-focus']);
-    setValueListVisible(true);
+    expandValueList();
     setInputValue(e.target.value);
-    (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
+    onInputValueUpdated();
   };
   var onKeyDown = function onKeyDown(e) {
     var keyBoardBackSpace = 8;
@@ -63553,8 +63643,8 @@ var LookupPicker = React.forwardRef(function (props, ref) {
   };
   var onOptionValueDelete = function onOptionValueDelete(id) {
     if (!props.isDisabled) {
-      var _inputRef$current2;
-      (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.focus();
+      var _inputRef$current;
+      (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
       var newSelectedValueList = id ? selectedValueList.filter(function (x) {
         return x.id !== id;
       }) : [];
@@ -63566,9 +63656,12 @@ var LookupPicker = React.forwardRef(function (props, ref) {
   };
   var onFocusOut = function onFocusOut(e) {
     var _document$activeEleme;
+    if (scrollBarRef.current) {
+      scrollBarRef.current.scrollTop = 0;
+    }
     var target = e.currentTarget;
     var isValueListItem = Boolean(props.isMultiSelect && ((_document$activeEleme = document.activeElement) === null || _document$activeEleme === void 0 ? void 0 : _document$activeEleme.classList.contains(valueListStyles['vitro-item'])));
-    if (!target.contains(document.activeElement) && !isValueListItem) {
+    if (!target.contains(document.activeElement) && !(e.target.parentElement == rightButtonGroupRef.current) && !isValueListItem) {
       setValueListVisible(false);
       setInputValue(CTRL.EMPTY);
       if (props.onBlur && !props.isDisabled) {
@@ -63580,20 +63673,24 @@ var LookupPicker = React.forwardRef(function (props, ref) {
     }
   };
   var onFocus = function onFocus(e) {
-    var _inputRef$current3;
+    var _inputRef$current2;
+    if (scrollBarRef.current) {
+      scrollBarRef.current.scrollTop = scrollBarRef.current.scrollHeight;
+    }
     onInputValueUpdated();
     isShowTooltipRef.current = false;
     setState(styles$N['vitro-focus']);
-    setValueListVisible(true);
-    (_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 ? void 0 : _inputRef$current3.focus();
+    expandValueList();
+    (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.focus();
     if (props.onFocus) {
       props.onFocus(e);
     }
   };
   var onCollapseButtonClick = function onCollapseButtonClick(valueListVisible) {
-    setValueListVisible(!valueListVisible);
-    if (!valueListVisible) {
-      onInputValueUpdated();
+    if (valueListVisible) {
+      setValueListVisible(false);
+    } else {
+      onFocus(null);
     }
   };
   var getClassName = function getClassName() {
@@ -63634,6 +63731,23 @@ var LookupPicker = React.forwardRef(function (props, ref) {
       });
     }
   };
+  var content = React__default.createElement(React__default.Fragment, null, selectedValueList && selectedValueList.length > 0 && (props.isMultiSelect ? true : inputValue.length === 0) ? React__default.createElement(SelectedValueList, {
+    list: selectedValueList,
+    onOptionValueDelete: onOptionValueDelete,
+    selectedValueTemplate: selectedValueTemplate,
+    isMultiSelect: props.isMultiSelect,
+    isReadOnly: props.isReadOnly,
+    isValueListVisible: valueListVisible,
+    getHtmlValue: getHtmlValue
+  }) : !valueListVisible && props.placeholder && React__default.createElement("div", {
+    className: styles$N['vitro-placeholder']
+  }, props.placeholder), isEditable && React__default.createElement("input", {
+    ref: inputRef,
+    value: inputValue,
+    onKeyDown: onKeyDown,
+    onChange: onChange
+  }), !props.isDisabled && props.children);
+  var isShowButtonClear = props.isShowButtonClear !== false && !props.isMultiSelect && selectedValueList && selectedValueList.length > 0 && isEditable;
   return React__default.createElement("div", {
     className: getClassName(),
     tabIndex: 1,
@@ -63647,36 +63761,27 @@ var LookupPicker = React.forwardRef(function (props, ref) {
   }), React__default.createElement(FlexBox, {
     className: styles$N['vitro-content'],
     ref: contentRef
-  }, React__default.createElement(FlexBox, {
+  }, props.isMultiSelect ? React__default.createElement(ScrollBar, {
+    contentClassName: styles$N['vitro-multi-value-container'],
+    onClick: onFocus,
+    ref: scrollBarRef
+  }, content) : React__default.createElement(FlexBox, {
     className: styles$N['vitro-value-container'],
     onClick: onFocus
-  }, selectedValueList && selectedValueList.length > 0 && (props.isMultiSelect ? true : inputValue.length === 0) ? React__default.createElement(SelectedValueList, {
-    list: selectedValueList,
-    onOptionValueDelete: onOptionValueDelete,
-    selectedValueTemplate: selectedValueTemplate,
-    isMultiSelect: props.isMultiSelect,
-    isReadOnly: props.isReadOnly,
-    isValueListVisible: valueListVisible,
-    getHtmlValue: getHtmlValue
-  }) : !valueListVisible && React__default.createElement(React__default.Fragment, null, props.placeholder), isEditable && React__default.createElement("input", {
-    ref: inputRef,
-    value: inputValue,
-    onKeyDown: onKeyDown,
-    onChange: onChange,
-    onFocus: onFocus
-  }), !props.isDisabled && props.children), React__default.createElement(RightButtonGroup, {
+  }, content), props.isShowSearchButton || props.filterMinLength == 0 || isShowButtonClear || !isEditable ? React__default.createElement(RightButtonGroup, {
     selectedValueList: selectedValueList,
     isReadOnly: props.isReadOnly,
     isEditable: isEditable,
-    isShowButtonClear: props.isShowButtonClear !== false && !props.isMultiSelect && selectedValueList && selectedValueList.length > 0 && isEditable,
+    isShowButtonClear: isShowButtonClear,
     isValueListVisible: valueListVisible,
     isShowExpandButton: props.filterMinLength == 0,
     isShowSearchButton: props.isShowSearchButton,
     onClickSearchButton: onSearch,
     onOptionValueDelete: onOptionValueDelete,
     onCollapseButtonClick: onCollapseButtonClick,
-    selectedValueTemplate: props.selectedValueTemplate
-  })), isEditable && (!props.filterMinLength || props.filterMinLength <= inputValue.length) && React__default.createElement(ValueList, {
+    selectedValueTemplate: props.selectedValueTemplate,
+    ref: rightButtonGroupRef
+  }) : null), isEditable && (!props.filterMinLength || props.filterMinLength <= inputValue.length) && React__default.createElement(ValueList, {
     isPending: pending,
     inputValue: inputValue,
     list: filteredValueList,
@@ -63689,7 +63794,9 @@ var LookupPicker = React.forwardRef(function (props, ref) {
     emptyPlaceholder: props.emptyPlaceholder || localeService.create(LOCALE$6.PLACEHOLDER_EMPTY),
     getHtmlValue: getHtmlValue,
     placement: props.dropdownPlacement,
-    button: props.valueListButton
+    allowedAutoPlacements: props.dropdownAllowedAutoPlacements,
+    button: props.valueListButton,
+    isFullWidth: props.isValueListFullWidth
   }), props.errorMessage && React__default.createElement(ErrorMessage, {
     text: props.errorMessage,
     className: styles$N['vitro-error-message']
@@ -63807,7 +63914,7 @@ var BaseLookupPicker = function BaseLookupPicker(props) {
       var _exit = false;
       var _temp2 = function () {
         if (data.list) {
-          return Promise.resolve(itemSelectDialogService.show(data.list, undefined, isMultiSelect, undefined, {
+          return Promise.resolve(itemSelectDialogService.show(data.list, undefined, isMultiSelect, undefined, false, {
             isShowSelection: isMultiSelect
           })).then(function (itemIdList) {
             if (itemIdList && itemIdList.length) {
@@ -65589,7 +65696,8 @@ var CriterionFilter = function CriterionFilter(props) {
         selectedValueTemplate: function selectedValueTemplate(value) {
           return value.name;
         },
-        valueList: getContentTypeList()
+        valueList: getContentTypeList(),
+        isMultiSelect: true
       }));
     }
   }, {
@@ -65597,7 +65705,8 @@ var CriterionFilter = function CriterionFilter(props) {
     value: function value(props) {
       var _props$id;
       return React__default.createElement(UserLookupPicker$1, Object.assign({}, props, {
-        id: (_props$id = props.id) === null || _props$id === void 0 ? void 0 : _props$id.split(CTRL.DOT)[0]
+        id: (_props$id = props.id) === null || _props$id === void 0 ? void 0 : _props$id.split(CTRL.DOT)[0],
+        isMultiSelect: true
       }));
     }
   }];
@@ -66071,7 +66180,7 @@ var SortFilter = function SortFilter(props) {
     isClearChangedFieldValueMap: true
   }) : CTRL.EMPTY, React__default.createElement("div", {
     className: CSS_CLASS_ADD_FIELD
-  }, React__default.createElement(Button$2, {
+  }, React__default.createElement(Button$1, {
     ref: addFieldButtonRef,
     text: props.labelAddField,
     onClick: onAddSortField,
@@ -66227,7 +66336,7 @@ var SearchDialog = function SearchDialog(props) {
   }, React__default.createElement(ButtonCancel, {
     text: getSearchLabel(ACTION$2.CANCEL),
     onClick: props.onCancel
-  }), React__default.createElement(Button$2, {
+  }), React__default.createElement(Button$1, {
     text: getSearchLabel(ACTION$2.SEARCH),
     onClick: props.onSearch,
     className: STYLE.PRIMARY
@@ -66254,7 +66363,7 @@ var styles$W = {"vitro-search":"_search_vitro-search_QkJksC_","vitro-active":"_s
 
 var CONDITION_CONTAINS = 11;
 var CSS_CLASS_ACTIVE$1 = 'vitro-active';
-var Search = function Search(props) {
+var Search = React.forwardRef(function (props, ref) {
   var _useState = React.useState(false),
     isShowDialog = _useState[0],
     setIsShowDialog = _useState[1];
@@ -66275,12 +66384,20 @@ var Search = function Search(props) {
     setSendedSearchCriterionList = _useState6[1];
   var searchInputRef = React.useRef(null);
   var searchRef = React.useRef(null);
+  var destinationRef = React.useRef(props.destination);
   var eventService = inversifyReact.useInjection(SERVICE.EVENT);
   var localeService = inversifyReact.useInjection(SERVICE.LOCALE);
   var columnService = inversifyReact.useInjection(SERVICE.COLUMN);
   var guidService = inversifyReact.useInjection(SERVICE.GUID);
   var inputPlaceholder = localeService.create(LOCALE$8.SEARCH_INPUT_PLACEHOLDER);
   var defaultSearchFieldName = FIELD$1.NAME;
+  React.useImperativeHandle(ref, function () {
+    return {
+      setDestination: function setDestination(destination) {
+        destinationRef.current = destination;
+      }
+    };
+  });
   React.useEffect(function () {
     if (props.searchCriterionList) {
       setSearchCriterionList(props.searchCriterionList);
@@ -66317,7 +66434,7 @@ var Search = function Search(props) {
       eventService.send(exports.EVENT.SEARCH, {
         searchCriterionList: list,
         source: props.id,
-        destination: props.destination
+        destination: destinationRef.current
       });
     }
   }, [props.parentId]);
@@ -66430,7 +66547,7 @@ var Search = function Search(props) {
     eventService.send(exports.EVENT.SEARCH, {
       searchCriterionList: null,
       source: props.id,
-      destination: props.destination
+      destination: destinationRef.current
     });
   };
   var getInputCriterionList = function getInputCriterionList(value) {
@@ -66483,7 +66600,7 @@ var Search = function Search(props) {
     eventService.send(exports.EVENT.SEARCH, {
       searchCriterionList: list,
       source: props.id,
-      destination: props.destination
+      destination: destinationRef.current
     });
   };
   return React__default.createElement("div", {
@@ -66519,7 +66636,7 @@ var Search = function Search(props) {
     setSearchCriterionList: setSearchCriterionList,
     searchRef: searchRef
   }));
-};
+});
 
 var styles$X = {"vitro-viewer-issue-list":"_viewer-issue-list_vitro-viewer-issue-list_NgsIC86","vitro-search-wrap":"_viewer-issue-list_vitro-search-wrap_1relfMg","vitro-issue-list-wrap":"_viewer-issue-list_vitro-issue-list-wrap_jT8ou5P"};
 
@@ -66645,11 +66762,13 @@ var ViewerIssueList = function ViewerIssueList(props) {
 };
 
 var w$6 = window;
+var LOCALE_DATE_TIME = 'app.common.dateTime';
 var CSS_CLASS_SIDEBAR_CONTENT = 'body__sidebar-content';
 var ID_VIEWER_CONTAINER = 'viewerContainer';
 var ID_FILE_VERSION_SELECT = 'fileVersionSelect';
 var EVENT_PAGE_RENDERED = 'webViewerPageRendered';
 var Viewer = function Viewer(props) {
+  var localeService = inversifyReact.useInjection(SERVICE.LOCALE);
   React.useEffect(function () {
     if (props.context.file) {
       init();
@@ -66660,7 +66779,8 @@ var Viewer = function Viewer(props) {
       if (w$6.initPdfViewer) {
         initSearchCriterionList();
         var context = _extends({}, props.context, {
-          initIssueList: initIssueList
+          initIssueList: initIssueList,
+          getDateText: getDateText
         });
         w$6.initPdfViewer(context);
         initFileVersionSelect();
@@ -66750,11 +66870,16 @@ var Viewer = function Viewer(props) {
     });
     reactDom.render(select, selectContainer);
   };
+  var getDateText = function getDateText(date) {
+    return localeService.create(LOCALE_DATE_TIME, {
+      date: date
+    });
+  };
   return React__default.createElement(React__default.Fragment, null);
 };
 
 var name = "@vitrosoftware/common-ui-ts";
-var version$1 = "1.1.227";
+var version$1 = "1.1.228";
 var description = "vitro software common ui ts";
 var author = "";
 var license = "MIT";
@@ -67056,7 +67181,7 @@ var styles$12 = {"vitro-submit-button":"_login-submit-button_vitro-submit-button
 
 var LoginSubmitButton = function LoginSubmitButton(props) {
   var localeService = inversifyReact.useInjection(SERVICE.LOCALE);
-  return React__default.createElement(Button$2, {
+  return React__default.createElement(Button$1, {
     className: STYLE.PRIMARY + CTRL.SPACE + styles$12['vitro-submit-button'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY),
     text: localeService.create(LOCALE$9.ACTION_LOGIN),
     onClick: props.onClick,
@@ -67223,7 +67348,7 @@ var LoginForm = React.forwardRef(function (props, ref) {
   }, localeService.create(LOCALE$9.LOGIN_FORM_SEPARATOR_TEXT)), React__default.createElement("div", {
     className: styles$14['vitro-button-list']
   }, props.buttonList.map(function (button) {
-    return React__default.createElement(Button$2, Object.assign({}, button, {
+    return React__default.createElement(Button$1, Object.assign({}, button, {
       className: styles$14['vitro-button']
     }));
   }))) : React__default.createElement(React__default.Fragment, null), props.onRegister && React__default.createElement(Link, {
@@ -67418,7 +67543,7 @@ var CommandMenu = React.forwardRef(function (props, ref) {
 var styles$19 = {"vitro-command-menu-button":"_command-menu-button_vitro-command-menu-button_2IiXVbP","vitro-image":"_command-menu-button_vitro-image_27yILgG"};
 
 var CommandMenuButton = function CommandMenuButton(props) {
-  return React__default.createElement("li", null, React__default.createElement(Button$2, Object.assign({}, props, {
+  return React__default.createElement("li", null, React__default.createElement(Button$1, Object.assign({}, props, {
     className: styles$19['vitro-command-menu-button'] + CTRL.SPACE + (props.className ? props.className : STYLE.LIGHT)
   })));
 };
@@ -68161,7 +68286,7 @@ var AlertConstants = {
     get TYPE () { return TYPE$2; }
 };
 
-var styles$1h = {"vitro-alert":"_alert_vitro-alert_3sPAkJb","vitro-position-absolute":"_alert_vitro-position-absolute_2A33Lq4","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$1h = {"vitro-alert":"_alert_vitro-alert_3sPAkJb","vitro-position-absolute":"_alert_vitro-position-absolute_2A33Lq4","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-position-center":"_alert_vitro-position-center_1r_lK_e","vitro-content-container":"_alert_vitro-content-container_M2-akFp"};
 
 var TYPE_DANGER = 'danger';
 var Alert$1 = function Alert(props) {
@@ -68171,12 +68296,6 @@ var Alert$1 = function Alert(props) {
       ref.current.focus();
     }
   }, [props]);
-  var actionOnClick = function actionOnClick(action) {
-    if (action) {
-      action();
-    }
-    props.setMessage(null);
-  };
   var onClose = function onClose() {
     if (props.onClose) {
       props.onClose();
@@ -68193,16 +68312,6 @@ var Alert$1 = function Alert(props) {
       }, 100);
     }
   };
-  var actionList = props.actionList && React__default.createElement("div", {
-    className: styles$1h['vitro-alert-action-list']
-  }, props.actionList.map(function (a) {
-    return React__default.createElement(Button$1, {
-      key: a.text,
-      onClick: function onClick() {
-        return actionOnClick(a.onClick);
-      }
-    }, a.text);
-  }));
   var className = [styles$1h['vitro-alert'], props.isPositionCenter ? styles$1h['vitro-position-center'] : CTRL.EMPTY, props.isPositionAbsolute ? styles$1h['vitro-position-absolute'] : CTRL.EMPTY, props.className || CTRL.EMPTY].join(CTRL.SPACE);
   return React__default.createElement("div", {
     tabIndex: 1,
@@ -68216,12 +68325,15 @@ var Alert$1 = function Alert(props) {
     className: styles$1h['vitro-alert-content']
   }, React__default.createElement("div", {
     className: styles$1h['vitro-icon']
-  }), React__default.createElement("div", {
+  }), React__default.createElement(FlexBox, {
+    className: styles$1h['vitro-content-container'],
+    isColumn: true
+  }, (props.title || props.text) && React__default.createElement("div", {
     className: styles$1h['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", {
+  }, props.title && React__default.createElement("strong", null, props.title), props.text), props.children), props.isDismissible && React__default.createElement("div", {
     className: styles$1h['vitro-button-close'],
     onClick: onClose
-  })), props.text && props.children, props.isMultiline && actionList));
+  }))));
 };
 
 var styles$1i = {"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"};
@@ -82548,7 +82660,8 @@ var File = function File(props) {
     isColumn: true
   }, props.actionList && props.actionList.length ? React__default.createElement(DropdownButton, {
     itemList: props.actionList,
-    className: styles$1k['vitro-dropdown-button']
+    containerClassName: styles$1k['vitro-dropdown-button'],
+    className: STYLE$1.CONTEXT
   }) : null, props.preview && React__default.createElement(Tooltip$1, {
     placement: PLACEMENT.TOP,
     text: props.tooltip || CTRL.EMPTY
@@ -83137,7 +83250,6 @@ var EditableFieldIterator = function EditableFieldIterator(props) {
     changedFieldValueMap: changedFieldValueMap,
     componentMap: componentMap,
     onChange: onChange,
-    isVisibleOverflow: true,
     className: styles$1r['vitro-field-iterator']
   }) : React__default.createElement(ScrollBar, {
     className: styles$1r['vitro-scrollbar']
@@ -83147,7 +83259,6 @@ var EditableFieldIterator = function EditableFieldIterator(props) {
     changedFieldValueMap: changedFieldValueMap,
     componentMap: componentMap,
     onChange: onChange,
-    isVisibleOverflow: true,
     className: styles$1r['vitro-field-iterator']
   })));
 };
@@ -84549,7 +84660,7 @@ var DxfViewer = function DxfViewer(props) {
   });
 };
 
-var styles$1O = {"vitro-select":"_select_vitro-select_EObExkL","vitro-active":"_select_vitro-active_3I2oZ9Y","vitro-label":"_select_vitro-label_1sD79dR","vitro-list-container":"_select_vitro-list-container_1iaPtG5","vitro-item":"_select_vitro-item_3Q88bWt"};
+var styles$1O = {"vitro-select":"_select_vitro-select_EObExkL","vitro-active":"_select_vitro-active_3I2oZ9Y","vitro-label":"_select_vitro-label_1sD79dR","vitro-list-container":"_select_vitro-list-container_1iaPtG5","vitro-expanded":"_select_vitro-expanded_1_6Vcpy","vitro-item":"_select_vitro-item_3Q88bWt","vitro-scrollbar":"_select_vitro-scrollbar_1T9-kjS"};
 
 var Select = function Select(props) {
   var _useState = React.useState(null),
@@ -84613,13 +84724,15 @@ var Select = function Select(props) {
     text: props.label,
     className: styles$1O['vitro-label']
   }), React__default.createElement(itemTemplate, value), React__default.createElement("div", {
-    className: styles$1O['vitro-list-container'],
+    className: styles$1O['vitro-list-container'] + (isExpanded ? CTRL.SPACE + styles$1O['vitro-expanded'] : CTRL.EMPTY),
     ref: listRef
+  }, React__default.createElement(ScrollBar, {
+    className: styles$1O['vitro-scrollbar']
   }, React__default.createElement(List$1, {
     itemList: props.itemList,
     onClick: onClick,
     itemTemplate: itemTemplate
-  })));
+  }))));
 };
 
 var styles$1P = {"vitro-switch":"_switch_vitro-switch_1noCcra","vitro-slider":"_switch_vitro-slider_3wesxda","vitro-active":"_switch_vitro-active_3LJI9TW"};
@@ -84773,6 +84886,7 @@ var EditableList = function EditableList(props) {
     return new Map();
   }, []);
   React.useEffect(function () {
+    setActiveDropdownItemId(undefined);
     setEditedItem(props.editedItemId || CTRL.EMPTY);
     if (props.editedItemId) {
       var _editedItem = props.itemList.find(function (val) {
@@ -85530,7 +85644,7 @@ var TelerikMediaPlayerServiceImpl = /*#__PURE__*/function () {
       media: {
         title: settings.media.title ? settings.media.title : CTRL.EMPTY,
         source: settings.media.url,
-        poster: settings.media.title ? settings.media.title : false
+        poster: settings.media.poster ? settings.media.poster : false
       },
       autoPlay: settings.isAutoPlay === false ? settings.isAutoPlay : true,
       autoRepeat: settings.isAutoRepeat ? settings.isAutoRepeat : false,
@@ -85825,7 +85939,7 @@ var SlideUpButton = function SlideUpButton(props) {
       props.onClick(e);
     }
   };
-  return React__default.createElement(React__default.Fragment, null, React__default.createElement(Button$2, {
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement(Button$1, {
     onClick: onClick,
     text: CTRL.EMPTY,
     imageUrl: props.imageUrl,
@@ -85863,7 +85977,7 @@ exports.BUTTON = ButtonConstants;
 exports.BimViewer = BimViewer;
 exports.BottomAlignControlGroup = BottomAlignControlGroup;
 exports.Breadcrumbs = Breadcrumbs;
-exports.Button = Button$2;
+exports.Button = Button$1;
 exports.ButtonCancel = ButtonCancel;
 exports.ButtonGroup = ButtonGroup;
 exports.CONTROL = CONTROL;