@guillotinaweb/react-gmi 0.28.2 → 0.28.4

package/dist/react-gmi.modern.js

@@ -1621,6 +1621,129 @@ const Select = forwardRef(({
 });
 Select.displayName = 'Select';
 
+const formatDate = str => {
+  const d = new Date(str);
+  const minutes = d.getMinutes() < 10 ? `0${d.getMinutes()}` : d.getMinutes();
+  return `${d.getDate()}/${d.getMonth() + 1}/${d.getFullYear()} ${d.getHours()}:${minutes}`;
+};
+const get$1 = (obj, path, defValue) => {
+  var _pathArray$reduce;
+
+  if (!path) return undefined;
+  const pathArray = Array.isArray(path) ? path : path.match(/([^[.\]])+/g);
+  return (_pathArray$reduce = pathArray.reduce((prevObj, key) => prevObj && prevObj[key], obj)) != null ? _pathArray$reduce : defValue;
+};
+function getNewId(id = '') {
+  const suffix = '-copy-';
+  const rgx = new RegExp(`($|${suffix}\\d*)`);
+  return stringToSlug(id).replace(rgx, r => {
+    const num = parseInt(r.replace(suffix, '') || '0');
+    return `${suffix}${num + 1}`;
+  });
+}
+
+function useVocabulary(vocabularyName, path = null) {
+  const traversal = useTraversal();
+  const [vocabulary, setVocabulary] = useSetState({
+    data: undefined,
+    loading: false,
+    error: undefined
+  });
+
+  const getPath = () => {
+    if (path) return path;
+    return `${traversal.path}@vocabularies/${vocabularyName}`;
+  };
+
+  useEffect(() => {
+    const getVocabulary = async () => {
+      if (vocabularyName && vocabulary.data === undefined && !vocabulary.loading) {
+        try {
+          setVocabulary({
+            loading: true
+          });
+          const data = await traversal.client.get(getPath());
+          const dataJson = await data.json();
+          setVocabulary({
+            loading: false,
+            data: dataJson
+          });
+        } catch (err) {
+          setVocabulary({
+            loading: false,
+            error: err,
+            data: undefined
+          });
+        }
+      }
+    };
+
+    getVocabulary();
+  }, [vocabularyName, vocabulary, path]);
+  return vocabulary;
+}
+
+const SelectVocabulary = forwardRef(({
+  vocabularyName,
+  className,
+  classWrap,
+  val,
+  dataTest,
+  multiple,
+  onChange,
+  id,
+  placeholder
+}, ref) => {
+  const vocabulary = useVocabulary(vocabularyName);
+
+  const getOptions = () => {
+    if (get$1(vocabulary, 'data.items', null)) {
+      const vocData = vocabulary.data.items.map(item => {
+        return {
+          text: item.title,
+          value: item.token
+        };
+      });
+      return vocData;
+    }
+
+    return [];
+  };
+
+  const getProps = () => {
+    if (multiple) {
+      const 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 jsx("div", {});
+  }
+
+  return jsx(Select, _extends({}, getProps(), {
+    className: className,
+    classWrap: classWrap || 'is-fullwidth',
+    dataTest: dataTest,
+    ref: ref,
+    onChange: onChange,
+    id: id,
+    placeholder: placeholder
+  }));
+});
+SelectVocabulary.displayName = 'SelectVocabulary';
+
 const setURLParams = p => {
   return window.history.pushState(0, '0', '' + '?' + p.toString().replace(/%2F/g, '/'));
 };
@@ -2431,27 +2554,6 @@ function useClickAway(ref, onClickAway, events = defaultEvents) {
   }, [events, ref]);
 }
 
-const formatDate = str => {
-  const d = new Date(str);
-  const minutes = d.getMinutes() < 10 ? `0${d.getMinutes()}` : d.getMinutes();
-  return `${d.getDate()}/${d.getMonth() + 1}/${d.getFullYear()} ${d.getHours()}:${minutes}`;
-};
-const get$1 = (obj, path, defValue) => {
-  var _pathArray$reduce;
-
-  if (!path) return undefined;
-  const pathArray = Array.isArray(path) ? path : path.match(/([^[.\]])+/g);
-  return (_pathArray$reduce = pathArray.reduce((prevObj, key) => prevObj && prevObj[key], obj)) != null ? _pathArray$reduce : defValue;
-};
-function getNewId(id = '') {
-  const suffix = '-copy-';
-  const rgx = new RegExp(`($|${suffix}\\d*)`);
-  return stringToSlug(id).replace(rgx, r => {
-    const num = parseInt(r.replace(suffix, '') || '0');
-    return `${suffix}${num + 1}`;
-  });
-}
-
 function debounce(func, wait) {
   let timeout;
   return function () {
@@ -2733,987 +2835,885 @@ const SearchInput = ({
   });
 };
 
-const InputList = forwardRef(({
-  value,
+function debounce$1(func, wait) {
+  let timeout;
+  return function () {
+    const context = this;
+    const args = arguments;
+
+    const later = function later() {
+      timeout = null;
+      func.apply(context, args);
+    };
+
+    clearTimeout(timeout);
+    timeout = setTimeout(later, wait);
+  };
+}
+
+const initialState$1 = {
+  page: 0,
+  items: undefined,
+  loading: false,
+  items_total: 0
+};
+const SearchInputList = ({
   onChange,
-  dataTest,
-  id
-}, ref) => {
+  error,
+  errorZoneClassName,
+  traversal: _traversal = null,
+  path: _path = null,
+  qs: _qs = [],
+  queryCondition: _queryCondition = 'id__in',
+  value,
+  btnClass: _btnClass = '',
+  dataTestWrapper: _dataTestWrapper = 'wrapperSearchInputTest',
+  dataTestSearchInput: _dataTestSearchInput = 'searchInputTest',
+  dataTestItem: _dataTestItem = 'searchInputItemTest',
+  renderTextItemOption: _renderTextItemOption = null,
+  typeNameQuery: _typeNameQuery = null,
+  labelProperty: _labelProperty = 'id'
+}) => {
   const intl = useIntl();
-  const [inputValue, setInputValue] = useState('');
+  const [options, setOptions] = useSetState(initialState$1);
+  const [valuesLabel, setValuesLabels] = useState(undefined);
+  const [isOpen, setIsOpen] = useState(false);
+  const [searchTerm, setSearchTerm] = useState('');
+  const inputRef = useRef(null);
+  const wrapperRef = useRef(null);
+  const {
+    PageSize,
+    SearchEngine
+  } = useConfig();
+  const [isLoadingData, setIsLoadingData] = useState(false);
+  const [uid] = useState(generateUID('search_input'));
+  useClickAway(wrapperRef, () => {
+    setIsOpen(false);
+  });
 
-  const addTags = event => {
-    if (event.key === 'Enter' && event.target.value !== '') {
-      onChange([...value, event.target.value]);
-      setInputValue('');
+  const getHeight = () => {
+    if (wrapperRef && wrapperRef.current) {
+      return {
+        maxHeight: `${window.innerHeight - wrapperRef.current.getBoundingClientRect().top - 100}px`
+      };
     }
+
+    return {
+      maxHeight: 'auto'
+    };
   };
 
-  return jsxs("div", {
-    className: "control",
-    children: [(value != null ? value : []).length > 0 && jsx("div", {
-      className: "tags",
-      children: value.map((tag, index) => jsxs("div", {
-        className: "tag is-info is-medium",
-        children: [tag, jsx("button", {
-          className: "delete is-small",
-          type: "button",
-          onClick: () => onChange([...value.filter(tag => value.indexOf(tag) !== index)])
-        })]
-      }, `input_list_${tag}_${index}`))
-    }), 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: event => addTags(event),
-      value: inputValue,
-      ref: ref,
-      dataTest: dataTest,
-      onChange: value => {
-        setInputValue(value);
-      }
-    })]
-  });
-});
-InputList.displayName = 'InputList';
+  const delayedQuery = useCallback(debounce$1(value => handleSearch(0, false, value), 500), []);
 
-function Dropdown({
-  children,
-  disabled,
-  id,
-  isRight,
-  onChange,
-  optionDisabledWhen,
-  options
-}) {
-  const ref = useRef(null);
-  const [isActive, setIsActive] = useState(false);
-  const position = isRight ? 'is-right' : '';
-  const status = isActive ? `dropdown ${position} is-active` : `dropdown ${position}`;
-  useClickAway(ref, () => {
-    setIsActive(false);
-  });
-  return jsxs("div", {
-    ref: ref,
-    className: status,
-    children: [jsx("div", {
-      className: "dropdown-trigger",
-      children: jsx("button", {
-        className: "button is-size-7",
-        onClick: () => setIsActive(!isActive),
-        "aria-haspopup": "true",
-        disabled: disabled,
-        "aria-controls": id,
-        children: children
-      })
-    }), jsx("div", {
-      className: "dropdown-menu",
-      id: id,
-      role: "menu",
-      children: jsx("div", {
-        className: "dropdown-content",
-        children: options.map(option => {
-          const disabled = typeof optionDisabledWhen === 'function' ? optionDisabledWhen(option) : false;
-          return jsx("a", {
-            className: disabled ? 'dropdown-item is-active' : 'dropdown-item',
-            "data-test": `dropdownItemTest-${option.value.toLowerCase()}`,
-            onClick: disabled ? undefined : () => onChange(option.value),
-            style: disabled ? {
-              cursor: 'not-allowed',
-              color: 'black',
-              opacity: 0.5,
-              backgroundColor: '#eeeeee'
-            } : {},
-            children: option.text
-          }, option.text);
-        })
-      })
-    })]
-  });
-}
+  const handleSearch = async (page = 0, concat = false, value = '') => {
+    var _data$items_total;
 
-function EditableField({
-  field,
-  value,
-  ns,
-  schema = undefined,
-  modifyContent,
-  required
-}) {
-  const intl = useIntl();
-  const ref = useRef();
-  const [isEdit, setEdit] = useState(false);
-  const [val, setValue] = useState(value);
-  const {
-    patch,
-    loading,
-    Ctx
-  } = useCrudContext();
-  const {
-    fieldHaveDeleteButton
-  } = useConfig();
-  const EditComponent = Ctx.registry.get('components', 'EditComponent');
-  const RenderFieldComponent = Ctx.registry.get('components', 'RenderFieldComponent');
-  useEffect(() => {
-    if (isEdit && ref.current) {
-      ref.current.focus();
+    setOptions({
+      loading: true
+    });
+    let searchTermQs = '';
+    let searchTermParsed = [];
+
+    if (value !== '') {
+      searchTermParsed = parser(`${_queryCondition}=${value}`);
     }
-  });
-  const canModified = modifyContent && !get$1(schema, 'readonly', false);
 
-  const saveField = async ev => {
-    if (ev) ev.preventDefault();
+    const {
+      get
+    } = _traversal.registry;
+    const fnName = get('searchEngineQueryParamsFunction', SearchEngine);
 
-    if (!field) {
-      Ctx.flash(intl.formatMessage(genericMessages.error_provide_key_name), 'danger');
-      return;
+    const qsParsed = _traversal.client[fnName]({
+      path: _traversal.path,
+      start: page * PageSize,
+      pageSize: PageSize,
+      withDepth: false
+    });
+
+    const sortParsed = parser(`_sort_des=${_labelProperty}`);
+    let typeNameParsed = [];
+
+    if (_typeNameQuery) {
+      typeNameParsed = parser(`type_name__in=${_typeNameQuery}`);
     }
 
-    if (!val && required) {
-      Ctx.flash(intl.formatMessage(genericMessages.mandatory_field, {
-        field
-      }), 'danger');
-      return;
+    if (_qs.length > 0 || searchTermParsed.length > 0 || qsParsed.length > 0 || typeNameParsed.length > 0) {
+      searchTermQs = buildQs([..._qs, ...searchTermParsed, ...qsParsed, ...typeNameParsed, ...sortParsed]);
     }
 
-    if ((schema == null ? void 0 : schema.widget) === 'file') {
-      const value = val;
+    const data = await _traversal.client.search(_path ? _path : _traversal.client.getContainerFromPath(_traversal.path), searchTermQs, false, false);
+    const newItems = options.items && 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
+    });
+  };
 
-      if (value) {
-        value['filename'] = unescape(encodeURIComponent(value['filename']));
-      }
+  const inicializeLabels = async () => {
+    if (_labelProperty !== 'id' && value.length > 0) {
+      setIsLoadingData(true);
+      let searchTermQs = '';
+      const searchTermParsed = ['__or', `id=${value.join('%26id=')}`];
+      const {
+        get: getSearch
+      } = _traversal.registry;
+      const fnName = getSearch('searchEngineQueryParamsFunction', SearchEngine);
 
-      const endpoint = `${Ctx.path}@upload/${field}`;
-      const req = await Ctx.client.upload(endpoint, value);
+      const qsParsed = _traversal.client[fnName]({
+        path: _traversal.path,
+        start: 0,
+        pageSize: 100,
+        withDepth: false
+      });
 
-      if (req.status !== 200) {
-        Ctx.flash(intl.formatMessage(genericFileMessages.error_upload_file), 'danger');
-      } else {
-        Ctx.flash(intl.formatMessage(genericFileMessages.file_uploaded), 'success');
+      let typeNameParsed = [];
+
+      if (_typeNameQuery) {
+        typeNameParsed = parser(`type_name__in=${_typeNameQuery}`);
       }
-    } else {
-      const data = ns ? {
-        [ns]: {
-          [field]: val
-        }
-      } : {
-        [field]: val
-      };
-      const dataPatch = await patch(data);
 
-      if (dataPatch.isError) {
-        Ctx.flash(intl.formatMessage(genericMessages.error_in_field, {
-          field
-        }), 'danger');
-      } else {
-        Ctx.flash(intl.formatMessage(genericMessages.field_updated, {
-          field
-        }), 'success');
+      if (_qs.length > 0 || searchTermParsed.length > 0 || qsParsed.length > 0 || typeNameParsed.length > 0) {
+        searchTermQs = buildQs([..._qs, searchTermParsed, ...qsParsed, ...typeNameParsed]);
       }
-    }
 
-    setEdit(false);
-    Ctx.refresh();
+      const data = await _traversal.client.search(_path ? _path : _traversal.client.getContainerFromPath(_traversal.path), searchTermQs, false, false, 0, 100);
+      const newValuesLabel = data.items.reduce((result, item) => {
+        result[item.id] = get$1(item, _labelProperty, item.id);
+        return result;
+      }, {});
+      setValuesLabels(newValuesLabel);
+      setIsLoadingData(false);
+    }
   };
 
-  const deleteField = async ev => {
-    if (ev) ev.preventDefault();
-
-    if ((schema == null ? void 0 : schema.widget) === 'file') {
-      if (!field || !val && required) {
-        Ctx.flash(intl.formatMessage(genericMessages.can_not_delete_field, {
-          field
-        }), 'danger');
-        return;
-      }
-
-      const data = ns ? {
-        [ns]: {
-          [field]: null
-        }
-      } : {
-        [field]: null
-      };
-      const dataPatch = await patch(data);
+  const renderTextItemOptionFn = item => {
+    if (_renderTextItemOption) {
+      return _renderTextItemOption(item);
+    }
 
-      if (dataPatch.isError) {
-        Ctx.flash(intl.formatMessage(genericMessages.error_in_field, {
-          field
-        }), 'danger');
-      } else {
-        Ctx.flash(intl.formatMessage(genericMessages.field_deleted, {
-          field
-        }), 'success');
-      }
+    return get$1(item, _labelProperty, item.title) || item['@name'];
+  };
 
-      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([]);
+  useEffect(() => {
+    if (!options.loading && !options.items && value.length > 0) {
+      inicializeLabels();
+    } else if (value.length === 0) {
+      setValuesLabels({});
     }
-  };
+  }, [_path, options.loading, options.items]);
+
+  if (isLoadingData || valuesLabel === undefined) {
+    return jsx("div", {
+      className: "spinner"
+    });
+  }
 
   return jsxs(Fragment, {
-    children: [!isEdit && jsxs("div", {
-      className: canModified ? 'editable' : '',
-      onClick: () => {
-        setEdit(!!canModified);
-      },
-      "data-test": `editableFieldTest-${field}`,
-      children: [jsx(RenderFieldComponent, {
-        schema: schema,
-        field: field,
-        val: val,
-        modifyContent: modifyContent
-      }), canModified && jsx(Icon, {
-        icon: "fas fa-edit"
-      })]
-    }), isEdit && jsxs("div", {
-      className: "field",
-      "data-test": `editableFieldTest-${field}`,
-      children: [jsx("div", {
-        className: "control",
-        children: jsx(EditComponent, {
-          ref: ref,
-          schema: schema,
-          val: val,
-          setValue: setValue,
-          dataTest: `editableFieldEditTest`
-        })
-      }), jsxs("div", {
-        className: "field is-grouped",
-        children: [jsx("div", {
-          className: "control",
-          children: jsx(Button, {
-            className: "is-small is-primary",
-            loading: loading,
-            onClick: saveField,
-            dataTest: "editableFieldBtnSaveTest",
-            children: intl.formatMessage(genericMessages.save)
-          })
-        }), jsx("div", {
-          className: "control",
-          children: jsx(Button, {
-            className: "is-small",
-            onClick: () => setEdit(false),
-            dataTest: "editableFieldBtnCancelTest",
-            children: intl.formatMessage(genericMessages.cancel)
-          })
-        }), !required && fieldHaveDeleteButton(schema) && jsx("div", {
-          className: "control",
-          children: jsx(Button, {
-            className: "is-small is-danger",
-            onClick: deleteField,
-            dataTest: "editableFieldBtnDeleteTest",
-            children: intl.formatMessage(genericMessages.delete)
-          })
-        })]
-      })]
-    })]
-  });
-}
-
-const DownloadField = ({
-  value
-}) => {
-  const intl = useIntl();
-  const Ctx = useTraversal();
-  const {
-    data,
-    field
-  } = value;
-
-  const getField = async downloadFile => {
-    const endpoint = `${Ctx.path}@download/${field}`;
-    const res = await Ctx.client.download(endpoint);
-    const text = await res.blob();
-    const blob = new Blob([text], {
-      type: data.content_type
-    });
-    const url = window.URL.createObjectURL(blob);
-    const link = document.createElement('a');
-    link.href = url;
-
-    if (downloadFile) {
-      link.setAttribute('download', `${data.filename}`);
-    } else {
-      link.setAttribute('target', `_blank`);
-    }
-
-    document.body.appendChild(link);
-    link.click();
-    setTimeout(function () {
-      var _link$parentNode;
-
-      window.URL.revokeObjectURL(url);
-      (_link$parentNode = link.parentNode) == null ? void 0 : _link$parentNode.removeChild(link);
-    }, 100);
-  };
-
-  return jsxs("div", {
-    className: "field",
     children: [jsx("div", {
-      className: "label",
-      children: data.filename
+      className: "tags mb-2",
+      children: value.map((tag, index) => jsxs("div", {
+        className: "tag is-info is-medium",
+        children: [get$1(valuesLabel, tag, tag), jsx("button", {
+          className: "delete is-small",
+          onClick: ev => {
+            ev.stopPropagation();
+            ev.preventDefault();
+            onChange([...value.filter(tag => value.indexOf(tag) !== index)]);
+          }
+        })]
+      }, `input_list_${tag}_${index}`))
     }), jsxs("div", {
-      className: "columns",
+      "data-test": _dataTestWrapper,
+      ref: wrapperRef,
+      className: `dropdown mb-2 ${isOpen ? 'is-active' : ''}`,
+      onBlur: ev => {
+        if (!ev.currentTarget.contains(ev.relatedTarget)) {
+          if (searchTerm !== '') {
+            setSearchTerm('');
+            setOptions(initialState$1);
+          }
+
+          setIsOpen(false);
+        }
+      },
       children: [jsx("div", {
-        className: "column",
-        children: jsx("button", {
-          className: "button is-small is-primary level-left",
-          onClick: async event => {
-            event.preventDefault();
-            event.stopPropagation();
-            getField(false);
+        className: "dropdown-trigger",
+        children: jsxs("button", {
+          className: `button ${_btnClass}`,
+          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: [jsx("span", {
+            children: intl.formatMessage(genericMessages.choose)
+          }), jsx("span", {
+            className: "icon",
+            children: jsx("i", {
+              className: "fas fa-angle-down",
+              "aria-hidden": "true"
+            })
+          })]
         })
       }), jsx("div", {
-        className: "column",
-        children: jsx("button", {
-          className: "button is-small is-primary level-right",
-          onClick: async event => {
-            event.preventDefault();
-            event.stopPropagation();
-            getField(true);
-          },
-          children: intl.formatMessage(genericMessages.download)
+        className: "dropdown-menu",
+        id: "dropdown-menu",
+        role: "menu",
+        style: getHeight(),
+        children: jsxs("div", {
+          className: "dropdown-content",
+          children: [jsx("div", {
+            className: "dropdown-item",
+            children: jsx("input", {
+              ref: inputRef,
+              "data-test": _dataTestSearchInput,
+              className: "input",
+              type: "text",
+              placeholder: intl.formatMessage(genericMessages.search),
+              value: searchTerm,
+              onChange: ev => {
+                delayedQuery(ev.target.value);
+                setSearchTerm(ev.target.value);
+              }
+            })
+          }), jsx("hr", {
+            className: "dropdown-divider"
+          }), options.loading && jsx(Loading, {}), options.items && options.items.map(item => {
+            return jsx("div", {
+              className: `dropdown-item editable ${value.includes(item.id) ? 'is-active' : ''}`,
+              "data-test": `${_dataTestItem}-${item.id}`,
+              onMouseDown: ev => {
+                ev.stopPropagation();
+                ev.preventDefault();
+
+                if (onChange && !value.includes(item.id)) {
+                  setValuesLabels(_extends({}, valuesLabel, {
+                    [item.id]: get$1(item, _labelProperty, item.id)
+                  }));
+                  onChange([...value, item.id]);
+                }
+              },
+              children: renderTextItemOptionFn(item)
+            }, item.path);
+          }), options.items && options.items.length === 0 && jsx("div", {
+            className: "dropdown-item",
+            children: intl.formatMessage(genericMessages.no_results)
+          }), options.items && options.items_total > options.items.length && jsxs(Fragment, {
+            children: [jsx("hr", {
+              className: "dropdown-divider"
+            }), jsx("div", {
+              className: "dropdown-item editable",
+              onMouseDown: ev => {
+                ev.stopPropagation();
+                ev.preventDefault();
+                handleSearch(options.page + 1, true);
+              },
+              children: intl.formatMessage(genericMessages.load_more)
+            })]
+          })]
         })
       })]
+    }), error && jsx(ErrorZone, {
+      className: errorZoneClassName,
+      id: uid,
+      children: error ? error : ''
     })]
   });
 };
 
-function useVocabulary(vocabularyName, path = null) {
-  const traversal = useTraversal();
-  const [vocabulary, setVocabulary] = useSetState({
-    data: undefined,
-    loading: false,
-    error: undefined
-  });
+const InputList = forwardRef(({
+  value,
+  onChange,
+  dataTest,
+  id
+}, ref) => {
+  const intl = useIntl();
+  const [inputValue, setInputValue] = useState('');
 
-  const getPath = () => {
-    if (path) return path;
-    return `${traversal.path}@vocabularies/${vocabularyName}`;
+  const addTags = event => {
+    if (event.key === 'Enter' && event.target.value !== '') {
+      onChange([...value, event.target.value]);
+      setInputValue('');
+    }
   };
 
-  useEffect(() => {
-    const getVocabulary = async () => {
-      if (vocabularyName && vocabulary.data === undefined && !vocabulary.loading) {
-        try {
-          setVocabulary({
-            loading: true
-          });
-          const data = await traversal.client.get(getPath());
-          const dataJson = await data.json();
-          setVocabulary({
-            loading: false,
-            data: dataJson
-          });
-        } catch (err) {
-          setVocabulary({
-            loading: false,
-            error: err,
-            data: undefined
-          });
-        }
+  return jsxs("div", {
+    className: "control",
+    children: [(value != null ? value : []).length > 0 && jsx("div", {
+      className: "tags",
+      children: value.map((tag, index) => jsxs("div", {
+        className: "tag is-info is-medium",
+        children: [tag, jsx("button", {
+          className: "delete is-small",
+          type: "button",
+          onClick: () => onChange([...value.filter(tag => value.indexOf(tag) !== index)])
+        })]
+      }, `input_list_${tag}_${index}`))
+    }), 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: event => addTags(event),
+      value: inputValue,
+      ref: ref,
+      dataTest: dataTest,
+      onChange: value => {
+        setInputValue(value);
       }
-    };
-
-    getVocabulary();
-  }, [vocabularyName, vocabulary, path]);
-  return vocabulary;
-}
+    })]
+  });
+});
+InputList.displayName = 'InputList';
 
-const plain = ['string', 'number', 'boolean'];
-function RenderField({
-  value,
-  Widget,
-  schema
+function Dropdown({
+  children,
+  disabled,
+  id,
+  isRight,
+  onChange,
+  optionDisabledWhen,
+  options
 }) {
-  if (value === null || value === undefined) return '';
-
-  if (Widget) {
-    return jsx(Widget, {
-      value: value,
-      schema: schema
-    });
-  }
-
-  const type = typeof value;
-
-  if (plain.includes(type)) {
-    return value;
-  }
-
-  if (type === 'object') {
-    if (Array.isArray(value)) {
-      return value.map(item => jsx("div", {
-        children: jsx(RenderField, {
-          value: item
+  const ref = useRef(null);
+  const [isActive, setIsActive] = useState(false);
+  const position = isRight ? 'is-right' : '';
+  const status = isActive ? `dropdown ${position} is-active` : `dropdown ${position}`;
+  useClickAway(ref, () => {
+    setIsActive(false);
+  });
+  return jsxs("div", {
+    ref: ref,
+    className: status,
+    children: [jsx("div", {
+      className: "dropdown-trigger",
+      children: jsx("button", {
+        className: "button is-size-7",
+        onClick: () => setIsActive(!isActive),
+        "aria-haspopup": "true",
+        disabled: disabled,
+        "aria-controls": id,
+        children: children
+      })
+    }), jsx("div", {
+      className: "dropdown-menu",
+      id: id,
+      role: "menu",
+      children: jsx("div", {
+        className: "dropdown-content",
+        children: options.map(option => {
+          const disabled = typeof optionDisabledWhen === 'function' ? optionDisabledWhen(option) : false;
+          return jsx("a", {
+            className: disabled ? 'dropdown-item is-active' : 'dropdown-item',
+            "data-test": `dropdownItemTest-${option.value.toLowerCase()}`,
+            onClick: disabled ? undefined : () => onChange(option.value),
+            style: disabled ? {
+              cursor: 'not-allowed',
+              color: 'black',
+              opacity: 0.5,
+              backgroundColor: '#eeeeee'
+            } : {},
+            children: option.text
+          }, option.text);
         })
-      }, item));
-    }
-
-    return Object.keys(value).map(key => jsx(FieldValue, {
-      field: get$1(schema, `properties.${key}.title`, key),
-      schema: get$1(schema, `properties.${key}`, {}),
-      value: value[key]
-    }, key));
-  }
-
-  return jsxs("p", {
-    children: ["No render for ", JSON.stringify(value)]
+      })
+    })]
   });
 }
 
-const FieldValue = ({
+function EditableField({
   field,
   value,
-  schema
-}) => jsxs("div", {
-  className: "field",
-  children: [jsx("div", {
-    className: "label",
-    children: field
-  }), jsx("div", {
-    className: "value",
-    children: jsx(RenderFieldComponent, {
-      val: value,
-      schema: schema,
-      field: field
-    })
-  })]
-});
-
-const DEFAULT_VALUE_NO_EDITABLE_FIELD = ' -- ';
-
-const getDefaultValueEditableField = intl => {
-  return intl.formatMessage({
-    id: "default_value_editable_field",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Click to edit"
-    }]
-  });
-};
-
-const SearchRenderField = ({
-  schema,
-  value,
-  modifyContent
-}) => {
+  ns,
+  schema = undefined,
+  modifyContent,
+  required
+}) {
   const intl = useIntl();
-  const [valuesLabels, setValuesLabels] = useState([]);
-  const [isLoadingData, setIsLoadingData] = useState(false);
-  const traversal = useTraversal();
+  const ref = useRef();
+  const [isEdit, setEdit] = useState(false);
+  const [val, setValue] = useState(value);
   const {
-    SearchEngine
+    patch,
+    loading,
+    Ctx
+  } = useCrudContext();
+  const {
+    fieldHaveDeleteButton
   } = useConfig();
-  const DEFAULT_VALUE_EDITABLE_FIELD = getDefaultValueEditableField(intl);
+  const EditComponent = Ctx.registry.get('components', 'EditComponent');
+  const RenderFieldComponent = Ctx.registry.get('components', 'RenderFieldComponent');
   useEffect(() => {
-    const fetchData = async valuesToSearch => {
-      setIsLoadingData(true);
-      let searchTermQs = '';
-      const searchTermParsed = ['__or', `id=${valuesToSearch.join('%26id=')}`];
-      const {
-        get: getSearch
-      } = traversal.registry;
-      const fnName = getSearch('searchEngineQueryParamsFunction', SearchEngine);
-      const qsParsed = traversal.client[fnName]({
-        path: traversal.path,
-        start: 0,
-        pageSize: 100,
-        withDepth: false
-      });
-
-      if (searchTermParsed.length > 0 || qsParsed.length > 0) {
-        searchTermQs = buildQs([searchTermParsed, ...qsParsed]);
-      }
-
-      const data = await traversal.client.search(traversal.client.getContainerFromPath(traversal.path), searchTermQs, false, false, 0, 100);
-      const newValuesLabel = data.items.map(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);
-    };
-
-    let 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]);
+  });
+  const canModified = modifyContent && !get$1(schema, 'readonly', false);
 
-  const getRenderValue = () => {
-    if (value === undefined) {
-      if (modifyContent) {
-        return DEFAULT_VALUE_EDITABLE_FIELD;
-      }
+  const saveField = async ev => {
+    if (ev) ev.preventDefault();
 
-      return DEFAULT_VALUE_NO_EDITABLE_FIELD;
+    if (!field) {
+      Ctx.flash(intl.formatMessage(genericMessages.error_provide_key_name), 'danger');
+      return;
     }
 
-    if (isLoadingData) {
-      return 'Loading...';
+    if (!val && required) {
+      Ctx.flash(intl.formatMessage(genericMessages.mandatory_field, {
+        field
+      }), 'danger');
+      return;
     }
 
-    return valuesLabels;
-  };
-
-  return jsx(RenderField, {
-    value: getRenderValue()
-  });
-};
-const VocabularyRenderField = ({
-  schema,
-  value,
-  modifyContent
-}) => {
-  var _schema$items;
-
-  const intl = useIntl();
-  const DEFAULT_VALUE_EDITABLE_FIELD = getDefaultValueEditableField(intl);
-  const vocabularyName = (schema == null ? void 0 : (_schema$items = schema.items) == null ? void 0 : _schema$items.vocabularyName) || (schema == null ? void 0 : schema.vocabularyName);
-  const vocabulary = useVocabulary(vocabularyName);
+    if ((schema == null ? void 0 : schema.widget) === 'file') {
+      const value = val;
 
-  const getRenderProps = () => {
-    const renderProps = {
-      value: value != null ? value : modifyContent ? DEFAULT_VALUE_EDITABLE_FIELD : DEFAULT_VALUE_NO_EDITABLE_FIELD
-    };
+      if (value) {
+        value['filename'] = unescape(encodeURIComponent(value['filename']));
+      }
 
-    if (schema != null && schema.vocabularyName) {
-      var _vocabularyValue$titl;
+      const endpoint = `${Ctx.path}@upload/${field}`;
+      const req = await Ctx.client.upload(endpoint, value);
 
-      const vocabularyValue = get$1(vocabulary, 'data.items', []).find(item => item.token === value);
-      renderProps['value'] = (_vocabularyValue$titl = vocabularyValue == null ? void 0 : vocabularyValue.title) != null ? _vocabularyValue$titl : '';
+      if (req.status !== 200) {
+        Ctx.flash(intl.formatMessage(genericFileMessages.error_upload_file), 'danger');
+      } else {
+        Ctx.flash(intl.formatMessage(genericFileMessages.file_uploaded), 'success');
+      }
     } else {
-      var _renderProps$value;
-
-      renderProps['value'] = ((_renderProps$value = renderProps['value']) != null ? _renderProps$value : []).map(value => {
-        var _get$find$title, _get$find;
-
-        return (_get$find$title = (_get$find = get$1(vocabulary, 'data.items', []).find(item => item.token === value)) == null ? void 0 : _get$find.title) != null ? _get$find$title : '';
-      });
-    }
-
-    return renderProps;
-  };
-
-  return jsx(RenderField, _extends({}, getRenderProps()));
-};
-function RenderFieldComponent({
-  schema,
-  field,
-  val,
-  modifyContent
-}) {
-  const intl = useIntl();
-  const DEFAULT_VALUE_EDITABLE_FIELD = getDefaultValueEditableField(intl);
-
-  const getRenderProps = () => {
-    var _schema$items2;
-
-    const renderProps = {
-      value: val != null ? val : modifyContent ? DEFAULT_VALUE_EDITABLE_FIELD : DEFAULT_VALUE_NO_EDITABLE_FIELD,
-      schema: schema
-    };
-
-    if (val && (schema == null ? void 0 : schema.widget) === 'file') {
-      renderProps['value'] = {
-        data: val,
-        field: field
+      const data = ns ? {
+        [ns]: {
+          [field]: val
+        }
+      } : {
+        [field]: val
       };
-      renderProps['Widget'] = DownloadField;
-    } else if ((schema == null ? void 0 : schema.type) === 'boolean') {
-      var _val$toString;
+      const dataPatch = await patch(data);
 
-      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 (dataPatch.isError) {
+        Ctx.flash(intl.formatMessage(genericMessages.error_in_field, {
+          field
+        }), 'danger');
+      } else {
+        Ctx.flash(intl.formatMessage(genericMessages.field_updated, {
+          field
+        }), 'success');
+      }
     }
 
-    return renderProps;
+    setEdit(false);
+    Ctx.refresh();
   };
 
-  return jsx(RenderField, _extends({}, getRenderProps()));
-}
+  const deleteField = async ev => {
+    if (ev) ev.preventDefault();
 
-const SelectVocabulary = forwardRef(({
-  vocabularyName,
-  className,
-  classWrap,
-  val,
-  dataTest,
-  multiple,
-  onChange,
-  id,
-  placeholder
-}, ref) => {
-  const vocabulary = useVocabulary(vocabularyName);
+    if ((schema == null ? void 0 : schema.widget) === 'file') {
+      if (!field || !val && required) {
+        Ctx.flash(intl.formatMessage(genericMessages.can_not_delete_field, {
+          field
+        }), 'danger');
+        return;
+      }
 
-  const getOptions = () => {
-    if (get$1(vocabulary, 'data.items', null)) {
-      const vocData = vocabulary.data.items.map(item => {
-        return {
-          text: item.title,
-          value: item.token
-        };
-      });
-      return vocData;
-    }
+      const data = ns ? {
+        [ns]: {
+          [field]: null
+        }
+      } : {
+        [field]: null
+      };
+      const dataPatch = await patch(data);
 
-    return [];
-  };
+      if (dataPatch.isError) {
+        Ctx.flash(intl.formatMessage(genericMessages.error_in_field, {
+          field
+        }), 'danger');
+      } else {
+        Ctx.flash(intl.formatMessage(genericMessages.field_deleted, {
+          field
+        }), 'success');
+      }
 
-  const getProps = () => {
-    if (multiple) {
-      const currentValue = val || [];
-      return {
-        multiple: true,
-        size: 5,
-        value: currentValue,
-        options: getOptions()
-      };
+      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([]);
     }
-
-    return {
-      value: val != null ? val : '',
-      appendDefault: true,
-      options: getOptions()
-    };
   };
 
-  if (vocabulary.data === undefined || vocabulary.loading) {
-    return jsx("div", {});
-  }
-
-  return jsx(Select, _extends({}, getProps(), {
-    className: className,
-    classWrap: classWrap || 'is-fullwidth',
-    dataTest: dataTest,
-    ref: ref,
-    onChange: onChange,
-    id: id,
-    placeholder: placeholder
-  }));
-});
-SelectVocabulary.displayName = 'SelectVocabulary';
-
-function debounce$1(func, wait) {
-  let timeout;
-  return function () {
-    const context = this;
-    const args = arguments;
-
-    const later = function later() {
-      timeout = null;
-      func.apply(context, args);
-    };
-
-    clearTimeout(timeout);
-    timeout = setTimeout(later, wait);
-  };
+  return jsxs(Fragment, {
+    children: [!isEdit && jsxs("div", {
+      className: canModified ? 'editable' : '',
+      onClick: () => {
+        setEdit(!!canModified);
+      },
+      "data-test": `editableFieldTest-${field}`,
+      children: [jsx(RenderFieldComponent, {
+        schema: schema,
+        field: field,
+        val: val,
+        modifyContent: modifyContent
+      }), canModified && jsx(Icon, {
+        icon: "fas fa-edit"
+      })]
+    }), isEdit && jsxs("div", {
+      className: "field",
+      "data-test": `editableFieldTest-${field}`,
+      children: [jsx("div", {
+        className: "control",
+        children: jsx(EditComponent, {
+          ref: ref,
+          schema: schema,
+          val: val,
+          setValue: setValue,
+          dataTest: `editableFieldEditTest`
+        })
+      }), jsxs("div", {
+        className: "field is-grouped",
+        children: [jsx("div", {
+          className: "control",
+          children: jsx(Button, {
+            className: "is-small is-primary",
+            loading: loading,
+            onClick: saveField,
+            dataTest: "editableFieldBtnSaveTest",
+            children: intl.formatMessage(genericMessages.save)
+          })
+        }), jsx("div", {
+          className: "control",
+          children: jsx(Button, {
+            className: "is-small",
+            onClick: () => setEdit(false),
+            dataTest: "editableFieldBtnCancelTest",
+            children: intl.formatMessage(genericMessages.cancel)
+          })
+        }), !required && fieldHaveDeleteButton(schema) && jsx("div", {
+          className: "control",
+          children: jsx(Button, {
+            className: "is-small is-danger",
+            onClick: deleteField,
+            dataTest: "editableFieldBtnDeleteTest",
+            children: intl.formatMessage(genericMessages.delete)
+          })
+        })]
+      })]
+    })]
+  });
 }
 
-const initialState$1 = {
-  page: 0,
-  items: undefined,
-  loading: false,
-  items_total: 0
-};
-const SearchInputList = ({
-  onChange,
-  error,
-  errorZoneClassName,
-  traversal: _traversal = null,
-  path: _path = null,
-  qs: _qs = [],
-  queryCondition: _queryCondition = 'id__in',
-  value,
-  btnClass: _btnClass = '',
-  dataTestWrapper: _dataTestWrapper = 'wrapperSearchInputTest',
-  dataTestSearchInput: _dataTestSearchInput = 'searchInputTest',
-  dataTestItem: _dataTestItem = 'searchInputItemTest',
-  renderTextItemOption: _renderTextItemOption = null,
-  typeNameQuery: _typeNameQuery = null,
-  labelProperty: _labelProperty = 'id'
+const DownloadField = ({
+  value
 }) => {
   const intl = useIntl();
-  const [options, setOptions] = useSetState(initialState$1);
-  const [valuesLabel, setValuesLabels] = useState(undefined);
-  const [isOpen, setIsOpen] = useState(false);
-  const [searchTerm, setSearchTerm] = useState('');
-  const inputRef = useRef(null);
-  const wrapperRef = useRef(null);
+  const Ctx = useTraversal();
   const {
-    PageSize,
-    SearchEngine
-  } = useConfig();
-  const [isLoadingData, setIsLoadingData] = useState(false);
-  const [uid] = useState(generateUID('search_input'));
-  useClickAway(wrapperRef, () => {
-    setIsOpen(false);
-  });
+    data,
+    field
+  } = value;
 
-  const getHeight = () => {
-    if (wrapperRef && wrapperRef.current) {
-      return {
-        maxHeight: `${window.innerHeight - wrapperRef.current.getBoundingClientRect().top - 100}px`
-      };
+  const getField = async downloadFile => {
+    const endpoint = `${Ctx.path}@download/${field}`;
+    const res = await Ctx.client.download(endpoint);
+    const text = await res.blob();
+    const blob = new Blob([text], {
+      type: data.content_type
+    });
+    const url = window.URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = url;
+
+    if (downloadFile) {
+      link.setAttribute('download', `${data.filename}`);
+    } else {
+      link.setAttribute('target', `_blank`);
     }
 
-    return {
-      maxHeight: 'auto'
-    };
+    document.body.appendChild(link);
+    link.click();
+    setTimeout(function () {
+      var _link$parentNode;
+
+      window.URL.revokeObjectURL(url);
+      (_link$parentNode = link.parentNode) == null ? void 0 : _link$parentNode.removeChild(link);
+    }, 100);
   };
 
-  const delayedQuery = useCallback(debounce$1(value => handleSearch(0, false, value), 500), []);
+  return jsxs("div", {
+    className: "field",
+    children: [jsx("div", {
+      className: "label",
+      children: data.filename
+    }), jsxs("div", {
+      className: "columns",
+      children: [jsx("div", {
+        className: "column",
+        children: jsx("button", {
+          className: "button is-small is-primary level-left",
+          onClick: async event => {
+            event.preventDefault();
+            event.stopPropagation();
+            getField(false);
+          },
+          children: intl.formatMessage(genericMessages.open)
+        })
+      }), jsx("div", {
+        className: "column",
+        children: jsx("button", {
+          className: "button is-small is-primary level-right",
+          onClick: async event => {
+            event.preventDefault();
+            event.stopPropagation();
+            getField(true);
+          },
+          children: intl.formatMessage(genericMessages.download)
+        })
+      })]
+    })]
+  });
+};
 
-  const handleSearch = async (page = 0, concat = false, value = '') => {
-    var _data$items_total;
+const plain = ['string', 'number', 'boolean'];
+function RenderField({
+  value,
+  Widget,
+  schema
+}) {
+  if (value === null || value === undefined) return '';
 
-    setOptions({
-      loading: true
+  if (Widget) {
+    return jsx(Widget, {
+      value: value,
+      schema: schema
     });
-    let searchTermQs = '';
-    let searchTermParsed = [];
+  }
 
-    if (value !== '') {
-      searchTermParsed = parser(`${_queryCondition}=${value}`);
-    }
+  const type = typeof value;
 
-    const {
-      get
-    } = _traversal.registry;
-    const fnName = get('searchEngineQueryParamsFunction', SearchEngine);
+  if (plain.includes(type)) {
+    return value;
+  }
 
-    const qsParsed = _traversal.client[fnName]({
-      path: _traversal.path,
-      start: page * PageSize,
-      pageSize: PageSize,
-      withDepth: false
-    });
+  if (type === 'object') {
+    if (Array.isArray(value)) {
+      return value.map(item => jsx("div", {
+        children: jsx(RenderField, {
+          value: item
+        })
+      }, item));
+    }
 
-    const sortParsed = parser(`_sort_des=${_labelProperty}`);
-    let typeNameParsed = [];
+    return Object.keys(value).map(key => jsx(FieldValue, {
+      field: get$1(schema, `properties.${key}.title`, key),
+      schema: get$1(schema, `properties.${key}`, {}),
+      value: value[key]
+    }, key));
+  }
 
-    if (_typeNameQuery) {
-      typeNameParsed = parser(`type_name__in=${_typeNameQuery}`);
-    }
+  return jsxs("p", {
+    children: ["No render for ", JSON.stringify(value)]
+  });
+}
 
-    if (_qs.length > 0 || searchTermParsed.length > 0 || qsParsed.length > 0 || typeNameParsed.length > 0) {
-      searchTermQs = buildQs([..._qs, ...searchTermParsed, ...qsParsed, ...typeNameParsed, ...sortParsed]);
-    }
+const FieldValue = ({
+  field,
+  value,
+  schema
+}) => jsxs("div", {
+  className: "field",
+  children: [jsx("div", {
+    className: "label",
+    children: field
+  }), jsx("div", {
+    className: "value",
+    children: jsx(RenderFieldComponent, {
+      val: value,
+      schema: schema,
+      field: field
+    })
+  })]
+});
 
-    const data = await _traversal.client.search(_path ? _path : _traversal.client.getContainerFromPath(_traversal.path), searchTermQs, false, false);
-    const newItems = options.items && 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
-    });
-  };
+const DEFAULT_VALUE_NO_EDITABLE_FIELD = ' -- ';
 
-  const inicializeLabels = async () => {
-    if (_labelProperty !== 'id' && value.length > 0) {
+const getDefaultValueEditableField = intl => {
+  return intl.formatMessage({
+    id: "default_value_editable_field",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Click to edit"
+    }]
+  });
+};
+
+const SearchRenderField = ({
+  schema,
+  value,
+  modifyContent
+}) => {
+  const intl = useIntl();
+  const [valuesLabels, setValuesLabels] = useState([]);
+  const [isLoadingData, setIsLoadingData] = useState(false);
+  const traversal = useTraversal();
+  const {
+    SearchEngine
+  } = useConfig();
+  const DEFAULT_VALUE_EDITABLE_FIELD = getDefaultValueEditableField(intl);
+  useEffect(() => {
+    const fetchData = async valuesToSearch => {
       setIsLoadingData(true);
       let searchTermQs = '';
-      const searchTermParsed = ['__or', `id=${value.join('%26id=')}`];
+      const searchTermParsed = ['__or', `id=${valuesToSearch.join('%26id=')}`];
       const {
         get: getSearch
-      } = _traversal.registry;
+      } = traversal.registry;
       const fnName = getSearch('searchEngineQueryParamsFunction', SearchEngine);
-
-      const qsParsed = _traversal.client[fnName]({
-        path: _traversal.path,
+      const qsParsed = traversal.client[fnName]({
+        path: traversal.path,
         start: 0,
         pageSize: 100,
         withDepth: false
       });
 
-      let typeNameParsed = [];
-
-      if (_typeNameQuery) {
-        typeNameParsed = parser(`type_name__in=${_typeNameQuery}`);
+      if (searchTermParsed.length > 0 || qsParsed.length > 0) {
+        searchTermQs = buildQs([searchTermParsed, ...qsParsed]);
       }
 
-      if (_qs.length > 0 || searchTermParsed.length > 0 || qsParsed.length > 0 || typeNameParsed.length > 0) {
-        searchTermQs = buildQs([..._qs, searchTermParsed, ...qsParsed, ...typeNameParsed]);
-      }
+      const data = await traversal.client.search(traversal.client.getContainerFromPath(traversal.path), searchTermQs, false, false, 0, 100);
+      const newValuesLabel = data.items.map(item => {
+        var _schema$labelProperty;
 
-      const data = await _traversal.client.search(_path ? _path : _traversal.client.getContainerFromPath(_traversal.path), searchTermQs, false, false, 0, 100);
-      const newValuesLabel = data.items.reduce((result, item) => {
-        result[item.id] = get$1(item, _labelProperty, item.id);
-        return result;
-      }, {});
+        return get$1(item, (_schema$labelProperty = schema == null ? void 0 : schema.labelProperty) != null ? _schema$labelProperty : 'title', item.id);
+      });
       setValuesLabels(newValuesLabel);
       setIsLoadingData(false);
+    };
+
+    let valuesToSearch = value;
+
+    if (typeof valuesToSearch === 'string') {
+      valuesToSearch = [valuesToSearch];
     }
-  };
 
-  const renderTextItemOptionFn = item => {
-    if (_renderTextItemOption) {
-      return _renderTextItemOption(item);
+    if (valuesToSearch !== undefined && valuesToSearch.length > 0) {
+      fetchData(valuesToSearch);
+    } else {
+      setValuesLabels([]);
     }
+  }, [value]);
 
-    return get$1(item, _labelProperty, item.title) || item['@name'];
-  };
+  const getRenderValue = () => {
+    if (value === undefined) {
+      if (modifyContent) {
+        return DEFAULT_VALUE_EDITABLE_FIELD;
+      }
 
-  useEffect(() => {
-    if (!options.loading && !options.items && value.length > 0) {
-      inicializeLabels();
-    } else if (value.length === 0) {
-      setValuesLabels({});
+      return DEFAULT_VALUE_NO_EDITABLE_FIELD;
     }
-  }, [_path, options.loading, options.items]);
 
-  if (isLoadingData || valuesLabel === undefined) {
-    return jsx("div", {
-      className: "spinner"
-    });
-  }
+    if (isLoadingData) {
+      return 'Loading...';
+    }
 
-  return jsxs(Fragment, {
-    children: [jsx("div", {
-      className: "tags mb-2",
-      children: value.map((tag, index) => jsxs("div", {
-        className: "tag is-info is-medium",
-        children: [get$1(valuesLabel, tag, tag), jsx("button", {
-          className: "delete is-small",
-          onClick: ev => {
-            ev.stopPropagation();
-            ev.preventDefault();
-            onChange([...value.filter(tag => value.indexOf(tag) !== index)]);
-          }
-        })]
-      }, `input_list_${tag}_${index}`))
-    }), jsxs("div", {
-      "data-test": _dataTestWrapper,
-      ref: wrapperRef,
-      className: `dropdown mb-2 ${isOpen ? 'is-active' : ''}`,
-      onBlur: ev => {
-        if (!ev.currentTarget.contains(ev.relatedTarget)) {
-          if (searchTerm !== '') {
-            setSearchTerm('');
-            setOptions(initialState$1);
-          }
+    return valuesLabels;
+  };
 
-          setIsOpen(false);
-        }
-      },
-      children: [jsx("div", {
-        className: "dropdown-trigger",
-        children: jsxs("button", {
-          className: `button ${_btnClass}`,
-          onClick: ev => {
-            ev.preventDefault();
-            setIsOpen(!isOpen);
+  return jsx(RenderField, {
+    value: getRenderValue()
+  });
+};
+const VocabularyRenderField = ({
+  schema,
+  value,
+  modifyContent
+}) => {
+  var _schema$items;
 
-            if (!options.loading && !options.items) {
-              handleSearch(options.page);
-            }
-          },
-          "aria-haspopup": "true",
-          "aria-controls": "dropdown-menu",
-          children: [jsx("span", {
-            children: intl.formatMessage(genericMessages.choose)
-          }), jsx("span", {
-            className: "icon",
-            children: jsx("i", {
-              className: "fas fa-angle-down",
-              "aria-hidden": "true"
-            })
-          })]
-        })
-      }), jsx("div", {
-        className: "dropdown-menu",
-        id: "dropdown-menu",
-        role: "menu",
-        style: getHeight(),
-        children: jsxs("div", {
-          className: "dropdown-content",
-          children: [jsx("div", {
-            className: "dropdown-item",
-            children: jsx("input", {
-              ref: inputRef,
-              "data-test": _dataTestSearchInput,
-              className: "input",
-              type: "text",
-              placeholder: intl.formatMessage(genericMessages.search),
-              value: searchTerm,
-              onChange: ev => {
-                delayedQuery(ev.target.value);
-                setSearchTerm(ev.target.value);
-              }
-            })
-          }), jsx("hr", {
-            className: "dropdown-divider"
-          }), options.loading && jsx(Loading, {}), options.items && options.items.map(item => {
-            return jsx("div", {
-              className: `dropdown-item editable ${value.includes(item.id) ? 'is-active' : ''}`,
-              "data-test": `${_dataTestItem}-${item.id}`,
-              onMouseDown: ev => {
-                ev.stopPropagation();
-                ev.preventDefault();
+  const intl = useIntl();
+  const DEFAULT_VALUE_EDITABLE_FIELD = getDefaultValueEditableField(intl);
+  const vocabularyName = (schema == null ? void 0 : (_schema$items = schema.items) == null ? void 0 : _schema$items.vocabularyName) || (schema == null ? void 0 : schema.vocabularyName);
+  const vocabulary = useVocabulary(vocabularyName);
 
-                if (onChange && !value.includes(item.id)) {
-                  setValuesLabels(_extends({}, valuesLabel, {
-                    [item.id]: get$1(item, _labelProperty, item.id)
-                  }));
-                  onChange([...value, item.id]);
-                }
-              },
-              children: renderTextItemOptionFn(item)
-            }, item.path);
-          }), options.items && options.items.length === 0 && jsx("div", {
-            className: "dropdown-item",
-            children: intl.formatMessage(genericMessages.no_results)
-          }), options.items && options.items_total > options.items.length && jsxs(Fragment, {
-            children: [jsx("hr", {
-              className: "dropdown-divider"
-            }), jsx("div", {
-              className: "dropdown-item editable",
-              onMouseDown: ev => {
-                ev.stopPropagation();
-                ev.preventDefault();
-                handleSearch(options.page + 1, true);
-              },
-              children: intl.formatMessage(genericMessages.load_more)
-            })]
-          })]
-        })
-      })]
-    }), error && jsx(ErrorZone, {
-      className: errorZoneClassName,
-      id: uid,
-      children: error ? error : ''
-    })]
-  });
+  const getRenderProps = () => {
+    const renderProps = {
+      value: value != null ? value : modifyContent ? DEFAULT_VALUE_EDITABLE_FIELD : DEFAULT_VALUE_NO_EDITABLE_FIELD
+    };
+
+    if (schema != null && schema.vocabularyName) {
+      var _vocabularyValue$titl;
+
+      const vocabularyValue = get$1(vocabulary, 'data.items', []).find(item => item.token === value);
+      renderProps['value'] = (_vocabularyValue$titl = vocabularyValue == null ? void 0 : vocabularyValue.title) != null ? _vocabularyValue$titl : '';
+    } else {
+      var _renderProps$value;
+
+      renderProps['value'] = ((_renderProps$value = renderProps['value']) != null ? _renderProps$value : []).map(value => {
+        var _get$find$title, _get$find;
+
+        return (_get$find$title = (_get$find = get$1(vocabulary, 'data.items', []).find(item => item.token === value)) == null ? void 0 : _get$find.title) != null ? _get$find$title : '';
+      });
+    }
+
+    return renderProps;
+  };
+
+  return jsx(RenderField, _extends({}, getRenderProps()));
 };
+function RenderFieldComponent({
+  schema,
+  field,
+  val,
+  modifyContent
+}) {
+  const intl = useIntl();
+  const DEFAULT_VALUE_EDITABLE_FIELD = getDefaultValueEditableField(intl);
+
+  const getRenderProps = () => {
+    var _schema$items2;
+
+    const renderProps = {
+      value: val != null ? val : modifyContent ? DEFAULT_VALUE_EDITABLE_FIELD : DEFAULT_VALUE_NO_EDITABLE_FIELD,
+      schema: schema
+    };
+
+    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;
+
+      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;
+    }
+
+    return renderProps;
+  };
+
+  return jsx(RenderField, _extends({}, getRenderProps()));
+}
 
 const EditComponent = forwardRef(({
   schema,
@@ -12157,5 +12157,5 @@ class Auth {
 
 }
 
-export { AddItem, AddPermission, AllItemsCheckbox, ApplicationCtx, Auth, AuthContext, BaseForm, BehaviorNotImplemented, BehaviorsView, Button, Checkbox, ClientContext, ClientProvider, Config, Confirm, ContainerCtx, ContextToolbar, CreateButton, CreateContainer, DatabaseCtx, Delete, DownloadField, EditComponent, EditableField, EmailInput, FileUpload, Flash, FolderCtx, Form, FormBuilder, GroupCtx, GroupToolbar, GroupsCtx, Guillotina, GuillotinaClient, IAttachment, IImageAttachment, IMultiAttachment, IMultiImageAttachment, IMultiImageOrderedAttachment, IWorkflow, Icon, Input, InputList, Item, ItemCheckbox, ItemCtx, ItemModel, ItemTitle, ItemsActionsDropdown, ItemsActionsProvider, Layout, Link, Loading, Login, Modal, NotAllowed, Notification, Pagination, PanelActions, PanelAddons, PanelBehaviors, PanelItems, PanelNotImplemented, PanelPermissions, PanelProperties, PasswordInput, Path, PathTree, PermissionPrinperm, PermissionPrinrole, PermissionRoleperm, Permissions, PropertiesButtonView, PropertiesView, REGEX_EMAIL, REGEX_HEX_COLOR, REGEX_NUMBER, REGEX_URL, RItem, RemoveItems, RenderField, RenderFieldComponent, RequiredFieldsForm, RestClient, SearchInput, SearchLabels, SearchOptionsLabels, SearchRenderField, SearchVocabularyLabels, Select, Sharing, Table, TabsPanel, Tag, TagsWidget, TdLink, Textarea, Traversal, TraversalContext, TraversalProvider, UserCtx, UserForm, UsersCtx, UsersToolbar, VocabularyRenderField, base64ToArrayBuffer, buildQs, classnames, defaultComponent, formatDate, generateUID, genericFileMessages, genericMessages, get$1 as get, getActionsObject, getClient, getNewId, isEmail, isEmpty, isHexColor, isNumber, isURL, lightFileReader, maxLength, messages$4 as messages, minLength, noop, notEmpty, parser, sleep, stringToSlug, toQueryString, useConfig, useCrudContext, useGuillotinaClient, useLocation, useRegistry, useRemoteField, useTraversal, useVocabulary };
+export { AddItem, AddPermission, AllItemsCheckbox, ApplicationCtx, Auth, AuthContext, BaseForm, BehaviorNotImplemented, BehaviorsView, Button, Checkbox, ClientContext, ClientProvider, Config, Confirm, ContainerCtx, ContextToolbar, CreateButton, CreateContainer, DatabaseCtx, Delete, DownloadField, EditComponent, EditableField, EmailInput, FileUpload, Flash, FolderCtx, Form, FormBuilder, GroupCtx, GroupToolbar, GroupsCtx, Guillotina, GuillotinaClient, IAttachment, IImageAttachment, IMultiAttachment, IMultiImageAttachment, IMultiImageOrderedAttachment, IWorkflow, Icon, Input, InputList, Item, ItemCheckbox, ItemCtx, ItemModel, ItemTitle, ItemsActionsDropdown, ItemsActionsProvider, Layout, Link, Loading, Login, Modal, NotAllowed, Notification, Pagination, PanelActions, PanelAddons, PanelBehaviors, PanelItems, PanelNotImplemented, PanelPermissions, PanelProperties, PasswordInput, Path, PathTree, PermissionPrinperm, PermissionPrinrole, PermissionRoleperm, Permissions, PropertiesButtonView, PropertiesView, REGEX_EMAIL, REGEX_HEX_COLOR, REGEX_NUMBER, REGEX_URL, RItem, RemoveItems, RenderField, RenderFieldComponent, RequiredFieldsForm, RestClient, SearchInput, SearchInputList, SearchLabels, SearchOptionsLabels, SearchRenderField, SearchVocabularyLabels, Select, SelectVocabulary, Sharing, Table, TabsPanel, Tag, TagsWidget, TdLink, Textarea, Traversal, TraversalContext, TraversalProvider, UserCtx, UserForm, UsersCtx, UsersToolbar, VocabularyRenderField, base64ToArrayBuffer, buildQs, classnames, defaultComponent, formatDate, generateUID, genericFileMessages, genericMessages, get$1 as get, getActionsObject, getClient, getNewId, isEmail, isEmpty, isHexColor, isNumber, isURL, lightFileReader, maxLength, messages$4 as messages, minLength, noop, notEmpty, parser, sleep, stringToSlug, toQueryString, useConfig, useCrudContext, useGuillotinaClient, useLocation, useRegistry, useRemoteField, useTraversal, useVocabulary };
 //# sourceMappingURL=react-gmi.modern.js.map