@guillotinaweb/react-gmi 0.24.0 → 0.25.0

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 (typeNameQuery) {
+        typeNameParsed = parser("type_name__in=" + typeNameQuery);
+      }
 
-      if (qs.length > 0 || searchTermParsed.length > 0 || qsParsed.length > 0) {
-        searchTermQs = buildQs([].concat(qs, searchTermParsed, qsParsed));
+      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, searchTermQs, false, false, page * PageSize, PageSize)).then(function (data) {
+      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,
@@ -3755,12 +3842,14 @@ function useVocabulary(vocabularyName, path) {
 var plain = ['string', 'number', 'boolean'];
 function RenderField(_ref) {
   var value = _ref.value,
-      Widget = _ref.Widget;
+      Widget = _ref.Widget,
+      schema = _ref.schema;
   if (value === null || value === undefined) return '';
 
   if (Widget) {
     return /*#__PURE__*/React.createElement(Widget, {
-      value: value
+      value: value,
+      schema: schema
     });
   }
 
@@ -3807,23 +3896,154 @@ var FieldValue = function FieldValue(_ref2) {
   })));
 };
 
-function RenderFieldComponent(_ref3) {
-  var schema = _ref3.schema,
-      field = _ref3.field,
-      val = _ref3.val,
-      modifyContent = _ref3.modifyContent;
-  var intl = useIntl();
-  var DEFAULT_VALUE_EDITABLE_FIELD = intl.formatMessage({
+var DEFAULT_VALUE_NO_EDITABLE_FIELD = ' -- ';
+
+var getDefaultValueEditableField = function getDefaultValueEditableField(intl) {
+  return intl.formatMessage({
     id: "default_value_editable_field",
     defaultMessage: [{
       "type": 0,
       "value": "Click to edit"
     }]
   });
-  var DEFAULT_VALUE_NO_EDITABLE_FIELD = ' -- ';
+};
+
+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);
+  var vocabulary = useVocabulary(vocabularyName);
+
+  var getRenderProps = function getRenderProps() {
+    var renderProps = {
+      value: value != null ? value : modifyContent ? DEFAULT_VALUE_EDITABLE_FIELD : DEFAULT_VALUE_NO_EDITABLE_FIELD
+    };
+
+    if (schema != null && schema.vocabularyName) {
+      var _vocabularyValue$titl;
+
+      var vocabularyValue = get$1(vocabulary, 'data.items', []).find(function (item) {
+        return item.token === value;
+      });
+      renderProps['value'] = (_vocabularyValue$titl = vocabularyValue == null ? void 0 : vocabularyValue.title) != null ? _vocabularyValue$titl : '';
+    } else {
+      var _renderProps$value;
+
+      renderProps['value'] = ((_renderProps$value = renderProps['value']) != null ? _renderProps$value : []).map(function (value) {
+        var _get$find$title, _get$find;
+
+        return (_get$find$title = (_get$find = get$1(vocabulary, 'data.items', []).find(function (item) {
+          return item.token === value;
+        })) == null ? void 0 : _get$find.title) != null ? _get$find$title : '';
+      });
+    }
+
+    return renderProps;
+  };
+
+  return /*#__PURE__*/React.createElement(RenderField, getRenderProps());
+};
+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);
 
   var getRenderProps = function getRenderProps() {
-    var _schema$items;
+    var _schema$items2;
 
     var renderProps = {
       value: val != null ? val : modifyContent ? DEFAULT_VALUE_EDITABLE_FIELD : DEFAULT_VALUE_NO_EDITABLE_FIELD
@@ -3841,50 +4061,622 @@ function RenderFieldComponent(_ref3) {
       renderProps['value'] = (_val$toString = val == null ? void 0 : val.toString()) != null ? _val$toString : renderProps['value'];
     } else if (val && (schema == null ? void 0 : schema.type) === 'datetime') {
       renderProps['value'] = new Date(val).toLocaleString();
-    } else if (schema != null && (_schema$items = schema.items) != null && _schema$items.vocabularyName || schema != null && schema.vocabularyName) {
-      var _schema$items2;
+    } 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;
+    }
 
-      var vocabularyName = (schema == null ? void 0 : (_schema$items2 = schema.items) == null ? void 0 : _schema$items2.vocabularyName) || (schema == null ? void 0 : schema.vocabularyName);
-      var vocabulary = useVocabulary(vocabularyName);
+    return renderProps;
+  };
 
-      if (schema != null && schema.vocabularyName) {
-        var _vocabularyValue$titl;
+  return /*#__PURE__*/React.createElement(RenderField, getRenderProps());
+}
 
-        var vocabularyValue = get$1(vocabulary, 'data.items', []).find(function (item) {
-          return item.token === val;
-        });
-        renderProps['value'] = (_vocabularyValue$titl = vocabularyValue == null ? void 0 : vocabularyValue.title) != null ? _vocabularyValue$titl : '';
-      } else {
-        var _renderProps$value;
+var SelectVocabulary = React.forwardRef(function (_ref, ref) {
+  var vocabularyName = _ref.vocabularyName,
+      className = _ref.className,
+      classWrap = _ref.classWrap,
+      val = _ref.val,
+      dataTest = _ref.dataTest,
+      multiple = _ref.multiple,
+      rest = _objectWithoutPropertiesLoose(_ref, ["vocabularyName", "className", "classWrap", "val", "dataTest", "multiple"]);
 
-        renderProps['value'] = ((_renderProps$value = renderProps['value']) != null ? _renderProps$value : []).map(function (value) {
-          var _get$find$title, _get$find;
+  var vocabulary = useVocabulary(vocabularyName);
 
-          return (_get$find$title = (_get$find = get$1(vocabulary, 'data.items', []).find(function (item) {
-            return item.token === value;
-          })) == null ? void 0 : _get$find.title) != null ? _get$find$title : '';
-        });
-      }
+  var getOptions = function getOptions() {
+    if (get$1(vocabulary, 'data.items', null)) {
+      var vocData = vocabulary.data.items.map(function (item) {
+        var _item$title$default;
+
+        return {
+          text: (_item$title$default = item.title.default) != null ? _item$title$default : item.title,
+          value: item.token
+        };
+      });
+      return vocData;
+    }
+
+    return [];
+  };
+
+  var getProps = function getProps() {
+    if (multiple) {
+      var currentValue = val || [];
+      return {
+        multiple: true,
+        size: 5,
+        value: currentValue,
+        options: getOptions()
+      };
     }
 
-    return renderProps;
+    return {
+      value: val != null ? val : '',
+      appendDefault: true,
+      options: getOptions()
+    };
+  };
+
+  if (vocabulary.data === undefined || vocabulary.loading) {
+    return /*#__PURE__*/React.createElement("div", null);
+  }
+
+  return /*#__PURE__*/React.createElement(Select, _extends({}, getProps(), {
+    className: className,
+    classWrap: classWrap || 'is-fullwidth',
+    dataTest: dataTest,
+    ref: ref
+  }, rest));
+});
+Select.propTypes = {
+  error: PropTypes.string,
+  disabled: PropTypes.bool,
+  loading: PropTypes.bool,
+  isSubmitted: PropTypes.bool,
+  size: PropTypes.number,
+  onChange: PropTypes.func,
+  multiple: PropTypes.bool,
+  className: PropTypes.string,
+  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,
+      setValue = _ref.setValue,
+      dataTest = _ref.dataTest,
+      className = _ref.className,
+      rest = _objectWithoutPropertiesLoose(_ref, ["schema", "val", "setValue", "dataTest", "className"]);
+
+  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,
+      onChange: function onChange(ev) {
+        return setValue(ev);
+      },
+      ref: ref,
+      dataTest: dataTest
+    }, rest));
+  } else if ((schema == null ? void 0 : schema.type) === 'boolean') {
+    return /*#__PURE__*/React.createElement(Checkbox, _extends({
+      value: !!val,
+      className: className,
+      onChange: function onChange(ev) {
+        return setValue(ev);
+      },
+      ref: ref,
+      dataTest: dataTest
+    }, rest));
+  } else if ((schema == null ? void 0 : schema.type) === 'array') {
+    if (schema.items && schema.items.type === 'string') {
+      var _schema$items;
+
+      if (schema.items.vocabularyName) {
+        return /*#__PURE__*/React.createElement(SelectVocabulary, _extends({
+          vocabularyName: get$1(schema, 'items.vocabularyName', null),
+          val: val || [],
+          className: className,
+          classWrap: "is-fullwidth",
+          dataTest: dataTest
+        }, rest, {
+          onChange: setValue,
+          multiple: true
+        }));
+      } else if (schema != null && (_schema$items = schema.items) != null && _schema$items.vocabulary) {
+        return /*#__PURE__*/React.createElement(Select, _extends({
+          value: val || [],
+          className: className,
+          classWrap: "is-fullwidth",
+          dataTest: dataTest,
+          options: schema == null ? void 0 : schema.items.vocabulary.map(function (item) {
+            return {
+              text: item,
+              value: item
+            };
+          }),
+          multiple: true,
+          onChange: setValue
+        }, rest));
+      }
+    }
+
+    return /*#__PURE__*/React.createElement(InputList, _extends({
+      value: val || [],
+      className: className,
+      onChange: function onChange(ev) {
+        return setValue(ev);
+      },
+      ref: ref,
+      dataTest: dataTest
+    }, rest));
+  } else if ((schema == null ? void 0 : schema.widget) === 'file') {
+    return /*#__PURE__*/React.createElement(FileUpload, _extends({
+      onChange: function onChange(ev) {
+        return setValue(ev);
+      },
+      label: get$1(val, 'filename', null),
+      dataTest: dataTest
+    }, rest));
+  } else if ((schema == null ? void 0 : schema.widget) === 'select' && schema.type === 'string') {
+    if (schema != null && schema.vocabularyName) {
+      return /*#__PURE__*/React.createElement(SelectVocabulary, _extends({
+        val: val || '',
+        className: className,
+        appendDefault: true,
+        classWrap: "is-fullwidth",
+        dataTest: dataTest,
+        onChange: setValue,
+        vocabularyName: get$1(schema, 'vocabularyName', null)
+      }, rest));
+    }
+
+    return /*#__PURE__*/React.createElement(Select, _extends({
+      value: val || '',
+      className: className,
+      appendDefault: true,
+      classWrap: "is-fullwidth",
+      dataTest: dataTest,
+      options: schema == null ? void 0 : schema.vocabulary.map(function (item) {
+        return {
+          text: item,
+          value: item
+        };
+      }),
+      onChange: setValue
+    }, rest));
+  }
+
+  var getInputType = function getInputType() {
+    switch (schema == null ? void 0 : schema.type) {
+      case 'integer':
+        return 'number';
+
+      case 'date':
+        return 'date';
+
+      case 'datetime':
+        return 'datetime-local';
+
+      default:
+        return 'text';
+    }
   };
 
-  return /*#__PURE__*/React.createElement(RenderField, getRenderProps());
-}
+  return /*#__PURE__*/React.createElement(Input, _extends({
+    value: val || '',
+    className: className,
+    dataTest: dataTest,
+    onChange: function onChange(ev) {
+      return setValue(ev);
+    },
+    ref: ref,
+    type: getInputType()
+  }, rest));
+});
+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
@@ -3980,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,
@@ -3997,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", {
@@ -4285,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,
@@ -4297,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", {
@@ -4587,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,
@@ -4604,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", {
@@ -6085,75 +6886,7 @@ function SearchVocabularyLabels(props) {
   return null;
 }
 
-var SelectVocabulary = React.forwardRef(function (_ref, ref) {
-  var vocabularyName = _ref.vocabularyName,
-      className = _ref.className,
-      classWrap = _ref.classWrap,
-      val = _ref.val,
-      dataTest = _ref.dataTest,
-      multiple = _ref.multiple,
-      rest = _objectWithoutPropertiesLoose(_ref, ["vocabularyName", "className", "classWrap", "val", "dataTest", "multiple"]);
-
-  var vocabulary = useVocabulary(vocabularyName);
-
-  var getOptions = function getOptions() {
-    if (get$1(vocabulary, 'data.items', null)) {
-      var vocData = vocabulary.data.items.map(function (item) {
-        var _item$title$default;
-
-        return {
-          text: (_item$title$default = item.title.default) != null ? _item$title$default : item.title,
-          value: item.token
-        };
-      });
-      return vocData;
-    }
-
-    return [];
-  };
-
-  var getProps = function getProps() {
-    if (multiple) {
-      var currentValue = val || [];
-      return {
-        multiple: true,
-        size: 5,
-        value: currentValue,
-        options: getOptions()
-      };
-    }
-
-    return {
-      value: val != null ? val : '',
-      appendDefault: true,
-      options: getOptions()
-    };
-  };
-
-  if (vocabulary.data === undefined || vocabulary.loading) {
-    return /*#__PURE__*/React.createElement("div", null);
-  }
-
-  return /*#__PURE__*/React.createElement(Select, _extends({}, getProps(), {
-    className: className,
-    classWrap: classWrap || 'is-fullwidth',
-    dataTest: dataTest,
-    ref: ref
-  }, rest));
-});
-Select.propTypes = {
-  error: PropTypes.string,
-  disabled: PropTypes.bool,
-  loading: PropTypes.bool,
-  isSubmitted: PropTypes.bool,
-  size: PropTypes.number,
-  onChange: PropTypes.func,
-  multiple: PropTypes.bool,
-  className: PropTypes.string,
-  vocabularyName: PropTypes.string
-};
-
-var initialState$1 = {
+var initialState$2 = {
   page: 0,
   items: [],
   loading: true,
@@ -6172,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];
 
@@ -6622,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"
@@ -6631,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
@@ -6645,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"
@@ -6653,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,
@@ -7384,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];
 
@@ -7476,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];
 
@@ -8671,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
@@ -8890,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) {
@@ -8915,7 +9666,7 @@ function GroupCtx() {
             "value": " added to group"
           }]
         }, {
-          user: newUser.id
+          user: newUserId
         }), errorMessage);
       });
     } catch (e) {
@@ -9208,142 +9959,6 @@ var buildPaths = function buildPaths(segments) {
   return results;
 };
 
-var EditComponent = React.forwardRef(function (_ref, ref) {
-  var schema = _ref.schema,
-      val = _ref.val,
-      setValue = _ref.setValue,
-      dataTest = _ref.dataTest,
-      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') {
-    return /*#__PURE__*/React.createElement(Textarea, _extends({
-      value: val || '',
-      className: className,
-      onChange: function onChange(ev) {
-        return setValue(ev);
-      },
-      ref: ref,
-      dataTest: dataTest
-    }, rest));
-  } else if ((schema == null ? void 0 : schema.type) === 'boolean') {
-    return /*#__PURE__*/React.createElement(Checkbox, _extends({
-      value: !!val,
-      className: className,
-      onChange: function onChange(ev) {
-        return setValue(ev);
-      },
-      ref: ref,
-      dataTest: dataTest
-    }, rest));
-  } else if ((schema == null ? void 0 : schema.type) === 'array') {
-    if (schema.items && schema.items.type === 'string') {
-      var _schema$items;
-
-      if (schema.items.vocabularyName) {
-        return /*#__PURE__*/React.createElement(SelectVocabulary, _extends({
-          vocabularyName: get$1(schema, 'items.vocabularyName', null),
-          val: val || [],
-          className: className,
-          classWrap: "is-fullwidth",
-          dataTest: dataTest
-        }, rest, {
-          onChange: setValue,
-          multiple: true
-        }));
-      } else if (schema != null && (_schema$items = schema.items) != null && _schema$items.vocabulary) {
-        return /*#__PURE__*/React.createElement(Select, _extends({
-          value: val || [],
-          className: className,
-          classWrap: "is-fullwidth",
-          dataTest: dataTest,
-          options: schema == null ? void 0 : schema.items.vocabulary.map(function (item) {
-            return {
-              text: item,
-              value: item
-            };
-          }),
-          multiple: true,
-          onChange: setValue
-        }, rest));
-      }
-    }
-
-    return /*#__PURE__*/React.createElement(InputList, _extends({
-      value: val || [],
-      className: className,
-      onChange: function onChange(ev) {
-        return setValue(ev);
-      },
-      ref: ref,
-      dataTest: dataTest
-    }, rest));
-  } else if ((schema == null ? void 0 : schema.widget) === 'file') {
-    return /*#__PURE__*/React.createElement(FileUpload, _extends({
-      onChange: function onChange(ev) {
-        return setValue(ev);
-      },
-      label: get$1(val, 'filename', null),
-      dataTest: dataTest
-    }, rest));
-  } else if ((schema == null ? void 0 : schema.widget) === 'select' && schema.type === 'string') {
-    if (schema != null && schema.vocabularyName) {
-      return /*#__PURE__*/React.createElement(SelectVocabulary, _extends({
-        val: val || '',
-        className: className,
-        appendDefault: true,
-        classWrap: "is-fullwidth",
-        dataTest: dataTest,
-        onChange: setValue,
-        vocabularyName: get$1(schema, 'vocabularyName', null)
-      }, rest));
-    }
-
-    return /*#__PURE__*/React.createElement(Select, _extends({
-      value: val || '',
-      className: className,
-      appendDefault: true,
-      classWrap: "is-fullwidth",
-      dataTest: dataTest,
-      options: schema == null ? void 0 : schema.vocabulary.map(function (item) {
-        return {
-          text: item,
-          value: item
-        };
-      }),
-      onChange: setValue
-    }, rest));
-  }
-
-  var getInputType = function getInputType() {
-    switch (schema == null ? void 0 : schema.type) {
-      case 'integer':
-        return 'number';
-
-      case 'date':
-        return 'date';
-
-      case 'datetime':
-        return 'datetime-local';
-
-      default:
-        return 'text';
-    }
-  };
-
-  return /*#__PURE__*/React.createElement(Input, _extends({
-    value: val || '',
-    className: className,
-    dataTest: dataTest,
-    onChange: function onChange(ev) {
-      return setValue(ev);
-    },
-    ref: ref,
-    type: getInputType()
-  }, rest));
-});
-EditComponent.displayName = 'EditComponent';
-
 var registry = {
   paths: {},
   views: {
@@ -9522,7 +10137,7 @@ const registry = {
 
 */
 
-var initialState$3 = {
+var initialState$4 = {
   path: '',
   loading: false,
   context: undefined,
@@ -12425,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];
 
@@ -12580,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,
@@ -12593,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];
 
@@ -13074,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, 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, 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, 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