@vitrosoftware/common-ui-ts 1.1.50 → 1.1.52

package/dist/index.js

@@ -195,6 +195,8 @@ CTRL.QUOTATION_MARK = '\'';
 CTRL.ZERO = '0';
 CTRL.ASTERISK = '*';
 
+var styles = {"vitro-breadcrumbs":"_breadcrumbs_vitro-breadcrumbs_3r4NcQY","vitro-breadcrumbs-list-wrap":"_breadcrumbs_vitro-breadcrumbs-list-wrap_1_JBrw0","vitro-breadcrumbs-list":"_breadcrumbs_vitro-breadcrumbs-list_1SNtgtJ","vitro-separator":"_breadcrumbs_vitro-separator_3RKZZBc","vitro-breadcrumbs-button":"_breadcrumbs_vitro-breadcrumbs-button_3fazq3c","vitro-root":"_breadcrumbs_vitro-root_1S5-6AY","vitro-drop-down-list":"_breadcrumbs_vitro-drop-down-list_2PhrR2a"};
+
 var Item = function Item(props) {
   var onClick = function onClick() {
     if (props.onClick) {
@@ -202,12 +204,15 @@ var Item = function Item(props) {
     }
   };
   return React__default.createElement("li", {
-    onClick: onClick,
     className: props.className || CTRL.EMPTY
-  }, props.text);
+  }, React__default.createElement("div", {
+    onClick: onClick
+  }, props.children), props.isShowSeparator && React__default.createElement("div", {
+    className: styles['vitro-separator']
+  }));
 };
 
-var styles = {"vitro-scrollbar-content":"_scrollbar_vitro-scrollbar-content_3HXSt5u"};
+var styles$1 = {"vitro-scrollbar-content":"_scrollbar_vitro-scrollbar-content_3HXSt5u"};
 
 var w = window;
 var ScrollBar = function ScrollBar(props) {
@@ -247,7 +252,7 @@ var ScrollBar = function ScrollBar(props) {
   return React__default.createElement("div", {
     ref: ref
   }, React__default.createElement("div", {
-    className: styles['vitro-scrollbar-content']
+    className: styles$1['vitro-scrollbar-content']
   }, element && props.children));
 };
 
@@ -265,8 +270,6 @@ var ScrollBar = function ScrollBar(props) {
   EVENT["CONTEXTMENU"] = "contextmenu";
 })(exports.EVENT || (exports.EVENT = {}));
 
-var styles$1 = {"vitro-breadcrumbs":"_breadcrumbs_vitro-breadcrumbs_3r4NcQY","vitro-breadcrumbs-list-wrap":"_breadcrumbs_vitro-breadcrumbs-list-wrap_1_JBrw0","vitro-breadcrumbs-list":"_breadcrumbs_vitro-breadcrumbs-list_1SNtgtJ","vitro-breadcrumbs-button":"_breadcrumbs_vitro-breadcrumbs-button_3fazq3c","vitro-root":"_breadcrumbs_vitro-root_1S5-6AY","vitro-drop-down-list":"_breadcrumbs_vitro-drop-down-list_2PhrR2a"};
-
 var Breadcrumbs = function Breadcrumbs(props) {
   var _useState = React.useState([]),
     displayItemList = _useState[0],
@@ -369,7 +372,7 @@ var Breadcrumbs = function Breadcrumbs(props) {
     setWindowWidth(window.innerWidth);
   };
   var clickOutside = function clickOutside(e) {
-    if (menuRef.current && !menuRef.current.contains(e.target) && e.target.className !== styles$1['vitro-breadcrumbs-button']) {
+    if (menuRef.current && !menuRef.current.contains(e.target) && e.target.className !== styles['vitro-breadcrumbs-button']) {
       setDropDown(false);
     }
   };
@@ -380,43 +383,45 @@ var Breadcrumbs = function Breadcrumbs(props) {
   var showDropdownMenu = function showDropdownMenu() {
     setDropDown(!dropDown);
   };
-  var titleClassName = styles$1['vitro-site-name'] + CTRL.SPACE + (displayItemList.length ? styles$1['opened'] : styles$1['closed']);
+  var titleClassName = styles['vitro-site-name'] + CTRL.SPACE + (displayItemList.length ? styles['opened'] : styles['closed']);
   return React__default.createElement("div", {
-    className: styles$1['vitro-breadcrumbs']
+    className: styles['vitro-breadcrumbs']
   }, props.text ? React__default.createElement("h2", {
     className: titleClassName
   }, props.text) : null, React__default.createElement("div", {
-    className: styles$1['vitro-breadcrumbs-list-wrap']
+    className: styles['vitro-breadcrumbs-list-wrap']
   }, React__default.createElement("ul", {
-    className: styles$1['vitro-breadcrumbs-list']
-  }, displayItemList.map(function (item) {
+    className: styles['vitro-breadcrumbs-list']
+  }, displayItemList.map(function (item, i) {
     return React__default.createElement(Item, {
-      text: item.text,
       id: item.id,
       onClick: function onClick() {
         return onItemClick(item);
-      }
-    });
+      },
+      isShowSeparator: i !== displayItemList.length - 1
+    }, item.text);
   })), dropdownItemList.length ? React__default.createElement("div", {
     onClick: showDropdownMenu,
-    className: styles$1['vitro-breadcrumbs-button']
+    className: styles['vitro-breadcrumbs-button']
   }) : null, !props.wrapRoot && rootItem ? React__default.createElement(Item, {
     id: rootItem.id,
     onClick: function onClick() {
       return onItemClick(rootItem);
     },
-    className: styles$1['vitro-root']
-  }) : null), dropDown && dropdownItemList.length > 0 && React__default.createElement("div", {
-    className: styles$1['vitro-drop-down-list'],
+    isShowSeparator: true
+  }, React__default.createElement("div", {
+    className: styles['vitro-root']
+  })) : null), dropDown && dropdownItemList.length > 0 && React__default.createElement("div", {
+    className: styles['vitro-drop-down-list'],
     ref: menuRef
-  }, React__default.createElement("ul", null, React__default.createElement(ScrollBar, null, dropdownItemList.map(function (item) {
+  }, React__default.createElement("ul", null, React__default.createElement(ScrollBar, null, dropdownItemList.map(function (item, i) {
     return React__default.createElement(Item, {
-      text: item.text,
       id: item.id,
       onClick: function onClick() {
         return onItemClick(item);
-      }
-    });
+      },
+      isShowSeparator: false
+    }, item.text);
   })))));
 };
 
@@ -60591,7 +60596,7 @@ var REGEXP;
 var styles$f = {"vitro-control":"_input_vitro-control_1DmPFkF","vitro-focus":"_input_vitro-focus_1txynr8","vitro-label":"_input_vitro-label_2XBESiY","vitro-read-only":"_input_vitro-read-only_3f-cBbK","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 PX_UNIT$2 = 'px';
-var Input = function Input(props) {
+var Input = React.forwardRef(function (props, ref) {
   var control;
   var localeSeparator = 1.1.toLocaleString()[1];
   var secondLocaleSeparator = localeSeparator === CTRL.COMMA ? CTRL.DOT : CTRL.COMMA;
@@ -60608,7 +60613,7 @@ var Input = function Input(props) {
   var _useState4 = React.useState(CTRL.EMPTY),
     state = _useState4[0],
     setState = _useState4[1];
-  var ref = React.useRef(null);
+  var inputRef = React.useRef(null);
   React.useEffect(function () {
     if (props.value) {
       updateValue(props.value, true);
@@ -60628,6 +60633,15 @@ var Input = function Input(props) {
     if (props.maxHeight) jsonStyle.maxHeight = props.maxHeight + PX_UNIT$2;
     setStyle(jsonStyle);
   }, [props.height, props.minHeight, props.maxHeight]);
+  React.useImperativeHandle(ref, function () {
+    return {
+      focus: function focus() {
+        if (inputRef.current) {
+          inputRef.current.focus();
+        }
+      }
+    };
+  });
   var updateValue = function updateValue(value, isInit) {
     var newValue = sourceValue;
     if (!props.number) {
@@ -60682,15 +60696,24 @@ var Input = function Input(props) {
   var copyValue = function copyValue() {
     navigator.clipboard.writeText(inputValue);
   };
+  var onKeyDown = function onKeyDown(e) {
+    if (e.keyCode === 13 && !e.shiftKey) {
+      e.preventDefault();
+      e.target.blur();
+    }
+    if (props.onKeyDown) {
+      props.onKeyDown(e);
+    }
+  };
   var remainHeight = function remainHeight() {
-    if (ref && ref.current && props.onChangeSize) {
-      props.onChangeSize(ref.current.offsetHeight);
+    if (inputRef && inputRef.current && props.onChangeSize) {
+      props.onChangeSize(inputRef.current.offsetHeight);
     }
     window.removeEventListener(exports.EVENT.MOUSEUP, remainHeight);
   };
   if (props.isMultiline) {
     control = React__default.createElement("textarea", {
-      ref: ref,
+      ref: inputRef,
       readOnly: props.isReadOnly,
       disabled: props.isDisabled,
       name: props.name,
@@ -60699,7 +60722,7 @@ var Input = function Input(props) {
       required: props.isRequired,
       value: inputValue ? inputValue : CTRL.EMPTY,
       onKeyPress: props.onKeyPress,
-      onKeyDown: props.onKeyDown,
+      onKeyDown: onKeyDown,
       onChange: onChange,
       onMouseDown: onResize,
       onBlur: onBlur,
@@ -60708,7 +60731,7 @@ var Input = function Input(props) {
     });
   } else {
     var input = React__default.createElement("input", {
-      ref: ref,
+      ref: inputRef,
       readOnly: props.isReadOnly,
       disabled: props.isDisabled,
       type: props.type,
@@ -60719,7 +60742,7 @@ var Input = function Input(props) {
       required: props.isRequired,
       onBlur: onBlur,
       onKeyPress: props.onKeyPress,
-      onKeyDown: props.onKeyDown,
+      onKeyDown: onKeyDown,
       onFocus: onFocus,
       autoComplete: props.isAutoComplete ? AUTOCOMPLETE.ON : AUTOCOMPLETE.OFF
     });
@@ -60755,7 +60778,7 @@ var Input = function Input(props) {
   }) : null, props.children, props.errorMessage && React__default.createElement("span", {
     className: styles$f['vitro-error-text']
   }, props.errorMessage));
-};
+});
 
 var styles$g = {"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"};
 
@@ -61259,12 +61282,12 @@ var LABEL_POSITION;
 var styles$m = {"vitro-control":"_date-picker_vitro-control_2AYXegb","vitro-button-copy":"_date-picker_vitro-button-copy_1cGY1Uu","vitro-control-container":"_date-picker_vitro-control-container_2CVwecs","vitro-focus":"_date-picker_vitro-focus_2cJKcKr","vitro-label":"_date-picker_vitro-label_2jh9qxb","vitro-read-only":"_date-picker_vitro-read-only_2NZoMN5","vitro-error":"_date-picker_vitro-error_3DkgZiN","vitro-left-label":"_date-picker_vitro-left-label_ZFhZFS9","vitro-error-text":"_date-picker_vitro-error-text_15CdrRj"};
 
 var $$3 = window.$;
-var DatePicker = function DatePicker(props) {
+var DatePicker = React.forwardRef(function (props, ref) {
   var _useState = React.useState(CTRL.EMPTY),
     state = _useState[0],
     setState = _useState[1];
   var container = React.useRef(null);
-  var ref = React.useRef(null);
+  var inputRef = React.useRef(null);
   var componentName = 'kendoDatePicker';
   React.useEffect(function () {
     var config = {
@@ -61281,7 +61304,7 @@ var DatePicker = function DatePicker(props) {
         return props.isWorkDay(date);
       },
       open: function open(e) {
-        onFocus();
+        onFocus(e);
         if (props.onOpen) {
           props.onOpen(e, $$3(container.current));
         }
@@ -61292,7 +61315,7 @@ var DatePicker = function DatePicker(props) {
         }
       },
       close: function close(e) {
-        onBlur();
+        onBlur(e);
         if (props.onClose) {
           props.onClose(e.sender.value(), props.name);
         }
@@ -61310,32 +61333,89 @@ var DatePicker = function DatePicker(props) {
     if (config.value) {
       config.value = new Date(config.value);
     }
-    $$3(ref.current).kendoDatePicker(config);
-    var picker = $$3(ref.current).data(componentName);
+    $$3(inputRef.current).kendoDatePicker(config);
+    var picker = $$3(inputRef.current).data(componentName);
     picker.enable(!props.isDisabled);
     picker.readonly(props.isReadOnly === true);
-  }, [ref]);
+  }, [inputRef]);
   React.useEffect(function () {
     if (props.value) {
-      $$3(ref.current).data(componentName).value(new Date(props.value));
+      $$3(inputRef.current).data(componentName).value(new Date(props.value));
     } else {
-      $$3(ref.current).data(componentName).value(props.value);
+      $$3(inputRef.current).data(componentName).value(null);
+      $$3(inputRef.current).data(componentName).setOptions({
+        dateInput: true
+      });
     }
   }, [props.value]);
   React.useEffect(function () {
-    if (props.minValue) $$3(ref.current).data(componentName).min(props.minValue);
+    $$3(inputRef.current).data(componentName).setOptions({
+      change: function change(e) {
+        if (props.onChange) {
+          props.onChange(e.sender.value(), props.name);
+        }
+      }
+    });
+  }, [props.onChange]);
+  React.useEffect(function () {
+    $$3(inputRef.current).data(componentName).setOptions({
+      disableDates: function disableDates(date) {
+        if (!props.isWorkDay) {
+          return false;
+        }
+        return props.isWorkDay(date);
+      }
+    });
+  }, [props.isWorkDay]);
+  React.useEffect(function () {
+    $$3(inputRef.current).data(componentName).setOptions({
+      open: function open(e) {
+        onFocus(e);
+        if (props.onOpen) {
+          props.onOpen(e, $$3(container.current));
+        }
+      }
+    });
+  }, [props.onOpen]);
+  React.useEffect(function () {
+    $$3(inputRef.current).data(componentName).setOptions({
+      close: function close(e) {
+        onBlur(e);
+        if (props.onClose) {
+          props.onClose(e.sender.value(), props.name);
+        }
+      }
+    });
+  }, [props.onClose]);
+  React.useEffect(function () {
+    if (props.minValue) $$3(inputRef.current).data(componentName).min(props.minValue);
   }, [props.minValue]);
   React.useEffect(function () {
-    if (props.maxValue) $$3(ref.current).data(componentName).max(props.maxValue);
+    if (props.maxValue) $$3(inputRef.current).data(componentName).max(props.maxValue);
   }, [props.maxValue]);
   React.useEffect(function () {
     props.errorMessage ? setState(styles$m['vitro-error']) : setState(CTRL.EMPTY);
   }, [props.errorMessage]);
-  var onFocus = function onFocus() {
+  React.useImperativeHandle(ref, function () {
+    return {
+      focus: function focus() {
+        if (inputRef.current) {
+          inputRef.current.focus();
+        }
+      }
+    };
+  });
+  var onFocus = function onFocus(e) {
     setState(styles$m['vitro-focus']);
+    if (props.onFocus) {
+      props.onFocus(e);
+    }
   };
-  var onBlur = function onBlur() {
+  var onBlur = function onBlur(e) {
     setState(props.errorMessage ? styles$m['vitro-error'] : styles$m[CTRL.EMPTY]);
+    if (props.onBlur) {
+      props.onBlur(e);
+    }
   };
   var copyValue = function copyValue() {
     navigator.clipboard.writeText("" + props.value);
@@ -61359,7 +61439,7 @@ var DatePicker = function DatePicker(props) {
     width: props.labelWidth,
     className: styles$m['vitro-label']
   }), React__default.createElement("input", {
-    ref: ref,
+    ref: inputRef,
     placeholder: props.placeholder,
     onFocus: onFocus,
     onBlur: onBlur
@@ -61372,7 +61452,7 @@ var DatePicker = function DatePicker(props) {
   }), props.errorMessage && React__default.createElement("span", {
     className: styles$m['vitro-error-text']
   }, props.errorMessage));
-};
+});
 
 var FORMAT;
 (function (FORMAT) {
@@ -61394,15 +61474,15 @@ var COMPONENT_TYPE;
 var styles$n = {"vitro-control":"_time-picker_vitro-control_1sx07It","vitro-button-copy":"_time-picker_vitro-button-copy_QZg3bTW","vitro-control-container":"_time-picker_vitro-control-container_3ys3rMN","vitro-focus":"_time-picker_vitro-focus_wmhPjvE","vitro-label":"_time-picker_vitro-label_2b97aCy","vitro-error":"_time-picker_vitro-error_2ZmK0I5","vitro-read-only":"_time-picker_vitro-read-only_NlE18Zm","vitro-left-label":"_time-picker_vitro-left-label_3NRmFYH","vitro-error-text":"_time-picker_vitro-error-text_2BNoBKW"};
 
 var $$4 = window.$;
-var TimePicker = function TimePicker(props) {
+var TimePicker = React.forwardRef(function (props, ref) {
   var _useState = React.useState(CTRL.EMPTY),
     state = _useState[0],
     setState = _useState[1];
   var container = React.useRef(null);
-  var ref = React.useRef(null);
+  var inputRef = React.useRef(null);
   var componentName = 'kendoTimePicker';
   React.useEffect(function () {
-    $$4(ref.current).kendoTimePicker({
+    $$4(inputRef.current).kendoTimePicker({
       format: props.format || FORMAT.HH_MM,
       componentType: COMPONENT_TYPE.MODERN,
       culture: props.culture || CULTURE$1.RU,
@@ -61414,13 +61494,13 @@ var TimePicker = function TimePicker(props) {
         }
       },
       open: function open(e) {
-        onFocus();
+        onFocus(e);
         if (props.onOpen) {
           props.onOpen(e, $$4(container.current));
         }
       },
       close: function close(e) {
-        onBlur();
+        onBlur(e);
         if (props.onClose) {
           props.onClose(e, $$4(container.current));
         }
@@ -61429,18 +61509,33 @@ var TimePicker = function TimePicker(props) {
         appendTo: $$4(container.current)
       }
     });
-    var picker = $$4(ref.current).data(componentName);
+    var picker = $$4(inputRef.current).data(componentName);
     picker.enable(!props.isDisabled);
     picker.readonly(props.isReadOnly === true);
-  }, [ref]);
+  }, [inputRef]);
   React.useEffect(function () {
-    $$4(ref.current).data(componentName).value(props.value);
+    $$4(inputRef.current).data(componentName).value(props.value);
   }, [props.value]);
-  var onFocus = function onFocus() {
+  React.useImperativeHandle(ref, function () {
+    return {
+      focus: function focus() {
+        if (inputRef.current) {
+          inputRef.current.focus();
+        }
+      }
+    };
+  });
+  var onFocus = function onFocus(e) {
     setState(styles$n['vitro-focus']);
+    if (props.onFocus) {
+      props.onFocus(e);
+    }
   };
-  var onBlur = function onBlur() {
+  var onBlur = function onBlur(e) {
     setState(props.errorMessage ? styles$n['vitro-error'] : styles$n[CTRL.EMPTY]);
+    if (props.onBlur) {
+      props.onBlur(e);
+    }
   };
   var copyValue = function copyValue() {
     navigator.clipboard.writeText("" + props.value);
@@ -61464,7 +61559,7 @@ var TimePicker = function TimePicker(props) {
     width: props.labelWidth,
     className: styles$n['vitro-label']
   }), React__default.createElement("input", {
-    ref: ref,
+    ref: inputRef,
     placeholder: props.placeholder,
     onFocus: onFocus,
     onBlur: onBlur
@@ -61477,7 +61572,7 @@ var TimePicker = function TimePicker(props) {
   }), props.errorMessage && React__default.createElement("span", {
     className: styles$n['vitro-error-text']
   }, props.errorMessage));
-};
+});
 
 var styles$o = {"vitro-selected-item-multi":"_lookup-picker-selected-item_vitro-selected-item-multi_bzL7ugZ","vitro-selected-item":"_lookup-picker-selected-item_vitro-selected-item_hw-euth","vitro-button-close":"_lookup-picker-selected-item_vitro-button-close_1SRnr_0"};
 
@@ -61570,7 +61665,7 @@ var LOCALE$4;
 var styles$q = {"vitro-lookup-picker":"_lookup-picker_vitro-lookup-picker_1aXYQEG","vitro-content":"_lookup-picker_vitro-content_37L0slb","vitro-focus":"_lookup-picker_vitro-focus_2UGpxXD","vitro-label":"_lookup-picker_vitro-label_2QoJkUz","vitro-read-only":"_lookup-picker_vitro-read-only_32NOdGB","vitro-error":"_lookup-picker_vitro-error_dF7iopC","vitro-error-text":"_lookup-picker_vitro-error-text_273lqvD","vitro-button-copy":"_lookup-picker_vitro-button-copy_2UIHHZD","vitro-right":"_lookup-picker_vitro-right_1XFsL1w","vitro-button-close":"_lookup-picker_vitro-button-close_3_Qndrj","vitro-button-collapse-up":"_lookup-picker_vitro-button-collapse-up_3i0OJub","vitro-button-collapse-bottom":"_lookup-picker_vitro-button-collapse-bottom_3o0Pl83"};
 
 var $$5 = window.$;
-var LookupPicker = function LookupPicker(props) {
+var LookupPicker = React.forwardRef(function (props, ref) {
   var createDefaultSelectedValueList = props.selectedValueList ? props.selectedValueList : props.selectedValue ? [props.selectedValue] : [];
   var _useState = React.useState(true),
     pending = _useState[0],
@@ -61639,6 +61734,15 @@ var LookupPicker = function LookupPicker(props) {
       setSelectedValueList([]);
     }
   }, [props.selectedValue]);
+  React.useImperativeHandle(ref, function () {
+    return {
+      focus: function focus() {
+        if (inputRef.current) {
+          inputRef.current.focus();
+        }
+      }
+    };
+  });
   var onInputValueUpdated = function onInputValueUpdated() {
     if ((inputValue || inputValue === CTRL.EMPTY) && inputValue.length >= props.filterMinLength) {
       if (props.valueList) {
@@ -61760,9 +61864,12 @@ var LookupPicker = function LookupPicker(props) {
       }
     });
   };
-  var onFocus = function onFocus() {
+  var onFocus = function onFocus(e) {
     setState(styles$q['vitro-focus']);
     setValueListVisible(true);
+    if (props.onFocus) {
+      props.onFocus(e);
+    }
   };
   var onCollapseButtonClick = function onCollapseButtonClick(valueListVisible) {
     setValueListVisible(!valueListVisible);
@@ -61843,7 +61950,7 @@ var LookupPicker = function LookupPicker(props) {
   }), props.errorMessage && React__default.createElement("span", {
     className: styles$q['vitro-error-text']
   }, props.errorMessage));
-};
+});
 
 var styles$r = {"vitro-command-menu":"_command-menu_vitro-command-menu_l82vtIh"};
 
@@ -64036,7 +64143,8 @@ var UserProfile = function UserProfile(props) {
 
 var styles$E = {"vitro-avatar":"_user-lookup-picker_vitro-avatar_2vI-SeH"};
 
-var UserLookupPicker = function UserLookupPicker(props) {
+var UserLookupPicker = React.forwardRef(function (props, ref) {
+  var lookupPickerRef = React.useRef(null);
   var getHtmlValueTemplateProps = function getHtmlValueTemplateProps(item) {
     var prop = props.getHtmlValueTemplateProps(item);
     if (props.isMultiSelect) {
@@ -64046,11 +64154,21 @@ var UserLookupPicker = function UserLookupPicker(props) {
     }
     return prop;
   };
+  React.useImperativeHandle(ref, function () {
+    return {
+      focus: function focus() {
+        if (lookupPickerRef.current) {
+          lookupPickerRef.current.focus();
+        }
+      }
+    };
+  });
   return React__default.createElement(LookupPicker, Object.assign({}, props, {
     htmlValueTemplate: Avatar,
-    getHtmlValueTemplateProps: getHtmlValueTemplateProps
+    getHtmlValueTemplateProps: getHtmlValueTemplateProps,
+    ref: lookupPickerRef
   }));
-};
+});
 
 var styles$F = {"vitro-title":"_activity_vitro-title_1rdvvaa","vitro-dropdown-button":"_activity_vitro-dropdown-button_12258nJ","vitro-activity":"_activity_vitro-activity_1u7YeF3"};
 
@@ -64193,6 +64311,16 @@ var ActivityMessage = function ActivityMessage(props) {
   }));
 };
 
+var CONTROL = function CONTROL() {};
+CONTROL.LOOKUP_PICKER = 'LookupPicker';
+CONTROL.DATE_PICKER = 'DatePicker';
+CONTROL.CHECKBOX = 'Checkbox';
+CONTROL.IMAGE_PICKER = 'ImagePicker';
+CONTROL.AVATAR = 'Avatar';
+CONTROL.INPUT = 'Input';
+CONTROL.PASSWORD = 'Password';
+CONTROL.TIME_PICKER = 'TimePicker';
+
 var LOCALE$6;
 (function (LOCALE) {
   LOCALE["PLACEHOLDER"] = "app.common.messageInput.placeholder";
@@ -64362,7 +64490,7 @@ var ImagePicker = function ImagePicker(props) {
 var styles$L = {"vitro-criterion-container":"_criterion_vitro-criterion-container_2cYcSkL","vitro-block":"_criterion_vitro-block_3E9-RXM","vitro-control":"_criterion_vitro-control_2JLaybj","vitro-label":"_criterion_vitro-label_3F6a8dj","vitro-operator-select-container":"_criterion_vitro-operator-select-container_3OkjzXG","vitro-operator-select":"_criterion_vitro-operator-select_1guNlk9","vitro-operator-list":"_criterion_vitro-operator-list_3A2VZsd","vitro-button-cancel":"_criterion_vitro-button-cancel_2C2G0sL","vitro-focus":"_criterion_vitro-focus_3FNLsoN","vitro-error":"_criterion_vitro-error_3pvFrlW","vitro-condition-select":"_criterion_vitro-condition-select_1hTBBg-","vitro-icon":"_criterion_vitro-icon_1DmS0jh","vitro-condition-list":"_criterion_vitro-condition-list_10UIxJI"};
 
 var ConditionSelect = function ConditionSelect(props) {
-  var _useState = React.useState(props.itemList[0]),
+  var _useState = React.useState(props.defaultValue || props.itemList[0]),
     condition = _useState[0],
     setCondition = _useState[1];
   var _useState2 = React.useState(false),
@@ -64424,7 +64552,7 @@ var ConditionSelect = function ConditionSelect(props) {
 };
 
 var Criterion = function Criterion(props) {
-  var _useState = React.useState(props.operatorList.length ? props.operatorList[0] : null),
+  var _useState = React.useState(props.operatorList[0]),
     operator = _useState[0],
     setOperator = _useState[1];
   var _useState2 = React.useState(false),
@@ -64436,19 +64564,30 @@ var Criterion = function Criterion(props) {
   var _useState4 = React.useState(CTRL.EMPTY),
     state = _useState4[0],
     setState = _useState4[1];
+  var componentProps = props.content.props;
+  var defaultOperator = (componentProps.value ? props.operatorList.find(function (x) {
+    return x.type === componentProps.value.operator;
+  }) : props.operatorList.find(function (x) {
+    return x.type === props.defaultOperator;
+  })) || props.operatorList[0];
+  var defaultCondition = (componentProps.value ? props.conditionList.find(function (x) {
+    return x.type === componentProps.value.condition;
+  }) : props.conditionList.find(function (x) {
+    return x.type === props.defaultCondition;
+  })) || props.conditionList[0];
   var value = React.useMemo(function () {
-    var _props$operatorList$, _props$conditionList$;
     return {
-      internalName: props.content.props.name,
-      operator: (_props$operatorList$ = props.operatorList[0]) === null || _props$operatorList$ === void 0 ? void 0 : _props$operatorList$.type,
-      valueList: [],
-      condition: (_props$conditionList$ = props.conditionList[0]) === null || _props$conditionList$ === void 0 ? void 0 : _props$conditionList$.type
+      internalName: componentProps.name,
+      operator: defaultOperator.type,
+      valueList: componentProps.value ? componentProps.value.valueList : [],
+      condition: defaultCondition.type
     };
   }, []);
   var selectRef = React.useRef(null);
   var labelRef = React.useRef(null);
   React.useEffect(function () {
     window.addEventListener(exports.EVENT.CLICK, onBlurSelect);
+    setOperator(defaultOperator);
     return function () {
       window.removeEventListener(exports.EVENT.CLICK, onBlurSelect);
     };
@@ -64478,26 +64617,23 @@ var Criterion = function Criterion(props) {
   };
   var onFocus = function onFocus(e) {
     setState(styles$L['vitro-focus']);
-    if (props.content.props.onFocus) {
-      props.content.props.onFocus(e);
+    if (componentProps.onFocus) {
+      componentProps.onFocus(e);
     }
   };
   var onBlur = function onBlur(e) {
-    setState(props.content.props.errorMessage ? styles$L['vitro-error'] : CTRL.EMPTY);
-    if (props.content.props.onBlur) {
-      props.content.props.onBlur(e);
+    setState(componentProps.errorMessage ? styles$L['vitro-error'] : CTRL.EMPTY);
+    if (componentProps.onBlur) {
+      componentProps.onBlur(e);
     }
   };
   var onChange = function onChange(val) {
     if (props.onChange) {
-      props.onChange(val, props.content.props.name);
+      props.onChange(val, componentProps.name);
     }
   };
   var onControlChange = function onControlChange(val, name) {
-    var valueArray = Array.isArray(val) ? val : [val];
-    value.valueList = valueArray.map(function (v) {
-      return v && v.id ? v.id : v;
-    });
+    value.valueList = Array.isArray(val) ? val : [val];
     onChange(value);
   };
   return React__default.createElement("div", {
@@ -64524,8 +64660,9 @@ var Criterion = function Criterion(props) {
   }, React__default.createElement("span", null, props.label)), React__default.createElement(ConditionSelect, {
     itemList: props.conditionList,
     onSelect: onConditionClick,
-    translateX: translate
-  }), React__default.createElement(props.content.component, _extends({}, props.content.props, {
+    translateX: translate,
+    defaultValue: defaultCondition
+  }), React__default.createElement(props.content.component, _extends({}, componentProps, {
     className: styles$L['vitro-control'],
     onBlur: onBlur,
     onFocus: onFocus,
@@ -64536,7 +64673,7 @@ var Criterion = function Criterion(props) {
     isRequired: false
   }))), React__default.createElement("button", {
     onClick: function onClick() {
-      return props.onDelete(props.content.props.id);
+      return props.onDelete(componentProps.id);
     },
     className: styles$L['vitro-button-cancel']
   }));
@@ -64548,20 +64685,39 @@ var LOCALE$8;
   LOCALE["EMPTY_PLACEHOLDER"] = "app.common.search.checkboxList.emptyPlaceholder";
 })(LOCALE$8 || (LOCALE$8 = {}));
 
-var styles$M = {"vitro-control":"_input_vitro-control__btu7j_","vitro-active":"_input_vitro-active_jxhGdE8","vitro-focus":"_input_vitro-focus_3tuxmPs","vitro-search-value-list":"_input_vitro-search-value-list_2I_KVY5","vitro-button-cancel":"_input_vitro-button-cancel_YqNZPj-","vitro-button-settings":"_input_vitro-button-settings_1w9FwYt","vitro-search-value":"_input_vitro-search-value_1ZbcNTJ"};
+var styles$M = {"vitro-control":"_input_vitro-control__btu7j_","vitro-active":"_input_vitro-active_jxhGdE8","vitro-focus":"_input_vitro-focus_3tuxmPs","vitro-button-search":"_input_vitro-button-search_15PeWCS","vitro-search-value-list":"_input_vitro-search-value-list_2I_KVY5","vitro-button-cancel":"_input_vitro-button-cancel_YqNZPj-","vitro-button-settings":"_input_vitro-button-settings_1w9FwYt","vitro-search-value":"_input_vitro-search-value_1ZbcNTJ"};
 
+var NEW_LINE$1 = '\n';
 var Input$1 = function Input(props) {
-  var _useState = React.useState(Boolean(props.isSettingsActive)),
-    isToggled = _useState[0],
-    setIsToggled = _useState[1];
-  var _useState2 = React.useState(false),
-    isActive = _useState2[0],
-    setIsActive = _useState2[1];
-  var _useState3 = React.useState(CTRL.EMPTY),
-    state = _useState3[0],
-    setState = _useState3[1];
+  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 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) {
@@ -64571,6 +64727,9 @@ var Input$1 = function Input(props) {
   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) {
@@ -64578,10 +64737,15 @@ var Input$1 = function Input(props) {
     }
   };
   var onKeyDown = function onKeyDown(e) {
-    var value = inputRef.current && inputRef.current.value;
-    if (e.keyCode === 13 && value) {
+    if (e.keyCode === 13) {
       e.preventDefault();
-      props.onEnter();
+      onSubmit();
+    }
+  };
+  var onSubmit = function onSubmit() {
+    var value = inputRef.current && inputRef.current.value;
+    if (value) {
+      props.onSubmit();
       inputRef.current.value = CTRL.EMPTY;
     }
   };
@@ -64597,6 +64761,10 @@ var Input$1 = function Input(props) {
       props.onChange(e.target.value);
     }
   };
+  var onBlur = function onBlur() {
+    setState(CTRL.EMPTY);
+    onSubmit();
+  };
   var getClassName = function getClassName() {
     var classList = [styles$M['vitro-control'], props.className || CTRL.EMPTY, state];
     if (isActive) {
@@ -64604,8 +64772,8 @@ var Input$1 = function Input(props) {
     }
     return classList.join(CTRL.SPACE);
   };
-  var getValueList = function getValueList(value) {
-    return value.valueList.map(function (x) {
+  var getTextValue = function getTextValue(value) {
+    var valueArray = value.valueList.map(function (x) {
       if (typeof x === 'object') {
         if (x instanceof Date) {
           return x.toLocaleString().split(CTRL.COMMA)[0];
@@ -64615,20 +64783,48 @@ var Input$1 = function Input(props) {
         return x;
       }
     });
+    var text = [value.name, valueArray.join(CTRL.COMMA + CTRL.SPACE)].join(CTRL.COLON + CTRL.SPACE);
+    return text;
+  };
+  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];
     return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
       className: styles$M['vitro-search-value']
-    }, firstValue.name + CTRL.COLON + CTRL.SPACE, getValueList(firstValue).join(CTRL.COMMA + CTRL.SPACE)), valueList.length && valueList.length > 1 ? React__default.createElement("div", {
+    }, getTextValue(firstValue), React__default.createElement("button", {
+      onClick: onCancel,
+      className: styles$M['vitro-button-cancel']
+    })), valueList.length && valueList.length > 1 ? React__default.createElement(Tooltip$1, {
+      text: getTextValueList(valueList),
+      placement: PLACEMENT$1.BOTTOM
+    }, React__default.createElement("div", {
       className: styles$M['vitro-search-value']
     }, localeService.create(LOCALE$8.INPUT_MORE, {
       count: valueList.length - 1
-    })) : null);
+    }), React__default.createElement("button", {
+      onClick: onCancel,
+      className: styles$M['vitro-button-cancel']
+    }))) : null);
+  };
+  var onSearchClick = function onSearchClick() {
+    if (isMobileView) {
+      onSettingsClick();
+    } else {
+      onSubmit();
+    }
   };
   return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
     className: getClassName()
-  }, React__default.createElement("div", {
+  }, React__default.createElement("button", {
+    className: styles$M['vitro-button-search'] + (isToggled ? CTRL.SPACE + styles$M['vitro-active'] : CTRL.EMPTY),
+    onClick: onSearchClick
+  }), !isMobileView && React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
     className: styles$M['vitro-search-value-list']
   }, props.valueList && props.valueList.length ? getSelectedValueList(props.valueList) : React__default.createElement("input", {
     type: 'text',
@@ -64638,9 +64834,7 @@ var Input$1 = function Input(props) {
     onFocus: function onFocus() {
       return setState(styles$M['vitro-focus']);
     },
-    onBlur: function onBlur() {
-      return setState(CTRL.EMPTY);
-    },
+    onBlur: onBlur,
     placeholder: !isActive ? props.placeholder : CTRL.EMPTY
   })), isActive && React__default.createElement(React__default.Fragment, null, props.isShowSettings && React__default.createElement("button", {
     onClick: onSettingsClick,
@@ -64648,16 +64842,21 @@ var Input$1 = function Input(props) {
   }), React__default.createElement("button", {
     onClick: onCancel,
     className: styles$M['vitro-button-cancel']
-  }))));
+  })))));
 };
 
-var FieldIterator = function FieldIterator(props) {
+var FieldIterator = React.forwardRef(function (props, ref) {
   var _useState = React.useState([]),
     controlList = _useState[0],
     setControlList = _useState[1];
   var changedFieldValueMap = React.useMemo(function () {
     return new Map();
   }, []);
+  var focusStatus = React.useMemo(function () {
+    return {
+      focus: false
+    };
+  }, []);
   var saveStatus = React.useMemo(function () {
     return {
       isSaving: false
@@ -64688,6 +64887,31 @@ var FieldIterator = function FieldIterator(props) {
   React.useEffect(function () {
     setErrorMessage();
   }, [props.errorControlList]);
+  React.useEffect(function () {
+    if (focusStatus.focus) {
+      var firstActiveControl = getFirstActiveControl();
+      if (firstActiveControl && firstActiveControl.ref && firstActiveControl.ref.current) {
+        if (firstActiveControl.ref.current.focus) {
+          firstActiveControl.ref.current.focus();
+        }
+        focusStatus.focus = false;
+      }
+    }
+  });
+  React.useImperativeHandle(ref, function () {
+    return {
+      focus: function focus() {
+        var firstActiveControl = getFirstActiveControl();
+        if (firstActiveControl && firstActiveControl.ref && firstActiveControl.ref.current) {
+          if (firstActiveControl.ref.current.focus) {
+            firstActiveControl.ref.current.focus();
+          }
+        } else {
+          focusStatus.focus = true;
+        }
+      }
+    };
+  });
   var updateControlList = function updateControlList() {
     if (props.fieldValueMap) {
       var _loop = function _loop() {
@@ -64707,6 +64931,14 @@ var FieldIterator = function FieldIterator(props) {
       }
     }
   };
+  var getFirstActiveControl = function getFirstActiveControl() {
+    if (controlList && controlList.length) {
+      return controlList.find(function (x) {
+        return !x.isReadOnly && !x.isDisabled && !x.value;
+      });
+    }
+    return null;
+  };
   var isControlRow = function isControlRow(controlName) {
     if (props.rowFieldList) {
       return props.rowFieldList.includes(controlName);
@@ -64732,7 +64964,8 @@ var FieldIterator = function FieldIterator(props) {
         return onChangeControl(value, name);
       },
       isRow: isControlRow(field.internalName),
-      field: field
+      field: field,
+      ref: React.createRef()
     };
     return control;
   };
@@ -64781,18 +65014,19 @@ var FieldIterator = function FieldIterator(props) {
       });
     });
   };
-  return React__default.createElement(React__default.Fragment, null, React__default.createElement(ScrollBar, null, controlList.map(function (control) {
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement(ScrollBar, null, controlList.map(function (control, index) {
     var component = props.componentMap.find(function (x) {
       return x.name === control.code;
     });
     if (component) {
+      control.index = index;
       return React__default.createElement("div", {
         className: control.isRow ? 'vitro-inline' : 'vitro-block'
       }, React__default.createElement("div", null, React__default.createElement(component.value, control)));
     }
     return null;
   })));
-};
+});
 
 var styles$N = {"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"};
 
@@ -64800,9 +65034,28 @@ var Filter = function Filter(props) {
   var _useState = React.useState(null),
     componentMap = _useState[0],
     setComponentMap = _useState[1];
+  var _useState2 = React.useState(null),
+    fieldValueMap = _useState2[0],
+    setFieldValueMap = _useState2[1];
+  var _useState3 = React.useState(null),
+    changedFieldValueMap = _useState3[0],
+    setChangedFieldValueMap = _useState3[1];
   React.useEffect(function () {
     initComponentMap();
   }, [props.componentMap]);
+  React.useEffect(function () {
+    if (changedFieldValueMap) {
+      setFieldValueMap(Object.fromEntries(changedFieldValueMap));
+    }
+  }, [props.fieldList, changedFieldValueMap]);
+  React.useEffect(function () {
+    var valueMap = new Map();
+    props.valueList.map(function (x) {
+      valueMap.set(x.internalName, x);
+    });
+    setFieldValueMap(Object.fromEntries(valueMap));
+    setChangedFieldValueMap(valueMap);
+  }, [props.valueList]);
   var initComponentMap = function initComponentMap() {
     var map = props.componentMap.map(function (component) {
       return {
@@ -64812,7 +65065,8 @@ var Filter = function Filter(props) {
             label: componentProps.label,
             onDelete: props.onDeleteField,
             operatorList: props.operatorList,
-            conditionList: props.conditionList,
+            defaultCondition: props.getDefaultCondition && props.getDefaultCondition(component.name),
+            conditionList: props.getConditionList(component.name),
             content: {
               component: component.value,
               props: _extends({}, componentProps, {
@@ -64820,20 +65074,25 @@ var Filter = function Filter(props) {
               })
             },
             onChange: componentProps.onChange,
-            isShowOperatorSelect: true
+            isShowOperatorSelect: componentProps.index ? true : false
           });
         }
       };
     });
     setComponentMap(map);
   };
+  var onChange = function onChange(changedFieldValueMap) {
+    setChangedFieldValueMap(changedFieldValueMap);
+    props.onChange(changedFieldValueMap);
+  };
   return React__default.createElement("div", {
     className: styles$N['vitro-filter']
   }, componentMap && React__default.createElement(FieldIterator, {
     fieldList: props.fieldList,
+    fieldValueMap: fieldValueMap,
+    changedFieldValueMap: changedFieldValueMap,
     componentMap: componentMap,
-    onChange: props.onChange,
-    isClearChangedFieldValueMap: true
+    onChange: onChange
   }));
 };
 
@@ -64864,10 +65123,11 @@ var CheckboxList = function CheckboxList(props) {
     }
   };
   var getSelectedItemList = function getSelectedItemList() {
-    return itemList.map(function (item) {
-      if (item.value) {
-        return item.id;
-      }
+    var selectedList = itemList.filter(function (item) {
+      return item.value;
+    });
+    return selectedList.map(function (item) {
+      return item.id;
     });
   };
   var onSearchCancel = function onSearchCancel() {
@@ -64897,7 +65157,7 @@ var CheckboxList = function CheckboxList(props) {
   }, React__default.createElement(Input$1, {
     onCancel: onSearchCancel,
     onChange: onInputChange,
-    onEnter: onInputChange,
+    onSubmit: onInputChange,
     className: styles$O['vitro-control']
   }), React__default.createElement(ScrollBar, null, isShowSearchResult ? searchItemList.length ? searchItemList.map(function (item) {
     return getCheckbox(item);
@@ -64963,20 +65223,23 @@ var Search = function Search(props) {
     setIsShowAddFieldDialog(!isShowAddFieldDialog);
   };
   var onFieldListChange = function onFieldListChange(selectedFieldIdList) {
-    var newFieldList = [];
     var _loop = function _loop() {
       var id = _step.value;
-      var field = props.fieldList.find(function (field) {
-        return field.id === id;
+      var field = filterFieldList.find(function (x) {
+        return x.id === id;
       });
-      if (field) {
-        newFieldList.push(field);
+      if (!field) {
+        var newField = props.fieldList.find(function (x) {
+          return x.id === id;
+        });
+        setFilterFieldList(function (prevState) {
+          return [].concat(prevState, [newField]);
+        });
       }
     };
     for (var _iterator = _createForOfIteratorHelperLoose(selectedFieldIdList), _step; !(_step = _iterator()).done;) {
       _loop();
     }
-    setFilterFieldList(newFieldList);
   };
   var closeSettings = function closeSettings() {
     setIsShowAddFieldDialog(false);
@@ -65055,7 +65318,7 @@ var Search = function Search(props) {
     valueList: selectedSearchCriterionList,
     onSettingsClick: onSettingsClick,
     onCancel: onCancel,
-    onEnter: onSubmit,
+    onSubmit: onSubmit,
     onChange: onInputChange,
     placeholder: props.inputPlaceholder,
     isSettingsActive: isShowDialog,
@@ -65064,12 +65327,14 @@ var Search = function Search(props) {
     className: styles$N['vitro-settings-dialog']
   }, React__default.createElement(Filter, {
     fieldList: filterFieldList,
+    valueList: selectedSearchCriterionList,
     onChange: onFilterChange,
     componentMap: props.componentMap,
     onDeleteField: onDeleteField,
     operatorList: props.operatorList,
-    conditionList: props.conditionList
-  }), React__default.createElement("div", {
+    getConditionList: props.getConditionList,
+    getDefaultCondition: props.getDefaultCondition
+  }), filterFieldList.length < props.maxFieldCount && React__default.createElement("div", {
     className: styles$N['vitro-add-field']
   }, React__default.createElement(Button$2, {
     text: props.labelAddField,
@@ -65104,6 +65369,7 @@ exports.Alert = Alert$1;
 exports.Avatar = Avatar;
 exports.Breadcrumbs = Breadcrumbs;
 exports.Button = Button$2;
+exports.CONTROL = CONTROL;
 exports.Checkbox = Checkbox;
 exports.CommandMenu = CommandMenu;
 exports.CommandMenuButton = CommandMenuButton;