@vitrosoftware/common-ui-ts 1.1.51 → 1.1.53

package/dist/index.js

@@ -20684,6 +20684,9 @@ var TreeGridTableViewContextImpl = /*#__PURE__*/function () {
   _proto.getFilter = function getFilter(spec) {
     return this.grid.GetFilter(spec);
   };
+  _proto.selectRange = function selectRange(row1, col1, row2, col2, select) {
+    this.grid.SelectRange(row1, col1, row2, col2, select);
+  };
   _createClass(TreeGridTableViewContextImpl, [{
     key: "columnList",
     get: function get() {
@@ -20755,6 +20758,8 @@ var EVENT$1;
   EVENT["ON_DATA_SEND"] = "OnDataSend";
   EVENT["ON_LOADED"] = "OnLoaded";
   EVENT["ON_CLICK"] = "OnClick";
+  EVENT["ON_CLICK_PANEL"] = "OnClickPanel";
+  EVENT["ON_CLICK_CELL"] = "OnClickCell";
   EVENT["ON_BLUR"] = "OnBlur";
   EVENT["ON_DBL_CLICK"] = "OnDblClick";
   EVENT["ON_CONTEXT_MENU"] = "OnContextMenu";
@@ -20812,6 +20817,7 @@ var ROW_TYPE;
   ROW_TYPE["HEADER"] = "Header";
   ROW_TYPE["DATA"] = "Data";
   ROW_TYPE["FILTER"] = "Filter";
+  ROW_TYPE["GROUP"] = "Group";
 })(ROW_TYPE || (ROW_TYPE = {}));
 var CELL_TYPE;
 (function (CELL_TYPE) {
@@ -61002,7 +61008,7 @@ var Checkbox = function Checkbox(props) {
     value = _useState[0],
     setValue = _useState[1];
   var onChange = function onChange() {
-    props.onChange && props.onChange(!value);
+    props.onChange && props.onChange(!value, props.name);
     setValue(!value);
   };
   React.useEffect(function () {
@@ -61304,7 +61310,7 @@ var DatePicker = React.forwardRef(function (props, ref) {
         return props.isWorkDay(date);
       },
       open: function open(e) {
-        onFocus();
+        onFocus(e);
         if (props.onOpen) {
           props.onOpen(e, $$3(container.current));
         }
@@ -61315,7 +61321,7 @@ var DatePicker = React.forwardRef(function (props, ref) {
         }
       },
       close: function close(e) {
-        onBlur();
+        onBlur(e);
         if (props.onClose) {
           props.onClose(e.sender.value(), props.name);
         }
@@ -61370,7 +61376,7 @@ var DatePicker = React.forwardRef(function (props, ref) {
   React.useEffect(function () {
     $$3(inputRef.current).data(componentName).setOptions({
       open: function open(e) {
-        onFocus();
+        onFocus(e);
         if (props.onOpen) {
           props.onOpen(e, $$3(container.current));
         }
@@ -61380,7 +61386,7 @@ var DatePicker = React.forwardRef(function (props, ref) {
   React.useEffect(function () {
     $$3(inputRef.current).data(componentName).setOptions({
       close: function close(e) {
-        onBlur();
+        onBlur(e);
         if (props.onClose) {
           props.onClose(e.sender.value(), props.name);
         }
@@ -61405,11 +61411,17 @@ var DatePicker = React.forwardRef(function (props, ref) {
       }
     };
   });
-  var onFocus = function onFocus() {
+  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);
@@ -61488,13 +61500,13 @@ var TimePicker = React.forwardRef(function (props, ref) {
         }
       },
       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));
         }
@@ -61519,11 +61531,17 @@ var TimePicker = React.forwardRef(function (props, ref) {
       }
     };
   });
-  var onFocus = function onFocus() {
+  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);
@@ -61852,9 +61870,12 @@ var LookupPicker = React.forwardRef(function (props, ref) {
       }
     });
   };
-  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);
@@ -64296,6 +64317,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";
@@ -64465,7 +64496,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),
@@ -64527,7 +64558,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),
@@ -64539,19 +64570,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);
     };
@@ -64581,26 +64623,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", {
@@ -64627,8 +64666,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,
@@ -64639,7 +64679,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']
   }));
@@ -64651,20 +64691,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) {
@@ -64674,6 +64733,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) {
@@ -64681,10 +64743,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;
     }
   };
@@ -64700,6 +64767,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) {
@@ -64707,8 +64778,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];
@@ -64718,20 +64789,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',
@@ -64741,9 +64840,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,
@@ -64751,7 +64848,7 @@ var Input$1 = function Input(props) {
   }), React__default.createElement("button", {
     onClick: onCancel,
     className: styles$M['vitro-button-cancel']
-  }))));
+  })))));
 };
 
 var FieldIterator = React.forwardRef(function (props, ref) {
@@ -64843,7 +64940,7 @@ var FieldIterator = React.forwardRef(function (props, ref) {
   var getFirstActiveControl = function getFirstActiveControl() {
     if (controlList && controlList.length) {
       return controlList.find(function (x) {
-        return !x.isReadOnly && !x.isDisabled;
+        return !x.isReadOnly && !x.isDisabled && !x.value;
       });
     }
     return null;
@@ -64923,11 +65020,12 @@ var FieldIterator = React.forwardRef(function (props, ref) {
       });
     });
   };
-  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)));
@@ -64942,9 +65040,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 {
@@ -64954,7 +65071,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, {
@@ -64962,20 +65080,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
   }));
 };
 
@@ -65006,10 +65129,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() {
@@ -65039,7 +65163,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);
@@ -65105,20 +65229,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);
@@ -65197,7 +65324,7 @@ var Search = function Search(props) {
     valueList: selectedSearchCriterionList,
     onSettingsClick: onSettingsClick,
     onCancel: onCancel,
-    onEnter: onSubmit,
+    onSubmit: onSubmit,
     onChange: onInputChange,
     placeholder: props.inputPlaceholder,
     isSettingsActive: isShowDialog,
@@ -65206,12 +65333,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,
@@ -65246,6 +65375,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;