@guillotinaweb/react-gmi 0.24.1 → 0.25.0

package/dist/react-gmi.umd.js

@@ -3021,6 +3021,45 @@
     }, 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 = React.useRef(onClickAway);
+    React.useEffect(function () {
+      savedCallback.current = onClickAway;
+    }, [onClickAway]);
+    React.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 () {
@@ -3065,7 +3104,11 @@
         _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 = reactIntl.useIntl();
 
     var _useSetState = useSetState(initialState),
@@ -3087,8 +3130,19 @@
         PageSize = _useConfig.PageSize,
         SearchEngine = _useConfig.SearchEngine;
 
-    var _useState = React.useState(generateUID('search_input')),
-        uid = _useState[0];
+    var _useState = React.useState(undefined),
+        valueLabel = _useState[0],
+        setValueLabel = _useState[1];
+
+    var _useState2 = React.useState(false),
+        setIsLoadingData = _useState2[1];
+
+    var _useState3 = React.useState(generateUID('search_input')),
+        uid = _useState3[0];
+
+    useClickAway(wrapperRef, function () {
+      setIsOpen(false);
+    });
 
     var getHeight = function getHeight() {
       if (wrapperRef && wrapperRef.current) {
@@ -3102,10 +3156,52 @@
       };
     };
 
-    var delayedQuery = React__default['default'].useCallback(debounce(function (value) {
+    var delayedQuery = React.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;
@@ -3130,19 +3226,28 @@
           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;
@@ -3166,20 +3271,24 @@
       return item.title || item['@name'];
     };
 
-    React__default['default'].useEffect(function () {
-      if (path && !options.loading && !options.items) {
-
-        try {
-          handleSearch(options.page);
-        } catch (e) {
-          Promise.reject(e);
-        }
+    React.useEffect(function () {
+      if (value) {
+        inicializeLabels();
+      } else {
+        setValueLabel({});
       }
-    }, [path, options.loading, options.items]);
+    }, [path, value]);
+
+    if (valueLabel === undefined) {
+      return /*#__PURE__*/React__default['default'].createElement("div", {
+        className: "spinner"
+      });
+    }
+
     return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].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 !== '') {
@@ -3187,7 +3296,7 @@
             setOptions(initialState);
           }
 
-          setIsOpen(!isOpen);
+          setIsOpen(false);
         }
       }
     }, /*#__PURE__*/React__default['default'].createElement("div", {
@@ -3195,12 +3304,16 @@
     }, /*#__PURE__*/React__default['default'].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__default['default'].createElement("span", null, value && value.title ? value.title : 'Choose...'), /*#__PURE__*/React__default['default'].createElement("span", {
+    }, /*#__PURE__*/React__default['default'].createElement("span", null, value ? get$1(valueLabel, value, value) : intl.formatMessage(genericMessages.choose)), /*#__PURE__*/React__default['default'].createElement("span", {
       className: "icon"
     }, /*#__PURE__*/React__default['default'].createElement("i", {
       className: "fas fa-angle-down",
@@ -3228,12 +3341,16 @@
     })), /*#__PURE__*/React__default['default'].createElement("hr", {
       className: "dropdown-divider"
     }), options.loading && /*#__PURE__*/React__default['default'].createElement(Loading, null), options.items && options.items.map(function (item) {
-      return /*#__PURE__*/React__default['default'].createElement("a", {
-        href: "#",
-        className: "dropdown-item editable " + (value && value.id === item.id ? 'is-active' : ''),
+      return /*#__PURE__*/React__default['default'].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
@@ -3256,11 +3373,20 @@
   };
   SearchInput.propTypes = {
     onChange: PropTypes__default['default'].func,
-    value: PropTypes__default['default'].object,
-    client: PropTypes__default['default'].object,
+    value: PropTypes__default['default'].string,
     path: PropTypes__default['default'].string,
-    PageSize: PropTypes__default['default'].number,
-    btnClass: PropTypes__default['default'].string
+    btnClass: PropTypes__default['default'].string,
+    error: PropTypes__default['default'].string,
+    errorZoneClassName: PropTypes__default['default'].string,
+    traversal: PropTypes__default['default'].object,
+    qs: PropTypes__default['default'].array,
+    queryCondition: PropTypes__default['default'].string,
+    dataTestWrapper: PropTypes__default['default'].string,
+    dataTestSearchInput: PropTypes__default['default'].string,
+    dataTestItem: PropTypes__default['default'].string,
+    renderTextItemOption: PropTypes__default['default'].func,
+    typeNameQuery: PropTypes__default['default'].string,
+    labelProperty: PropTypes__default['default'].string
   };
 
   var InputList = React.forwardRef(function (_ref, ref) {
@@ -3319,45 +3445,6 @@
     }));
   });
 
-  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 = React.useRef(onClickAway);
-    React.useEffect(function () {
-      savedCallback.current = onClickAway;
-    }, [onClickAway]);
-    React.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,
@@ -3825,12 +3912,98 @@
     });
   };
 
-  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 = React.useState([]),
+        valuesLabels = _useState[0],
+        setValuesLabels = _useState[1];
+
+    var _useState2 = React.useState(false),
+        isLoadingData = _useState2[0],
+        setIsLoadingData = _useState2[1];
+
+    var traversal = useTraversal();
+
+    var _useConfig = useConfig(),
+        SearchEngine = _useConfig.SearchEngine;
+
+    React.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__default['default'].createElement(RenderField, {
+      value: getRenderValue()
+    });
+  };
+  var VocabularyRenderField = function VocabularyRenderField(_ref4) {
+    var _schema$items;
+
+    var schema = _ref4.schema,
+        value = _ref4.value,
+        modifyContent = _ref4.modifyContent;
     var intl = reactIntl.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);
@@ -3865,11 +4038,11 @@
 
     return /*#__PURE__*/React__default['default'].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 = reactIntl.useIntl();
     var DEFAULT_VALUE_EDITABLE_FIELD = getDefaultValueEditableField(intl);
 
@@ -3895,6 +4068,10 @@
       } 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;
@@ -3971,6 +4148,353 @@
     vocabularyName: PropTypes__default['default'].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 = reactIntl.useIntl();
+
+    var _useSetState = useSetState(initialState$1),
+        options = _useSetState[0],
+        setOptions = _useSetState[1];
+
+    var _useState = React.useState(undefined),
+        valuesLabel = _useState[0],
+        setValuesLabels = _useState[1];
+
+    var _React$useState = React__default['default'].useState(false),
+        isOpen = _React$useState[0],
+        setIsOpen = _React$useState[1];
+
+    var _React$useState2 = React__default['default'].useState(''),
+        searchTerm = _React$useState2[0],
+        setSearchTerm = _React$useState2[1];
+
+    var inputRef = React__default['default'].useRef(null);
+    var wrapperRef = React__default['default'].useRef(null);
+
+    var _useConfig = useConfig(),
+        PageSize = _useConfig.PageSize,
+        SearchEngine = _useConfig.SearchEngine;
+
+    var _useState2 = React.useState(false),
+        isLoadingData = _useState2[0],
+        setIsLoadingData = _useState2[1];
+
+    var _useState3 = React.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 = React.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__default['default'].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__default['default'].createElement("div", {
+        className: "spinner"
+      });
+    }
+
+    return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("div", {
+      className: "tags mb-2"
+    }, value.map(function (tag, index) {
+      return /*#__PURE__*/React__default['default'].createElement("div", {
+        key: "input_list_" + tag + "_" + index,
+        className: "tag is-info is-medium"
+      }, get$1(valuesLabel, tag, tag), /*#__PURE__*/React__default['default'].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__default['default'].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__default['default'].createElement("div", {
+      className: "dropdown-trigger"
+    }, /*#__PURE__*/React__default['default'].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__default['default'].createElement("span", null, intl.formatMessage(genericMessages.choose)), /*#__PURE__*/React__default['default'].createElement("span", {
+      className: "icon"
+    }, /*#__PURE__*/React__default['default'].createElement("i", {
+      className: "fas fa-angle-down",
+      "aria-hidden": "true"
+    })))), /*#__PURE__*/React__default['default'].createElement("div", {
+      className: "dropdown-menu",
+      id: "dropdown-menu",
+      role: "menu",
+      style: getHeight()
+    }, /*#__PURE__*/React__default['default'].createElement("div", {
+      className: "dropdown-content"
+    }, /*#__PURE__*/React__default['default'].createElement("div", {
+      className: "dropdown-item"
+    }, /*#__PURE__*/React__default['default'].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__default['default'].createElement("hr", {
+      className: "dropdown-divider"
+    }), options.loading && /*#__PURE__*/React__default['default'].createElement(Loading, null), options.items && options.items.map(function (item) {
+      return /*#__PURE__*/React__default['default'].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__default['default'].createElement("div", {
+      className: "dropdown-item"
+    }, intl.formatMessage(genericMessages.no_results)), options.items && options.items_total > options.items.length && /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("hr", {
+      className: "dropdown-divider"
+    }), /*#__PURE__*/React__default['default'].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__default['default'].createElement(ErrorZone, {
+      className: errorZoneClassName,
+      id: uid
+    }, error ? error : ''));
+  };
+  SearchInputList.propTypes = (_SearchInputList$prop = {
+    onChange: PropTypes__default['default'].func,
+    path: PropTypes__default['default'].string,
+    btnClass: PropTypes__default['default'].string,
+    dataTestWrapper: PropTypes__default['default'].string,
+    dataTestSearchInput: PropTypes__default['default'].string,
+    dataTestItem: PropTypes__default['default'].string,
+    renderTextItemOption: PropTypes__default['default'].func,
+    typeNameQuery: PropTypes__default['default'].string,
+    labelProperty: PropTypes__default['default'].string,
+    error: PropTypes__default['default'].string,
+    errorZoneClassName: PropTypes__default['default'].string,
+    traversal: PropTypes__default['default'].object
+  }, _SearchInputList$prop["path"] = PropTypes__default['default'].string, _SearchInputList$prop.qs = PropTypes__default['default'].array, _SearchInputList$prop.queryCondition = PropTypes__default['default'].string, _SearchInputList$prop);
+
   var EditComponent = React__default['default'].forwardRef(function (_ref, ref) {
     var schema = _ref.schema,
         val = _ref.val,
@@ -3979,7 +4503,41 @@
         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__default['default'].createElement(React__default['default'].Fragment, null, rest.placeholder && /*#__PURE__*/React__default['default'].createElement("label", {
+        className: "label"
+      }, rest.placeholder), /*#__PURE__*/React__default['default'].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__default['default'].createElement(React__default['default'].Fragment, null, rest.placeholder && /*#__PURE__*/React__default['default'].createElement("label", {
+        className: "label"
+      }, rest.placeholder), /*#__PURE__*/React__default['default'].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__default['default'].createElement(Textarea, _extends({
         value: val || '',
         className: className,
@@ -4110,15 +4668,19 @@
   function IAttachment(_ref) {
     var properties = _ref.properties,
         values = _ref.values;
+    var intl = reactIntl.useIntl();
     var Ctx = useTraversal();
     var modifyContent = Ctx.hasPerm('guillotina.ModifyContent');
     return /*#__PURE__*/React__default['default'].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__default['default'].createElement("tr", {
         key: 'attachment_' + key
       }, /*#__PURE__*/React__default['default'].createElement("td", {
+        style: {
+          width: '150px'
+        },
         key: 1
       }, key), /*#__PURE__*/React__default['default'].createElement("td", {
         key: 2
@@ -4214,7 +4776,7 @@
     };
 
     return /*#__PURE__*/React__default['default'].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__default['default'].createElement(Confirm, {
       loading: loading,
@@ -4231,7 +4793,10 @@
       return /*#__PURE__*/React__default['default'].createElement("tr", {
         key: 'multiattachment_' + key
       }, /*#__PURE__*/React__default['default'].createElement("td", {
-        key: 1
+        key: 1,
+        style: {
+          width: '150px'
+        }
       }, key), /*#__PURE__*/React__default['default'].createElement("td", {
         key: 2
       }, /*#__PURE__*/React__default['default'].createElement("div", {
@@ -4519,7 +5084,7 @@
     };
 
     return /*#__PURE__*/React__default['default'].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__default['default'].createElement(Confirm, {
       loading: loading,
@@ -4531,7 +5096,10 @@
       },
       message: intl.formatMessage(genericFileMessages.confirm_message_delete_image)
     }), values['image'] && /*#__PURE__*/React__default['default'].createElement("tr", null, /*#__PURE__*/React__default['default'].createElement("td", {
-      key: 1
+      key: 1,
+      style: {
+        width: '150px'
+      }
     }, intl.formatMessage(genericMessages.image)), /*#__PURE__*/React__default['default'].createElement("td", {
       key: 2
     }, /*#__PURE__*/React__default['default'].createElement("div", {
@@ -4821,7 +5389,7 @@
     };
 
     return /*#__PURE__*/React__default['default'].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__default['default'].createElement(Confirm, {
       loading: loading,
@@ -4838,7 +5406,10 @@
       return /*#__PURE__*/React__default['default'].createElement("tr", {
         key: "multiimageattachment_" + key
       }, /*#__PURE__*/React__default['default'].createElement("td", {
-        key: 1
+        key: 1,
+        style: {
+          width: '150px'
+        }
       }, key), /*#__PURE__*/React__default['default'].createElement("td", {
         key: 2
       }, /*#__PURE__*/React__default['default'].createElement("div", {
@@ -6319,7 +6890,7 @@
     return null;
   }
 
-  var initialState$1 = {
+  var initialState$2 = {
     page: 0,
     items: [],
     loading: true,
@@ -6338,7 +6909,7 @@
     var intl = reactIntl.useIntl();
     var Ctx = useTraversal();
 
-    var _useSetState = useSetState(initialState$1),
+    var _useSetState = useSetState(initialState$2),
         state = _useSetState[0],
         setState = _useSetState[1];
 
@@ -6788,7 +7359,7 @@
       icon: model.icon,
       align: "is-left",
       className: "has-text-grey"
-    }), ' ', "\xA0", /*#__PURE__*/React__default['default'].createElement("span", null, Ctx.context.title || Ctx.context['@name']))), /*#__PURE__*/React__default['default'].createElement("div", {
+    }), "\xA0", /*#__PURE__*/React__default['default'].createElement("span", null, Ctx.context.title || Ctx.context['@name']))), /*#__PURE__*/React__default['default'].createElement("div", {
       className: "level-right"
     }, /*#__PURE__*/React__default['default'].createElement(PropertiesButtonView, null))), /*#__PURE__*/React__default['default'].createElement("hr", null), schema && schema.data && !schema.loading && /*#__PURE__*/React__default['default'].createElement("div", {
       className: "columns"
@@ -6797,13 +7368,20 @@
     }, /*#__PURE__*/React__default['default'].createElement("table", {
       className: "table is-striped is-fullwidth is-size-7"
     }, /*#__PURE__*/React__default['default'].createElement("thead", null, /*#__PURE__*/React__default['default'].createElement("tr", null, /*#__PURE__*/React__default['default'].createElement("th", {
+      style: {
+        width: '150px'
+      },
       className: "is-2"
     }, intl.formatMessage(genericMessages.property)), /*#__PURE__*/React__default['default'].createElement("th", {
       className: "is-8"
     }, intl.formatMessage(genericMessages.value)))), /*#__PURE__*/React__default['default'].createElement("tbody", null, showProperties.map(function (prop) {
       return /*#__PURE__*/React__default['default'].createElement("tr", {
         key: 'prop' + prop
-      }, /*#__PURE__*/React__default['default'].createElement("td", null, prop), /*#__PURE__*/React__default['default'].createElement("td", null, /*#__PURE__*/React__default['default'].createElement(EditableField, {
+      }, /*#__PURE__*/React__default['default'].createElement("td", {
+        style: {
+          width: '150px'
+        }
+      }, prop), /*#__PURE__*/React__default['default'].createElement("td", null, /*#__PURE__*/React__default['default'].createElement(EditableField, {
         field: prop,
         value: Ctx.context[prop],
         modifyContent: false
@@ -6811,6 +7389,9 @@
     }))), properties.length > 0 && /*#__PURE__*/React__default['default'].createElement("table", {
       className: "table is-striped is-fullwidth is-size-7"
     }, /*#__PURE__*/React__default['default'].createElement("thead", null, /*#__PURE__*/React__default['default'].createElement("tr", null, /*#__PURE__*/React__default['default'].createElement("th", {
+      style: {
+        width: '150px'
+      },
       className: "is-2"
     }, intl.formatMessage(genericMessages.property)), /*#__PURE__*/React__default['default'].createElement("th", {
       className: "is-8"
@@ -6819,7 +7400,11 @@
           value = _ref.value;
       return /*#__PURE__*/React__default['default'].createElement("tr", {
         key: 'prop' + key
-      }, /*#__PURE__*/React__default['default'].createElement("td", null, value.title || key), /*#__PURE__*/React__default['default'].createElement("td", null, /*#__PURE__*/React__default['default'].createElement(EditableField, {
+      }, /*#__PURE__*/React__default['default'].createElement("td", {
+        style: {
+          width: '150px'
+        }
+      }, value.title || key), /*#__PURE__*/React__default['default'].createElement("td", null, /*#__PURE__*/React__default['default'].createElement(EditableField, {
         field: key,
         value: Ctx.context[key],
         schema: value,
@@ -7550,13 +8135,13 @@
 
   /* eslint jsx-a11y/anchor-is-valid: "off" */
 
-  var initialState$2 = {
+  var initialState$3 = {
     types: undefined
   };
   function CreateButton() {
     var intl = reactIntl.useIntl();
 
-    var _useSetState = useSetState(initialState$2),
+    var _useSetState = useSetState(initialState$3),
         state = _useSetState[0],
         setState = _useSetState[1];
 
@@ -7642,7 +8227,7 @@
 
     var intl = reactIntl.useIntl();
 
-    var _useSetState2 = useSetState(initialState$2),
+    var _useSetState2 = useSetState(initialState$3),
         state = _useSetState2[0],
         setState = _useSetState2[1];
 
@@ -8837,15 +9422,19 @@
   function IDublinCore(_ref) {
     var properties = _ref.properties,
         values = _ref.values;
+    var intl = reactIntl.useIntl();
     var Ctx = useTraversal();
     var modifyContent = Ctx.hasPerm('guillotina.ModifyContent');
     return /*#__PURE__*/React__default['default'].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__default['default'].createElement("tr", {
         key: 'dublin_' + key
       }, /*#__PURE__*/React__default['default'].createElement("td", {
+        style: {
+          width: '150px'
+        },
         key: 1
       }, key), /*#__PURE__*/React__default['default'].createElement("td", {
         key: 2
@@ -9056,13 +9645,13 @@
       }
     };
 
-    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) {
@@ -9081,7 +9670,7 @@
               "value": " added to group"
             }]
           }, {
-            user: newUser.id
+            user: newUserId
           }), errorMessage);
         });
       } catch (e) {
@@ -9552,7 +10141,7 @@
 
   */
 
-  var initialState$3 = {
+  var initialState$4 = {
     path: '',
     loading: false,
     context: undefined,
@@ -12455,10 +13044,10 @@
     var searchPath = location.get('path') || '/';
 
     if (searchPath && searchPath !== '') {
-      initialState$3.path = searchPath;
+      initialState$4.path = searchPath;
     }
 
-    var _useReducer = React.useReducer(guillotinaReducer, initialState$3),
+    var _useReducer = React.useReducer(guillotinaReducer, initialState$4),
         state = _useReducer[0],
         dispatch = _useReducer[1];
 
@@ -12610,7 +13199,7 @@
     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,
@@ -12623,7 +13212,7 @@
         auth = _ref.auth,
         onLogin = _ref.onLogin;
 
-    var _useSetState = useSetState(initialState$4),
+    var _useSetState = useSetState(initialState$5),
         state = _useSetState[0],
         setState = _useSetState[1];
 
@@ -13192,6 +13781,7 @@
   exports.SearchInput = SearchInput;
   exports.SearchLabels = SearchLabels;
   exports.SearchOptionsLabels = SearchOptionsLabels;
+  exports.SearchRenderField = SearchRenderField;
   exports.SearchVocabularyLabels = SearchVocabularyLabels;
   exports.Select = Select;
   exports.Sharing = Sharing;