@guillotinaweb/react-gmi 0.29.2-alpha.2 → 0.29.2-alpha.3

package/dist/react-gmi.esm.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import React, { createContext, useContext, useState, useCallback, useRef, useEffect, forwardRef, Children, isValidElement, cloneElement, Fragment as Fragment$1, Component, useReducer } from 'react';
+import React, { createContext, useContext, useState, useCallback, useRef, useEffect, forwardRef, Children, isValidElement, cloneElement, Fragment as Fragment$1, useMemo, Component, useReducer } from 'react';
 import usePortal from 'react-useportal';
 import { defineMessages, useIntl, injectIntl, IntlProvider } from 'react-intl';
 import PropTypes from 'prop-types';
@@ -104,6 +104,97 @@ function _createForOfIteratorHelperLoose(o, allowArrayLike) {
   return it.next.bind(it);
 }
 
+var initialState = {
+  path: '',
+  loading: false,
+  context: undefined,
+  flash: {
+    message: undefined,
+    type: undefined
+  },
+  action: {
+    action: undefined,
+    params: undefined
+  },
+  permissions: [],
+  errorStatus: undefined,
+  registry: {},
+  refresh: undefined
+};
+var GuillotinaReducerActionTypes;
+
+(function (GuillotinaReducerActionTypes) {
+  GuillotinaReducerActionTypes["SET_PATH"] = "SET_PATH";
+  GuillotinaReducerActionTypes["SET_CONTEXT"] = "SET_CONTEXT";
+  GuillotinaReducerActionTypes["SET_ERROR"] = "SET_ERROR";
+  GuillotinaReducerActionTypes["SET_FLASH"] = "SET_FLASH";
+  GuillotinaReducerActionTypes["CLEAR_FLASH"] = "CLEAR_FLASH";
+  GuillotinaReducerActionTypes["SET_ACTION"] = "SET_ACTION";
+  GuillotinaReducerActionTypes["CLEAR_ACTION"] = "CLEAR_ACTION";
+  GuillotinaReducerActionTypes["REFRESH"] = "REFRESH";
+  GuillotinaReducerActionTypes["APPLY"] = "APPLY";
+})(GuillotinaReducerActionTypes || (GuillotinaReducerActionTypes = {}));
+
+function guillotinaReducer(state, action) {
+  switch (action.type) {
+    case GuillotinaReducerActionTypes.SET_PATH:
+      return _extends({}, state, {
+        path: action.payload.path,
+        loading: true
+      });
+
+    case GuillotinaReducerActionTypes.SET_CONTEXT:
+      return _extends({}, state, action.payload, {
+        errorStatus: undefined,
+        loading: false
+      });
+
+    case GuillotinaReducerActionTypes.SET_ERROR:
+      return _extends({}, state, {
+        errorStatus: action.payload.errorStatus,
+        loading: false
+      });
+
+    case GuillotinaReducerActionTypes.SET_FLASH:
+      return _extends({}, state, action.payload);
+
+    case GuillotinaReducerActionTypes.CLEAR_FLASH:
+      return _extends({}, state, {
+        flash: {
+          message: undefined,
+          type: undefined
+        }
+      });
+
+    case GuillotinaReducerActionTypes.SET_ACTION:
+      return _extends({}, state, {
+        action: action.payload
+      });
+
+    case GuillotinaReducerActionTypes.CLEAR_ACTION:
+      return _extends({}, state, {
+        action: {
+          action: undefined,
+          params: undefined
+        }
+      });
+
+    case GuillotinaReducerActionTypes.REFRESH:
+      return _extends({}, state, {
+        refresh: Date.now(),
+        loading: !action.payload.transparent
+      });
+
+    case GuillotinaReducerActionTypes.APPLY:
+      return _extends({}, state, {
+        context: _extends({}, state.context, action.payload.context)
+      });
+
+    default:
+      return state;
+  }
+}
+
 var AuthContext = createContext({});
 var ClientContext = createContext(null);
 var Traversal = /*#__PURE__*/function () {
@@ -134,7 +225,7 @@ var Traversal = /*#__PURE__*/function () {
         transparent = _ref2$transparent === void 0 ? false : _ref2$transparent;
 
     this.dispatch({
-      type: 'REFRESH',
+      type: GuillotinaReducerActionTypes.REFRESH,
       payload: {
         transparent: transparent
       }
@@ -144,14 +235,16 @@ var Traversal = /*#__PURE__*/function () {
   _proto.apply = function apply(data) {
     // apply a optimistic update to context
     this.dispatch({
-      type: 'APPLY',
-      payload: data
+      type: GuillotinaReducerActionTypes.APPLY,
+      payload: {
+        context: data
+      }
     });
   };
 
   _proto.flash = function flash(message, type) {
     this.dispatch({
-      type: 'SET_FLASH',
+      type: GuillotinaReducerActionTypes.SET_FLASH,
       payload: {
         flash: {
           message: message,
@@ -168,7 +261,8 @@ var Traversal = /*#__PURE__*/function () {
 
   _proto.clearFlash = function clearFlash() {
     this.dispatch({
-      type: 'CLEAR_FLASH'
+      type: GuillotinaReducerActionTypes.CLEAR_FLASH,
+      payload: {}
     });
   };
 
@@ -178,7 +272,7 @@ var Traversal = /*#__PURE__*/function () {
     }
 
     this.dispatch({
-      type: 'SET_ACTION',
+      type: GuillotinaReducerActionTypes.SET_ACTION,
       payload: {
         action: action,
         params: params
@@ -188,7 +282,8 @@ var Traversal = /*#__PURE__*/function () {
 
   _proto.cancelAction = function cancelAction() {
     this.dispatch({
-      type: 'CLEAR_ACTION'
+      type: GuillotinaReducerActionTypes.CLEAR_ACTION,
+      payload: {}
     });
   };
 
@@ -225,6 +320,10 @@ var Traversal = /*#__PURE__*/function () {
   }, {
     key: "context",
     get: function get() {
+      if (this.state.context === undefined) {
+        throw new Error('Context is not loaded');
+      }
+
       return this.state.context;
     }
   }, {
@@ -247,7 +346,13 @@ function TraversalProvider(_ref3) {
   });
 }
 function useTraversal() {
-  return useContext(TraversalContext);
+  var traversal = useContext(TraversalContext);
+
+  if (!traversal) {
+    throw new Error('useTraversal must be used within a TraversalProvider');
+  }
+
+  return traversal;
 }
 function ClientProvider(_ref4) {
   var children = _ref4.children,
@@ -258,7 +363,13 @@ function ClientProvider(_ref4) {
   });
 }
 function useGuillotinaClient() {
-  return useContext(ClientContext);
+  var client = useContext(ClientContext);
+
+  if (!client) {
+    throw new Error('useGuillotinaClient must be used within a ClientProvider');
+  }
+
+  return client;
 }
 
 var genericMessages = defineMessages({
@@ -785,7 +896,7 @@ function stringToSlug(str) {
 function sleep(ms) {
   return new Promise(function (resolve) {
     setTimeout(function () {
-      resolve(null);
+      resolve();
     }, ms);
   });
 }
@@ -814,8 +925,6 @@ var getActionsObject = function getActionsObject(intl, multiple) {
 };
 
 var Button = function Button(_ref) {
-  var _ref2;
-
   var children = _ref.children,
       _ref$className = _ref.className,
       className = _ref$className === void 0 ? 'is-primary' : _ref$className,
@@ -827,9 +936,7 @@ var Button = function Button(_ref) {
       _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
       dataTest = _ref.dataTest;
-
-  var css = (_ref2 = []).concat.apply(_ref2, ['button'].concat(className.split(' ')));
-
+  var css = [].concat(className.split(' '), ['button']);
   if (loading) css = css.concat('is-loading');
   return jsx("p", {
     className: "control",
@@ -844,6 +951,50 @@ var Button = function Button(_ref) {
   });
 };
 
+var formatDate = function formatDate(str) {
+  var d = new Date(str);
+  var minutes = d.getMinutes() < 10 ? "0" + d.getMinutes() : d.getMinutes();
+  return d.getDate() + "/" + (d.getMonth() + 1) + "/" + d.getFullYear() + " " + d.getHours() + ":" + minutes;
+};
+var get = function get(obj, path, defValue) {
+  var _pathArray$reduce;
+
+  // If path is not defined or it has false value
+  if (!path) return defValue; // Check if path is string or array. Regex : ensure that we do not have '.' and brackets.
+  // Regex explained: https://regexr.com/58j0k
+
+  var pathArray = Array.isArray(path) ? path : path.match(/([^[.\]])+/g); // Find value if exist return otherwise return undefined value;
+
+  if (pathArray === null) return defValue;
+  return (_pathArray$reduce = pathArray.reduce(function (prevObj, key) {
+    return prevObj && prevObj[key];
+  }, obj)) != null ? _pathArray$reduce : defValue;
+};
+function getNewId(id) {
+  if (id === void 0) {
+    id = '';
+  }
+
+  var suffix = '-copy-';
+  var rgx = new RegExp("($|" + suffix + "\\d*)");
+  return stringToSlug(id).replace(rgx, function (r) {
+    var num = parseInt(r.replace(suffix, '') || '0');
+    return "" + suffix + (num + 1);
+  });
+}
+function debounce(callback, wait) {
+  var timer;
+  return function () {
+    var _arguments = arguments;
+    clearTimeout(timer);
+    return new Promise(function (resolve) {
+      timer = setTimeout(function () {
+        return resolve(callback.apply(void 0, [].slice.call(_arguments)));
+      }, wait);
+    });
+  };
+}
+
 function Modal(props) {
   var isActive = props.isActive,
       setActive = props.setActive,
@@ -940,7 +1091,7 @@ function PathTree(_ref2) {
     }), jsxs("form", {
       onSubmit: function onSubmit(e) {
         e.preventDefault();
-        onConfirm(e.target[0].value, e.target);
+        onConfirm(get(e, 'target.0.value', ''), e.target);
       },
       children: [jsx("small", {
         style: {
@@ -972,51 +1123,6 @@ function PathTree(_ref2) {
   });
 }
 
-function useSetState(initialState) {
-  var _useState = useState(initialState),
-      state = _useState[0],
-      set = _useState[1];
-
-  var setState = useCallback(function (patch) {
-    set(function (prevState) {
-      return Object.assign({}, prevState, patch instanceof Function ? patch(prevState) : patch);
-    });
-  }, [set]);
-  return [state, setState];
-}
-
-function _catch(body, recover) {
-  try {
-    var result = body();
-  } catch (e) {
-    return recover(e);
-  }
-
-  if (result && result.then) {
-    return result.then(void 0, recover);
-  }
-
-  return result;
-}
-
-var initial = {
-  loading: undefined,
-  isError: false,
-  errorMessage: undefined,
-  result: undefined,
-  response: undefined
-};
-
-var getErrorMessage = function getErrorMessage(dataError, defaultValue) {
-  if (dataError && dataError.details) {
-    return dataError.details;
-  } else if (dataError && dataError.reason) {
-    return dataError.reason;
-  }
-
-  return defaultValue;
-};
-
 var processResponse = function processResponse(res, ready_body) {
   if (ready_body === void 0) {
     ready_body = true;
@@ -1036,7 +1142,7 @@ var processResponse = function processResponse(res, ready_body) {
       return {
         isError: true,
         loading: false,
-        errorMessage: getErrorMessage(_res$json2, res.status),
+        errorMessage: getErrorMessage(_res$json2, res.status).toString(),
         response: res
       };
     });
@@ -1045,10 +1151,66 @@ var processResponse = function processResponse(res, ready_body) {
   }
 };
 
-var patch = function patch(setState, Ctx) {
+var getErrorMessage = function getErrorMessage(dataError, defaultValue) {
+  if (dataError && dataError.details) {
+    return dataError.details;
+  } else if (dataError && dataError.reason) {
+    return dataError.reason;
+  }
+
+  return defaultValue;
+};
+
+/**
+ * Do setState like react class component.
+ */
+
+function useSetState(initialState) {
+  var _useState = useState(initialState),
+      state = _useState[0],
+      setState = _useState[1]; // Function which accepts a partial state to merge
+
+
+  var setCustomState = useCallback(function (newPartialState) {
+    try {
+      setState(function (prevState) {
+        return _extends({}, prevState, newPartialState);
+      });
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error(error);
+    }
+  }, []); // Return
+
+  return [state, setCustomState];
+} // **** Export Default **** //
+
+function _catch(body, recover) {
+  try {
+    var result = body();
+  } catch (e) {
+    return recover(e);
+  }
+
+  if (result && result.then) {
+    return result.then(void 0, recover);
+  }
+
+  return result;
+}
+
+var initial = {
+  loading: undefined,
+  isError: false,
+  errorMessage: undefined,
+  result: undefined,
+  response: undefined
+};
+
+function patch(setState, Ctx) {
   return function (data, endpoint, body) {
-    if (endpoint === void 0) {
-      endpoint = undefined;
+    if (data === void 0) {
+      data = {};
     }
 
     if (body === void 0) {
@@ -1056,7 +1218,7 @@ var patch = function patch(setState, Ctx) {
     }
 
     try {
-      function _temp5() {
+      function _temp3() {
         setState(newState);
         return newState;
       }
@@ -1066,7 +1228,7 @@ var patch = function patch(setState, Ctx) {
       });
       var newState = {};
 
-      var _temp6 = _catch(function () {
+      var _temp4 = _catch(function () {
         var path = endpoint ? "" + Ctx.path + endpoint : Ctx.path;
         return Promise.resolve(Ctx.client.patch(path, data)).then(function (res) {
           return Promise.resolve(processResponse(res, body)).then(function (_processResponse) {
@@ -1081,29 +1243,25 @@ var patch = function patch(setState, Ctx) {
         };
       });
 
-      return Promise.resolve(_temp6 && _temp6.then ? _temp6.then(_temp5) : _temp5(_temp6));
+      return Promise.resolve(_temp4 && _temp4.then ? _temp4.then(_temp3) : _temp3(_temp4));
     } catch (e) {
       return Promise.reject(e);
     }
   };
-};
+}
 
-var del = function del(setState, Ctx) {
+function del(setState, Ctx) {
   return function (data, endpoint, body) {
     if (data === void 0) {
       data = {};
     }
 
-    if (endpoint === void 0) {
-      endpoint = undefined;
-    }
-
     if (body === void 0) {
       body = false;
     }
 
     try {
-      function _temp9() {
+      function _temp7() {
         setState(newState);
         return newState;
       }
@@ -1113,7 +1271,7 @@ var del = function del(setState, Ctx) {
       });
       var newState = {};
 
-      var _temp10 = _catch(function () {
+      var _temp8 = _catch(function () {
         var path = endpoint ? "" + Ctx.path + endpoint : Ctx.path;
         return Promise.resolve(Ctx.client.delete(path, data)).then(function (res) {
           return Promise.resolve(processResponse(res, body)).then(function (_processResponse2) {
@@ -1128,17 +1286,17 @@ var del = function del(setState, Ctx) {
         };
       });
 
-      return Promise.resolve(_temp10 && _temp10.then ? _temp10.then(_temp9) : _temp9(_temp10));
+      return Promise.resolve(_temp8 && _temp8.then ? _temp8.then(_temp7) : _temp7(_temp8));
     } catch (e) {
       return Promise.reject(e);
     }
   };
-};
+}
 
-var post = function post(setState, Ctx) {
+function post(setState, Ctx) {
   return function (data, endpoint, body) {
-    if (endpoint === void 0) {
-      endpoint = undefined;
+    if (data === void 0) {
+      data = {};
     }
 
     if (body === void 0) {
@@ -1146,7 +1304,7 @@ var post = function post(setState, Ctx) {
     }
 
     try {
-      function _temp13() {
+      function _temp11() {
         setState(newState);
         return newState;
       }
@@ -1156,7 +1314,7 @@ var post = function post(setState, Ctx) {
       });
       var newState = {};
 
-      var _temp14 = _catch(function () {
+      var _temp12 = _catch(function () {
         var path = endpoint ? "" + Ctx.path + endpoint : Ctx.path;
         return Promise.resolve(Ctx.client.post(path, data)).then(function (res) {
           return Promise.resolve(processResponse(res, body)).then(function (_processResponse3) {
@@ -1171,21 +1329,17 @@ var post = function post(setState, Ctx) {
         };
       });
 
-      return Promise.resolve(_temp14 && _temp14.then ? _temp14.then(_temp13) : _temp13(_temp14));
+      return Promise.resolve(_temp12 && _temp12.then ? _temp12.then(_temp11) : _temp11(_temp12));
     } catch (e) {
       return Promise.reject(e);
     }
   };
-};
+}
 
-var get = function get(setState, Ctx) {
+function get$1(setState, Ctx) {
   return function (endpoint) {
-    if (endpoint === void 0) {
-      endpoint = undefined;
-    }
-
     try {
-      function _temp17() {
+      function _temp15() {
         setState(newState);
         return newState;
       }
@@ -1195,7 +1349,7 @@ var get = function get(setState, Ctx) {
       });
       var newState = {};
 
-      var _temp18 = _catch(function () {
+      var _temp16 = _catch(function () {
         var path = endpoint ? "" + Ctx.path + endpoint : Ctx.path;
         return Promise.resolve(Ctx.client.get(path)).then(function (res) {
           return Promise.resolve(processResponse(res, true)).then(function (_processResponse4) {
@@ -1210,12 +1364,16 @@ var get = function get(setState, Ctx) {
         };
       });
 
-      return Promise.resolve(_temp18 && _temp18.then ? _temp18.then(_temp17) : _temp17(_temp18));
+      return Promise.resolve(_temp16 && _temp16.then ? _temp16.then(_temp15) : _temp15(_temp16));
     } catch (e) {
       return Promise.reject(e);
     }
   };
-};
+} // const get = (
+//   setState: (value: Partial<State>) => void,
+//   Ctx: Traversal
+// ) =>
+
 
 function useCrudContext() {
   var Ctx = useTraversal();
@@ -1229,7 +1387,7 @@ function useCrudContext() {
     patch: patch(setState, Ctx),
     del: del(setState, Ctx),
     post: post(setState, Ctx),
-    get: get(setState, Ctx)
+    get: get$1(setState, Ctx)
   });
 }
 
@@ -1277,9 +1435,6 @@ function AddItem(props) {
     children: jsx(Form, {
       loading: loading,
       onSubmit: doSubmit,
-      onError: function onError(err) {
-        return console.log(err);
-      },
       actionName: 'Add ' + type,
       title: 'Add ' + type,
       type: type,
@@ -1289,7 +1444,7 @@ function AddItem(props) {
 }
 
 var Permissions = ['guillotina.AddContent', 'guillotina.ModifyContent', 'guillotina.ViewContent', 'guillotina.DeleteContent', 'guillotina.AccessContent', 'guillotina.SeePermissions', 'guillotina.ChangePermissions', 'guillotina.MoveContent', 'guillotina.DuplicateContent', 'guillotina.ReadConfiguration', 'guillotina.RegisterConfigurations', 'guillotina.WriteConfiguration', 'guillotina.ManageAddons', 'guillotina.swagger.View'];
-var Config = {
+var defaultConfig = {
   DisabledTypes: ['UserManager', 'GroupManager'],
   PageSize: 10,
   DelayActions: 200,
@@ -1300,21 +1455,41 @@ var Config = {
     return (schema == null ? void 0 : schema.widget) === 'file' || (schema == null ? void 0 : schema.widget) === 'select' || (schema == null ? void 0 : schema.type) === 'array';
   }
 };
-var calculated = Object.assign({}, Config);
-
-var addConfig = function addConfig(additional, original) {
-  var rest = Object.assign({}, original);
-  Object.keys(additional).forEach(function (item) {
-    if (typeof Config[item] === 'object' && Array.isArray(Config[item])) {
-      rest[item] = [].concat(Config[item], additional[item]);
-    } else if (typeof Config[item] === 'object') {
-      rest[item] = Object.assign({}, Config[item], additional[item]);
+var calculated = Object.assign({}, defaultConfig);
+
+function addConfig(updates, currentConfig) {
+  var updatedConfig = _extends({}, currentConfig);
+
+  Object.entries(updates).forEach(function (_ref) {
+    var key = _ref[0],
+        value = _ref[1];
+    var currentKey = key;
+    var currentValue = currentConfig[currentKey];
+
+    if (Array.isArray(value) && Array.isArray(currentValue)) {
+      var _extends2;
+
+      // Correctly type the array concatenation
+      updatedConfig = _extends({}, updatedConfig, (_extends2 = {}, _extends2[currentKey] = [].concat(currentValue, value), _extends2));
+    } else if (isPlainObject(value) && isPlainObject(currentValue)) {
+      var _extends3;
+
+      // Correctly type the object merging
+      updatedConfig = _extends({}, updatedConfig, (_extends3 = {}, _extends3[currentKey] = _extends({}, currentValue, value), _extends3));
     } else {
-      rest[item] = additional[item];
+      var _extends4;
+
+      // Directly assign all other types
+      updatedConfig = _extends({}, updatedConfig, (_extends4 = {}, _extends4[currentKey] = value, _extends4));
     }
   });
-  return rest;
-};
+  return updatedConfig;
+} // Helper function to check if a value is a plain object (and not a React node, etc.)
+
+
+function isPlainObject(value) {
+  return Object.prototype.toString.call(value) === '[object Object]';
+}
 
 function useConfig(cfg) {
   if (cfg === void 0) {
@@ -1338,7 +1513,7 @@ function RemoveItems(props) {
       setLoading(true);
       var actions = items.map(function (item) {
         try {
-          return Promise.resolve(Ctx.client.delete("" + Ctx.path + item['@name'])).then(function (res) {
+          return Promise.resolve(Ctx.client.delete("" + Ctx.path + item.id, {})).then(function (res) {
             var _temp = function () {
               if (!res.ok) {
                 return Promise.resolve(res.json()).then(function (err) {
@@ -1384,9 +1559,9 @@ function RemoveItems(props) {
 
   var _props$items = props.items,
       items = _props$items === void 0 ? [] : _props$items;
-  var last = items[items.length - 1]['@name'];
+  var last = items[items.length - 1].id;
   var itemsNames = items.map(function (item) {
-    return item['@name'];
+    return item.id;
   }).join(', ').replace(", " + last, " and " + last);
   return jsx(Confirm, {
     loading: loading,
@@ -1413,7 +1588,7 @@ var Checkbox = function Checkbox(_ref) {
       dataTest = _ref.dataTest;
   var inputRef = useRef(null);
 
-  var _useState = useState(checked),
+  var _useState = useState(!!checked),
       state = _useState[0],
       setState = _useState[1];
 
@@ -1432,13 +1607,13 @@ var Checkbox = function Checkbox(_ref) {
     className: "field",
     children: jsxs("label", {
       htmlFor: id,
-      className: classnames(['checkbox', className]),
+      className: classnames(['checkbox', className != null ? className : '']),
       children: [jsx("input", {
         ref: inputRef,
         disabled: disabled || loading,
         id: id,
         type: "checkbox",
-        className: classnames(['checkbox', classNameInput]),
+        className: classnames(['checkbox', classNameInput != null ? classNameInput : '']),
         checked: state,
         onChange: updateState,
         "data-test": dataTest
@@ -1476,7 +1651,7 @@ var applyValidators = function applyValidators(value, validators) {
   return result;
 };
 
-var useInput = function useInput(onChange, value, validator) {
+var useInput = function useInput(onChange, value, validators) {
   var _useState = useState({
     hasError: false,
     value: value
@@ -1485,7 +1660,7 @@ var useInput = function useInput(onChange, value, validator) {
       setState = _useState[1];
 
   var onUpdate = function onUpdate(ev) {
-    var value = ev && ev.target ? ev.target.value : ev ? ev : '';
+    var value = ev && ev.target ? ev.target.value : '';
     setState({
       value: value,
       hasError: false
@@ -1494,7 +1669,7 @@ var useInput = function useInput(onChange, value, validator) {
   };
 
   var onBlur = function onBlur() {
-    var hasError = applyValidators(state.value, validator) === false;
+    var hasError = applyValidators(state.value, validators) === false;
     if (hasError) setState({
       value: state.value,
       hasError: hasError
@@ -1627,10 +1802,10 @@ var Input = forwardRef(function (_ref, ref) {
       dataTest = _ref$dataTest === void 0 ? 'testInput' : _ref$dataTest,
       disabled = _ref.disabled,
       onKeyUp = _ref.onKeyUp;
-  var validatorFn = null;
+  var validatorFn = [];
 
   if (required) {
-    validatorFn = Array.isArray(validator) ? validator.push(notEmpty) : [validator, notEmpty];
+    validatorFn = Array.isArray(validator) ? [].concat(validator, [notEmpty]) : [validator, notEmpty];
   }
 
   var _useInput = useInput(onChange, value != null ? value : '', validatorFn),
@@ -1645,15 +1820,15 @@ var Input = forwardRef(function (_ref, ref) {
       setMounted = _useState2[1]; // eslint-disable-next-line
 
 
-  ref = ref || useRef();
+  var newRef = ref || useRef();
   useEffect(function () {
     setMounted(true);
   }, []);
   useEffect(function () {
-    if (autofocus && !error && ref != null && typeof ref !== 'function') {
-      ref.current.focus();
+    if (autofocus && !error && newRef != null && typeof newRef !== 'function' && newRef.current) {
+      newRef.current.focus();
     }
-  }, [mounted, autofocus, ref, error]);
+  }, [mounted, autofocus, newRef, error]);
   var theError = state.hasError ? errorMessage || 'invalid field' : '';
   var statusClasses = state.hasError ? 'is-danger' : '';
 
@@ -1694,7 +1869,8 @@ Input.displayName = 'Input';
 
 var Icon = function Icon(_ref) {
   var icon = _ref.icon,
-      className = _ref.className,
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? '' : _ref$className,
       align = _ref.align;
   var addClass = className ? className.split(' ') : [className];
   align = align || 'is-right';
@@ -1805,7 +1981,7 @@ function FormBuilder(_ref) {
       remotes = _ref$remotes === void 0 ? {} : _ref$remotes,
       _ref$submitButton = _ref.submitButton,
       submitButton = _ref$submitButton === void 0 ? true : _ref$submitButton;
-  var ref = useRef();
+  var ref = useRef(null);
   var properties = schema.properties,
       required = schema.required;
   var values = Object.assign({}, formData || {}); // build initial state
@@ -1818,7 +1994,7 @@ function FormBuilder(_ref) {
     initialState[element] = values[element] || undefined;
   }); // Register remotes
 
-  if (!ref.current) {
+  if (ref.current === null) {
     ref.current = {};
     Object.keys(remotes).forEach(function (item) {
       return ref.current[item] = remotes[item];
@@ -1835,15 +2011,16 @@ function FormBuilder(_ref) {
   ref.current = ref.current || {};
 
   var onUpdate = function onUpdate(field) {
-    return function (ev) {
-      ref.current[field] = ev.target ? ev.target.value : ev.value || ev;
+    return function (value) {
+      ref.current[field] = value;
     };
   };
 
   var GetTag = function GetTag(_ref2) {
     var field = _ref2.field;
     var property = properties[field];
-    var Tag = formComponents[property.widget || property.type];
+    var key = property.widget || property.type;
+    var Tag = formComponents[key];
     var props = {
       value: initialState[field],
       onChange: onUpdate(field),
@@ -1858,7 +2035,6 @@ function FormBuilder(_ref) {
       props.placeholder += ' *';
     }
 
-    Tag.displayName = field + "Field";
     return jsx(Tag, _extends({}, props));
   };
 
@@ -1927,9 +2103,13 @@ var Select = forwardRef(function (_ref, ref) {
         selectValue = selectValue.concat([ev.target.selectedOptions[i].value]);
       }
 
-      onChange(selectValue);
+      if (onChange) {
+        onChange(selectValue);
+      }
     } else {
-      onChange(ev.target.value);
+      if (onChange) {
+        onChange(ev.target.value);
+      }
     }
   };
 
@@ -1978,19 +2158,151 @@ var Select = forwardRef(function (_ref, ref) {
 });
 Select.displayName = 'Select';
 
-// https://github.com/molefrog/wouter
+function _catch$1(body, recover) {
+  try {
+    var result = body();
+  } catch (e) {
+    return recover(e);
+  }
 
-var setURLParams = function setURLParams(p) {
-  return window.history.pushState(0, '0', '' + '?' + p.toString().replace(/%2F/g, '/'));
-};
+  if (result && result.then) {
+    return result.then(void 0, recover);
+  }
 
-var clean = function clean(to) {
-  var current = new URLSearchParams();
-  Object.keys(to).forEach(function (_key) {
-    return current.set(_key, to[_key]);
-  });
-  setURLParams(current);
-};
+  return result;
+}
+
+function useVocabulary(vocabularyName, path) {
+  var traversal = useTraversal();
+
+  var _useSetState = useSetState({
+    data: undefined,
+    loading: false,
+    error: undefined
+  }),
+      vocabulary = _useSetState[0],
+      setVocabulary = _useSetState[1];
+
+  var getPath = function getPath() {
+    if (path) return path;
+    return traversal.path + "@vocabularies/" + vocabularyName;
+  };
+
+  useEffect(function () {
+    var getVocabulary = function getVocabulary() {
+      try {
+        var _temp3 = function () {
+          if (vocabularyName && vocabulary.data === undefined && !vocabulary.loading) {
+            var _temp4 = _catch$1(function () {
+              setVocabulary({
+                loading: true
+              });
+              return Promise.resolve(traversal.client.get(getPath())).then(function (data) {
+                return Promise.resolve(data.json()).then(function (dataJson) {
+                  setVocabulary({
+                    loading: false,
+                    data: dataJson
+                  });
+                });
+              });
+            }, function (err) {
+              setVocabulary({
+                loading: false,
+                error: err,
+                data: undefined
+              });
+            });
+
+            if (_temp4 && _temp4.then) return _temp4.then(function () {});
+          }
+        }();
+
+        return Promise.resolve(_temp3 && _temp3.then ? _temp3.then(function () {}) : void 0);
+      } catch (e) {
+        return Promise.reject(e);
+      }
+    };
+
+    getVocabulary();
+  }, [vocabularyName, vocabulary, path]);
+  return vocabulary;
+}
+
+var SelectVocabulary = forwardRef(function (_ref, ref) {
+  var vocabularyName = _ref.vocabularyName,
+      className = _ref.className,
+      classWrap = _ref.classWrap,
+      val = _ref.val,
+      dataTest = _ref.dataTest,
+      multiple = _ref.multiple,
+      onChange = _ref.onChange,
+      id = _ref.id,
+      placeholder = _ref.placeholder;
+  var vocabulary = useVocabulary(vocabularyName);
+
+  var getOptions = function getOptions() {
+    if (get(vocabulary, 'data.items', null)) {
+      var _vocabulary$data$item, _vocabulary$data;
+
+      var vocData = ((_vocabulary$data$item = vocabulary == null ? void 0 : (_vocabulary$data = vocabulary.data) == null ? void 0 : _vocabulary$data.items) != null ? _vocabulary$data$item : []).map(function (item) {
+        return {
+          text: item.title,
+          value: item.token
+        };
+      });
+      return vocData;
+    }
+
+    return [];
+  };
+
+  var getProps = function getProps() {
+    if (multiple) {
+      var currentValue = val || [];
+      return {
+        multiple: true,
+        size: 5,
+        value: currentValue,
+        options: getOptions()
+      };
+    }
+
+    return {
+      value: val != null ? val : '',
+      appendDefault: true,
+      options: getOptions()
+    };
+  };
+
+  if (vocabulary.data === undefined || vocabulary.loading) {
+    return 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';
+
+// https://github.com/molefrog/wouter
+
+var setURLParams = function setURLParams(p) {
+  return window.history.pushState(0, '0', '' + '?' + p.toString().replace(/%2F/g, '/'));
+};
+
+var clean = function clean(to) {
+  var current = new URLSearchParams();
+  Object.keys(to).forEach(function (_key) {
+    return current.set(_key, to[_key]);
+  });
+  setURLParams(current);
+};
 
 var useLocation = function useLocation() {
   var _useState = useState(currentSearchParams()),
@@ -2056,19 +2368,30 @@ var patched = 0;
 
 var patchHistoryEvents = function patchHistoryEvents() {
   if (patched) return;
-  ['pushState', 'replaceState'].map(function (type) {
-    var original = window.history[type];
+  var originalPushState = window.history.pushState;
 
-    window.history[type] = function () {
-      var args = [].slice.call(arguments);
-      var result = original.apply(this, args); // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  window.history.pushState = function () {
+    var args = [].slice.call(arguments);
+    var result = originalPushState.apply(this, args); // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+    var event = new Event('pushState');
+    event.arguments = args;
+    dispatchEvent(event);
+    return result;
+  };
+
+  var originalReplaceState = window.history.replaceState;
+
+  window.history.replaceState = function () {
+    var args = [].slice.call(arguments);
+    var result = originalReplaceState.apply(this, args); // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+    var event = new Event('replaceState');
+    event.arguments = args;
+    dispatchEvent(event);
+    return result;
+  };
 
-      var event = new Event(type);
-      event.arguments = args;
-      dispatchEvent(event);
-      return result;
-    };
-  });
   return patched = 1;
 };
 
@@ -2123,7 +2446,7 @@ function TdLink(_ref) {
       children = _ref.children,
       _ref$style = _ref.style,
       style = _ref$style === void 0 ? {} : _ref$style;
-  var link = useRef();
+  var link = useRef(null);
 
   function onClick() {
     if (link && link.current) {
@@ -2230,15 +2553,7 @@ var RestClient = /*#__PURE__*/function () {
 
   var _proto = RestClient.prototype;
 
-  _proto.request = function request(path, data, headers) {
-    if (data === void 0) {
-      data = undefined;
-    }
-
-    if (headers === void 0) {
-      headers = undefined;
-    }
-
+  _proto.request = function request(path, data, headers, signal) {
     try {
       var _this2 = this;
 
@@ -2254,9 +2569,18 @@ var RestClient = /*#__PURE__*/function () {
         path = "/" + path;
       }
 
-      data = data || {};
-      data.headers = headers || _this2.getHeaders();
-      return Promise.resolve(fetch("" + _this2.url + path, data));
+      var dataRequest = data || {};
+      dataRequest.headers = _this2.getHeaders();
+
+      if (headers) {
+        dataRequest.headers = _extends({}, dataRequest.headers, headers);
+      }
+
+      if (signal) {
+        dataRequest.signal = signal;
+      }
+
+      return Promise.resolve(fetch("" + _this2.url + path, dataRequest));
     } catch (e) {
       return Promise.reject(e);
     }
@@ -2264,12 +2588,12 @@ var RestClient = /*#__PURE__*/function () {
 
   _proto.getHeaders = function getHeaders() {
     var authToken = this.auth.getToken();
-    if (!authToken) return {};
-    return {
-      Accept: 'application/json',
-      'Content-Type': 'application/json',
-      Authorization: 'Bearer ' + authToken
-    };
+    var headersInit = {};
+    if (!authToken) return headersInit;
+    headersInit.Accept = 'application/json';
+    headersInit['Content-Type'] = 'application/json';
+    headersInit.Authorization = 'Bearer ' + authToken;
+    return headersInit;
   };
 
   _proto.post = function post(path, data) {
@@ -2285,11 +2609,11 @@ var RestClient = /*#__PURE__*/function () {
     }
   };
 
-  _proto.get = function get(path) {
+  _proto.get = function get(path, signal) {
     try {
       var _this6 = this;
 
-      return Promise.resolve(_this6.request(path));
+      return Promise.resolve(_this6.request(path, undefined, undefined, signal));
     } catch (e) {
       return Promise.reject(e);
     }
@@ -2327,24 +2651,20 @@ var RestClient = /*#__PURE__*/function () {
 
       var headers = _this12.getHeaders();
 
-      delete headers['Content-Type'];
-      headers['Content-Type'] = data['content-type'];
-      headers['X-UPLOAD-FILENAME'] = data.filename;
-      headers['Content-Encoding'] = 'base64';
+      var newHeaders = {};
+      newHeaders['Content-Type'] = data['content-type'];
+      newHeaders['X-UPLOAD-FILENAME'] = data.filename;
+      newHeaders['Content-Encoding'] = 'base64';
       return Promise.resolve(_this12.request(path, {
         method: 'PATCH',
         body: data.data
-      }, headers));
+      }, _extends({}, headers, newHeaders)));
     } catch (e) {
       return Promise.reject(e);
     }
   };
 
   _proto.delete = function _delete(path, data) {
-    if (data === void 0) {
-      data = undefined;
-    }
-
     try {
       var _this14 = this;
 
@@ -2485,6 +2805,14 @@ var GuillotinaClient = /*#__PURE__*/function () {
     }
   };
 
+  _proto.getQueryParamsSearchFunction = function getQueryParamsSearchFunction(name) {
+    if (name === 'getQueryParamsElasticsearch') {
+      return this.getQueryParamsElasticsearch;
+    }
+
+    return this.getQueryParamsPostresql;
+  };
+
   _proto.getQueryParamsPostresql = function getQueryParamsPostresql(_ref) {
     var _ref$start = _ref.start,
         start = _ref$start === void 0 ? 0 : _ref$start,
@@ -2576,7 +2904,7 @@ var GuillotinaClient = /*#__PURE__*/function () {
       label: 'id/name',
       key: 'title',
       isSortable: true,
-      child: function child(m, navigate, search) {
+      child: function child(m, _navigate, search) {
         return jsxs(TdLink, {
           model: m,
           children: [m.name, search && jsxs(React.Fragment, {
@@ -2614,12 +2942,15 @@ var GuillotinaClient = /*#__PURE__*/function () {
   ;
 
   _proto.applyCompat = function applyCompat(data) {
-    data.member = data.items;
-    data.items_count = data.items_total;
-    return data;
+    var result = _extends({}, data, {
+      member: data.items,
+      items_count: data.items_total
+    });
+
+    return result;
   };
 
-  _proto.search = function search(path, params, container, prepare) {
+  _proto.search = function search(path, params, container, prepare, signal) {
     if (container === void 0) {
       container = false;
     }
@@ -2641,7 +2972,7 @@ var GuillotinaClient = /*#__PURE__*/function () {
 
       var query = prepare ? toQueryString(params) : params;
       var url = path + "@search?" + query;
-      return Promise.resolve(_this7.rest.get(url)).then(function (res) {
+      return Promise.resolve(_this7.rest.get(url, signal)).then(function (res) {
         return Promise.resolve(res.json()).then(function (data) {
           return _this7.applyCompat(data);
         });
@@ -2853,23 +3184,53 @@ var GuillotinaClient = /*#__PURE__*/function () {
       var users = _this37.getUsers(path);
 
       return Promise.resolve(Promise.all([groups, users])).then(function (_ref3) {
-        var gr = _ref3[0],
-            usr = _ref3[1];
+        var responseGroups = _ref3[0],
+            responseUsers = _ref3[1];
 
-        function _temp6(_gr$json) {
-          function _temp5(_usr$json) {
+        function _temp8() {
+          function _temp6() {
             return {
-              groups: _gr$json,
-              users: _usr$json
+              groups: groupsData,
+              users: usersData
             };
           }
 
-          var _usr$ok = usr.ok;
-          return _usr$ok ? Promise.resolve(usr.json()).then(_temp5) : _temp5([]);
+          var _temp5 = function () {
+            if (responseUsers) {
+              return Promise.resolve(responseUsers.json()).then(function (usersDataResponse) {
+                usersData = usersDataResponse.map(function (user) {
+                  return {
+                    '@name': user.id,
+                    user_roles: user.roles,
+                    fullname: user.fullname,
+                    email: user.email
+                  };
+                });
+              });
+            }
+          }();
+
+          return _temp5 && _temp5.then ? _temp5.then(_temp6) : _temp6(_temp5);
         }
 
-        var _gr$ok = gr.ok;
-        return _gr$ok ? Promise.resolve(gr.json()).then(_temp6) : _temp6([]);
+        var groupsData = [];
+        var usersData = [];
+
+        var _temp7 = function () {
+          if (responseGroups.ok) {
+            return Promise.resolve(responseGroups.json()).then(function (groupsDataResponse) {
+              groupsData = groupsDataResponse.map(function (group) {
+                return {
+                  '@name': group.id,
+                  user_roles: group.roles,
+                  users: group.users
+                };
+              });
+            });
+          }
+        }();
+
+        return _temp7 && _temp7.then ? _temp7.then(_temp8) : _temp8(_temp7);
       });
     } catch (e) {
       return Promise.reject(e);
@@ -2911,7 +3272,7 @@ var GuillotinaClient = /*#__PURE__*/function () {
     try {
       var _this43 = this;
 
-      function _temp10() {
+      function _temp12() {
         return cacheTypes[path];
       }
 
@@ -2919,10 +3280,10 @@ var GuillotinaClient = /*#__PURE__*/function () {
         path = path.slice(1);
       }
 
-      var _temp11 = function () {
+      var _temp13 = function () {
         if (!cacheTypes[path]) {
           return Promise.resolve(_this43.rest.get(path + '@addable-types')).then(function (types) {
-            var _temp7 = function () {
+            var _temp9 = function () {
               if (types.status === 401 || types.status === 404) {
                 cacheTypes[path] = [];
               } else {
@@ -2932,12 +3293,12 @@ var GuillotinaClient = /*#__PURE__*/function () {
               }
             }();
 
-            if (_temp7 && _temp7.then) return _temp7.then(function () {});
+            if (_temp9 && _temp9.then) return _temp9.then(function () {});
           });
         }
       }();
 
-      return Promise.resolve(_temp11 && _temp11.then ? _temp11.then(_temp10) : _temp10(_temp11));
+      return Promise.resolve(_temp13 && _temp13.then ? _temp13.then(_temp12) : _temp12(_temp13));
     } catch (e) {
       return Promise.reject(e);
     }
@@ -2949,17 +3310,24 @@ function getClient(url, container, auth) {
   return new GuillotinaClient(new RestClient(url, container, auth), container === '/');
 }
 var lightFileReader = function lightFileReader(file) {
-  return new Promise(function (resolve) {
+  return new Promise(function (resolve, reject) {
     var reader = new FileReader();
     reader.readAsArrayBuffer(file);
 
     reader.onloadend = function (e) {
-      var fileData = e.target.result;
-      resolve({
-        filename: file.name.normalize('NFD').replace(/[\u0300-\u036f]/g, ''),
-        data: fileData,
-        'content-type': file.type
-      });
+      var _e$target;
+
+      var fileData = e == null ? void 0 : (_e$target = e.target) == null ? void 0 : _e$target.result;
+
+      if (fileData) {
+        resolve({
+          filename: file.name.normalize('NFD').replace(/[\u0300-\u036f]/g, ''),
+          data: fileData,
+          'content-type': file.type
+        });
+      } else {
+        reject('Error reading file');
+      }
     };
   });
 };
@@ -2990,9 +3358,15 @@ function FileUpload(_ref) {
 
   var changed = function changed(event) {
     try {
-      return Promise.resolve(lightFileReader(event.target.files[0])).then(function (fileToUpload) {
-        onChange(fileToUpload);
-      });
+      var _temp2 = function () {
+        if (event.target.files) {
+          return Promise.resolve(lightFileReader(event.target.files[0])).then(function (fileToUpload) {
+            onChange(fileToUpload);
+          });
+        }
+      }();
+
+      return Promise.resolve(_temp2 && _temp2.then ? _temp2.then(function () {}) : void 0);
     } catch (e) {
       return Promise.reject(e);
     }
@@ -3083,12 +3457,12 @@ Textarea.displayName = 'Textarea';
 
 var defaultEvents = ['mousedown', 'touchstart'];
 
-var on = function on(obj) {
-  return obj.addEventListener.apply(obj, [].slice.call(arguments, 1));
+var on = function on(obj, type, handler) {
+  return obj.addEventListener(type, handler);
 };
 
-var off = function off(obj) {
-  return obj.removeEventListener.apply(obj, [].slice.call(arguments, 1));
+var off = function off(obj, type, handler) {
+  return obj.removeEventListener(type, handler);
 };
 
 function useClickAway(ref, onClickAway, events) {
@@ -3120,56 +3494,7 @@ function useClickAway(ref, onClickAway, events) {
   }, [events, ref]);
 }
 
-var formatDate = function formatDate(str) {
-  var d = new Date(str);
-  var minutes = d.getMinutes() < 10 ? "0" + d.getMinutes() : d.getMinutes();
-  return d.getDate() + "/" + (d.getMonth() + 1) + "/" + d.getFullYear() + " " + d.getHours() + ":" + minutes;
-};
-var get$1 = function get(obj, path, defValue) {
-  var _pathArray$reduce;
-
-  // If path is not defined or it has false value
-  if (!path) return undefined; // Check if path is string or array. Regex : ensure that we do not have '.' and brackets.
-  // Regex explained: https://regexr.com/58j0k
-
-  var pathArray = Array.isArray(path) ? path : path.match(/([^[.\]])+/g); // Find value if exist return otherwise return undefined value;
-
-  return (_pathArray$reduce = pathArray.reduce(function (prevObj, key) {
-    return prevObj && prevObj[key];
-  }, obj)) != null ? _pathArray$reduce : defValue;
-};
-function getNewId(id) {
-  if (id === void 0) {
-    id = '';
-  }
-
-  var suffix = '-copy-';
-  var rgx = new RegExp("($|" + suffix + "\\d*)");
-  return stringToSlug(id).replace(rgx, function (r) {
-    var num = parseInt(r.replace(suffix, '') || '0');
-    return "" + suffix + (num + 1);
-  });
-}
-
-function debounce(func, wait) {
-  var timeout;
-  return function () {
-    // eslint-disable-next-line @typescript-eslint/no-this-alias
-    var context = this; // eslint-disable-next-line prefer-rest-params
-
-    var args = arguments;
-
-    var later = function later() {
-      timeout = null;
-      func.apply(context, args);
-    };
-
-    clearTimeout(timeout);
-    timeout = setTimeout(later, wait);
-  };
-}
-
-var initialState = {
+var initialState$1 = {
   page: 0,
   items: undefined,
   loading: false,
@@ -3179,10 +3504,9 @@ var SearchInput = function SearchInput(_ref) {
   var onChange = _ref.onChange,
       error = _ref.error,
       errorZoneClassName = _ref.errorZoneClassName,
-      _ref$traversal = _ref.traversal,
-      traversal = _ref$traversal === void 0 ? null : _ref$traversal,
+      traversal = _ref.traversal,
       _ref$path = _ref.path,
-      path = _ref$path === void 0 ? null : _ref$path,
+      path = _ref$path === void 0 ? undefined : _ref$path,
       _ref$qs = _ref.qs,
       qs = _ref$qs === void 0 ? [] : _ref$qs,
       _ref$queryCondition = _ref.queryCondition,
@@ -3197,14 +3521,14 @@ var SearchInput = function SearchInput(_ref) {
       _ref$dataTestItem = _ref.dataTestItem,
       dataTestItem = _ref$dataTestItem === void 0 ? 'searchInputItemTest' : _ref$dataTestItem,
       _ref$renderTextItemOp = _ref.renderTextItemOption,
-      renderTextItemOption = _ref$renderTextItemOp === void 0 ? null : _ref$renderTextItemOp,
+      renderTextItemOption = _ref$renderTextItemOp === void 0 ? undefined : _ref$renderTextItemOp,
       _ref$typeNameQuery = _ref.typeNameQuery,
-      typeNameQuery = _ref$typeNameQuery === void 0 ? null : _ref$typeNameQuery,
+      typeNameQuery = _ref$typeNameQuery === void 0 ? undefined : _ref$typeNameQuery,
       _ref$labelProperty = _ref.labelProperty,
       labelProperty = _ref$labelProperty === void 0 ? 'id' : _ref$labelProperty;
   var intl = useIntl();
 
-  var _useSetState = useSetState(initialState),
+  var _useSetState = useSetState(initialState$1),
       options = _useSetState[0],
       setOptions = _useSetState[1];
 
@@ -3258,7 +3582,7 @@ var SearchInput = function SearchInput(_ref) {
           var searchTermParsed = ["id", value];
           var getSearch = traversal.registry.get;
           var fnName = getSearch('searchEngineQueryParamsFunction', SearchEngine);
-          var qsParsed = traversal.client[fnName]({
+          var qsParsed = traversal.client.getQueryParamsSearchFunction(fnName)({
             path: traversal.path,
             start: 0,
             pageSize: PageSize,
@@ -3276,7 +3600,7 @@ var SearchInput = function SearchInput(_ref) {
 
           return Promise.resolve(traversal.client.search(path ? path : traversal.client.getContainerFromPath(traversal.path), searchTermQs, false, false)).then(function (data) {
             var newValuesLabel = data.items.reduce(function (result, item) {
-              result[item.id] = get$1(item, labelProperty, item.id);
+              result[item.id] = get(item, labelProperty, item.id);
               return result;
             }, {});
             setValueLabel(newValuesLabel);
@@ -3304,6 +3628,7 @@ var SearchInput = function SearchInput(_ref) {
     }
 
     try {
+      console.log('handle search input');
       setOptions({
         loading: true
       });
@@ -3318,7 +3643,7 @@ var SearchInput = function SearchInput(_ref) {
 
       var fnName = _get('searchEngineQueryParamsFunction', SearchEngine);
 
-      var qsParsed = traversal.client[fnName]({
+      var qsParsed = traversal.client.getQueryParamsSearchFunction(fnName)({
         path: traversal.path,
         start: page * PageSize,
         pageSize: PageSize,
@@ -3331,7 +3656,7 @@ var SearchInput = function SearchInput(_ref) {
         typeNameParsed = parser("type_name__in=" + typeNameQuery);
       }
 
-      if (qs.length > 0 || searchTermParsed.length > 0 || qsParsed.length > 0 || typeNameParsed.length > 0) {
+      if (qs.length > 0 || searchTermParsed.length > 0 || qsParsed.length > 0 || typeNameParsed.length > 0 || sortParsed.length > 0) {
         searchTermQs = buildQs([].concat(qs, searchTermParsed, qsParsed, typeNameParsed, sortParsed));
       }
 
@@ -3356,7 +3681,7 @@ var SearchInput = function SearchInput(_ref) {
       return renderTextItemOption(item);
     }
 
-    return get$1(item, labelProperty, item.title) || item['@name'];
+    return get(item, labelProperty, item.title) || item['@name'];
   };
 
   useEffect(function () {
@@ -3382,7 +3707,7 @@ var SearchInput = function SearchInput(_ref) {
         if (!ev.currentTarget.contains(ev.relatedTarget)) {
           if (searchTerm !== '') {
             setSearchTerm('');
-            setOptions(initialState);
+            setOptions(initialState$1);
           }
 
           setIsOpen(false);
@@ -3400,6 +3725,7 @@ var SearchInput = function SearchInput(_ref) {
             }
 
             setIsOpen(!isOpen);
+            console.log('on clic btn', options);
 
             if (!options.loading && !options.items) {
               handleSearch(options.page);
@@ -3408,7 +3734,7 @@ var SearchInput = function SearchInput(_ref) {
           "aria-haspopup": "true",
           "aria-controls": "dropdown-menu",
           children: [jsx("span", {
-            children: value ? get$1(valueLabel, value, value) : intl.formatMessage(genericMessages.choose)
+            children: value ? get(valueLabel, value, value) : intl.formatMessage(genericMessages.choose)
           }), jsx("span", {
             className: "icon",
             children: jsx("i", {
@@ -3482,25 +3808,7 @@ var SearchInput = function SearchInput(_ref) {
   });
 };
 
-function debounce$1(func, wait) {
-  var timeout;
-  return function () {
-    // eslint-disable-next-line @typescript-eslint/no-this-alias
-    var context = this; // eslint-disable-next-line prefer-rest-params
-
-    var args = arguments;
-
-    var later = function later() {
-      timeout = null;
-      func.apply(context, args);
-    };
-
-    clearTimeout(timeout);
-    timeout = setTimeout(later, wait);
-  };
-}
-
-var initialState$1 = {
+var initialState$2 = {
   page: 0,
   items: undefined,
   loading: false,
@@ -3510,10 +3818,9 @@ var SearchInputList = function SearchInputList(_ref) {
   var onChange = _ref.onChange,
       error = _ref.error,
       errorZoneClassName = _ref.errorZoneClassName,
-      _ref$traversal = _ref.traversal,
-      traversal = _ref$traversal === void 0 ? null : _ref$traversal,
+      traversal = _ref.traversal,
       _ref$path = _ref.path,
-      path = _ref$path === void 0 ? null : _ref$path,
+      path = _ref$path === void 0 ? undefined : _ref$path,
       _ref$qs = _ref.qs,
       qs = _ref$qs === void 0 ? [] : _ref$qs,
       _ref$queryCondition = _ref.queryCondition,
@@ -3528,14 +3835,14 @@ var SearchInputList = function SearchInputList(_ref) {
       _ref$dataTestItem = _ref.dataTestItem,
       dataTestItem = _ref$dataTestItem === void 0 ? 'searchInputItemTest' : _ref$dataTestItem,
       _ref$renderTextItemOp = _ref.renderTextItemOption,
-      renderTextItemOption = _ref$renderTextItemOp === void 0 ? null : _ref$renderTextItemOp,
+      renderTextItemOption = _ref$renderTextItemOp === void 0 ? undefined : _ref$renderTextItemOp,
       _ref$typeNameQuery = _ref.typeNameQuery,
-      typeNameQuery = _ref$typeNameQuery === void 0 ? null : _ref$typeNameQuery,
+      typeNameQuery = _ref$typeNameQuery === void 0 ? undefined : _ref$typeNameQuery,
       _ref$labelProperty = _ref.labelProperty,
       labelProperty = _ref$labelProperty === void 0 ? 'id' : _ref$labelProperty;
   var intl = useIntl();
 
-  var _useSetState = useSetState(initialState$1),
+  var _useSetState = useSetState(initialState$2),
       options = _useSetState[0],
       setOptions = _useSetState[1];
 
@@ -3581,7 +3888,7 @@ var SearchInputList = function SearchInputList(_ref) {
     };
   };
 
-  var delayedQuery = useCallback(debounce$1(function (value) {
+  var delayedQuery = useCallback(debounce(function (value) {
     return handleSearch(0, false, value);
   }, 500), []);
 
@@ -3613,7 +3920,7 @@ var SearchInputList = function SearchInputList(_ref) {
 
       var fnName = _get('searchEngineQueryParamsFunction', SearchEngine);
 
-      var qsParsed = traversal.client[fnName]({
+      var qsParsed = traversal.client.getQueryParamsSearchFunction(fnName)({
         path: traversal.path,
         start: page * PageSize,
         pageSize: PageSize,
@@ -3655,7 +3962,7 @@ var SearchInputList = function SearchInputList(_ref) {
           var searchTermParsed = ['__or', "id=" + value.join('%26id=')];
           var getSearch = traversal.registry.get;
           var fnName = getSearch('searchEngineQueryParamsFunction', SearchEngine);
-          var qsParsed = traversal.client[fnName]({
+          var qsParsed = traversal.client.getQueryParamsSearchFunction(fnName)({
             path: traversal.path,
             start: 0,
             pageSize: 100,
@@ -3671,9 +3978,9 @@ var SearchInputList = function SearchInputList(_ref) {
             searchTermQs = buildQs([].concat(qs, [searchTermParsed], qsParsed, typeNameParsed));
           }
 
-          return Promise.resolve(traversal.client.search(path ? path : traversal.client.getContainerFromPath(traversal.path), searchTermQs, false, false, 0, 100)).then(function (data) {
+          return Promise.resolve(traversal.client.search(path ? path : traversal.client.getContainerFromPath(traversal.path), searchTermQs, false, false)).then(function (data) {
             var newValuesLabel = data.items.reduce(function (result, item) {
-              result[item.id] = get$1(item, labelProperty, item.id);
+              result[item.id] = get(item, labelProperty, item.id);
               return result;
             }, {});
             setValuesLabels(newValuesLabel);
@@ -3693,7 +4000,7 @@ var SearchInputList = function SearchInputList(_ref) {
       return renderTextItemOption(item);
     }
 
-    return get$1(item, labelProperty, item.title) || item['@name'];
+    return get(item, labelProperty, item.title) || item['@name'];
   };
 
   useEffect(function () {
@@ -3716,7 +4023,7 @@ var SearchInputList = function SearchInputList(_ref) {
       children: value.map(function (tag, index) {
         return jsxs("div", {
           className: "tag is-info is-medium",
-          children: [get$1(valuesLabel, tag, tag), jsx("button", {
+          children: [get(valuesLabel, tag, tag), jsx("button", {
             className: "delete is-small",
             onClick: function onClick(ev) {
               ev.stopPropagation();
@@ -3736,7 +4043,7 @@ var SearchInputList = function SearchInputList(_ref) {
         if (!ev.currentTarget.contains(ev.relatedTarget)) {
           if (searchTerm !== '') {
             setSearchTerm('');
-            setOptions(initialState$1);
+            setOptions(initialState$2);
           }
 
           setIsOpen(false);
@@ -3800,7 +4107,7 @@ var SearchInputList = function SearchInputList(_ref) {
                 if (onChange && !value.includes(item.id)) {
                   var _extends2;
 
-                  setValuesLabels(_extends({}, valuesLabel, (_extends2 = {}, _extends2[item.id] = get$1(item, labelProperty, item.id), _extends2)));
+                  setValuesLabels(_extends({}, valuesLabel, (_extends2 = {}, _extends2[item.id] = get(item, labelProperty, item.id), _extends2)));
                   onChange([].concat(value, [item.id]));
                 }
               },
@@ -3988,7 +4295,7 @@ function EditableField(_ref) {
       ref.current.focus();
     }
   });
-  var canModified = modifyContent && !get$1(schema, 'readonly', false);
+  var canModified = schema !== undefined && modifyContent && !get(schema, 'readonly', false);
 
   var saveField = function saveField(ev) {
     try {
@@ -4054,7 +4361,7 @@ function EditableField(_ref) {
   var deleteField = function deleteField(ev) {
     try {
       if (ev) ev.preventDefault();
-      return Promise.resolve(function () {
+      return Promise.resolve(function (_schema$items) {
         if ((schema == null ? void 0 : schema.widget) === 'file') {
           var _ns2, _ref4, _ref5;
 
@@ -4082,7 +4389,7 @@ function EditableField(_ref) {
           });
         } else if ((schema == null ? void 0 : schema.type) === 'string' && schema != null && schema.enum) {
           setValue(null);
-        } else if ((schema == null ? void 0 : schema.type) === 'array' && (schema == null ? void 0 : schema.items.type) === 'string') {
+        } else if ((schema == null ? void 0 : schema.type) === 'array' && (schema == null ? void 0 : (_schema$items = schema.items) == null ? void 0 : _schema$items.type) === 'string') {
           setValue([]);
         }
       }());
@@ -4139,7 +4446,7 @@ function EditableField(_ref) {
             dataTest: "editableFieldBtnCancelTest",
             children: intl.formatMessage(genericMessages.cancel)
           })
-        }), !required && fieldHaveDeleteButton(schema) && jsx("div", {
+        }), !required && schema && fieldHaveDeleteButton(schema) && jsx("div", {
           className: "control",
           children: jsx(Button, {
             className: "is-small is-danger",
@@ -4239,80 +4546,6 @@ var DownloadField = function DownloadField(_ref) {
   });
 };
 
-function _catch$1(body, recover) {
-  try {
-    var result = body();
-  } catch (e) {
-    return recover(e);
-  }
-
-  if (result && result.then) {
-    return result.then(void 0, recover);
-  }
-
-  return result;
-}
-
-function useVocabulary(vocabularyName, path) {
-  if (path === void 0) {
-    path = null;
-  }
-
-  var traversal = useTraversal();
-
-  var _useSetState = useSetState({
-    data: undefined,
-    loading: false,
-    error: undefined
-  }),
-      vocabulary = _useSetState[0],
-      setVocabulary = _useSetState[1];
-
-  var getPath = function getPath() {
-    if (path) return path;
-    return traversal.path + "@vocabularies/" + vocabularyName;
-  };
-
-  useEffect(function () {
-    var getVocabulary = function getVocabulary() {
-      try {
-        var _temp3 = function () {
-          if (vocabularyName && vocabulary.data === undefined && !vocabulary.loading) {
-            var _temp4 = _catch$1(function () {
-              setVocabulary({
-                loading: true
-              });
-              return Promise.resolve(traversal.client.get(getPath())).then(function (data) {
-                return Promise.resolve(data.json()).then(function (dataJson) {
-                  setVocabulary({
-                    loading: false,
-                    data: dataJson
-                  });
-                });
-              });
-            }, function (err) {
-              setVocabulary({
-                loading: false,
-                error: err,
-                data: undefined
-              });
-            });
-
-            if (_temp4 && _temp4.then) return _temp4.then(function () {});
-          }
-        }();
-
-        return Promise.resolve(_temp3 && _temp3.then ? _temp3.then(function () {}) : void 0);
-      } catch (e) {
-        return Promise.reject(e);
-      }
-    };
-
-    getVocabulary();
-  }, [vocabularyName, vocabulary, path]);
-  return vocabulary;
-}
-
 var plain = ['string', 'number', 'boolean'];
 function RenderField(_ref) {
   var value = _ref.value,
@@ -4334,23 +4567,27 @@ function RenderField(_ref) {
   }
 
   if (type === 'object') {
+    var _schema$properties;
+
     if (Array.isArray(value)) {
-      return value.map(function (item) {
+      return value.map(function (item, index) {
         return jsx("div", {
           children: jsx(RenderField, {
             value: item
           })
-        }, item);
+        }, "renderField_" + index + "_" + (schema == null ? void 0 : schema.title));
       });
     }
 
-    return Object.keys(value).map(function (key) {
-      return jsx(FieldValue, {
-        field: get$1(schema, "properties." + key + ".title", key),
-        schema: get$1(schema, "properties." + key, {}),
-        value: value[key]
-      }, key);
-    });
+    if ((schema == null ? void 0 : (_schema$properties = schema.properties) == null ? void 0 : _schema$properties.key) !== undefined) {
+      return Object.keys(value).map(function (key) {
+        return jsx(FieldValue, {
+          field: get(schema, "properties." + key + ".title", key),
+          schema: schema.properties.key,
+          value: get(value, key, {})
+        }, key);
+      });
+    }
   }
 
   return jsxs("p", {
@@ -4394,6 +4631,7 @@ var SearchRenderField = function SearchRenderField(_ref3) {
   var schema = _ref3.schema,
       value = _ref3.value,
       modifyContent = _ref3.modifyContent;
+  console.log('search render fields');
   var intl = useIntl();
 
   var _useState = useState([]),
@@ -4418,7 +4656,7 @@ var SearchRenderField = function SearchRenderField(_ref3) {
         var searchTermParsed = ['__or', "id=" + valuesToSearch.join('%26id=')];
         var getSearch = traversal.registry.get;
         var fnName = getSearch('searchEngineQueryParamsFunction', SearchEngine);
-        var qsParsed = traversal.client[fnName]({
+        var qsParsed = traversal.client.getQueryParamsSearchFunction(fnName)({
           path: traversal.path,
           start: 0,
           pageSize: 100,
@@ -4429,11 +4667,11 @@ var SearchRenderField = function SearchRenderField(_ref3) {
           searchTermQs = buildQs([searchTermParsed].concat(qsParsed));
         }
 
-        return Promise.resolve(traversal.client.search(traversal.client.getContainerFromPath(traversal.path), searchTermQs, false, false, 0, 100)).then(function (data) {
+        return Promise.resolve(traversal.client.search(traversal.client.getContainerFromPath(traversal.path), searchTermQs, false, false)).then(function (data) {
           var newValuesLabel = data.items.map(function (item) {
             var _schema$labelProperty;
 
-            return get$1(item, (_schema$labelProperty = schema == null ? void 0 : schema.labelProperty) != null ? _schema$labelProperty : 'title', item.id);
+            return get(item, (_schema$labelProperty = schema == null ? void 0 : schema.labelProperty) != null ? _schema$labelProperty : 'title', item.id);
           });
           setValuesLabels(newValuesLabel);
           setIsLoadingData(false);
@@ -4443,13 +4681,15 @@ var SearchRenderField = function SearchRenderField(_ref3) {
       }
     };
 
-    var valuesToSearch = value;
+    var valuesToSearch = [];
 
-    if (typeof valuesToSearch === 'string') {
-      valuesToSearch = [valuesToSearch];
+    if (typeof value === 'string' && value) {
+      valuesToSearch = [value];
+    } else if (Array.isArray(value)) {
+      valuesToSearch = value;
     }
 
-    if (valuesToSearch !== undefined && valuesToSearch.length > 0) {
+    if (valuesToSearch.length > 0) {
       fetchData(valuesToSearch);
     } else {
       setValuesLabels([]);
@@ -4484,7 +4724,7 @@ var VocabularyRenderField = function VocabularyRenderField(_ref4) {
       modifyContent = _ref4.modifyContent;
   var intl = useIntl();
   var DEFAULT_VALUE_EDITABLE_FIELD = getDefaultValueEditableField(intl);
-  var vocabularyName = (schema == null ? void 0 : (_schema$items = schema.items) == null ? void 0 : _schema$items.vocabularyName) || (schema == null ? void 0 : schema.vocabularyName);
+  var vocabularyName = (schema == null ? void 0 : (_schema$items = schema.items) == null ? void 0 : _schema$items.vocabularyName) || (schema == null ? void 0 : schema.vocabularyName) || '';
   var vocabulary = useVocabulary(vocabularyName);
 
   var getRenderProps = function getRenderProps() {
@@ -4495,7 +4735,7 @@ var VocabularyRenderField = function VocabularyRenderField(_ref4) {
     if (schema != null && schema.vocabularyName) {
       var _vocabularyValue$titl;
 
-      var vocabularyValue = get$1(vocabulary, 'data.items', []).find(function (item) {
+      var vocabularyValue = get(vocabulary, 'data.items', []).find(function (item) {
         return item.token === value;
       });
       renderProps['value'] = (_vocabularyValue$titl = vocabularyValue == null ? void 0 : vocabularyValue.title) != null ? _vocabularyValue$titl : '';
@@ -4505,7 +4745,7 @@ var VocabularyRenderField = function VocabularyRenderField(_ref4) {
       renderProps['value'] = ((_renderProps$value = renderProps['value']) != null ? _renderProps$value : []).map(function (value) {
         var _get$find$title, _get$find;
 
-        return (_get$find$title = (_get$find = get$1(vocabulary, 'data.items', []).find(function (item) {
+        return (_get$find$title = (_get$find = get(vocabulary, 'data.items', []).find(function (item) {
           return item.token === value;
         })) == null ? void 0 : _get$find.title) != null ? _get$find$title : '';
       });
@@ -4557,66 +4797,6 @@ function RenderFieldComponent(_ref5) {
   return jsx(RenderField, _extends({}, getRenderProps()));
 }
 
-var SelectVocabulary = forwardRef(function (_ref, ref) {
-  var vocabularyName = _ref.vocabularyName,
-      className = _ref.className,
-      classWrap = _ref.classWrap,
-      val = _ref.val,
-      dataTest = _ref.dataTest,
-      multiple = _ref.multiple,
-      onChange = _ref.onChange,
-      id = _ref.id,
-      placeholder = _ref.placeholder;
-  var vocabulary = useVocabulary(vocabularyName);
-
-  var getOptions = function getOptions() {
-    if (get$1(vocabulary, 'data.items', null)) {
-      var vocData = vocabulary.data.items.map(function (item) {
-        return {
-          text: item.title,
-          value: item.token
-        };
-      });
-      return vocData;
-    }
-
-    return [];
-  };
-
-  var getProps = function getProps() {
-    if (multiple) {
-      var currentValue = val || [];
-      return {
-        multiple: true,
-        size: 5,
-        value: currentValue,
-        options: getOptions()
-      };
-    }
-
-    return {
-      value: val != null ? val : '',
-      appendDefault: true,
-      options: getOptions()
-    };
-  };
-
-  if (vocabulary.data === undefined || vocabulary.loading) {
-    return 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';
-
 var EditComponent = forwardRef(function (_ref, ref) {
   var schema = _ref.schema,
       val = _ref.val,
@@ -4642,7 +4822,7 @@ var EditComponent = forwardRef(function (_ref, ref) {
         queryCondition: schema != null && schema.queryCondition ? schema.queryCondition : 'title__in',
         path: schema.queryPath,
         labelProperty: schema != null && schema.labelProperty ? schema.labelProperty : 'title',
-        typeNameQuery: schema != null && schema.typeNameQuery ? schema.typeNameQuery : null
+        typeNameQuery: schema == null ? void 0 : schema.typeNameQuery
       })]
     });
   } else if ((schema == null ? void 0 : schema.widget) === 'search') {
@@ -4659,7 +4839,7 @@ var EditComponent = forwardRef(function (_ref, ref) {
         queryCondition: schema != null && schema.queryCondition ? schema.queryCondition : 'title__in',
         path: schema.queryPath,
         labelProperty: schema != null && schema.labelProperty ? schema.labelProperty : 'title',
-        typeNameQuery: schema != null && schema.typeNameQuery ? schema.typeNameQuery : null
+        typeNameQuery: schema == null ? void 0 : schema.typeNameQuery
       })]
     });
   } else if ((schema == null ? void 0 : schema.widget) === 'textarea' || (schema == null ? void 0 : schema.widget) === 'richtext') {
@@ -4689,7 +4869,7 @@ var EditComponent = forwardRef(function (_ref, ref) {
 
       if (schema.items.vocabularyName) {
         return jsx(SelectVocabulary, {
-          vocabularyName: get$1(schema, 'items.vocabularyName', null),
+          vocabularyName: get(schema, 'items.vocabularyName', ''),
           val: val || [],
           className: className,
           classWrap: "is-fullwidth",
@@ -4726,22 +4906,25 @@ var EditComponent = forwardRef(function (_ref, ref) {
       }), jsx(InputList, {
         value: val || [],
         className: className,
-        onChange: function onChange(ev) {
-          return _setValue(ev);
+        onChange: function onChange(val) {
+          return _setValue(val);
         },
         ref: ref,
         dataTest: dataTest
       })]
     });
   } else if ((schema == null ? void 0 : schema.widget) === 'file') {
+    var value = val;
     return jsx(FileUpload, {
       onChange: function onChange(ev) {
         return _setValue(ev);
       },
-      label: get$1(val, 'filename', null),
+      label: get(value, 'filename', undefined),
       dataTest: dataTest
     });
   } else if ((schema == null ? void 0 : schema.widget) === 'select' && schema.type === 'string') {
+    var _schema$vocabulary;
+
     if (schema != null && schema.vocabularyName) {
       return jsx(SelectVocabulary, {
         val: val || '',
@@ -4750,7 +4933,7 @@ var EditComponent = forwardRef(function (_ref, ref) {
         classWrap: "is-fullwidth",
         dataTest: dataTest,
         onChange: _setValue,
-        vocabularyName: get$1(schema, 'vocabularyName', null),
+        vocabularyName: get(schema, 'vocabularyName', ''),
         placeholder: placeholder,
         id: id
       });
@@ -4762,7 +4945,7 @@ var EditComponent = forwardRef(function (_ref, ref) {
       appendDefault: true,
       classWrap: "is-fullwidth",
       dataTest: dataTest,
-      options: schema == null ? void 0 : schema.vocabulary.map(function (item) {
+      options: ((_schema$vocabulary = schema == null ? void 0 : schema.vocabulary) != null ? _schema$vocabulary : []).map(function (item) {
         return {
           text: item,
           value: item
@@ -4773,26 +4956,27 @@ var EditComponent = forwardRef(function (_ref, ref) {
       id: id
     });
   } else if ((schema == null ? void 0 : schema.type) === 'object' && schema.widget !== 'file') {
-    var value = val;
+    var _value = val;
     return jsxs(Fragment, {
       children: [schema.title && jsx("h4", {
         className: "subtitle mt-2",
         children: schema.title
-      }), Object.keys(get$1(schema, 'properties', {})).map(function (key) {
+      }), Object.keys(get(schema, 'properties', {})).map(function (key) {
         var _subSchema$title;
 
-        var subSchema = get$1(schema, 'properties', {})[key];
-        var requiredFields = get$1(schema, 'required', []);
+        var subSchema = get(schema, "properties." + key, null);
+        var requiredFields = get(schema, 'required', []);
+        if (!subSchema) return null;
         return jsx(EditComponent, {
           id: id + "[" + key + "]",
           schema: subSchema,
-          val: value && key in value ? value[key] : '',
+          val: _value && key in _value ? _value[key] : '',
           placeholder: (_subSchema$title = subSchema == null ? void 0 : subSchema.title) != null ? _subSchema$title : '',
           required: requiredFields.includes(key),
           setValue: function setValue(ev) {
             var _extends2;
 
-            _setValue(_extends({}, value, (_extends2 = {}, _extends2[key] = ev, _extends2)));
+            _setValue(_extends({}, _value, (_extends2 = {}, _extends2[key] = ev, _extends2)));
           },
           dataTest: key + "TestInput"
         }, id + "[" + key + "]");
@@ -4854,9 +5038,9 @@ function IAttachment(_ref) {
         }, 1), jsx("td", {
           children: jsx(EditableField, {
             field: key,
-            value: values[key],
+            value: values.file,
             ns: "guillotina.behaviors.attachment.IAttachment",
-            schema: properties[key],
+            schema: properties.file,
             modifyContent: modifyContent && ['file'].includes(key)
           })
         }, 2)]
@@ -4906,6 +5090,11 @@ function IMultiAttachment(_ref) {
 
       setLoading(true);
       setError(undefined);
+
+      if (!file) {
+        return Promise.resolve();
+      }
+
       var endpoint = Ctx.path + "@upload/files/" + fileKey;
       return Promise.resolve(Ctx.client.upload(endpoint, file)).then(function (req) {
         if (req.status !== 200) {
@@ -4974,7 +5163,7 @@ function IMultiAttachment(_ref) {
               field: "files/" + key,
               value: values['files'][key],
               ns: "guillotina.behaviors.attachment.IMultiAttachment.files",
-              schema: properties['files']['additionalProperties'],
+              schema: get(properties, 'files.additionalProperties', {}),
               modifyContent: false
             }), jsx("div", {
               className: "ml-5",
@@ -5198,13 +5387,18 @@ function IImageAttachment(_ref) {
       ev.preventDefault();
       setLoading(true);
       setError(undefined);
+
+      if (!file) {
+        return Promise.resolve();
+      }
+
       var endpoint = Ctx.path + "@upload/image";
       return Promise.resolve(Ctx.client.upload(endpoint, file)).then(function (req) {
         var _exit;
 
         function _temp4(_result) {
           if (_exit) return _result;
-          setFile(undefined);
+          setFile(null);
           setLoading(false);
           Ctx.flash(intl.formatMessage(genericFileMessages.image_uploaded), 'success');
           Ctx.refresh();
@@ -5485,7 +5679,7 @@ function IMultiImageAttachment(_ref) {
       fileKey = _useState[0],
       setFileKey = _useState[1];
 
-  var _useState2 = useState(null),
+  var _useState2 = useState(undefined),
       file = _useState2[0],
       setFile = _useState2[1];
 
@@ -5518,6 +5712,11 @@ function IMultiImageAttachment(_ref) {
 
       setLoading(true);
       setError(undefined);
+
+      if (!file) {
+        return Promise.resolve();
+      }
+
       var endpoint = Ctx.path + "@upload/images/" + fileKey;
       return Promise.resolve(Ctx.client.upload(endpoint, file)).then(function (req) {
         var _exit;
@@ -5620,7 +5819,7 @@ function IMultiImageAttachment(_ref) {
               field: "images/" + key,
               value: values['images'][key],
               ns: "guillotina.contrib.image.behaviors.IMultiImageAttachment.images",
-              schema: properties['images']['additionalProperties'],
+              schema: get(properties, 'images.additionalProperties', {}),
               modifyContent: false,
               required: false
             }), jsx("div", {
@@ -5910,7 +6109,7 @@ function IMultiImageOrderedAttachment(_ref2) {
       sortedList = _useState2[0],
       setSortedList = _useState2[1];
 
-  var _useState3 = useState(null),
+  var _useState3 = useState(undefined),
       file = _useState3[0],
       setFile = _useState3[1];
 
@@ -6054,7 +6253,7 @@ function IMultiImageOrderedAttachment(_ref2) {
                         field: "images/" + key,
                         value: values['images'][key],
                         ns: "guillotina.contrib.image.behaviors.IMultiImageAttachment.images",
-                        schema: properties['images']['additionalProperties'],
+                        schema: get(properties, 'images.additionalProperties', {}),
                         modifyContent: false,
                         required: false
                       }), jsx("div", {
@@ -6109,165 +6308,6 @@ function IMultiImageOrderedAttachment(_ref2) {
   });
 }
 
-var base = {
-  local: {
-    roleperm: {},
-    prinperm: {},
-    prinrole: {}
-  },
-  inherit: []
-};
-var Sharing = /*#__PURE__*/function () {
-  function Sharing(element) {
-    this.local = void 0;
-    this.inherit = void 0;
-    Object.assign(this, element || base);
-  }
-
-  var _proto = Sharing.prototype;
-
-  _proto.getRole = function getRole(role) {
-    return this.local.roleperm[role];
-  };
-
-  _proto.getPrincipals = function getPrincipals(principal) {
-    return this.local.prinperm[principal];
-  };
-
-  _proto.getPrinroles = function getPrinroles(role) {
-    return this.local.prinrole[role];
-  };
-
-  _createClass(Sharing, [{
-    key: "roles",
-    get: function get() {
-      return Object.keys(this.local.roleperm);
-    }
-  }, {
-    key: "principals",
-    get: function get() {
-      return Object.keys(this.local.prinperm);
-    }
-  }, {
-    key: "prinrole",
-    get: function get() {
-      return Object.keys(this.local.prinrole);
-    }
-  }]);
-
-  return Sharing;
-}();
-
-var ItemModel = /*#__PURE__*/function () {
-  function ItemModel(item, url) {
-    if (url === void 0) {
-      url = '';
-    }
-
-    this.item = void 0;
-    this.url = void 0;
-    this.item = item;
-    this.url = url;
-  }
-
-  _createClass(ItemModel, [{
-    key: "path",
-    get: function get() {
-      // Compat
-      var item = this.item['@id'] ? this.item['@id'] : this.item['@absolute_url'];
-      var path = item.split('//')[1].split('/').splice(1).join('/');
-      path = "/" + path + "/";
-
-      if (this.url.length > 0) {
-        if (this.url.startsWith('/')) {
-          path = path.replace(this.url.substring(1), '');
-        } else {
-          path = path.replace(this.url, '');
-        }
-      }
-
-      return path;
-    }
-  }, {
-    key: "name",
-    get: function get() {
-      return this.item.title || this.item['@name'];
-    }
-  }, {
-    key: "icon",
-    get: function get() {
-      // eslint-disable-next-line
-      var cfg = useConfig();
-
-      if (cfg.icons && cfg.icons[this.type]) {
-        return cfg.icons[this.type];
-      }
-
-      switch (this.type) {
-        case 'GroupManager':
-          return 'fas fa-users-cog';
-
-        case 'UserManager':
-          return 'fas fa-user-cog';
-
-        case 'User':
-          return 'fas fa-user';
-
-        case 'Group':
-          return 'fas fa-users';
-
-        case 'Folder':
-          return 'fas fa-folder';
-
-        default:
-          return 'fas fa-file';
-      }
-    }
-  }, {
-    key: "fullPath",
-    get: function get() {
-      return this.url + this.item.id;
-    }
-  }, {
-    key: "id",
-    get: function get() {
-      if (this.item.id) {
-        return this.item.id;
-      }
-
-      var id = this.item['@id'].split('&')[0].split('/');
-      return id[id.length - 1];
-    }
-  }, {
-    key: "uid",
-    get: function get() {
-      return this.item['@uid'];
-    }
-  }, {
-    key: "type",
-    get: function get() {
-      return this.item['@type'] || this.item.type_name;
-    }
-  }, {
-    key: "title",
-    get: function get() {
-      return this.item.title;
-    }
-  }, {
-    key: "created",
-    get: function get() {
-      return this.item.creation_date ? formatDate(this.item.creation_date) : '';
-    }
-  }, {
-    key: "updated",
-    get: function get() {
-      return this.item.modification_date ? formatDate(this.item.modification_date) : '';
-    }
-  }]);
-
-  return ItemModel;
-}();
-
 var messages$1 = defineMessages({
   status_changed_ok: {
     id: "status_changed_ok",
@@ -6343,13 +6383,12 @@ function IWorkflow() {
       definition = _useState[0],
       setDefinition = _useState[1];
 
-  var _useState2 = useState(null),
+  var _useState2 = useState(undefined),
       workflowAction = _useState2[0],
       setWorkflowAction = _useState2[1];
 
-  var model = new ItemModel(Ctx.context);
   var vocabulary = useVocabulary('workflow_states');
-  var currentState = model.item['guillotina.contrib.workflows.interfaces.IWorkflowBehavior']['review_state'];
+  var currentState = Ctx.context['guillotina.contrib.workflows.interfaces.IWorkflowBehavior']['review_state'];
   useEffect(function () {
     loadDefinition();
   }, [Ctx.path]);
@@ -6369,7 +6408,7 @@ function IWorkflow() {
           }
 
           Ctx.refresh();
-          setWorkflowAction(null);
+          setWorkflowAction(undefined);
         });
       });
     } catch (e) {
@@ -6378,21 +6417,23 @@ function IWorkflow() {
   };
 
   var getStateTitle = function getStateTitle() {
-    var _vocabulary$data, _vocabulary$data$item;
+    var _vocabulary$data$item, _vocabulary$data;
 
-    if (((_vocabulary$data = vocabulary.data) == null ? void 0 : (_vocabulary$data$item = _vocabulary$data.items) == null ? void 0 : _vocabulary$data$item.length) > 0) {
-      var vocabularyValue = vocabulary.data.items.find(function (item) {
+    if (((_vocabulary$data$item = (_vocabulary$data = vocabulary.data) == null ? void 0 : _vocabulary$data.items) != null ? _vocabulary$data$item : []).length > 0) {
+      var _vocabulary$data2;
+
+      var vocabularyValue = vocabulary == null ? void 0 : (_vocabulary$data2 = vocabulary.data) == null ? void 0 : _vocabulary$data2.items.find(function (item) {
         return item.token === currentState;
       });
 
       if (vocabularyValue) {
-        var translatedValue = get$1(vocabularyValue, "title.translated_title." + intl.locale, null);
+        var translatedValue = get(vocabularyValue, "title.translated_title." + intl.locale, null);
 
         if (translatedValue !== null) {
           return translatedValue;
         }
 
-        var titleValue = get$1(vocabularyValue, "title.title." + intl.locale, null);
+        var titleValue = get(vocabularyValue, "title.title." + intl.locale, null);
 
         if (titleValue !== null) {
           return titleValue;
@@ -6408,7 +6449,7 @@ function IWorkflow() {
     children: [workflowAction && jsx(Confirm, {
       loading: loading,
       onCancel: function onCancel() {
-        return setWorkflowAction(null);
+        return setWorkflowAction(undefined);
       },
       onConfirm: doWorkflowAction,
       message: intl.formatMessage(messages$1.confirm_message, {
@@ -6434,7 +6475,7 @@ function IWorkflow() {
           onClick: function onClick() {
             return setWorkflowAction(transition['@id'].split('@workflow')[1].slice(1));
           },
-          children: get$1(transition, "metadata.translated_title." + intl.locale, transition.title)
+          children: get(transition, "metadata.translated_title." + intl.locale, transition.title)
         }, transition['@id']);
       })]
     })]
@@ -6460,14 +6501,17 @@ function PanelActions() {
 
   return jsx(Fragment$1, {
     children: Object.keys(ACTIONS_OBJECT).map(function (actionKey) {
-      if (hasPerm(ACTIONS_OBJECT[actionKey].perms)) {
+      var actionKeyTyped = actionKey;
+      var actionObject = ACTIONS_OBJECT[actionKeyTyped];
+
+      if (hasPerm(actionObject.perms)) {
         return jsx("button", {
           className: "button mr-4",
           onClick: function onClick() {
-            onAction(actionKey);
+            onAction(actionKeyTyped);
           },
-          children: ACTIONS_OBJECT[actionKey].text
-        }, "panel_action_" + ACTIONS_OBJECT[actionKey].text);
+          children: actionObject.text
+        }, "panel_action_" + actionObject.text);
       }
     })
   });
@@ -6665,8 +6709,9 @@ var prepareData = function prepareData(result) {
 
 var arrayToObject = function arrayToObject(array) {
   return array.reduce(function (obj, item) {
-    obj[item.id] = item;
-    return obj;
+    var _extends2;
+
+    return _extends({}, obj, (_extends2 = {}, _extends2[item.id] = item, _extends2));
   }, {});
 };
 
@@ -6828,8 +6873,9 @@ function ItemsActionsProvider(_ref) {
 
   function onSelectAllItems(checked) {
     setSelected(items.reduce(function (obj, item) {
-      obj[item.path + "/" + item.id] = checked;
-      return obj;
+      var _extends2;
+
+      return _extends({}, obj, (_extends2 = {}, _extends2[item.path + "/" + item.id] = checked, _extends2));
     }, {
       all: checked
     }));
@@ -6837,11 +6883,11 @@ function ItemsActionsProvider(_ref) {
 
   function onSelectOneItem(item) {
     setSelected(function (state) {
-      var _extends2;
+      var _extends3;
 
-      return _extends({}, state, (_extends2 = {
+      return _extends({}, state, (_extends3 = {
         all: false
-      }, _extends2[item.path + "/" + item.id] = !state[item.path + "/" + item.id], _extends2));
+      }, _extends3[item.path + "/" + item.id] = !state[item.path + "/" + item.id], _extends3));
     });
   }
 
@@ -6863,17 +6909,37 @@ function ItemsActionsProvider(_ref) {
     children: children
   });
 }
+
+var useItemsActions = function useItemsActions() {
+  var _useContext = useContext(ItemsActionsCtx),
+      onAction = _useContext.onAction,
+      onSelectOneItem = _useContext.onSelectOneItem,
+      onSelectAllItems = _useContext.onSelectAllItems,
+      selected = _useContext.selected;
+
+  if (!onAction || !onSelectOneItem || !onSelectAllItems || !selected) {
+    throw new Error('useItemsActions must be used inside ItemsActionsProvider');
+  }
+
+  return {
+    onAction: onAction,
+    onSelectOneItem: onSelectOneItem,
+    onSelectAllItems: onSelectAllItems,
+    selected: selected
+  };
+};
 /**
  * Checkbox component without props that consume the ItemsActionsContext
  * and it select/unselect all items of the page.
  */
 
+
 function AllItemsCheckbox(_ref2) {
   var dataTest = _ref2.dataTest;
 
-  var _useContext = useContext(ItemsActionsCtx),
-      onSelectAllItems = _useContext.onSelectAllItems,
-      selected = _useContext.selected;
+  var _useItemsActions = useItemsActions(),
+      onSelectAllItems = _useItemsActions.onSelectAllItems,
+      selected = _useItemsActions.selected;
 
   return jsx(Checkbox, {
     onChange: onSelectAllItems,
@@ -6885,9 +6951,9 @@ function ItemCheckbox(_ref3) {
   var item = _ref3.item,
       dataTest = _ref3.dataTest;
 
-  var _useContext2 = useContext(ItemsActionsCtx),
-      selected = _useContext2.selected,
-      onSelectOneItem = _useContext2.onSelectOneItem;
+  var _useItemsActions2 = useItemsActions(),
+      selected = _useItemsActions2.selected,
+      onSelectOneItem = _useItemsActions2.onSelectOneItem;
 
   var absId = item.path + "/" + item.id;
   var value = selected[absId];
@@ -6908,9 +6974,9 @@ function ItemsActionsDropdown() {
   var ACTIONS_OBJECT = getActionsObject(intl, true);
   var traversal = useTraversal();
 
-  var _useContext3 = useContext(ItemsActionsCtx),
-      selected = _useContext3.selected,
-      onAction = _useContext3.onAction;
+  var _useItemsActions3 = useItemsActions(),
+      selected = _useItemsActions3.selected,
+      onAction = _useItemsActions3.onAction;
 
   var disabled = Object.values(selected).every(function (v) {
     return !v;
@@ -7021,6 +7087,170 @@ function Pagination(_ref) {
   });
 }
 
+var base = {
+  local: {
+    roleperm: {},
+    prinperm: {},
+    prinrole: {}
+  },
+  inherit: []
+};
+var Sharing = /*#__PURE__*/function () {
+  function Sharing(element) {
+    this.local = void 0;
+    this.inherit = void 0;
+
+    if (element === undefined) {
+      throw new Error('Sharing element is undefined');
+    }
+
+    this.local = element.local || base.local;
+    this.inherit = element.inherit || base.inherit;
+  }
+
+  var _proto = Sharing.prototype;
+
+  _proto.getRole = function getRole(role) {
+    return this.local.roleperm[role];
+  };
+
+  _proto.getPrincipals = function getPrincipals(principal) {
+    return this.local.prinperm[principal];
+  };
+
+  _proto.getPrinroles = function getPrinroles(role) {
+    return this.local.prinrole[role];
+  };
+
+  _createClass(Sharing, [{
+    key: "roles",
+    get: function get() {
+      return Object.keys(this.local.roleperm);
+    }
+  }, {
+    key: "principals",
+    get: function get() {
+      return Object.keys(this.local.prinperm);
+    }
+  }, {
+    key: "prinrole",
+    get: function get() {
+      return Object.keys(this.local.prinrole);
+    }
+  }]);
+
+  return Sharing;
+}();
+
+var ItemModel = /*#__PURE__*/function () {
+  function ItemModel(item, url) {
+    if (url === void 0) {
+      url = '';
+    }
+
+    this.item = void 0;
+    this.url = void 0;
+    this.item = item;
+    this.url = url;
+  }
+
+  _createClass(ItemModel, [{
+    key: "path",
+    get: function get() {
+      // Compat
+      var item = this.item['@id'] ? this.item['@id'] : this.item['@absolute_url'];
+      var path = item.split('//')[1].split('/').splice(1).join('/');
+      path = "/" + path + "/";
+
+      if (this.url.length > 0) {
+        if (this.url.startsWith('/')) {
+          path = path.replace(this.url.substring(1), '');
+        } else {
+          path = path.replace(this.url, '');
+        }
+      }
+
+      return path;
+    }
+  }, {
+    key: "name",
+    get: function get() {
+      return this.item.title || this.item['@name'];
+    }
+  }, {
+    key: "icon",
+    get: function get() {
+      var cfg = useConfig();
+
+      if (cfg.icons && cfg.icons[this.type]) {
+        return cfg.icons[this.type];
+      }
+
+      switch (this.type) {
+        case 'GroupManager':
+          return 'fas fa-users-cog';
+
+        case 'UserManager':
+          return 'fas fa-user-cog';
+
+        case 'User':
+          return 'fas fa-user';
+
+        case 'Group':
+          return 'fas fa-users';
+
+        case 'Folder':
+          return 'fas fa-folder';
+
+        default:
+          return 'fas fa-file';
+      }
+    }
+  }, {
+    key: "fullPath",
+    get: function get() {
+      return this.url + this.id;
+    }
+  }, {
+    key: "id",
+    get: function get() {
+      if ('id' in this.item) {
+        return this.item.id;
+      }
+
+      var id = this.item['@id'].split('&')[0].split('/');
+      return id[id.length - 1];
+    }
+  }, {
+    key: "uid",
+    get: function get() {
+      return this.item['@uid'];
+    }
+  }, {
+    key: "type",
+    get: function get() {
+      return this.item['@type'] || this.item.type_name;
+    }
+  }, {
+    key: "title",
+    get: function get() {
+      return this.item.title;
+    }
+  }, {
+    key: "created",
+    get: function get() {
+      return this.item.creation_date ? formatDate(this.item.creation_date) : '';
+    }
+  }, {
+    key: "updated",
+    get: function get() {
+      return this.item.modification_date ? formatDate(this.item.modification_date) : '';
+    }
+  }]);
+
+  return ItemModel;
+}();
+
 function Item(_ref) {
   var item = _ref.item,
       icon = _ref.icon;
@@ -7161,11 +7391,11 @@ function SearchOptionsLabels(_ref) {
       renderValue = _useState[0],
       setRenderValue = _useState[1];
 
-  var defaultRenderValue = location.get(query);
+  var defaultRenderValue = location.get(query) || '';
   useEffect(function () {
     var value = defaultRenderValue;
 
-    if ((options != null ? options : []).length > 0) {
+    if (options && (options != null ? options : []).length > 0) {
       var option = options.find(function (item) {
         return item.value === value;
       });
@@ -7214,14 +7444,16 @@ function SearchVocabularyLabels(_ref) {
       setRenderValue = _useState[1];
 
   var vocabulary = useVocabulary(vocabularyName);
-  var defaultRenderValue = location.get(query);
+  var defaultRenderValue = location.get(query) || '';
   useEffect(function () {
     var _vocabulary$data$item, _vocabulary$data;
 
     var value = defaultRenderValue;
 
     if (((_vocabulary$data$item = vocabulary == null ? void 0 : (_vocabulary$data = vocabulary.data) == null ? void 0 : _vocabulary$data.items) != null ? _vocabulary$data$item : []).length > 0) {
-      var vocabularyValue = vocabulary.data.items.find(function (item) {
+      var _vocabulary$data2;
+
+      var vocabularyValue = vocabulary == null ? void 0 : (_vocabulary$data2 = vocabulary.data) == null ? void 0 : _vocabulary$data2.items.find(function (item) {
         return item.token === value;
       });
 
@@ -7255,7 +7487,7 @@ function SearchVocabularyLabels(_ref) {
   return null;
 }
 
-var initialState$2 = {
+var initialState$3 = {
   page: 0,
   items: [],
   loading: true,
@@ -7274,7 +7506,7 @@ function PanelItems() {
   var intl = useIntl();
   var Ctx = useTraversal();
 
-  var _useSetState = useSetState(initialState$2),
+  var _useSetState = useSetState(initialState$3),
       state = _useSetState[0],
       setState = _useSetState[1];
 
@@ -7290,7 +7522,7 @@ function PanelItems() {
   var page;
 
   try {
-    page = parseInt(location.get('page')) || 0;
+    page = parseInt(location.get('page') || '0');
   } catch (_unused) {
     page = 0;
   }
@@ -7337,7 +7569,7 @@ function PanelItems() {
   var resultQueryParams = [];
   var resultDynamicLocation = [];
   filterSchema.forEach(function (filter) {
-    var itemParam = location.get(filter.attribute_key);
+    var itemParam = location.get(filter.attribute_key) || '';
     resultDynamicLocation.push(itemParam);
 
     if (itemParam) {
@@ -7349,53 +7581,51 @@ function PanelItems() {
     var controller = new AbortController();
     if (Ctx.state.loading) return;
 
-    try {
-      setState({
-        loading: true,
-        total: Ctx.context.length
-      });
-      var get = Ctx.registry.get;
-      var fnName = get('searchEngineQueryParamsFunction', SearchEngine);
-
-      if (sortParsed === undefined) {
-        var defaultSortValue = Ctx.registry.getDefaultSortValue(Ctx.context['@type'], {
-          key: 'id',
-          direction: 'des'
+    var getData = function getData() {
+      try {
+        setState({
+          loading: true,
+          total: Ctx.context.length
         });
-        sortParsed = parser("_sort_" + defaultSortValue.direction + "=" + defaultSortValue.key);
-      }
+        var get = Ctx.registry.get;
+        var fnName = get('searchEngineQueryParamsFunction', SearchEngine);
 
-      var qsParsed = Ctx.client[fnName]({
-        path: Ctx.path,
-        start: page * PageSize,
-        pageSize: PageSize
-      });
-      var qs = '';
+        if (sortParsed === undefined) {
+          var defaultSortValue = Ctx.registry.getDefaultSortValue(Ctx.context['@type']);
+          sortParsed = parser("_sort_" + defaultSortValue.direction + "=" + defaultSortValue.key);
+        }
 
-      if (search || type || resultQueryParams.length > 0) {
-        var _searchParsed, _typeParsed, _sortParsed;
+        var qsParsed = Ctx.client.getQueryParamsSearchFunction(fnName)({
+          path: Ctx.path,
+          start: page * PageSize,
+          pageSize: PageSize
+        });
+        var qs = '';
 
-        qs = buildQs([].concat(qsParsed, (_searchParsed = searchParsed) != null ? _searchParsed : [], (_typeParsed = typeParsed) != null ? _typeParsed : [], (_sortParsed = sortParsed) != null ? _sortParsed : [], resultQueryParams));
-      } else {
-        var _sortParsed2;
+        if (search || type || resultQueryParams.length > 0) {
+          var _searchParsed, _typeParsed, _sortParsed;
 
-        qs = buildQs([].concat(qsParsed, (_sortParsed2 = sortParsed) != null ? _sortParsed2 : []));
-      }
+          qs = buildQs([].concat(qsParsed, (_searchParsed = searchParsed) != null ? _searchParsed : [], (_typeParsed = typeParsed) != null ? _typeParsed : [], (_sortParsed = sortParsed) != null ? _sortParsed : [], resultQueryParams));
+        } else {
+          var _sortParsed2;
 
-      var signal = controller.signal;
-      return Promise.resolve(Ctx.client.search(Ctx.path, qs, false, false, {
-        signal: signal
-      })).then(function (data) {
-        setState({
-          items: data.member,
-          loading: false,
-          total: data.items_count
+          qs = buildQs([].concat(qsParsed, (_sortParsed2 = sortParsed) != null ? _sortParsed2 : []));
+        }
+
+        var signal = controller.signal;
+        return Promise.resolve(Ctx.client.search(Ctx.path, qs, false, false, signal)).then(function (data) {
+          setState({
+            items: data.items,
+            loading: false,
+            total: data.items_count
+          });
         });
-      });
-    } catch (e) {
-      Promise.reject(e);
-    }
+      } catch (e) {
+        return Promise.reject(e);
+      }
+    };
 
+    getData();
     return function () {
       controller.abort();
     };
@@ -7440,12 +7670,14 @@ function PanelItems() {
         var _filter$values;
 
         if (filter.type === 'select' && ((_filter$values = filter.values) != null ? _filter$values : []).length > 0) {
+          var _filter$values2;
+
           return jsx(Select, {
             id: filter.attribute_key,
             placeholder: filter.label,
             appendDefault: true,
             classWrap: "is-size-7 is-fullwidth",
-            options: filter.values,
+            options: (_filter$values2 = filter.values) != null ? _filter$values2 : [],
             value: location.get(filter.attribute_key) || '',
             dataTest: "filterInput" + filter.attribute_key,
             onChange: function onChange(value) {
@@ -7512,7 +7744,7 @@ function PanelItems() {
           var filterData = location.get(filter.attribute_key);
 
           if (filterData) {
-            var _filter$values2;
+            var _filter$values3;
 
             if (filter.type === 'select' && filter.vocabulary) {
               return jsx("div", {
@@ -7521,7 +7753,7 @@ function PanelItems() {
                   vocabularyName: filter == null ? void 0 : filter.vocabulary
                 })
               }, filter.attribute_key);
-            } else if (filter.type === 'select' && ((_filter$values2 = filter.values) != null ? _filter$values2 : []).length > 0) {
+            } else if (filter.type === 'select' && ((_filter$values3 = filter.values) != null ? _filter$values3 : []).length > 0) {
               return jsx("div", {
                 children: jsx(SearchOptionsLabels, {
                   query: filter.attribute_key,
@@ -7567,7 +7799,7 @@ function PanelItems() {
                 className: "has-text-info is-flex is-align-items-center",
                 children: [jsx("span", {
                   children: column.label
-                }), getIcon(column.key, column.isSortable)]
+                }), getIcon(column.key, !!column.isSortable)]
               })
             }, "table-col-" + column.label);
           }), jsx("th", {
@@ -7578,7 +7810,7 @@ function PanelItems() {
         children: [items && items.map(function (item) {
           return jsx(RItem, {
             item: item,
-            search: search,
+            search: search != null ? search : '',
             columns: columns
           }, item['@uid']);
         }), items && items.length === 0 && jsx("tr", {
@@ -7602,17 +7834,19 @@ function PanelItems() {
 }
 
 function BehaviorsView(_ref) {
+  var _context$__behaviors_;
+
   var context = _ref.context,
       schema = _ref.schema;
   var Ctx = useTraversal();
   var getBehavior = Ctx.registry.getBehavior;
-  var behaviors = [].concat(context.__behaviors__, context['@static_behaviors']);
+  var behaviors = [].concat((_context$__behaviors_ = context.__behaviors__) != null ? _context$__behaviors_ : [], Object(context['@static_behaviors']));
 
-  var GetBehavior = function GetBehavior(b) {
-    var Cls = getBehavior(b, BehaviorNotImplemented);
+  var GetBehavior = function GetBehavior(behaviorName) {
+    var Cls = getBehavior(behaviorName, BehaviorNotImplemented);
     return jsx(Cls, {
-      values: context[b],
-      properties: get$1(schema, ['definitions', b, 'properties'], {})
+      values: context[behaviorName],
+      properties: get(schema, ['definitions', behaviorName, 'properties'], {})
     });
   };
 
@@ -7708,9 +7942,11 @@ function PanelProperties() {
   var properties = Object.keys((schema == null ? void 0 : (_schema$data = schema.data) == null ? void 0 : _schema$data.properties) || []).filter(function (key) {
     return !ignoreFields.includes(key);
   }).map(function (key) {
+    var _schema$data2;
+
     return {
       key: key,
-      value: schema.data.properties[key]
+      value: schema == null ? void 0 : (_schema$data2 = schema.data) == null ? void 0 : _schema$data2.properties[key]
     };
   });
   useEffect(function () {
@@ -7722,7 +7958,7 @@ function PanelProperties() {
               setSchema({
                 loading: true
               });
-              return Promise.resolve(Ctx.client.getTypeSchema(Ctx.path, model.type)).then(function (dataJson) {
+              return Promise.resolve(Ctx.client.getTypeSchema(Ctx.path, Ctx.context.type_name)).then(function (dataJson) {
                 setSchema({
                   loading: false,
                   data: dataJson
@@ -7797,7 +8033,7 @@ function PanelProperties() {
                 }), jsx("td", {
                   children: jsx(EditableField, {
                     field: prop,
-                    value: Ctx.context[prop],
+                    value: get(Ctx.context, prop, ''),
                     modifyContent: false
                   })
                 })]
@@ -7821,7 +8057,7 @@ function PanelProperties() {
             })
           }), jsx("tbody", {
             children: properties.map(function (_ref) {
-              var _schema$data$required, _schema$data2;
+              var _schema$data$required, _schema$data3;
 
               var key = _ref.key,
                   value = _ref.value;
@@ -7834,10 +8070,10 @@ function PanelProperties() {
                 }), jsx("td", {
                   children: jsx(EditableField, {
                     field: key,
-                    value: Ctx.context[key],
+                    value: get(Ctx.context, key, ''),
                     schema: value,
                     modifyContent: modifyContent,
-                    required: ((_schema$data$required = (_schema$data2 = schema.data) == null ? void 0 : _schema$data2.required) != null ? _schema$data$required : []).includes(key)
+                    required: ((_schema$data$required = (_schema$data3 = schema.data) == null ? void 0 : _schema$data3.required) != null ? _schema$data$required : []).includes(key)
                   })
                 })]
               }, 'prop' + key);
@@ -7873,14 +8109,6 @@ function PermissionPrinperm(_ref) {
       state = _useSetState[0],
       setState = _useSetState[1];
 
-  var getMultiples = function getMultiples(field, setter) {
-    return function (values) {
-      var _setter;
-
-      setter((_setter = {}, _setter[field] = values, _setter));
-    };
-  };
-
   var savePermission = function savePermission() {
     try {
       if (!state.principal || !state.setting || state.permission.length === 0) {
@@ -7930,7 +8158,7 @@ function PermissionPrinperm(_ref) {
         children: intl.formatMessage(genericMessages.select_principal)
       }), jsx(Select, {
         appendDefault: true,
-        options: principals,
+        options: principals != null ? principals : [],
         onChange: function onChange(value) {
           return setState({
             principal: value
@@ -7944,8 +8172,12 @@ function PermissionPrinperm(_ref) {
         className: "label",
         children: intl.formatMessage(genericMessages.select_permissions)
       }), jsx(Select, {
-        options: permissions,
-        onChange: getMultiples('permission', setState),
+        options: permissions != null ? permissions : [],
+        onChange: function onChange(values) {
+          setState({
+            permission: values
+          });
+        },
         size: 5,
         multiple: true,
         dataTest: "selectPermissionsTest"
@@ -7996,14 +8228,6 @@ function PermissionPrinrole(_ref) {
       state = _useSetState[0],
       setState = _useSetState[1];
 
-  var getMultiples = function getMultiples(field, setter) {
-    return function (values) {
-      var _setter;
-
-      setter((_setter = {}, _setter[field] = values, _setter));
-    };
-  };
-
   var savePermission = function savePermission() {
     try {
       if (!state.principal || !state.setting || state.roles.length === 0) {
@@ -8053,7 +8277,7 @@ function PermissionPrinrole(_ref) {
         children: intl.formatMessage(genericMessages.select_principal)
       }), jsx(Select, {
         appendDefault: true,
-        options: principals,
+        options: principals != null ? principals : [],
         onChange: function onChange(value) {
           return setState({
             principal: value
@@ -8068,7 +8292,11 @@ function PermissionPrinrole(_ref) {
         children: intl.formatMessage(genericMessages.select_role)
       }), jsx(Select, {
         options: roles,
-        onChange: getMultiples('roles', setState),
+        onChange: function onChange(values) {
+          setState({
+            roles: values
+          });
+        },
         size: 5,
         multiple: true,
         dataTest: "selectRoleTest"
@@ -8119,14 +8347,6 @@ function PermissionRoleperm(_ref) {
       state = _useSetState[0],
       setState = _useSetState[1];
 
-  var getMultiples = function getMultiples(field, setter) {
-    return function (values) {
-      var _setter;
-
-      setter((_setter = {}, _setter[field] = values, _setter));
-    };
-  };
-
   var savePermission = function savePermission() {
     try {
       if (!state.role || !state.setting || state.permission.length === 0) {
@@ -8190,8 +8410,12 @@ function PermissionRoleperm(_ref) {
         className: "label",
         children: intl.formatMessage(genericMessages.select_permissions)
       }), jsx(Select, {
-        options: permissions,
-        onChange: getMultiples('permission', setState),
+        options: permissions != null ? permissions : [],
+        onChange: function onChange(values) {
+          setState({
+            permission: values
+          });
+        },
         dataTest: "selectPermissionsTest",
         size: 5,
         multiple: true
@@ -8324,7 +8548,18 @@ function PanelPermissions() {
   useEffect(function () {
     get('@sharing');
   }, [reset]);
-  var perms = new Sharing(result);
+  var perms = useMemo(function () {
+    if (result) {
+      return new Sharing(result);
+    }
+
+    return null;
+  }, [result]);
+
+  if (perms === null) {
+    return null;
+  }
+
   return jsxs("div", {
     className: "columns",
     children: [!loading && jsxs("div", {
@@ -8482,14 +8717,14 @@ function AddPermission(_ref) {
           return Promise.resolve(Ctx.client.getPrincipals(Ctx.path)).then(function (principalsData) {
             var groups = principalsData.groups.map(function (group) {
               return {
-                text: group.id,
-                value: group.id
+                text: group['@name'],
+                value: group['@name']
               };
             });
             var users = principalsData.users.map(function (user) {
               return {
-                text: user.fullname || user.id,
-                value: user.id
+                text: user.fullname || user['@name'],
+                value: user['@name']
               };
             });
             principals = [].concat(groups, users);
@@ -8560,18 +8795,6 @@ var prepareAvailable = function prepareAvailable(items, already, title) {
     text: "Add " + title
   };
   if (items.length === 0) return [];
-
-  if (items[0] && typeof items[0] === 'string') {
-    return [def].concat(items.map(function (x) {
-      return {
-        value: x,
-        text: x
-      };
-    })).filter(function (item) {
-      return !already.includes(item.value);
-    });
-  }
-
   return [def].concat(items).filter(function (item) {
     return !already.includes(item.value);
   });
@@ -8584,7 +8807,7 @@ function TagsWidget(_ref) {
       noData = _ref.noData,
       onChange = _ref.onChange,
       loading = _ref.loading;
-  var selectRef = useRef();
+  var selectRef = useRef(null);
 
   var _useState = useState(items),
       result = _useState[0],
@@ -8632,7 +8855,7 @@ function TagsWidget(_ref) {
           marginBottom: '20px'
         },
         children: noData
-      }), available.length > 1 && jsx("li", {
+      }), (available != null ? available : []).length > 1 && jsx("li", {
         className: "widget-list-add select is-small",
         children: jsx(Select, {
           options: availableData,
@@ -8650,13 +8873,13 @@ function TagsWidget(_ref) {
   });
 }
 
-var initialState$3 = {
-  types: undefined
+var initialState$4 = {
+  types: []
 };
 function CreateButton() {
   var intl = useIntl();
 
-  var _useSetState = useSetState(initialState$3),
+  var _useSetState = useSetState(initialState$4),
       state = _useSetState[0],
       setState = _useSetState[1];
 
@@ -8744,7 +8967,7 @@ function ContextToolbar(_ref) {
   var AddButton = _ref.AddButton;
   var intl = useIntl();
 
-  var _useSetState2 = useSetState(initialState$3),
+  var _useSetState2 = useSetState(initialState$4),
       state = _useSetState2[0],
       setState = _useSetState2[1];
 
@@ -8755,7 +8978,7 @@ function ContextToolbar(_ref) {
 
   var traversal = useTraversal();
   var Config = useConfig();
-  var searchText = location.get('q');
+  var searchText = location.get('q') || '';
 
   var _useState = useState(searchText || ''),
       searchValue = _useState[0],
@@ -8768,14 +8991,13 @@ function ContextToolbar(_ref) {
     setSearchValue(searchText);
   }, [searchText]);
 
-  var onSearchQuery = function onSearchQuery(ev) {
-    var search = ev.target[0].value;
+  var onSearchQuery = function onSearchQuery(event) {
+    event.preventDefault();
     setLocation({
-      q: search,
+      q: event.currentTarget.elements.filterInput.value,
       tab: 'Items',
       page: 0
     });
-    ev.preventDefault();
   };
 
   var onSearchByType = function onSearchByType(typeText) {
@@ -8809,7 +9031,8 @@ function ContextToolbar(_ref) {
               type: "text",
               className: "input is-size-7",
               placeholder: intl.formatMessage(genericMessages.search),
-              "data-test": "inputFilterTest"
+              "data-test": "inputFilterTest",
+              id: "filterInput"
             })
           }), jsx("div", {
             className: "control",
@@ -8836,7 +9059,9 @@ function ContextToolbar(_ref) {
             value: item
           };
         }),
-        onChange: onSearchByType
+        onChange: function onChange(value) {
+          return onSearchByType(value);
+        }
       })
     }), traversal.hasPerm('guillotina.AddContent') && jsx("div", {
       className: "level-item",
@@ -8877,17 +9102,12 @@ function TabsPanel(_ref2) {
       location = _useLocation[0],
       setLocation = _useLocation[1];
 
-  if (location.get('tab')) {
-    currentTab = location.get('tab');
-  } else {
-    currentTab = currentTab || Object.keys(tabs)[0];
-  }
+  currentTab = location.get('tab') || Object.keys(tabs)[0];
   /*if (!Object.keys(tabs).includes(currentTab)) {
     setLocation(defaultTab)
     currentTab = defaultTab
   }*/
 
-
   var _useState = useState(currentTab),
       current = _useState[0],
       setTab = _useState[1];
@@ -8954,14 +9174,14 @@ var tabsPermissions = {
   Behaviors: 'guillotina.ModifyContent',
   Permissions: 'guillotina.SeePermissions'
 };
-function FolderCtx(props) {
+function FolderCtx() {
   var ctx = useTraversal();
   var calculated = ctx.filterTabs(tabs, tabsPermissions);
-  return jsx(TabsPanel, _extends({
+  return jsx(TabsPanel, {
     tabs: calculated,
     currentTab: "Items",
-    rightToolbar: jsx(ContextToolbar, _extends({}, props))
-  }, props));
+    rightToolbar: jsx(ContextToolbar, {})
+  });
 }
 
 var tabs$1 = {
@@ -8975,13 +9195,13 @@ var tabsPermissions$1 = {
   Behaviors: 'guillotina.ModifyContent',
   Permissions: 'guillotina.SeePermissions'
 };
-function ItemCtx(props) {
+function ItemCtx() {
   var ctx = useTraversal();
   var calculated = ctx.filterTabs(tabs$1, tabsPermissions$1);
-  return jsx(TabsPanel, _extends({
+  return jsx(TabsPanel, {
     tabs: calculated,
     currentTab: "Properties"
-  }, props));
+  });
 }
 
 function _catch$7(body, recover) {
@@ -9000,8 +9220,9 @@ function _catch$7(body, recover) {
 
 function ApplicationCtx() {
   var intl = useIntl();
-  var context = useTraversal();
-  var databases = context.state.context.databases;
+  var traversal = useTraversal();
+  var appContext = traversal.state.context;
+  var databases = appContext.databases;
   return jsxs(Fragment, {
     children: [jsx("h3", {
       children: intl.formatMessage({
@@ -9015,22 +9236,26 @@ function ApplicationCtx() {
       className: "container",
       children: [jsx(ItemTitle, {
         title: "Objects"
-      }), databases.map(function (db) {
-        return jsx(Item, {
-          item: {
-            id: db,
-            path: "/" + db + "/"
-          },
-          icon: 'fas fa-database'
-        }, db);
+      }), jsx("table", {
+        children: jsx("tbody", {
+          children: databases.map(function (db) {
+            return jsx(Item, {
+              item: {
+                id: db,
+                path: "/" + db + "/"
+              },
+              icon: 'fas fa-database'
+            }, db);
+          })
+        })
       })]
     })]
   });
 }
 function DatabaseCtx() {
-  var context = useTraversal();
-  var containers = context.state.context.containers;
-  var path = context.state.path;
+  var traversal = useTraversal();
+  var containers = traversal.state.context.containers;
+  var path = traversal.state.path;
   return jsx(Fragment, {
     children: jsxs("div", {
       className: "container",
@@ -9318,18 +9543,17 @@ function UsersToolbar() {
 
   var searchText = location.get('q');
 
-  var onSearchQuery = function onSearchQuery(ev) {
-    var search = ev.target[0].value;
+  var onSearchQuery = function onSearchQuery(event) {
+    event.preventDefault();
     setLocation({
-      q: search,
+      q: event.currentTarget.elements.filterInput.value,
       page: 0
     });
-    ev.preventDefault();
   }; // cleanup form on state.search change
 
 
   useEffect(function () {
-    if (!searchText || searchText === '') {
+    if (ref.current && (!searchText || searchText === '')) {
       ref.current.value = '';
     }
   }, [searchText]);
@@ -9349,7 +9573,8 @@ function UsersToolbar() {
               type: "text",
               className: "input is-size-7",
               placeholder: intl.formatMessage(genericMessages.search),
-              "data-test": "inputFilterTest"
+              "data-test": "inputFilterTest",
+              id: "filterInput"
             })
           }), jsx("div", {
             className: "control",
@@ -9381,12 +9606,12 @@ function UsersToolbar() {
     })]
   });
 }
-function UsersCtx(props) {
-  return jsx(TabsPanel, _extends({
+function UsersCtx() {
+  return jsx(TabsPanel, {
     tabs: tabs$3,
     currentTab: "Users",
     rightToolbar: jsx(UsersToolbar, {})
-  }, props));
+  });
 }
 function UserCtx() {
   var intl = useIntl();
@@ -9403,9 +9628,10 @@ function UserCtx() {
       state = _useState[0],
       setState = _useState[1];
 
+  var userDataContext = Ctx.context;
   var fields = {
     user_groups: [],
-    user_roles: Ctx.context.user_roles
+    user_roles: userDataContext.user_roles
   };
 
   var _useRemoteField = useRemoteField(fields),
@@ -9509,7 +9735,7 @@ function UserCtx() {
                   "value": "Username"
                 }]
               }), ":", ' ']
-            }), ' ', Ctx.context.username, " (", Ctx.context.email, ")"]
+            }), ' ', userDataContext.username, " (", userDataContext.email, ")"]
           }), jsxs("p", {
             children: [jsxs("label", {
               children: [' ', intl.formatMessage({
@@ -9519,7 +9745,7 @@ function UserCtx() {
                   "value": "Creation Date"
                 }]
               }), ":", ' ']
-            }), ' ', formatDate(Ctx.context.creation_date)]
+            }), ' ', formatDate(userDataContext.creation_date)]
           }), jsxs("p", {
             children: [jsxs("label", {
               children: [' ', intl.formatMessage({
@@ -9529,7 +9755,7 @@ function UserCtx() {
                   "value": "Modification Date"
                 }]
               }), ":", ' ']
-            }), ' ', formatDate(Ctx.context.modification_date)]
+            }), ' ', formatDate(userDataContext.modification_date)]
           }), jsx(Button, {
             className: "is-size-7 is-info",
             onClick: function onClick() {
@@ -9548,7 +9774,7 @@ function UserCtx() {
           onSubmit: function onSubmit(ev) {
             return updateObject(ev);
           },
-          formData: Ctx.context,
+          formData: userDataContext,
           exclude: ['password'],
           remotes: remotes,
           submitButton: false,
@@ -9562,7 +9788,7 @@ function UserCtx() {
         className: "column",
         children: [jsx(TagsWidget, {
           onChange: updateRemote('user_groups'),
-          items: Ctx.context.user_groups,
+          items: userDataContext.user_groups,
           title: "Groups",
           noData: intl.formatMessage({
             id: "there_is_no_groups_for_this_user",
@@ -9583,7 +9809,12 @@ function UserCtx() {
               "value": "The user doesn't have any role"
             }]
           }),
-          available: state.roles
+          available: state.roles.map(function (x) {
+            return {
+              value: x,
+              text: x
+            };
+          })
         })]
       })]
     })]
@@ -9599,7 +9830,7 @@ function CopyItems(props) {
     try {
       return Promise.resolve(Promise.all(items.map(function (item, i) {
         var input = form[i + 1] || {};
-        return Ctx.client.post("" + Ctx.path + item['@name'] + "/@duplicate", {
+        return Ctx.client.post("" + Ctx.path + item.id + "/@duplicate", {
           destination: path,
           new_id: input.value || getNewId(item.id)
         });
@@ -9645,7 +9876,7 @@ function CopyItems(props) {
         }), jsx("input", {
           type: "text",
           className: "input",
-          "data-test": "inputCopyIdTest-" + item['@name'],
+          "data-test": "inputCopyIdTest-" + item.id,
           defaultValue: getNewId(item.id)
         })]
       }, item.id);
@@ -9718,9 +9949,9 @@ function MoveItems(props) {
   var moveItems = function moveItems(path) {
     try {
       return Promise.resolve(Promise.all(items.map(function (item) {
-        return Ctx.client.post("" + Ctx.path + item['@name'] + "/@move", {
+        return Ctx.client.post("" + Ctx.path + item.id + "/@move", {
           destination: path,
-          new_id: item['@name']
+          new_id: item.id
         });
       }))).then(function (responses) {
         Ctx.refresh();
@@ -10057,18 +10288,17 @@ function GroupToolbar() {
 
   var searchText = location.get('q');
 
-  var onSearchQuery = function onSearchQuery(ev) {
-    var search = ev.target[0].value;
+  var onSearchQuery = function onSearchQuery(event) {
+    event.preventDefault();
     setLocation({
-      q: search,
+      q: event.currentTarget.elements.filterInput.value,
       page: 0
     });
-    ev.preventDefault();
   }; // cleanup form on state.search change
 
 
   useEffect(function () {
-    if (!searchText || searchText === '') {
+    if (ref.current && (!searchText || searchText === '')) {
       ref.current.value = '';
     }
   }, [searchText]);
@@ -10088,7 +10318,8 @@ function GroupToolbar() {
               type: "text",
               className: "input is-size-7",
               placeholder: intl.formatMessage(genericMessages.search),
-              "data-test": "inputFilterTest"
+              "data-test": "inputFilterTest",
+              id: "filterInput"
             })
           }), jsx("div", {
             className: "control",
@@ -10126,12 +10357,12 @@ function GroupToolbar() {
     })]
   });
 }
-function GroupsCtx(props) {
-  return jsx(TabsPanel, _extends({
+function GroupsCtx() {
+  return jsx(TabsPanel, {
     tabs: tabs$4,
     currentTab: "Groups",
     rightToolbar: jsx(GroupToolbar, {})
-  }, props));
+  });
 }
 var sortParsed = parser("_sort_asc=id");
 var searchParsed = parser('type_name=User');
@@ -10146,6 +10377,7 @@ function GroupCtx() {
       roles = _useState[0],
       setRoles = _useState[1];
 
+  var groupDataContext = Ctx.context;
   useEffect(function () {
     var getRoles = function getRoles() {
       try {
@@ -10199,11 +10431,11 @@ function GroupCtx() {
   var addRole = function addRole(role) {
     try {
       return Promise.resolve(patch({
-        user_roles: Ctx.context.user_roles.concat(role)
+        user_roles: groupDataContext.user_roles.concat(role)
       })).then(function (_ref) {
         var isError = _ref.isError,
             errorMessage = _ref.errorMessage;
-        handleResponse(isError, intl.formatMessage({
+        handleResponse(!!isError, intl.formatMessage({
           id: "role_added_to_group",
           defaultMessage: [{
             "type": 0,
@@ -10217,7 +10449,7 @@ function GroupCtx() {
           }]
         }, {
           role: role
-        }), errorMessage);
+        }), errorMessage != null ? errorMessage : '');
       });
     } catch (e) {
       return Promise.reject(e);
@@ -10227,13 +10459,13 @@ function GroupCtx() {
   var removeRole = function removeRole(role) {
     try {
       return Promise.resolve(patch({
-        user_roles: Ctx.context.user_roles.filter(function (r) {
+        user_roles: groupDataContext.user_roles.filter(function (r) {
           return r !== role;
         })
       })).then(function (_ref2) {
         var isError = _ref2.isError,
             errorMessage = _ref2.errorMessage;
-        handleResponse(isError, intl.formatMessage({
+        handleResponse(!!isError, intl.formatMessage({
           id: "role_removed_from_group",
           defaultMessage: [{
             "type": 0,
@@ -10247,7 +10479,7 @@ function GroupCtx() {
           }]
         }, {
           role: role
-        }), errorMessage);
+        }), errorMessage != null ? errorMessage : '');
       });
     } catch (e) {
       return Promise.reject(e);
@@ -10257,30 +10489,32 @@ function GroupCtx() {
   var addUser = function addUser(newUserId) {
     try {
       var data = {};
-      Ctx.context.users.forEach(function (user) {
+      groupDataContext.users.forEach(function (user) {
         data[user] = true;
       });
       data[newUserId] = true;
       return Promise.resolve(Ctx.client.rest.patch(Ctx.containerPath + "@groups/" + Ctx.context['@name'], {
         users: data
-      })).then(function (_ref3) {
-        var isError = _ref3.isError,
-            errorMessage = _ref3.errorMessage;
-        handleResponse(isError, intl.formatMessage({
-          id: "user_added_to_group",
-          defaultMessage: [{
-            "type": 0,
-            "value": "User "
-          }, {
-            "type": 1,
-            "value": "user"
+      })).then(function (response) {
+        return Promise.resolve(processResponse(response)).then(function (_ref3) {
+          var isError = _ref3.isError,
+              errorMessage = _ref3.errorMessage;
+          handleResponse(isError, intl.formatMessage({
+            id: "user_added_to_group",
+            defaultMessage: [{
+              "type": 0,
+              "value": "User "
+            }, {
+              "type": 1,
+              "value": "user"
+            }, {
+              "type": 0,
+              "value": " added to group"
+            }]
           }, {
-            "type": 0,
-            "value": " added to group"
-          }]
-        }, {
-          user: newUserId
-        }), errorMessage);
+            user: newUserId
+          }), errorMessage != null ? errorMessage : '');
+        });
       });
     } catch (e) {
       return Promise.reject(e);
@@ -10290,29 +10524,31 @@ function GroupCtx() {
   var removeUser = function removeUser(userToRemove) {
     try {
       var data = {};
-      Ctx.context.users.forEach(function (user) {
+      groupDataContext.users.forEach(function (user) {
         data[user] = userToRemove !== user;
       });
       return Promise.resolve(Ctx.client.rest.patch(Ctx.containerPath + "@groups/" + Ctx.context['@name'], {
         users: data
-      })).then(function (_ref4) {
-        var isError = _ref4.isError,
-            errorMessage = _ref4.errorMessage;
-        handleResponse(isError, intl.formatMessage({
-          id: "user_removed_from_group",
-          defaultMessage: [{
-            "type": 0,
-            "value": "User "
-          }, {
-            "type": 1,
-            "value": "user"
+      })).then(function (response) {
+        return Promise.resolve(processResponse(response)).then(function (_ref4) {
+          var isError = _ref4.isError,
+              errorMessage = _ref4.errorMessage;
+          handleResponse(isError, intl.formatMessage({
+            id: "user_removed_from_group",
+            defaultMessage: [{
+              "type": 0,
+              "value": "User "
+            }, {
+              "type": 1,
+              "value": "user"
+            }, {
+              "type": 0,
+              "value": " removed from group"
+            }]
           }, {
-            "type": 0,
-            "value": " removed from group"
-          }]
-        }, {
-          user: userToRemove
-        }), errorMessage);
+            user: userToRemove
+          }), errorMessage != null ? errorMessage : '');
+        });
       });
     } catch (e) {
       return Promise.reject(e);
@@ -10367,11 +10603,13 @@ function GroupCtx() {
           })
         }), jsx(Select, {
           options: roles.filter(function (role) {
-            return !Ctx.context.user_roles.includes(role.value);
+            return !groupDataContext.user_roles.includes(role.value);
           }),
           appendDefault: true,
-          onChange: addRole
-        }), jsx("hr", {}), Ctx.context.user_roles.map(function (urole) {
+          onChange: function onChange(value) {
+            return addRole(value);
+          }
+        }), jsx("hr", {}), groupDataContext.user_roles.map(function (urole) {
           return jsx("p", {
             className: "control",
             children: jsx(Tag, {
@@ -10403,7 +10641,7 @@ function GroupCtx() {
           traversal: Ctx,
           onChange: addUser,
           btnClass: "is-small"
-        }), jsx("hr", {}), Ctx.context.users.map(function (user) {
+        }), jsx("hr", {}), groupDataContext.users.map(function (user) {
           return jsx("p", {
             className: "control",
             children: jsx(Tag, {
@@ -10552,7 +10790,7 @@ function Path() {
   var links = buildPaths(segments);
 
   if (segments.length === 1) {
-    return false;
+    return null;
   }
 
   return jsx("nav", {
@@ -10715,19 +10953,15 @@ var getItemsColumn = function getItemsColumn(type) {
   return undefined;
 };
 
-var getForm = function getForm(type, fallback) {
-  if (fallback === void 0) {
-    fallback = BaseForm;
-  }
+var getView = function getView(name) {
+  return registry.views[name];
+};
 
-  return registry.forms[type] || fallback;
+var getForm = function getForm(type, fallback) {
+  return registry.forms[type] || fallback || BaseForm;
 };
 
 var getAction = function getAction(type, fallback) {
-  if (fallback === void 0) {
-    fallback = undefined;
-  }
-
   return registry.actions[type] || fallback;
 };
 
@@ -10741,24 +10975,24 @@ var getProperties = function getProperties(type) {
 
 var getSchemas = function getSchemas(type) {
   return registry.schemas[type] || {};
-  /*
-    filters: [
-      {
-        attribute_key: string,
-        label: string,
-        type: 'select' | 'input'
-        vocabulary: string | undefined
-        values: {[key:string]:any}[]
-      }
-    ]
-  */
 };
 
 var getFieldsToFilter = function getFieldsToFilter(type, fallback) {
+  if (fallback === void 0) {
+    fallback = ['title'];
+  }
+
   return registry.fieldsToFilter[type] || fallback;
 };
 
 var getDefaultSortValue = function getDefaultSortValue(type, fallback) {
+  if (fallback === void 0) {
+    fallback = {
+      key: 'id',
+      direction: 'des'
+    };
+  }
+
   return registry.defaultSortValue[type] || fallback;
 };
 
@@ -10772,7 +11006,8 @@ function useRegistry(data) {
   if (data && !ref.current) {
     ref.current = true;
     Object.keys(data).map(function (key) {
-      return registry[key] = _extends({}, registry[key], data[key]);
+      var registryKey = key;
+      registry[registryKey] = _extends({}, registry[registryKey], data[registryKey]);
     });
   }
 
@@ -10787,7 +11022,8 @@ function useRegistry(data) {
     getItemsColumn: getItemsColumn,
     getFieldsToFilter: getFieldsToFilter,
     getDefaultSortValue: getDefaultSortValue,
-    getSchemas: getSchemas
+    getSchemas: getSchemas,
+    getView: getView
   };
 }
 /*
@@ -10807,83 +11043,6 @@ const registry = {
 
 */
 
-var initialState$4 = {
-  path: '',
-  loading: false,
-  context: undefined,
-  flash: {
-    message: undefined,
-    type: undefined
-  },
-  action: {
-    action: undefined,
-    params: undefined
-  },
-  permissions: undefined,
-  errorStatus: undefined,
-  registry: {},
-  refresh: undefined
-};
-function guillotinaReducer(state, action) {
-  switch (action.type) {
-    case 'SET_PATH':
-      return _extends({}, state, {
-        path: action.payload,
-        loading: true
-      });
-
-    case 'SET_CONTEXT':
-      return _extends({}, state, action.payload, {
-        errorStatus: undefined,
-        loading: false
-      });
-
-    case 'SET_ERROR':
-      return _extends({}, state, {
-        errorStatus: action.payload,
-        loading: false
-      });
-
-    case 'SET_FLASH':
-      return _extends({}, state, action.payload);
-
-    case 'CLEAR_FLASH':
-      return _extends({}, state, {
-        flash: {
-          message: undefined,
-          type: undefined
-        }
-      });
-
-    case 'SET_ACTION':
-      return _extends({}, state, {
-        action: action.payload
-      });
-
-    case 'CLEAR_ACTION':
-      return _extends({}, state, {
-        action: {
-          action: undefined,
-          params: undefined
-        }
-      });
-
-    case 'REFRESH':
-      return _extends({}, state, {
-        refresh: Date.now(),
-        loading: !action.payload.transparent
-      });
-
-    case 'APPLY':
-      return _extends({}, state, {
-        context: _extends({}, state.context, action.payload)
-      });
-
-    default:
-      return state;
-  }
-}
-
 var actions = [
 	{
 		type: 0,
@@ -13701,7 +13860,7 @@ function Guillotina(_ref) {
   var _useConfig = useConfig(config),
       Permissions = _useConfig.Permissions;
 
-  var registry = useRegistry(props.registry || {}); // Location is cooked routing solution (only uses search params)
+  var registry = useRegistry(props.registry); // Location is cooked routing solution (only uses search params)
 
   var _useLocation = useLocation(),
       location = _useLocation[0]; // if there is no path provided just go to root
@@ -13710,10 +13869,10 @@ function Guillotina(_ref) {
   var searchPath = location.get('path') || '/';
 
   if (searchPath && searchPath !== '') {
-    initialState$4.path = searchPath;
+    initialState.path = searchPath;
   }
 
-  var _useReducer = useReducer(guillotinaReducer, initialState$4),
+  var _useReducer = useReducer(guillotinaReducer, initialState),
       state = _useReducer[0],
       dispatch = _useReducer[1];
 
@@ -13721,8 +13880,10 @@ function Guillotina(_ref) {
       refresh = state.refresh;
   useEffect(function () {
     dispatch({
-      type: 'SET_PATH',
-      payload: searchPath
+      type: GuillotinaReducerActionTypes.SET_PATH,
+      payload: {
+        path: searchPath
+      }
     });
   }, [searchPath]);
   useEffect(function () {
@@ -13731,14 +13892,18 @@ function Guillotina(_ref) {
         return Promise.resolve(client.getContext(path)).then(function (data) {
           if (data.status === 401) {
             dispatch({
-              type: 'SET_ERROR',
-              payload: 'notallowed'
+              type: GuillotinaReducerActionTypes.SET_ERROR,
+              payload: {
+                errorStatus: 'notallowed'
+              }
             });
             return;
           } else if (data.status === 404) {
             dispatch({
-              type: 'SET_ERROR',
-              payload: 'notfound'
+              type: GuillotinaReducerActionTypes.SET_ERROR,
+              payload: {
+                errorStatus: 'notallowed'
+              }
             });
             return;
           }
@@ -13747,7 +13912,7 @@ function Guillotina(_ref) {
             return Promise.resolve(client.canido(path, Permissions)).then(function (pr) {
               return Promise.resolve(pr.json()).then(function (permissions) {
                 dispatch({
-                  type: 'SET_CONTEXT',
+                  type: GuillotinaReducerActionTypes.SET_CONTEXT,
                   payload: {
                     context: context,
                     permissions: permissions
@@ -13764,9 +13929,9 @@ function Guillotina(_ref) {
 
     initContext();
   }, [path, refresh, client]);
-  var ErrorBoundary = registry.get('views', 'ErrorBoundary');
-  var NotAllowed = registry.get('views', 'NotAllowed');
-  var NotFound = registry.get('views', 'NotFound');
+  var ErrorBoundary = registry.getView('ErrorBoundary');
+  var NotAllowed = registry.getView('NotAllowed');
+  var NotFound = registry.getView('NotFound');
   var Path = registry.get('components', 'Path');
   var contextData = {
     url: url,
@@ -13789,7 +13954,7 @@ function Guillotina(_ref) {
     children: jsxs(ErrorBoundary, {
       children: [!errorStatus && jsx(TraversalProvider, _extends({}, contextData, {
         children: permissions && jsxs(React.Fragment, {
-          children: [action.action && jsx(Action, _extends({}, action.params)), jsx("div", {
+          children: [action.action && Action !== null && jsx(Action, _extends({}, action.params)), jsx("div", {
             className: "level",
             children: jsx("div", {
               className: "level-left",
@@ -13798,7 +13963,7 @@ function Guillotina(_ref) {
                 children: jsx(Path, {})
               })
             })
-          }), jsx(Flash, {}), Main && jsx(ErrorBoundary, {
+          }), jsx(Flash, {}), Main !== undefined && jsx(ErrorBoundary, {
             children: jsxs("div", {
               className: "box main-panel",
               children: [state.loading && jsx(Loading, {}), !state.loading && jsx(Main, {
@@ -13908,7 +14073,7 @@ var ERRORS = {
 var initialState$5 = {
   username: '',
   password: '',
-  loading: undefined,
+  loading: false,
   errors: undefined
 };
 var Login = function Login(_ref) {
@@ -13924,7 +14089,7 @@ var Login = function Login(_ref) {
 
   var inputRef = useRef(null);
   useEffect(function () {
-    if (inputRef) {
+    if (inputRef && inputRef.current) {
       inputRef.current.focus();
     }
   }, [inputRef]);
@@ -14145,30 +14310,30 @@ function RequiredFieldsForm(_ref) {
     dataTest: dataTest,
     children: [schema && schema.data && !schema.loading && schema.formFields.map(function (key) {
       if (!ignoreFiels.includes(key)) {
-        var _value$title;
+        var _schema$data, _value$title, _schema$data2;
 
-        var value = schema.data.properties[key];
+        var value = (_schema$data = schema.data) == null ? void 0 : _schema$data.properties[key];
         return jsx(EditComponent, {
           id: key,
           placeholder: (_value$title = value == null ? void 0 : value.title) != null ? _value$title : '',
           className: "",
           required: true,
-          schema: schema.data.properties[key],
-          setValue: function setValue(ev) {
+          schema: (_schema$data2 = schema.data) == null ? void 0 : _schema$data2.properties[key],
+          setValue: function setValue(value) {
             if (key === 'title') {
               var _extends2;
 
               setFormData(_extends({}, formData, (_extends2 = {
-                uuid: stringToSlug(ev)
-              }, _extends2[key] = ev, _extends2)));
+                uuid: stringToSlug(value)
+              }, _extends2[key] = value, _extends2)));
             } else if (key === 'uuid') {
               setFormData(_extends({}, formData, {
-                uuid: stringToSlug(ev)
+                uuid: stringToSlug(value)
               }));
             } else {
               var _extends3;
 
-              setFormData(_extends({}, formData, (_extends3 = {}, _extends3[key] = ev, _extends3)));
+              setFormData(_extends({}, formData, (_extends3 = {}, _extends3[key] = value, _extends3)));
             }
           },
           error: errors[key],
@@ -14362,7 +14527,7 @@ var Auth = /*#__PURE__*/function () {
 
     if (!authToken) return {};
 
-    if (this.willExpire(expires) && this.retryRefresh < this.maxRetry) {
+    if (this.willExpire(expires != null ? expires : '') && this.retryRefresh < this.maxRetry) {
 
       (function () {
         try {
@@ -14420,5 +14585,14 @@ var Auth = /*#__PURE__*/function () {
   return 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, 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 };
+var Setting;
+
+(function (Setting) {
+  Setting["Allow"] = "Allow";
+  Setting["AllowSingle"] = "AllowSingle";
+  Setting["Deny"] = "Deny";
+  Setting["Unset"] = "Unset";
+})(Setting || (Setting = {}));
+
+export { AddItem, AddPermission, AllItemsCheckbox, ApplicationCtx, Auth, AuthContext, BaseForm, BehaviorNotImplemented, BehaviorsView, Button, Checkbox, ClientContext, ClientProvider, 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, Setting, Sharing, Table, TabsPanel, Tag, TagsWidget, TdLink, Textarea, Traversal, TraversalContext, TraversalProvider, UserCtx, UserForm, UsersCtx, UsersToolbar, VocabularyRenderField, base64ToArrayBuffer, buildQs, classnames, debounce, defaultComponent, defaultConfig, formatDate, generateUID, genericFileMessages, genericMessages, 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.esm.js.map