@guillotinaweb/react-gmi 0.28.3 → 0.28.4

package/dist/react-gmi.umd.js

@@ -1963,6 +1963,167 @@
   });
   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, '/'));
   };
@@ -3083,33 +3244,6 @@
     }, [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 () {
@@ -3439,1136 +3573,1002 @@
     });
   };
 
-  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,
@@ -14387,11 +14387,13 @@
   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;