@vitrosoftware/common-ui-ts 1.1.88 → 1.1.89

package/dist/index.js

@@ -61472,6 +61472,9 @@ var TooltipConstants = {
 var styles$n = {"vitro-tooltip":"_tooltip_vitro-tooltip_JvGPShz"};
 
 var Tooltip$1 = function Tooltip(props) {
+  if (!props.text) {
+    return props.children;
+  }
   return React__default.createElement(OverlayTrigger, {
     placement: props.placement || PLACEMENT$1.TOP,
     delay: {
@@ -61669,7 +61672,7 @@ var Viewer = function Viewer(props) {
 };
 
 var name = "@vitrosoftware/common-ui-ts";
-var version$1 = "1.1.88";
+var version$1 = "1.1.89";
 var description = "vitro software common ui ts";
 var author = "";
 var license = "MIT";
@@ -63087,17 +63090,39 @@ var CommandMenuDropdownButton = function CommandMenuDropdownButton(props) {
   }), props.children));
 };
 
-var styles$z = {"vitro-item":"_sidebar-item_vitro-item_1BR_7F0","vitro-image":"_sidebar-item_vitro-image_2A82YI0","vitro-active":"_sidebar-item_vitro-active_7p5iOhY","vitro-item-text":"_sidebar-item_vitro-item-text_1kK_aIZ","vitro-hover":"_sidebar-item_vitro-hover_1mECzme","vitro-group-item":"_sidebar-item_vitro-group-item_ZADCctV","vitro-item-list":"_sidebar-item_vitro-item-list_17dWov1","vitro-expanded":"_sidebar-item_vitro-expanded_3qb1vOx","vitro-collapsed":"_sidebar-item_vitro-collapsed_2EhVmXL","vitro-display-none":"_sidebar-item_vitro-display-none_2WwKi5v","vitro-popup-container":"_sidebar-item_vitro-popup-container_2X7SVxe","vitro-scrollbar":"_sidebar-item_vitro-scrollbar___xylIx","vitro-popup-item-list":"_sidebar-item_vitro-popup-item-list_JUwcoZB","vitro-button-close":"_sidebar-item_vitro-button-close_2Kdf-ob"};
+var styles$z = {"vitro-item":"_sidebar-item_vitro-item_1BR_7F0","vitro-image":"_sidebar-item_vitro-image_2A82YI0","vitro-item-text":"_sidebar-item_vitro-item-text_1kK_aIZ","vitro-active":"_sidebar-item_vitro-active_7p5iOhY","vitro-hover":"_sidebar-item_vitro-hover_1mECzme","vitro-group-item":"_sidebar-item_vitro-group-item_ZADCctV","vitro-item-list":"_sidebar-item_vitro-item-list_17dWov1","vitro-expanded":"_sidebar-item_vitro-expanded_3qb1vOx","vitro-collapsed":"_sidebar-item_vitro-collapsed_2EhVmXL","vitro-display-none":"_sidebar-item_vitro-display-none_2WwKi5v","vitro-popup-container":"_sidebar-item_vitro-popup-container_2X7SVxe","vitro-scrollbar":"_sidebar-item_vitro-scrollbar___xylIx","vitro-popup-item-list":"_sidebar-item_vitro-popup-item-list_JUwcoZB","vitro-button-close":"_sidebar-item_vitro-button-close_2Kdf-ob"};
 
 var Item$2 = function Item(props) {
-  return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", null, props.imageUrl && React__default.createElement(Image, {
+  var _useState = React.useState(false),
+    isShowTooltip = _useState[0],
+    setIsShowTooltip = _useState[1];
+  var textRef = React.useRef(null);
+  React.useEffect(function () {
+    var isOverflow = textRef.current && textRef.current.offsetWidth < textRef.current.scrollWidth;
+    if (!props.isMobileView && (!props.isSidebarExpanded || isOverflow)) {
+      setIsShowTooltip(true);
+    } else {
+      setIsShowTooltip(false);
+    }
+  }, [props.isSidebarExpanded]);
+  return React__default.createElement(Tooltip$1, {
+    text: props.text || CTRL.EMPTY,
+    placement: PLACEMENT$1.RIGHT,
+    isShow: isShowTooltip ? undefined : false
+  }, React__default.createElement("div", {
+    className: props.className,
+    style: props.width ? {
+      minWidth: props.width + UNIT.PX
+    } : {}
+  }, React__default.createElement("div", null, props.imageUrl && React__default.createElement(Image, {
     defaultUrl: props.imageUrl,
     hoverUrl: props.imageHoverUrl,
     isHover: props.isHover,
     className: styles$z['vitro-image']
   })), React__default.createElement("span", {
+    ref: textRef,
     className: styles$z['vitro-item-text'] + (!(props.isSidebarExpanded || props.isMobileView) ? CTRL.SPACE + styles$z['vitro-display-none'] : CTRL.EMPTY)
-  }, props.text));
+  }, props.text)));
 };
 
 var MODE;
@@ -63117,7 +63142,7 @@ var LinkItem$1 = function LinkItem(props) {
   var _useState = React.useState(false),
     isHover = _useState[0],
     setIsHover = _useState[1];
-  var isActive = !!props.link && (props.link === props.currentUrl || props.activeItem === props.id || props.altUrlList && props.altUrlList.includes(props.currentUrl));
+  var isActive = !!props.link && (props.link === props.currentUrl && (!props.activeItem || props.activeItem === props.id) || props.altUrlList && props.altUrlList.includes(props.currentUrl));
   var className = isActive ? styles$z['vitro-active'] : isHover ? styles$z['vitro-hover'] : CTRL.EMPTY;
   var onClick = function onClick(e) {
     if (props.onClick) {
@@ -63199,13 +63224,21 @@ var GroupItem = function GroupItem(props) {
   React.useEffect(function () {
     updateState();
   }, [props.isSidebarExpanded, props.activeItem, props.currentUrl, isExpanded]);
+  React.useEffect(function () {
+    if (props.isMobileView && props.activeItem !== props.id) {
+      setIsExpanded(false);
+      setIsActive(false);
+    }
+  }, [props.activeItem]);
   React.useEffect(function () {
     if (props.isMobileView) {
       setIsExpanded(false);
     }
   }, [props.currentUrl]);
-  var className = isActive ? styles$z['vitro-active'] : isHover ? styles$z['vitro-hover'] : CTRL.EMPTY;
   var onClick = function onClick(e) {
+    if (props.isMobileView && !getIsActiveChildItem()) {
+      props.setActiveItem(!isExpanded ? props.id : CTRL.EMPTY);
+    }
     setIsExpanded(!isExpanded);
   };
   var getIsActiveChildItem = function getIsActiveChildItem() {
@@ -63232,7 +63265,7 @@ var GroupItem = function GroupItem(props) {
         setIsHover(false);
       }
     } else {
-      if (isActiveChildItem) {
+      if (isActiveChildItem || props.isMobileView && isExpanded) {
         setIsActive(true);
       } else {
         setIsActive(false);
@@ -63254,7 +63287,7 @@ var GroupItem = function GroupItem(props) {
       end: e.changedTouches[0].clientY
     }));
     if (swipePosition.start < e.changedTouches[0].clientY) {
-      setIsExpanded(false);
+      closePopupMenu();
     }
   };
   var onTouchMove = function onTouchMove(e) {
@@ -63264,6 +63297,11 @@ var GroupItem = function GroupItem(props) {
       itemListRef.current.style.height = height + UNIT.PX;
     }
   };
+  var closePopupMenu = function closePopupMenu() {
+    setIsExpanded(false);
+    props.setActiveItem(CTRL.EMPTY);
+  };
+  var className = isActive ? styles$z['vitro-active'] : isHover ? styles$z['vitro-hover'] : CTRL.EMPTY;
   var content = React__default.createElement(React__default.Fragment, null, props.itemList && props.itemList.map(function (i) {
     return i.link || i.onClick ? React__default.createElement(LinkItem$1, Object.assign({
       link: i.link,
@@ -63273,18 +63311,17 @@ var GroupItem = function GroupItem(props) {
       currentUrl: props.currentUrl,
       isSidebarExpanded: props.isSidebarExpanded,
       isMobileView: props.isMobileView
-    }, i)) : i.itemList ? React__default.createElement(GroupItem, {
+    }, i)) : i.itemList ? React__default.createElement(GroupItem, Object.assign({
       isSidebarExpanded: props.isSidebarExpanded,
-      id: i.id,
-      text: i.text,
       link: i.link,
       itemList: i.itemList,
       linkItemWidth: props.linkItemWidth,
       activeItem: props.activeItem,
+      setActiveItem: props.setActiveItem,
       key: i.text,
       currentUrl: props.currentUrl,
       isMobileView: props.isMobileView
-    }) : null;
+    }, i)) : null;
   }));
   return React__default.createElement(React__default.Fragment, null, React__default.createElement("li", {
     style: {
@@ -63308,7 +63345,7 @@ var GroupItem = function GroupItem(props) {
     className: className
   }, React__default.createElement(Item$2, Object.assign({}, props, {
     isHover: isHover || isActive
-  })), props.isSidebarExpanded && React__default.createElement("span", {
+  })), props.isSidebarExpanded && !props.isMobileView && React__default.createElement("span", {
     className: isExpanded ? styles$z['vitro-expanded'] : styles$z['vitro-collapsed']
   })), props.isMobileView ? React__default.createElement(Overlay$1, {
     show: isExpanded,
@@ -63326,7 +63363,7 @@ var GroupItem = function GroupItem(props) {
     onTouchEnd: onTouchEnd,
     onTouchMove: onTouchMove,
     onClick: function onClick() {
-      return setIsExpanded(false);
+      return closePopupMenu();
     }
   }), React__default.createElement(ScrollBar, {
     className: styles$z['vitro-scrollbar']
@@ -63345,21 +63382,20 @@ var Section = function Section(props) {
       currentUrl: props.currentUrl,
       isSidebarExpanded: props.isExpanded,
       isMobileView: props.isMobileView
-    }, i)) : i.itemList ? React__default.createElement(GroupItem, {
+    }, i)) : i.itemList ? React__default.createElement(GroupItem, Object.assign({
       isSidebarExpanded: props.isExpanded,
-      id: i.id,
-      text: i.text,
       itemList: i.itemList,
       linkItemWidth: props.linkItemWidth,
       activeItem: props.activeItem,
+      setActiveItem: props.setActiveItem,
       key: i.text,
       currentUrl: props.currentUrl,
       isMobileView: props.isMobileView
-    }) : React__default.createElement("div", null);
+    }, i)) : React__default.createElement("div", null);
   })));
 };
 
-var styles$A = {"vitro-sidebar":"_sidebar_vitro-sidebar_1IxGYiU","vitro-scrollbar":"_sidebar_vitro-scrollbar_2PtQGQD","vitro-sidebar-section-list":"_sidebar_vitro-sidebar-section-list_1nGto5m","vitro-scroll-container":"_sidebar_vitro-scroll-container_3K-iJy8","vitro-button-more":"_sidebar_vitro-button-more_3s9oZY9"};
+var styles$A = {"vitro-sidebar":"_sidebar_vitro-sidebar_1IxGYiU","vitro-scrollbar":"_sidebar_vitro-scrollbar_2PtQGQD","vitro-sidebar-section-list":"_sidebar_vitro-sidebar-section-list_1nGto5m","vitro-scroll-container":"_sidebar_vitro-scroll-container_3K-iJy8","vitro-button-more":"_sidebar_vitro-button-more_3s9oZY9","vitro-logo-container":"_sidebar_vitro-logo-container_31O5Ly-","vitro-logo":"_sidebar_vitro-logo_1qxi8L_","vitro-scroll-content":"_sidebar_vitro-scroll-content_2RUBhZd"};
 
 var SectionList = React.forwardRef(function (props, ref) {
   if (!props.itemList || props.itemList.length === 0) {
@@ -63375,7 +63411,8 @@ var SectionList = React.forwardRef(function (props, ref) {
       currentUrl: props.currentUrl,
       activeItem: props.activeItem,
       isMobileView: props.isMobileView,
-      container: props.container
+      container: props.container,
+      setActiveItem: props.setActiveItem
     }, section));
   }));
 });
@@ -63396,22 +63433,26 @@ var Sidebar = function Sidebar(props) {
   var _useState5 = React.useState(0),
     linkItemWidth = _useState5[0],
     setLinkItemWidth = _useState5[1];
+  var _useState6 = React.useState(props.activeItem || CTRL.EMPTY),
+    activeItem = _useState6[0],
+    setActiveItem = _useState6[1];
   var menuRef = React.useRef(null);
-  var scrollableListRef = React.useRef(null);
+  var scrollContentRef = React.useRef(null);
   var handleHistoryChanged = function handleHistoryChanged(e) {
     setCurrentUrl(e.detail.pathname);
+    setActiveItem(CTRL.EMPTY);
   };
   React.useEffect(function () {
     if (props.sidebar === MODE.TOGGLED_HOVERED && 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;
+      var list = [].concat(props.topItemList, props.bottomItemList ? props.bottomItemList : []);
       setItemList(list);
       handleResize();
     } else {
       setItemList(props.topItemList);
     }
-  }, [props.sidebar, isMobileView]);
+  }, [props.sidebar, props.topItemList, props.bottomItemList, isMobileView]);
   React.useEffect(function () {
     window.addEventListener(exports.EVENT.RESIZE, handleResize);
     window.addEventListener(exports.EVENT.HISTORY_CHANGED, handleHistoryChanged);
@@ -63420,6 +63461,9 @@ var Sidebar = function Sidebar(props) {
       window.removeEventListener(exports.EVENT.HISTORY_CHANGED, handleHistoryChanged);
     };
   }, []);
+  React.useEffect(function () {
+    setActiveItem(props.activeItem);
+  }, [props.activeItem]);
   React.useEffect(function () {
     handleResize();
   }, [window.innerWidth]);
@@ -63433,8 +63477,8 @@ var Sidebar = function Sidebar(props) {
   };
   var scroll = function scroll() {
     var container = menuRef.current;
-    var scrollableList = scrollableListRef.current;
-    if (container && scrollableList) {
+    var scrollContent = scrollContentRef.current;
+    if (container && scrollContent) {
       var info = container.getBoundingClientRect();
       var width = info.right - info.left;
       var translateValue = translate;
@@ -63444,7 +63488,7 @@ var Sidebar = function Sidebar(props) {
         translateValue += width;
       }
       setTranslate(translateValue);
-      scrollableList.style.transform = "translate(-" + translateValue + "px)";
+      scrollContent.style.transform = "translate(-" + translateValue + "px)";
     }
   };
   var updateLinkItemWidth = function updateLinkItemWidth(containerWidth) {
@@ -63457,33 +63501,53 @@ var Sidebar = function Sidebar(props) {
   return React__default.createElement("div", {
     className: className,
     id: 'vitro-sidebar'
-  }, !isMobileView ? React__default.createElement(ScrollBar, {
+  }, !isMobileView ? React__default.createElement(React__default.Fragment, null, React__default.createElement(ScrollBar, {
     className: styles$A['vitro-scrollbar']
   }, React__default.createElement(SectionList, {
     itemList: itemList,
     currentUrl: currentUrl,
-    activeItem: props.activeItem,
-    isExpanded: props.sidebar === null ? false : !props.sidebar,
+    activeItem: activeItem,
+    setActiveItem: setActiveItem,
+    isExpanded: !props.sidebar,
     isMobileView: isMobileView
-  }), props.bottomItemList && React__default.createElement(SectionList, {
-    itemList: props.bottomItemList,
+  }), React__default.createElement(SectionList, {
+    itemList: props.bottomItemList || [],
     currentUrl: currentUrl,
-    activeItem: props.activeItem,
-    isExpanded: props.sidebar === null ? false : !props.sidebar,
+    activeItem: activeItem,
+    setActiveItem: setActiveItem,
+    isExpanded: !props.sidebar,
     isMobileView: isMobileView
-  })) : React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
+  })), React__default.createElement("div", {
+    className: styles$A['vitro-logo-container']
+  }, React__default.createElement(Item$2, {
+    text: props.logoText,
+    imageUrl: props.logo,
+    isSidebarExpanded: !props.sidebar,
+    isMobileView: isMobileView,
+    className: styles$A['vitro-logo']
+  }))) : React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
     className: styles$A['vitro-scroll-container'],
     ref: menuRef
+  }, React__default.createElement("div", {
+    className: styles$A['vitro-scroll-content'],
+    ref: scrollContentRef
   }, React__default.createElement(SectionList, {
     container: menuRef.current,
     itemList: itemList,
     currentUrl: currentUrl,
-    activeItem: props.activeItem,
-    ref: scrollableListRef,
+    activeItem: activeItem,
+    setActiveItem: setActiveItem,
     linkItemWidth: linkItemWidth,
-    isExpanded: props.sidebar === null ? false : !props.sidebar,
+    isExpanded: !props.sidebar,
     isMobileView: isMobileView
-  })), React__default.createElement("button", {
+  }), React__default.createElement(Item$2, {
+    text: props.logoText,
+    imageUrl: props.logo,
+    width: linkItemWidth,
+    isSidebarExpanded: !props.sidebar,
+    isMobileView: isMobileView,
+    className: styles$A['vitro-logo']
+  }))), React__default.createElement("button", {
     onClick: scroll,
     className: styles$A['vitro-button-more']
   })));
@@ -65387,13 +65451,11 @@ var Header = function Header(props) {
     }
   }, [ref.current]);
   React.useEffect(function () {
-    if (props.sidebar >= 0) {
+    if (props.sidebar >= 0 && props.sidebar !== null) {
       localStorageService.setItem(LOCAL_STORAGE_KEY.SIDEBAR_MODE, props.sidebar);
     } else {
       var sidebarMode = localStorageService.getItem(LOCAL_STORAGE_KEY.SIDEBAR_MODE);
-      if (sidebarMode) {
-        props.setSidebar(parseInt(sidebarMode) >= MODE.TOGGLED_PINNED ? parseInt(sidebarMode) : MODE.TOGGLED_PINNED);
-      }
+      props.setSidebar(parseInt(sidebarMode) >= MODE.TOGGLED_PINNED ? parseInt(sidebarMode) : MODE.TOGGLED_PINNED);
     }
   }, [props.sidebar]);
   return React__default.createElement("div", {