@vitrosoftware/common-ui-ts 1.1.116 → 1.1.118

package/css/std/controls/command-menu/command-menu.css

@@ -5,7 +5,7 @@
 }
 
 .vitro-command-menu :global(.nav) {
-    flex-wrap: wrap;
+    flex-wrap: nowrap;
 }
 
 .vitro-command-menu :global(.nav) > li {

package/css/std/controls/input/input.css

@@ -148,4 +148,12 @@
     background-position: center;
     background-size: 100%;
     cursor: pointer;
-}
+}
+
+.vitro-tooltip {
+    max-width: 360px;
+}
+
+.vitro-tooltip :global(.tooltip-inner) {
+    max-width: unset;
+}

package/css/std/controls/search/search.css

@@ -3,6 +3,7 @@
     align-self: baseline;
     margin-left: auto;
     max-width: 376px;
+    min-width: 120px;
 }
 
 .vitro-search.vitro-active {

package/css/std/controls/system-exception-dialog/system-exception-dialog.css

@@ -44,8 +44,9 @@
     border-left: 1px solid #F5F6FA;
 }
 
-.vitro-scrollbar-content {
+.vitro-exception-message {
     padding: 8px 12px;
+    white-space: pre;
 }
 
 .vitro-label {

package/css/std/controls/table-view/table-view-custom-date-edit.css

@@ -23,8 +23,4 @@
 
 .table-view-custom-date-edit .k-link {
     color: #222D44 !important;
-}
-
-.table-view-custom-date-edit .k-state-focused .k-link {
-    color: #fff !important;
-}
+}

package/css/std/controls/table-view/treegrid-context-menu.css

@@ -58,14 +58,9 @@
     margin: 0;
     width: 100%;
     cursor: default;
-}
-
-.vitro-table-view-context-menuMain .TWMenuBody,
-.vitro-table-view-context-menu-leftMain .TWMenuBody,
-.vitro-table-view-popup-menuMain .TWMenuBody {
     max-height: 288px;
-    overflow-y: auto;
-    overflow-x: hidden;
+    overflow-y: auto !important;
+    overflow-x: hidden !important;
 }
 
 .vitro-table-view-context-menuMain .TWMenuBody::-webkit-scrollbar,

package/css/std/controls/tooltip/tooltip.css

@@ -30,6 +30,7 @@
     border: unset !important;
     background-size: 100%;
     background-position: center;
+    background-repeat: no-repeat;
     background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/tooltip/img/tooltip-arrow.svg');
 }
 

package/dist/index.css

@@ -1283,6 +1283,7 @@ html, body {
     border: unset !important;
     background-size: 100%;
     background-position: center;
+    background-repeat: no-repeat;
     background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/tooltip/img/tooltip-arrow.svg');
 }
 
@@ -2539,8 +2540,15 @@ html, body {
     background-position: center;
     background-size: 100%;
     cursor: pointer;
+}
+
+._input_vitro-tooltip_2DcJtbX {
+    max-width: 360px;
+}
+
+._input_vitro-tooltip_2DcJtbX .tooltip-inner {
+    max-width: unset;
 }
-
 ._issue-tile-footer_vitro-issue-tile-footer_KtHOieL {
     display: flex;
     justify-content: space-between;
@@ -4421,7 +4429,7 @@ html, body {
 }
 
 ._command-menu_vitro-command-menu_l82vtIh .nav {
-    flex-wrap: wrap;
+    flex-wrap: nowrap;
 }
 
 ._command-menu_vitro-command-menu_l82vtIh .nav > li {
@@ -6644,6 +6652,7 @@ li:first-child ._command-menu-item_vitro-item_2pVhk23:hover {
     align-self: baseline;
     margin-left: auto;
     max-width: 376px;
+    min-width: 120px;
 }
 
 ._search_vitro-search_QkJksC_._search_vitro-active_1HhQOCR {
@@ -7491,8 +7500,9 @@ li:first-child ._command-menu-item_vitro-item_2pVhk23:hover {
     border-left: 1px solid #F5F6FA;
 }
 
-._system-exception-dialog_vitro-scrollbar-content_2sob8Xl {
+._system-exception-dialog_vitro-exception-message_2S8ZwQP {
     padding: 8px 12px;
+    white-space: pre;
 }
 
 ._system-exception-dialog_vitro-label_1Nbb_It {

package/dist/index.js

@@ -60220,7 +60220,8 @@ var Tooltip$1 = function Tooltip(props) {
     },
     show: props.isShow,
     overlay: React__default.createElement(TooltipComponent, {
-      className: styles$8['vitro-tooltip']
+      className: styles$8['vitro-tooltip'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY),
+      style: props.style
     }, props.text)
   }, props.children);
 };
@@ -60416,6 +60417,9 @@ var ExpandCollapseButton = function ExpandCollapseButton(props) {
   React.useEffect(function () {
     setIsExpanded(props.isExpanded || false);
   }, [props.isExpanded]);
+  var onMouseDown = function onMouseDown(e) {
+    e.preventDefault();
+  };
   var onClick = function onClick(e) {
     e.stopPropagation();
     setIsExpanded(!isExpanded);
@@ -60423,6 +60427,7 @@ var ExpandCollapseButton = function ExpandCollapseButton(props) {
   };
   return React__default.createElement("button", {
     onClick: onClick,
+    onMouseDown: onMouseDown,
     className: styles$g['vitro-expand-collapse-button'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY)
   }, props.expandImage && props.collapseImage ? React__default.createElement(React__default.Fragment, null, isExpanded ? props.collapseImage : props.expandImage) : React__default.createElement("div", {
     className: isExpanded ? styles$g['vitro-expanded'] : styles$g['vitro-collapsed']
@@ -60510,8 +60515,8 @@ var Dialog = function Dialog(props) {
   var className = styles$i['vitro-dialog'] + (props.isShow === false ? CTRL.SPACE + styles$i['vitro-display-none'] : CTRL.EMPTY);
   var showFooter = !props.isHideFooter && (((_props$buttonList = props.buttonList) === null || _props$buttonList === void 0 ? void 0 : _props$buttonList.length) || props.onClose);
   React.useEffect(function () {
-    if (dialogRef.current) {
-      dialogRef.current.focus();
+    if (buttonGroupRef.current && buttonGroupRef.current.lastChild) {
+      buttonGroupRef.current.lastChild.focus();
     }
     updateIsMobileView();
   }, []);
@@ -60536,7 +60541,7 @@ var Dialog = function Dialog(props) {
     if (e.keyCode === KEY_CODE.ESC) {
       onClose();
     }
-    if (e.keyCode === KEY_CODE.TAB) {
+    if (e.keyCode === KEY_CODE.TAB || e.keyCode === KEY_CODE.ARROW_RIGHT || e.keyCode === KEY_CODE.ARROW_LEFT) {
       changeFocus(e);
     }
     if (props.onKeyDown) {
@@ -60547,18 +60552,33 @@ var Dialog = function Dialog(props) {
     if (buttonGroupRef.current) {
       e.preventDefault();
       var buttonList = Array.from(buttonGroupRef.current.children);
-      if (buttonList.length) {
-        var activeButton = buttonList.find(function (button) {
-          return button === document.activeElement;
-        });
-        if (activeButton && activeButton.nextSibling) {
-          activeButton.nextSibling.focus();
+      var activeButton = buttonList.find(function (button) {
+        return button === document.activeElement;
+      });
+      if (activeButton) {
+        if (e.keyCode === KEY_CODE.TAB) {
+          activeButton.nextSibling ? focusNext(activeButton) : buttonList[0].focus();
         } else {
-          buttonList[0].focus();
+          if (e.keyCode === KEY_CODE.ARROW_RIGHT) {
+            focusNext(activeButton);
+          }
+          if (e.keyCode === KEY_CODE.ARROW_LEFT) {
+            focusPrev(activeButton);
+          }
         }
       }
     }
   };
+  var focusNext = function focusNext(activeButton) {
+    if (activeButton.nextSibling) {
+      activeButton.nextSibling.focus();
+    }
+  };
+  var focusPrev = function focusPrev(activeButton) {
+    if (activeButton.previousSibling) {
+      activeButton.previousSibling.focus();
+    }
+  };
   var updateIsMobileView = function updateIsMobileView() {
     setIsMobileView(window.innerWidth < exports.MOBILE_VIEW.WIDTH);
   };
@@ -61162,7 +61182,10 @@ var DropdownButton = function DropdownButton(props) {
     ref: buttonRef
   }, props.title && React__default.createElement("span", {
     className: styles$m['vitro-title']
-  }, props.title), React__default.createElement("span", {
+  }, props.title), props.imageUrl ? React__default.createElement(Image, {
+    defaultUrl: props.imageUrl,
+    hoverUrl: props.imageHoverUrl
+  }) : React__default.createElement("span", {
     className: styles$m['vitro-dropdown-icon']
   })), React__default.createElement(BootstrapDropdown.Menu, {
     renderOnMount: true,
@@ -61507,7 +61530,7 @@ var AUTOCOMPLETE;
   AUTOCOMPLETE["OFF"] = "off";
 })(AUTOCOMPLETE || (AUTOCOMPLETE = {}));
 
-var styles$s = {"vitro-control":"_input_vitro-control_1DmPFkF","vitro-read-only":"_input_vitro-read-only_3f-cBbK","vitro-label":"_input_vitro-label_2XBESiY","vitro-focus":"_input_vitro-focus_1txynr8","vitro-error":"_input_vitro-error_1T3dLzB","vitro-left-label":"_input_vitro-left-label_D9Fpvpd","vitro-error-text":"_input_vitro-error-text_QpZK56k","vitro-button-copy":"_input_vitro-button-copy_jjyktjx"};
+var styles$s = {"vitro-control":"_input_vitro-control_1DmPFkF","vitro-read-only":"_input_vitro-read-only_3f-cBbK","vitro-label":"_input_vitro-label_2XBESiY","vitro-focus":"_input_vitro-focus_1txynr8","vitro-error":"_input_vitro-error_1T3dLzB","vitro-left-label":"_input_vitro-left-label_D9Fpvpd","vitro-error-text":"_input_vitro-error-text_QpZK56k","vitro-button-copy":"_input_vitro-button-copy_jjyktjx","vitro-tooltip":"_input_vitro-tooltip_2DcJtbX"};
 
 var Input = React.forwardRef(function (props, ref) {
   var control;
@@ -61520,11 +61543,37 @@ var Input = React.forwardRef(function (props, ref) {
   var _useState3 = React.useState(CTRL.EMPTY),
     state = _useState3[0],
     setState = _useState3[1];
+  var _useState4 = React.useState(true),
+    isShowTooltip = _useState4[0],
+    setIsShowTooltip = _useState4[1];
   var inputRef = React.useRef(null);
+  var resizeObserver = new window.ResizeObserver(function (entries) {
+    for (var _iterator = _createForOfIteratorHelperLoose(entries), _step; !(_step = _iterator()).done;) {
+      var entry = _step.value;
+      if (entry.target === inputRef.current) {
+        setIsShowTooltip(getIsShowTooltip());
+      }
+    }
+  });
+  React.useEffect(function () {
+    if (inputRef && inputRef.current && !props.isMultiline) {
+      resizeObserver.observe(inputRef.current);
+    }
+  }, [inputRef]);
+  React.useEffect(function () {
+    return function () {
+      resizeObserver.disconnect();
+    };
+  }, []);
   React.useEffect(function () {
     var value = props.value ? props.value : CTRL.EMPTY;
     setInputValue(value);
   }, [props.value]);
+  React.useEffect(function () {
+    if (!state) {
+      setIsShowTooltip(getIsShowTooltip());
+    }
+  }, [inputValue]);
   React.useEffect(function () {
     setState(props.errorMessage || props.isError ? styles$s['vitro-error'] : CTRL.EMPTY);
   }, [props.errorMessage, props.isError]);
@@ -61561,12 +61610,16 @@ var Input = React.forwardRef(function (props, ref) {
   };
   var onBlur = function onBlur(e) {
     setState(props.errorMessage || props.isError ? styles$s['vitro-error'] : CTRL.EMPTY);
+    setIsShowTooltip(getIsShowTooltip());
     if (props.onBlur) {
       props.onBlur(e);
     }
   };
   var onFocus = function onFocus(e) {
+    var _inputRef$current;
     setState(styles$s['vitro-focus']);
+    setIsShowTooltip(false);
+    (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
     if (props.onFocus) {
       props.onFocus(e);
     }
@@ -61594,6 +61647,13 @@ var Input = React.forwardRef(function (props, ref) {
     }
     window.removeEventListener(exports.EVENT.MOUSEUP, remainHeight);
   };
+  var getIsShowTooltip = function getIsShowTooltip() {
+    if (inputRef.current && inputRef.current.scrollWidth > inputRef.current.clientWidth) {
+      return true;
+    } else {
+      return false;
+    }
+  };
   if (props.isMultiline) {
     control = React__default.createElement("textarea", {
       ref: inputRef,
@@ -61648,7 +61708,12 @@ var Input = React.forwardRef(function (props, ref) {
     classList.push(state);
     return classList.join(CTRL.SPACE);
   };
-  return React__default.createElement("div", {
+  return React__default.createElement(Tooltip$1, {
+    text: props.isMultiline || isShowTooltip === false ? CTRL.EMPTY : inputValue,
+    placement: PLACEMENT.BOTTOM,
+    isShow: isShowTooltip === false ? false : undefined,
+    className: styles$s['vitro-tooltip']
+  }, React__default.createElement("div", {
     className: getClassName()
   }, props.label && React__default.createElement(Label, {
     text: props.label,
@@ -61660,7 +61725,7 @@ var Input = React.forwardRef(function (props, ref) {
     onClick: copyValue
   }) : null, props.children, props.errorMessage && React__default.createElement("span", {
     className: styles$s['vitro-error-text']
-  }, props.errorMessage));
+  }, props.errorMessage)));
 });
 
 var styles$t = {"vitro-issue-tile-footer":"_issue-tile-footer_vitro-issue-tile-footer_KtHOieL","vitro-issue-tile-status":"_issue-tile-footer_vitro-issue-tile-status_3OjC56L","vitro-status-color":"_issue-tile-footer_vitro-status-color_hhLb22J","vitro-button-more":"_issue-tile-footer_vitro-button-more_1RyVAeR"};
@@ -62010,7 +62075,7 @@ var Viewer = function Viewer(props) {
 };
 
 var name = "@vitrosoftware/common-ui-ts";
-var version$1 = "1.1.116";
+var version$1 = "1.1.118";
 var description = "vitro software common ui ts";
 var author = "";
 var license = "MIT";
@@ -63212,7 +63277,7 @@ var ValueList = function ValueList(props) {
     if (scrollableElement && scrollableElement.scrollTop === 0) {
       scrollableElement.scrollTop = 1;
     }
-  });
+  }, []);
   React.useEffect(function () {
     if (props.isFlip) {
       setStyle(null);
@@ -63235,6 +63300,16 @@ var ValueList = function ValueList(props) {
       return "<span class=" + valueListStyles['vitro-keyword-highlight'] + ">" + str + '</span>';
     }) : props.filterValueTemplate(item);
   };
+  var sortValueList = function sortValueList(a, b) {
+    var indexA = props.filterValueTemplate(a).search(reg);
+    var indexB = props.filterValueTemplate(b).search(reg);
+    if (indexA < indexB) {
+      return -1;
+    } else if (indexA > indexB) {
+      return 1;
+    }
+    return 0;
+  };
   return React__default.createElement(Overlay$1, {
     show: props.isVisible,
     target: props.contentRef,
@@ -63246,7 +63321,7 @@ var ValueList = function ValueList(props) {
     className: valueListStyles['vitro-value-list']
   }, React__default.createElement(ScrollBar, {
     onInit: setScrollableElement
-  }, props.isPending && React__default.createElement(Progress, null), !props.isPending && React__default.createElement(React__default.Fragment, null, props.list.length > 0 ? props.list.map(function (x) {
+  }, 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,
       onSelect: props.onOptionValueSelect,
@@ -63381,7 +63456,7 @@ var LookupPicker = React.forwardRef(function (props, ref) {
     }
   }, [selectedValueList]);
   React.useEffect(function () {
-    setState(props.errorMessage ? styles$M['vitro-error'] : CTRL.EMPTY);
+    setState(props.errorMessage && !valueListVisible ? styles$M['vitro-error'] : valueListVisible ? state : CTRL.EMPTY);
   }, [props.errorMessage]);
   var updateFilteredValueList = function updateFilteredValueList(valueList) {
     var availableValueList = inputValue ? filteredValueList : valueList;
@@ -63447,6 +63522,8 @@ var LookupPicker = React.forwardRef(function (props, ref) {
   };
   var onOptionValueDelete = function onOptionValueDelete(id) {
     if (!props.isDisabled) {
+      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;
       }) : [];
@@ -63457,21 +63534,19 @@ var LookupPicker = React.forwardRef(function (props, ref) {
     }
   };
   var onFocusOut = function onFocusOut(e) {
+    var _document$activeEleme;
     var target = e.currentTarget;
-    setTimeout(function () {
-      var _document$activeEleme;
-      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) {
-        setValueListVisible(false);
-        setInputValue(CTRL.EMPTY);
-        if (props.onBlur && !props.isDisabled) {
-          props.onBlur(props.isMultiSelect ? selectedValueList : selectedValueList.find(function (x) {
-            return x;
-          }), props.name);
-        }
-        setState(props.errorMessage ? styles$M['vitro-error'] : CTRL.EMPTY);
+    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) {
+      setValueListVisible(false);
+      setInputValue(CTRL.EMPTY);
+      if (props.onBlur && !props.isDisabled) {
+        props.onBlur(props.isMultiSelect ? selectedValueList : selectedValueList.find(function (x) {
+          return x;
+        }), props.name);
       }
-    });
+      setState(props.errorMessage ? styles$M['vitro-error'] : CTRL.EMPTY);
+    }
   };
   var onFocus = function onFocus(e) {
     setState(styles$M['vitro-focus']);
@@ -66099,18 +66174,18 @@ var Search = function Search(props) {
   }))));
   return React__default.createElement("div", {
     ref: searchRef,
-    className: (props.isMobileView ? styles$1b['vitro-search-mobile'] : styles$1b['vitro-search']) + CTRL.SPACE + state
+    className: (props.isMobileView || props.isMinifiedInput ? styles$1b['vitro-search-mobile'] : styles$1b['vitro-search']) + CTRL.SPACE + state
   }, React__default.createElement(SearchInput, {
     searchCriterionList: selectedSearchCriterionList,
     onCancel: onCancelSearch,
     onSubmit: onSearch,
-    onSearchClick: props.isMobileView ? onSettingsClick : undefined,
+    onSearchClick: props.isMobileView || props.isMinifiedInput ? onSettingsClick : undefined,
     onRemoveValue: onRemoveValue,
     onChange: onInputChange,
     placeholder: props.inputPlaceholder,
     onFocus: onFocusInput,
     isActive: state || isShowDialog ? true : false,
-    isMobileView: props.isMobileView,
+    isMobileView: props.isMobileView ? true : props.isMinifiedInput,
     className: styles$1b['vitro-control']
   }, (state || isShowDialog) && React__default.createElement(ImageButton, {
     onClick: onSettingsClick,
@@ -66806,7 +66881,7 @@ var LOCALE$c;
   LOCALE["SETTING_SYSTEM_INFO"] = "systemInformation";
 })(LOCALE$c || (LOCALE$c = {}));
 
-var styles$1u = {"vitro-system-exception-dialog":"_system-exception-dialog_vitro-system-exception-dialog_2UVdbuB","vitro-image":"_system-exception-dialog_vitro-image_XG5PD8h","vitro-exception":"_system-exception-dialog_vitro-exception_2bLGF01","vitro-scrollbar-content":"_system-exception-dialog_vitro-scrollbar-content_2sob8Xl","vitro-label":"_system-exception-dialog_vitro-label_1Nbb_It","vitro-input":"_system-exception-dialog_vitro-input_262484M","vitro-flex":"_system-exception-dialog_vitro-flex_EHka5VC","vitro-settings-list":"_system-exception-dialog_vitro-settings-list_6N3QiPa","vitro-checkbox":"_system-exception-dialog_vitro-checkbox_354NjHR"};
+var styles$1u = {"vitro-system-exception-dialog":"_system-exception-dialog_vitro-system-exception-dialog_2UVdbuB","vitro-image":"_system-exception-dialog_vitro-image_XG5PD8h","vitro-exception":"_system-exception-dialog_vitro-exception_2bLGF01","vitro-exception-message":"_system-exception-dialog_vitro-exception-message_2S8ZwQP","vitro-label":"_system-exception-dialog_vitro-label_1Nbb_It","vitro-input":"_system-exception-dialog_vitro-input_262484M","vitro-flex":"_system-exception-dialog_vitro-flex_EHka5VC","vitro-settings-list":"_system-exception-dialog_vitro-settings-list_6N3QiPa","vitro-checkbox":"_system-exception-dialog_vitro-checkbox_354NjHR"};
 
 var settingsList = [LOCALE$c.SETTING_SCREENSHOT, LOCALE$c.SETTING_EXCEPTION_TEXT, LOCALE$c.SETTING_USER_NAME, LOCALE$c.SETTING_SYSTEM_INFO];
 var SystemExceptionDialog = function SystemExceptionDialog(props) {
@@ -66847,6 +66922,10 @@ var SystemExceptionDialog = function SystemExceptionDialog(props) {
   var updateIsMobileView = function updateIsMobileView() {
     setIsMobileView(window.innerWidth < exports.MOBILE_VIEW.WIDTH);
   };
+  var blockAction = function blockAction(e) {
+    e.preventDefault();
+    return false;
+  };
   var buttonList = [{
     onClick: onConfirm,
     text: props.labelConfirm || localeService.create(LOCALE$c.ACTION_SEND)
@@ -66884,11 +66963,16 @@ var SystemExceptionDialog = function SystemExceptionDialog(props) {
     ref: inputRef,
     className: styles$1u['vitro-input'],
     isMultiline: true
-  }), React__default.createElement("div", {
+  }), props.message && React__default.createElement("div", {
     className: styles$1u['vitro-exception']
-  }, React__default.createElement(ScrollBar, {
-    contentClassName: styles$1u['vitro-scrollbar-content']
-  }, props.stackTrace))));
+  }, React__default.createElement(ScrollBar, null, React__default.createElement("div", {
+    onCut: blockAction,
+    onPaste: blockAction,
+    onBeforeInput: blockAction,
+    spellCheck: false,
+    contentEditable: true,
+    className: styles$1u['vitro-exception-message']
+  }, props.message)))));
 };
 
 var styles$1v = {"vitro-star-button":"_star-button_vitro-star-button_1_mQ_Gq","vitro-hidden":"_star-button_vitro-hidden_oRKUkzt","vitro-active":"_star-button_vitro-active_2UV6u5C"};