@guillotinaweb/react-gmi 0.24.0 → 0.25.0

package/dist/react-gmi.modern.js

@@ -2418,6 +2418,37 @@ const Textarea = React.forwardRef((_ref, ref) => {
   }, error ? error : ''));
 });
 
+const defaultEvents = ['mousedown', 'touchstart'];
+
+const on = (obj, ...args) => obj.addEventListener(...args);
+
+const off = (obj, ...args) => obj.removeEventListener(...args);
+
+function useClickAway(ref, onClickAway, events = defaultEvents) {
+  const savedCallback = useRef(onClickAway);
+  useEffect(() => {
+    savedCallback.current = onClickAway;
+  }, [onClickAway]);
+  useEffect(() => {
+    const handler = event => {
+      const {
+        current: el
+      } = ref;
+      el && !el.contains(event.target) && savedCallback.current(event);
+    };
+
+    for (const eventName of events) {
+      on(document, eventName, handler);
+    }
+
+    return () => {
+      for (const eventName of events) {
+        off(document, eventName, handler);
+      }
+    };
+  }, [events, ref]);
+}
+
 function debounce(func, wait) {
   let timeout;
   return function () {
@@ -2453,7 +2484,9 @@ const SearchInput = ({
   dataTestWrapper: _dataTestWrapper = 'wrapperSearchInputTest',
   dataTestSearchInput: _dataTestSearchInput = 'searchInputTest',
   dataTestItem: _dataTestItem = 'searchInputItemTest',
-  renderTextItemOption: _renderTextItemOption = null
+  renderTextItemOption: _renderTextItemOption = null,
+  typeNameQuery: _typeNameQuery = null,
+  labelProperty: _labelProperty = 'id'
 }) => {
   const intl = useIntl();
   const [options, setOptions] = useSetState(initialState);
@@ -2465,7 +2498,12 @@ const SearchInput = ({
     PageSize,
     SearchEngine
   } = useConfig();
+  const [valueLabel, setValueLabel] = useState(undefined);
+  const [isLoadingData, setIsLoadingData] = useState(false);
   const [uid] = useState(generateUID('search_input'));
+  useClickAway(wrapperRef, () => {
+    setIsOpen(false);
+  });
 
   const getHeight = () => {
     if (wrapperRef && wrapperRef.current) {
@@ -2479,7 +2517,44 @@ const SearchInput = ({
     };
   };
 
-  const delayedQuery = React.useCallback(debounce(value => handleSearch(0, false, value), 500), []);
+  const delayedQuery = useCallback(debounce(value => handleSearch(0, false, value), 500), []);
+
+  const inicializeLabels = async () => {
+    if (_labelProperty !== 'id' && value) {
+      setIsLoadingData(true);
+      let searchTermQs = [];
+      const searchTermParsed = [`id`, value];
+      const {
+        get: getSearch
+      } = _traversal.registry;
+      const fnName = getSearch('searchEngineQueryParamsFunction', SearchEngine);
+
+      const qsParsed = _traversal.client[fnName]({
+        path: _traversal.path,
+        start: 0,
+        pageSize: PageSize,
+        withDepth: false
+      });
+
+      let typeNameParsed = [];
+
+      if (_typeNameQuery) {
+        typeNameParsed = parser(`type_name__in=${_typeNameQuery}`);
+      }
+
+      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(_path ? _path : _traversal.client.getContainerFromPath(_traversal.path), searchTermQs, false, false);
+      const newValuesLabel = data.items.reduce((result, item) => {
+        result[item.id] = get$1(item, _labelProperty, item.id);
+        return result;
+      }, {});
+      setValueLabel(newValuesLabel);
+      setIsLoadingData(false);
+    }
+  };
 
   const handleSearch = async (page = 0, concat = false, value = '') => {
     var _data$items_total;
@@ -2502,14 +2577,22 @@ const SearchInput = ({
     let qsParsed = _traversal.client[fnName]({
       path: _traversal.path,
       start: page * PageSize,
-      pageSize: PageSize
+      pageSize: PageSize,
+      withDepth: false
     });
 
-    if (_qs.length > 0 || searchTermParsed.length > 0 || qsParsed.length > 0) {
-      searchTermQs = buildQs([..._qs, ...searchTermParsed, ...qsParsed]);
+    let sortParsed = parser(`_sort_des=title`);
+    let typeNameParsed = [];
+
+    if (_typeNameQuery) {
+      typeNameParsed = parser(`type_name__in=${_typeNameQuery}`);
     }
 
-    const data = await _traversal.client.search(_path, searchTermQs, false, false, page * PageSize, PageSize);
+    if (_qs.length > 0 || searchTermParsed.length > 0 || qsParsed.length > 0 || typeNameParsed.length > 0) {
+      searchTermQs = buildQs([..._qs, ...searchTermParsed, ...qsParsed, ...typeNameParsed, ...sortParsed]);
+    }
+
+    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 : [],
@@ -2527,18 +2610,24 @@ const SearchInput = ({
     return item.title || item['@name'];
   };
 
-  React.useEffect(() => {
-    if (_path && !options.loading && !options.items) {
-
-      (async () => {
-        handleSearch(options.page);
-      })();
+  useEffect(() => {
+    if (value) {
+      inicializeLabels();
+    } else {
+      setValueLabel({});
     }
-  }, [_path, options.loading, options.items]);
+  }, [_path, value]);
+
+  if (valueLabel === undefined) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "spinner"
+    });
+  }
+
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     "data-test": _dataTestWrapper,
     ref: wrapperRef,
-    className: `dropdown ${isOpen ? 'is-active' : ''}`,
+    className: `dropdown mb-2 ${isOpen ? 'is-active' : ''}`,
     onBlur: ev => {
       if (!ev.currentTarget.contains(ev.relatedTarget)) {
         if (searchTerm !== '') {
@@ -2546,7 +2635,7 @@ const SearchInput = ({
           setOptions(initialState);
         }
 
-        setIsOpen(!isOpen);
+        setIsOpen(false);
       }
     }
   }, /*#__PURE__*/React.createElement("div", {
@@ -2554,12 +2643,16 @@ const SearchInput = ({
   }, /*#__PURE__*/React.createElement("button", {
     className: `button ${_btnClass}`,
     onClick: ev => {
-      ev.preventDefault();
+      ev.target.blur();
       setIsOpen(!isOpen);
+
+      if (!options.loading && !options.items) {
+        handleSearch(options.page);
+      }
     },
     "aria-haspopup": "true",
     "aria-controls": "dropdown-menu"
-  }, /*#__PURE__*/React.createElement("span", null, value && value.title ? value.title : 'Choose...'), /*#__PURE__*/React.createElement("span", {
+  }, /*#__PURE__*/React.createElement("span", null, value ? get$1(valueLabel, value, value) : intl.formatMessage(genericMessages.choose)), /*#__PURE__*/React.createElement("span", {
     className: "icon"
   }, /*#__PURE__*/React.createElement("i", {
     className: "fas fa-angle-down",
@@ -2587,12 +2680,16 @@ const SearchInput = ({
   })), /*#__PURE__*/React.createElement("hr", {
     className: "dropdown-divider"
   }), options.loading && /*#__PURE__*/React.createElement(Loading, null), options.items && options.items.map(item => {
-    return /*#__PURE__*/React.createElement("a", {
-      href: "#",
-      className: `dropdown-item editable ${value && value.id === item.id ? 'is-active' : ''}`,
+    return /*#__PURE__*/React.createElement("div", {
+      className: `dropdown-item editable ${value === item.id ? 'is-active' : ''}`,
       "data-test": `${_dataTestItem}-${item.id}`,
-      onMouseDown: () => {
-        onChange && onChange(item);
+      onMouseDown: ev => {
+        ev.preventDefault();
+
+        if (onChange) {
+          onChange(item.id);
+        }
+
         setIsOpen(false);
       },
       key: item.path
@@ -2615,11 +2712,20 @@ const SearchInput = ({
 };
 SearchInput.propTypes = {
   onChange: PropTypes.func,
-  value: PropTypes.object,
-  client: PropTypes.object,
+  value: PropTypes.string,
   path: PropTypes.string,
-  PageSize: PropTypes.number,
-  btnClass: PropTypes.string
+  btnClass: PropTypes.string,
+  error: PropTypes.string,
+  errorZoneClassName: PropTypes.string,
+  traversal: PropTypes.object,
+  qs: PropTypes.array,
+  queryCondition: PropTypes.string,
+  dataTestWrapper: PropTypes.string,
+  dataTestSearchInput: PropTypes.string,
+  dataTestItem: PropTypes.string,
+  renderTextItemOption: PropTypes.func,
+  typeNameQuery: PropTypes.string,
+  labelProperty: PropTypes.string
 };
 
 const InputList = forwardRef(({
@@ -2668,37 +2774,6 @@ const InputList = forwardRef(({
   }));
 });
 
-const defaultEvents = ['mousedown', 'touchstart'];
-
-const on = (obj, ...args) => obj.addEventListener(...args);
-
-const off = (obj, ...args) => obj.removeEventListener(...args);
-
-function useClickAway(ref, onClickAway, events = defaultEvents) {
-  const savedCallback = useRef(onClickAway);
-  useEffect(() => {
-    savedCallback.current = onClickAway;
-  }, [onClickAway]);
-  useEffect(() => {
-    const handler = event => {
-      const {
-        current: el
-      } = ref;
-      el && !el.contains(event.target) && savedCallback.current(event);
-    };
-
-    for (const eventName of events) {
-      on(document, eventName, handler);
-    }
-
-    return () => {
-      for (const eventName of events) {
-        off(document, eventName, handler);
-      }
-    };
-  }, [events, ref]);
-}
-
 function Dropdown(_ref) {
   let {
     children,
@@ -3036,13 +3111,15 @@ function useVocabulary(vocabularyName, path) {
 const plain = ['string', 'number', 'boolean'];
 function RenderField({
   value,
-  Widget
+  Widget,
+  schema
 }) {
   if (value === null || value === undefined) return '';
 
   if (Widget) {
     return /*#__PURE__*/React.createElement(Widget, {
-      value: value
+      value: value,
+      schema: schema
     });
   }
 
@@ -3084,6 +3161,131 @@ const FieldValue = ({
   value: value
 })));
 
+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
+}) => {
+  const [valuesLabels, setValuesLabels] = useState([]);
+  const [isLoadingData, setIsLoadingData] = useState(false);
+  const traversal = useTraversal();
+  const {
+    SearchEngine
+  } = useConfig();
+  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([]);
+    }
+  }, [value]);
+
+  const getRenderValue = () => {
+    console.log('get render values', value, valuesLabels);
+
+    if (value === undefined) {
+      if (modifyContent) {
+        return DEFAULT_VALUE_EDITABLE_FIELD;
+      }
+
+      return DEFAULT_VALUE_NO_EDITABLE_FIELD;
+    }
+
+    if (isLoadingData) {
+      return 'Loading...';
+    }
+
+    return valuesLabels;
+  };
+
+  return /*#__PURE__*/React.createElement(RenderField, {
+    value: getRenderValue()
+  });
+};
+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);
+
+  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 /*#__PURE__*/React.createElement(RenderField, getRenderProps());
+};
 function RenderFieldComponent({
   schema,
   field,
@@ -3091,17 +3293,10 @@ function RenderFieldComponent({
   modifyContent
 }) {
   const intl = useIntl();
-  const DEFAULT_VALUE_EDITABLE_FIELD = intl.formatMessage({
-    id: "default_value_editable_field",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Click to edit"
-    }]
-  });
-  const DEFAULT_VALUE_NO_EDITABLE_FIELD = ' -- ';
+  const DEFAULT_VALUE_EDITABLE_FIELD = getDefaultValueEditableField(intl);
 
   const getRenderProps = () => {
-    var _schema$items;
+    var _schema$items2;
 
     const renderProps = {
       value: val != null ? val : modifyContent ? DEFAULT_VALUE_EDITABLE_FIELD : DEFAULT_VALUE_NO_EDITABLE_FIELD
@@ -3119,46 +3314,558 @@ function RenderFieldComponent({
       renderProps['value'] = (_val$toString = val == null ? void 0 : val.toString()) != null ? _val$toString : renderProps['value'];
     } else if (val && (schema == null ? void 0 : schema.type) === 'datetime') {
       renderProps['value'] = new Date(val).toLocaleString();
-    } else if (schema != null && (_schema$items = schema.items) != null && _schema$items.vocabularyName || schema != null && schema.vocabularyName) {
-      var _schema$items2;
+    } else if (schema != null && (_schema$items2 = schema.items) != null && _schema$items2.vocabularyName || schema != null && schema.vocabularyName) {
+      renderProps['Widget'] = VocabularyRenderField;
+      renderProps['schema'] = schema;
+    } else if ((schema == null ? void 0 : schema.widget) === 'search' || (schema == null ? void 0 : schema.widget) === 'search_list') {
+      renderProps['Widget'] = SearchRenderField;
+      renderProps['value'] = val;
+      renderProps['schema'] = schema;
+    }
+
+    return renderProps;
+  };
+
+  return /*#__PURE__*/React.createElement(RenderField, getRenderProps());
+}
+
+const SelectVocabulary = React.forwardRef((_ref, ref) => {
+  let {
+    vocabularyName,
+    className,
+    classWrap,
+    val,
+    dataTest,
+    multiple
+  } = _ref,
+      rest = _objectWithoutPropertiesLoose(_ref, ["vocabularyName", "className", "classWrap", "val", "dataTest", "multiple"]);
+
+  const vocabulary = useVocabulary(vocabularyName);
+
+  const getOptions = () => {
+    if (get$1(vocabulary, 'data.items', null)) {
+      const vocData = vocabulary.data.items.map(item => {
+        var _item$title$default;
+
+        return {
+          text: (_item$title$default = item.title.default) != null ? _item$title$default : item.title,
+          value: item.token
+        };
+      });
+      return vocData;
+    }
+
+    return [];
+  };
+
+  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 /*#__PURE__*/React.createElement("div", null);
+  }
 
-      const vocabularyName = (schema == null ? void 0 : (_schema$items2 = schema.items) == null ? void 0 : _schema$items2.vocabularyName) || (schema == null ? void 0 : schema.vocabularyName);
-      const vocabulary = useVocabulary(vocabularyName);
+  return /*#__PURE__*/React.createElement(Select, _extends({}, getProps(), {
+    className: className,
+    classWrap: classWrap || 'is-fullwidth',
+    dataTest: dataTest,
+    ref: ref
+  }, rest));
+});
+Select.propTypes = {
+  error: PropTypes.string,
+  disabled: PropTypes.bool,
+  loading: PropTypes.bool,
+  isSubmitted: PropTypes.bool,
+  size: PropTypes.number,
+  onChange: PropTypes.func,
+  multiple: PropTypes.bool,
+  className: PropTypes.string,
+  vocabularyName: PropTypes.string
+};
 
-      if (schema != null && schema.vocabularyName) {
-        var _vocabularyValue$titl;
+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,
+  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 [options, setOptions] = useSetState(initialState$1);
+  const [valuesLabel, setValuesLabels] = useState(undefined);
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [searchTerm, setSearchTerm] = React.useState('');
+  const inputRef = React.useRef(null);
+  const wrapperRef = React.useRef(null);
+  const {
+    PageSize,
+    SearchEngine
+  } = useConfig();
+  const [isLoadingData, setIsLoadingData] = useState(false);
+  const [uid] = useState(generateUID('search_input'));
+  useClickAway(wrapperRef, () => {
+    setIsOpen(false);
+  });
+
+  const getHeight = () => {
+    if (wrapperRef && wrapperRef.current) {
+      return {
+        maxHeight: `${window.innerHeight - wrapperRef.current.getBoundingClientRect().top - 100}px`
+      };
+    }
+
+    return {
+      maxHeight: 'auto'
+    };
+  };
+
+  const delayedQuery = useCallback(debounce$1(value => handleSearch(0, false, value), 500), []);
+
+  const handleSearch = async (page = 0, concat = false, value = '') => {
+    var _data$items_total;
+
+    setOptions({
+      loading: true
+    });
+    let searchTermQs = [];
+    let searchTermParsed = [];
+
+    if (value !== '') {
+      searchTermParsed = parser(`${_queryCondition}=${value}`);
+    }
+
+    const {
+      get
+    } = _traversal.registry;
+    const fnName = get('searchEngineQueryParamsFunction', SearchEngine);
+
+    let qsParsed = _traversal.client[fnName]({
+      path: _traversal.path,
+      start: page * PageSize,
+      pageSize: PageSize,
+      withDepth: false
+    });
+
+    let sortParsed = parser(`_sort_des=title`);
+    let typeNameParsed = [];
+
+    if (_typeNameQuery) {
+      typeNameParsed = parser(`type_name__in=${_typeNameQuery}`);
+    }
+
+    if (_qs.length > 0 || searchTermParsed.length > 0 || qsParsed.length > 0 || typeNameParsed.length > 0) {
+      searchTermQs = buildQs([..._qs, ...searchTermParsed, ...qsParsed, ...typeNameParsed, ...sortParsed]);
+    }
+
+    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 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 qsParsed = _traversal.client[fnName]({
+        path: _traversal.path,
+        start: 0,
+        pageSize: 100,
+        withDepth: false
+      });
+
+      let typeNameParsed = [];
+
+      if (_typeNameQuery) {
+        typeNameParsed = parser(`type_name__in=${_typeNameQuery}`);
+      }
+
+      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(_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 renderTextItemOptionFn = item => {
+    if (_renderTextItemOption) {
+      return _renderTextItemOption(item);
+    }
+
+    return item.title || item['@name'];
+  };
+
+  React.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 /*#__PURE__*/React.createElement("div", {
+      className: "spinner"
+    });
+  }
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "tags mb-2"
+  }, value.map((tag, index) => /*#__PURE__*/React.createElement("div", {
+    key: `input_list_${tag}_${index}`,
+    className: "tag is-info is-medium"
+  }, get$1(valuesLabel, tag, tag), /*#__PURE__*/React.createElement("button", {
+    className: "delete is-small",
+    onClick: ev => {
+      ev.stopPropagation();
+      ev.preventDefault();
+      onChange([...value.filter(tag => value.indexOf(tag) !== index)]);
+    }
+  })))), /*#__PURE__*/React.createElement("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);
+        }
+
+        setIsOpen(false);
+      }
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "dropdown-trigger"
+  }, /*#__PURE__*/React.createElement("button", {
+    className: `button ${_btnClass}`,
+    onClick: ev => {
+      ev.preventDefault();
+      setIsOpen(!isOpen);
+
+      if (!options.loading && !options.items) {
+        handleSearch(options.page);
+      }
+    },
+    "aria-haspopup": "true",
+    "aria-controls": "dropdown-menu"
+  }, /*#__PURE__*/React.createElement("span", null, intl.formatMessage(genericMessages.choose)), /*#__PURE__*/React.createElement("span", {
+    className: "icon"
+  }, /*#__PURE__*/React.createElement("i", {
+    className: "fas fa-angle-down",
+    "aria-hidden": "true"
+  })))), /*#__PURE__*/React.createElement("div", {
+    className: "dropdown-menu",
+    id: "dropdown-menu",
+    role: "menu",
+    style: getHeight()
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "dropdown-content"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "dropdown-item"
+  }, /*#__PURE__*/React.createElement("input", {
+    ref: inputRef,
+    "data-test": _dataTestSearchInput,
+    className: "input",
+    type: "text",
+    placeholder: intl.formatMessage(genericMessages.search),
+    value: searchTerm,
+    onChange: ev => {
+      delayedQuery(ev.target.value);
+      setSearchTerm(ev.target.value);
+    }
+  })), /*#__PURE__*/React.createElement("hr", {
+    className: "dropdown-divider"
+  }), options.loading && /*#__PURE__*/React.createElement(Loading, null), options.items && options.items.map(item => {
+    return /*#__PURE__*/React.createElement("div", {
+      className: `dropdown-item editable ${value && value.id === 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]);
+        }
+      },
+      key: item.path
+    }, renderTextItemOptionFn(item));
+  }), options.items && options.items.length === 0 && /*#__PURE__*/React.createElement("div", {
+    className: "dropdown-item"
+  }, intl.formatMessage(genericMessages.no_results)), options.items && options.items_total > options.items.length && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("hr", {
+    className: "dropdown-divider"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "dropdown-item editable",
+    onMouseDown: ev => {
+      ev.stopPropagation();
+      ev.preventDefault();
+      handleSearch(options.page + 1, true);
+    }
+  }, intl.formatMessage(genericMessages.load_more)))))), error && /*#__PURE__*/React.createElement(ErrorZone, {
+    className: errorZoneClassName,
+    id: uid
+  }, error ? error : ''));
+};
+SearchInputList.propTypes = {
+  onChange: PropTypes.func,
+  path: PropTypes.string,
+  btnClass: PropTypes.string,
+  dataTestWrapper: PropTypes.string,
+  dataTestSearchInput: PropTypes.string,
+  dataTestItem: PropTypes.string,
+  renderTextItemOption: PropTypes.func,
+  typeNameQuery: PropTypes.string,
+  labelProperty: PropTypes.string,
+  error: PropTypes.string,
+  errorZoneClassName: PropTypes.string,
+  traversal: PropTypes.object,
+  path: PropTypes.string,
+  qs: PropTypes.array,
+  queryCondition: PropTypes.string
+};
+
+const EditComponent = React.forwardRef((_ref, ref) => {
+  let {
+    schema,
+    val,
+    setValue,
+    dataTest,
+    className
+  } = _ref,
+      rest = _objectWithoutPropertiesLoose(_ref, ["schema", "val", "setValue", "dataTest", "className"]);
+
+  const traversal = useTraversal();
+
+  if ((schema == null ? void 0 : schema.widget) === 'search_list') {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, rest.placeholder && /*#__PURE__*/React.createElement("label", {
+      className: "label"
+    }, rest.placeholder), /*#__PURE__*/React.createElement(SearchInputList, _extends({
+      value: val || [],
+      traversal: traversal,
+      className: className,
+      onChange: ev => setValue(ev),
+      queryCondition: schema != null && schema.queryCondition ? schema.queryCondition : 'title__in',
+      dataTest: dataTest,
+      path: schema.queryPath,
+      labelProperty: schema != null && schema.labelProperty ? schema.labelProperty : 'title',
+      typeNameQuery: schema != null && schema.typeNameQuery ? schema.typeNameQuery : null
+    }, rest)));
+  } else if ((schema == null ? void 0 : schema.widget) === 'search') {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, rest.placeholder && /*#__PURE__*/React.createElement("label", {
+      className: "label"
+    }, rest.placeholder), /*#__PURE__*/React.createElement(SearchInput, _extends({
+      value: val,
+      traversal: traversal,
+      className: className,
+      onChange: ev => setValue(ev),
+      queryCondition: schema != null && schema.queryCondition ? schema.queryCondition : 'title__in',
+      dataTest: dataTest,
+      path: schema.queryPath,
+      labelProperty: schema != null && schema.labelProperty ? schema.labelProperty : 'title',
+      typeNameQuery: schema != null && schema.typeNameQuery ? schema.typeNameQuery : null
+    }, rest)));
+  } else if ((schema == null ? void 0 : schema.widget) === 'textarea' || (schema == null ? void 0 : schema.widget) === 'richtext') {
+    return /*#__PURE__*/React.createElement(Textarea, _extends({
+      value: val || '',
+      className: className,
+      onChange: ev => setValue(ev),
+      ref: ref,
+      dataTest: dataTest
+    }, rest));
+  } else if ((schema == null ? void 0 : schema.type) === 'boolean') {
+    return /*#__PURE__*/React.createElement(Checkbox, _extends({
+      value: !!val,
+      className: className,
+      onChange: ev => setValue(ev),
+      ref: ref,
+      dataTest: dataTest
+    }, rest));
+  } else if ((schema == null ? void 0 : schema.type) === 'array') {
+    if (schema.items && schema.items.type === 'string') {
+      var _schema$items;
+
+      if (schema.items.vocabularyName) {
+        return /*#__PURE__*/React.createElement(SelectVocabulary, _extends({
+          vocabularyName: get$1(schema, 'items.vocabularyName', null),
+          val: val || [],
+          className: className,
+          classWrap: "is-fullwidth",
+          dataTest: dataTest
+        }, rest, {
+          onChange: setValue,
+          multiple: true
+        }));
+      } else if (schema != null && (_schema$items = schema.items) != null && _schema$items.vocabulary) {
+        return /*#__PURE__*/React.createElement(Select, _extends({
+          value: val || [],
+          className: className,
+          classWrap: "is-fullwidth",
+          dataTest: dataTest,
+          options: schema == null ? void 0 : schema.items.vocabulary.map(item => {
+            return {
+              text: item,
+              value: item
+            };
+          }),
+          multiple: true,
+          onChange: setValue
+        }, rest));
+      }
+    }
+
+    return /*#__PURE__*/React.createElement(InputList, _extends({
+      value: val || [],
+      className: className,
+      onChange: ev => setValue(ev),
+      ref: ref,
+      dataTest: dataTest
+    }, rest));
+  } else if ((schema == null ? void 0 : schema.widget) === 'file') {
+    return /*#__PURE__*/React.createElement(FileUpload, _extends({
+      onChange: ev => setValue(ev),
+      label: get$1(val, 'filename', null),
+      dataTest: dataTest
+    }, rest));
+  } else if ((schema == null ? void 0 : schema.widget) === 'select' && schema.type === 'string') {
+    if (schema != null && schema.vocabularyName) {
+      return /*#__PURE__*/React.createElement(SelectVocabulary, _extends({
+        val: val || '',
+        className: className,
+        appendDefault: true,
+        classWrap: "is-fullwidth",
+        dataTest: dataTest,
+        onChange: setValue,
+        vocabularyName: get$1(schema, 'vocabularyName', null)
+      }, rest));
+    }
+
+    return /*#__PURE__*/React.createElement(Select, _extends({
+      value: val || '',
+      className: className,
+      appendDefault: true,
+      classWrap: "is-fullwidth",
+      dataTest: dataTest,
+      options: schema == null ? void 0 : schema.vocabulary.map(item => {
+        return {
+          text: item,
+          value: item
+        };
+      }),
+      onChange: setValue
+    }, rest));
+  }
+
+  const getInputType = () => {
+    switch (schema == null ? void 0 : schema.type) {
+      case 'integer':
+        return 'number';
 
-        const vocabularyValue = get$1(vocabulary, 'data.items', []).find(item => item.token === val);
-        renderProps['value'] = (_vocabularyValue$titl = vocabularyValue == null ? void 0 : vocabularyValue.title) != null ? _vocabularyValue$titl : '';
-      } else {
-        var _renderProps$value;
+      case 'date':
+        return 'date';
 
-        renderProps['value'] = ((_renderProps$value = renderProps['value']) != null ? _renderProps$value : []).map(value => {
-          var _get$find$title, _get$find;
+      case 'datetime':
+        return 'datetime-local';
 
-          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 : '';
-        });
-      }
+      default:
+        return 'text';
     }
-
-    return renderProps;
   };
 
-  return /*#__PURE__*/React.createElement(RenderField, getRenderProps());
-}
+  return /*#__PURE__*/React.createElement(Input, _extends({
+    value: val || '',
+    className: className,
+    dataTest: dataTest,
+    onChange: ev => setValue(ev),
+    ref: ref,
+    type: getInputType()
+  }, rest));
+});
+EditComponent.displayName = 'EditComponent';
 
 function IAttachment({
   properties,
   values
 }) {
+  const intl = useIntl();
   const Ctx = useTraversal();
   const modifyContent = Ctx.hasPerm('guillotina.ModifyContent');
   return /*#__PURE__*/React.createElement(Table, {
-    headers: ['Field', 'Value'],
+    headers: [intl.formatMessage(genericMessages.property), intl.formatMessage(genericMessages.value)],
     className: "is-striped is-fullwidth is-size-7"
   }, Object.keys(properties).map(key => /*#__PURE__*/React.createElement("tr", {
     key: 'attachment_' + key
   }, /*#__PURE__*/React.createElement("td", {
+    style: {
+      width: '150px'
+    },
     key: 1
   }, key), /*#__PURE__*/React.createElement("td", {
     key: 2
@@ -3230,7 +3937,7 @@ function IMultiAttachment({
   };
 
   return /*#__PURE__*/React.createElement(Table, {
-    headers: ['Field', 'Value'],
+    headers: [intl.formatMessage(genericMessages.property), intl.formatMessage(genericMessages.value)],
     className: "is-striped is-fullwidth is-size-7"
   }, fileKeyToDelete && /*#__PURE__*/React.createElement(Confirm, {
     loading: loading,
@@ -3242,7 +3949,10 @@ function IMultiAttachment({
   }), Object.keys(values['files']).map(key => /*#__PURE__*/React.createElement("tr", {
     key: 'multiattachment_' + key
   }, /*#__PURE__*/React.createElement("td", {
-    key: 1
+    key: 1,
+    style: {
+      width: '150px'
+    }
   }, key), /*#__PURE__*/React.createElement("td", {
     key: 2
   }, /*#__PURE__*/React.createElement("div", {
@@ -3364,7 +4074,7 @@ function IImageAttachment({
   };
 
   return /*#__PURE__*/React.createElement(Table, {
-    headers: ['Field', 'Value'],
+    headers: [intl.formatMessage(genericMessages.property), intl.formatMessage(genericMessages.value)],
     className: "is-striped is-fullwidth is-size-7"
   }, showConfirmToDelete && /*#__PURE__*/React.createElement(Confirm, {
     loading: loading,
@@ -3372,7 +4082,10 @@ function IImageAttachment({
     onConfirm: () => deleteFile(),
     message: intl.formatMessage(genericFileMessages.confirm_message_delete_image)
   }), values['image'] && /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
-    key: 1
+    key: 1,
+    style: {
+      width: '150px'
+    }
   }, intl.formatMessage(genericMessages.image)), /*#__PURE__*/React.createElement("td", {
     key: 2
   }, /*#__PURE__*/React.createElement("div", {
@@ -3495,7 +4208,7 @@ function IMultiImageAttachment({
   };
 
   return /*#__PURE__*/React.createElement(Table, {
-    headers: ['Field', 'Value'],
+    headers: [intl.formatMessage(genericMessages.property), intl.formatMessage(genericMessages.value)],
     className: "is-striped is-fullwidth is-size-7"
   }, fileKeyToDelete && /*#__PURE__*/React.createElement(Confirm, {
     loading: loading,
@@ -3507,7 +4220,10 @@ function IMultiImageAttachment({
   }), Object.keys(values['images']).map(key => /*#__PURE__*/React.createElement("tr", {
     key: `multiimageattachment_${key}`
   }, /*#__PURE__*/React.createElement("td", {
-    key: 1
+    key: 1,
+    style: {
+      width: '150px'
+    }
   }, key), /*#__PURE__*/React.createElement("td", {
     key: 2
   }, /*#__PURE__*/React.createElement("div", {
@@ -4620,77 +5336,7 @@ function SearchVocabularyLabels(props) {
   return null;
 }
 
-const SelectVocabulary = React.forwardRef((_ref, ref) => {
-  let {
-    vocabularyName,
-    className,
-    classWrap,
-    val,
-    dataTest,
-    multiple
-  } = _ref,
-      rest = _objectWithoutPropertiesLoose(_ref, ["vocabularyName", "className", "classWrap", "val", "dataTest", "multiple"]);
-
-  const vocabulary = useVocabulary(vocabularyName);
-
-  const getOptions = () => {
-    if (get$1(vocabulary, 'data.items', null)) {
-      const vocData = vocabulary.data.items.map(item => {
-        var _item$title$default;
-
-        return {
-          text: (_item$title$default = item.title.default) != null ? _item$title$default : item.title,
-          value: item.token
-        };
-      });
-      return vocData;
-    }
-
-    return [];
-  };
-
-  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 /*#__PURE__*/React.createElement("div", null);
-  }
-
-  return /*#__PURE__*/React.createElement(Select, _extends({}, getProps(), {
-    className: className,
-    classWrap: classWrap || 'is-fullwidth',
-    dataTest: dataTest,
-    ref: ref
-  }, rest));
-});
-Select.propTypes = {
-  error: PropTypes.string,
-  disabled: PropTypes.bool,
-  loading: PropTypes.bool,
-  isSubmitted: PropTypes.bool,
-  size: PropTypes.number,
-  onChange: PropTypes.func,
-  multiple: PropTypes.bool,
-  className: PropTypes.string,
-  vocabularyName: PropTypes.string
-};
-
-const initialState$1 = {
+const initialState$2 = {
   page: 0,
   items: [],
   loading: true,
@@ -4704,7 +5350,7 @@ function PanelItems() {
   } = useConfig();
   const intl = useIntl();
   const Ctx = useTraversal();
-  const [state, setState] = useSetState(initialState$1);
+  const [state, setState] = useSetState(initialState$2);
   const {
     items,
     loading,
@@ -5125,7 +5771,7 @@ function PanelProperties() {
     icon: model.icon,
     align: "is-left",
     className: "has-text-grey"
-  }), ' ', "\xA0", /*#__PURE__*/React.createElement("span", null, Ctx.context.title || Ctx.context['@name']))), /*#__PURE__*/React.createElement("div", {
+  }), "\xA0", /*#__PURE__*/React.createElement("span", null, Ctx.context.title || Ctx.context['@name']))), /*#__PURE__*/React.createElement("div", {
     className: "level-right"
   }, /*#__PURE__*/React.createElement(PropertiesButtonView, null))), /*#__PURE__*/React.createElement("hr", null), schema && schema.data && !schema.loading && /*#__PURE__*/React.createElement("div", {
     className: "columns"
@@ -5134,18 +5780,28 @@ function PanelProperties() {
   }, /*#__PURE__*/React.createElement("table", {
     className: "table is-striped is-fullwidth is-size-7"
   }, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("th", {
+    style: {
+      width: '150px'
+    },
     className: "is-2"
   }, intl.formatMessage(genericMessages.property)), /*#__PURE__*/React.createElement("th", {
     className: "is-8"
   }, intl.formatMessage(genericMessages.value)))), /*#__PURE__*/React.createElement("tbody", null, showProperties.map(prop => /*#__PURE__*/React.createElement("tr", {
     key: 'prop' + prop
-  }, /*#__PURE__*/React.createElement("td", null, prop), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(EditableField, {
+  }, /*#__PURE__*/React.createElement("td", {
+    style: {
+      width: '150px'
+    }
+  }, prop), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(EditableField, {
     field: prop,
     value: Ctx.context[prop],
     modifyContent: false
   })))))), properties.length > 0 && /*#__PURE__*/React.createElement("table", {
     className: "table is-striped is-fullwidth is-size-7"
   }, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("th", {
+    style: {
+      width: '150px'
+    },
     className: "is-2"
   }, intl.formatMessage(genericMessages.property)), /*#__PURE__*/React.createElement("th", {
     className: "is-8"
@@ -5155,7 +5811,11 @@ function PanelProperties() {
   }) => {
     return /*#__PURE__*/React.createElement("tr", {
       key: 'prop' + key
-    }, /*#__PURE__*/React.createElement("td", null, value.title || key), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(EditableField, {
+    }, /*#__PURE__*/React.createElement("td", {
+      style: {
+        width: '150px'
+      }
+    }, value.title || key), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(EditableField, {
       field: key,
       value: Ctx.context[key],
       schema: value,
@@ -5783,12 +6443,12 @@ function TagsWidget({
 
 /* eslint jsx-a11y/anchor-is-valid: "off" */
 
-const initialState$2 = {
+const initialState$3 = {
   types: undefined
 };
 function CreateButton() {
   const intl = useIntl();
-  const [state, setState] = useSetState(initialState$2);
+  const [state, setState] = useSetState(initialState$3);
   const Ctx = useTraversal();
   const Config = useConfig();
   useEffect(() => {
@@ -5847,7 +6507,7 @@ function ContextToolbar(_ref) {
       props = _objectWithoutPropertiesLoose(_ref, ["AddButton"]);
 
   const intl = useIntl();
-  const [state, setState] = useSetState(initialState$2);
+  const [state, setState] = useSetState(initialState$3);
   const [location, setLocation, del] = useLocation();
   const traversal = useTraversal();
   const Config = useConfig();
@@ -6900,14 +7560,18 @@ function IDublinCore({
   properties,
   values
 }) {
+  const intl = useIntl();
   const Ctx = useTraversal();
   const modifyContent = Ctx.hasPerm('guillotina.ModifyContent');
   return /*#__PURE__*/React.createElement(Table, {
-    headers: ['Field', 'Value'],
+    headers: [intl.formatMessage(genericMessages.property), intl.formatMessage(genericMessages.value)],
     className: "is-striped is-fullwidth is-size-7"
   }, Object.keys(properties).map(key => /*#__PURE__*/React.createElement("tr", {
     key: 'dublin_' + key
   }, /*#__PURE__*/React.createElement("td", {
+    style: {
+      width: '150px'
+    },
     key: 1
   }, key), /*#__PURE__*/React.createElement("td", {
     key: 2
@@ -7078,12 +7742,12 @@ function GroupCtx() {
     }), errorMessage);
   };
 
-  const addUser = async newUser => {
+  const addUser = async newUserId => {
     const data = {};
     Ctx.context.users.forEach(user => {
       data[user] = true;
     });
-    data[newUser.id] = true;
+    data[newUserId] = true;
     const {
       isError,
       errorMessage
@@ -7103,7 +7767,7 @@ function GroupCtx() {
         "value": " added to group"
       }]
     }, {
-      user: newUser.id
+      user: newUserId
     }), errorMessage);
   };
 
@@ -7364,134 +8028,6 @@ const buildPaths = segments => {
   return results;
 };
 
-const EditComponent = React.forwardRef((_ref, ref) => {
-  let {
-    schema,
-    val,
-    setValue,
-    dataTest,
-    className
-  } = _ref,
-      rest = _objectWithoutPropertiesLoose(_ref, ["schema", "val", "setValue", "dataTest", "className"]);
-
-  if ((schema == null ? void 0 : schema.widget) === 'textarea' || (schema == null ? void 0 : schema.widget) === 'richtext') {
-    return /*#__PURE__*/React.createElement(Textarea, _extends({
-      value: val || '',
-      className: className,
-      onChange: ev => setValue(ev),
-      ref: ref,
-      dataTest: dataTest
-    }, rest));
-  } else if ((schema == null ? void 0 : schema.type) === 'boolean') {
-    return /*#__PURE__*/React.createElement(Checkbox, _extends({
-      value: !!val,
-      className: className,
-      onChange: ev => setValue(ev),
-      ref: ref,
-      dataTest: dataTest
-    }, rest));
-  } else if ((schema == null ? void 0 : schema.type) === 'array') {
-    if (schema.items && schema.items.type === 'string') {
-      var _schema$items;
-
-      if (schema.items.vocabularyName) {
-        return /*#__PURE__*/React.createElement(SelectVocabulary, _extends({
-          vocabularyName: get$1(schema, 'items.vocabularyName', null),
-          val: val || [],
-          className: className,
-          classWrap: "is-fullwidth",
-          dataTest: dataTest
-        }, rest, {
-          onChange: setValue,
-          multiple: true
-        }));
-      } else if (schema != null && (_schema$items = schema.items) != null && _schema$items.vocabulary) {
-        return /*#__PURE__*/React.createElement(Select, _extends({
-          value: val || [],
-          className: className,
-          classWrap: "is-fullwidth",
-          dataTest: dataTest,
-          options: schema == null ? void 0 : schema.items.vocabulary.map(item => {
-            return {
-              text: item,
-              value: item
-            };
-          }),
-          multiple: true,
-          onChange: setValue
-        }, rest));
-      }
-    }
-
-    return /*#__PURE__*/React.createElement(InputList, _extends({
-      value: val || [],
-      className: className,
-      onChange: ev => setValue(ev),
-      ref: ref,
-      dataTest: dataTest
-    }, rest));
-  } else if ((schema == null ? void 0 : schema.widget) === 'file') {
-    return /*#__PURE__*/React.createElement(FileUpload, _extends({
-      onChange: ev => setValue(ev),
-      label: get$1(val, 'filename', null),
-      dataTest: dataTest
-    }, rest));
-  } else if ((schema == null ? void 0 : schema.widget) === 'select' && schema.type === 'string') {
-    if (schema != null && schema.vocabularyName) {
-      return /*#__PURE__*/React.createElement(SelectVocabulary, _extends({
-        val: val || '',
-        className: className,
-        appendDefault: true,
-        classWrap: "is-fullwidth",
-        dataTest: dataTest,
-        onChange: setValue,
-        vocabularyName: get$1(schema, 'vocabularyName', null)
-      }, rest));
-    }
-
-    return /*#__PURE__*/React.createElement(Select, _extends({
-      value: val || '',
-      className: className,
-      appendDefault: true,
-      classWrap: "is-fullwidth",
-      dataTest: dataTest,
-      options: schema == null ? void 0 : schema.vocabulary.map(item => {
-        return {
-          text: item,
-          value: item
-        };
-      }),
-      onChange: setValue
-    }, rest));
-  }
-
-  const getInputType = () => {
-    switch (schema == null ? void 0 : schema.type) {
-      case 'integer':
-        return 'number';
-
-      case 'date':
-        return 'date';
-
-      case 'datetime':
-        return 'datetime-local';
-
-      default:
-        return 'text';
-    }
-  };
-
-  return /*#__PURE__*/React.createElement(Input, _extends({
-    value: val || '',
-    className: className,
-    dataTest: dataTest,
-    onChange: ev => setValue(ev),
-    ref: ref,
-    type: getInputType()
-  }, rest));
-});
-EditComponent.displayName = 'EditComponent';
-
 let registry = {
   paths: {},
   views: {
@@ -7664,7 +8200,7 @@ const registry = {
 
 */
 
-const initialState$3 = {
+const initialState$4 = {
   path: '',
   loading: false,
   context: undefined,
@@ -10566,10 +11102,10 @@ function Guillotina(_ref) {
   const searchPath = location.get('path') || '/';
 
   if (searchPath && searchPath !== '') {
-    initialState$3.path = searchPath;
+    initialState$4.path = searchPath;
   }
 
-  const [state, dispatch] = useReducer(guillotinaReducer, initialState$3);
+  const [state, dispatch] = useReducer(guillotinaReducer, initialState$4);
   const {
     path,
     refresh
@@ -10715,7 +11251,7 @@ const ERRORS = {
   failed_to_fetch: 'Failed to fetch data: Backend not running?',
   invalid_credentials: 'Failed! Invalid credentials'
 };
-const initialState$4 = {
+const initialState$5 = {
   username: '',
   password: '',
   loading: undefined,
@@ -10728,7 +11264,7 @@ const Login = ({
   auth,
   onLogin
 }) => {
-  const [state, setState] = useSetState(initialState$4);
+  const [state, setState] = useSetState(initialState$5);
   const inputRef = useRef(null);
   useEffect(() => {
     if (inputRef) {
@@ -11101,5 +11637,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, EditableField, EmailInput, FileUpload, Flash, FolderCtx, Form, FormBuilder, GroupCtx, GroupToolbar, GroupsCtx, Guillotina, GuillotinaClient, IAttachment, IImageAttachment, IMultiAttachment, IMultiImageAttachment, IMultiImageOrderedAttachment, IWorkflow, Icon, Input, InputList, Item, ItemCheckbox, ItemCtx, ItemModel, ItemTitle, ItemsActionsDropdown, ItemsActionsProvider, Layout, Link, Loading, Login, Modal, NotAllowed, Notification, Pagination, PanelActions, PanelAddons, PanelBehaviors, PanelItems, PanelNotImplemented, PanelPermissions, PanelProperties, PasswordInput, Path, PathTree, PermissionPrinperm, PermissionPrinrole, PermissionRoleperm, Permissions, PropertiesButtonView, PropertiesView, REGEX_EMAIL, REGEX_HEX_COLOR, REGEX_NUMBER, REGEX_URL, RItem, RemoveItems, RenderField, RenderFieldComponent, RequiredFieldsForm, RestClient, SearchInput, SearchLabels, SearchOptionsLabels, SearchVocabularyLabels, Select, Sharing, Table, TabsPanel, Tag, TagsWidget, TdLink, Textarea, TraversalContext, TraversalProvider, UserCtx, UserForm, UsersCtx, UsersToolbar, base64ToArrayBuffer, buildQs, classnames, defaultComponent, formatDate, generateUID, get$1 as get, getActionsObject, getClient, getNewId, isEmail, isEmpty, isHexColor, isNumber, isURL, lightFileReader, maxLength, messages$4 as messages, minLength, noop, notEmpty, parser, sleep, stringToSlug, toQueryString, useConfig, useCrudContext, useGuillotinaClient, useLocation, useRegistry, useRemoteField, useTraversal, useVocabulary };
+export { AddItem, AddPermission, AllItemsCheckbox, ApplicationCtx, Auth, AuthContext, BaseForm, BehaviorNotImplemented, BehaviorsView, Button, Checkbox, ClientContext, ClientProvider, Config, Confirm, ContainerCtx, ContextToolbar, CreateButton, CreateContainer, DatabaseCtx, Delete, DownloadField, EditComponent, EditableField, EmailInput, FileUpload, Flash, FolderCtx, Form, FormBuilder, GroupCtx, GroupToolbar, GroupsCtx, Guillotina, GuillotinaClient, IAttachment, IImageAttachment, IMultiAttachment, IMultiImageAttachment, IMultiImageOrderedAttachment, IWorkflow, Icon, Input, InputList, Item, ItemCheckbox, ItemCtx, ItemModel, ItemTitle, ItemsActionsDropdown, ItemsActionsProvider, Layout, Link, Loading, Login, Modal, NotAllowed, Notification, Pagination, PanelActions, PanelAddons, PanelBehaviors, PanelItems, PanelNotImplemented, PanelPermissions, PanelProperties, PasswordInput, Path, PathTree, PermissionPrinperm, PermissionPrinrole, PermissionRoleperm, Permissions, PropertiesButtonView, PropertiesView, REGEX_EMAIL, REGEX_HEX_COLOR, REGEX_NUMBER, REGEX_URL, RItem, RemoveItems, RenderField, RenderFieldComponent, RequiredFieldsForm, RestClient, SearchInput, SearchLabels, SearchOptionsLabels, SearchRenderField, SearchVocabularyLabels, Select, Sharing, Table, TabsPanel, Tag, TagsWidget, TdLink, Textarea, TraversalContext, TraversalProvider, UserCtx, UserForm, UsersCtx, UsersToolbar, VocabularyRenderField, base64ToArrayBuffer, buildQs, classnames, defaultComponent, formatDate, generateUID, get$1 as get, getActionsObject, getClient, getNewId, isEmail, isEmpty, isHexColor, isNumber, isURL, lightFileReader, maxLength, messages$4 as messages, minLength, noop, notEmpty, parser, sleep, stringToSlug, toQueryString, useConfig, useCrudContext, useGuillotinaClient, useLocation, useRegistry, useRemoteField, useTraversal, useVocabulary };
 //# sourceMappingURL=react-gmi.modern.js.map