@guillotinaweb/react-gmi 0.28.2 → 0.28.4

package/dist/react-gmi.js

@@ -1967,6 +1967,167 @@ var Select = React.forwardRef(function (_ref, ref) {
 });
 Select.displayName = 'Select';
 
+var formatDate = function formatDate(str) {
+  var d = new Date(str);
+  var minutes = d.getMinutes() < 10 ? "0" + d.getMinutes() : d.getMinutes();
+  return d.getDate() + "/" + (d.getMonth() + 1) + "/" + d.getFullYear() + " " + d.getHours() + ":" + minutes;
+};
+var get$1 = function get(obj, path, defValue) {
+  var _pathArray$reduce;
+
+  if (!path) return undefined;
+  var pathArray = Array.isArray(path) ? path : path.match(/([^[.\]])+/g);
+  return (_pathArray$reduce = pathArray.reduce(function (prevObj, key) {
+    return prevObj && prevObj[key];
+  }, obj)) != null ? _pathArray$reduce : defValue;
+};
+function getNewId(id) {
+  if (id === void 0) {
+    id = '';
+  }
+
+  var suffix = '-copy-';
+  var rgx = new RegExp("($|" + suffix + "\\d*)");
+  return stringToSlug(id).replace(rgx, function (r) {
+    var num = parseInt(r.replace(suffix, '') || '0');
+    return "" + suffix + (num + 1);
+  });
+}
+
+function _catch$1(body, recover) {
+  try {
+    var result = body();
+  } catch (e) {
+    return recover(e);
+  }
+
+  if (result && result.then) {
+    return result.then(void 0, recover);
+  }
+
+  return result;
+}
+
+function useVocabulary(vocabularyName, path) {
+  if (path === void 0) {
+    path = null;
+  }
+
+  var traversal = useTraversal();
+
+  var _useSetState = useSetState({
+    data: undefined,
+    loading: false,
+    error: undefined
+  }),
+      vocabulary = _useSetState[0],
+      setVocabulary = _useSetState[1];
+
+  var getPath = function getPath() {
+    if (path) return path;
+    return traversal.path + "@vocabularies/" + vocabularyName;
+  };
+
+  React.useEffect(function () {
+    var getVocabulary = function getVocabulary() {
+      try {
+        var _temp3 = function () {
+          if (vocabularyName && vocabulary.data === undefined && !vocabulary.loading) {
+            var _temp4 = _catch$1(function () {
+              setVocabulary({
+                loading: true
+              });
+              return Promise.resolve(traversal.client.get(getPath())).then(function (data) {
+                return Promise.resolve(data.json()).then(function (dataJson) {
+                  setVocabulary({
+                    loading: false,
+                    data: dataJson
+                  });
+                });
+              });
+            }, function (err) {
+              setVocabulary({
+                loading: false,
+                error: err,
+                data: undefined
+              });
+            });
+
+            if (_temp4 && _temp4.then) return _temp4.then(function () {});
+          }
+        }();
+
+        return Promise.resolve(_temp3 && _temp3.then ? _temp3.then(function () {}) : void 0);
+      } catch (e) {
+        return Promise.reject(e);
+      }
+    };
+
+    getVocabulary();
+  }, [vocabularyName, vocabulary, path]);
+  return vocabulary;
+}
+
+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,
+      onChange = _ref.onChange,
+      id = _ref.id,
+      placeholder = _ref.placeholder;
+  var vocabulary = useVocabulary(vocabularyName);
+
+  var getOptions = function getOptions() {
+    if (get$1(vocabulary, 'data.items', null)) {
+      var vocData = vocabulary.data.items.map(function (item) {
+        return {
+          text: 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 jsxRuntime.jsx("div", {});
+  }
+
+  return jsxRuntime.jsx(Select, _extends({}, getProps(), {
+    className: className,
+    classWrap: classWrap || 'is-fullwidth',
+    dataTest: dataTest,
+    ref: ref,
+    onChange: onChange,
+    id: id,
+    placeholder: placeholder
+  }));
+});
+SelectVocabulary.displayName = 'SelectVocabulary';
+
 var setURLParams = function setURLParams(p) {
   return window.history.pushState(0, '0', '' + '?' + p.toString().replace(/%2F/g, '/'));
 };
@@ -3087,33 +3248,6 @@ function useClickAway(ref, onClickAway, events) {
   }, [events, ref]);
 }
 
-var formatDate = function formatDate(str) {
-  var d = new Date(str);
-  var minutes = d.getMinutes() < 10 ? "0" + d.getMinutes() : d.getMinutes();
-  return d.getDate() + "/" + (d.getMonth() + 1) + "/" + d.getFullYear() + " " + d.getHours() + ":" + minutes;
-};
-var get$1 = function get(obj, path, defValue) {
-  var _pathArray$reduce;
-
-  if (!path) return undefined;
-  var pathArray = Array.isArray(path) ? path : path.match(/([^[.\]])+/g);
-  return (_pathArray$reduce = pathArray.reduce(function (prevObj, key) {
-    return prevObj && prevObj[key];
-  }, obj)) != null ? _pathArray$reduce : defValue;
-};
-function getNewId(id) {
-  if (id === void 0) {
-    id = '';
-  }
-
-  var suffix = '-copy-';
-  var rgx = new RegExp("($|" + suffix + "\\d*)");
-  return stringToSlug(id).replace(rgx, function (r) {
-    var num = parseInt(r.replace(suffix, '') || '0');
-    return "" + suffix + (num + 1);
-  });
-}
-
 function debounce(func, wait) {
   var timeout;
   return function () {
@@ -3443,1136 +3577,1002 @@ var SearchInput = function SearchInput(_ref) {
   });
 };
 
-var InputList = React.forwardRef(function (_ref, ref) {
-  var value = _ref.value,
-      onChange = _ref.onChange,
-      dataTest = _ref.dataTest,
-      id = _ref.id;
-  var intl = reactIntl.useIntl();
+function debounce$1(func, wait) {
+  var timeout;
+  return function () {
+    var context = this;
+    var args = arguments;
 
-  var _useState = React.useState(''),
-      inputValue = _useState[0],
-      setInputValue = _useState[1];
+    var later = function later() {
+      timeout = null;
+      func.apply(context, args);
+    };
 
-  var addTags = function addTags(event) {
-    if (event.key === 'Enter' && event.target.value !== '') {
-      onChange([].concat(value, [event.target.value]));
-      setInputValue('');
-    }
+    clearTimeout(timeout);
+    timeout = setTimeout(later, wait);
   };
+}
 
-  return jsxRuntime.jsxs("div", {
-    className: "control",
-    children: [(value != null ? value : []).length > 0 && jsxRuntime.jsx("div", {
-      className: "tags",
-      children: value.map(function (tag, index) {
-        return jsxRuntime.jsxs("div", {
-          className: "tag is-info is-medium",
-          children: [tag, jsxRuntime.jsx("button", {
-            className: "delete is-small",
-            type: "button",
-            onClick: function onClick() {
-              return onChange([].concat(value.filter(function (tag) {
-                return value.indexOf(tag) !== index;
-              })));
-            }
-          })]
-        }, "input_list_" + tag + "_" + index);
-      })
-    }), jsxRuntime.jsx(Input, {
-      type: "text",
-      id: id,
-      placeholder: intl.formatMessage({
-        id: "press_enter_to_add_value",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Press enter to add value"
-        }]
-      }),
-      onKeyUp: function onKeyUp(event) {
-        return addTags(event);
-      },
-      value: inputValue,
-      ref: ref,
-      dataTest: dataTest,
-      onChange: function onChange(value) {
-        setInputValue(value);
-      }
-    })]
-  });
-});
-InputList.displayName = 'InputList';
-
-function Dropdown(_ref) {
-  var children = _ref.children,
-      disabled = _ref.disabled,
-      id = _ref.id,
-      isRight = _ref.isRight,
-      onChange = _ref.onChange,
-      optionDisabledWhen = _ref.optionDisabledWhen,
-      options = _ref.options;
-  var ref = React.useRef(null);
+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 _useState = React.useState(false),
-      isActive = _useState[0],
-      setIsActive = _useState[1];
+  var _useSetState = useSetState(initialState$1),
+      options = _useSetState[0],
+      setOptions = _useSetState[1];
 
-  var position = isRight ? 'is-right' : '';
-  var status = isActive ? "dropdown " + position + " is-active" : "dropdown " + position;
-  useClickAway(ref, function () {
-    setIsActive(false);
-  });
-  return jsxRuntime.jsxs("div", {
-    ref: ref,
-    className: status,
-    children: [jsxRuntime.jsx("div", {
-      className: "dropdown-trigger",
-      children: jsxRuntime.jsx("button", {
-        className: "button is-size-7",
-        onClick: function onClick() {
-          return setIsActive(!isActive);
-        },
-        "aria-haspopup": "true",
-        disabled: disabled,
-        "aria-controls": id,
-        children: children
-      })
-    }), jsxRuntime.jsx("div", {
-      className: "dropdown-menu",
-      id: id,
-      role: "menu",
-      children: jsxRuntime.jsx("div", {
-        className: "dropdown-content",
-        children: options.map(function (option) {
-          var disabled = typeof optionDisabledWhen === 'function' ? optionDisabledWhen(option) : false;
-          return jsxRuntime.jsx("a", {
-            className: disabled ? 'dropdown-item is-active' : 'dropdown-item',
-            "data-test": "dropdownItemTest-" + option.value.toLowerCase(),
-            onClick: disabled ? undefined : function () {
-              return onChange(option.value);
-            },
-            style: disabled ? {
-              cursor: 'not-allowed',
-              color: 'black',
-              opacity: 0.5,
-              backgroundColor: '#eeeeee'
-            } : {},
-            children: option.text
-          }, option.text);
-        })
-      })
-    })]
+  var _useState = React.useState(undefined),
+      valuesLabel = _useState[0],
+      setValuesLabels = _useState[1];
+
+  var _useState2 = React.useState(false),
+      isOpen = _useState2[0],
+      setIsOpen = _useState2[1];
+
+  var _useState3 = React.useState(''),
+      searchTerm = _useState3[0],
+      setSearchTerm = _useState3[1];
+
+  var inputRef = React.useRef(null);
+  var wrapperRef = React.useRef(null);
+
+  var _useConfig = useConfig(),
+      PageSize = _useConfig.PageSize,
+      SearchEngine = _useConfig.SearchEngine;
+
+  var _useState4 = React.useState(false),
+      isLoadingData = _useState4[0],
+      setIsLoadingData = _useState4[1];
+
+  var _useState5 = React.useState(generateUID('search_input')),
+      uid = _useState5[0];
+
+  useClickAway(wrapperRef, function () {
+    setIsOpen(false);
   });
-}
 
-function EditableField(_ref) {
-  var field = _ref.field,
-      value = _ref.value,
-      ns = _ref.ns,
-      _ref$schema = _ref.schema,
-      schema = _ref$schema === void 0 ? undefined : _ref$schema,
-      modifyContent = _ref.modifyContent,
-      required = _ref.required;
-  var intl = reactIntl.useIntl();
-  var ref = React.useRef();
+  var getHeight = function getHeight() {
+    if (wrapperRef && wrapperRef.current) {
+      return {
+        maxHeight: window.innerHeight - wrapperRef.current.getBoundingClientRect().top - 100 + "px"
+      };
+    }
 
-  var _useState = React.useState(false),
-      isEdit = _useState[0],
-      setEdit = _useState[1];
+    return {
+      maxHeight: 'auto'
+    };
+  };
 
-  var _useState2 = React.useState(value),
-      val = _useState2[0],
-      setValue = _useState2[1];
+  var delayedQuery = React.useCallback(debounce$1(function (value) {
+    return handleSearch(0, false, value);
+  }, 500), []);
 
-  var _useCrudContext = useCrudContext(),
-      patch = _useCrudContext.patch,
-      loading = _useCrudContext.loading,
-      Ctx = _useCrudContext.Ctx;
+  var handleSearch = function handleSearch(page, concat, value) {
+    if (page === void 0) {
+      page = 0;
+    }
 
-  var _useConfig = useConfig(),
-      fieldHaveDeleteButton = _useConfig.fieldHaveDeleteButton;
+    if (concat === void 0) {
+      concat = false;
+    }
 
-  var EditComponent = Ctx.registry.get('components', 'EditComponent');
-  var RenderFieldComponent = Ctx.registry.get('components', 'RenderFieldComponent');
-  React.useEffect(function () {
-    if (isEdit && ref.current) {
-      ref.current.focus();
+    if (value === void 0) {
+      value = '';
     }
-  });
-  var canModified = modifyContent && !get$1(schema, 'readonly', false);
 
-  var saveField = function saveField(ev) {
     try {
-      function _temp3() {
-        setEdit(false);
-        Ctx.refresh();
-      }
-
-      if (ev) ev.preventDefault();
+      setOptions({
+        loading: true
+      });
+      var searchTermQs = '';
+      var searchTermParsed = [];
 
-      if (!field) {
-        Ctx.flash(intl.formatMessage(genericMessages.error_provide_key_name), 'danger');
-        return Promise.resolve();
+      if (value !== '') {
+        searchTermParsed = parser(queryCondition + "=" + value);
       }
 
-      if (!val && required) {
-        Ctx.flash(intl.formatMessage(genericMessages.mandatory_field, {
-          field: field
-        }), 'danger');
-        return Promise.resolve();
-      }
+      var _get = traversal.registry.get;
 
-      var _temp4 = function () {
-        if ((schema == null ? void 0 : schema.widget) === 'file') {
-          var _value = val;
+      var fnName = _get('searchEngineQueryParamsFunction', SearchEngine);
 
-          if (_value) {
-            _value['filename'] = unescape(encodeURIComponent(_value['filename']));
-          }
+      var qsParsed = traversal.client[fnName]({
+        path: traversal.path,
+        start: page * PageSize,
+        pageSize: PageSize,
+        withDepth: false
+      });
+      var sortParsed = parser("_sort_des=" + labelProperty);
+      var typeNameParsed = [];
 
-          var endpoint = Ctx.path + "@upload/" + field;
-          return Promise.resolve(Ctx.client.upload(endpoint, _value)).then(function (req) {
-            if (req.status !== 200) {
-              Ctx.flash(intl.formatMessage(genericFileMessages.error_upload_file), 'danger');
-            } else {
-              Ctx.flash(intl.formatMessage(genericFileMessages.file_uploaded), 'success');
-            }
-          });
-        } else {
-          var _ns, _ref2, _ref3;
+      if (typeNameQuery) {
+        typeNameParsed = parser("type_name__in=" + typeNameQuery);
+      }
 
-          var data = ns ? (_ref2 = {}, _ref2[ns] = (_ns = {}, _ns[field] = val, _ns), _ref2) : (_ref3 = {}, _ref3[field] = val, _ref3);
-          return Promise.resolve(patch(data)).then(function (dataPatch) {
-            if (dataPatch.isError) {
-              Ctx.flash(intl.formatMessage(genericMessages.error_in_field, {
-                field: field
-              }), 'danger');
-            } else {
-              Ctx.flash(intl.formatMessage(genericMessages.field_updated, {
-                field: field
-              }), 'success');
-            }
-          });
-        }
-      }();
+      if (qs.length > 0 || searchTermParsed.length > 0 || qsParsed.length > 0 || typeNameParsed.length > 0) {
+        searchTermQs = buildQs([].concat(qs, searchTermParsed, qsParsed, typeNameParsed, sortParsed));
+      }
 
-      return Promise.resolve(_temp4 && _temp4.then ? _temp4.then(_temp3) : _temp3(_temp4));
+      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 deleteField = function deleteField(ev) {
+  var inicializeLabels = function inicializeLabels() {
     try {
-      if (ev) ev.preventDefault();
-      return Promise.resolve(function () {
-        if ((schema == null ? void 0 : schema.widget) === 'file') {
-          var _ns2, _ref4, _ref5;
+      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 (!field || !val && required) {
-            Ctx.flash(intl.formatMessage(genericMessages.can_not_delete_field, {
-              field: field
-            }), 'danger');
-            return;
+          if (typeNameQuery) {
+            typeNameParsed = parser("type_name__in=" + typeNameQuery);
           }
 
-          var data = ns ? (_ref4 = {}, _ref4[ns] = (_ns2 = {}, _ns2[field] = null, _ns2), _ref4) : (_ref5 = {}, _ref5[field] = null, _ref5);
-          return Promise.resolve(patch(data)).then(function (dataPatch) {
-            if (dataPatch.isError) {
-              Ctx.flash(intl.formatMessage(genericMessages.error_in_field, {
-                field: field
-              }), 'danger');
-            } else {
-              Ctx.flash(intl.formatMessage(genericMessages.field_deleted, {
-                field: field
-              }), 'success');
-            }
+          if (qs.length > 0 || searchTermParsed.length > 0 || qsParsed.length > 0 || typeNameParsed.length > 0) {
+            searchTermQs = buildQs([].concat(qs, [searchTermParsed], qsParsed, typeNameParsed));
+          }
 
-            setEdit(false);
-            Ctx.refresh();
+          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);
           });
-        } else if ((schema == null ? void 0 : schema.type) === 'string' && schema != null && schema.enum) {
-          setValue(null);
-        } else if ((schema == null ? void 0 : schema.type) === 'array' && (schema == null ? void 0 : schema.items.type) === 'string') {
-          setValue([]);
         }
-      }());
+      }();
+
+      return Promise.resolve(_temp2 && _temp2.then ? _temp2.then(function () {}) : void 0);
     } catch (e) {
       return Promise.reject(e);
     }
   };
 
-  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [!isEdit && jsxRuntime.jsxs("div", {
-      className: canModified ? 'editable' : '',
-      onClick: function onClick() {
-        setEdit(!!canModified);
-      },
-      "data-test": "editableFieldTest-" + field,
-      children: [jsxRuntime.jsx(RenderFieldComponent, {
-        schema: schema,
-        field: field,
-        val: val,
-        modifyContent: modifyContent
-      }), canModified && jsxRuntime.jsx(Icon, {
-        icon: "fas fa-edit"
-      })]
-    }), isEdit && jsxRuntime.jsxs("div", {
-      className: "field",
-      "data-test": "editableFieldTest-" + field,
-      children: [jsxRuntime.jsx("div", {
-        className: "control",
-        children: jsxRuntime.jsx(EditComponent, {
-          ref: ref,
-          schema: schema,
-          val: val,
-          setValue: setValue,
-          dataTest: "editableFieldEditTest"
-        })
-      }), jsxRuntime.jsxs("div", {
-        className: "field is-grouped",
-        children: [jsxRuntime.jsx("div", {
-          className: "control",
-          children: jsxRuntime.jsx(Button, {
-            className: "is-small is-primary",
-            loading: loading,
-            onClick: saveField,
-            dataTest: "editableFieldBtnSaveTest",
-            children: intl.formatMessage(genericMessages.save)
-          })
-        }), jsxRuntime.jsx("div", {
-          className: "control",
-          children: jsxRuntime.jsx(Button, {
-            className: "is-small",
-            onClick: function onClick() {
-              return setEdit(false);
-            },
-            dataTest: "editableFieldBtnCancelTest",
-            children: intl.formatMessage(genericMessages.cancel)
-          })
-        }), !required && fieldHaveDeleteButton(schema) && jsxRuntime.jsx("div", {
-          className: "control",
-          children: jsxRuntime.jsx(Button, {
-            className: "is-small is-danger",
-            onClick: deleteField,
-            dataTest: "editableFieldBtnDeleteTest",
-            children: intl.formatMessage(genericMessages.delete)
-          })
-        })]
-      })]
-    })]
-  });
-}
-
-var DownloadField = function DownloadField(_ref) {
-  var value = _ref.value;
-  var intl = reactIntl.useIntl();
-  var Ctx = useTraversal();
-  var data = value.data,
-      field = value.field;
-
-  var getField = function getField(downloadFile) {
-    try {
-      var endpoint = Ctx.path + "@download/" + field;
-      return Promise.resolve(Ctx.client.download(endpoint)).then(function (res) {
-        return Promise.resolve(res.blob()).then(function (text) {
-          var blob = new Blob([text], {
-            type: data.content_type
-          });
-          var url = window.URL.createObjectURL(blob);
-          var link = document.createElement('a');
-          link.href = url;
-
-          if (downloadFile) {
-            link.setAttribute('download', "" + data.filename);
-          } else {
-            link.setAttribute('target', "_blank");
-          }
+  var renderTextItemOptionFn = function renderTextItemOptionFn(item) {
+    if (renderTextItemOption) {
+      return renderTextItemOption(item);
+    }
 
-          document.body.appendChild(link);
-          link.click();
-          setTimeout(function () {
-            var _link$parentNode;
+    return get$1(item, labelProperty, item.title) || item['@name'];
+  };
 
-            window.URL.revokeObjectURL(url);
-            (_link$parentNode = link.parentNode) == null ? void 0 : _link$parentNode.removeChild(link);
-          }, 100);
-        });
-      });
-    } catch (e) {
-      return Promise.reject(e);
+  React.useEffect(function () {
+    if (!options.loading && !options.items && value.length > 0) {
+      inicializeLabels();
+    } else if (value.length === 0) {
+      setValuesLabels({});
     }
-  };
+  }, [path, options.loading, options.items]);
 
-  return jsxRuntime.jsxs("div", {
-    className: "field",
+  if (isLoadingData || valuesLabel === undefined) {
+    return jsxRuntime.jsx("div", {
+      className: "spinner"
+    });
+  }
+
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [jsxRuntime.jsx("div", {
-      className: "label",
-      children: data.filename
+      className: "tags mb-2",
+      children: value.map(function (tag, index) {
+        return jsxRuntime.jsxs("div", {
+          className: "tag is-info is-medium",
+          children: [get$1(valuesLabel, tag, tag), jsxRuntime.jsx("button", {
+            className: "delete is-small",
+            onClick: function onClick(ev) {
+              ev.stopPropagation();
+              ev.preventDefault();
+              onChange([].concat(value.filter(function (tag) {
+                return value.indexOf(tag) !== index;
+              })));
+            }
+          })]
+        }, "input_list_" + tag + "_" + index);
+      })
     }), jsxRuntime.jsxs("div", {
-      className: "columns",
+      "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);
+        }
+      },
       children: [jsxRuntime.jsx("div", {
-        className: "column",
-        children: jsxRuntime.jsx("button", {
-          className: "button is-small is-primary level-left",
-          onClick: function (event) {
-            try {
-              event.preventDefault();
-              event.stopPropagation();
-              getField(false);
-              return Promise.resolve();
-            } catch (e) {
-              return Promise.reject(e);
+        className: "dropdown-trigger",
+        children: jsxRuntime.jsxs("button", {
+          className: "button " + btnClass,
+          onClick: function onClick(ev) {
+            ev.preventDefault();
+            setIsOpen(!isOpen);
+
+            if (!options.loading && !options.items) {
+              handleSearch(options.page);
             }
           },
-          children: intl.formatMessage(genericMessages.open)
+          "aria-haspopup": "true",
+          "aria-controls": "dropdown-menu",
+          children: [jsxRuntime.jsx("span", {
+            children: intl.formatMessage(genericMessages.choose)
+          }), jsxRuntime.jsx("span", {
+            className: "icon",
+            children: jsxRuntime.jsx("i", {
+              className: "fas fa-angle-down",
+              "aria-hidden": "true"
+            })
+          })]
         })
       }), jsxRuntime.jsx("div", {
-        className: "column",
-        children: jsxRuntime.jsx("button", {
-          className: "button is-small is-primary level-right",
-          onClick: function (event) {
-            try {
-              event.preventDefault();
-              event.stopPropagation();
-              getField(true);
-              return Promise.resolve();
-            } catch (e) {
-              return Promise.reject(e);
-            }
-          },
-          children: intl.formatMessage(genericMessages.download)
-        })
-      })]
+        className: "dropdown-menu",
+        id: "dropdown-menu",
+        role: "menu",
+        style: getHeight(),
+        children: jsxRuntime.jsxs("div", {
+          className: "dropdown-content",
+          children: [jsxRuntime.jsx("div", {
+            className: "dropdown-item",
+            children: jsxRuntime.jsx("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);
+              }
+            })
+          }), jsxRuntime.jsx("hr", {
+            className: "dropdown-divider"
+          }), options.loading && jsxRuntime.jsx(Loading, {}), options.items && options.items.map(function (item) {
+            return jsxRuntime.jsx("div", {
+              className: "dropdown-item editable " + (value.includes(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]));
+                }
+              },
+              children: renderTextItemOptionFn(item)
+            }, item.path);
+          }), options.items && options.items.length === 0 && jsxRuntime.jsx("div", {
+            className: "dropdown-item",
+            children: intl.formatMessage(genericMessages.no_results)
+          }), options.items && options.items_total > options.items.length && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+            children: [jsxRuntime.jsx("hr", {
+              className: "dropdown-divider"
+            }), jsxRuntime.jsx("div", {
+              className: "dropdown-item editable",
+              onMouseDown: function onMouseDown(ev) {
+                ev.stopPropagation();
+                ev.preventDefault();
+                handleSearch(options.page + 1, true);
+              },
+              children: intl.formatMessage(genericMessages.load_more)
+            })]
+          })]
+        })
+      })]
+    }), error && jsxRuntime.jsx(ErrorZone, {
+      className: errorZoneClassName,
+      id: uid,
+      children: error ? error : ''
     })]
   });
 };
 
-function _catch$1(body, recover) {
-  try {
-    var result = body();
-  } catch (e) {
-    return recover(e);
-  }
-
-  if (result && result.then) {
-    return result.then(void 0, recover);
-  }
-
-  return result;
-}
-
-function useVocabulary(vocabularyName, path) {
-  if (path === void 0) {
-    path = null;
-  }
-
-  var traversal = useTraversal();
+var InputList = React.forwardRef(function (_ref, ref) {
+  var value = _ref.value,
+      onChange = _ref.onChange,
+      dataTest = _ref.dataTest,
+      id = _ref.id;
+  var intl = reactIntl.useIntl();
 
-  var _useSetState = useSetState({
-    data: undefined,
-    loading: false,
-    error: undefined
-  }),
-      vocabulary = _useSetState[0],
-      setVocabulary = _useSetState[1];
+  var _useState = React.useState(''),
+      inputValue = _useState[0],
+      setInputValue = _useState[1];
 
-  var getPath = function getPath() {
-    if (path) return path;
-    return traversal.path + "@vocabularies/" + vocabularyName;
+  var addTags = function addTags(event) {
+    if (event.key === 'Enter' && event.target.value !== '') {
+      onChange([].concat(value, [event.target.value]));
+      setInputValue('');
+    }
   };
 
-  React.useEffect(function () {
-    var getVocabulary = function getVocabulary() {
-      try {
-        var _temp3 = function () {
-          if (vocabularyName && vocabulary.data === undefined && !vocabulary.loading) {
-            var _temp4 = _catch$1(function () {
-              setVocabulary({
-                loading: true
-              });
-              return Promise.resolve(traversal.client.get(getPath())).then(function (data) {
-                return Promise.resolve(data.json()).then(function (dataJson) {
-                  setVocabulary({
-                    loading: false,
-                    data: dataJson
-                  });
-                });
-              });
-            }, function (err) {
-              setVocabulary({
-                loading: false,
-                error: err,
-                data: undefined
-              });
-            });
-
-            if (_temp4 && _temp4.then) return _temp4.then(function () {});
-          }
-        }();
-
-        return Promise.resolve(_temp3 && _temp3.then ? _temp3.then(function () {}) : void 0);
-      } catch (e) {
-        return Promise.reject(e);
+  return jsxRuntime.jsxs("div", {
+    className: "control",
+    children: [(value != null ? value : []).length > 0 && jsxRuntime.jsx("div", {
+      className: "tags",
+      children: value.map(function (tag, index) {
+        return jsxRuntime.jsxs("div", {
+          className: "tag is-info is-medium",
+          children: [tag, jsxRuntime.jsx("button", {
+            className: "delete is-small",
+            type: "button",
+            onClick: function onClick() {
+              return onChange([].concat(value.filter(function (tag) {
+                return value.indexOf(tag) !== index;
+              })));
+            }
+          })]
+        }, "input_list_" + tag + "_" + index);
+      })
+    }), jsxRuntime.jsx(Input, {
+      type: "text",
+      id: id,
+      placeholder: intl.formatMessage({
+        id: "press_enter_to_add_value",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Press enter to add value"
+        }]
+      }),
+      onKeyUp: function onKeyUp(event) {
+        return addTags(event);
+      },
+      value: inputValue,
+      ref: ref,
+      dataTest: dataTest,
+      onChange: function onChange(value) {
+        setInputValue(value);
       }
-    };
-
-    getVocabulary();
-  }, [vocabularyName, vocabulary, path]);
-  return vocabulary;
-}
-
-var plain = ['string', 'number', 'boolean'];
-function RenderField(_ref) {
-  var value = _ref.value,
-      Widget = _ref.Widget,
-      schema = _ref.schema;
-  if (value === null || value === undefined) return '';
-
-  if (Widget) {
-    return jsxRuntime.jsx(Widget, {
-      value: value,
-      schema: schema
-    });
-  }
-
-  var type = typeof value;
-
-  if (plain.includes(type)) {
-    return value;
-  }
+    })]
+  });
+});
+InputList.displayName = 'InputList';
 
-  if (type === 'object') {
-    if (Array.isArray(value)) {
-      return value.map(function (item) {
-        return jsxRuntime.jsx("div", {
-          children: jsxRuntime.jsx(RenderField, {
-            value: item
-          })
-        }, item);
-      });
-    }
+function Dropdown(_ref) {
+  var children = _ref.children,
+      disabled = _ref.disabled,
+      id = _ref.id,
+      isRight = _ref.isRight,
+      onChange = _ref.onChange,
+      optionDisabledWhen = _ref.optionDisabledWhen,
+      options = _ref.options;
+  var ref = React.useRef(null);
 
-    return Object.keys(value).map(function (key) {
-      return jsxRuntime.jsx(FieldValue, {
-        field: get$1(schema, "properties." + key + ".title", key),
-        schema: get$1(schema, "properties." + key, {}),
-        value: value[key]
-      }, key);
-    });
-  }
+  var _useState = React.useState(false),
+      isActive = _useState[0],
+      setIsActive = _useState[1];
 
-  return jsxRuntime.jsxs("p", {
-    children: ["No render for ", JSON.stringify(value)]
+  var position = isRight ? 'is-right' : '';
+  var status = isActive ? "dropdown " + position + " is-active" : "dropdown " + position;
+  useClickAway(ref, function () {
+    setIsActive(false);
   });
-}
-
-var FieldValue = function FieldValue(_ref2) {
-  var field = _ref2.field,
-      value = _ref2.value,
-      schema = _ref2.schema;
   return jsxRuntime.jsxs("div", {
-    className: "field",
+    ref: ref,
+    className: status,
     children: [jsxRuntime.jsx("div", {
-      className: "label",
-      children: field
+      className: "dropdown-trigger",
+      children: jsxRuntime.jsx("button", {
+        className: "button is-size-7",
+        onClick: function onClick() {
+          return setIsActive(!isActive);
+        },
+        "aria-haspopup": "true",
+        disabled: disabled,
+        "aria-controls": id,
+        children: children
+      })
     }), jsxRuntime.jsx("div", {
-      className: "value",
-      children: jsxRuntime.jsx(RenderFieldComponent, {
-        val: value,
-        schema: schema,
-        field: field
+      className: "dropdown-menu",
+      id: id,
+      role: "menu",
+      children: jsxRuntime.jsx("div", {
+        className: "dropdown-content",
+        children: options.map(function (option) {
+          var disabled = typeof optionDisabledWhen === 'function' ? optionDisabledWhen(option) : false;
+          return jsxRuntime.jsx("a", {
+            className: disabled ? 'dropdown-item is-active' : 'dropdown-item',
+            "data-test": "dropdownItemTest-" + option.value.toLowerCase(),
+            onClick: disabled ? undefined : function () {
+              return onChange(option.value);
+            },
+            style: disabled ? {
+              cursor: 'not-allowed',
+              color: 'black',
+              opacity: 0.5,
+              backgroundColor: '#eeeeee'
+            } : {},
+            children: option.text
+          }, option.text);
+        })
       })
     })]
   });
-};
-
-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 SearchRenderField = function SearchRenderField(_ref3) {
-  var schema = _ref3.schema,
-      value = _ref3.value,
-      modifyContent = _ref3.modifyContent;
+function EditableField(_ref) {
+  var field = _ref.field,
+      value = _ref.value,
+      ns = _ref.ns,
+      _ref$schema = _ref.schema,
+      schema = _ref$schema === void 0 ? undefined : _ref$schema,
+      modifyContent = _ref.modifyContent,
+      required = _ref.required;
   var intl = reactIntl.useIntl();
+  var ref = React.useRef();
 
-  var _useState = React.useState([]),
-      valuesLabels = _useState[0],
-      setValuesLabels = _useState[1];
+  var _useState = React.useState(false),
+      isEdit = _useState[0],
+      setEdit = _useState[1];
 
-  var _useState2 = React.useState(false),
-      isLoadingData = _useState2[0],
-      setIsLoadingData = _useState2[1];
+  var _useState2 = React.useState(value),
+      val = _useState2[0],
+      setValue = _useState2[1];
 
-  var traversal = useTraversal();
+  var _useCrudContext = useCrudContext(),
+      patch = _useCrudContext.patch,
+      loading = _useCrudContext.loading,
+      Ctx = _useCrudContext.Ctx;
 
   var _useConfig = useConfig(),
-      SearchEngine = _useConfig.SearchEngine;
+      fieldHaveDeleteButton = _useConfig.fieldHaveDeleteButton;
 
-  var DEFAULT_VALUE_EDITABLE_FIELD = getDefaultValueEditableField(intl);
+  var EditComponent = Ctx.registry.get('components', 'EditComponent');
+  var RenderFieldComponent = Ctx.registry.get('components', 'RenderFieldComponent');
   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([]);
+    if (isEdit && ref.current) {
+      ref.current.focus();
     }
-  }, [value]);
+  });
+  var canModified = modifyContent && !get$1(schema, 'readonly', false);
 
-  var getRenderValue = function getRenderValue() {
-    if (value === undefined) {
-      if (modifyContent) {
-        return DEFAULT_VALUE_EDITABLE_FIELD;
+  var saveField = function saveField(ev) {
+    try {
+      function _temp3() {
+        setEdit(false);
+        Ctx.refresh();
       }
 
-      return DEFAULT_VALUE_NO_EDITABLE_FIELD;
-    }
-
-    if (isLoadingData) {
-      return 'Loading...';
-    }
-
-    return valuesLabels;
-  };
+      if (ev) ev.preventDefault();
 
-  return jsxRuntime.jsx(RenderField, {
-    value: getRenderValue()
-  });
-};
-var VocabularyRenderField = function VocabularyRenderField(_ref4) {
-  var _schema$items;
+      if (!field) {
+        Ctx.flash(intl.formatMessage(genericMessages.error_provide_key_name), 'danger');
+        return Promise.resolve();
+      }
 
-  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);
-  var vocabulary = useVocabulary(vocabularyName);
+      if (!val && required) {
+        Ctx.flash(intl.formatMessage(genericMessages.mandatory_field, {
+          field: field
+        }), 'danger');
+        return Promise.resolve();
+      }
 
-  var getRenderProps = function getRenderProps() {
-    var renderProps = {
-      value: value != null ? value : modifyContent ? DEFAULT_VALUE_EDITABLE_FIELD : DEFAULT_VALUE_NO_EDITABLE_FIELD
-    };
+      var _temp4 = function () {
+        if ((schema == null ? void 0 : schema.widget) === 'file') {
+          var _value = val;
 
-    if (schema != null && schema.vocabularyName) {
-      var _vocabularyValue$titl;
+          if (_value) {
+            _value['filename'] = unescape(encodeURIComponent(_value['filename']));
+          }
 
-      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;
+          var endpoint = Ctx.path + "@upload/" + field;
+          return Promise.resolve(Ctx.client.upload(endpoint, _value)).then(function (req) {
+            if (req.status !== 200) {
+              Ctx.flash(intl.formatMessage(genericFileMessages.error_upload_file), 'danger');
+            } else {
+              Ctx.flash(intl.formatMessage(genericFileMessages.file_uploaded), 'success');
+            }
+          });
+        } else {
+          var _ns, _ref2, _ref3;
 
-      renderProps['value'] = ((_renderProps$value = renderProps['value']) != null ? _renderProps$value : []).map(function (value) {
-        var _get$find$title, _get$find;
+          var data = ns ? (_ref2 = {}, _ref2[ns] = (_ns = {}, _ns[field] = val, _ns), _ref2) : (_ref3 = {}, _ref3[field] = val, _ref3);
+          return Promise.resolve(patch(data)).then(function (dataPatch) {
+            if (dataPatch.isError) {
+              Ctx.flash(intl.formatMessage(genericMessages.error_in_field, {
+                field: field
+              }), 'danger');
+            } else {
+              Ctx.flash(intl.formatMessage(genericMessages.field_updated, {
+                field: field
+              }), 'success');
+            }
+          });
+        }
+      }();
 
-        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 Promise.resolve(_temp4 && _temp4.then ? _temp4.then(_temp3) : _temp3(_temp4));
+    } catch (e) {
+      return Promise.reject(e);
     }
-
-    return renderProps;
   };
 
-  return jsxRuntime.jsx(RenderField, _extends({}, getRenderProps()));
-};
-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);
-
-  var getRenderProps = function getRenderProps() {
-    var _schema$items2;
+  var deleteField = function deleteField(ev) {
+    try {
+      if (ev) ev.preventDefault();
+      return Promise.resolve(function () {
+        if ((schema == null ? void 0 : schema.widget) === 'file') {
+          var _ns2, _ref4, _ref5;
 
-    var renderProps = {
-      value: val != null ? val : modifyContent ? DEFAULT_VALUE_EDITABLE_FIELD : DEFAULT_VALUE_NO_EDITABLE_FIELD,
-      schema: schema
-    };
+          if (!field || !val && required) {
+            Ctx.flash(intl.formatMessage(genericMessages.can_not_delete_field, {
+              field: field
+            }), 'danger');
+            return;
+          }
 
-    if (val && (schema == null ? void 0 : schema.widget) === 'file') {
-      renderProps['value'] = {
-        data: val,
-        field: field
-      };
-      renderProps['Widget'] = DownloadField;
-    } else if ((schema == null ? void 0 : schema.type) === 'boolean') {
-      var _val$toString;
+          var data = ns ? (_ref4 = {}, _ref4[ns] = (_ns2 = {}, _ns2[field] = null, _ns2), _ref4) : (_ref5 = {}, _ref5[field] = null, _ref5);
+          return Promise.resolve(patch(data)).then(function (dataPatch) {
+            if (dataPatch.isError) {
+              Ctx.flash(intl.formatMessage(genericMessages.error_in_field, {
+                field: field
+              }), 'danger');
+            } else {
+              Ctx.flash(intl.formatMessage(genericMessages.field_deleted, {
+                field: field
+              }), 'success');
+            }
 
-      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$items2 = schema.items) != null && _schema$items2.vocabularyName || schema != null && schema.vocabularyName) {
-      renderProps['Widget'] = VocabularyRenderField;
-    } else if ((schema == null ? void 0 : schema.widget) === 'search' || (schema == null ? void 0 : schema.widget) === 'search_list') {
-      renderProps['Widget'] = SearchRenderField;
-      renderProps['value'] = val;
+            setEdit(false);
+            Ctx.refresh();
+          });
+        } else if ((schema == null ? void 0 : schema.type) === 'string' && schema != null && schema.enum) {
+          setValue(null);
+        } else if ((schema == null ? void 0 : schema.type) === 'array' && (schema == null ? void 0 : schema.items.type) === 'string') {
+          setValue([]);
+        }
+      }());
+    } catch (e) {
+      return Promise.reject(e);
     }
-
-    return renderProps;
   };
 
-  return jsxRuntime.jsx(RenderField, _extends({}, getRenderProps()));
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [!isEdit && jsxRuntime.jsxs("div", {
+      className: canModified ? 'editable' : '',
+      onClick: function onClick() {
+        setEdit(!!canModified);
+      },
+      "data-test": "editableFieldTest-" + field,
+      children: [jsxRuntime.jsx(RenderFieldComponent, {
+        schema: schema,
+        field: field,
+        val: val,
+        modifyContent: modifyContent
+      }), canModified && jsxRuntime.jsx(Icon, {
+        icon: "fas fa-edit"
+      })]
+    }), isEdit && jsxRuntime.jsxs("div", {
+      className: "field",
+      "data-test": "editableFieldTest-" + field,
+      children: [jsxRuntime.jsx("div", {
+        className: "control",
+        children: jsxRuntime.jsx(EditComponent, {
+          ref: ref,
+          schema: schema,
+          val: val,
+          setValue: setValue,
+          dataTest: "editableFieldEditTest"
+        })
+      }), jsxRuntime.jsxs("div", {
+        className: "field is-grouped",
+        children: [jsxRuntime.jsx("div", {
+          className: "control",
+          children: jsxRuntime.jsx(Button, {
+            className: "is-small is-primary",
+            loading: loading,
+            onClick: saveField,
+            dataTest: "editableFieldBtnSaveTest",
+            children: intl.formatMessage(genericMessages.save)
+          })
+        }), jsxRuntime.jsx("div", {
+          className: "control",
+          children: jsxRuntime.jsx(Button, {
+            className: "is-small",
+            onClick: function onClick() {
+              return setEdit(false);
+            },
+            dataTest: "editableFieldBtnCancelTest",
+            children: intl.formatMessage(genericMessages.cancel)
+          })
+        }), !required && fieldHaveDeleteButton(schema) && jsxRuntime.jsx("div", {
+          className: "control",
+          children: jsxRuntime.jsx(Button, {
+            className: "is-small is-danger",
+            onClick: deleteField,
+            dataTest: "editableFieldBtnDeleteTest",
+            children: intl.formatMessage(genericMessages.delete)
+          })
+        })]
+      })]
+    })]
+  });
 }
 
-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,
-      onChange = _ref.onChange,
-      id = _ref.id,
-      placeholder = _ref.placeholder;
-  var vocabulary = useVocabulary(vocabularyName);
+var DownloadField = function DownloadField(_ref) {
+  var value = _ref.value;
+  var intl = reactIntl.useIntl();
+  var Ctx = useTraversal();
+  var data = value.data,
+      field = value.field;
 
-  var getOptions = function getOptions() {
-    if (get$1(vocabulary, 'data.items', null)) {
-      var vocData = vocabulary.data.items.map(function (item) {
-        return {
-          text: item.title,
-          value: item.token
-        };
-      });
-      return vocData;
-    }
+  var getField = function getField(downloadFile) {
+    try {
+      var endpoint = Ctx.path + "@download/" + field;
+      return Promise.resolve(Ctx.client.download(endpoint)).then(function (res) {
+        return Promise.resolve(res.blob()).then(function (text) {
+          var blob = new Blob([text], {
+            type: data.content_type
+          });
+          var url = window.URL.createObjectURL(blob);
+          var link = document.createElement('a');
+          link.href = url;
 
-    return [];
-  };
+          if (downloadFile) {
+            link.setAttribute('download', "" + data.filename);
+          } else {
+            link.setAttribute('target', "_blank");
+          }
 
-  var getProps = function getProps() {
-    if (multiple) {
-      var currentValue = val || [];
-      return {
-        multiple: true,
-        size: 5,
-        value: currentValue,
-        options: getOptions()
-      };
-    }
+          document.body.appendChild(link);
+          link.click();
+          setTimeout(function () {
+            var _link$parentNode;
 
-    return {
-      value: val != null ? val : '',
-      appendDefault: true,
-      options: getOptions()
-    };
+            window.URL.revokeObjectURL(url);
+            (_link$parentNode = link.parentNode) == null ? void 0 : _link$parentNode.removeChild(link);
+          }, 100);
+        });
+      });
+    } catch (e) {
+      return Promise.reject(e);
+    }
   };
 
-  if (vocabulary.data === undefined || vocabulary.loading) {
-    return jsxRuntime.jsx("div", {});
+  return jsxRuntime.jsxs("div", {
+    className: "field",
+    children: [jsxRuntime.jsx("div", {
+      className: "label",
+      children: data.filename
+    }), jsxRuntime.jsxs("div", {
+      className: "columns",
+      children: [jsxRuntime.jsx("div", {
+        className: "column",
+        children: jsxRuntime.jsx("button", {
+          className: "button is-small is-primary level-left",
+          onClick: function (event) {
+            try {
+              event.preventDefault();
+              event.stopPropagation();
+              getField(false);
+              return Promise.resolve();
+            } catch (e) {
+              return Promise.reject(e);
+            }
+          },
+          children: intl.formatMessage(genericMessages.open)
+        })
+      }), jsxRuntime.jsx("div", {
+        className: "column",
+        children: jsxRuntime.jsx("button", {
+          className: "button is-small is-primary level-right",
+          onClick: function (event) {
+            try {
+              event.preventDefault();
+              event.stopPropagation();
+              getField(true);
+              return Promise.resolve();
+            } catch (e) {
+              return Promise.reject(e);
+            }
+          },
+          children: intl.formatMessage(genericMessages.download)
+        })
+      })]
+    })]
+  });
+};
+
+var plain = ['string', 'number', 'boolean'];
+function RenderField(_ref) {
+  var value = _ref.value,
+      Widget = _ref.Widget,
+      schema = _ref.schema;
+  if (value === null || value === undefined) return '';
+
+  if (Widget) {
+    return jsxRuntime.jsx(Widget, {
+      value: value,
+      schema: schema
+    });
   }
 
-  return jsxRuntime.jsx(Select, _extends({}, getProps(), {
-    className: className,
-    classWrap: classWrap || 'is-fullwidth',
-    dataTest: dataTest,
-    ref: ref,
-    onChange: onChange,
-    id: id,
-    placeholder: placeholder
-  }));
-});
-SelectVocabulary.displayName = 'SelectVocabulary';
+  var type = typeof value;
 
-function debounce$1(func, wait) {
-  var timeout;
-  return function () {
-    var context = this;
-    var args = arguments;
+  if (plain.includes(type)) {
+    return value;
+  }
 
-    var later = function later() {
-      timeout = null;
-      func.apply(context, args);
-    };
+  if (type === 'object') {
+    if (Array.isArray(value)) {
+      return value.map(function (item) {
+        return jsxRuntime.jsx("div", {
+          children: jsxRuntime.jsx(RenderField, {
+            value: item
+          })
+        }, item);
+      });
+    }
 
-    clearTimeout(timeout);
-    timeout = setTimeout(later, wait);
-  };
+    return Object.keys(value).map(function (key) {
+      return jsxRuntime.jsx(FieldValue, {
+        field: get$1(schema, "properties." + key + ".title", key),
+        schema: get$1(schema, "properties." + key, {}),
+        value: value[key]
+      }, key);
+    });
+  }
+
+  return jsxRuntime.jsxs("p", {
+    children: ["No render for ", JSON.stringify(value)]
+  });
 }
 
-var initialState$1 = {
-  page: 0,
-  items: undefined,
-  loading: false,
-  items_total: 0
+var FieldValue = function FieldValue(_ref2) {
+  var field = _ref2.field,
+      value = _ref2.value,
+      schema = _ref2.schema;
+  return jsxRuntime.jsxs("div", {
+    className: "field",
+    children: [jsxRuntime.jsx("div", {
+      className: "label",
+      children: field
+    }), jsxRuntime.jsx("div", {
+      className: "value",
+      children: jsxRuntime.jsx(RenderFieldComponent, {
+        val: value,
+        schema: schema,
+        field: field
+      })
+    })]
+  });
 };
-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 DEFAULT_VALUE_NO_EDITABLE_FIELD = ' -- ';
 
-  var _useState = React.useState(undefined),
-      valuesLabel = _useState[0],
+var getDefaultValueEditableField = function getDefaultValueEditableField(intl) {
+  return intl.formatMessage({
+    id: "default_value_editable_field",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Click to edit"
+    }]
+  });
+};
+
+var SearchRenderField = function SearchRenderField(_ref3) {
+  var schema = _ref3.schema,
+      value = _ref3.value,
+      modifyContent = _ref3.modifyContent;
+  var intl = reactIntl.useIntl();
+
+  var _useState = React.useState([]),
+      valuesLabels = _useState[0],
       setValuesLabels = _useState[1];
 
   var _useState2 = React.useState(false),
-      isOpen = _useState2[0],
-      setIsOpen = _useState2[1];
-
-  var _useState3 = React.useState(''),
-      searchTerm = _useState3[0],
-      setSearchTerm = _useState3[1];
+      isLoadingData = _useState2[0],
+      setIsLoadingData = _useState2[1];
 
-  var inputRef = React.useRef(null);
-  var wrapperRef = React.useRef(null);
+  var traversal = useTraversal();
 
   var _useConfig = useConfig(),
-      PageSize = _useConfig.PageSize,
       SearchEngine = _useConfig.SearchEngine;
 
-  var _useState4 = React.useState(false),
-      isLoadingData = _useState4[0],
-      setIsLoadingData = _useState4[1];
-
-  var _useState5 = React.useState(generateUID('search_input')),
-      uid = _useState5[0];
+  var DEFAULT_VALUE_EDITABLE_FIELD = getDefaultValueEditableField(intl);
+  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
+        });
 
-  useClickAway(wrapperRef, function () {
-    setIsOpen(false);
-  });
+        if (searchTermParsed.length > 0 || qsParsed.length > 0) {
+          searchTermQs = buildQs([searchTermParsed].concat(qsParsed));
+        }
 
-  var getHeight = function getHeight() {
-    if (wrapperRef && wrapperRef.current) {
-      return {
-        maxHeight: window.innerHeight - wrapperRef.current.getBoundingClientRect().top - 100 + "px"
-      };
-    }
+        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 {
-      maxHeight: 'auto'
+            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 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;
-    }
+    var valuesToSearch = value;
 
-    if (concat === void 0) {
-      concat = false;
+    if (typeof valuesToSearch === 'string') {
+      valuesToSearch = [valuesToSearch];
     }
 
-    if (value === void 0) {
-      value = '';
+    if (valuesToSearch !== undefined && valuesToSearch.length > 0) {
+      fetchData(valuesToSearch);
+    } else {
+      setValuesLabels([]);
     }
+  }, [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=" + labelProperty);
-      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));
+  var getRenderValue = function getRenderValue() {
+    if (value === undefined) {
+      if (modifyContent) {
+        return DEFAULT_VALUE_EDITABLE_FIELD;
       }
 
-      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);
+      return DEFAULT_VALUE_NO_EDITABLE_FIELD;
+    }
+
+    if (isLoadingData) {
+      return 'Loading...';
     }
+
+    return valuesLabels;
   };
 
-  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 = [];
+  return jsxRuntime.jsx(RenderField, {
+    value: getRenderValue()
+  });
+};
+var VocabularyRenderField = function VocabularyRenderField(_ref4) {
+  var _schema$items;
 
-          if (typeNameQuery) {
-            typeNameParsed = parser("type_name__in=" + typeNameQuery);
-          }
+  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);
+  var vocabulary = useVocabulary(vocabularyName);
 
-          if (qs.length > 0 || searchTermParsed.length > 0 || qsParsed.length > 0 || typeNameParsed.length > 0) {
-            searchTermQs = buildQs([].concat(qs, [searchTermParsed], qsParsed, typeNameParsed));
-          }
+  var getRenderProps = function getRenderProps() {
+    var renderProps = {
+      value: value != null ? value : modifyContent ? DEFAULT_VALUE_EDITABLE_FIELD : DEFAULT_VALUE_NO_EDITABLE_FIELD
+    };
 
-          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);
-          });
-        }
-      }();
+    if (schema != null && schema.vocabularyName) {
+      var _vocabularyValue$titl;
 
-      return Promise.resolve(_temp2 && _temp2.then ? _temp2.then(function () {}) : void 0);
-    } catch (e) {
-      return Promise.reject(e);
-    }
-  };
+      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;
 
-  var renderTextItemOptionFn = function renderTextItemOptionFn(item) {
-    if (renderTextItemOption) {
-      return renderTextItemOption(item);
+      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 get$1(item, labelProperty, item.title) || item['@name'];
+    return renderProps;
   };
 
-  React.useEffect(function () {
-    if (!options.loading && !options.items && value.length > 0) {
-      inicializeLabels();
-    } else if (value.length === 0) {
-      setValuesLabels({});
-    }
-  }, [path, options.loading, options.items]);
+  return jsxRuntime.jsx(RenderField, _extends({}, getRenderProps()));
+};
+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);
 
-  if (isLoadingData || valuesLabel === undefined) {
-    return jsxRuntime.jsx("div", {
-      className: "spinner"
-    });
-  }
+  var getRenderProps = function getRenderProps() {
+    var _schema$items2;
 
-  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [jsxRuntime.jsx("div", {
-      className: "tags mb-2",
-      children: value.map(function (tag, index) {
-        return jsxRuntime.jsxs("div", {
-          className: "tag is-info is-medium",
-          children: [get$1(valuesLabel, tag, tag), jsxRuntime.jsx("button", {
-            className: "delete is-small",
-            onClick: function onClick(ev) {
-              ev.stopPropagation();
-              ev.preventDefault();
-              onChange([].concat(value.filter(function (tag) {
-                return value.indexOf(tag) !== index;
-              })));
-            }
-          })]
-        }, "input_list_" + tag + "_" + index);
-      })
-    }), jsxRuntime.jsxs("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);
-          }
+    var renderProps = {
+      value: val != null ? val : modifyContent ? DEFAULT_VALUE_EDITABLE_FIELD : DEFAULT_VALUE_NO_EDITABLE_FIELD,
+      schema: schema
+    };
 
-          setIsOpen(false);
-        }
-      },
-      children: [jsxRuntime.jsx("div", {
-        className: "dropdown-trigger",
-        children: jsxRuntime.jsxs("button", {
-          className: "button " + btnClass,
-          onClick: function onClick(ev) {
-            ev.preventDefault();
-            setIsOpen(!isOpen);
+    if (val && (schema == null ? void 0 : schema.widget) === 'file') {
+      renderProps['value'] = {
+        data: val,
+        field: field
+      };
+      renderProps['Widget'] = DownloadField;
+    } else if ((schema == null ? void 0 : schema.type) === 'boolean') {
+      var _val$toString;
 
-            if (!options.loading && !options.items) {
-              handleSearch(options.page);
-            }
-          },
-          "aria-haspopup": "true",
-          "aria-controls": "dropdown-menu",
-          children: [jsxRuntime.jsx("span", {
-            children: intl.formatMessage(genericMessages.choose)
-          }), jsxRuntime.jsx("span", {
-            className: "icon",
-            children: jsxRuntime.jsx("i", {
-              className: "fas fa-angle-down",
-              "aria-hidden": "true"
-            })
-          })]
-        })
-      }), jsxRuntime.jsx("div", {
-        className: "dropdown-menu",
-        id: "dropdown-menu",
-        role: "menu",
-        style: getHeight(),
-        children: jsxRuntime.jsxs("div", {
-          className: "dropdown-content",
-          children: [jsxRuntime.jsx("div", {
-            className: "dropdown-item",
-            children: jsxRuntime.jsx("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);
-              }
-            })
-          }), jsxRuntime.jsx("hr", {
-            className: "dropdown-divider"
-          }), options.loading && jsxRuntime.jsx(Loading, {}), options.items && options.items.map(function (item) {
-            return jsxRuntime.jsx("div", {
-              className: "dropdown-item editable " + (value.includes(item.id) ? 'is-active' : ''),
-              "data-test": dataTestItem + "-" + item.id,
-              onMouseDown: function onMouseDown(ev) {
-                ev.stopPropagation();
-                ev.preventDefault();
+      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$items2 = schema.items) != null && _schema$items2.vocabularyName || schema != null && schema.vocabularyName) {
+      renderProps['Widget'] = VocabularyRenderField;
+    } else if ((schema == null ? void 0 : schema.widget) === 'search' || (schema == null ? void 0 : schema.widget) === 'search_list') {
+      renderProps['Widget'] = SearchRenderField;
+      renderProps['value'] = val;
+    }
 
-                if (onChange && !value.includes(item.id)) {
-                  var _extends2;
+    return renderProps;
+  };
 
-                  setValuesLabels(_extends({}, valuesLabel, (_extends2 = {}, _extends2[item.id] = get$1(item, labelProperty, item.id), _extends2)));
-                  onChange([].concat(value, [item.id]));
-                }
-              },
-              children: renderTextItemOptionFn(item)
-            }, item.path);
-          }), options.items && options.items.length === 0 && jsxRuntime.jsx("div", {
-            className: "dropdown-item",
-            children: intl.formatMessage(genericMessages.no_results)
-          }), options.items && options.items_total > options.items.length && jsxRuntime.jsxs(jsxRuntime.Fragment, {
-            children: [jsxRuntime.jsx("hr", {
-              className: "dropdown-divider"
-            }), jsxRuntime.jsx("div", {
-              className: "dropdown-item editable",
-              onMouseDown: function onMouseDown(ev) {
-                ev.stopPropagation();
-                ev.preventDefault();
-                handleSearch(options.page + 1, true);
-              },
-              children: intl.formatMessage(genericMessages.load_more)
-            })]
-          })]
-        })
-      })]
-    }), error && jsxRuntime.jsx(ErrorZone, {
-      className: errorZoneClassName,
-      id: uid,
-      children: error ? error : ''
-    })]
-  });
-};
+  return jsxRuntime.jsx(RenderField, _extends({}, getRenderProps()));
+}
 
 var EditComponent = React.forwardRef(function (_ref, ref) {
   var schema = _ref.schema,
@@ -14391,11 +14391,13 @@ exports.RenderFieldComponent = RenderFieldComponent;
 exports.RequiredFieldsForm = RequiredFieldsForm;
 exports.RestClient = RestClient;
 exports.SearchInput = SearchInput;
+exports.SearchInputList = SearchInputList;
 exports.SearchLabels = SearchLabels;
 exports.SearchOptionsLabels = SearchOptionsLabels;
 exports.SearchRenderField = SearchRenderField;
 exports.SearchVocabularyLabels = SearchVocabularyLabels;
 exports.Select = Select;
+exports.SelectVocabulary = SelectVocabulary;
 exports.Sharing = Sharing;
 exports.Table = Table;
 exports.TabsPanel = TabsPanel;