@guillotinaweb/react-gmi 0.24.1 → 0.25.1

package/dist/react-gmi.esm.js

@@ -3017,6 +3017,45 @@ var Textarea = React.forwardRef(function (_ref, ref) {
   }, error ? error : ''));
 });
 
+var defaultEvents = ['mousedown', 'touchstart'];
+
+var on = function on(obj) {
+  return obj.addEventListener.apply(obj, [].slice.call(arguments, 1));
+};
+
+var off = function off(obj) {
+  return obj.removeEventListener.apply(obj, [].slice.call(arguments, 1));
+};
+
+function useClickAway(ref, onClickAway, events) {
+  if (events === void 0) {
+    events = defaultEvents;
+  }
+
+  var savedCallback = useRef(onClickAway);
+  useEffect(function () {
+    savedCallback.current = onClickAway;
+  }, [onClickAway]);
+  useEffect(function () {
+    var handler = function handler(event) {
+      var el = ref.current;
+      el && !el.contains(event.target) && savedCallback.current(event);
+    };
+
+    for (var _iterator = _createForOfIteratorHelperLoose(events), _step; !(_step = _iterator()).done;) {
+      var eventName = _step.value;
+      on(document, eventName, handler);
+    }
+
+    return function () {
+      for (var _iterator2 = _createForOfIteratorHelperLoose(events), _step2; !(_step2 = _iterator2()).done;) {
+        var eventName = _step2.value;
+        off(document, eventName, handler);
+      }
+    };
+  }, [events, ref]);
+}
+
 function debounce(func, wait) {
   var timeout;
   return function () {
@@ -3061,7 +3100,11 @@ var SearchInput = function SearchInput(_ref) {
       _ref$dataTestItem = _ref.dataTestItem,
       dataTestItem = _ref$dataTestItem === void 0 ? 'searchInputItemTest' : _ref$dataTestItem,
       _ref$renderTextItemOp = _ref.renderTextItemOption,
-      renderTextItemOption = _ref$renderTextItemOp === void 0 ? null : _ref$renderTextItemOp;
+      renderTextItemOption = _ref$renderTextItemOp === void 0 ? null : _ref$renderTextItemOp,
+      _ref$typeNameQuery = _ref.typeNameQuery,
+      typeNameQuery = _ref$typeNameQuery === void 0 ? null : _ref$typeNameQuery,
+      _ref$labelProperty = _ref.labelProperty,
+      labelProperty = _ref$labelProperty === void 0 ? 'id' : _ref$labelProperty;
   var intl = useIntl();
 
   var _useSetState = useSetState(initialState),
@@ -3083,8 +3126,19 @@ var SearchInput = function SearchInput(_ref) {
       PageSize = _useConfig.PageSize,
       SearchEngine = _useConfig.SearchEngine;
 
-  var _useState = useState(generateUID('search_input')),
-      uid = _useState[0];
+  var _useState = useState(undefined),
+      valueLabel = _useState[0],
+      setValueLabel = _useState[1];
+
+  var _useState2 = useState(false),
+      setIsLoadingData = _useState2[1];
+
+  var _useState3 = useState(generateUID('search_input')),
+      uid = _useState3[0];
+
+  useClickAway(wrapperRef, function () {
+    setIsOpen(false);
+  });
 
   var getHeight = function getHeight() {
     if (wrapperRef && wrapperRef.current) {
@@ -3098,10 +3152,52 @@ var SearchInput = function SearchInput(_ref) {
     };
   };
 
-  var delayedQuery = React.useCallback(debounce(function (value) {
+  var delayedQuery = useCallback(debounce(function (value) {
     return handleSearch(0, false, value);
   }, 500), []);
 
+  var inicializeLabels = function inicializeLabels() {
+    try {
+      var _temp2 = function () {
+        if (labelProperty !== 'id' && value) {
+          setIsLoadingData(true);
+          var searchTermQs = [];
+          var searchTermParsed = ["id", value];
+          var getSearch = traversal.registry.get;
+          var fnName = getSearch('searchEngineQueryParamsFunction', SearchEngine);
+          var qsParsed = traversal.client[fnName]({
+            path: traversal.path,
+            start: 0,
+            pageSize: PageSize,
+            withDepth: false
+          });
+          var typeNameParsed = [];
+
+          if (typeNameQuery) {
+            typeNameParsed = parser("type_name__in=" + typeNameQuery);
+          }
+
+          if (qs.length > 0 || searchTermParsed.length > 0 || qsParsed.length > 0 || typeNameParsed.length > 0) {
+            searchTermQs = buildQs([].concat(qs, [searchTermParsed], qsParsed, typeNameParsed));
+          }
+
+          return Promise.resolve(traversal.client.search(path ? path : traversal.client.getContainerFromPath(traversal.path), searchTermQs, false, false)).then(function (data) {
+            var newValuesLabel = data.items.reduce(function (result, item) {
+              result[item.id] = get$1(item, labelProperty, item.id);
+              return result;
+            }, {});
+            setValueLabel(newValuesLabel);
+            setIsLoadingData(false);
+          });
+        }
+      }();
+
+      return Promise.resolve(_temp2 && _temp2.then ? _temp2.then(function () {}) : void 0);
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+
   var handleSearch = function handleSearch(page, concat, value) {
     if (page === void 0) {
       page = 0;
@@ -3126,19 +3222,28 @@ var SearchInput = function SearchInput(_ref) {
         searchTermParsed = parser(queryCondition + "=" + value);
       }
 
-      var get = traversal.registry.get;
-      var fnName = get('searchEngineQueryParamsFunction', SearchEngine);
+      var _get = traversal.registry.get;
+
+      var fnName = _get('searchEngineQueryParamsFunction', SearchEngine);
+
       var qsParsed = traversal.client[fnName]({
         path: traversal.path,
         start: page * PageSize,
-        pageSize: PageSize
+        pageSize: PageSize,
+        withDepth: false
       });
+      var sortParsed = parser("_sort_des=title");
+      var typeNameParsed = [];
 
-      if (qs.length > 0 || searchTermParsed.length > 0 || qsParsed.length > 0) {
-        searchTermQs = buildQs([].concat(qs, searchTermParsed, qsParsed));
+      if (typeNameQuery) {
+        typeNameParsed = parser("type_name__in=" + typeNameQuery);
       }
 
-      return Promise.resolve(traversal.client.search(path, searchTermQs, false, false, page * PageSize, PageSize)).then(function (data) {
+      if (qs.length > 0 || searchTermParsed.length > 0 || qsParsed.length > 0 || typeNameParsed.length > 0) {
+        searchTermQs = buildQs([].concat(qs, searchTermParsed, qsParsed, typeNameParsed, sortParsed));
+      }
+
+      return Promise.resolve(traversal.client.search(path ? path : traversal.client.getContainerFromPath(traversal.path), searchTermQs, false, false)).then(function (data) {
         var _data$items_total;
 
         var newItems = options.items && concat ? [].concat(options.items, data.items) : data.items;
@@ -3162,20 +3267,24 @@ var SearchInput = function SearchInput(_ref) {
     return item.title || item['@name'];
   };
 
-  React.useEffect(function () {
-    if (path && !options.loading && !options.items) {
-
-      try {
-        handleSearch(options.page);
-      } catch (e) {
-        Promise.reject(e);
-      }
+  useEffect(function () {
+    if (value) {
+      inicializeLabels();
+    } else {
+      setValueLabel({});
     }
-  }, [path, options.loading, options.items]);
+  }, [path, value]);
+
+  if (valueLabel === undefined) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "spinner"
+    });
+  }
+
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     "data-test": dataTestWrapper,
     ref: wrapperRef,
-    className: "dropdown " + (isOpen ? 'is-active' : ''),
+    className: "dropdown mb-2 " + (isOpen ? 'is-active' : ''),
     onBlur: function onBlur(ev) {
       if (!ev.currentTarget.contains(ev.relatedTarget)) {
         if (searchTerm !== '') {
@@ -3183,7 +3292,7 @@ var SearchInput = function SearchInput(_ref) {
           setOptions(initialState);
         }
 
-        setIsOpen(!isOpen);
+        setIsOpen(false);
       }
     }
   }, /*#__PURE__*/React.createElement("div", {
@@ -3191,12 +3300,16 @@ var SearchInput = function SearchInput(_ref) {
   }, /*#__PURE__*/React.createElement("button", {
     className: "button " + btnClass,
     onClick: function onClick(ev) {
-      ev.preventDefault();
+      ev.target.blur();
       setIsOpen(!isOpen);
+
+      if (!options.loading && !options.items) {
+        handleSearch(options.page);
+      }
     },
     "aria-haspopup": "true",
     "aria-controls": "dropdown-menu"
-  }, /*#__PURE__*/React.createElement("span", null, value && value.title ? value.title : 'Choose...'), /*#__PURE__*/React.createElement("span", {
+  }, /*#__PURE__*/React.createElement("span", null, value ? get$1(valueLabel, value, value) : intl.formatMessage(genericMessages.choose)), /*#__PURE__*/React.createElement("span", {
     className: "icon"
   }, /*#__PURE__*/React.createElement("i", {
     className: "fas fa-angle-down",
@@ -3224,12 +3337,16 @@ var SearchInput = function SearchInput(_ref) {
   })), /*#__PURE__*/React.createElement("hr", {
     className: "dropdown-divider"
   }), options.loading && /*#__PURE__*/React.createElement(Loading, null), options.items && options.items.map(function (item) {
-    return /*#__PURE__*/React.createElement("a", {
-      href: "#",
-      className: "dropdown-item editable " + (value && value.id === item.id ? 'is-active' : ''),
+    return /*#__PURE__*/React.createElement("div", {
+      className: "dropdown-item editable " + (value === item.id ? 'is-active' : ''),
       "data-test": dataTestItem + "-" + item.id,
-      onMouseDown: function onMouseDown() {
-        onChange && onChange(item);
+      onMouseDown: function onMouseDown(ev) {
+        ev.preventDefault();
+
+        if (onChange) {
+          onChange(item.id);
+        }
+
         setIsOpen(false);
       },
       key: item.path
@@ -3252,11 +3369,20 @@ var SearchInput = function SearchInput(_ref) {
 };
 SearchInput.propTypes = {
   onChange: PropTypes.func,
-  value: PropTypes.object,
-  client: PropTypes.object,
+  value: PropTypes.string,
   path: PropTypes.string,
-  PageSize: PropTypes.number,
-  btnClass: PropTypes.string
+  btnClass: PropTypes.string,
+  error: PropTypes.string,
+  errorZoneClassName: PropTypes.string,
+  traversal: PropTypes.object,
+  qs: PropTypes.array,
+  queryCondition: PropTypes.string,
+  dataTestWrapper: PropTypes.string,
+  dataTestSearchInput: PropTypes.string,
+  dataTestItem: PropTypes.string,
+  renderTextItemOption: PropTypes.func,
+  typeNameQuery: PropTypes.string,
+  labelProperty: PropTypes.string
 };
 
 var InputList = forwardRef(function (_ref, ref) {
@@ -3315,45 +3441,6 @@ var InputList = forwardRef(function (_ref, ref) {
   }));
 });
 
-var defaultEvents = ['mousedown', 'touchstart'];
-
-var on = function on(obj) {
-  return obj.addEventListener.apply(obj, [].slice.call(arguments, 1));
-};
-
-var off = function off(obj) {
-  return obj.removeEventListener.apply(obj, [].slice.call(arguments, 1));
-};
-
-function useClickAway(ref, onClickAway, events) {
-  if (events === void 0) {
-    events = defaultEvents;
-  }
-
-  var savedCallback = useRef(onClickAway);
-  useEffect(function () {
-    savedCallback.current = onClickAway;
-  }, [onClickAway]);
-  useEffect(function () {
-    var handler = function handler(event) {
-      var el = ref.current;
-      el && !el.contains(event.target) && savedCallback.current(event);
-    };
-
-    for (var _iterator = _createForOfIteratorHelperLoose(events), _step; !(_step = _iterator()).done;) {
-      var eventName = _step.value;
-      on(document, eventName, handler);
-    }
-
-    return function () {
-      for (var _iterator2 = _createForOfIteratorHelperLoose(events), _step2; !(_step2 = _iterator2()).done;) {
-        var eventName = _step2.value;
-        off(document, eventName, handler);
-      }
-    };
-  }, [events, ref]);
-}
-
 function Dropdown(_ref) {
   var children = _ref.children,
       disabled = _ref.disabled,
@@ -3821,12 +3908,98 @@ var getDefaultValueEditableField = function getDefaultValueEditableField(intl) {
   });
 };
 
-var VocabularyRenderField = function VocabularyRenderField(_ref3) {
-  var _schema$items;
-
+var SearchRenderField = function SearchRenderField(_ref3) {
   var schema = _ref3.schema,
       value = _ref3.value,
       modifyContent = _ref3.modifyContent;
+
+  var _useState = useState([]),
+      valuesLabels = _useState[0],
+      setValuesLabels = _useState[1];
+
+  var _useState2 = useState(false),
+      isLoadingData = _useState2[0],
+      setIsLoadingData = _useState2[1];
+
+  var traversal = useTraversal();
+
+  var _useConfig = useConfig(),
+      SearchEngine = _useConfig.SearchEngine;
+
+  useEffect(function () {
+    var fetchData = function fetchData(valuesToSearch) {
+      try {
+        setIsLoadingData(true);
+        var searchTermQs = [];
+        var searchTermParsed = ['__or', "id=" + valuesToSearch.join('%26id=')];
+        var getSearch = traversal.registry.get;
+        var fnName = getSearch('searchEngineQueryParamsFunction', SearchEngine);
+        var qsParsed = traversal.client[fnName]({
+          path: traversal.path,
+          start: 0,
+          pageSize: 100,
+          withDepth: false
+        });
+
+        if (searchTermParsed.length > 0 || qsParsed.length > 0) {
+          searchTermQs = buildQs([searchTermParsed].concat(qsParsed));
+        }
+
+        return Promise.resolve(traversal.client.search(traversal.client.getContainerFromPath(traversal.path), searchTermQs, false, false, 0, 100)).then(function (data) {
+          var newValuesLabel = data.items.map(function (item) {
+            var _schema$labelProperty;
+
+            return get$1(item, (_schema$labelProperty = schema == null ? void 0 : schema.labelProperty) != null ? _schema$labelProperty : 'title', item.id);
+          });
+          setValuesLabels(newValuesLabel);
+          setIsLoadingData(false);
+        });
+      } catch (e) {
+        return Promise.reject(e);
+      }
+    };
+
+    var valuesToSearch = value;
+
+    if (typeof valuesToSearch === 'string') {
+      valuesToSearch = [valuesToSearch];
+    }
+
+    if (valuesToSearch !== undefined && valuesToSearch.length > 0) {
+      fetchData(valuesToSearch);
+    } else {
+      setValuesLabels([]);
+    }
+  }, [value]);
+
+  var getRenderValue = function getRenderValue() {
+    console.log('get render values', value, valuesLabels);
+
+    if (value === undefined) {
+      if (modifyContent) {
+        return DEFAULT_VALUE_EDITABLE_FIELD;
+      }
+
+      return DEFAULT_VALUE_NO_EDITABLE_FIELD;
+    }
+
+    if (isLoadingData) {
+      return 'Loading...';
+    }
+
+    return valuesLabels;
+  };
+
+  return /*#__PURE__*/React.createElement(RenderField, {
+    value: getRenderValue()
+  });
+};
+var VocabularyRenderField = function VocabularyRenderField(_ref4) {
+  var _schema$items;
+
+  var schema = _ref4.schema,
+      value = _ref4.value,
+      modifyContent = _ref4.modifyContent;
   var intl = useIntl();
   var DEFAULT_VALUE_EDITABLE_FIELD = getDefaultValueEditableField(intl);
   var vocabularyName = (schema == null ? void 0 : (_schema$items = schema.items) == null ? void 0 : _schema$items.vocabularyName) || (schema == null ? void 0 : schema.vocabularyName);
@@ -3861,11 +4034,11 @@ var VocabularyRenderField = function VocabularyRenderField(_ref3) {
 
   return /*#__PURE__*/React.createElement(RenderField, getRenderProps());
 };
-function RenderFieldComponent(_ref4) {
-  var schema = _ref4.schema,
-      field = _ref4.field,
-      val = _ref4.val,
-      modifyContent = _ref4.modifyContent;
+function RenderFieldComponent(_ref5) {
+  var schema = _ref5.schema,
+      field = _ref5.field,
+      val = _ref5.val,
+      modifyContent = _ref5.modifyContent;
   var intl = useIntl();
   var DEFAULT_VALUE_EDITABLE_FIELD = getDefaultValueEditableField(intl);
 
@@ -3891,6 +4064,10 @@ function RenderFieldComponent(_ref4) {
     } else if (schema != null && (_schema$items2 = schema.items) != null && _schema$items2.vocabularyName || schema != null && schema.vocabularyName) {
       renderProps['Widget'] = VocabularyRenderField;
       renderProps['schema'] = schema;
+    } else if ((schema == null ? void 0 : schema.widget) === 'search' || (schema == null ? void 0 : schema.widget) === 'search_list') {
+      renderProps['Widget'] = SearchRenderField;
+      renderProps['value'] = val;
+      renderProps['schema'] = schema;
     }
 
     return renderProps;
@@ -3967,6 +4144,353 @@ Select.propTypes = {
   vocabularyName: PropTypes.string
 };
 
+var _SearchInputList$prop;
+
+function debounce$1(func, wait) {
+  var timeout;
+  return function () {
+    var context = this;
+    var args = arguments;
+
+    var later = function later() {
+      timeout = null;
+      func.apply(context, args);
+    };
+
+    clearTimeout(timeout);
+    timeout = setTimeout(later, wait);
+  };
+}
+
+var initialState$1 = {
+  page: 0,
+  items: undefined,
+  loading: false,
+  items_total: 0
+};
+var SearchInputList = function SearchInputList(_ref) {
+  var onChange = _ref.onChange,
+      error = _ref.error,
+      errorZoneClassName = _ref.errorZoneClassName,
+      _ref$traversal = _ref.traversal,
+      traversal = _ref$traversal === void 0 ? null : _ref$traversal,
+      _ref$path = _ref.path,
+      path = _ref$path === void 0 ? null : _ref$path,
+      _ref$qs = _ref.qs,
+      qs = _ref$qs === void 0 ? [] : _ref$qs,
+      _ref$queryCondition = _ref.queryCondition,
+      queryCondition = _ref$queryCondition === void 0 ? 'id__in' : _ref$queryCondition,
+      value = _ref.value,
+      _ref$btnClass = _ref.btnClass,
+      btnClass = _ref$btnClass === void 0 ? '' : _ref$btnClass,
+      _ref$dataTestWrapper = _ref.dataTestWrapper,
+      dataTestWrapper = _ref$dataTestWrapper === void 0 ? 'wrapperSearchInputTest' : _ref$dataTestWrapper,
+      _ref$dataTestSearchIn = _ref.dataTestSearchInput,
+      dataTestSearchInput = _ref$dataTestSearchIn === void 0 ? 'searchInputTest' : _ref$dataTestSearchIn,
+      _ref$dataTestItem = _ref.dataTestItem,
+      dataTestItem = _ref$dataTestItem === void 0 ? 'searchInputItemTest' : _ref$dataTestItem,
+      _ref$renderTextItemOp = _ref.renderTextItemOption,
+      renderTextItemOption = _ref$renderTextItemOp === void 0 ? null : _ref$renderTextItemOp,
+      _ref$typeNameQuery = _ref.typeNameQuery,
+      typeNameQuery = _ref$typeNameQuery === void 0 ? null : _ref$typeNameQuery,
+      _ref$labelProperty = _ref.labelProperty,
+      labelProperty = _ref$labelProperty === void 0 ? 'id' : _ref$labelProperty;
+  var intl = useIntl();
+
+  var _useSetState = useSetState(initialState$1),
+      options = _useSetState[0],
+      setOptions = _useSetState[1];
+
+  var _useState = useState(undefined),
+      valuesLabel = _useState[0],
+      setValuesLabels = _useState[1];
+
+  var _React$useState = React.useState(false),
+      isOpen = _React$useState[0],
+      setIsOpen = _React$useState[1];
+
+  var _React$useState2 = React.useState(''),
+      searchTerm = _React$useState2[0],
+      setSearchTerm = _React$useState2[1];
+
+  var inputRef = React.useRef(null);
+  var wrapperRef = React.useRef(null);
+
+  var _useConfig = useConfig(),
+      PageSize = _useConfig.PageSize,
+      SearchEngine = _useConfig.SearchEngine;
+
+  var _useState2 = useState(false),
+      isLoadingData = _useState2[0],
+      setIsLoadingData = _useState2[1];
+
+  var _useState3 = useState(generateUID('search_input')),
+      uid = _useState3[0];
+
+  useClickAway(wrapperRef, function () {
+    setIsOpen(false);
+  });
+
+  var getHeight = function getHeight() {
+    if (wrapperRef && wrapperRef.current) {
+      return {
+        maxHeight: window.innerHeight - wrapperRef.current.getBoundingClientRect().top - 100 + "px"
+      };
+    }
+
+    return {
+      maxHeight: 'auto'
+    };
+  };
+
+  var delayedQuery = useCallback(debounce$1(function (value) {
+    return handleSearch(0, false, value);
+  }, 500), []);
+
+  var handleSearch = function handleSearch(page, concat, value) {
+    if (page === void 0) {
+      page = 0;
+    }
+
+    if (concat === void 0) {
+      concat = false;
+    }
+
+    if (value === void 0) {
+      value = '';
+    }
+
+    try {
+      setOptions({
+        loading: true
+      });
+      var searchTermQs = [];
+      var searchTermParsed = [];
+
+      if (value !== '') {
+        searchTermParsed = parser(queryCondition + "=" + value);
+      }
+
+      var _get = traversal.registry.get;
+
+      var fnName = _get('searchEngineQueryParamsFunction', SearchEngine);
+
+      var qsParsed = traversal.client[fnName]({
+        path: traversal.path,
+        start: page * PageSize,
+        pageSize: PageSize,
+        withDepth: false
+      });
+      var sortParsed = parser("_sort_des=title");
+      var typeNameParsed = [];
+
+      if (typeNameQuery) {
+        typeNameParsed = parser("type_name__in=" + typeNameQuery);
+      }
+
+      if (qs.length > 0 || searchTermParsed.length > 0 || qsParsed.length > 0 || typeNameParsed.length > 0) {
+        searchTermQs = buildQs([].concat(qs, searchTermParsed, qsParsed, typeNameParsed, sortParsed));
+      }
+
+      return Promise.resolve(traversal.client.search(path ? path : traversal.client.getContainerFromPath(traversal.path), searchTermQs, false, false)).then(function (data) {
+        var _data$items_total;
+
+        var newItems = options.items && concat ? [].concat(options.items, data.items) : data.items;
+        setOptions({
+          items: newItems != null ? newItems : [],
+          loading: false,
+          items_total: (_data$items_total = data.items_total) != null ? _data$items_total : 0,
+          page: page
+        });
+      });
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+
+  var inicializeLabels = function inicializeLabels() {
+    try {
+      var _temp2 = function () {
+        if (labelProperty !== 'id' && value.length > 0) {
+          setIsLoadingData(true);
+          var searchTermQs = [];
+          var searchTermParsed = ['__or', "id=" + value.join('%26id=')];
+          var getSearch = traversal.registry.get;
+          var fnName = getSearch('searchEngineQueryParamsFunction', SearchEngine);
+          var qsParsed = traversal.client[fnName]({
+            path: traversal.path,
+            start: 0,
+            pageSize: 100,
+            withDepth: false
+          });
+          var typeNameParsed = [];
+
+          if (typeNameQuery) {
+            typeNameParsed = parser("type_name__in=" + typeNameQuery);
+          }
+
+          if (qs.length > 0 || searchTermParsed.length > 0 || qsParsed.length > 0 || typeNameParsed.length > 0) {
+            searchTermQs = buildQs([].concat(qs, [searchTermParsed], qsParsed, typeNameParsed));
+          }
+
+          return Promise.resolve(traversal.client.search(path ? path : traversal.client.getContainerFromPath(traversal.path), searchTermQs, false, false, 0, 100)).then(function (data) {
+            var newValuesLabel = data.items.reduce(function (result, item) {
+              result[item.id] = get$1(item, labelProperty, item.id);
+              return result;
+            }, {});
+            setValuesLabels(newValuesLabel);
+            setIsLoadingData(false);
+          });
+        }
+      }();
+
+      return Promise.resolve(_temp2 && _temp2.then ? _temp2.then(function () {}) : void 0);
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+
+  var renderTextItemOptionFn = function renderTextItemOptionFn(item) {
+    if (renderTextItemOption) {
+      return renderTextItemOption(item);
+    }
+
+    return item.title || item['@name'];
+  };
+
+  React.useEffect(function () {
+    if (!options.loading && !options.items && value.length > 0) {
+      inicializeLabels();
+    } else if (value.length === 0) {
+      setValuesLabels({});
+    }
+  }, [path, options.loading, options.items]);
+
+  if (isLoadingData || valuesLabel === undefined) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "spinner"
+    });
+  }
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "tags mb-2"
+  }, value.map(function (tag, index) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: "input_list_" + tag + "_" + index,
+      className: "tag is-info is-medium"
+    }, get$1(valuesLabel, tag, tag), /*#__PURE__*/React.createElement("button", {
+      className: "delete is-small",
+      onClick: function onClick(ev) {
+        ev.stopPropagation();
+        ev.preventDefault();
+        onChange([].concat(value.filter(function (tag) {
+          return value.indexOf(tag) !== index;
+        })));
+      }
+    }));
+  })), /*#__PURE__*/React.createElement("div", {
+    "data-test": dataTestWrapper,
+    ref: wrapperRef,
+    className: "dropdown mb-2 " + (isOpen ? 'is-active' : ''),
+    onBlur: function onBlur(ev) {
+      if (!ev.currentTarget.contains(ev.relatedTarget)) {
+        if (searchTerm !== '') {
+          setSearchTerm('');
+          setOptions(initialState$1);
+        }
+
+        setIsOpen(false);
+      }
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "dropdown-trigger"
+  }, /*#__PURE__*/React.createElement("button", {
+    className: "button " + btnClass,
+    onClick: function onClick(ev) {
+      ev.preventDefault();
+      setIsOpen(!isOpen);
+
+      if (!options.loading && !options.items) {
+        handleSearch(options.page);
+      }
+    },
+    "aria-haspopup": "true",
+    "aria-controls": "dropdown-menu"
+  }, /*#__PURE__*/React.createElement("span", null, intl.formatMessage(genericMessages.choose)), /*#__PURE__*/React.createElement("span", {
+    className: "icon"
+  }, /*#__PURE__*/React.createElement("i", {
+    className: "fas fa-angle-down",
+    "aria-hidden": "true"
+  })))), /*#__PURE__*/React.createElement("div", {
+    className: "dropdown-menu",
+    id: "dropdown-menu",
+    role: "menu",
+    style: getHeight()
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "dropdown-content"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "dropdown-item"
+  }, /*#__PURE__*/React.createElement("input", {
+    ref: inputRef,
+    "data-test": dataTestSearchInput,
+    className: "input",
+    type: "text",
+    placeholder: intl.formatMessage(genericMessages.search),
+    value: searchTerm,
+    onChange: function onChange(ev) {
+      delayedQuery(ev.target.value);
+      setSearchTerm(ev.target.value);
+    }
+  })), /*#__PURE__*/React.createElement("hr", {
+    className: "dropdown-divider"
+  }), options.loading && /*#__PURE__*/React.createElement(Loading, null), options.items && options.items.map(function (item) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "dropdown-item editable " + (value && value.id === item.id ? 'is-active' : ''),
+      "data-test": dataTestItem + "-" + item.id,
+      onMouseDown: function onMouseDown(ev) {
+        ev.stopPropagation();
+        ev.preventDefault();
+
+        if (onChange && !value.includes(item.id)) {
+          var _extends2;
+
+          setValuesLabels(_extends({}, valuesLabel, (_extends2 = {}, _extends2[item.id] = get$1(item, labelProperty, item.id), _extends2)));
+          onChange([].concat(value, [item.id]));
+        }
+      },
+      key: item.path
+    }, renderTextItemOptionFn(item));
+  }), options.items && options.items.length === 0 && /*#__PURE__*/React.createElement("div", {
+    className: "dropdown-item"
+  }, intl.formatMessage(genericMessages.no_results)), options.items && options.items_total > options.items.length && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("hr", {
+    className: "dropdown-divider"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "dropdown-item editable",
+    onMouseDown: function onMouseDown(ev) {
+      ev.stopPropagation();
+      ev.preventDefault();
+      handleSearch(options.page + 1, true);
+    }
+  }, intl.formatMessage(genericMessages.load_more)))))), error && /*#__PURE__*/React.createElement(ErrorZone, {
+    className: errorZoneClassName,
+    id: uid
+  }, error ? error : ''));
+};
+SearchInputList.propTypes = (_SearchInputList$prop = {
+  onChange: PropTypes.func,
+  path: PropTypes.string,
+  btnClass: PropTypes.string,
+  dataTestWrapper: PropTypes.string,
+  dataTestSearchInput: PropTypes.string,
+  dataTestItem: PropTypes.string,
+  renderTextItemOption: PropTypes.func,
+  typeNameQuery: PropTypes.string,
+  labelProperty: PropTypes.string,
+  error: PropTypes.string,
+  errorZoneClassName: PropTypes.string,
+  traversal: PropTypes.object
+}, _SearchInputList$prop["path"] = PropTypes.string, _SearchInputList$prop.qs = PropTypes.array, _SearchInputList$prop.queryCondition = PropTypes.string, _SearchInputList$prop);
+
 var EditComponent = React.forwardRef(function (_ref, ref) {
   var schema = _ref.schema,
       val = _ref.val,
@@ -3975,7 +4499,41 @@ var EditComponent = React.forwardRef(function (_ref, ref) {
       className = _ref.className,
       rest = _objectWithoutPropertiesLoose(_ref, ["schema", "val", "setValue", "dataTest", "className"]);
 
-  if ((schema == null ? void 0 : schema.widget) === 'textarea' || (schema == null ? void 0 : schema.widget) === 'richtext') {
+  var traversal = useTraversal();
+
+  if ((schema == null ? void 0 : schema.widget) === 'search_list') {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, rest.placeholder && /*#__PURE__*/React.createElement("label", {
+      className: "label"
+    }, rest.placeholder), /*#__PURE__*/React.createElement(SearchInputList, _extends({
+      value: val || [],
+      traversal: traversal,
+      className: className,
+      onChange: function onChange(ev) {
+        return setValue(ev);
+      },
+      queryCondition: schema != null && schema.queryCondition ? schema.queryCondition : 'title__in',
+      dataTest: dataTest,
+      path: schema.queryPath,
+      labelProperty: schema != null && schema.labelProperty ? schema.labelProperty : 'title',
+      typeNameQuery: schema != null && schema.typeNameQuery ? schema.typeNameQuery : null
+    }, rest)));
+  } else if ((schema == null ? void 0 : schema.widget) === 'search') {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, rest.placeholder && /*#__PURE__*/React.createElement("label", {
+      className: "label"
+    }, rest.placeholder), /*#__PURE__*/React.createElement(SearchInput, _extends({
+      value: val,
+      traversal: traversal,
+      className: className,
+      onChange: function onChange(ev) {
+        return setValue(ev);
+      },
+      queryCondition: schema != null && schema.queryCondition ? schema.queryCondition : 'title__in',
+      dataTest: dataTest,
+      path: schema.queryPath,
+      labelProperty: schema != null && schema.labelProperty ? schema.labelProperty : 'title',
+      typeNameQuery: schema != null && schema.typeNameQuery ? schema.typeNameQuery : null
+    }, rest)));
+  } else if ((schema == null ? void 0 : schema.widget) === 'textarea' || (schema == null ? void 0 : schema.widget) === 'richtext') {
     return /*#__PURE__*/React.createElement(Textarea, _extends({
       value: val || '',
       className: className,
@@ -4106,15 +4664,19 @@ EditComponent.displayName = 'EditComponent';
 function IAttachment(_ref) {
   var properties = _ref.properties,
       values = _ref.values;
+  var intl = useIntl();
   var Ctx = useTraversal();
   var modifyContent = Ctx.hasPerm('guillotina.ModifyContent');
   return /*#__PURE__*/React.createElement(Table, {
-    headers: ['Field', 'Value'],
+    headers: [intl.formatMessage(genericMessages.property), intl.formatMessage(genericMessages.value)],
     className: "is-striped is-fullwidth is-size-7"
   }, Object.keys(properties).map(function (key) {
     return /*#__PURE__*/React.createElement("tr", {
       key: 'attachment_' + key
     }, /*#__PURE__*/React.createElement("td", {
+      style: {
+        width: '150px'
+      },
       key: 1
     }, key), /*#__PURE__*/React.createElement("td", {
       key: 2
@@ -4210,7 +4772,7 @@ function IMultiAttachment(_ref) {
   };
 
   return /*#__PURE__*/React.createElement(Table, {
-    headers: ['Field', 'Value'],
+    headers: [intl.formatMessage(genericMessages.property), intl.formatMessage(genericMessages.value)],
     className: "is-striped is-fullwidth is-size-7"
   }, fileKeyToDelete && /*#__PURE__*/React.createElement(Confirm, {
     loading: loading,
@@ -4227,7 +4789,10 @@ function IMultiAttachment(_ref) {
     return /*#__PURE__*/React.createElement("tr", {
       key: 'multiattachment_' + key
     }, /*#__PURE__*/React.createElement("td", {
-      key: 1
+      key: 1,
+      style: {
+        width: '150px'
+      }
     }, key), /*#__PURE__*/React.createElement("td", {
       key: 2
     }, /*#__PURE__*/React.createElement("div", {
@@ -4515,7 +5080,7 @@ function IImageAttachment(_ref) {
   };
 
   return /*#__PURE__*/React.createElement(Table, {
-    headers: ['Field', 'Value'],
+    headers: [intl.formatMessage(genericMessages.property), intl.formatMessage(genericMessages.value)],
     className: "is-striped is-fullwidth is-size-7"
   }, showConfirmToDelete && /*#__PURE__*/React.createElement(Confirm, {
     loading: loading,
@@ -4527,7 +5092,10 @@ function IImageAttachment(_ref) {
     },
     message: intl.formatMessage(genericFileMessages.confirm_message_delete_image)
   }), values['image'] && /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
-    key: 1
+    key: 1,
+    style: {
+      width: '150px'
+    }
   }, intl.formatMessage(genericMessages.image)), /*#__PURE__*/React.createElement("td", {
     key: 2
   }, /*#__PURE__*/React.createElement("div", {
@@ -4817,7 +5385,7 @@ function IMultiImageAttachment(_ref) {
   };
 
   return /*#__PURE__*/React.createElement(Table, {
-    headers: ['Field', 'Value'],
+    headers: [intl.formatMessage(genericMessages.property), intl.formatMessage(genericMessages.value)],
     className: "is-striped is-fullwidth is-size-7"
   }, fileKeyToDelete && /*#__PURE__*/React.createElement(Confirm, {
     loading: loading,
@@ -4834,7 +5402,10 @@ function IMultiImageAttachment(_ref) {
     return /*#__PURE__*/React.createElement("tr", {
       key: "multiimageattachment_" + key
     }, /*#__PURE__*/React.createElement("td", {
-      key: 1
+      key: 1,
+      style: {
+        width: '150px'
+      }
     }, key), /*#__PURE__*/React.createElement("td", {
       key: 2
     }, /*#__PURE__*/React.createElement("div", {
@@ -6315,7 +6886,7 @@ function SearchVocabularyLabels(props) {
   return null;
 }
 
-var initialState$1 = {
+var initialState$2 = {
   page: 0,
   items: [],
   loading: true,
@@ -6334,7 +6905,7 @@ function PanelItems() {
   var intl = useIntl();
   var Ctx = useTraversal();
 
-  var _useSetState = useSetState(initialState$1),
+  var _useSetState = useSetState(initialState$2),
       state = _useSetState[0],
       setState = _useSetState[1];
 
@@ -6784,7 +7355,7 @@ function PanelProperties() {
     icon: model.icon,
     align: "is-left",
     className: "has-text-grey"
-  }), ' ', "\xA0", /*#__PURE__*/React.createElement("span", null, Ctx.context.title || Ctx.context['@name']))), /*#__PURE__*/React.createElement("div", {
+  }), "\xA0", /*#__PURE__*/React.createElement("span", null, Ctx.context.title || Ctx.context['@name']))), /*#__PURE__*/React.createElement("div", {
     className: "level-right"
   }, /*#__PURE__*/React.createElement(PropertiesButtonView, null))), /*#__PURE__*/React.createElement("hr", null), schema && schema.data && !schema.loading && /*#__PURE__*/React.createElement("div", {
     className: "columns"
@@ -6793,13 +7364,20 @@ function PanelProperties() {
   }, /*#__PURE__*/React.createElement("table", {
     className: "table is-striped is-fullwidth is-size-7"
   }, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("th", {
+    style: {
+      width: '150px'
+    },
     className: "is-2"
   }, intl.formatMessage(genericMessages.property)), /*#__PURE__*/React.createElement("th", {
     className: "is-8"
   }, intl.formatMessage(genericMessages.value)))), /*#__PURE__*/React.createElement("tbody", null, showProperties.map(function (prop) {
     return /*#__PURE__*/React.createElement("tr", {
       key: 'prop' + prop
-    }, /*#__PURE__*/React.createElement("td", null, prop), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(EditableField, {
+    }, /*#__PURE__*/React.createElement("td", {
+      style: {
+        width: '150px'
+      }
+    }, prop), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(EditableField, {
       field: prop,
       value: Ctx.context[prop],
       modifyContent: false
@@ -6807,6 +7385,9 @@ function PanelProperties() {
   }))), properties.length > 0 && /*#__PURE__*/React.createElement("table", {
     className: "table is-striped is-fullwidth is-size-7"
   }, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("th", {
+    style: {
+      width: '150px'
+    },
     className: "is-2"
   }, intl.formatMessage(genericMessages.property)), /*#__PURE__*/React.createElement("th", {
     className: "is-8"
@@ -6815,7 +7396,11 @@ function PanelProperties() {
         value = _ref.value;
     return /*#__PURE__*/React.createElement("tr", {
       key: 'prop' + key
-    }, /*#__PURE__*/React.createElement("td", null, value.title || key), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(EditableField, {
+    }, /*#__PURE__*/React.createElement("td", {
+      style: {
+        width: '150px'
+      }
+    }, value.title || key), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(EditableField, {
       field: key,
       value: Ctx.context[key],
       schema: value,
@@ -7546,13 +8131,13 @@ function TagsWidget(_ref) {
 
 /* eslint jsx-a11y/anchor-is-valid: "off" */
 
-var initialState$2 = {
+var initialState$3 = {
   types: undefined
 };
 function CreateButton() {
   var intl = useIntl();
 
-  var _useSetState = useSetState(initialState$2),
+  var _useSetState = useSetState(initialState$3),
       state = _useSetState[0],
       setState = _useSetState[1];
 
@@ -7638,7 +8223,7 @@ function ContextToolbar(_ref) {
 
   var intl = useIntl();
 
-  var _useSetState2 = useSetState(initialState$2),
+  var _useSetState2 = useSetState(initialState$3),
       state = _useSetState2[0],
       setState = _useSetState2[1];
 
@@ -8833,15 +9418,19 @@ var editableFields = ['title', 'description', 'effective_date', 'expiration_date
 function IDublinCore(_ref) {
   var properties = _ref.properties,
       values = _ref.values;
+  var intl = useIntl();
   var Ctx = useTraversal();
   var modifyContent = Ctx.hasPerm('guillotina.ModifyContent');
   return /*#__PURE__*/React.createElement(Table, {
-    headers: ['Field', 'Value'],
+    headers: [intl.formatMessage(genericMessages.property), intl.formatMessage(genericMessages.value)],
     className: "is-striped is-fullwidth is-size-7"
   }, Object.keys(properties).map(function (key) {
     return /*#__PURE__*/React.createElement("tr", {
       key: 'dublin_' + key
     }, /*#__PURE__*/React.createElement("td", {
+      style: {
+        width: '150px'
+      },
       key: 1
     }, key), /*#__PURE__*/React.createElement("td", {
       key: 2
@@ -9052,13 +9641,13 @@ function GroupCtx() {
     }
   };
 
-  var addUser = function addUser(newUser) {
+  var addUser = function addUser(newUserId) {
     try {
       var data = {};
       Ctx.context.users.forEach(function (user) {
         data[user] = true;
       });
-      data[newUser.id] = true;
+      data[newUserId] = true;
       return Promise.resolve(Ctx.client.rest.patch(Ctx.containerPath + "@groups/" + Ctx.context['@name'], {
         users: data
       })).then(function (_ref3) {
@@ -9077,7 +9666,7 @@ function GroupCtx() {
             "value": " added to group"
           }]
         }, {
-          user: newUser.id
+          user: newUserId
         }), errorMessage);
       });
     } catch (e) {
@@ -9548,7 +10137,7 @@ const registry = {
 
 */
 
-var initialState$3 = {
+var initialState$4 = {
   path: '',
   loading: false,
   context: undefined,
@@ -12451,10 +13040,10 @@ function Guillotina(_ref) {
   var searchPath = location.get('path') || '/';
 
   if (searchPath && searchPath !== '') {
-    initialState$3.path = searchPath;
+    initialState$4.path = searchPath;
   }
 
-  var _useReducer = useReducer(guillotinaReducer, initialState$3),
+  var _useReducer = useReducer(guillotinaReducer, initialState$4),
       state = _useReducer[0],
       dispatch = _useReducer[1];
 
@@ -12606,7 +13195,7 @@ var ERRORS = {
   failed_to_fetch: 'Failed to fetch data: Backend not running?',
   invalid_credentials: 'Failed! Invalid credentials'
 };
-var initialState$4 = {
+var initialState$5 = {
   username: '',
   password: '',
   loading: undefined,
@@ -12619,7 +13208,7 @@ var Login = function Login(_ref) {
       auth = _ref.auth,
       onLogin = _ref.onLogin;
 
-  var _useSetState = useSetState(initialState$4),
+  var _useSetState = useSetState(initialState$5),
       state = _useSetState[0],
       setState = _useSetState[1];
 
@@ -13100,5 +13689,5 @@ var Auth = /*#__PURE__*/function () {
   return Auth;
 }();
 
-export { AddItem, AddPermission, AllItemsCheckbox, ApplicationCtx, Auth, AuthContext, BaseForm, BehaviorNotImplemented, BehaviorsView, Button, Checkbox, ClientContext, ClientProvider, Config, Confirm, ContainerCtx, ContextToolbar, CreateButton, CreateContainer, DatabaseCtx, Delete, DownloadField, EditComponent, EditableField, EmailInput, FileUpload, Flash, FolderCtx, Form, FormBuilder, GroupCtx, GroupToolbar, GroupsCtx, Guillotina, GuillotinaClient, IAttachment, IImageAttachment, IMultiAttachment, IMultiImageAttachment, IMultiImageOrderedAttachment, IWorkflow, Icon, Input, InputList, Item, ItemCheckbox, ItemCtx, ItemModel, ItemTitle, ItemsActionsDropdown, ItemsActionsProvider, Layout, Link, Loading, Login, Modal, NotAllowed, Notification, Pagination, PanelActions, PanelAddons, PanelBehaviors, PanelItems, PanelNotImplemented, PanelPermissions, PanelProperties, PasswordInput, Path, PathTree, PermissionPrinperm, PermissionPrinrole, PermissionRoleperm, Permissions, PropertiesButtonView, PropertiesView, REGEX_EMAIL, REGEX_HEX_COLOR, REGEX_NUMBER, REGEX_URL, RItem, RemoveItems, RenderField, RenderFieldComponent, RequiredFieldsForm, RestClient, SearchInput, SearchLabels, SearchOptionsLabels, SearchVocabularyLabels, Select, Sharing, Table, TabsPanel, Tag, TagsWidget, TdLink, Textarea, TraversalContext, TraversalProvider, UserCtx, UserForm, UsersCtx, UsersToolbar, VocabularyRenderField, base64ToArrayBuffer, buildQs, classnames, defaultComponent, formatDate, generateUID, get$1 as get, getActionsObject, getClient, getNewId, isEmail, isEmpty, isHexColor, isNumber, isURL, lightFileReader, maxLength, messages$4 as messages, minLength, noop, notEmpty, parser, sleep, stringToSlug, toQueryString, useConfig, useCrudContext, useGuillotinaClient, useLocation, useRegistry, useRemoteField, useTraversal, useVocabulary };
+export { AddItem, AddPermission, AllItemsCheckbox, ApplicationCtx, Auth, AuthContext, BaseForm, BehaviorNotImplemented, BehaviorsView, Button, Checkbox, ClientContext, ClientProvider, Config, Confirm, ContainerCtx, ContextToolbar, CreateButton, CreateContainer, DatabaseCtx, Delete, DownloadField, EditComponent, EditableField, EmailInput, FileUpload, Flash, FolderCtx, Form, FormBuilder, GroupCtx, GroupToolbar, GroupsCtx, Guillotina, GuillotinaClient, IAttachment, IImageAttachment, IMultiAttachment, IMultiImageAttachment, IMultiImageOrderedAttachment, IWorkflow, Icon, Input, InputList, Item, ItemCheckbox, ItemCtx, ItemModel, ItemTitle, ItemsActionsDropdown, ItemsActionsProvider, Layout, Link, Loading, Login, Modal, NotAllowed, Notification, Pagination, PanelActions, PanelAddons, PanelBehaviors, PanelItems, PanelNotImplemented, PanelPermissions, PanelProperties, PasswordInput, Path, PathTree, PermissionPrinperm, PermissionPrinrole, PermissionRoleperm, Permissions, PropertiesButtonView, PropertiesView, REGEX_EMAIL, REGEX_HEX_COLOR, REGEX_NUMBER, REGEX_URL, RItem, RemoveItems, RenderField, RenderFieldComponent, RequiredFieldsForm, RestClient, SearchInput, SearchLabels, SearchOptionsLabels, SearchRenderField, SearchVocabularyLabels, Select, Sharing, Table, TabsPanel, Tag, TagsWidget, TdLink, Textarea, TraversalContext, TraversalProvider, UserCtx, UserForm, UsersCtx, UsersToolbar, VocabularyRenderField, base64ToArrayBuffer, buildQs, classnames, defaultComponent, formatDate, generateUID, genericFileMessages, genericMessages, get$1 as get, getActionsObject, getClient, getNewId, isEmail, isEmpty, isHexColor, isNumber, isURL, lightFileReader, maxLength, messages$4 as messages, minLength, noop, notEmpty, parser, sleep, stringToSlug, toQueryString, useConfig, useCrudContext, useGuillotinaClient, useLocation, useRegistry, useRemoteField, useTraversal, useVocabulary };
 //# sourceMappingURL=react-gmi.esm.js.map