@guillotinaweb/react-gmi 0.24.1 → 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,
@@ -3098,6 +3173,82 @@ const getDefaultValueEditableField = intl => {
   });
 };
 
+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,
@@ -3166,6 +3317,10 @@ function RenderFieldComponent({
     } 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;
@@ -3244,6 +3399,299 @@ Select.propTypes = {
   vocabularyName: PropTypes.string
 };
 
+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,
@@ -3254,7 +3702,37 @@ const EditComponent = React.forwardRef((_ref, ref) => {
   } = _ref,
       rest = _objectWithoutPropertiesLoose(_ref, ["schema", "val", "setValue", "dataTest", "className"]);
 
-  if ((schema == null ? void 0 : schema.widget) === 'textarea' || (schema == null ? void 0 : schema.widget) === 'richtext') {
+  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,
@@ -3376,14 +3854,18 @@ 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
@@ -3455,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,
@@ -3467,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", {
@@ -3589,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,
@@ -3597,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", {
@@ -3720,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,
@@ -3732,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", {
@@ -4845,7 +5336,7 @@ function SearchVocabularyLabels(props) {
   return null;
 }
 
-const initialState$1 = {
+const initialState$2 = {
   page: 0,
   items: [],
   loading: true,
@@ -4859,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,
@@ -5280,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"
@@ -5289,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"
@@ -5310,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,
@@ -5938,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(() => {
@@ -6002,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();
@@ -7055,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
@@ -7233,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
@@ -7258,7 +7767,7 @@ function GroupCtx() {
         "value": " added to group"
       }]
     }, {
-      user: newUser.id
+      user: newUserId
     }), errorMessage);
   };
 
@@ -7691,7 +8200,7 @@ const registry = {
 
 */
 
-const initialState$3 = {
+const initialState$4 = {
   path: '',
   loading: false,
   context: undefined,
@@ -10593,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
@@ -10742,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,
@@ -10755,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) {
@@ -11128,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, 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, 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 };
+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