@vitrosoftware/common-ui-ts 1.1.266 → 1.1.267

package/css/std/controls/bim-viewer/bim-viewer-index.css

@@ -15423,8 +15423,8 @@ div:focus-visible {
     max-width: 100%;
 }
 
-#compareTreeContent, 
-.jstree-container-ul {
+#compareTreeContent,
+#compareTreeContent > .jstree-container-ul {
     width: 100%;
 }
 

package/css/std/controls/bim-viewer/bim-viewer.css

@@ -1151,8 +1151,8 @@ div:focus-visible {
     max-width: 100%;
 }
 
-#compareTreeContent, 
-.jstree-container-ul {
+#compareTreeContent,
+#compareTreeContent > .jstree-container-ul {
     width: 100%;
 }
 

package/css/std/controls/workflow-route/workflow-route.css

@@ -34,7 +34,7 @@
 
 .vitro-name {
     white-space: normal;
-    padding-top: 4px;
+    min-height: 24px;
 }
 
 .vitro-workflow-route:global(.vitro-expanded) .vitro-expand-collapse-button > div,
@@ -60,4 +60,24 @@
     width: 24px;
     height: 24px;
     flex-shrink: 0;
+}
+
+.vitro-dropdown-button-container.vitro-right {
+    margin-bottom: auto;
+}
+
+.vitro-data-container-mobile {
+    padding-top: 4px;
+}
+
+.vitro-link,
+.vitro-link:visited,
+.vitro-link-mobile,
+.vitro-link-mobile:visited {
+    font-size: 14px;
+    line-height: 16px;
+}
+
+.vitro-link-mobile {
+    margin-bottom: auto;
 }

package/css/std/controls/workflow-route-task/workflow-route-task.css

@@ -159,15 +159,6 @@
     position: relative;
 }
 
-.vitro-data-container::after {
-    content: '';
-    width: 100%;
-    height: 1px;
-    position: absolute;
-    top: 100%;
-    background-color: rgba(228, 230, 236, 0.5);
-}
-
 .vitro-date-container {
     padding: 4px;
 }

package/dist/index.css

@@ -9711,15 +9711,6 @@ div._component-loader_vitro-component-loader_3J3a2or {
     position: relative;
 }
 
-._workflow-route-task_vitro-data-container_1xfMmR3::after {
-    content: '';
-    width: 100%;
-    height: 1px;
-    position: absolute;
-    top: 100%;
-    background-color: rgba(228, 230, 236, 0.5);
-}
-
 ._workflow-route-task_vitro-date-container_hSQMuDR {
     padding: 4px;
 }
@@ -9864,7 +9855,7 @@ div._component-loader_vitro-component-loader_3J3a2or {
 
 ._workflow-route_vitro-name_28vFhFk {
     white-space: normal;
-    padding-top: 4px;
+    min-height: 24px;
 }
 
 ._workflow-route_vitro-workflow-route_3dG_len.vitro-expanded ._workflow-route_vitro-expand-collapse-button_fnksjDH > div,
@@ -9890,4 +9881,24 @@ div._component-loader_vitro-component-loader_3J3a2or {
     width: 24px;
     height: 24px;
     flex-shrink: 0;
+}
+
+._workflow-route_vitro-dropdown-button-container_1YxXjBP._workflow-route_vitro-right_2M1Zu0u {
+    margin-bottom: auto;
+}
+
+._workflow-route_vitro-data-container-mobile_33d2eWF {
+    padding-top: 4px;
+}
+
+._workflow-route_vitro-link_11JiIao,
+._workflow-route_vitro-link_11JiIao:visited,
+._workflow-route_vitro-link-mobile_2SWgLD8,
+._workflow-route_vitro-link-mobile_2SWgLD8:visited {
+    font-size: 14px;
+    line-height: 16px;
+}
+
+._workflow-route_vitro-link-mobile_2SWgLD8 {
+    margin-bottom: auto;
 }

package/dist/index.js

@@ -495,7 +495,17 @@ var ScrollBar = React.forwardRef(function (props, outerRef) {
   var scrollElementRef = React.useRef(null);
   var observerRef = React.useRef();
   React.useImperativeHandle(outerRef, function () {
-    return ref.current;
+    var element = ref.current;
+    if (element) {
+      return Object.assign(element, {
+        update: function update() {
+          if (scrollElementRef.current) {
+            scrollElementRef.current.update();
+          }
+        }
+      });
+    }
+    return element;
   }, []);
   React.useEffect(function () {
     return function () {
@@ -504,6 +514,12 @@ var ScrollBar = React.forwardRef(function (props, outerRef) {
       }
     };
   }, []);
+  React.useEffect(function () {
+    if (scrollElementRef.current && scrollElementRef.current.settings) {
+      scrollElementRef.current.settings.wheelPropagation = props.isWheelPropagation;
+      scrollElementRef.current.update();
+    }
+  }, [props.isWheelPropagation]);
   var isDisplayNone = function isDisplayNone(element) {
     var style = window.getComputedStyle(element);
     return style.display === DISPLAY.NONE;
@@ -547,7 +563,8 @@ var ScrollBar = React.forwardRef(function (props, outerRef) {
   var init = function init() {
     if (w.PerfectScrollbar) {
       var scrollElement = new w.PerfectScrollbar(ref.current, {
-        suppressScrollX: props.isHideScrollX
+        suppressScrollX: props.isHideScrollX,
+        wheelPropagation: props.isWheelPropagation
       });
       scrollElementRef.current = scrollElement;
       if (w.addResizeListener && ref.current) {
@@ -567,24 +584,18 @@ var ScrollBar = React.forwardRef(function (props, outerRef) {
       addObserver();
     }
   };
-  var onWheel = function onWheel(e) {
-    if (props.isPreventParentScroll) {
-      e.stopPropagation();
-    }
-  };
   var onScrollY = function onScrollY(e) {
     if (ref.current && props.onScrollY) {
       props.onScrollY(e, ref.current);
     }
   };
-  return React__default.createElement("div", {
+  return React__default.createElement("div", Object.assign({}, props, {
     ref: ref,
     className: props.className || CTRL.EMPTY
-  }, React__default.createElement("div", Object.assign({}, props, {
+  }), React__default.createElement("div", {
     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) {
@@ -60490,6 +60501,7 @@ KEY_CODE.ESC = 27;
 KEY_CODE.ARROW_RIGHT = 39;
 KEY_CODE.ARROW_LEFT = 37;
 KEY_CODE.TAB = 9;
+KEY_CODE.BACKSPACE = 8;
 
 var styles$l = {"vitro-dialog":"_dialog_vitro-dialog_2NzcRZg","vitro-dialog-button-close":"_dialog_vitro-dialog-button-close_2TF5iry","vitro-hidden-content":"_dialog_vitro-hidden-content_niGbpGx","vitro-hidden":"_dialog_vitro-hidden_1kSAyNC","vitro-display-none":"_dialog_vitro-display-none_T-eWeyA"};
 
@@ -63888,7 +63900,7 @@ var ValueList = function ValueList(props) {
     onMouseDown: onMouseDown
   }, React__default.createElement(ScrollBar, {
     onInit: setScrollableElement,
-    isPreventParentScroll: true
+    isWheelPropagation: false
   }, isProgressVisible && React__default.createElement(FlexBox, {
     className: valueListStyles['vitro-progress-container']
   }, React__default.createElement(Progress, null)), !isProgressVisible && React__default.createElement(React__default.Fragment, null, props.list.length > 0 ? props.list.sort(sortValueList).map(function (x) {
@@ -64017,6 +64029,12 @@ var LookupPicker = React.forwardRef(function (props, ref) {
   var _useState8 = React.useState(false),
     isSearchInProgress = _useState8[0],
     setIsSearchInProgress = _useState8[1];
+  var _useState9 = React.useState(false),
+    isValueSelected = _useState9[0],
+    setIsValueSelected = _useState9[1];
+  var _useState0 = React.useState(false),
+    isValueDeleted = _useState0[0],
+    setIsValueDeleted = _useState0[1];
   var localeService = props.container ? props.container.get(SERVICE.LOCALE) : inversifyReact.useInjection(SERVICE.LOCALE);
   var isEditable = !props.isDisabled && !props.isReadOnly;
   var isInputReadOnly = !(props.getValueList || props.getAllValueList || props.valueList);
@@ -64026,6 +64044,12 @@ var LookupPicker = React.forwardRef(function (props, ref) {
   var isShowTooltipRef = React.useRef(true);
   var scrollBarRef = React.useRef(null);
   var rightButtonGroupRef = React.useRef(null);
+  var deletedIdListRef = React.useRef([]);
+  var keyDownTimeout = React.useMemo(function () {
+    return {
+      id: null
+    };
+  }, []);
   React.useEffect(function () {
     updateFilteredValueList(props.valueList || []);
     setSelectedValueList(createDefaultSelectedValueList);
@@ -64152,11 +64176,25 @@ var LookupPicker = React.forwardRef(function (props, ref) {
     onInputValueUpdated(e.target.value);
   };
   var onKeyDown = function onKeyDown(e) {
-    var keyBoardBackSpace = 8;
-    if (e.keyCode === keyBoardBackSpace && e.target.value.length === 0 && selectedValueList.length > 0) {
-      var newValueList = [].concat(selectedValueList);
-      var lastValue = newValueList.pop();
-      onOptionValueDelete(lastValue.id);
+    if (e.keyCode === KEY_CODE.BACKSPACE && e.target.value.length === 0) {
+      var selectedList = selectedValueList.filter(function (item) {
+        return !deletedIdListRef.current.includes(item.id);
+      });
+      if (selectedList.length > 0) {
+        deletedIdListRef.current.push(selectedList.pop().id);
+        if (keyDownTimeout.id) {
+          clearTimeout(keyDownTimeout.id);
+        }
+        setSelectedValueList(selectedList);
+        setIsValueDeleted(true);
+        keyDownTimeout.id = setTimeout(function () {
+          keyDownTimeout.id = null;
+          props.onChange && props.onChange(props.isMultiSelect ? selectedList : selectedList.find(function (x) {
+            return x;
+          }), props.name);
+          deletedIdListRef.current = [];
+        }, 300);
+      }
     }
   };
   var filterByText = function filterByText(value) {
@@ -64176,6 +64214,14 @@ var LookupPicker = React.forwardRef(function (props, ref) {
       setPending(true);
     }
   };
+  React.useEffect(function () {
+    if (isValueSelected) {
+      if (scrollBarRef.current) {
+        scrollBarRef.current.scrollTop = scrollBarRef.current.scrollHeight;
+      }
+      setIsValueSelected(false);
+    }
+  }, [isValueSelected]);
   var onOptionValueSelect = function onOptionValueSelect(id) {
     var valueList = props.valueList ? props.valueList : filteredValueList;
     var selectedValue = valueList.find(function (x) {
@@ -64190,6 +64236,7 @@ var LookupPicker = React.forwardRef(function (props, ref) {
     }
     if (props.isMultiSelect) {
       inputRef && inputRef.current && inputRef.current.focus();
+      setIsValueSelected(true);
     } else {
       setValueListVisible(false);
       setState(CTRL.EMPTY);
@@ -64219,27 +64266,37 @@ var LookupPicker = React.forwardRef(function (props, ref) {
       return true;
     }
   };
+  React.useEffect(function () {
+    if (isValueDeleted) {
+      if (scrollBarRef.current) {
+        scrollBarRef.current.update();
+      }
+      setIsValueDeleted(false);
+    }
+  }, [isValueDeleted]);
   var onOptionValueDelete = function onOptionValueDelete(id) {
     if (!props.isDisabled) {
       var _inputRef$current3;
-      (_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 ? void 0 : _inputRef$current3.focus();
+      (_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 ? void 0 : _inputRef$current3.focus({
+        preventScroll: true
+      });
       var newSelectedValueList = id ? selectedValueList.filter(function (x) {
         return x.id !== id;
       }) : [];
       setSelectedValueList(newSelectedValueList);
+      setIsValueDeleted(true);
       props.onChange && props.onChange(props.isMultiSelect ? newSelectedValueList : newSelectedValueList.find(function (x) {
         return x;
       }), props.name);
     }
   };
   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) && !(e.target.parentElement == rightButtonGroupRef.current) && !isValueListItem) {
+    var _e$relatedTarget;
+    var isValueListItem = Boolean(props.isMultiSelect && ((_e$relatedTarget = e.relatedTarget) === null || _e$relatedTarget === void 0 ? void 0 : _e$relatedTarget.classList.contains(valueListStyles['vitro-item'])));
+    if (!e.currentTarget.contains(e.relatedTarget) && !isValueListItem) {
+      if (scrollBarRef.current) {
+        scrollBarRef.current.scrollTop = 0;
+      }
       setValueListVisible(false);
       setInputValue(CTRL.EMPTY);
       if (props.onBlur && !props.isDisabled) {
@@ -64251,20 +64308,22 @@ var LookupPicker = React.forwardRef(function (props, ref) {
     }
   };
   var onFocus = function onFocus(e) {
-    var _inputRef$current4;
-    if (scrollBarRef.current) {
-      scrollBarRef.current.scrollTop = scrollBarRef.current.scrollHeight;
-    }
-    if (!valueListVisible) {
-      var _e$target;
-      onInputValueUpdated((e === null || e === void 0 ? void 0 : (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.value) || CTRL.EMPTY);
-    }
-    isShowTooltipRef.current = false;
-    setState(styles$O['vitro-focus']);
-    expandValueList();
-    (_inputRef$current4 = inputRef.current) === null || _inputRef$current4 === void 0 ? void 0 : _inputRef$current4.focus();
-    if (props.onFocus) {
-      props.onFocus(e);
+    if (state !== styles$O['vitro-focus']) {
+      var _inputRef$current4;
+      if (scrollBarRef.current) {
+        scrollBarRef.current.scrollTop = scrollBarRef.current.scrollHeight;
+      }
+      if (!valueListVisible) {
+        var _e$target;
+        onInputValueUpdated((e === null || e === void 0 ? void 0 : (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.value) || CTRL.EMPTY);
+      }
+      isShowTooltipRef.current = false;
+      setState(styles$O['vitro-focus']);
+      expandValueList();
+      (_inputRef$current4 = inputRef.current) === null || _inputRef$current4 === void 0 ? void 0 : _inputRef$current4.focus();
+      if (props.onFocus) {
+        props.onFocus(e);
+      }
     }
   };
   var onCollapseButtonClick = function onCollapseButtonClick(valueListVisible) {
@@ -64356,7 +64415,8 @@ var LookupPicker = React.forwardRef(function (props, ref) {
   }, props.isMultiSelect ? React__default.createElement(ScrollBar, {
     contentClassName: styles$O['vitro-multi-value-container'],
     onClick: onFocus,
-    ref: scrollBarRef
+    ref: scrollBarRef,
+    isWheelPropagation: state === styles$O['vitro-focus'] ? false : true
   }, content) : React__default.createElement(FlexBox, {
     className: styles$O['vitro-value-container'],
     onClick: onFocus
@@ -67269,6 +67329,9 @@ var Search = React.forwardRef(function (props, ref) {
     return {
       setDestination: function setDestination(destination) {
         destinationRef.current = destination;
+      },
+      getDestination: function getDestination() {
+        return destinationRef.current;
       }
     };
   });
@@ -67760,7 +67823,7 @@ var Viewer = function Viewer(props) {
 };
 
 var name = "@vitrosoftware/common-ui-ts";
-var version$1 = "1.1.266";
+var version$1 = "1.1.267";
 var description = "vitro software common ui ts";
 var author = "";
 var license = "MIT";
@@ -87165,7 +87228,7 @@ var WorkflowRouteStep = function WorkflowRouteStep(props) {
   }, props.children);
 };
 
-var styles$25 = {"vitro-workflow-route":"_workflow-route_vitro-workflow-route_3dG_len","vitro-resolved":"_workflow-route_vitro-resolved_kJ_qzSx","vitro-right":"_workflow-route_vitro-right_2M1Zu0u","vitro-workflow-route-header":"_workflow-route_vitro-workflow-route-header_35BWBU5","vitro-workflow-route-header-mobile":"_workflow-route_vitro-workflow-route-header-mobile_2AvvUfH","vitro-active":"_workflow-route_vitro-active_1_97-zX","vitro-workflow-route-content":"_workflow-route_vitro-workflow-route-content_32GXb3u","vitro-name":"_workflow-route_vitro-name_28vFhFk","vitro-expand-collapse-button":"_workflow-route_vitro-expand-collapse-button_fnksjDH","vitro-expand-collapse-button-mobile":"_workflow-route_vitro-expand-collapse-button-mobile_2FBiUgU","vitro-dropdown-button-container":"_workflow-route_vitro-dropdown-button-container_1YxXjBP","vitro-expand-collapse-button-empty":"_workflow-route_vitro-expand-collapse-button-empty_2dD9Q24"};
+var styles$25 = {"vitro-workflow-route":"_workflow-route_vitro-workflow-route_3dG_len","vitro-resolved":"_workflow-route_vitro-resolved_kJ_qzSx","vitro-right":"_workflow-route_vitro-right_2M1Zu0u","vitro-workflow-route-header":"_workflow-route_vitro-workflow-route-header_35BWBU5","vitro-workflow-route-header-mobile":"_workflow-route_vitro-workflow-route-header-mobile_2AvvUfH","vitro-active":"_workflow-route_vitro-active_1_97-zX","vitro-workflow-route-content":"_workflow-route_vitro-workflow-route-content_32GXb3u","vitro-name":"_workflow-route_vitro-name_28vFhFk","vitro-expand-collapse-button":"_workflow-route_vitro-expand-collapse-button_fnksjDH","vitro-expand-collapse-button-mobile":"_workflow-route_vitro-expand-collapse-button-mobile_2FBiUgU","vitro-dropdown-button-container":"_workflow-route_vitro-dropdown-button-container_1YxXjBP","vitro-expand-collapse-button-empty":"_workflow-route_vitro-expand-collapse-button-empty_2dD9Q24","vitro-data-container-mobile":"_workflow-route_vitro-data-container-mobile_33d2eWF","vitro-link":"_workflow-route_vitro-link_11JiIao","vitro-link-mobile":"_workflow-route_vitro-link-mobile_2SWgLD8"};
 
 var WorkflowRouteContent = function WorkflowRouteContent(props) {
   var nameContainerRef = React.useRef(null);
@@ -87177,9 +87240,15 @@ var WorkflowRouteContent = function WorkflowRouteContent(props) {
       isFullWidth: true,
       isColumn: true
     }, React__default.createElement(FlexBox, {
-      gap: 4,
+      className: styles$25['vitro-data-container-mobile'],
+      gap: 6,
       isFullWidth: true
-    }, React__default.createElement(ValueTooltip, {
+    }, React__default.createElement(Link, {
+      text: props.itemId,
+      href: props.url,
+      className: styles$25['vitro-link-mobile'],
+      isTargetBlank: true
+    }), React__default.createElement(ValueTooltip, {
       text: props.name,
       containerRef: nameContainerRef
     }, React__default.createElement("span", {
@@ -87202,7 +87271,12 @@ var WorkflowRouteContent = function WorkflowRouteContent(props) {
     className: styles$25['vitro-workflow-route-content'],
     gap: 6,
     isFullWidth: true
-  }, React__default.createElement(ValueTooltip, {
+  }, React__default.createElement(Link, {
+    text: props.itemId,
+    href: props.url,
+    className: styles$25['vitro-link'],
+    isTargetBlank: true
+  }), React__default.createElement(ValueTooltip, {
     text: props.name,
     containerRef: nameContainerRef
   }, React__default.createElement(Label, {