@guillotinaweb/react-gmi 0.28.3 → 0.29.0

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,62 +2835,355 @@ 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,
+  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);
+
+    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 (_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 get$1(item, _labelProperty, item.title) || item['@name'];
+  };
+
+  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: [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);
+          }
+
+          setIsOpen(false);
+        }
+      },
+      children: [jsx("div", {
+        className: "dropdown-trigger",
+        children: jsxs("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",
+          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();
+
+                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 InputList = forwardRef(({
+  value,
+  onChange,
+  dataTest,
+  id
+}, ref) => {
+  const intl = useIntl();
+  const [inputValue, setInputValue] = useState('');
+
+  const addTags = event => {
+    if (event.key === 'Enter' && event.target.value !== '') {
+      onChange([...value, event.target.value]);
+      setInputValue('');
+    }
+  };
+
+  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';
+
+function Dropdown({
+  children,
+  disabled,
+  id,
+  isRight,
+  onChange,
   optionDisabledWhen,
   options
 }) {
@@ -3092,47 +3487,6 @@ const DownloadField = ({
   });
 };
 
-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 plain = ['string', 'number', 'boolean'];
 function RenderField({
   value,
@@ -3263,457 +3617,103 @@ const SearchRenderField = ({
   }, [value]);
 
   const getRenderValue = () => {
-    if (value === undefined) {
-      if (modifyContent) {
-        return DEFAULT_VALUE_EDITABLE_FIELD;
-      }
-
-      return DEFAULT_VALUE_NO_EDITABLE_FIELD;
-    }
-
-    if (isLoadingData) {
-      return 'Loading...';
-    }
-
-    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);
-
-  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 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';
-
-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] = 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 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);
-
-    const qsParsed = _traversal.client[fnName]({
-      path: _traversal.path,
-      start: page * PageSize,
-      pageSize: PageSize,
-      withDepth: false
-    });
-
-    const sortParsed = parser(`_sort_des=${_labelProperty}`);
-    let typeNameParsed = [];
+    if (value === undefined) {
+      if (modifyContent) {
+        return DEFAULT_VALUE_EDITABLE_FIELD;
+      }
 
-    if (_typeNameQuery) {
-      typeNameParsed = parser(`type_name__in=${_typeNameQuery}`);
+      return DEFAULT_VALUE_NO_EDITABLE_FIELD;
     }
 
-    if (_qs.length > 0 || searchTermParsed.length > 0 || qsParsed.length > 0 || typeNameParsed.length > 0) {
-      searchTermQs = buildQs([..._qs, ...searchTermParsed, ...qsParsed, ...typeNameParsed, ...sortParsed]);
+    if (isLoadingData) {
+      return 'Loading...';
     }
 
-    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
-    });
+    return valuesLabels;
   };
 
-  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);
+  return jsx(RenderField, {
+    value: getRenderValue()
+  });
+};
+const VocabularyRenderField = ({
+  schema,
+  value,
+  modifyContent
+}) => {
+  var _schema$items;
 
-      const qsParsed = _traversal.client[fnName]({
-        path: _traversal.path,
-        start: 0,
-        pageSize: 100,
-        withDepth: false
-      });
+  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);
 
-      let typeNameParsed = [];
+  const getRenderProps = () => {
+    const renderProps = {
+      value: value != null ? value : modifyContent ? DEFAULT_VALUE_EDITABLE_FIELD : DEFAULT_VALUE_NO_EDITABLE_FIELD
+    };
 
-      if (_typeNameQuery) {
-        typeNameParsed = parser(`type_name__in=${_typeNameQuery}`);
-      }
+    if (schema != null && schema.vocabularyName) {
+      var _vocabularyValue$titl;
 
-      if (_qs.length > 0 || searchTermParsed.length > 0 || qsParsed.length > 0 || typeNameParsed.length > 0) {
-        searchTermQs = buildQs([..._qs, searchTermParsed, ...qsParsed, ...typeNameParsed]);
-      }
+      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;
 
-      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);
-    }
-  };
+      renderProps['value'] = ((_renderProps$value = renderProps['value']) != null ? _renderProps$value : []).map(value => {
+        var _get$find$title, _get$find;
 
-  const renderTextItemOptionFn = item => {
-    if (_renderTextItemOption) {
-      return _renderTextItemOption(item);
+        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 get$1(item, _labelProperty, item.title) || item['@name'];
+    return renderProps;
   };
 
-  useEffect(() => {
-    if (!options.loading && !options.items && value.length > 0) {
-      inicializeLabels();
-    } else if (value.length === 0) {
-      setValuesLabels({});
-    }
-  }, [_path, options.loading, options.items]);
+  return jsx(RenderField, _extends({}, getRenderProps()));
+};
+function RenderFieldComponent({
+  schema,
+  field,
+  val,
+  modifyContent
+}) {
+  const intl = useIntl();
+  const DEFAULT_VALUE_EDITABLE_FIELD = getDefaultValueEditableField(intl);
 
-  if (isLoadingData || valuesLabel === undefined) {
-    return jsx("div", {
-      className: "spinner"
-    });
-  }
+  const getRenderProps = () => {
+    var _schema$items2;
 
-  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);
-          }
+    const renderProps = {
+      value: val != null ? val : modifyContent ? DEFAULT_VALUE_EDITABLE_FIELD : DEFAULT_VALUE_NO_EDITABLE_FIELD,
+      schema: schema
+    };
 
-          setIsOpen(false);
-        }
-      },
-      children: [jsx("div", {
-        className: "dropdown-trigger",
-        children: jsxs("button", {
-          className: `button ${_btnClass}`,
-          onClick: ev => {
-            ev.preventDefault();
-            setIsOpen(!isOpen);
+    if (val && (schema == null ? void 0 : schema.widget) === 'file') {
+      renderProps['value'] = {
+        data: val,
+        field: field
+      };
+      renderProps['Widget'] = DownloadField;
+    } else if ((schema == null ? void 0 : schema.type) === 'boolean') {
+      var _val$toString;
 
-            if (!options.loading && !options.items) {
-              handleSearch(options.page);
-            }
-          },
-          "aria-haspopup": "true",
-          "aria-controls": "dropdown-menu",
-          children: [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();
+      renderProps['value'] = (_val$toString = val == null ? void 0 : val.toString()) != null ? _val$toString : renderProps['value'];
+    } else if (val && (schema == null ? void 0 : schema.type) === 'datetime') {
+      renderProps['value'] = new Date(val).toLocaleString();
+    } else if (schema != null && (_schema$items2 = schema.items) != null && _schema$items2.vocabularyName || schema != null && schema.vocabularyName) {
+      renderProps['Widget'] = VocabularyRenderField;
+    } else if ((schema == null ? void 0 : schema.widget) === 'search' || (schema == null ? void 0 : schema.widget) === 'search_list') {
+      renderProps['Widget'] = SearchRenderField;
+      renderProps['value'] = val;
+    }
 
-                if (onChange && !value.includes(item.id)) {
-                  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 : ''
-    })]
-  });
-};
+    return renderProps;
+  };
+
+  return jsx(RenderField, _extends({}, getRenderProps()));
+}
 
 const EditComponent = forwardRef(({
   schema,
@@ -5670,6 +5670,15 @@ function PanelItems() {
         get
       } = Ctx.registry;
       const fnName = get('searchEngineQueryParamsFunction', SearchEngine);
+
+      if (sortParsed === undefined) {
+        const defaultSortValue = Ctx.registry.getDefaultSortValue(Ctx.context['@type'], {
+          key: 'id',
+          direction: 'des'
+        });
+        sortParsed = parser(`_sort_${defaultSortValue.direction}=${defaultSortValue.key}}`);
+      }
+
       const qsParsed = Ctx.client[fnName]({
         path: Ctx.path,
         start: page * PageSize,
@@ -8582,7 +8591,8 @@ const registry = {
   },
   fieldsToFilter: {
     UserManager: ['id', 'email', 'user_name']
-  }
+  },
+  defaultSortValue: {}
 };
 
 const get$2 = (key, param, fallback = undefined) => {
@@ -8642,6 +8652,10 @@ const getFieldsToFilter = (type, fallback) => {
   return registry.fieldsToFilter[type] || fallback;
 };
 
+const getDefaultSortValue = (type, fallback) => {
+  return registry.defaultSortValue[type] || fallback;
+};
+
 const defaultComponent = context => {
   return context.is_folderish ? FolderCtx : ItemCtx;
 };
@@ -8663,6 +8677,7 @@ function useRegistry(data) {
     getProperties,
     getItemsColumn,
     getFieldsToFilter,
+    getDefaultSortValue,
     getSchemas
   };
 }
@@ -12157,5 +12172,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