@vitrosoftware/common-ui-ts 1.1.173 → 1.1.174

package/css/std/controls/add-field-button/list.css

@@ -0,0 +1,24 @@
+.vitro-list {
+    background: #fff;
+    border-radius: 4px;
+    max-width: 252px;
+}
+
+.vitro-list :global(.ps) > div:first-child {
+    padding-left: 12px;
+}
+
+.vitro-item {
+    margin-bottom: 4px;
+}
+
+.vitro-item:last-child {
+    padding-bottom: 8px;
+}
+
+.vitro-item a {
+    cursor: pointer;
+    display: block;
+    line-height: 24px;
+    padding: 0 4px 0 4px;
+}

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

@@ -53,6 +53,10 @@
     grid-gap: 28px 16px;
 }
 
+.vitro-filter [class^="_criterion_vitro-control"] {
+    max-width: calc(100% - 87px);
+}
+
 .vitro-add-field {
     margin: 18px 0 16px 66px;
 }

package/dist/index.css

@@ -6920,27 +6920,31 @@ li:first-child ._command-menu-item_vitro-item_2pVhk23:hover {
     padding: 8px 12px;
 }
 
-._checkbox-list_vitro-checkbox-list_1iZSkkv {
-    border-radius: 4px;
+._list_vitro-list_1I2JJ6w {
     background: #fff;
+    border-radius: 4px;
     max-width: 252px;
 }
 
-._checkbox-list_vitro-search-value-list_2i58fRK > div:first-child {
-    padding: 12px 12px 8px 12px;
-}
-
-._checkbox-list_vitro-checkbox-list_1iZSkkv .ps > div:first-child {
+._list_vitro-list_1I2JJ6w .ps > div:first-child {
     padding-left: 12px;
 }
 
-._checkbox-list_vitro-checkbox-list_1iZSkkv ._checkbox-list_vitro-checkbox_1EqsnoQ {
+._list_vitro-item_2XsFSic {
     margin-bottom: 4px;
 }
 
-._checkbox-list_vitro-checkbox_1EqsnoQ:last-child {
+._list_vitro-item_2XsFSic:last-child {
     padding-bottom: 8px;
-}
+}
+
+._list_vitro-item_2XsFSic a {
+    cursor: pointer;
+    display: block;
+    line-height: 24px;
+    padding: 0 4px 0 4px;
+}
+
 ._search_vitro-search_QkJksC_ {
     position: relative;
     align-self: baseline;
@@ -6996,6 +7000,10 @@ li:first-child ._command-menu-item_vitro-item_2pVhk23:hover {
     grid-gap: 28px 16px;
 }
 
+._search_vitro-filter_2n-Y-mS [class^="_criterion_vitro-control"] {
+    max-width: calc(100% - 87px);
+}
+
 ._search_vitro-add-field_2hHt1Z2 {
     margin: 18px 0 16px 66px;
 }

package/dist/index.js

@@ -63545,7 +63545,7 @@ var Viewer = function Viewer(props) {
 };
 
 var name = "@vitrosoftware/common-ui-ts";
-var version$1 = "1.1.173";
+var version$1 = "1.1.174";
 var description = "vitro software common ui ts";
 var author = "";
 var license = "MIT";
@@ -64799,6 +64799,8 @@ var ValueListItem = function ValueListItem(props) {
 };
 
 var FLAG = 'gi';
+var REPLACEMENT = '\\$&';
+var PATTERN = /[.*+?^${}()|[\]\\]/g;
 var ValueList = function ValueList(props) {
   var _useState = React.useState(null),
     scrollableElement = _useState[0],
@@ -64806,7 +64808,7 @@ var ValueList = function ValueList(props) {
   var _useState2 = React.useState(null),
     style = _useState2[0],
     setStyle = _useState2[1];
-  var reg = new RegExp(props.inputValue, FLAG);
+  var reg = new RegExp(props.inputValue.replace(PATTERN, REPLACEMENT), FLAG);
   React.useEffect(function () {
     if (scrollableElement && scrollableElement.scrollTop === 0) {
       scrollableElement.scrollTop = 1;
@@ -66932,7 +66934,9 @@ var ConditionSelect = React.forwardRef(function (props, ref) {
 });
 
 var Criterion = function Criterion(props) {
-  var _useState = React.useState(props.operatorList ? props.operatorList[0] : null),
+  var _useState = React.useState(props.operatorList ? props.defaultOperator ? props.operatorList.find(function (x) {
+      return x.type === props.defaultOperator;
+    }) || props.operatorList[0] : props.operatorList[0] : null),
     operator = _useState[0],
     setOperator = _useState[1];
   var _useState2 = React.useState(false),
@@ -66942,11 +66946,6 @@ var Criterion = function Criterion(props) {
     state = _useState3[0],
     setState = _useState3[1];
   var componentProps = props.content.props;
-  var defaultOperator = props.operatorList ? (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] : null;
   var defaultCondition = (componentProps.value ? props.conditionList.find(function (x) {
     return x.type === componentProps.value.condition;
   }) : props.conditionList.find(function (x) {
@@ -66955,7 +66954,7 @@ var Criterion = function Criterion(props) {
   var value = React.useMemo(function () {
     return {
       internalName: componentProps.name,
-      operator: defaultOperator ? defaultOperator.type : 0,
+      operator: props.defaultOperator || 0,
       valueList: componentProps.value ? componentProps.value.valueList : [],
       condition: defaultCondition.type
     };
@@ -66965,7 +66964,6 @@ var Criterion = function Criterion(props) {
   var conditionSelectRef = React.useRef(null);
   React.useEffect(function () {
     window.addEventListener(exports.EVENT.CLICK, onBlurSelect);
-    setOperator(defaultOperator);
     return function () {
       window.removeEventListener(exports.EVENT.CLICK, onBlurSelect);
     };
@@ -66975,6 +66973,18 @@ var Criterion = function Criterion(props) {
       conditionSelectRef.current.style.left = labelRef.current.offsetWidth + 8 + UNIT.PX;
     }
   }, [labelRef]);
+  React.useEffect(function () {
+    if (props.content.props && props.content.props.value && props.operatorList) {
+      var _operator = props.operatorList.find(function (x) {
+        return x.type === componentProps.value.operator;
+      });
+      if (_operator) {
+        setOperator(_operator);
+        value.operator = _operator.type;
+      }
+      value.valueList = componentProps.value ? componentProps.value.valueList : [];
+    }
+  }, [props.content]);
   var onOperatorClick = function onOperatorClick(operator) {
     setOperator(operator);
     value.operator = operator.type;
@@ -67057,7 +67067,7 @@ var Criterion = function Criterion(props) {
     isRequired: false
   }))), React__default.createElement(ImageButton, {
     onClick: function onClick() {
-      return props.onDelete(componentProps.id);
+      return props.onDelete(componentProps.controlKey);
     },
     className: styles$1d['vitro-button-cancel']
   }));
@@ -67188,7 +67198,7 @@ var FieldIterator = React.forwardRef(function (props, ref) {
           value = _Object$entries$_i[1];
         setControlList(function (prevState) {
           return prevState.map(function (control) {
-            return control.name === key && control.value !== value ? _extends({}, control, {
+            return control.controlKey === key && control.value !== value ? _extends({}, control, {
               value: value
             }) : control;
           });
@@ -67215,11 +67225,13 @@ var FieldIterator = React.forwardRef(function (props, ref) {
   };
   var createBaseControl = function createBaseControl(field) {
     var _field$fieldValueMap;
+    var controlKey = field.key ? field.key : field.internalName;
     var control = {
       id: field.id,
       label: field.name,
       name: field.internalName,
-      key: field.internalName,
+      key: controlKey,
+      controlKey: controlKey,
       code: field.component ? field.component : field.fieldType.reactComponent,
       isRequired: field.isRequired,
       isReadOnly: props.isReadOnly || field.isReadOnly,
@@ -67228,8 +67240,8 @@ var FieldIterator = React.forwardRef(function (props, ref) {
       errorMessage: null,
       isAutoComplete: false,
       multiline: (_field$fieldValueMap = field.fieldValueMap) === null || _field$fieldValueMap === void 0 ? void 0 : _field$fieldValueMap.multiline,
-      onChange: function onChange(value, name) {
-        return onChangeControl(value, name);
+      onChange: function onChange(value) {
+        return onChangeControl(value, controlKey);
       },
       isRow: isControlRow(field.internalName),
       field: field,
@@ -67238,16 +67250,16 @@ var FieldIterator = React.forwardRef(function (props, ref) {
     };
     return control;
   };
-  var onChangeControl = function onChangeControl(value, fieldName) {
+  var onChangeControl = function onChangeControl(value, controlKey) {
     setControlList(function (prevState) {
-      return setControlValue(prevState, value, fieldName);
+      return setControlValue(prevState, value, controlKey);
     });
-    changedFieldValueMap.set(fieldName, value);
+    changedFieldValueMap.set(controlKey, value);
     props.onChange(changedFieldValueMap, saveStatus);
   };
-  var setControlValue = function setControlValue(controlList, val, fieldName) {
+  var setControlValue = function setControlValue(controlList, val, controlKey) {
     return controlList.map(function (field) {
-      if (field.name === fieldName) {
+      if (field.controlKey === controlKey) {
         return _extends({}, field, {
           value: val
         });
@@ -67492,7 +67504,7 @@ var CriterionFieldIterator = function CriterionFieldIterator(props) {
     if (props.valueList) {
       var valueMap = new Map();
       props.valueList.map(function (x) {
-        valueMap.set(x.internalName, x);
+        valueMap.set(x.key, x);
       });
       setFieldValueMap(Object.fromEntries(valueMap));
       setChangedFieldValueMap(valueMap);
@@ -67634,7 +67646,7 @@ var SearchInput = function SearchInput(props) {
       var _loop = function _loop() {
         var value = _step.value;
         newList = newList.filter(function (x) {
-          return x.internalName !== value.internalName;
+          return x.key !== value.key;
         });
       };
       for (var _iterator = _createForOfIteratorHelperLoose(valueList), _step; !(_step = _iterator()).done;) {
@@ -67746,53 +67758,32 @@ var SearchValueList = function SearchValueList(props) {
   }, props.emptyPlaceHolder || localeService.create(LOCALE$a.EMPTY_PLACEHOLDER))));
 };
 
-var styles$1l = {"vitro-checkbox-list":"_checkbox-list_vitro-checkbox-list_1iZSkkv","vitro-search-value-list":"_checkbox-list_vitro-search-value-list_2i58fRK","vitro-checkbox":"_checkbox-list_vitro-checkbox_1EqsnoQ"};
+var styles$1l = {"vitro-list":"_list_vitro-list_1I2JJ6w","vitro-item":"_list_vitro-item_2XsFSic"};
 
-var CheckboxList = React.forwardRef(function (props, ref) {
-  var _useState = React.useState(props.itemList),
-    itemList = _useState[0],
-    setItemList = _useState[1];
-  var _onChange = function onChange(value, id) {
-    setItemList(function (prevState) {
-      return prevState.map(function (item) {
-        if (item.id === id) {
-          item.value = value;
-        }
-        return item;
-      });
-    });
-    if (props.onChange) {
-      props.onChange(getSelectedItemList());
+var List$1 = React.forwardRef(function (props, ref) {
+  var _onClick = function onClick(id) {
+    if (props.onClick) {
+      props.onClick(id);
     }
   };
-  var getSelectedItemList = function getSelectedItemList() {
-    var selectedList = itemList.filter(function (item) {
-      return item.value;
-    });
-    return selectedList.map(function (item) {
-      return item.id;
-    });
-  };
-  var getCheckbox = function getCheckbox(item) {
-    return React__default.createElement(Checkbox, {
-      label: item.name,
-      name: item.name,
-      value: props.isAllSelected ? true : item.value,
-      onChange: function onChange(value, name) {
-        return _onChange(value, item.id);
-      },
-      className: styles$1l['vitro-checkbox']
-    });
+  var getItemTemplate = function getItemTemplate(item) {
+    return React__default.createElement("div", {
+      className: styles$1l['vitro-item']
+    }, React__default.createElement("a", {
+      onClick: function onClick() {
+        return _onClick(item.id);
+      }
+    }, item.name));
   };
   var filterValueTemplate = function filterValueTemplate(item) {
     return item.name;
   };
   return React__default.createElement("div", {
-    className: styles$1l['vitro-checkbox-list'],
+    className: styles$1l['vitro-list'],
     ref: ref
   }, React__default.createElement(SearchValueList, {
     itemList: props.itemList,
-    valueTemplate: getCheckbox,
+    valueTemplate: getItemTemplate,
     filterValueTemplate: filterValueTemplate,
     className: styles$1l['vitro-search-value-list']
   }));
@@ -67825,6 +67816,9 @@ var AddFieldButton = React.forwardRef(function (props, ref) {
       }
     }
   };
+  var onFieldListChange = function onFieldListChange(id) {
+    props.onFieldListChange(id);
+  };
   return React__default.createElement("div", {
     className: styles$1m['vitro-add-field']
   }, React__default.createElement(Button$2, {
@@ -67842,11 +67836,10 @@ var AddFieldButton = React.forwardRef(function (props, ref) {
     container: (_props$filterContaine = props.filterContainerRef) !== null && _props$filterContaine !== void 0 && _props$filterContaine.current ? props.filterContainerRef.current : undefined,
     placement: props.isMobileView ? exports.PLACEMENT.BOTTOM + CTRL.DASH + exports.PLACEMENT.START : exports.PLACEMENT.RIGHT + CTRL.DASH + exports.PLACEMENT.START,
     className: styles$1m['vitro-add-field-dialog']
-  }, React__default.createElement(CheckboxList, {
+  }, React__default.createElement(List$1, {
     ref: addFieldListRef,
-    itemList: props.checkboxFieldList,
-    onChange: props.onFieldListChange,
-    isAllSelected: props.isAllFieldsVisible
+    itemList: props.fieldList,
+    onClick: onFieldListChange
   })));
 });
 
@@ -67886,12 +67879,18 @@ var Search = function Search(props) {
     };
   }, []);
   React.useEffect(function () {
-    var checkboxList = props.fieldList;
     if (props.visibleFieldList) {
-      setFilterFieldList(props.visibleFieldList);
-      checkboxList = getCheckboxFieldList(props.visibleFieldList);
+      var visibleFieldList = [];
+      props.visibleFieldList.forEach(function (visibleField) {
+        var field = _extends({}, visibleField);
+        if (!visibleField.key) {
+          field.key = getUUID();
+        }
+        visibleFieldList.push(field);
+      });
+      setFilterFieldList(visibleFieldList);
     }
-    setCheckboxFieldList(checkboxList);
+    setCheckboxFieldList(props.fieldList);
   }, [props.visibleFieldList]);
   React.useEffect(function () {
     if (props.maxFieldCount) {
@@ -67910,21 +67909,32 @@ var Search = function Search(props) {
   }, [selectedSearchCriterionList]);
   React.useEffect(function () {
     if (props.searchCriterionList && props.searchCriterionList.length) {
-      var list = getSelectedCriterionList(props.searchCriterionList);
+      var list = getSelectedCriterionList(getSeacrhCriterionWithKey(props.searchCriterionList));
       setSelectedSearchCriterionList(list);
       var selectedFieldList = getSelectedFieldList(list);
       setFilterFieldList(selectedFieldList);
-      setCheckboxFieldList(getCheckboxFieldList(selectedFieldList));
+      setCheckboxFieldList(props.fieldList);
     } else {
       reset();
     }
   }, [props.searchCriterionList]);
+  var getSeacrhCriterionWithKey = function getSeacrhCriterionWithKey(searchCriterionList) {
+    var criterionList = [];
+    for (var _iterator = _createForOfIteratorHelperLoose(searchCriterionList), _step; !(_step = _iterator()).done;) {
+      var criterionItem = _step.value;
+      var criterion = _extends({}, criterionItem, {
+        key: getUUID()
+      });
+      criterionList.push(criterion);
+    }
+    return criterionList;
+  };
   var reset = function reset() {
     setSearchCriterionList([]);
     setSelectedSearchCriterionList([]);
     var selectedFieldList = getSelectedFieldList([]);
     setFilterFieldList(selectedFieldList);
-    setCheckboxFieldList(selectedFieldList);
+    setCheckboxFieldList(props.fieldList);
     setIsShowAddFieldDialog(false);
     setIsShowDialog(false);
     setState(CTRL.EMPTY);
@@ -67935,19 +67945,16 @@ var Search = function Search(props) {
   var onAddField = function onAddField() {
     setIsShowAddFieldDialog(!isShowAddFieldDialog);
   };
-  var onFieldListChange = function onFieldListChange(selectedFieldIdList) {
-    var fieldList = [];
-    var _loop = function _loop() {
-      var id = _step.value;
-      var field = props.fieldList.find(function (x) {
-        return x.id === id;
+  var onFieldListChange = function onFieldListChange(selectedFieldId) {
+    var fieldList = [].concat(filterFieldList);
+    var field = props.fieldList.find(function (x) {
+      return x.id === selectedFieldId;
+    });
+    if (field) {
+      var fieldWithKey = _extends({}, field, {
+        key: getUUID()
       });
-      if (field) {
-        fieldList.push(field);
-      }
-    };
-    for (var _iterator = _createForOfIteratorHelperLoose(selectedFieldIdList), _step; !(_step = _iterator()).done;) {
-      _loop();
+      fieldList.push(fieldWithKey);
     }
     setFilterFieldList(fieldList);
   };
@@ -67958,37 +67965,22 @@ var Search = function Search(props) {
       setState(CTRL.EMPTY);
     }
   };
-  var onDeleteField = function onDeleteField(id) {
+  var onDeleteField = function onDeleteField(key) {
     setFilterFieldList(function (prevState) {
       return prevState.filter(function (field) {
-        return field.id !== id;
+        return field.key !== key;
       });
     });
-    setCheckboxFieldList(function (prevState) {
-      return prevState.map(function (field) {
-        if (field.id === id) {
-          return _extends({}, field, {
-            value: false
-          });
-        } else {
-          return field;
-        }
+    setSearchCriterionList(function (prevState) {
+      return prevState.filter(function (criterion) {
+        return criterion.key !== key;
       });
     });
-    var field = props.fieldList.find(function (field) {
-      return field.id === id;
-    });
-    if (field) {
-      setSearchCriterionList(function (prevState) {
-        return prevState.filter(function (criterion) {
-          return criterion.internalName !== field.internalName;
-        });
-      });
-    }
   };
   var onFilterChange = function onFilterChange(changedFieldValueMap, saveStatus) {
     var criterionList = [];
     changedFieldValueMap.forEach(function (value, key) {
+      value.key = key;
       criterionList.push(value);
     });
     setSearchCriterionList(criterionList);
@@ -67998,10 +67990,23 @@ var Search = function Search(props) {
   };
   var onSearch = function onSearch(value, criterionList) {
     var list = criterionList ? criterionList : searchCriterionList;
-    props.onSearch(list);
+    props.onSearch(getSearchCriterionListWithoutKey(list));
     setSelectedSearchCriterionList(getSelectedCriterionList(list));
     closeSettings();
   };
+  var getSearchCriterionListWithoutKey = function getSearchCriterionListWithoutKey(criterionList) {
+    var list = [];
+    criterionList === null || criterionList === void 0 ? void 0 : criterionList.forEach(function (item) {
+      var criterion = {
+        internalName: item.internalName,
+        operator: item.operator,
+        condition: item.condition,
+        valueList: item.valueList
+      };
+      list.push(criterion);
+    });
+    return list;
+  };
   var getSelectedCriterionList = function getSelectedCriterionList(criterionList) {
     var list = criterionList.map(function (x) {
       var fieldName = props.fieldList.find(function (field) {
@@ -68019,24 +68024,13 @@ var Search = function Search(props) {
       var field = props.fieldList.find(function (field) {
         return field.internalName === x.internalName;
       });
-      fieldList.push(field);
+      var fieldWithKey = _extends({}, field, {
+        key: x.key
+      });
+      fieldList.push(fieldWithKey);
     });
     return fieldList;
   };
-  var getCheckboxFieldList = function getCheckboxFieldList(visibleFieldList) {
-    var checkboxList = props.fieldList.map(function (field) {
-      if (visibleFieldList.find(function (f) {
-        return f.id === field.id;
-      })) {
-        return _extends({}, field, {
-          value: true
-        });
-      } else {
-        return field;
-      }
-    });
-    return checkboxList;
-  };
   var onCancelSearch = function onCancelSearch() {
     setSearchCriterionList([]);
     setSelectedSearchCriterionList([]);
@@ -68045,11 +68039,17 @@ var Search = function Search(props) {
     props.onCancel();
   };
   var onInputChange = function onInputChange(value) {
+    var _props$visibleFieldLi, _defaultSearchField$;
+    var defaultSearchField = (_props$visibleFieldLi = props.visibleFieldList) === null || _props$visibleFieldLi === void 0 ? void 0 : _props$visibleFieldLi.filter(function (field) {
+      return field.internalName === props.defaultSearchFieldName;
+    });
+    var key = defaultSearchField && defaultSearchField.length && (_defaultSearchField$ = defaultSearchField[0]) !== null && _defaultSearchField$ !== void 0 && _defaultSearchField$.key ? defaultSearchField[0].key : getUUID();
     var criterion = {
       condition: CONDITION_CONTAINS,
       operator: 0,
       internalName: props.defaultSearchFieldName,
-      valueList: [value]
+      valueList: [value],
+      key: key
     };
     setSearchCriterionList([criterion]);
   };
@@ -68071,6 +68071,13 @@ var Search = function Search(props) {
   var onCancel = function onCancel() {
     closeSettings();
   };
+  var getUUID = function getUUID() {
+    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+      var r = Math.random() * 16 | 0,
+        v = c == 'x' ? r : r & 0x3 | 0x8;
+      return v.toString(16);
+    });
+  };
   var content = React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
     className: styles$1m['vitro-filter-container'],
     ref: filterContainerRef
@@ -68091,7 +68098,7 @@ var Search = function Search(props) {
     onAddField: onAddField,
     isShowAddFieldDialog: isShowAddFieldDialog,
     isMobileView: props.isMobileView,
-    checkboxFieldList: checkboxFieldList,
+    fieldList: checkboxFieldList,
     onFieldListChange: onFieldListChange,
     isAllFieldsVisible: props.isAllFieldsVisible,
     filterContainerRef: filterContainerRef,