@vitrosoftware/common-ui-ts 1.1.174 → 1.1.175

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

@@ -53,10 +53,6 @@
     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,31 +6920,27 @@ li:first-child ._command-menu-item_vitro-item_2pVhk23:hover {
     padding: 8px 12px;
 }
 
-._list_vitro-list_1I2JJ6w {
-    background: #fff;
+._checkbox-list_vitro-checkbox-list_1iZSkkv {
     border-radius: 4px;
+    background: #fff;
     max-width: 252px;
 }
 
-._list_vitro-list_1I2JJ6w .ps > div:first-child {
+._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 {
     padding-left: 12px;
 }
 
-._list_vitro-item_2XsFSic {
+._checkbox-list_vitro-checkbox-list_1iZSkkv ._checkbox-list_vitro-checkbox_1EqsnoQ {
     margin-bottom: 4px;
 }
 
-._list_vitro-item_2XsFSic:last-child {
+._checkbox-list_vitro-checkbox_1EqsnoQ: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;
@@ -7000,10 +6996,6 @@ 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.174";
+var version$1 = "1.1.175";
 var description = "vitro software common ui ts";
 var author = "";
 var license = "MIT";
@@ -66934,9 +66934,7 @@ var ConditionSelect = React.forwardRef(function (props, ref) {
 });
 
 var Criterion = function Criterion(props) {
-  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),
+  var _useState = React.useState(props.operatorList ? props.operatorList[0] : null),
     operator = _useState[0],
     setOperator = _useState[1];
   var _useState2 = React.useState(false),
@@ -66946,6 +66944,11 @@ 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) {
@@ -66954,7 +66957,7 @@ var Criterion = function Criterion(props) {
   var value = React.useMemo(function () {
     return {
       internalName: componentProps.name,
-      operator: props.defaultOperator || 0,
+      operator: defaultOperator ? defaultOperator.type : 0,
       valueList: componentProps.value ? componentProps.value.valueList : [],
       condition: defaultCondition.type
     };
@@ -66964,6 +66967,7 @@ 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);
     };
@@ -66973,18 +66977,6 @@ 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;
@@ -67067,7 +67059,7 @@ var Criterion = function Criterion(props) {
     isRequired: false
   }))), React__default.createElement(ImageButton, {
     onClick: function onClick() {
-      return props.onDelete(componentProps.controlKey);
+      return props.onDelete(componentProps.id);
     },
     className: styles$1d['vitro-button-cancel']
   }));
@@ -67198,7 +67190,7 @@ var FieldIterator = React.forwardRef(function (props, ref) {
           value = _Object$entries$_i[1];
         setControlList(function (prevState) {
           return prevState.map(function (control) {
-            return control.controlKey === key && control.value !== value ? _extends({}, control, {
+            return control.name === key && control.value !== value ? _extends({}, control, {
               value: value
             }) : control;
           });
@@ -67225,13 +67217,11 @@ 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: controlKey,
-      controlKey: controlKey,
+      key: field.internalName,
       code: field.component ? field.component : field.fieldType.reactComponent,
       isRequired: field.isRequired,
       isReadOnly: props.isReadOnly || field.isReadOnly,
@@ -67240,8 +67230,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) {
-        return onChangeControl(value, controlKey);
+      onChange: function onChange(value, name) {
+        return onChangeControl(value, name);
       },
       isRow: isControlRow(field.internalName),
       field: field,
@@ -67250,16 +67240,16 @@ var FieldIterator = React.forwardRef(function (props, ref) {
     };
     return control;
   };
-  var onChangeControl = function onChangeControl(value, controlKey) {
+  var onChangeControl = function onChangeControl(value, fieldName) {
     setControlList(function (prevState) {
-      return setControlValue(prevState, value, controlKey);
+      return setControlValue(prevState, value, fieldName);
     });
-    changedFieldValueMap.set(controlKey, value);
+    changedFieldValueMap.set(fieldName, value);
     props.onChange(changedFieldValueMap, saveStatus);
   };
-  var setControlValue = function setControlValue(controlList, val, controlKey) {
+  var setControlValue = function setControlValue(controlList, val, fieldName) {
     return controlList.map(function (field) {
-      if (field.controlKey === controlKey) {
+      if (field.name === fieldName) {
         return _extends({}, field, {
           value: val
         });
@@ -67504,7 +67494,7 @@ var CriterionFieldIterator = function CriterionFieldIterator(props) {
     if (props.valueList) {
       var valueMap = new Map();
       props.valueList.map(function (x) {
-        valueMap.set(x.key, x);
+        valueMap.set(x.internalName, x);
       });
       setFieldValueMap(Object.fromEntries(valueMap));
       setChangedFieldValueMap(valueMap);
@@ -67646,7 +67636,7 @@ var SearchInput = function SearchInput(props) {
       var _loop = function _loop() {
         var value = _step.value;
         newList = newList.filter(function (x) {
-          return x.key !== value.key;
+          return x.internalName !== value.internalName;
         });
       };
       for (var _iterator = _createForOfIteratorHelperLoose(valueList), _step; !(_step = _iterator()).done;) {
@@ -67758,32 +67748,53 @@ var SearchValueList = function SearchValueList(props) {
   }, props.emptyPlaceHolder || localeService.create(LOCALE$a.EMPTY_PLACEHOLDER))));
 };
 
-var styles$1l = {"vitro-list":"_list_vitro-list_1I2JJ6w","vitro-item":"_list_vitro-item_2XsFSic"};
+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 List$1 = React.forwardRef(function (props, ref) {
-  var _onClick = function onClick(id) {
-    if (props.onClick) {
-      props.onClick(id);
+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 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 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 filterValueTemplate = function filterValueTemplate(item) {
     return item.name;
   };
   return React__default.createElement("div", {
-    className: styles$1l['vitro-list'],
+    className: styles$1l['vitro-checkbox-list'],
     ref: ref
   }, React__default.createElement(SearchValueList, {
     itemList: props.itemList,
-    valueTemplate: getItemTemplate,
+    valueTemplate: getCheckbox,
     filterValueTemplate: filterValueTemplate,
     className: styles$1l['vitro-search-value-list']
   }));
@@ -67816,9 +67827,6 @@ 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, {
@@ -67836,10 +67844,11 @@ 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(List$1, {
+  }, React__default.createElement(CheckboxList, {
     ref: addFieldListRef,
-    itemList: props.fieldList,
-    onClick: onFieldListChange
+    itemList: props.checkboxFieldList,
+    onChange: props.onFieldListChange,
+    isAllSelected: props.isAllFieldsVisible
   })));
 });
 
@@ -67879,18 +67888,12 @@ var Search = function Search(props) {
     };
   }, []);
   React.useEffect(function () {
+    var checkboxList = props.fieldList;
     if (props.visibleFieldList) {
-      var visibleFieldList = [];
-      props.visibleFieldList.forEach(function (visibleField) {
-        var field = _extends({}, visibleField);
-        if (!visibleField.key) {
-          field.key = getUUID();
-        }
-        visibleFieldList.push(field);
-      });
-      setFilterFieldList(visibleFieldList);
+      setFilterFieldList(props.visibleFieldList);
+      checkboxList = getCheckboxFieldList(props.visibleFieldList);
     }
-    setCheckboxFieldList(props.fieldList);
+    setCheckboxFieldList(checkboxList);
   }, [props.visibleFieldList]);
   React.useEffect(function () {
     if (props.maxFieldCount) {
@@ -67909,32 +67912,21 @@ var Search = function Search(props) {
   }, [selectedSearchCriterionList]);
   React.useEffect(function () {
     if (props.searchCriterionList && props.searchCriterionList.length) {
-      var list = getSelectedCriterionList(getSeacrhCriterionWithKey(props.searchCriterionList));
+      var list = getSelectedCriterionList(props.searchCriterionList);
       setSelectedSearchCriterionList(list);
       var selectedFieldList = getSelectedFieldList(list);
       setFilterFieldList(selectedFieldList);
-      setCheckboxFieldList(props.fieldList);
+      setCheckboxFieldList(getCheckboxFieldList(selectedFieldList));
     } 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(props.fieldList);
+    setCheckboxFieldList(selectedFieldList);
     setIsShowAddFieldDialog(false);
     setIsShowDialog(false);
     setState(CTRL.EMPTY);
@@ -67945,16 +67937,19 @@ var Search = function Search(props) {
   var onAddField = function onAddField() {
     setIsShowAddFieldDialog(!isShowAddFieldDialog);
   };
-  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()
+  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;
       });
-      fieldList.push(fieldWithKey);
+      if (field) {
+        fieldList.push(field);
+      }
+    };
+    for (var _iterator = _createForOfIteratorHelperLoose(selectedFieldIdList), _step; !(_step = _iterator()).done;) {
+      _loop();
     }
     setFilterFieldList(fieldList);
   };
@@ -67965,22 +67960,37 @@ var Search = function Search(props) {
       setState(CTRL.EMPTY);
     }
   };
-  var onDeleteField = function onDeleteField(key) {
+  var onDeleteField = function onDeleteField(id) {
     setFilterFieldList(function (prevState) {
       return prevState.filter(function (field) {
-        return field.key !== key;
+        return field.id !== id;
       });
     });
-    setSearchCriterionList(function (prevState) {
-      return prevState.filter(function (criterion) {
-        return criterion.key !== key;
+    setCheckboxFieldList(function (prevState) {
+      return prevState.map(function (field) {
+        if (field.id === id) {
+          return _extends({}, field, {
+            value: false
+          });
+        } else {
+          return field;
+        }
       });
     });
+    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);
@@ -67990,23 +68000,10 @@ var Search = function Search(props) {
   };
   var onSearch = function onSearch(value, criterionList) {
     var list = criterionList ? criterionList : searchCriterionList;
-    props.onSearch(getSearchCriterionListWithoutKey(list));
+    props.onSearch(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) {
@@ -68024,13 +68021,24 @@ var Search = function Search(props) {
       var field = props.fieldList.find(function (field) {
         return field.internalName === x.internalName;
       });
-      var fieldWithKey = _extends({}, field, {
-        key: x.key
-      });
-      fieldList.push(fieldWithKey);
+      fieldList.push(field);
     });
     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([]);
@@ -68039,17 +68047,11 @@ 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],
-      key: key
+      valueList: [value]
     };
     setSearchCriterionList([criterion]);
   };
@@ -68071,13 +68073,6 @@ 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
@@ -68098,7 +68093,7 @@ var Search = function Search(props) {
     onAddField: onAddField,
     isShowAddFieldDialog: isShowAddFieldDialog,
     isMobileView: props.isMobileView,
-    fieldList: checkboxFieldList,
+    checkboxFieldList: checkboxFieldList,
     onFieldListChange: onFieldListChange,
     isAllFieldsVisible: props.isAllFieldsVisible,
     filterContainerRef: filterContainerRef,