@vitrosoftware/common-ui-ts 1.1.84 → 1.1.85

package/dist/index.js

@@ -412,7 +412,8 @@ var ScrollBar = function ScrollBar(props) {
     };
   }, []);
   return React__default.createElement("div", {
-    ref: ref
+    ref: ref,
+    className: props.className || CTRL.EMPTY
   }, React__default.createElement("div", {
     className: styles$1['vitro-scrollbar-content']
   }, element && props.children));
@@ -432,6 +433,11 @@ var ScrollBar = function ScrollBar(props) {
   EVENT["CONTEXTMENU"] = "contextmenu";
 })(exports.EVENT || (exports.EVENT = {}));
 
+var MOBILE_VIEW;
+(function (MOBILE_VIEW) {
+  MOBILE_VIEW[MOBILE_VIEW["WIDTH"] = 800] = "WIDTH";
+})(MOBILE_VIEW || (MOBILE_VIEW = {}));
+
 var ELEMENT_CANVAS = 'canvas';
 var CANVAS_CONTEXT = '2d';
 var Breadcrumbs = function Breadcrumbs(props) {
@@ -536,7 +542,7 @@ var Breadcrumbs = function Breadcrumbs(props) {
   }, [containerWidth]);
   var updateBreadcrumbsView = function updateBreadcrumbsView() {
     if (windowWidth) {
-      windowWidth < 800 ? setIsMobileView(true) : setIsMobileView(false);
+      windowWidth < MOBILE_VIEW.WIDTH ? setIsMobileView(true) : setIsMobileView(false);
     }
   };
   var updateItemList = function updateItemList(e) {
@@ -61353,7 +61359,8 @@ var FileVersionSelect = function FileVersionSelect(props) {
     className: styles$k['vitro-file-version-select'],
     ref: selectRef
   }, selectedVersion && React__default.createElement("div", {
-    className: styles$k['vitro-selected-version']
+    className: styles$k['vitro-selected-version'],
+    onClick: onCollapseButtonClick
   }, React__default.createElement("div", {
     ref: fileNameRef,
     onMouseOver: onMouseOver,
@@ -61367,7 +61374,6 @@ var FileVersionSelect = function FileVersionSelect(props) {
   }, React__default.createElement("div", {
     className: isCurrent ? styles$k['vitro-version-name-green'] : styles$k['vitro-version-name-red']
   }, VERSION_PREFIX$1 + selectedVersion.name)), React__default.createElement("div", {
-    onClick: onCollapseButtonClick,
     className: showValueList ? styles$k['vitro-button-collapse-up'] : styles$k['vitro-button-collapse-bottom']
   })), showValueList && React__default.createElement("ul", {
     className: styles$k['vitro-version-list']
@@ -61471,7 +61477,7 @@ var Viewer = function Viewer(props) {
 };
 
 var name = "@vitrosoftware/common-ui-ts";
-var version$1 = "1.1.84";
+var version$1 = "1.1.85";
 var description = "vitro software common ui ts";
 var author = "";
 var license = "MIT";
@@ -61544,7 +61550,7 @@ var dependencies = {
 	"rollup-plugin-postcss": "^3.1.3",
 	inversify: "6.0.1",
 	"inversify-react": "1.0.2",
-	"@vitrosoftware/common-ui": "1.1.32",
+	"@vitrosoftware/common-ui": "1.1.33",
 	"react-router-bootstrap": "^0.24.4",
 	"m-react-splitters": "^1.2.0"
 };
@@ -64452,18 +64458,16 @@ var CommandMenuDropdownButton = function CommandMenuDropdownButton(props) {
   }), props.children));
 };
 
-var styles$x = {"vitro-icon-text":"_sidebar-item_vitro-icon-text_3ROhyLK","vitro-item-text":"_sidebar-item_vitro-item-text_1kK_aIZ","vitro-active":"_sidebar-item_vitro-active_7p5iOhY","vitro-hover":"_sidebar-item_vitro-hover_1mECzme","vitro-icon":"_sidebar-item_vitro-icon_2B88tow","vitro-item":"_sidebar-item_vitro-item_1BR_7F0"};
+var styles$x = {"vitro-item":"_sidebar-item_vitro-item_1BR_7F0","vitro-icon":"_sidebar-item_vitro-icon_2B88tow","vitro-active":"_sidebar-item_vitro-active_7p5iOhY","vitro-item-text":"_sidebar-item_vitro-item-text_1kK_aIZ","vitro-icon-text":"_sidebar-item_vitro-icon-text_3ROhyLK","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, React__default.createElement(Icon, {
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", null, props.imageUrl && React__default.createElement(Icon, {
     defaultUrl: props.imageUrl,
     hoverUrl: props.imageHoverUrl,
     isHover: props.isHover,
     className: styles$x['vitro-icon']
-  }), React__default.createElement("span", {
-    className: styles$x['vitro-icon-text']
-  }, props.text)), React__default.createElement("span", {
-    className: styles$x['vitro-item-text']
+  })), React__default.createElement("span", {
+    className: styles$x['vitro-item-text'] + (!(props.isSidebarExpanded || props.isMobileView) ? CTRL.SPACE + styles$x['vitro-display-none'] : CTRL.EMPTY)
   }, props.text));
 };
 
@@ -64473,16 +64477,17 @@ var TARGET;
   TARGET["SELF"] = "_self";
 })(TARGET || (TARGET = {}));
 
-var w$8 = window;
 var WIDTH_AUTO = 'auto';
 var LinkItem$1 = function LinkItem(props) {
   var _useState = React.useState(false),
     isHover = _useState[0],
     setIsHover = _useState[1];
-  var isActive = props.link === props.currentUrl || props.activeItem === props.id || props.altUrlList && props.altUrlList.includes(props.currentUrl);
+  var isActive = !!props.link && (props.link === props.currentUrl || props.activeItem === props.id || props.altUrlList && props.altUrlList.includes(props.currentUrl));
   var className = isActive ? styles$x['vitro-active'] : isHover ? styles$x['vitro-hover'] : CTRL.EMPTY;
   var onClick = function onClick(e) {
-    if (props.link) {
+    if (props.onClick) {
+      props.onClick(e);
+    } else if (props.link) {
       var event = new CustomEvent(exports.EVENT.HISTORY_UPDATE, {
         detail: {
           pathname: props.link
@@ -64492,29 +64497,40 @@ var LinkItem$1 = function LinkItem(props) {
     }
   };
   return React__default.createElement("li", {
+    style: {
+      width: props.linkItemWidth ? props.linkItemWidth + UNIT.PX : WIDTH_AUTO
+    },
+    className: styles$x['vitro-item']
+  }, (props.link || props.onClick) && React__default.createElement("button", {
     onMouseEnter: function onMouseEnter() {
       return setIsHover(true);
     },
     onMouseLeave: function onMouseLeave() {
       return setIsHover(false);
     },
-    style: {
-      width: props.linkItemWidth ? props.linkItemWidth + UNIT.PX : WIDTH_AUTO
+    onFocus: function onFocus() {
+      return setIsHover(true);
     },
-    className: styles$x['vitro-item']
-  }, props.link && React__default.createElement("a", {
-    onClick: onClick,
-    className: className
-  }, React__default.createElement(Item$2, Object.assign({}, props, {
-    isHover: isHover || isActive
-  }))), props.onClick && React__default.createElement("a", {
-    onClick: function onClick() {
-      return w$8[props.onClick || CTRL.EMPTY]();
+    onBlur: function onBlur() {
+      return setIsHover(false);
     },
+    onClick: onClick,
     className: className
   }, React__default.createElement(Item$2, Object.assign({}, props, {
     isHover: isHover || isActive
   }))), props.href && React__default.createElement("a", {
+    onMouseEnter: function onMouseEnter() {
+      return setIsHover(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setIsHover(false);
+    },
+    onFocus: function onFocus() {
+      return setIsHover(true);
+    },
+    onBlur: function onBlur() {
+      return setIsHover(false);
+    },
     href: props.href,
     target: props.isExternal ? TARGET.BLANK : TARGET.SELF,
     className: className
@@ -64523,34 +64539,212 @@ var LinkItem$1 = function LinkItem(props) {
   }))));
 };
 
+var WIDTH_AUTO$1 = 'auto';
+var GroupItem = function GroupItem(props) {
+  var _useState = React.useState(false),
+    isHover = _useState[0],
+    setIsHover = _useState[1];
+  var _useState2 = React.useState(false),
+    isActive = _useState2[0],
+    setIsActive = _useState2[1];
+  var _useState3 = React.useState(false),
+    isExpanded = _useState3[0],
+    setIsExpanded = _useState3[1];
+  var _useState4 = React.useState(false),
+    isActiveChildItem = _useState4[0],
+    setIsActiveChildItem = _useState4[1];
+  var _useState5 = React.useState({
+      start: 0,
+      end: 0
+    }),
+    swipePosition = _useState5[0],
+    setSwipePosition = _useState5[1];
+  var itemListRef = React.useRef(null);
+  var buttonRef = React.useRef(null);
+  React.useEffect(function () {
+    updateState();
+  }, [props.isSidebarExpanded, props.activeItem, props.currentUrl, isExpanded]);
+  React.useEffect(function () {
+    if (props.isMobileView) {
+      setIsExpanded(false);
+    }
+  }, [props.currentUrl]);
+  var className = isActive ? styles$x['vitro-active'] : isHover ? styles$x['vitro-hover'] : CTRL.EMPTY;
+  var onClick = function onClick(e) {
+    setIsExpanded(!isExpanded);
+  };
+  var getIsActiveChildItem = function getIsActiveChildItem() {
+    if (props.itemList.find(function (x) {
+      return x.link === props.currentUrl;
+    })) {
+      return true;
+    }
+    return false;
+  };
+  var updateState = function updateState() {
+    var isActiveChildItem = getIsActiveChildItem();
+    setIsActiveChildItem(isActiveChildItem);
+    if (props.isSidebarExpanded) {
+      if (isActiveChildItem) {
+        if (isExpanded) {
+          setIsHover(true);
+          setIsActive(false);
+        } else {
+          setIsActive(true);
+        }
+      } else {
+        setIsActive(false);
+        setIsHover(false);
+      }
+    } else {
+      if (isActiveChildItem) {
+        setIsActive(true);
+      } else {
+        setIsActive(false);
+      }
+    }
+  };
+  var _onFocus = function onFocus(focus) {
+    if (!isActiveChildItem) {
+      setIsHover(focus);
+    }
+  };
+  var onTouchStart = function onTouchStart(e) {
+    setSwipePosition(_extends({}, swipePosition, {
+      start: e.changedTouches[0].clientY
+    }));
+  };
+  var onTouchEnd = function onTouchEnd(e) {
+    setSwipePosition(_extends({}, swipePosition, {
+      end: e.changedTouches[0].clientY
+    }));
+    if (swipePosition.start < e.changedTouches[0].clientY) {
+      setIsExpanded(false);
+    }
+  };
+  var onTouchMove = function onTouchMove(e) {
+    var inset = swipePosition.start - e.changedTouches[0].clientY;
+    if (itemListRef.current && inset < 0) {
+      var height = itemListRef.current.getBoundingClientRect().height + inset;
+      itemListRef.current.style.height = height + UNIT.PX;
+    }
+  };
+  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,
+      linkItemWidth: props.linkItemWidth,
+      activeItem: props.activeItem,
+      key: i.text,
+      currentUrl: props.currentUrl,
+      isSidebarExpanded: props.isSidebarExpanded,
+      isMobileView: props.isMobileView
+    }, i)) : i.itemList ? React__default.createElement(GroupItem, {
+      isSidebarExpanded: props.isSidebarExpanded,
+      id: i.id,
+      text: i.text,
+      link: i.link,
+      itemList: i.itemList,
+      linkItemWidth: props.linkItemWidth,
+      activeItem: props.activeItem,
+      key: i.text,
+      currentUrl: props.currentUrl,
+      isMobileView: props.isMobileView
+    }) : null;
+  }));
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement("li", {
+    style: {
+      width: props.linkItemWidth ? props.linkItemWidth + UNIT.PX : WIDTH_AUTO$1
+    },
+    className: styles$x['vitro-item'] + CTRL.SPACE + styles$x['vitro-group-item']
+  }, React__default.createElement("button", {
+    onMouseEnter: function onMouseEnter() {
+      return _onFocus(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return _onFocus(false);
+    },
+    onFocus: function onFocus() {
+      return _onFocus(true);
+    },
+    onBlur: function onBlur() {
+      return _onFocus(false);
+    },
+    onClick: onClick,
+    className: className
+  }, React__default.createElement(Item$2, Object.assign({}, props, {
+    isHover: isHover || isActive
+  })), props.isSidebarExpanded && React__default.createElement("span", {
+    className: isExpanded ? styles$x['vitro-expanded'] : styles$x['vitro-collapsed']
+  })), props.isMobileView ? React__default.createElement(Overlay$1, {
+    show: isExpanded,
+    target: props.container,
+    placement: PLACEMENT$2.TOP
+  }, React__default.createElement("div", {
+    className: styles$x['vitro-popup-container']
+  }, React__default.createElement("ul", {
+    className: styles$x['vitro-popup-item-list'],
+    ref: itemListRef
+  }, React__default.createElement("button", {
+    ref: buttonRef,
+    className: styles$x['vitro-button-close'],
+    onTouchStart: onTouchStart,
+    onTouchEnd: onTouchEnd,
+    onTouchMove: onTouchMove,
+    onClick: function onClick() {
+      return setIsExpanded(false);
+    }
+  }), React__default.createElement(ScrollBar, {
+    className: styles$x['vitro-scrollbar']
+  }, content)))) : React__default.createElement("ul", {
+    className: styles$x['vitro-item-list'] + CTRL.SPACE + (props.isSidebarExpanded ? !isExpanded ? styles$x['vitro-display-none'] : CTRL.EMPTY : styles$x['vitro-display-none'])
+  }, content)));
+};
+
 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({
+    return i.link || i.onClick ? React__default.createElement(LinkItem$1, Object.assign({
+      link: i.link,
       linkItemWidth: props.linkItemWidth,
       activeItem: props.activeItem,
       key: i.text,
-      currentUrl: props.currentUrl
-    }, i));
+      currentUrl: props.currentUrl,
+      isSidebarExpanded: props.isExpanded,
+      isMobileView: props.isMobileView
+    }, i)) : i.itemList ? React__default.createElement(GroupItem, {
+      isSidebarExpanded: props.isExpanded,
+      id: i.id,
+      text: i.text,
+      itemList: i.itemList,
+      linkItemWidth: props.linkItemWidth,
+      activeItem: props.activeItem,
+      key: i.text,
+      currentUrl: props.currentUrl,
+      isMobileView: props.isMobileView
+    }) : React__default.createElement("div", null);
   })));
 };
 
+var styles$y = {"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 SectionList = React.forwardRef(function (props, ref) {
   if (!props.itemList || props.itemList.length === 0) {
     return null;
   }
   return React__default.createElement("ul", {
-    ref: ref
+    ref: ref,
+    className: styles$y['vitro-sidebar-section-list']
   }, props.itemList.map(function (section) {
     return React__default.createElement(Section, Object.assign({
+      isExpanded: props.isExpanded,
       linkItemWidth: props.linkItemWidth,
       currentUrl: props.currentUrl,
-      activeItem: props.activeItem
+      activeItem: props.activeItem,
+      isMobileView: props.isMobileView,
+      container: props.container
     }, section));
   }));
 });
 
-var styles$y = {"vitro-sidebar":"_sidebar_vitro-sidebar_1IxGYiU","vitro-scroll-container":"_sidebar_vitro-scroll-container_3K-iJy8","vitro-button-more":"_sidebar_vitro-button-more_3s9oZY9"};
-
 var Sidebar = function Sidebar(props) {
   var _useState = React.useState(window.location.pathname),
     currentUrl = _useState[0],
@@ -64595,8 +64789,8 @@ var Sidebar = function Sidebar(props) {
     handleResize();
   }, [window.innerWidth]);
   var handleResize = function handleResize() {
-    window.innerWidth < 800 ? setIsMobileView(true) : setIsMobileView(false);
-    if (window.innerWidth < 800 && menuRef.current) {
+    window.innerWidth < MOBILE_VIEW.WIDTH ? setIsMobileView(true) : setIsMobileView(false);
+    if (window.innerWidth < MOBILE_VIEW.WIDTH && menuRef.current) {
       var info = menuRef.current.getBoundingClientRect();
       var width = info.right - info.left;
       updateLinkItemWidth(width);
@@ -64628,23 +64822,32 @@ var Sidebar = function Sidebar(props) {
   return React__default.createElement("div", {
     className: className,
     id: 'vitro-sidebar'
-  }, !isMobileView ? React__default.createElement(React__default.Fragment, null, React__default.createElement(SectionList, {
+  }, !isMobileView ? React__default.createElement(ScrollBar, {
+    className: styles$y['vitro-scrollbar']
+  }, React__default.createElement(SectionList, {
     itemList: itemList,
     currentUrl: currentUrl,
-    activeItem: props.activeItem
+    activeItem: props.activeItem,
+    isExpanded: !props.sidebar,
+    isMobileView: isMobileView
   }), props.bottomItemList && React__default.createElement(SectionList, {
     itemList: props.bottomItemList,
     currentUrl: currentUrl,
-    activeItem: props.activeItem
+    activeItem: props.activeItem,
+    isExpanded: !props.sidebar,
+    isMobileView: isMobileView
   })) : React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
     className: styles$y['vitro-scroll-container'],
     ref: menuRef
   }, React__default.createElement(SectionList, {
+    container: menuRef.current,
     itemList: itemList,
     currentUrl: currentUrl,
     activeItem: props.activeItem,
     ref: scrollableListRef,
-    linkItemWidth: linkItemWidth
+    linkItemWidth: linkItemWidth,
+    isExpanded: !props.sidebar,
+    isMobileView: isMobileView
   })), React__default.createElement("button", {
     onClick: scroll,
     className: styles$y['vitro-button-more']
@@ -66104,7 +66307,7 @@ var Search = function Search(props) {
     }
   }, [props.searchCriterionList]);
   var handleResize = function handleResize() {
-    window.innerWidth < 800 ? setIsMobileView(true) : setIsMobileView(false);
+    window.innerWidth < MOBILE_VIEW.WIDTH ? setIsMobileView(true) : setIsMobileView(false);
   };
   var onSettingsClick = function onSettingsClick() {
     setIsShowDialog(!isShowDialog);
@@ -66371,7 +66574,7 @@ var RouteItem = function RouteItem(props) {
   }, props.children)));
 };
 
-var w$9 = window;
+var w$8 = window;
 var ID_FILE_VERSION_SELECT$1 = 'fileVersionSelect';
 var Viewer$1 = function Viewer(props) {
   React.useEffect(function () {
@@ -66381,11 +66584,11 @@ var Viewer$1 = function Viewer(props) {
   }, [props.context]);
   var init = function init() {
     var initViewer = function initViewer() {
-      if (w$9.initBimViewer) {
+      if (w$8.initBimViewer) {
         var context = _extends({}, props.context, {
           initIssueList: initIssueList
         });
-        w$9.initBimViewer(context);
+        w$8.initBimViewer(context);
         initFileVersionSelect();
       } else {
         setTimeout(initViewer, 100);