@vitrosoftware/common-ui-ts 1.1.63 → 1.1.65

package/css/std/controls/activity-item/activity-item.css

@@ -79,5 +79,10 @@
 }
 
 .vitro-avatar {
+    width: 32px;
+    min-width: 32px;
+    height: 32px;
+    line-height: 32px;
+    font-size: 16px;
     margin-right: 8px;
 }

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

@@ -152,6 +152,7 @@
 :global(.vitro-button-context) {
     padding: 0 !important;
     width: 24px;
+    background-color: #fff !important;
 }
 
 :global(.vitro-button-context > div),

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

@@ -84,6 +84,12 @@ input#pageNumber {
     margin: 0;
     margin-top: 1px;
     border: 1px solid #C0CAD5;
+    font-size: 14px;
+    min-width: 40px;
+    width: fit-content;
+    line-height: 20px;
+    text-overflow: ellipsis;
+    overflow: hidden;
 }
 
 .horizontalToolbarSeparator {

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

@@ -47,9 +47,6 @@
     background-color: #fff;
 }
 
-.vitro-active .vitro-search-value-list {
-    width: 262px;
-}
 
 .vitro-search-value-list {
     display: flex;
@@ -101,6 +98,10 @@
     margin-right: 4px;
     white-space: nowrap;
     overflow: hidden;
+}
+
+.vitro-search-value span {
+    overflow: hidden;
     text-overflow: ellipsis;
 }
 

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

@@ -3,6 +3,11 @@
     align-self: baseline;
     margin-right: 16px;
     margin-left: auto;
+    max-width: 376px;
+}
+
+.vitro-search.vitro-active {
+    width: 376px;
 }
 
 .vitro-settings-dialog {

package/dist/controls/Search/Input.d.ts

@@ -1,15 +1,20 @@
 /// <reference types="react" />
 import { SearchCriterion } from '../Search/SearchCriterion';
 interface InputProps {
-    valueList?: SearchCriterion[];
+    valueList: SearchCriterion[];
     textValue?: string;
     placeholder?: string;
-    onSettingsClick?: (active: boolean) => any;
+    onSettingsClick?: () => any;
     onCancel: () => any;
-    onSubmit: (value?: string) => any;
+    onSubmit: (value?: string, searchCriterionList?: SearchCriterion[]) => any;
     onChange?: (value: any) => any;
+    onBlur?: () => any;
+    onFocus?: () => any;
+    onRemoveValue?: (newItemList: SearchCriterion[]) => any;
     isShowSettings?: boolean;
     isSettingsActive?: boolean;
+    isActive: boolean;
+    isMobileView: boolean;
     className?: string;
 }
 export declare const Input: (props: InputProps) => JSX.Element;

package/dist/index.css

@@ -3602,6 +3602,7 @@ li:first-child ._command-menu-item_vitro-item_2pVhk23:hover {
 .vitro-button-context {
     padding: 0 !important;
     width: 24px;
+    background-color: #fff !important;
 }
 
 .vitro-button-context > div,
@@ -4460,6 +4461,11 @@ ul > li:last-child > ul > li:last-child ._sidebar-item_vitro-active_7p5iOhY {
 }
 
 ._activity-item_vitro-avatar_218ZqAk {
+    width: 32px;
+    min-width: 32px;
+    height: 32px;
+    line-height: 32px;
+    font-size: 16px;
     margin-right: 8px;
 }
 
@@ -5037,9 +5043,6 @@ ul > li:last-child > ul > li:last-child ._sidebar-item_vitro-active_7p5iOhY {
     background-color: #fff;
 }
 
-._input_vitro-active_jxhGdE8 ._input_vitro-search-value-list_2I_KVY5 {
-    width: 262px;
-}
 
 ._input_vitro-search-value-list_2I_KVY5 {
     display: flex;
@@ -5091,6 +5094,10 @@ ul > li:last-child > ul > li:last-child ._sidebar-item_vitro-active_7p5iOhY {
     margin-right: 4px;
     white-space: nowrap;
     overflow: hidden;
+}
+
+._input_vitro-search-value_1ZbcNTJ span {
+    overflow: hidden;
     text-overflow: ellipsis;
 }
 
@@ -5141,6 +5148,11 @@ ul > li:last-child > ul > li:last-child ._sidebar-item_vitro-active_7p5iOhY {
     align-self: baseline;
     margin-right: 16px;
     margin-left: auto;
+    max-width: 376px;
+}
+
+._search_vitro-search_QkJksC_._search_vitro-active_1HhQOCR {
+    width: 376px;
 }
 
 ._search_vitro-settings-dialog_1_c5bIg {

package/dist/index.js

@@ -64882,51 +64882,14 @@ var styles$N = {"vitro-control":"_input_vitro-control__btu7j_","vitro-active":"_
 
 var NEW_LINE$1 = '\n';
 var Input$1 = function Input(props) {
-  var _useState = React.useState(false),
-    isMobileView = _useState[0],
-    setIsMobileView = _useState[1];
-  var _useState2 = React.useState(Boolean(props.isSettingsActive)),
-    isToggled = _useState2[0],
-    setIsToggled = _useState2[1];
-  var _useState3 = React.useState(false),
-    isActive = _useState3[0],
-    setIsActive = _useState3[1];
-  var _useState4 = React.useState(CTRL.EMPTY),
-    state = _useState4[0],
-    setState = _useState4[1];
+  var _useState = React.useState(CTRL.EMPTY),
+    state = _useState[0],
+    setState = _useState[1];
   var localeService = inversifyReact.useInjection(SERVICE.LOCALE);
   var inputRef = React.useRef(null);
-  React.useEffect(function () {
-    window.addEventListener(exports.EVENT.RESIZE, handleResize);
-    handleResize();
-    return function () {
-      window.removeEventListener(exports.EVENT.RESIZE, handleResize);
-    };
-  }, []);
-  React.useEffect(function () {
-    handleResize();
-  }, [window.innerWidth]);
-  React.useEffect(function () {
-    if (isMobileView && props.valueList && props.valueList.length) {
-      setIsToggled(true);
-    }
-  }, [isMobileView, props.valueList]);
-  React.useEffect(function () {
-    var _props$valueList;
-    if (state || props.textValue || (_props$valueList = props.valueList) !== null && _props$valueList !== void 0 && _props$valueList.length) {
-      setIsActive(true);
-    }
-  }, [state, props.textValue, props.valueList]);
-  React.useEffect(function () {
-    setIsToggled(Boolean(props.isSettingsActive));
-  }, [props.isSettingsActive]);
-  var handleResize = function handleResize() {
-    window.innerWidth < 800 ? setIsMobileView(true) : setIsMobileView(false);
-  };
   var onSettingsClick = function onSettingsClick() {
-    setIsToggled(!isToggled);
     if (props.onSettingsClick) {
-      props.onSettingsClick(!isToggled);
+      props.onSettingsClick();
     }
   };
   var onKeyDown = function onKeyDown(e) {
@@ -64943,7 +64906,6 @@ var Input$1 = function Input(props) {
     }
   };
   var onCancel = function onCancel() {
-    setIsActive(false);
     if (inputRef.current) {
       inputRef.current.value = CTRL.EMPTY;
     }
@@ -64955,12 +64917,21 @@ var Input$1 = function Input(props) {
     }
   };
   var onBlur = function onBlur() {
+    if (props.onBlur) {
+      props.onBlur();
+    }
     setState(CTRL.EMPTY);
     onSubmit();
   };
+  var onFocus = function onFocus() {
+    setState(styles$N['vitro-focus']);
+    if (props.onFocus) {
+      props.onFocus();
+    }
+  };
   var getClassName = function getClassName() {
     var classList = [styles$N['vitro-control'], props.className || CTRL.EMPTY, state];
-    if (isActive) {
+    if (props.isActive) {
       classList.push(styles$N['vitro-active']);
     }
     return classList.join(CTRL.SPACE);
@@ -64979,34 +64950,53 @@ var Input$1 = function Input(props) {
     var text = [value.name, valueArray.join(CTRL.COMMA + CTRL.SPACE)].join(CTRL.COLON + CTRL.SPACE);
     return text;
   };
+  var onRemoveValue = function onRemoveValue(valueList) {
+    if (props.onRemoveValue) {
+      var newList = props.valueList;
+      var _loop = function _loop() {
+        var value = _step.value;
+        newList = newList.filter(function (x) {
+          return x.internalName !== value.internalName;
+        });
+      };
+      for (var _iterator = _createForOfIteratorHelperLoose(valueList), _step; !(_step = _iterator()).done;) {
+        _loop();
+      }
+      props.onRemoveValue(newList);
+    }
+  };
   var getTextValueList = function getTextValueList(valueList) {
     var list = valueList.map(function (x) {
       return getTextValue(x);
     });
-    list.shift();
     return list.join(NEW_LINE$1);
   };
   var getSelectedValueList = function getSelectedValueList(valueList) {
     var firstValue = valueList[0];
+    var list = valueList.slice(1);
     return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
       className: styles$N['vitro-search-value']
-    }, getTextValue(firstValue), React__default.createElement("button", {
-      onClick: onCancel,
+    }, React__default.createElement("span", null, getTextValue(firstValue)), React__default.createElement("button", {
+      onClick: function onClick() {
+        return onRemoveValue([firstValue]);
+      },
       className: styles$N['vitro-button-cancel']
-    })), valueList.length && valueList.length > 1 ? React__default.createElement(Tooltip$1, {
-      text: getTextValueList(valueList),
+    })), list.length >= 1 ? React__default.createElement(Tooltip$1, {
+      text: getTextValueList(list),
       placement: PLACEMENT$1.BOTTOM
     }, React__default.createElement("div", {
       className: styles$N['vitro-search-value']
     }, localeService.create(LOCALE$8.INPUT_MORE, {
-      count: valueList.length - 1
+      count: list.length
     }), React__default.createElement("button", {
-      onClick: onCancel,
+      onClick: function onClick() {
+        return onRemoveValue(list);
+      },
       className: styles$N['vitro-button-cancel']
     }))) : null);
   };
   var onSearchClick = function onSearchClick() {
-    if (isMobileView) {
+    if (props.isMobileView) {
       onSettingsClick();
     } else {
       onSubmit();
@@ -65015,23 +65005,21 @@ var Input$1 = function Input(props) {
   return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
     className: getClassName()
   }, React__default.createElement("button", {
-    className: styles$N['vitro-button-search'] + (isToggled ? CTRL.SPACE + styles$N['vitro-active'] : CTRL.EMPTY),
+    className: styles$N['vitro-button-search'] + (props.isSettingsActive ? CTRL.SPACE + styles$N['vitro-active'] : CTRL.EMPTY),
     onClick: onSearchClick
-  }), !isMobileView && React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
+  }), !props.isMobileView && React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
     className: styles$N['vitro-search-value-list']
-  }, props.valueList && props.valueList.length ? getSelectedValueList(props.valueList) : React__default.createElement("input", {
+  }, props.valueList.length ? getSelectedValueList(props.valueList) : React__default.createElement("input", {
     type: 'text',
     ref: inputRef,
     onKeyDown: onKeyDown,
     onChange: onChange,
-    onFocus: function onFocus() {
-      return setState(styles$N['vitro-focus']);
-    },
+    onFocus: onFocus,
     onBlur: onBlur,
-    placeholder: !isActive ? props.placeholder : CTRL.EMPTY
-  })), isActive && React__default.createElement(React__default.Fragment, null, props.isShowSettings && React__default.createElement("button", {
+    placeholder: !props.isActive ? props.placeholder : CTRL.EMPTY
+  })), props.isActive && React__default.createElement(React__default.Fragment, null, props.isShowSettings && React__default.createElement("button", {
     onClick: onSettingsClick,
-    className: styles$N['vitro-button-settings'] + (isToggled ? CTRL.SPACE + styles$N['vitro-active'] : CTRL.EMPTY)
+    className: styles$N['vitro-button-settings'] + (props.isSettingsActive ? CTRL.SPACE + styles$N['vitro-active'] : CTRL.EMPTY)
   }), React__default.createElement("button", {
     onClick: onCancel,
     className: styles$N['vitro-button-cancel']
@@ -65221,7 +65209,7 @@ var FieldIterator = React.forwardRef(function (props, ref) {
   })));
 });
 
-var styles$O = {"vitro-search":"_search_vitro-search_QkJksC_","vitro-settings-dialog":"_search_vitro-settings-dialog_1_c5bIg","vitro-filter":"_search_vitro-filter_2n-Y-mS","vitro-add-field":"_search_vitro-add-field_2hHt1Z2","vitro-add-field-button":"_search_vitro-add-field-button_30hdXYn","vitro-add-field-dialog":"_search_vitro-add-field-dialog_3gC92SF","vitro-footer":"_search_vitro-footer_1-ya4xk","vitro-button-cancel":"_search_vitro-button-cancel_1M8UkMM"};
+var styles$O = {"vitro-search":"_search_vitro-search_QkJksC_","vitro-active":"_search_vitro-active_1HhQOCR","vitro-settings-dialog":"_search_vitro-settings-dialog_1_c5bIg","vitro-filter":"_search_vitro-filter_2n-Y-mS","vitro-add-field":"_search_vitro-add-field_2hHt1Z2","vitro-add-field-button":"_search_vitro-add-field-button_30hdXYn","vitro-add-field-dialog":"_search_vitro-add-field-dialog_3gC92SF","vitro-footer":"_search_vitro-footer_1-ya4xk","vitro-button-cancel":"_search_vitro-button-cancel_1M8UkMM"};
 
 var Filter = function Filter(props) {
   var _useState = React.useState(null),
@@ -65348,10 +65336,13 @@ var CheckboxList = function CheckboxList(props) {
   return React__default.createElement("div", {
     className: styles$P['vitro-checkbox-list']
   }, React__default.createElement(Input$1, {
+    valueList: [],
     onCancel: onSearchCancel,
     onChange: onInputChange,
     onSubmit: onInputChange,
-    className: styles$P['vitro-control']
+    isActive: false,
+    className: styles$P['vitro-control'],
+    isMobileView: false
   }), React__default.createElement(ScrollBar, null, isShowSearchResult ? searchItemList.length ? searchItemList.map(function (item) {
     return getCheckbox(item);
   }) : React__default.createElement("span", null, localeService.create(LOCALE$8.EMPTY_PLACEHOLDER)) : itemList.map(function (item) {
@@ -65363,31 +65354,40 @@ var ESC_KEY_CODE$1 = 27;
 var CONDITION_CONTAINS = 11;
 var Search = function Search(props) {
   var _useState = React.useState(false),
-    isShowDialog = _useState[0],
-    setIsShowDialog = _useState[1];
+    isMobileView = _useState[0],
+    setIsMobileView = _useState[1];
   var _useState2 = React.useState(false),
-    isShowAddFieldDialog = _useState2[0],
-    setIsShowAddFieldDialog = _useState2[1];
-  var _useState3 = React.useState([]),
-    filterFieldList = _useState3[0],
-    setFilterFieldList = _useState3[1];
+    isShowDialog = _useState2[0],
+    setIsShowDialog = _useState2[1];
+  var _useState3 = React.useState(false),
+    isShowAddFieldDialog = _useState3[0],
+    setIsShowAddFieldDialog = _useState3[1];
   var _useState4 = React.useState([]),
-    searchCriterionList = _useState4[0],
-    setSearchCriterionList = _useState4[1];
+    filterFieldList = _useState4[0],
+    setFilterFieldList = _useState4[1];
   var _useState5 = React.useState([]),
-    selectedSearchCriterionList = _useState5[0],
-    setSelectedSearchCriterionList = _useState5[1];
+    searchCriterionList = _useState5[0],
+    setSearchCriterionList = _useState5[1];
   var _useState6 = React.useState([]),
-    checkboxFieldList = _useState6[0],
-    setCheckboxFieldList = _useState6[1];
+    selectedSearchCriterionList = _useState6[0],
+    setSelectedSearchCriterionList = _useState6[1];
+  var _useState7 = React.useState([]),
+    checkboxFieldList = _useState7[0],
+    setCheckboxFieldList = _useState7[1];
+  var _useState8 = React.useState(CTRL.EMPTY),
+    state = _useState8[0],
+    setState = _useState8[1];
   var addFieldDialogRef = React.useRef(null);
   var searchRef = React.useRef(null);
   React.useEffect(function () {
     window.addEventListener(exports.EVENT.MOUSEDOWN, onBlurAddFieldDialog);
     window.addEventListener(exports.EVENT.KEYDOWN, onEscClick, false);
+    window.addEventListener(exports.EVENT.RESIZE, handleResize);
+    handleResize();
     return function () {
       window.removeEventListener(exports.EVENT.MOUSEDOWN, onBlurAddFieldDialog);
       window.removeEventListener(exports.EVENT.KEYDOWN, onEscClick, false);
+      window.removeEventListener(exports.EVENT.RESIZE, handleResize);
     };
   });
   React.useEffect(function () {
@@ -65409,34 +65409,50 @@ var Search = function Search(props) {
     }
     setCheckboxFieldList(checkboxList);
   }, [props.visibleFieldList]);
-  var onSettingsClick = function onSettingsClick(active) {
-    setIsShowDialog(active);
+  React.useEffect(function () {
+    if (filterFieldList.length >= props.maxFieldCount) {
+      setIsShowAddFieldDialog(false);
+    }
+  }, [filterFieldList]);
+  React.useEffect(function () {
+    handleResize();
+  }, [window.innerWidth]);
+  React.useEffect(function () {
+    if (selectedSearchCriterionList.length) {
+      setState(styles$O['vitro-active']);
+    }
+  }, [selectedSearchCriterionList]);
+  var handleResize = function handleResize() {
+    window.innerWidth < 800 ? setIsMobileView(true) : setIsMobileView(false);
+  };
+  var onSettingsClick = function onSettingsClick() {
+    setIsShowDialog(!isShowDialog);
   };
   var onAddField = function onAddField() {
     setIsShowAddFieldDialog(!isShowAddFieldDialog);
   };
   var onFieldListChange = function onFieldListChange(selectedFieldIdList) {
+    var fieldList = [];
     var _loop = function _loop() {
       var id = _step.value;
-      var field = filterFieldList.find(function (x) {
+      var field = props.fieldList.find(function (x) {
         return x.id === id;
       });
-      if (!field) {
-        var newField = props.fieldList.find(function (x) {
-          return x.id === id;
-        });
-        setFilterFieldList(function (prevState) {
-          return [].concat(prevState, [newField]);
-        });
+      if (field) {
+        fieldList.push(field);
       }
     };
     for (var _iterator = _createForOfIteratorHelperLoose(selectedFieldIdList), _step; !(_step = _iterator()).done;) {
       _loop();
     }
+    setFilterFieldList(fieldList);
   };
   var closeSettings = function closeSettings() {
     setIsShowAddFieldDialog(false);
     setIsShowDialog(false);
+    if (!selectedSearchCriterionList.length) {
+      setState(CTRL.EMPTY);
+    }
   };
   var onDeleteField = function onDeleteField(id) {
     setFilterFieldList(function (prevState) {
@@ -65466,9 +65482,10 @@ var Search = function Search(props) {
       props.onFilterChange(criterionList);
     }
   };
-  var onSubmit = function onSubmit() {
-    props.onSubmit(searchCriterionList);
-    var selectedList = searchCriterionList.map(function (x) {
+  var onSubmit = function onSubmit(value, criterionList) {
+    var list = criterionList ? criterionList : searchCriterionList;
+    props.onSubmit(list);
+    var selectedList = list.map(function (x) {
       var fieldName = props.fieldList.find(function (field) {
         return field.internalName === x.internalName;
       }).name;
@@ -65483,6 +65500,7 @@ var Search = function Search(props) {
     setSearchCriterionList([]);
     setSelectedSearchCriterionList([]);
     closeSettings();
+    setState(CTRL.EMPTY);
     props.onCancel();
   };
   var onInputChange = function onInputChange(value) {
@@ -65504,17 +65522,28 @@ var Search = function Search(props) {
       setIsShowAddFieldDialog(false);
     }
   };
+  var onFocusInput = function onFocusInput() {
+    setState(styles$O['vitro-active']);
+  };
+  var onRemoveValue = function onRemoveValue(valueList) {
+    setSearchCriterionList(valueList);
+    onSubmit(CTRL.EMPTY, valueList);
+  };
   return React__default.createElement("div", {
     ref: searchRef,
-    className: styles$O['vitro-search']
+    className: styles$O['vitro-search'] + CTRL.SPACE + state
   }, React__default.createElement(Input$1, {
     valueList: selectedSearchCriterionList,
     onSettingsClick: onSettingsClick,
     onCancel: onCancel,
     onSubmit: onSubmit,
+    onRemoveValue: onRemoveValue,
     onChange: onInputChange,
     placeholder: props.inputPlaceholder,
     isSettingsActive: isShowDialog,
+    onFocus: onFocusInput,
+    isActive: state || isShowDialog ? true : false,
+    isMobileView: isMobileView,
     isShowSettings: true
   }), isShowDialog && React__default.createElement("div", {
     className: styles$O['vitro-settings-dialog']