@vitrosoftware/common-ui-ts 1.1.13 → 1.1.15

package/dist/index.js

@@ -58719,13 +58719,13 @@ var ActionHandler = function ActionHandler(props) {
   }, []);
   var data = React.useMemo(function () {
     return {
-      itemList: props.itemList || [props.item]
+      itemList: props.itemList || [props.item],
+      itemCount: props.itemList ? props.itemList.length : [props.item].length
     };
   }, []);
   var progressBarRef = React.useRef(null);
   var localeService = inversifyReact.useInjection(SERVICE.LOCALE);
   var action = props.actionText || localeService.create(LOCALE$1.ACTION + CTRL.DOT + props.actionCode);
-  var itemCount = data.itemList.length;
   React.useEffect(function () {
     setIsCloseByOutsideClick(currentAction !== actionMap$1.progress);
     if (currentAction === actionMap$1.before) {
@@ -58765,17 +58765,17 @@ var ActionHandler = function ActionHandler(props) {
     if (props.isConfirm) {
       var confText;
       if (props.confirmText && props.confirmText()) {
-        confText = props.confirmText(itemCount);
+        confText = props.confirmText(data.itemCount);
       } else {
-        if (itemCount === 1) {
+        if (data.itemCount === 1) {
           confText = localeService.create(LOCALE$1.CONF_SINGLE, {
             actionCode: action,
-            itemCount: itemCount
+            itemCount: data.itemCount
           });
         } else {
           confText = localeService.create(LOCALE$1.CONF_MULTI, {
             actionCode: action,
-            itemCount: itemCount
+            itemCount: data.itemCount
           });
         }
       }
@@ -58804,13 +58804,13 @@ var ActionHandler = function ActionHandler(props) {
     setActionResult(success, successResult, failResult);
     if (success) {
       if (props.successText && props.successText()) {
-        setText(props.successText(itemCount));
+        setText(props.successText(data.itemCount));
       }
     } else {
       if (error && error.text) {
         setText(error.text);
       } else if (props.errorText) {
-        setText(props.errorText(error, itemCount));
+        setText(props.errorText(error, data.itemCount));
       }
     }
   };
@@ -58821,28 +58821,28 @@ var ActionHandler = function ActionHandler(props) {
       var key = [LOCALE$1.ACTION_MSG, props.actionCode, LOCALE$1.SUCCESS].join(CTRL.DOT);
       setText(localeService.create(key, {
         actionCode: action,
-        count: itemCount
+        count: successResult.length
       }));
     } else if (successResult.length && failResult.length) {
       setIcon(styles$6['vitro-icon-warning']);
       setState(styles$6['vitro-warning']);
-      var _key = itemCount === 1 ? LOCALE$1.WARNING_SINGLE : LOCALE$1.WARNING_MULTI;
+      var _key = data.itemCount === 1 ? LOCALE$1.WARNING_SINGLE : LOCALE$1.WARNING_MULTI;
       setText(localeService.create(_key, {
         actionCode: action,
-        itemCount: itemCount
+        itemCount: data.itemCount
       }));
     } else {
       setIcon(styles$6['vitro-icon-error']);
       setState(styles$6['vitro-error']);
-      var _key2 = itemCount === 1 ? LOCALE$1.ERROR_SINGLE : LOCALE$1.ERROR_MULTI;
+      var _key2 = data.itemCount === 1 ? LOCALE$1.ERROR_SINGLE : LOCALE$1.ERROR_MULTI;
       setText(localeService.create(_key2, {
         actionCode: action,
-        itemCount: itemCount
+        itemCount: data.itemCount
       }));
     }
   };
   var setProgress = function setProgress(index) {
-    var percent = index * 100 / itemCount;
+    var percent = index * 100 / data.itemCount;
     if (progressBarRef.current) {
       progressBarRef.current.style.width = percent + CTRL.PERCENT;
     }
@@ -58851,9 +58851,9 @@ var ActionHandler = function ActionHandler(props) {
     try {
       init();
       if (props.progressText) {
-        setText(props.progressText(itemCount));
+        setText(props.progressText(data.itemCount));
       } else {
-        if (itemCount === 1) {
+        if (data.itemCount === 1) {
           setText(localeService.create(LOCALE$1.PROGRESS_SINGLE, {
             actionCode: action
           }));
@@ -58861,7 +58861,7 @@ var ActionHandler = function ActionHandler(props) {
           setText(localeService.create(LOCALE$1.PROGRESS_MULTI, {
             idx: 1,
             actionCode: action,
-            itemCount: itemCount
+            itemCount: data.itemCount
           }));
         }
       }
@@ -58913,13 +58913,14 @@ var ActionHandler = function ActionHandler(props) {
       }, function () {
         if (cancellationToken.cancel) {
           data.itemList = data.itemList.slice(0, _i + 1);
+          data.itemCount = data.itemList.length;
           _interrupt = true;
           return;
         }
-        if (itemCount > 1) {
+        if (data.itemCount > 1) {
           setText(localeService.create(LOCALE$1.PROGRESS_MULTI, {
             idx: _i + 1,
-            itemCount: itemCount,
+            itemCount: data.itemCount,
             actionCode: action
           }));
         } else {
@@ -59004,7 +59005,7 @@ var ActionHandler = function ActionHandler(props) {
   }))), showItemCount && React__default.createElement("span", {
     className: styles$6['vitro-small']
   }, localeService.create(LOCALE$1.ITEM_COUNT, {
-    itemCount: itemCount
+    itemCount: data.itemCount
   })), showInfo && React__default.createElement(ActionInfo, {
     itemList: data.itemList,
     successResult: successResult,
@@ -59969,6 +59970,8 @@ var TimePicker = function TimePicker(props) {
 
 var styles$h = {"vitro-selected-item":"_lookup-picker-selected-item_vitro-selected-item_hw-euth"};
 
+var htmlValueStyles = {"vitro-item-html-value":"_lookup-picker-html-value_vitro-item-html-value_2QBoTey"};
+
 var SelectedValueList = function SelectedValueList(props) {
   return React__default.createElement(React__default.Fragment, null, props.list.map(function (x) {
     var title = props.selectedValueTemplate(x);
@@ -59976,7 +59979,9 @@ var SelectedValueList = function SelectedValueList(props) {
       key: x.id,
       className: styles$h['vitro-selected-item'],
       title: title
-    }, React__default.createElement("span", null, title), props.isMultiSelect && React__default.createElement("div", {
+    }, props.getHtmlValue ? React__default.createElement("div", {
+      className: htmlValueStyles['vitro-item-html-value']
+    }, props.getHtmlValue(x)) : null, React__default.createElement("span", null, title), props.isMultiSelect && React__default.createElement("div", {
       onClick: function onClick() {
         return props.onOptionValueDelete(x.id);
       },
@@ -59985,7 +59990,23 @@ var SelectedValueList = function SelectedValueList(props) {
   }));
 };
 
-var styles$i = {"vitro-value-list":"_lookup-picker-value-list_vitro-value-list_LSdCMjq","vitro-item":"_lookup-picker-value-list_vitro-item_7yZBz5u","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 styles$i = {"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) {
+  return React__default.createElement("div", {
+    key: props.item.id,
+    className: styles$i['vitro-item'],
+    onClick: function onClick() {
+      return props.onSelect(props.item.id);
+    }
+  }, props.htmlValue ? React__default.createElement("div", {
+    className: htmlValueStyles['vitro-item-html-value']
+  }, props.htmlValue) : null, React__default.createElement("div", {
+    dangerouslySetInnerHTML: {
+      __html: props.createDisplayValue(props.item)
+    }
+  }));
+};
 
 var FLAG = 'gi';
 var ValueList = function ValueList(props) {
@@ -60008,15 +60029,11 @@ var ValueList = function ValueList(props) {
   }, React__default.createElement(commonUi.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) {
-    return React__default.createElement("div", {
-      key: x.id,
-      className: styles$i['vitro-item'],
-      onClick: function onClick() {
-        return props.onOptionValueSelect(x.id);
-      },
-      dangerouslySetInnerHTML: {
-        __html: createDisplayValue(x)
-      }
+    return React__default.createElement(ValueListItem, {
+      item: x,
+      onSelect: props.onOptionValueSelect,
+      createDisplayValue: createDisplayValue,
+      htmlValue: props.getHtmlValue && props.getHtmlValue(x)
     });
   }) : React__default.createElement("div", {
     className: styles$i['vitro-placeholder-empty']
@@ -60074,6 +60091,23 @@ var LookupPicker = function LookupPicker(props) {
   }, [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;
+        }
+        setValueListRequestToken(requestToken);
+        props.getAllValueList().then(function (valueList) {
+          return onGetValueList(valueList, requestToken);
+        });
+      }
+    }
   }, [valueListVisible]);
   React.useEffect(function () {
     if (props.selectedValue) {
@@ -60213,6 +60247,12 @@ var LookupPicker = function LookupPicker(props) {
     classList.push(state);
     return classList.join(CTRL.SPACE);
   };
+  var getHtmlValue = function getHtmlValue(item) {
+    if (props.htmlValueTemplate && props.getHtmlValueTemplateProps) {
+      return React__default.createElement(props.htmlValueTemplate, props.getHtmlValueTemplateProps(item));
+    }
+    return null;
+  };
   return React__default.createElement("div", {
     className: getClassName(),
     tabIndex: 1,
@@ -60229,7 +60269,8 @@ var LookupPicker = function LookupPicker(props) {
     list: selectedValueList,
     onOptionValueDelete: onOptionValueDelete,
     selectedValueTemplate: selectedValueTemplate,
-    isMultiSelect: props.isMultiSelect
+    isMultiSelect: props.isMultiSelect,
+    getHtmlValue: getHtmlValue
   }) : !valueListVisible && React__default.createElement(React__default.Fragment, null, props.placeholder), !props.isDisabled && !props.isReadOnly && React__default.createElement("input", {
     ref: inputRef,
     value: inputValue,
@@ -60238,14 +60279,14 @@ var LookupPicker = function LookupPicker(props) {
     onClick: onFocus,
     disabled: props.isDisabled,
     readOnly: props.isReadOnly
-  }), !props.isDisabled && !props.isReadOnly && props.children, React__default.createElement("div", {
+  }), !props.isDisabled && props.children, React__default.createElement("div", {
     className: styles$j['vitro-right']
   }, !props.isMultiSelect && selectedValueList && selectedValueList.length > 0 && !props.isDisabled && !props.isReadOnly && React__default.createElement("div", {
     className: styles$j['vitro-button-close'],
     onClick: function onClick() {
       return onOptionValueDelete();
     }
-  }), !props.isDisabled && !props.isReadOnly && React__default.createElement("div", {
+  }), !props.isDisabled && React__default.createElement("div", {
     onClick: function onClick() {
       return setValueListVisible(!valueListVisible);
     },
@@ -60253,14 +60294,15 @@ var LookupPicker = function LookupPicker(props) {
   }), props.isReadOnly ? React__default.createElement("span", {
     className: styles$j['vitro-button-copy'],
     onClick: copyValue
-  }) : null)), !props.isDisabled && !props.isReadOnly && (!props.filterMinLength || props.filterMinLength <= inputValue.length) && React__default.createElement(ValueList, {
+  }) : null)), !props.isDisabled && (!props.filterMinLength || props.filterMinLength <= inputValue.length) && React__default.createElement(ValueList, {
     isPending: pending,
     inputValue: inputValue,
     list: filteredValueList,
     filterValueTemplate: filterValueTemplate,
     onOptionValueSelect: onOptionValueSelect,
     isVisible: valueListVisible,
-    emptyPlaceholder: props.emptyPlaceholder || localeService.create(LOCALE$3.PLACEHOLDER_EMPTY)
+    emptyPlaceholder: props.emptyPlaceholder || localeService.create(LOCALE$3.PLACEHOLDER_EMPTY),
+    getHtmlValue: getHtmlValue
   }), props.errorMessage && React__default.createElement("span", {
     className: styles$j['vitro-error-text']
   }, props.errorMessage));
@@ -62169,7 +62211,7 @@ var CommandMenuDropdownButton = function CommandMenuDropdownButton(props) {
   }), props.children));
 };
 
-var styles$o = {"vitro-active":"_sidebar-item_vitro-active_7p5iOhY","vitro-icon-text":"_sidebar-item_vitro-icon-text_3ROhyLK","vitro-item-text":"_sidebar-item_vitro-item-text_1kK_aIZ","vitro-icon":"_sidebar-item_vitro-icon_2B88tow"};
+var styles$o = {"vitro-active":"_sidebar-item_vitro-active_7p5iOhY","vitro-icon-text":"_sidebar-item_vitro-icon-text_3ROhyLK","vitro-item-text":"_sidebar-item_vitro-item-text_1kK_aIZ","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(commonUi.Icon, {
@@ -62191,6 +62233,8 @@ var TARGET;
 })(TARGET || (TARGET = {}));
 
 var w$6 = window;
+var PX_UNIT$3 = 'px';
+var WIDTH_AUTO = 'auto';
 var LinkItem$1 = function LinkItem(props) {
   var _useState = React.useState(false),
     isHover = _useState[0],
@@ -62202,7 +62246,11 @@ var LinkItem$1 = function LinkItem(props) {
     },
     onMouseLeave: function onMouseLeave() {
       return setIsHover(false);
-    }
+    },
+    style: {
+      width: props.linkItemWidth ? props.linkItemWidth + PX_UNIT$3 : WIDTH_AUTO
+    },
+    className: styles$o['vitro-item']
   }, props.link && React__default.createElement(Link, {
     to: props.link,
     className: isActive ? styles$o['vitro-active'] : CTRL.EMPTY
@@ -62214,18 +62262,19 @@ var LinkItem$1 = function LinkItem(props) {
     },
     className: isActive ? styles$o['vitro-active'] : CTRL.EMPTY
   }, React__default.createElement(Item$1, Object.assign({}, props, {
-    isHover: isActive || isHover
+    isHover: isActive
   }))), props.href && React__default.createElement("a", {
     href: props.href,
     target: props.isExternal ? TARGET.BLANK : TARGET.SELF
   }, React__default.createElement(Item$1, Object.assign({}, props, {
-    isHover: isActive || isHover
+    isHover: isActive
   }))));
 };
 
 var Section = function Section(props) {
   return React__default.createElement("li", null, props.text && React__default.createElement("span", null, props.text), React__default.createElement("ul", null, props.itemList && props.itemList.map(function (i) {
     return React__default.createElement(LinkItem$1, Object.assign({
+      linkItemWidth: props.linkItemWidth,
       activeItem: props.activeItem,
       key: i.text,
       currentUrl: props.currentUrl
@@ -62233,19 +62282,22 @@ var Section = function Section(props) {
   })));
 };
 
-var SectionList = function SectionList(props) {
+var SectionList = React.forwardRef(function (props, ref) {
   if (!props.itemList || props.itemList.length === 0) {
     return null;
   }
-  return React__default.createElement("ul", null, props.itemList.map(function (section) {
+  return React__default.createElement("ul", {
+    ref: ref
+  }, props.itemList.map(function (section) {
     return React__default.createElement(Section, Object.assign({
+      linkItemWidth: props.linkItemWidth,
       currentUrl: props.currentUrl,
       activeItem: props.activeItem
     }, section));
   }));
-};
+});
 
-var styles$p = {"vitro-sidebar":"_sidebar_vitro-sidebar_1IxGYiU"};
+var styles$p = {"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(props.history.location.pathname),
@@ -62254,21 +62306,75 @@ var Sidebar = function Sidebar(props) {
   var _useState2 = React.useState([]),
     itemList = _useState2[0],
     setItemList = _useState2[1];
+  var _useState3 = React.useState(false),
+    isMobileView = _useState3[0],
+    setIsMobileView = _useState3[1];
+  var _useState4 = React.useState(0),
+    translate = _useState4[0],
+    setTranslate = _useState4[1];
+  var _useState5 = React.useState(0),
+    linkItemWidth = _useState5[0],
+    setLinkItemWidth = _useState5[1];
+  var menuRef = React.useRef(null);
+  var scrollableListRef = React.useRef(null);
   props.history.listen(function (location) {
     setCurrentUrl(location.pathname);
   });
   React.useEffect(function () {
     if (props.sidebar === 1 && props.overflowItemList && props.overflowItemList.length > 0) {
       setItemList([].concat(props.topItemList, props.overflowItemList));
+    } else if (isMobileView) {
+      var list = props.bottomItemList ? [].concat(props.topItemList, props.bottomItemList) : props.topItemList;
+      setItemList(list);
     } else {
       setItemList(props.topItemList);
     }
-  }, [props.sidebar]);
-  var className = styles$p['vitro-sidebar'] + (props.theme ? CTRL.SPACE + props.theme : CTRL.EMPTY);
+  }, [props.sidebar, isMobileView]);
+  React.useEffect(function () {
+    window.addEventListener(EVENT.RESIZE, handleResize);
+    handleResize();
+    return function () {
+      window.removeEventListener(EVENT.RESIZE, handleResize);
+    };
+  }, []);
+  React.useEffect(function () {
+    handleResize();
+  }, [window.innerWidth]);
+  var handleResize = function handleResize() {
+    window.innerWidth < 800 ? setIsMobileView(true) : setIsMobileView(false);
+    if (window.innerWidth < 800 && menuRef.current) {
+      var info = menuRef.current.getBoundingClientRect();
+      var width = info.right - info.left;
+      updateLinkItemWidth(width);
+    }
+  };
+  var scroll = function scroll() {
+    var container = menuRef.current;
+    var scrollableList = scrollableListRef.current;
+    if (container && scrollableList) {
+      var info = container.getBoundingClientRect();
+      var width = info.right - info.left;
+      var translateValue = translate;
+      if (container.scrollLeft + width >= container.scrollWidth) {
+        translateValue = 0;
+      } else {
+        translateValue += width;
+      }
+      setTranslate(translateValue);
+      scrollableList.style.transform = "translate(-" + translateValue + "px)";
+    }
+  };
+  var updateLinkItemWidth = function updateLinkItemWidth(containerWidth) {
+    var elemWidth = 76;
+    var count = Math.floor(containerWidth / elemWidth);
+    var width = containerWidth / count;
+    setLinkItemWidth(width);
+  };
+  var className = styles$p['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'
-  }, React__default.createElement(SectionList, {
+  }, !isMobileView ? React__default.createElement(React__default.Fragment, null, React__default.createElement(SectionList, {
     itemList: itemList,
     currentUrl: currentUrl,
     activeItem: props.activeItem
@@ -62276,7 +62382,19 @@ var Sidebar = function Sidebar(props) {
     itemList: props.bottomItemList,
     currentUrl: currentUrl,
     activeItem: props.activeItem
-  }));
+  })) : React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
+    className: styles$p['vitro-scroll-container'],
+    ref: menuRef
+  }, React__default.createElement(SectionList, {
+    itemList: itemList,
+    currentUrl: currentUrl,
+    activeItem: props.activeItem,
+    ref: scrollableListRef,
+    linkItemWidth: linkItemWidth
+  })), React__default.createElement("button", {
+    onClick: scroll,
+    className: styles$p['vitro-button-more']
+  })));
 };
 
 var styles$q = {"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"};
@@ -62491,10 +62609,141 @@ var DialogFooter = function DialogFooter(props) {
   }));
 };
 
+var styles$w = {"vitro-avatar":"_avatar_vitro-avatar_P2tU-_r","vitro-avatar-big":"_avatar_vitro-avatar-big_pEmlX3a"};
+
+var Avatar = function Avatar(props) {
+  var getInitials = function getInitials() {
+    var initials = CTRL.EMPTY;
+    if (props.userName) {
+      props.userName.split(CTRL.SPACE).forEach(function (name, i) {
+        initials += i < 2 ? name[0] ? name[0] : CTRL.EMPTY : CTRL.EMPTY;
+      });
+    }
+    return initials;
+  };
+  var getBackground = function getBackground() {
+    if (props.image) {
+      return props.image;
+    } else if (props.userName) {
+      return getBgColor(props.userName);
+    }
+    return CTRL.EMPTY;
+  };
+  var getHashOfString = function getHashOfString(str) {
+    var hash = 0;
+    for (var i = 0; i < str.length; i++) {
+      hash = str.charCodeAt(i) + ((hash << 5) - hash);
+    }
+    hash = Math.abs(hash);
+    return hash;
+  };
+  var normalizeHash = function normalizeHash(hash, min, max) {
+    return Math.floor(hash % (max - min) + min);
+  };
+  var getHue = function getHue(name) {
+    var min = 1000;
+    var max = 360;
+    var hash = getHashOfString(name);
+    var normalizedHash = normalizeHash(hash, min, max);
+    return normalizedHash;
+  };
+  var getBgColor = function getBgColor(name) {
+    return "linear-gradient(0deg, hsla(" + getHue(name) + ", 58%, 55%, 1), hsla(" + (getHue(name) + 50) + ", 100%, 78%, 1))";
+  };
+  var className = styles$w['vitro-avatar'] + (props.isBigSize ? CTRL.SPACE + styles$w['vitro-avatar-big'] : CTRL.EMPTY);
+  return React__default.createElement("div", {
+    className: className,
+    style: {
+      background: getBackground()
+    }
+  }, getInitials());
+};
+
+var styles$x = {"vitro-user-profile":"_user-profile_vitro-user-profile_11XpBoQ","vitro-dropdown-item":"_user-profile_vitro-dropdown-item_dSErsta"};
+
+var UserProfileMenuItem = function UserProfileMenuItem(props) {
+  var onClick = function onClick() {
+    if (props.onClick) {
+      props.onClick();
+    }
+    props.setDropdownState(false);
+  };
+  if (props.link) {
+    return React__default.createElement("div", {
+      className: styles$x['vitro-dropdown-item'],
+      onClick: onClick
+    }, React__default.createElement(Link, {
+      to: props.link
+    }, props.imageUrl && React__default.createElement(commonUi.Icon, {
+      defaultUrl: props.imageUrl,
+      hoverUrl: props.hoverImageUrl
+    }), props.text));
+  }
+  if (props.onClick) {
+    return React__default.createElement("div", {
+      className: styles$x['vitro-dropdown-item'],
+      key: props.text,
+      onClick: onClick
+    }, props.imageUrl && React__default.createElement(commonUi.Icon, {
+      defaultUrl: props.imageUrl,
+      hoverUrl: props.hoverImageUrl
+    }), props.text);
+  }
+  return null;
+};
+
+var UserProfile = function UserProfile(props) {
+  var _useState = React.useState(false),
+    dropdownOpen = _useState[0],
+    setDropdownOpen = _useState[1];
+  var toggle = function toggle() {
+    return setDropdownOpen(function (prevState) {
+      return !prevState;
+    });
+  };
+  var createSurnameWithInitials = function createSurnameWithInitials(name) {
+    var username = CTRL.EMPTY;
+    if (name) {
+      name.split(CTRL.SPACE).forEach(function (name, i) {
+        if (i < 3) {
+          username += i === 0 ? name + CTRL.SPACE : (name[0] ? name[0] : CTRL.EMPTY) + CTRL.DOT;
+        }
+      });
+    }
+    return username;
+  };
+  return React__default.createElement(Dropdown, {
+    isOpen: dropdownOpen,
+    toggle: toggle,
+    className: styles$x['vitro-user-profile']
+  }, React__default.createElement(DropdownToggle, {
+    caret: true
+  }, React__default.createElement("div", null, React__default.createElement("span", {
+    className: styles$x['vitro-text-color-white']
+  }, createSurnameWithInitials(props.userName)), React__default.createElement(Avatar, {
+    userName: props.userName,
+    isBigSize: true
+  }))), React__default.createElement(DropdownMenu, {
+    right: true
+  }, props.dropdownMenuItemList && props.dropdownMenuItemList.length > 0 && props.dropdownMenuItemList.map(function (item) {
+    return React__default.createElement(UserProfileMenuItem, Object.assign({
+      setDropdownState: setDropdownOpen
+    }, item));
+  })));
+};
+
+var UserLookupPicker = function UserLookupPicker(props) {
+  return React__default.createElement(LookupPicker, Object.assign({}, props, {
+    htmlValueTemplate: Avatar,
+    getHtmlValueTemplateProps: props.getHtmlValueTemplateProps
+  }));
+};
+
 exports.ACTION_HANDLER = ActionHandlerConstants;
 exports.ALERT = AlertConstants;
 exports.ActionHandler = ActionHandler;
 exports.Alert = Alert$1;
+exports.Avatar = Avatar;
 exports.Breadcrumbs = Breadcrumbs;
 exports.Button = Button$2;
 exports.CommandMenu = CommandMenu;
@@ -62526,6 +62775,8 @@ exports.TelerikUploaderContextImpl = TelerikUploaderContextImpl;
 exports.TimePicker = TimePicker;
 exports.TopLevelMenu = TopLevelMenu;
 exports.TreeView = TreeView;
+exports.UserLookupPicker = UserLookupPicker;
+exports.UserProfile = UserProfile;
 exports.View = View;
 exports.commonEn = commonEn;
 exports.commonRu = commonRu;