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

package/dist/react-gmi.modern.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';
@@ -40,6 +40,97 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
+const 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;
+  }
+}
+
 const AuthContext = createContext({});
 const ClientContext = createContext(null);
 class Traversal {
@@ -68,7 +159,7 @@ class Traversal {
     transparent = false
   } = {}) {
     this.dispatch({
-      type: 'REFRESH',
+      type: GuillotinaReducerActionTypes.REFRESH,
       payload: {
         transparent
       }
@@ -84,6 +175,10 @@ class Traversal {
   }
 
   get context() {
+    if (this.state.context === undefined) {
+      throw new Error('Context is not loaded');
+    }
+
     return this.state.context;
   }
 
@@ -94,14 +189,16 @@ class Traversal {
   apply(data) {
     // apply a optimistic update to context
     this.dispatch({
-      type: 'APPLY',
-      payload: data
+      type: GuillotinaReducerActionTypes.APPLY,
+      payload: {
+        context: data
+      }
     });
   }
 
   flash(message, type) {
     this.dispatch({
-      type: 'SET_FLASH',
+      type: GuillotinaReducerActionTypes.SET_FLASH,
       payload: {
         flash: {
           message,
@@ -118,13 +215,14 @@ class Traversal {
 
   clearFlash() {
     this.dispatch({
-      type: 'CLEAR_FLASH'
+      type: GuillotinaReducerActionTypes.CLEAR_FLASH,
+      payload: {}
     });
   }
 
   doAction(action, params = {}) {
     this.dispatch({
-      type: 'SET_ACTION',
+      type: GuillotinaReducerActionTypes.SET_ACTION,
       payload: {
         action,
         params
@@ -134,7 +232,8 @@ class Traversal {
 
   cancelAction() {
     this.dispatch({
-      type: 'CLEAR_ACTION'
+      type: GuillotinaReducerActionTypes.CLEAR_ACTION,
+      payload: {}
     });
   }
 
@@ -170,7 +269,13 @@ function TraversalProvider(_ref2) {
   });
 }
 function useTraversal() {
-  return useContext(TraversalContext);
+  const traversal = useContext(TraversalContext);
+
+  if (!traversal) {
+    throw new Error('useTraversal must be used within a TraversalProvider');
+  }
+
+  return traversal;
 }
 function ClientProvider({
   children,
@@ -182,7 +287,13 @@ function ClientProvider({
   });
 }
 function useGuillotinaClient() {
-  return useContext(ClientContext);
+  const client = useContext(ClientContext);
+
+  if (!client) {
+    throw new Error('useGuillotinaClient must be used within a ClientProvider');
+  }
+
+  return client;
 }
 
 const genericMessages = defineMessages({
@@ -703,7 +814,7 @@ function stringToSlug(str) {
 function sleep(ms) {
   return new Promise(resolve => {
     setTimeout(function () {
-      resolve(null);
+      resolve();
     }, ms);
   });
 }
@@ -734,7 +845,7 @@ const Button = ({
   disabled: _disabled = false,
   dataTest
 }) => {
-  let css = [].concat('button', ..._className.split(' '));
+  let css = [..._className.split(' '), 'button'];
   if (_loading) css = css.concat('is-loading');
   return jsx("p", {
     className: "control",
@@ -749,6 +860,41 @@ const Button = ({
   });
 };
 
+const formatDate = str => {
+  const d = new Date(str);
+  const minutes = d.getMinutes() < 10 ? `0${d.getMinutes()}` : d.getMinutes();
+  return `${d.getDate()}/${d.getMonth() + 1}/${d.getFullYear()} ${d.getHours()}:${minutes}`;
+};
+const get = (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
+
+  const 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((prevObj, key) => prevObj && prevObj[key], obj)) != null ? _pathArray$reduce : defValue;
+};
+function getNewId(id = '') {
+  const suffix = '-copy-';
+  const rgx = new RegExp(`($|${suffix}\\d*)`);
+  return stringToSlug(id).replace(rgx, r => {
+    const num = parseInt(r.replace(suffix, '') || '0');
+    return `${suffix}${num + 1}`;
+  });
+}
+function debounce(callback, wait) {
+  let timer;
+  return (...args) => {
+    clearTimeout(timer);
+    return new Promise(resolve => {
+      timer = setTimeout(() => resolve(callback(...args)), wait);
+    });
+  };
+}
+
 function Modal(props) {
   const {
     isActive,
@@ -838,7 +984,7 @@ function PathTree({
     }), jsxs("form", {
       onSubmit: e => {
         e.preventDefault();
-        onConfirm(e.target[0].value, e.target);
+        onConfirm(get(e, 'target.0.value', ''), e.target);
       },
       children: [jsx("small", {
         style: {
@@ -870,22 +1016,6 @@ function PathTree({
   });
 }
 
-function useSetState(initialState) {
-  const [state, set] = useState(initialState);
-  const setState = useCallback(patch => {
-    set(prevState => Object.assign({}, prevState, patch instanceof Function ? patch(prevState) : patch));
-  }, [set]);
-  return [state, setState];
-}
-
-const initial = {
-  loading: undefined,
-  isError: false,
-  errorMessage: undefined,
-  result: undefined,
-  response: undefined
-};
-
 const getErrorMessage = (dataError, defaultValue) => {
   if (dataError && dataError.details) {
     return dataError.details;
@@ -896,7 +1026,7 @@ const getErrorMessage = (dataError, defaultValue) => {
   return defaultValue;
 };
 
-const processResponse = async (res, ready_body = true) => {
+async function processResponse(res, ready_body = true) {
   if (res.status < 400) return {
     isError: false,
     loading: false,
@@ -905,98 +1035,139 @@ const processResponse = async (res, ready_body = true) => {
   };else return {
     isError: true,
     loading: false,
-    errorMessage: getErrorMessage(await res.json(), res.status),
+    errorMessage: getErrorMessage(await res.json(), res.status).toString(),
     response: res
   };
-};
+}
 
-const patch = (setState, Ctx) => async (data, endpoint = undefined, body = false) => {
-  setState({
-    loading: true
-  });
-  let newState = {};
+/**
+ * Do setState like react class component.
+ */
 
-  try {
-    const path = endpoint ? `${Ctx.path}${endpoint}` : Ctx.path;
-    const res = await Ctx.client.patch(path, data);
-    newState = await processResponse(res, body);
-  } catch (e) {
-    console.error('Error', e);
-    newState = {
-      isError: true,
-      errorMessage: 'unhandled exception'
-    };
-  }
+function useSetState(initialState) {
+  const [state, setState] = useState(initialState); // Function which accepts a partial state to merge
+
+  const setCustomState = useCallback(newPartialState => {
+    try {
+      setState(prevState => {
+        return _extends({}, prevState, newPartialState);
+      });
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error(error);
+    }
+  }, []); // Return
+
+  return [state, setCustomState];
+} // **** Export Default **** //
 
-  setState(newState);
-  return newState;
+const initial = {
+  loading: undefined,
+  isError: false,
+  errorMessage: undefined,
+  result: undefined,
+  response: undefined
 };
 
-const del = (setState, Ctx) => async (data = {}, endpoint = undefined, body = false) => {
-  setState({
-    loading: true
-  });
-  let newState = {};
+function patch(setState, Ctx) {
+  return async (data = {}, endpoint, body = false) => {
+    setState({
+      loading: true
+    });
+    let newState = {};
 
-  try {
-    const path = endpoint ? `${Ctx.path}${endpoint}` : Ctx.path;
-    const res = await Ctx.client.delete(path, data);
-    newState = await processResponse(res, body);
-  } catch (e) {
-    console.error('Error', e);
-    newState = {
-      isError: true,
-      errorMessage: 'unhandled exception'
-    };
-  }
+    try {
+      const path = endpoint ? `${Ctx.path}${endpoint}` : Ctx.path;
+      const res = await Ctx.client.patch(path, data);
+      newState = await processResponse(res, body);
+    } catch (e) {
+      console.error('Error', e);
+      newState = {
+        isError: true,
+        errorMessage: 'unhandled exception'
+      };
+    }
 
-  setState(newState);
-  return newState;
-};
+    setState(newState);
+    return newState;
+  };
+}
 
-const post = (setState, Ctx) => async (data, endpoint = undefined, body = true) => {
-  setState({
-    loading: true
-  });
-  let newState = {};
+function del(setState, Ctx) {
+  return async (data = {}, endpoint, body = false) => {
+    setState({
+      loading: true
+    });
+    let newState = {};
 
-  try {
-    const path = endpoint ? `${Ctx.path}${endpoint}` : Ctx.path;
-    const res = await Ctx.client.post(path, data);
-    newState = await processResponse(res, body);
-  } catch (e) {
-    console.error('Error', e);
-    newState = {
-      isError: true,
-      errorMessage: 'unhandled exception'
-    };
-  }
+    try {
+      const path = endpoint ? `${Ctx.path}${endpoint}` : Ctx.path;
+      const res = await Ctx.client.delete(path, data);
+      newState = await processResponse(res, body);
+    } catch (e) {
+      console.error('Error', e);
+      newState = {
+        isError: true,
+        errorMessage: 'unhandled exception'
+      };
+    }
 
-  setState(newState);
-  return newState;
-};
+    setState(newState);
+    return newState;
+  };
+}
 
-const get = (setState, Ctx) => async (endpoint = undefined) => {
-  setState({
-    loading: true
-  });
-  let newState = {};
+function post(setState, Ctx) {
+  return async (data = {}, endpoint, body = true) => {
+    setState({
+      loading: true
+    });
+    let newState = {};
 
-  try {
-    const path = endpoint ? `${Ctx.path}${endpoint}` : Ctx.path;
-    const res = await Ctx.client.get(path);
-    newState = await processResponse(res, true);
-  } catch (e) {
-    console.error('Error', e);
-    newState = {
-      isError: true,
-      errorMessage: 'unhandled exception'
-    };
-  }
+    try {
+      const path = endpoint ? `${Ctx.path}${endpoint}` : Ctx.path;
+      const res = await Ctx.client.post(path, data);
+      newState = await processResponse(res, body);
+    } catch (e) {
+      console.error('Error', e);
+      newState = {
+        isError: true,
+        errorMessage: 'unhandled exception'
+      };
+    }
+
+    setState(newState);
+    return newState;
+  };
+}
+
+function get$1(setState, Ctx) {
+  return async endpoint => {
+    setState({
+      loading: true
+    });
+    let newState = {};
+
+    try {
+      const path = endpoint ? `${Ctx.path}${endpoint}` : Ctx.path;
+      const res = await Ctx.client.get(path);
+      newState = await processResponse(res, true);
+    } catch (e) {
+      console.error('Error', e);
+      newState = {
+        isError: true,
+        errorMessage: 'unhandled exception'
+      };
+    }
+
+    setState(newState);
+    return newState;
+  };
+} // const get = (
+//   setState: (value: Partial<State>) => void,
+//   Ctx: Traversal
+// ) =>
 
-  setState(newState);
-  return newState;
-};
 
 function useCrudContext() {
   const Ctx = useTraversal();
@@ -1006,7 +1177,7 @@ function useCrudContext() {
     patch: patch(setState, Ctx),
     del: del(setState, Ctx),
     post: post(setState, Ctx),
-    get: get(setState, Ctx)
+    get: get$1(setState, Ctx)
   });
 }
 
@@ -1053,7 +1224,6 @@ function AddItem(props) {
     children: jsx(Form, {
       loading: loading,
       onSubmit: doSubmit,
-      onError: err => console.log(err),
       actionName: 'Add ' + type,
       title: 'Add ' + type,
       type: type,
@@ -1063,7 +1233,7 @@ function AddItem(props) {
 }
 
 const 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'];
-const Config = {
+const defaultConfig = {
   DisabledTypes: ['UserManager', 'GroupManager'],
   PageSize: 10,
   DelayActions: 200,
@@ -1074,21 +1244,39 @@ const Config = {
     return (schema == null ? void 0 : schema.widget) === 'file' || (schema == null ? void 0 : schema.widget) === 'select' || (schema == null ? void 0 : schema.type) === 'array';
   }
 };
-let calculated = Object.assign({}, Config);
-
-const addConfig = (additional, original) => {
-  const rest = Object.assign({}, original);
-  Object.keys(additional).forEach(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]);
+let calculated = Object.assign({}, defaultConfig);
+
+function addConfig(updates, currentConfig) {
+  let updatedConfig = _extends({}, currentConfig);
+
+  Object.entries(updates).forEach(([key, value]) => {
+    const currentKey = key;
+    const currentValue = currentConfig[currentKey];
+
+    if (Array.isArray(value) && Array.isArray(currentValue)) {
+      // Correctly type the array concatenation
+      updatedConfig = _extends({}, updatedConfig, {
+        [currentKey]: [...currentValue, ...value]
+      });
+    } else if (isPlainObject(value) && isPlainObject(currentValue)) {
+      // Correctly type the object merging
+      updatedConfig = _extends({}, updatedConfig, {
+        [currentKey]: _extends({}, currentValue, value)
+      });
     } else {
-      rest[item] = additional[item];
+      // Directly assign all other types
+      updatedConfig = _extends({}, updatedConfig, {
+        [currentKey]: value
+      });
     }
   });
-  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 = {}) {
   const ref = useRef();
@@ -1108,14 +1296,14 @@ function RemoveItems(props) {
   const {
     items = []
   } = props;
-  const last = items[items.length - 1]['@name'];
-  const itemsNames = items.map(item => item['@name']).join(', ').replace(`, ${last}`, ` and ${last}`);
+  const last = items[items.length - 1].id;
+  const itemsNames = items.map(item => item.id).join(', ').replace(`, ${last}`, ` and ${last}`);
 
   async function removeItems() {
     const errors = [];
     setLoading(true);
     const actions = items.map(async item => {
-      const res = await Ctx.client.delete(`${Ctx.path}${item['@name']}`);
+      const res = await Ctx.client.delete(`${Ctx.path}${item.id}`, {});
 
       if (!res.ok) {
         const err = await res.json();
@@ -1161,7 +1349,7 @@ const Checkbox = ({
   dataTest
 }) => {
   const inputRef = useRef(null);
-  const [state, setState] = useState(checked);
+  const [state, setState] = useState(!!checked);
   useEffect(() => {
     if (inputRef.current) {
       inputRef.current.indeterminate = _indeterminate;
@@ -1177,13 +1365,13 @@ const Checkbox = ({
     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
@@ -1221,14 +1409,14 @@ const applyValidators = (value, validators) => {
   return result;
 };
 
-const useInput = (onChange, value, validator) => {
+const useInput = (onChange, value, validators) => {
   const [state, setState] = useState({
     hasError: false,
     value: value
   });
 
   const onUpdate = ev => {
-    const value = ev && ev.target ? ev.target.value : ev ? ev : '';
+    const value = ev && ev.target ? ev.target.value : '';
     setState({
       value,
       hasError: false
@@ -1237,7 +1425,7 @@ const useInput = (onChange, value, validator) => {
   };
 
   const onBlur = () => {
-    const hasError = applyValidators(state.value, validator) === false;
+    const hasError = applyValidators(state.value, validators) === false;
     if (hasError) setState({
       value: state.value,
       hasError
@@ -1307,10 +1495,10 @@ const Input = forwardRef(({
   disabled,
   onKeyUp
 }, ref) => {
-  let validatorFn = null;
+  let validatorFn = [];
 
   if (_required) {
-    validatorFn = Array.isArray(_validator) ? _validator.push(notEmpty) : [_validator, notEmpty];
+    validatorFn = Array.isArray(_validator) ? [..._validator, notEmpty] : [_validator, notEmpty];
   }
 
   const _useInput = useInput(onChange, value != null ? value : '', validatorFn),
@@ -1322,15 +1510,15 @@ const Input = forwardRef(({
   const [uid] = useState(generateUID('input'));
   const [mounted, setMounted] = useState(false); // eslint-disable-next-line
 
-  ref = ref || useRef();
+  const newRef = ref || useRef();
   useEffect(() => {
     setMounted(true);
   }, []);
   useEffect(() => {
-    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]);
   const theError = state.hasError ? errorMessage || 'invalid field' : '';
   const statusClasses = state.hasError ? 'is-danger' : '';
 
@@ -1369,10 +1557,10 @@ Input.displayName = 'Input';
 
 const Icon = ({
   icon,
-  className,
+  className: _className = '',
   align
 }) => {
-  const addClass = className ? className.split(' ') : [className];
+  const addClass = _className ? _className.split(' ') : [_className];
   align = align || 'is-right';
   return jsx("span", {
     className: classnames(['icon', align, ...addClass]),
@@ -1477,7 +1665,7 @@ function FormBuilder({
   remotes = {},
   submitButton = true
 }) {
-  const ref = useRef();
+  const ref = useRef(null);
   const {
     properties,
     required
@@ -1490,7 +1678,7 @@ function FormBuilder({
     initialState[element] = values[element] || undefined;
   }); // Register remotes
 
-  if (!ref.current) {
+  if (ref.current === null) {
     ref.current = {};
     Object.keys(remotes).forEach(item => ref.current[item] = remotes[item]);
   } else {
@@ -1504,15 +1692,16 @@ function FormBuilder({
 
   ref.current = ref.current || {};
 
-  const onUpdate = field => ev => {
-    ref.current[field] = ev.target ? ev.target.value : ev.value || ev;
+  const onUpdate = field => value => {
+    ref.current[field] = value;
   };
 
   const GetTag = ({
     field
   }) => {
     const property = properties[field];
-    const Tag = formComponents[property.widget || property.type];
+    const key = property.widget || property.type;
+    const Tag = formComponents[key];
     const props = {
       value: initialState[field],
       onChange: onUpdate(field),
@@ -1527,7 +1716,6 @@ function FormBuilder({
       props.placeholder += ' *';
     }
 
-    Tag.displayName = `${field}Field`;
     return jsx(Tag, _extends({}, props));
   };
 
@@ -1586,9 +1774,13 @@ const Select = forwardRef(({
         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);
+      }
     }
   };
 
@@ -1639,33 +1831,137 @@ const Select = forwardRef(({
 });
 Select.displayName = 'Select';
 
-// https://github.com/molefrog/wouter
-
-const setURLParams = p => {
-  return window.history.pushState(0, '0', '' + '?' + p.toString().replace(/%2F/g, '/'));
-};
+function useVocabulary(vocabularyName, path) {
+  const traversal = useTraversal();
+  const [vocabulary, setVocabulary] = useSetState({
+    data: undefined,
+    loading: false,
+    error: undefined
+  });
 
-const clean = to => {
-  const current = new URLSearchParams();
-  Object.keys(to).forEach(_key => current.set(_key, to[_key]));
-  setURLParams(current);
-};
+  const getPath = () => {
+    if (path) return path;
+    return `${traversal.path}@vocabularies/${vocabularyName}`;
+  };
 
-const useLocation = () => {
-  const [path, update] = useState(currentSearchParams());
-  const prevPath = useRef(path);
   useEffect(() => {
-    patchHistoryEvents(); // this function checks if the location has been changed since the
-    // last render and updates the state only when needed.
-    // unfortunately, we can't rely on `path` value here, since it can be stale,
-    // that's why we store the last pathname in a ref.
-
-    const checkForUpdates = () => {
-      const pathname = currentSearchParams();
-      prevPath.current !== pathname && update(prevPath.current = pathname);
+    const getVocabulary = async () => {
+      if (vocabularyName && vocabulary.data === undefined && !vocabulary.loading) {
+        try {
+          setVocabulary({
+            loading: true
+          });
+          const data = await traversal.client.get(getPath());
+          const dataJson = await data.json();
+          setVocabulary({
+            loading: false,
+            data: dataJson
+          });
+        } catch (err) {
+          setVocabulary({
+            loading: false,
+            error: err,
+            data: undefined
+          });
+        }
+      }
     };
 
-    const events = ['popstate', 'pushState', 'replaceState'];
+    getVocabulary();
+  }, [vocabularyName, vocabulary, path]);
+  return vocabulary;
+}
+
+const SelectVocabulary = forwardRef(({
+  vocabularyName,
+  className,
+  classWrap,
+  val,
+  dataTest,
+  multiple,
+  onChange,
+  id,
+  placeholder
+}, ref) => {
+  const vocabulary = useVocabulary(vocabularyName);
+
+  const getOptions = () => {
+    if (get(vocabulary, 'data.items', null)) {
+      var _vocabulary$data$item, _vocabulary$data;
+
+      const vocData = ((_vocabulary$data$item = vocabulary == null ? void 0 : (_vocabulary$data = vocabulary.data) == null ? void 0 : _vocabulary$data.items) != null ? _vocabulary$data$item : []).map(item => {
+        return {
+          text: item.title,
+          value: item.token
+        };
+      });
+      return vocData;
+    }
+
+    return [];
+  };
+
+  const getProps = () => {
+    if (multiple) {
+      const currentValue = val || [];
+      return {
+        multiple: true,
+        size: 5,
+        value: currentValue,
+        options: getOptions()
+      };
+    }
+
+    return {
+      value: val != null ? val : '',
+      appendDefault: true,
+      options: getOptions()
+    };
+  };
+
+  if (vocabulary.data === undefined || vocabulary.loading) {
+    return jsx("div", {});
+  }
+
+  return jsx(Select, _extends({}, getProps(), {
+    className: className,
+    classWrap: classWrap || 'is-fullwidth',
+    dataTest: dataTest,
+    ref: ref,
+    onChange: onChange,
+    id: id,
+    placeholder: placeholder
+  }));
+});
+SelectVocabulary.displayName = 'SelectVocabulary';
+
+// https://github.com/molefrog/wouter
+
+const setURLParams = p => {
+  return window.history.pushState(0, '0', '' + '?' + p.toString().replace(/%2F/g, '/'));
+};
+
+const clean = to => {
+  const current = new URLSearchParams();
+  Object.keys(to).forEach(_key => current.set(_key, to[_key]));
+  setURLParams(current);
+};
+
+const useLocation = () => {
+  const [path, update] = useState(currentSearchParams());
+  const prevPath = useRef(path);
+  useEffect(() => {
+    patchHistoryEvents(); // this function checks if the location has been changed since the
+    // last render and updates the state only when needed.
+    // unfortunately, we can't rely on `path` value here, since it can be stale,
+    // that's why we store the last pathname in a ref.
+
+    const checkForUpdates = () => {
+      const pathname = currentSearchParams();
+      prevPath.current !== pathname && update(prevPath.current = pathname);
+    };
+
+    const events = ['popstate', 'pushState', 'replaceState'];
     events.map(e => window.addEventListener(e, checkForUpdates)); // it's possible that an update has occurred between render and the effect handler,
     // so we run additional check on mount to catch these updates. Based on:
     // https://gist.github.com/bvaughn/e25397f70e8c65b0ae0d7c90b731b189
@@ -1706,18 +2002,28 @@ let patched = 0;
 
 const patchHistoryEvents = () => {
   if (patched) return;
-  ['pushState', 'replaceState'].map(type => {
-    const original = window.history[type];
+  const originalPushState = window.history.pushState;
 
-    window.history[type] = function (...args) {
-      const result = original.apply(this, args); // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  window.history.pushState = function (...args) {
+    const result = originalPushState.apply(this, args); // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+    const event = new Event('pushState');
+    event.arguments = args;
+    dispatchEvent(event);
+    return result;
+  };
+
+  const originalReplaceState = window.history.replaceState;
+
+  window.history.replaceState = function (...args) {
+    const result = originalReplaceState.apply(this, args); // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+    const event = new Event('replaceState');
+    event.arguments = args;
+    dispatchEvent(event);
+    return result;
+  };
 
-      const event = new Event(type);
-      event.arguments = args;
-      dispatchEvent(event);
-      return result;
-    };
-  });
   return patched = 1;
 };
 
@@ -1765,7 +2071,7 @@ function TdLink({
   children,
   style = {}
 }) {
-  const link = useRef();
+  const link = useRef(null);
 
   function onClick() {
     if (link && link.current) {
@@ -1861,7 +2167,7 @@ class RestClient {
     this.container = container;
   }
 
-  async request(path, data = undefined, headers = undefined) {
+  async request(path, data, headers, signal) {
     if (path.indexOf(this.url) !== -1) {
       path = path.replace(this.url, '');
     }
@@ -1874,19 +2180,28 @@ class RestClient {
       path = `/${path}`;
     }
 
-    data = data || {};
-    data.headers = headers || this.getHeaders();
-    return await fetch(`${this.url}${path}`, data);
+    const dataRequest = data || {};
+    dataRequest.headers = this.getHeaders();
+
+    if (headers) {
+      dataRequest.headers = _extends({}, dataRequest.headers, headers);
+    }
+
+    if (signal) {
+      dataRequest.signal = signal;
+    }
+
+    return await fetch(`${this.url}${path}`, dataRequest);
   }
 
   getHeaders() {
     const authToken = this.auth.getToken();
-    if (!authToken) return {};
-    return {
-      Accept: 'application/json',
-      'Content-Type': 'application/json',
-      Authorization: 'Bearer ' + authToken
-    };
+    const headersInit = {};
+    if (!authToken) return headersInit;
+    headersInit.Accept = 'application/json';
+    headersInit['Content-Type'] = 'application/json';
+    headersInit.Authorization = 'Bearer ' + authToken;
+    return headersInit;
   }
 
   async post(path, data) {
@@ -1896,8 +2211,8 @@ class RestClient {
     });
   }
 
-  async get(path) {
-    return await this.request(path);
+  async get(path, signal) {
+    return await this.request(path, undefined, undefined, signal);
   }
 
   async put(path, data) {
@@ -1916,17 +2231,17 @@ class RestClient {
 
   async upload(path, data) {
     const headers = this.getHeaders();
-    delete headers['Content-Type'];
-    headers['Content-Type'] = data['content-type'];
-    headers['X-UPLOAD-FILENAME'] = data.filename;
-    headers['Content-Encoding'] = 'base64';
+    const newHeaders = {};
+    newHeaders['Content-Type'] = data['content-type'];
+    newHeaders['X-UPLOAD-FILENAME'] = data.filename;
+    newHeaders['Content-Encoding'] = 'base64';
     return await this.request(path, {
       method: 'PATCH',
       body: data.data
-    }, headers);
+    }, _extends({}, headers, newHeaders));
   }
 
-  async delete(path, data = undefined) {
+  async delete(path, data) {
     return await this.request(path, {
       method: 'delete',
       body: JSON.stringify(data)
@@ -2033,6 +2348,14 @@ class GuillotinaClient {
     return await this.rest.get(path);
   }
 
+  getQueryParamsSearchFunction(name) {
+    if (name === 'getQueryParamsElasticsearch') {
+      return this.getQueryParamsElasticsearch;
+    }
+
+    return this.getQueryParamsPostresql;
+  }
+
   getQueryParamsPostresql({
     start = 0,
     pageSize = 10,
@@ -2116,7 +2439,7 @@ class GuillotinaClient {
       label: 'id/name',
       key: 'title',
       isSortable: true,
-      child: (m, navigate, search) => jsxs(TdLink, {
+      child: (m, _navigate, search) => jsxs(TdLink, {
         model: m,
         children: [m.name, search && jsxs(React.Fragment, {
           children: [jsx("br", {}), jsx("span", {
@@ -2150,12 +2473,15 @@ class GuillotinaClient {
 
 
   applyCompat(data) {
-    data.member = data.items;
-    data.items_count = data.items_total;
-    return data;
+    const result = _extends({}, data, {
+      member: data.items,
+      items_count: data.items_total
+    });
+
+    return result;
   }
 
-  async search(path, params, container = false, prepare = true) {
+  async search(path, params, container = false, prepare = true, signal) {
     if (path.startsWith('/')) {
       path = path.slice(1);
     }
@@ -2166,7 +2492,7 @@ class GuillotinaClient {
 
     const query = prepare ? toQueryString(params) : params;
     const url = `${path}@search?${query}`;
-    const res = await this.rest.get(url);
+    const res = await this.rest.get(url, signal);
     const data = await res.json();
     return this.applyCompat(data);
   }
@@ -2273,10 +2599,36 @@ class GuillotinaClient {
   async getPrincipals(path) {
     const groups = this.getGroups(path);
     const users = this.getUsers(path);
-    const [gr, usr] = await Promise.all([groups, users]);
+    const [responseGroups, responseUsers] = await Promise.all([groups, users]);
+    let groupsData = [];
+    let usersData = [];
+
+    if (responseGroups.ok) {
+      const groupsDataResponse = await responseGroups.json();
+      groupsData = groupsDataResponse.map(group => {
+        return {
+          '@name': group.id,
+          user_roles: group.roles,
+          users: group.users
+        };
+      });
+    }
+
+    if (responseUsers) {
+      const usersDataResponse = await responseUsers.json();
+      usersData = usersDataResponse.map(user => {
+        return {
+          '@name': user.id,
+          user_roles: user.roles,
+          fullname: user.fullname,
+          email: user.email
+        };
+      });
+    }
+
     return {
-      groups: gr.ok ? await gr.json() : [],
-      users: usr.ok ? await usr.json() : []
+      groups: groupsData,
+      users: usersData
     };
   }
 
@@ -2321,17 +2673,24 @@ function getClient(url, container, auth) {
   return new GuillotinaClient(new RestClient(url, container, auth), container === '/');
 }
 const lightFileReader = file => {
-  return new Promise(resolve => {
+  return new Promise((resolve, reject) => {
     const reader = new FileReader();
     reader.readAsArrayBuffer(file);
 
     reader.onloadend = e => {
-      const fileData = e.target.result;
-      resolve({
-        filename: file.name.normalize('NFD').replace(/[\u0300-\u036f]/g, ''),
-        data: fileData,
-        'content-type': file.type
-      });
+      var _e$target;
+
+      const 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');
+      }
     };
   });
 };
@@ -2358,8 +2717,10 @@ function FileUpload({
   const intl = useIntl();
 
   const changed = async event => {
-    const fileToUpload = await lightFileReader(event.target.files[0]);
-    onChange(fileToUpload);
+    if (event.target.files) {
+      const fileToUpload = await lightFileReader(event.target.files[0]);
+      onChange(fileToUpload);
+    }
   };
 
   return jsx("div", {
@@ -2442,9 +2803,9 @@ Textarea.displayName = 'Textarea';
 
 const defaultEvents = ['mousedown', 'touchstart'];
 
-const on = (obj, ...args) => obj.addEventListener(...args);
+const on = (obj, type, handler) => obj.addEventListener(type, handler);
 
-const off = (obj, ...args) => obj.removeEventListener(...args);
+const off = (obj, type, handler) => obj.removeEventListener(type, handler);
 
 function useClickAway(ref, onClickAway, events = defaultEvents) {
   const savedCallback = useRef(onClickAway);
@@ -2471,50 +2832,7 @@ function useClickAway(ref, onClickAway, events = defaultEvents) {
   }, [events, ref]);
 }
 
-const formatDate = str => {
-  const d = new Date(str);
-  const minutes = d.getMinutes() < 10 ? `0${d.getMinutes()}` : d.getMinutes();
-  return `${d.getDate()}/${d.getMonth() + 1}/${d.getFullYear()} ${d.getHours()}:${minutes}`;
-};
-const get$1 = (obj, path, defValue) => {
-  var _pathArray$reduce;
-
-  // If path 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
-
-  const pathArray = Array.isArray(path) ? path : path.match(/([^[.\]])+/g); // Find value if exist return otherwise return undefined value;
-
-  return (_pathArray$reduce = pathArray.reduce((prevObj, key) => prevObj && prevObj[key], obj)) != null ? _pathArray$reduce : defValue;
-};
-function getNewId(id = '') {
-  const suffix = '-copy-';
-  const rgx = new RegExp(`($|${suffix}\\d*)`);
-  return stringToSlug(id).replace(rgx, r => {
-    const num = parseInt(r.replace(suffix, '') || '0');
-    return `${suffix}${num + 1}`;
-  });
-}
-
-function debounce(func, wait) {
-  let timeout;
-  return function () {
-    // eslint-disable-next-line @typescript-eslint/no-this-alias
-    const context = this; // eslint-disable-next-line prefer-rest-params
-
-    const args = arguments;
-
-    const later = function later() {
-      timeout = null;
-      func.apply(context, args);
-    };
-
-    clearTimeout(timeout);
-    timeout = setTimeout(later, wait);
-  };
-}
-
-const initialState = {
+const initialState$1 = {
   page: 0,
   items: undefined,
   loading: false,
@@ -2524,8 +2842,8 @@ const SearchInput = ({
   onChange,
   error,
   errorZoneClassName,
-  traversal: _traversal = null,
-  path: _path = null,
+  traversal,
+  path: _path = undefined,
   qs: _qs = [],
   queryCondition: _queryCondition = 'id__in',
   value,
@@ -2533,12 +2851,12 @@ const SearchInput = ({
   dataTestWrapper: _dataTestWrapper = 'wrapperSearchInputTest',
   dataTestSearchInput: _dataTestSearchInput = 'searchInputTest',
   dataTestItem: _dataTestItem = 'searchInputItemTest',
-  renderTextItemOption: _renderTextItemOption = null,
-  typeNameQuery: _typeNameQuery = null,
+  renderTextItemOption: _renderTextItemOption = undefined,
+  typeNameQuery: _typeNameQuery = undefined,
   labelProperty: _labelProperty = 'id'
 }) => {
   const intl = useIntl();
-  const [options, setOptions] = useSetState(initialState);
+  const [options, setOptions] = useSetState(initialState$1);
   const [isOpen, setIsOpen] = useState(false);
   const [searchTerm, setSearchTerm] = useState('');
   const inputRef = useRef(null);
@@ -2573,16 +2891,14 @@ const SearchInput = ({
       const searchTermParsed = [`id`, value];
       const {
         get: getSearch
-      } = _traversal.registry;
+      } = traversal.registry;
       const fnName = getSearch('searchEngineQueryParamsFunction', SearchEngine);
-
-      const qsParsed = _traversal.client[fnName]({
-        path: _traversal.path,
+      const qsParsed = traversal.client.getQueryParamsSearchFunction(fnName)({
+        path: traversal.path,
         start: 0,
         pageSize: PageSize,
         withDepth: false
       });
-
       let typeNameParsed = [];
 
       if (_typeNameQuery) {
@@ -2593,9 +2909,9 @@ const SearchInput = ({
         searchTermQs = buildQs([..._qs, searchTermParsed, ...qsParsed, ...typeNameParsed]);
       }
 
-      const data = await _traversal.client.search(_path ? _path : _traversal.client.getContainerFromPath(_traversal.path), searchTermQs, false, false);
+      const data = await traversal.client.search(_path ? _path : traversal.client.getContainerFromPath(traversal.path), searchTermQs, false, false);
       const newValuesLabel = data.items.reduce((result, item) => {
-        result[item.id] = get$1(item, _labelProperty, item.id);
+        result[item.id] = get(item, _labelProperty, item.id);
         return result;
       }, {});
       setValueLabel(newValuesLabel);
@@ -2605,6 +2921,7 @@ const SearchInput = ({
   const handleSearch = async (page = 0, concat = false, value = '') => {
     var _data$items_total;
 
+    console.log('handle search input');
     setOptions({
       loading: true
     });
@@ -2617,16 +2934,14 @@ const SearchInput = ({
 
     const {
       get
-    } = _traversal.registry;
+    } = traversal.registry;
     const fnName = get('searchEngineQueryParamsFunction', SearchEngine);
-
-    const qsParsed = _traversal.client[fnName]({
-      path: _traversal.path,
+    const qsParsed = traversal.client.getQueryParamsSearchFunction(fnName)({
+      path: traversal.path,
       start: page * PageSize,
       pageSize: PageSize,
       withDepth: false
     });
-
     const sortParsed = parser(`_sort_des=${_labelProperty}`);
     let typeNameParsed = [];
 
@@ -2634,11 +2949,11 @@ const SearchInput = ({
       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([..._qs, ...searchTermParsed, ...qsParsed, ...typeNameParsed, ...sortParsed]);
     }
 
-    const data = await _traversal.client.search(_path ? _path : _traversal.client.getContainerFromPath(_traversal.path), searchTermQs, false, false);
+    const data = await traversal.client.search(_path ? _path : traversal.client.getContainerFromPath(traversal.path), searchTermQs, false, false);
     const newItems = options.items && concat ? [...options.items, ...data.items] : data.items;
     setOptions({
       items: newItems != null ? newItems : [],
@@ -2653,7 +2968,7 @@ const SearchInput = ({
       return _renderTextItemOption(item);
     }
 
-    return get$1(item, _labelProperty, item.title) || item['@name'];
+    return get(item, _labelProperty, item.title) || item['@name'];
   };
 
   useEffect(() => {
@@ -2679,7 +2994,7 @@ const SearchInput = ({
         if (!ev.currentTarget.contains(ev.relatedTarget)) {
           if (searchTerm !== '') {
             setSearchTerm('');
-            setOptions(initialState);
+            setOptions(initialState$1);
           }
 
           setIsOpen(false);
@@ -2697,6 +3012,7 @@ const SearchInput = ({
             }
 
             setIsOpen(!isOpen);
+            console.log('on clic btn', options);
 
             if (!options.loading && !options.items) {
               handleSearch(options.page);
@@ -2705,7 +3021,7 @@ const SearchInput = ({
           "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", {
@@ -2779,25 +3095,7 @@ const SearchInput = ({
   });
 };
 
-function debounce$1(func, wait) {
-  let timeout;
-  return function () {
-    // eslint-disable-next-line @typescript-eslint/no-this-alias
-    const context = this; // eslint-disable-next-line prefer-rest-params
-
-    const args = arguments;
-
-    const later = function later() {
-      timeout = null;
-      func.apply(context, args);
-    };
-
-    clearTimeout(timeout);
-    timeout = setTimeout(later, wait);
-  };
-}
-
-const initialState$1 = {
+const initialState$2 = {
   page: 0,
   items: undefined,
   loading: false,
@@ -2807,8 +3105,8 @@ const SearchInputList = ({
   onChange,
   error,
   errorZoneClassName,
-  traversal: _traversal = null,
-  path: _path = null,
+  traversal,
+  path: _path = undefined,
   qs: _qs = [],
   queryCondition: _queryCondition = 'id__in',
   value,
@@ -2816,12 +3114,12 @@ const SearchInputList = ({
   dataTestWrapper: _dataTestWrapper = 'wrapperSearchInputTest',
   dataTestSearchInput: _dataTestSearchInput = 'searchInputTest',
   dataTestItem: _dataTestItem = 'searchInputItemTest',
-  renderTextItemOption: _renderTextItemOption = null,
-  typeNameQuery: _typeNameQuery = null,
+  renderTextItemOption: _renderTextItemOption = undefined,
+  typeNameQuery: _typeNameQuery = undefined,
   labelProperty: _labelProperty = 'id'
 }) => {
   const intl = useIntl();
-  const [options, setOptions] = useSetState(initialState$1);
+  const [options, setOptions] = useSetState(initialState$2);
   const [valuesLabel, setValuesLabels] = useState(undefined);
   const [isOpen, setIsOpen] = useState(false);
   const [searchTerm, setSearchTerm] = useState('');
@@ -2849,7 +3147,7 @@ const SearchInputList = ({
     };
   };
 
-  const delayedQuery = useCallback(debounce$1(value => handleSearch(0, false, value), 500), []);
+  const delayedQuery = useCallback(debounce(value => handleSearch(0, false, value), 500), []);
 
   const handleSearch = async (page = 0, concat = false, value = '') => {
     var _data$items_total;
@@ -2866,16 +3164,14 @@ const SearchInputList = ({
 
     const {
       get
-    } = _traversal.registry;
+    } = traversal.registry;
     const fnName = get('searchEngineQueryParamsFunction', SearchEngine);
-
-    const qsParsed = _traversal.client[fnName]({
-      path: _traversal.path,
+    const qsParsed = traversal.client.getQueryParamsSearchFunction(fnName)({
+      path: traversal.path,
       start: page * PageSize,
       pageSize: PageSize,
       withDepth: false
     });
-
     const sortParsed = parser(`_sort_des=${_labelProperty}`);
     let typeNameParsed = [];
 
@@ -2887,7 +3183,7 @@ const SearchInputList = ({
       searchTermQs = buildQs([..._qs, ...searchTermParsed, ...qsParsed, ...typeNameParsed, ...sortParsed]);
     }
 
-    const data = await _traversal.client.search(_path ? _path : _traversal.client.getContainerFromPath(_traversal.path), searchTermQs, false, false);
+    const data = await traversal.client.search(_path ? _path : traversal.client.getContainerFromPath(traversal.path), searchTermQs, false, false);
     const newItems = options.items && concat ? [...options.items, ...data.items] : data.items;
     setOptions({
       items: newItems != null ? newItems : [],
@@ -2904,16 +3200,14 @@ const SearchInputList = ({
       const searchTermParsed = ['__or', `id=${value.join('%26id=')}`];
       const {
         get: getSearch
-      } = _traversal.registry;
+      } = traversal.registry;
       const fnName = getSearch('searchEngineQueryParamsFunction', SearchEngine);
-
-      const qsParsed = _traversal.client[fnName]({
-        path: _traversal.path,
+      const qsParsed = traversal.client.getQueryParamsSearchFunction(fnName)({
+        path: traversal.path,
         start: 0,
         pageSize: 100,
         withDepth: false
       });
-
       let typeNameParsed = [];
 
       if (_typeNameQuery) {
@@ -2924,9 +3218,9 @@ const SearchInputList = ({
         searchTermQs = buildQs([..._qs, searchTermParsed, ...qsParsed, ...typeNameParsed]);
       }
 
-      const data = await _traversal.client.search(_path ? _path : _traversal.client.getContainerFromPath(_traversal.path), searchTermQs, false, false, 0, 100);
+      const data = await traversal.client.search(_path ? _path : traversal.client.getContainerFromPath(traversal.path), searchTermQs, false, false);
       const newValuesLabel = data.items.reduce((result, item) => {
-        result[item.id] = get$1(item, _labelProperty, item.id);
+        result[item.id] = get(item, _labelProperty, item.id);
         return result;
       }, {});
       setValuesLabels(newValuesLabel);
@@ -2939,7 +3233,7 @@ const SearchInputList = ({
       return _renderTextItemOption(item);
     }
 
-    return get$1(item, _labelProperty, item.title) || item['@name'];
+    return get(item, _labelProperty, item.title) || item['@name'];
   };
 
   useEffect(() => {
@@ -2961,7 +3255,7 @@ const SearchInputList = ({
       className: "tags mb-2",
       children: value.map((tag, index) => jsxs("div", {
         className: "tag is-info is-medium",
-        children: [get$1(valuesLabel, tag, tag), jsx("button", {
+        children: [get(valuesLabel, tag, tag), jsx("button", {
           className: "delete is-small",
           onClick: ev => {
             ev.stopPropagation();
@@ -2978,7 +3272,7 @@ const SearchInputList = ({
         if (!ev.currentTarget.contains(ev.relatedTarget)) {
           if (searchTerm !== '') {
             setSearchTerm('');
-            setOptions(initialState$1);
+            setOptions(initialState$2);
           }
 
           setIsOpen(false);
@@ -3041,7 +3335,7 @@ const SearchInputList = ({
 
                 if (onChange && !value.includes(item.id)) {
                   setValuesLabels(_extends({}, valuesLabel, {
-                    [item.id]: get$1(item, _labelProperty, item.id)
+                    [item.id]: get(item, _labelProperty, item.id)
                   }));
                   onChange([...value, item.id]);
                 }
@@ -3206,7 +3500,7 @@ function EditableField({
       ref.current.focus();
     }
   });
-  const canModified = modifyContent && !get$1(schema, 'readonly', false);
+  const canModified = schema !== undefined && modifyContent && !get(schema, 'readonly', false);
 
   const saveField = async ev => {
     if (ev) ev.preventDefault();
@@ -3264,6 +3558,8 @@ function EditableField({
   };
 
   const deleteField = async ev => {
+    var _schema$items;
+
     if (ev) ev.preventDefault();
 
     if ((schema == null ? void 0 : schema.widget) === 'file') {
@@ -3297,7 +3593,7 @@ function EditableField({
       Ctx.refresh();
     } else if ((schema == null ? void 0 : schema.type) === 'string' && schema != null && schema.enum) {
       setValue(null);
-    } else if ((schema == null ? void 0 : schema.type) === 'array' && (schema == null ? void 0 : schema.items.type) === 'string') {
+    } 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([]);
     }
   };
@@ -3348,7 +3644,7 @@ function EditableField({
             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",
@@ -3435,47 +3731,6 @@ const DownloadField = ({
   });
 };
 
-function useVocabulary(vocabularyName, path = null) {
-  const traversal = useTraversal();
-  const [vocabulary, setVocabulary] = useSetState({
-    data: undefined,
-    loading: false,
-    error: undefined
-  });
-
-  const getPath = () => {
-    if (path) return path;
-    return `${traversal.path}@vocabularies/${vocabularyName}`;
-  };
-
-  useEffect(() => {
-    const getVocabulary = async () => {
-      if (vocabularyName && vocabulary.data === undefined && !vocabulary.loading) {
-        try {
-          setVocabulary({
-            loading: true
-          });
-          const data = await traversal.client.get(getPath());
-          const dataJson = await data.json();
-          setVocabulary({
-            loading: false,
-            data: dataJson
-          });
-        } catch (err) {
-          setVocabulary({
-            loading: false,
-            error: err,
-            data: undefined
-          });
-        }
-      }
-    };
-
-    getVocabulary();
-  }, [vocabularyName, vocabulary, path]);
-  return vocabulary;
-}
-
 const plain = ['string', 'number', 'boolean'];
 function RenderField({
   value,
@@ -3498,19 +3753,23 @@ function RenderField({
   }
 
   if (type === 'object') {
+    var _schema$properties;
+
     if (Array.isArray(value)) {
-      return value.map(item => jsx("div", {
+      return value.map((item, index) => jsx("div", {
         children: jsx(RenderField, {
           value: item
         })
-      }, item));
+      }, `renderField_${index}_${schema == null ? void 0 : schema.title}`));
     }
 
-    return Object.keys(value).map(key => jsx(FieldValue, {
-      field: get$1(schema, `properties.${key}.title`, key),
-      schema: get$1(schema, `properties.${key}`, {}),
-      value: value[key]
-    }, key));
+    if ((schema == null ? void 0 : (_schema$properties = schema.properties) == null ? void 0 : _schema$properties.key) !== undefined) {
+      return Object.keys(value).map(key => jsx(FieldValue, {
+        field: get(schema, `properties.${key}.title`, key),
+        schema: schema.properties.key,
+        value: get(value, key, {})
+      }, key));
+    }
   }
 
   return jsxs("p", {
@@ -3554,6 +3813,7 @@ const SearchRenderField = ({
   value,
   modifyContent
 }) => {
+  console.log('search render fields');
   const intl = useIntl();
   const [valuesLabels, setValuesLabels] = useState([]);
   const [isLoadingData, setIsLoadingData] = useState(false);
@@ -3571,7 +3831,7 @@ const SearchRenderField = ({
         get: getSearch
       } = traversal.registry;
       const fnName = getSearch('searchEngineQueryParamsFunction', SearchEngine);
-      const qsParsed = traversal.client[fnName]({
+      const qsParsed = traversal.client.getQueryParamsSearchFunction(fnName)({
         path: traversal.path,
         start: 0,
         pageSize: 100,
@@ -3582,23 +3842,25 @@ const SearchRenderField = ({
         searchTermQs = buildQs([searchTermParsed, ...qsParsed]);
       }
 
-      const data = await traversal.client.search(traversal.client.getContainerFromPath(traversal.path), searchTermQs, false, false, 0, 100);
+      const data = await traversal.client.search(traversal.client.getContainerFromPath(traversal.path), searchTermQs, false, false);
       const newValuesLabel = data.items.map(item => {
         var _schema$labelProperty;
 
-        return get$1(item, (_schema$labelProperty = schema == null ? void 0 : schema.labelProperty) != null ? _schema$labelProperty : 'title', item.id);
+        return get(item, (_schema$labelProperty = schema == null ? void 0 : schema.labelProperty) != null ? _schema$labelProperty : 'title', item.id);
       });
       setValuesLabels(newValuesLabel);
       setIsLoadingData(false);
     };
 
-    let valuesToSearch = value;
+    let 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([]);
@@ -3634,7 +3896,7 @@ const VocabularyRenderField = ({
 
   const intl = useIntl();
   const DEFAULT_VALUE_EDITABLE_FIELD = getDefaultValueEditableField(intl);
-  const vocabularyName = (schema == null ? void 0 : (_schema$items = schema.items) == null ? void 0 : _schema$items.vocabularyName) || (schema == null ? void 0 : schema.vocabularyName);
+  const vocabularyName = (schema == null ? void 0 : (_schema$items = schema.items) == null ? void 0 : _schema$items.vocabularyName) || (schema == null ? void 0 : schema.vocabularyName) || '';
   const vocabulary = useVocabulary(vocabularyName);
 
   const getRenderProps = () => {
@@ -3645,7 +3907,7 @@ const VocabularyRenderField = ({
     if (schema != null && schema.vocabularyName) {
       var _vocabularyValue$titl;
 
-      const vocabularyValue = get$1(vocabulary, 'data.items', []).find(item => item.token === value);
+      const vocabularyValue = get(vocabulary, 'data.items', []).find(item => item.token === value);
       renderProps['value'] = (_vocabularyValue$titl = vocabularyValue == null ? void 0 : vocabularyValue.title) != null ? _vocabularyValue$titl : '';
     } else {
       var _renderProps$value;
@@ -3653,7 +3915,7 @@ const VocabularyRenderField = ({
       renderProps['value'] = ((_renderProps$value = renderProps['value']) != null ? _renderProps$value : []).map(value => {
         var _get$find$title, _get$find;
 
-        return (_get$find$title = (_get$find = get$1(vocabulary, 'data.items', []).find(item => item.token === value)) == null ? void 0 : _get$find.title) != null ? _get$find$title : '';
+        return (_get$find$title = (_get$find = get(vocabulary, 'data.items', []).find(item => item.token === value)) == null ? void 0 : _get$find.title) != null ? _get$find$title : '';
       });
     }
 
@@ -3704,76 +3966,15 @@ function RenderFieldComponent({
   return jsx(RenderField, _extends({}, getRenderProps()));
 }
 
-const SelectVocabulary = forwardRef(({
-  vocabularyName,
-  className,
-  classWrap,
+const EditComponent = forwardRef(({
+  schema,
   val,
+  setValue,
   dataTest,
-  multiple,
-  onChange,
+  className,
+  placeholder,
   id,
-  placeholder
-}, ref) => {
-  const vocabulary = useVocabulary(vocabularyName);
-
-  const getOptions = () => {
-    if (get$1(vocabulary, 'data.items', null)) {
-      const vocData = vocabulary.data.items.map(item => {
-        return {
-          text: item.title,
-          value: item.token
-        };
-      });
-      return vocData;
-    }
-
-    return [];
-  };
-
-  const getProps = () => {
-    if (multiple) {
-      const currentValue = val || [];
-      return {
-        multiple: true,
-        size: 5,
-        value: currentValue,
-        options: getOptions()
-      };
-    }
-
-    return {
-      value: val != null ? val : '',
-      appendDefault: true,
-      options: getOptions()
-    };
-  };
-
-  if (vocabulary.data === undefined || vocabulary.loading) {
-    return jsx("div", {});
-  }
-
-  return jsx(Select, _extends({}, getProps(), {
-    className: className,
-    classWrap: classWrap || 'is-fullwidth',
-    dataTest: dataTest,
-    ref: ref,
-    onChange: onChange,
-    id: id,
-    placeholder: placeholder
-  }));
-});
-SelectVocabulary.displayName = 'SelectVocabulary';
-
-const EditComponent = forwardRef(({
-  schema,
-  val,
-  setValue,
-  dataTest,
-  className,
-  placeholder,
-  id,
-  required
+  required
 }, ref) => {
   const traversal = useTraversal();
 
@@ -3789,7 +3990,7 @@ const EditComponent = forwardRef(({
         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') {
@@ -3804,7 +4005,7 @@ const EditComponent = forwardRef(({
         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') {
@@ -3830,7 +4031,7 @@ const EditComponent = forwardRef(({
 
       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",
@@ -3867,18 +4068,21 @@ const EditComponent = forwardRef(({
       }), jsx(InputList, {
         value: val || [],
         className: className,
-        onChange: ev => setValue(ev),
+        onChange: val => setValue(val),
         ref: ref,
         dataTest: dataTest
       })]
     });
   } else if ((schema == null ? void 0 : schema.widget) === 'file') {
+    const value = val;
     return jsx(FileUpload, {
       onChange: ev => 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 || '',
@@ -3887,7 +4091,7 @@ const EditComponent = forwardRef(({
         classWrap: "is-fullwidth",
         dataTest: dataTest,
         onChange: setValue,
-        vocabularyName: get$1(schema, 'vocabularyName', null),
+        vocabularyName: get(schema, 'vocabularyName', ''),
         placeholder: placeholder,
         id: id
       });
@@ -3899,7 +4103,7 @@ const EditComponent = forwardRef(({
       appendDefault: true,
       classWrap: "is-fullwidth",
       dataTest: dataTest,
-      options: schema == null ? void 0 : schema.vocabulary.map(item => {
+      options: ((_schema$vocabulary = schema == null ? void 0 : schema.vocabulary) != null ? _schema$vocabulary : []).map(item => {
         return {
           text: item,
           value: item
@@ -3915,11 +4119,12 @@ const EditComponent = forwardRef(({
       children: [schema.title && jsx("h4", {
         className: "subtitle mt-2",
         children: schema.title
-      }), Object.keys(get$1(schema, 'properties', {})).map(key => {
+      }), Object.keys(get(schema, 'properties', {})).map(key => {
         var _subSchema$title;
 
-        const subSchema = get$1(schema, 'properties', {})[key];
-        const requiredFields = get$1(schema, 'required', []);
+        const subSchema = get(schema, `properties.${key}`, null);
+        const requiredFields = get(schema, 'required', []);
+        if (!subSchema) return null;
         return jsx(EditComponent, {
           id: `${id}[${key}]`,
           schema: subSchema,
@@ -3989,9 +4194,9 @@ function IAttachment({
       }, 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)]
@@ -4024,6 +4229,11 @@ function IMultiAttachment({
 
     setLoading(true);
     setError(undefined);
+
+    if (!file) {
+      return;
+    }
+
     const endpoint = `${Ctx.path}@upload/files/${fileKey}`;
     const req = await Ctx.client.upload(endpoint, file);
 
@@ -4080,7 +4290,7 @@ function IMultiAttachment({
             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",
@@ -4158,6 +4368,11 @@ function IImageAttachment({
     ev.preventDefault();
     setLoading(true);
     setError(undefined);
+
+    if (!file) {
+      return;
+    }
+
     const endpoint = `${Ctx.path}@upload/image`;
     const req = await Ctx.client.upload(endpoint, file);
 
@@ -4188,7 +4403,7 @@ function IImageAttachment({
       }
     }
 
-    setFile(undefined);
+    setFile(null);
     setLoading(false);
     Ctx.flash(intl.formatMessage(genericFileMessages.image_uploaded), 'success');
     Ctx.refresh();
@@ -4287,7 +4502,7 @@ function IMultiImageAttachment({
   const intl = useIntl();
   const cfg = useConfig();
   const [fileKey, setFileKey] = useState('');
-  const [file, setFile] = useState(null);
+  const [file, setFile] = useState(undefined);
   const [fileKeyToDelete, setFileKeyToDelete] = useState(undefined);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState(undefined);
@@ -4307,6 +4522,11 @@ function IMultiImageAttachment({
 
     setLoading(true);
     setError(undefined);
+
+    if (!file) {
+      return;
+    }
+
     const endpoint = `${Ctx.path}@upload/images/${fileKey}`;
     const req = await Ctx.client.upload(endpoint, file);
 
@@ -4384,7 +4604,7 @@ function IMultiImageAttachment({
             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", {
@@ -4500,7 +4720,7 @@ function IMultiImageOrderedAttachment({
   const intl = useIntl();
   const cfg = useConfig();
   const [sortedList, setSortedList] = useState(Object.keys(values['images']));
-  const [file, setFile] = useState(null);
+  const [file, setFile] = useState(undefined);
   const [fileKeyToDelete, setFileKeyToDelete] = useState(undefined);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState(undefined);
@@ -4630,7 +4850,7 @@ function IMultiImageOrderedAttachment({
                   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", {
@@ -4680,140 +4900,6 @@ function IMultiImageOrderedAttachment({
   });
 }
 
-const base = {
-  local: {
-    roleperm: {},
-    prinperm: {},
-    prinrole: {}
-  },
-  inherit: []
-};
-class Sharing {
-  constructor(element) {
-    this.local = void 0;
-    this.inherit = void 0;
-    Object.assign(this, element || base);
-  }
-
-  get roles() {
-    return Object.keys(this.local.roleperm);
-  }
-
-  getRole(role) {
-    return this.local.roleperm[role];
-  }
-
-  get principals() {
-    return Object.keys(this.local.prinperm);
-  }
-
-  getPrincipals(principal) {
-    return this.local.prinperm[principal];
-  }
-
-  get prinrole() {
-    return Object.keys(this.local.prinrole);
-  }
-
-  getPrinroles(role) {
-    return this.local.prinrole[role];
-  }
-
-}
-
-class ItemModel {
-  constructor(item, url = '') {
-    this.item = void 0;
-    this.url = void 0;
-    this.item = item;
-    this.url = url;
-  }
-
-  get path() {
-    // Compat
-    const item = this.item['@id'] ? this.item['@id'] : this.item['@absolute_url'];
-    let 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;
-  }
-
-  get name() {
-    return this.item.title || this.item['@name'];
-  }
-
-  get icon() {
-    // eslint-disable-next-line
-    const 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';
-    }
-  }
-
-  get fullPath() {
-    return this.url + this.item.id;
-  }
-
-  get id() {
-    if (this.item.id) {
-      return this.item.id;
-    }
-
-    const id = this.item['@id'].split('&')[0].split('/');
-    return id[id.length - 1];
-  }
-
-  get uid() {
-    return this.item['@uid'];
-  }
-
-  get type() {
-    return this.item['@type'] || this.item.type_name;
-  }
-
-  get title() {
-    return this.item.title;
-  }
-
-  get created() {
-    return this.item.creation_date ? formatDate(this.item.creation_date) : '';
-  }
-
-  get updated() {
-    return this.item.modification_date ? formatDate(this.item.modification_date) : '';
-  }
-
-}
-
 const messages$1 = defineMessages({
   status_changed_ok: {
     id: "status_changed_ok",
@@ -4872,10 +4958,9 @@ function IWorkflow() {
   } = useCrudContext();
   const modifyContent = Ctx.hasPerm('guillotina.ModifyContent');
   const [definition, setDefinition] = useState(undefined);
-  const [workflowAction, setWorkflowAction] = useState(null);
-  const model = new ItemModel(Ctx.context);
+  const [workflowAction, setWorkflowAction] = useState(undefined);
   const vocabulary = useVocabulary('workflow_states');
-  const currentState = model.item['guillotina.contrib.workflows.interfaces.IWorkflowBehavior']['review_state'];
+  const currentState = Ctx.context['guillotina.contrib.workflows.interfaces.IWorkflowBehavior']['review_state'];
 
   async function loadDefinition() {
     const response = await Ctx.client.get(`${Ctx.path}/@workflow`);
@@ -4903,23 +4988,25 @@ function IWorkflow() {
     }
 
     Ctx.refresh();
-    setWorkflowAction(null);
+    setWorkflowAction(undefined);
   };
 
   const getStateTitle = () => {
-    var _vocabulary$data, _vocabulary$data$item;
+    var _vocabulary$data$item, _vocabulary$data;
+
+    if (((_vocabulary$data$item = (_vocabulary$data = vocabulary.data) == null ? void 0 : _vocabulary$data.items) != null ? _vocabulary$data$item : []).length > 0) {
+      var _vocabulary$data2;
 
-    if (((_vocabulary$data = vocabulary.data) == null ? void 0 : (_vocabulary$data$item = _vocabulary$data.items) == null ? void 0 : _vocabulary$data$item.length) > 0) {
-      const vocabularyValue = vocabulary.data.items.find(item => item.token === currentState);
+      const vocabularyValue = vocabulary == null ? void 0 : (_vocabulary$data2 = vocabulary.data) == null ? void 0 : _vocabulary$data2.items.find(item => item.token === currentState);
 
       if (vocabularyValue) {
-        const translatedValue = get$1(vocabularyValue, `title.translated_title.${intl.locale}`, null);
+        const translatedValue = get(vocabularyValue, `title.translated_title.${intl.locale}`, null);
 
         if (translatedValue !== null) {
           return translatedValue;
         }
 
-        const titleValue = get$1(vocabularyValue, `title.title.${intl.locale}`, null);
+        const titleValue = get(vocabularyValue, `title.title.${intl.locale}`, null);
 
         if (titleValue !== null) {
           return titleValue;
@@ -4934,7 +5021,7 @@ function IWorkflow() {
   return jsxs(Fragment, {
     children: [workflowAction && jsx(Confirm, {
       loading: loading,
-      onCancel: () => setWorkflowAction(null),
+      onCancel: () => setWorkflowAction(undefined),
       onConfirm: doWorkflowAction,
       message: intl.formatMessage(messages$1.confirm_message, {
         title: Ctx.context.title || Ctx.context['@name']
@@ -4957,7 +5044,7 @@ function IWorkflow() {
         return jsx("button", {
           className: "button mr-4",
           onClick: () => 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']);
       })]
     })]
@@ -4981,14 +5068,17 @@ function PanelActions() {
 
   return jsx(Fragment$1, {
     children: Object.keys(ACTIONS_OBJECT).map(actionKey => {
-      if (hasPerm(ACTIONS_OBJECT[actionKey].perms)) {
+      const actionKeyTyped = actionKey;
+      const actionObject = ACTIONS_OBJECT[actionKeyTyped];
+
+      if (hasPerm(actionObject.perms)) {
         return jsx("button", {
           className: "button mr-4",
           onClick: () => {
-            onAction(actionKey);
+            onAction(actionKeyTyped);
           },
-          children: ACTIONS_OBJECT[actionKey].text
-        }, `panel_action_${ACTIONS_OBJECT[actionKey].text}`);
+          children: actionObject.text
+        }, `panel_action_${actionObject.text}`);
       }
     })
   });
@@ -5130,8 +5220,9 @@ const prepareData = result => {
 };
 
 const arrayToObject = array => array.reduce((obj, item) => {
-  obj[item.id] = item;
-  return obj;
+  return _extends({}, obj, {
+    [item.id]: item
+  });
 }, {});
 
 function PanelBehaviors() {
@@ -5266,8 +5357,9 @@ function ItemsActionsProvider({
 
   function onSelectAllItems(checked) {
     setSelected(items.reduce((obj, item) => {
-      obj[`${item.path}/${item.id}`] = checked;
-      return obj;
+      return _extends({}, obj, {
+        [`${item.path}/${item.id}`]: checked
+      });
     }, {
       all: checked
     }));
@@ -5296,18 +5388,39 @@ function ItemsActionsProvider({
     children: children
   });
 }
+
+const useItemsActions = () => {
+  const {
+    onAction,
+    onSelectOneItem,
+    onSelectAllItems,
+    selected
+  } = useContext(ItemsActionsCtx);
+
+  if (!onAction || !onSelectOneItem || !onSelectAllItems || !selected) {
+    throw new Error('useItemsActions must be used inside ItemsActionsProvider');
+  }
+
+  return {
+    onAction,
+    onSelectOneItem,
+    onSelectAllItems,
+    selected
+  };
+};
 /**
  * Checkbox component without props that consume the ItemsActionsContext
  * and it select/unselect all items of the page.
  */
 
+
 function AllItemsCheckbox({
   dataTest
 }) {
   const {
     onSelectAllItems,
     selected
-  } = useContext(ItemsActionsCtx);
+  } = useItemsActions();
   return jsx(Checkbox, {
     onChange: onSelectAllItems,
     checked: selected.all,
@@ -5321,7 +5434,7 @@ function ItemCheckbox({
   const {
     selected,
     onSelectOneItem
-  } = useContext(ItemsActionsCtx);
+  } = useItemsActions();
   const absId = `${item.path}/${item.id}`;
   const value = selected[absId];
   return jsx(Checkbox, {
@@ -5341,7 +5454,7 @@ function ItemsActionsDropdown() {
   const {
     selected,
     onAction
-  } = useContext(ItemsActionsCtx);
+  } = useItemsActions();
   const disabled = Object.values(selected).every(v => !v);
   const options = Object.keys(ACTIONS_OBJECT).map(action => ({
     text: ACTIONS_OBJECT[action].text,
@@ -5367,77 +5480,216 @@ function ItemsActionsDropdown() {
   });
 }
 
-function Pagination({
-  current,
-  total,
-  doPaginate,
-  pager
-}) {
-  const intl = useIntl();
-  const maxPages = Math.ceil(total / pager);
+function Pagination({
+  current,
+  total,
+  doPaginate,
+  pager
+}) {
+  const intl = useIntl();
+  const maxPages = Math.ceil(total / pager);
+
+  if (maxPages <= 1) {
+    return null;
+  }
+
+  return jsxs("div", {
+    children: [jsx("p", {
+      className: "level-right has-text-grey is-size-7",
+      children: jsx("span", {
+        children: intl.formatMessage({
+          id: "pagination",
+          defaultMessage: [{
+            "type": 1,
+            "value": "currentPage"
+          }, {
+            "type": 0,
+            "value": " / "
+          }, {
+            "type": 1,
+            "value": "totalPages"
+          }, {
+            "type": 0,
+            "value": " of "
+          }, {
+            "type": 1,
+            "value": "totalItems"
+          }, {
+            "type": 0,
+            "value": " items"
+          }]
+        }, {
+          currentPage: current + 1,
+          totalPages: maxPages,
+          totalItems: total
+        })
+      })
+    }), jsxs("nav", {
+      className: "pagination is-size-7",
+      role: "navigation",
+      "aria-label": "pagination",
+      children: [jsx("a", {
+        className: "pagination-previous is-small",
+        // disabled={current === 0}
+        onClick: () => current > 0 ? doPaginate(current - 1) : null,
+        children: jsx("span", {
+          className: "icon",
+          children: jsx("i", {
+            className: "fas fa-arrow-left"
+          })
+        })
+      }), jsx("a", {
+        className: "pagination-next is-small",
+        // disabled={current >= maxPages - 1}
+        onClick: () => doPaginate(current + 1),
+        children: jsx("span", {
+          className: "icon",
+          children: jsx("i", {
+            className: "fas fa-arrow-right"
+          })
+        })
+      })]
+    })]
+  });
+}
+
+const base = {
+  local: {
+    roleperm: {},
+    prinperm: {},
+    prinrole: {}
+  },
+  inherit: []
+};
+class Sharing {
+  constructor(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;
+  }
+
+  get roles() {
+    return Object.keys(this.local.roleperm);
+  }
+
+  getRole(role) {
+    return this.local.roleperm[role];
+  }
+
+  get principals() {
+    return Object.keys(this.local.prinperm);
+  }
+
+  getPrincipals(principal) {
+    return this.local.prinperm[principal];
+  }
+
+  get prinrole() {
+    return Object.keys(this.local.prinrole);
+  }
+
+  getPrinroles(role) {
+    return this.local.prinrole[role];
+  }
+
+}
+
+class ItemModel {
+  constructor(item, url = '') {
+    this.item = void 0;
+    this.url = void 0;
+    this.item = item;
+    this.url = url;
+  }
+
+  get path() {
+    // Compat
+    const item = this.item['@id'] ? this.item['@id'] : this.item['@absolute_url'];
+    let 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;
+  }
+
+  get name() {
+    return this.item.title || this.item['@name'];
+  }
+
+  get icon() {
+    const 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';
+    }
+  }
+
+  get fullPath() {
+    return this.url + this.id;
+  }
+
+  get id() {
+    if ('id' in this.item) {
+      return this.item.id;
+    }
+
+    const id = this.item['@id'].split('&')[0].split('/');
+    return id[id.length - 1];
+  }
+
+  get uid() {
+    return this.item['@uid'];
+  }
 
-  if (maxPages <= 1) {
-    return null;
+  get type() {
+    return this.item['@type'] || this.item.type_name;
+  }
+
+  get title() {
+    return this.item.title;
+  }
+
+  get created() {
+    return this.item.creation_date ? formatDate(this.item.creation_date) : '';
+  }
+
+  get updated() {
+    return this.item.modification_date ? formatDate(this.item.modification_date) : '';
   }
 
-  return jsxs("div", {
-    children: [jsx("p", {
-      className: "level-right has-text-grey is-size-7",
-      children: jsx("span", {
-        children: intl.formatMessage({
-          id: "pagination",
-          defaultMessage: [{
-            "type": 1,
-            "value": "currentPage"
-          }, {
-            "type": 0,
-            "value": " / "
-          }, {
-            "type": 1,
-            "value": "totalPages"
-          }, {
-            "type": 0,
-            "value": " of "
-          }, {
-            "type": 1,
-            "value": "totalItems"
-          }, {
-            "type": 0,
-            "value": " items"
-          }]
-        }, {
-          currentPage: current + 1,
-          totalPages: maxPages,
-          totalItems: total
-        })
-      })
-    }), jsxs("nav", {
-      className: "pagination is-size-7",
-      role: "navigation",
-      "aria-label": "pagination",
-      children: [jsx("a", {
-        className: "pagination-previous is-small",
-        // disabled={current === 0}
-        onClick: () => current > 0 ? doPaginate(current - 1) : null,
-        children: jsx("span", {
-          className: "icon",
-          children: jsx("i", {
-            className: "fas fa-arrow-left"
-          })
-        })
-      }), jsx("a", {
-        className: "pagination-next is-small",
-        // disabled={current >= maxPages - 1}
-        onClick: () => doPaginate(current + 1),
-        children: jsx("span", {
-          className: "icon",
-          children: jsx("i", {
-            className: "fas fa-arrow-right"
-          })
-        })
-      })]
-    })]
-  });
 }
 
 function Item({
@@ -5558,11 +5810,11 @@ function SearchOptionsLabels({
 }) {
   const [location,, del] = useLocation();
   const [renderValue, setRenderValue] = useState(undefined);
-  const defaultRenderValue = location.get(query);
+  const defaultRenderValue = location.get(query) || '';
   useEffect(() => {
     let value = defaultRenderValue;
 
-    if ((options != null ? options : []).length > 0) {
+    if (options && (options != null ? options : []).length > 0) {
       const option = options.find(item => item.value === value);
 
       if (option) {
@@ -5600,14 +5852,16 @@ function SearchVocabularyLabels({
   const [location,, del] = useLocation();
   const [renderValue, setRenderValue] = useState(undefined);
   const vocabulary = useVocabulary(vocabularyName);
-  const defaultRenderValue = location.get(query);
+  const defaultRenderValue = location.get(query) || '';
   useEffect(() => {
     var _vocabulary$data$item, _vocabulary$data;
 
     let 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) {
-      const vocabularyValue = vocabulary.data.items.find(item => item.token === value);
+      var _vocabulary$data2;
+
+      const vocabularyValue = vocabulary == null ? void 0 : (_vocabulary$data2 = vocabulary.data) == null ? void 0 : _vocabulary$data2.items.find(item => item.token === value);
 
       if (vocabularyValue) {
         value = vocabularyValue.title;
@@ -5637,7 +5891,7 @@ function SearchVocabularyLabels({
   return null;
 }
 
-const initialState$2 = {
+const initialState$3 = {
   page: 0,
   items: [],
   loading: true,
@@ -5651,7 +5905,7 @@ function PanelItems() {
   } = useConfig();
   const intl = useIntl();
   const Ctx = useTraversal();
-  const [state, setState] = useSetState(initialState$2);
+  const [state, setState] = useSetState(initialState$3);
   const {
     items,
     loading,
@@ -5666,7 +5920,7 @@ function PanelItems() {
   let page;
 
   try {
-    page = parseInt(location.get('page')) || 0;
+    page = parseInt(location.get('page') || '0');
   } catch (_unused) {
     page = 0;
   }
@@ -5713,7 +5967,7 @@ function PanelItems() {
   let resultQueryParams = [];
   const resultDynamicLocation = [];
   filterSchema.forEach(filter => {
-    const itemParam = location.get(filter.attribute_key);
+    const itemParam = location.get(filter.attribute_key) || '';
     resultDynamicLocation.push(itemParam);
 
     if (itemParam) {
@@ -5725,7 +5979,7 @@ function PanelItems() {
     const controller = new AbortController();
     if (Ctx.state.loading) return;
 
-    (async () => {
+    const getData = async () => {
       setState({
         loading: true,
         total: Ctx.context.length
@@ -5736,14 +5990,11 @@ function PanelItems() {
       const fnName = get('searchEngineQueryParamsFunction', SearchEngine);
 
       if (sortParsed === undefined) {
-        const defaultSortValue = Ctx.registry.getDefaultSortValue(Ctx.context['@type'], {
-          key: 'id',
-          direction: 'des'
-        });
+        const defaultSortValue = Ctx.registry.getDefaultSortValue(Ctx.context['@type']);
         sortParsed = parser(`_sort_${defaultSortValue.direction}=${defaultSortValue.key}`);
       }
 
-      const qsParsed = Ctx.client[fnName]({
+      const qsParsed = Ctx.client.getQueryParamsSearchFunction(fnName)({
         path: Ctx.path,
         start: page * PageSize,
         pageSize: PageSize
@@ -5763,16 +6014,15 @@ function PanelItems() {
       const {
         signal
       } = controller;
-      const data = await Ctx.client.search(Ctx.path, qs, false, false, {
-        signal
-      });
+      const data = await Ctx.client.search(Ctx.path, qs, false, false, signal);
       setState({
-        items: data.member,
+        items: data.items,
         loading: false,
         total: data.items_count
       });
-    })();
+    };
 
+    getData();
     return () => {
       controller.abort();
     };
@@ -5817,12 +6067,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: value => {
@@ -5895,7 +6147,7 @@ function PanelItems() {
           const filterData = location.get(filter.attribute_key);
 
           if (filterData) {
-            var _filter$values2;
+            var _filter$values3;
 
             if (filter.type === 'select' && filter.vocabulary) {
               return jsx("div", {
@@ -5904,7 +6156,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,
@@ -5947,7 +6199,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", {
             children: "\u00A0"
@@ -5956,7 +6208,7 @@ function PanelItems() {
       }), jsxs("tbody", {
         children: [items && items.map(item => jsx(RItem, {
           item: item,
-          search: search,
+          search: search != null ? search : '',
           columns: columns
         }, item['@uid'])), items && items.length === 0 && jsx("tr", {
           children: jsx("td", {
@@ -5982,17 +6234,19 @@ function BehaviorsView({
   context,
   schema
 }) {
+  var _context$__behaviors_;
+
   const Ctx = useTraversal();
   const {
     getBehavior
   } = Ctx.registry;
-  const behaviors = [].concat(context.__behaviors__, context['@static_behaviors']);
+  const behaviors = [...((_context$__behaviors_ = context.__behaviors__) != null ? _context$__behaviors_ : []), ...Object(context['@static_behaviors'])];
 
-  const GetBehavior = b => {
-    const Cls = getBehavior(b, BehaviorNotImplemented);
+  const GetBehavior = behaviorName => {
+    const 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'], {})
     });
   };
 
@@ -6069,10 +6323,14 @@ function PanelProperties() {
 
   const ignoreFields = Ctx.registry.getProperties(Ctx.context['@type']).ignoreField || cfg.properties_ignore_fields || _ignoreFields;
 
-  const properties = Object.keys((schema == null ? void 0 : (_schema$data = schema.data) == null ? void 0 : _schema$data.properties) || []).filter(key => !ignoreFields.includes(key)).map(key => ({
-    key,
-    value: schema.data.properties[key]
-  }));
+  const properties = Object.keys((schema == null ? void 0 : (_schema$data = schema.data) == null ? void 0 : _schema$data.properties) || []).filter(key => !ignoreFields.includes(key)).map(key => {
+    var _schema$data2;
+
+    return {
+      key,
+      value: schema == null ? void 0 : (_schema$data2 = schema.data) == null ? void 0 : _schema$data2.properties[key]
+    };
+  });
   useEffect(() => {
     async function getSchema() {
       if (!schema.loading && !schema.data && !schema.error) {
@@ -6080,7 +6338,7 @@ function PanelProperties() {
           setSchema({
             loading: true
           });
-          const dataJson = await Ctx.client.getTypeSchema(Ctx.path, model.type);
+          const dataJson = await Ctx.client.getTypeSchema(Ctx.path, Ctx.context.type_name);
           setSchema({
             loading: false,
             data: dataJson
@@ -6145,7 +6403,7 @@ function PanelProperties() {
               }), jsx("td", {
                 children: jsx(EditableField, {
                   field: prop,
-                  value: Ctx.context[prop],
+                  value: get(Ctx.context, prop, ''),
                   modifyContent: false
                 })
               })]
@@ -6171,7 +6429,7 @@ function PanelProperties() {
               key,
               value
             }) => {
-              var _schema$data$required, _schema$data2;
+              var _schema$data$required, _schema$data3;
 
               return jsxs("tr", {
                 children: [jsx("td", {
@@ -6182,10 +6440,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);
@@ -6219,12 +6477,6 @@ function PermissionPrinperm({
     error: undefined
   });
 
-  const getMultiples = (field, setter) => values => {
-    setter({
-      [field]: values
-    });
-  };
-
   const savePermission = async () => {
     if (!state.principal || !state.setting || state.permission.length === 0) {
       setState({
@@ -6268,7 +6520,7 @@ function PermissionPrinperm({
         children: intl.formatMessage(genericMessages.select_principal)
       }), jsx(Select, {
         appendDefault: true,
-        options: principals,
+        options: principals != null ? principals : [],
         onChange: value => setState({
           principal: value
         }),
@@ -6280,8 +6532,12 @@ function PermissionPrinperm({
         className: "label",
         children: intl.formatMessage(genericMessages.select_permissions)
       }), jsx(Select, {
-        options: permissions,
-        onChange: getMultiples('permission', setState),
+        options: permissions != null ? permissions : [],
+        onChange: values => {
+          setState({
+            permission: values
+          });
+        },
         size: 5,
         multiple: true,
         dataTest: "selectPermissionsTest"
@@ -6328,12 +6584,6 @@ function PermissionPrinrole({
     error: undefined
   });
 
-  const getMultiples = (field, setter) => values => {
-    setter({
-      [field]: values
-    });
-  };
-
   const savePermission = async () => {
     if (!state.principal || !state.setting || state.roles.length === 0) {
       setState({
@@ -6377,7 +6627,7 @@ function PermissionPrinrole({
         children: intl.formatMessage(genericMessages.select_principal)
       }), jsx(Select, {
         appendDefault: true,
-        options: principals,
+        options: principals != null ? principals : [],
         onChange: value => setState({
           principal: value
         }),
@@ -6390,7 +6640,11 @@ function PermissionPrinrole({
         children: intl.formatMessage(genericMessages.select_role)
       }), jsx(Select, {
         options: roles,
-        onChange: getMultiples('roles', setState),
+        onChange: values => {
+          setState({
+            roles: values
+          });
+        },
         size: 5,
         multiple: true,
         dataTest: "selectRoleTest"
@@ -6437,12 +6691,6 @@ function PermissionRoleperm({
     error: undefined
   });
 
-  const getMultiples = (field, setter) => values => {
-    setter({
-      [field]: values
-    });
-  };
-
   const savePermission = async () => {
     if (!state.role || !state.setting || state.permission.length === 0) {
       setState({
@@ -6498,8 +6746,12 @@ function PermissionRoleperm({
         className: "label",
         children: intl.formatMessage(genericMessages.select_permissions)
       }), jsx(Select, {
-        options: permissions,
-        onChange: getMultiples('permission', setState),
+        options: permissions != null ? permissions : [],
+        onChange: values => {
+          setState({
+            permission: values
+          });
+        },
         dataTest: "selectPermissionsTest",
         size: 5,
         multiple: true
@@ -6625,7 +6877,18 @@ function PanelPermissions() {
   useEffect(() => {
     get('@sharing');
   }, [reset]);
-  const perms = new Sharing(result);
+  const perms = useMemo(() => {
+    if (result) {
+      return new Sharing(result);
+    }
+
+    return null;
+  }, [result]);
+
+  if (perms === null) {
+    return null;
+  }
+
   return jsxs("div", {
     className: "columns",
     children: [!loading && jsxs("div", {
@@ -6762,12 +7025,12 @@ function AddPermission({
       let roles = [];
       const principalsData = await Ctx.client.getPrincipals(Ctx.path);
       const groups = principalsData.groups.map(group => ({
-        text: group.id,
-        value: group.id
+        text: group['@name'],
+        value: group['@name']
       }));
       const users = principalsData.users.map(user => ({
-        text: user.fullname || user.id,
-        value: user.id
+        text: user.fullname || user['@name'],
+        value: user['@name']
       }));
       principals = [...groups, ...users];
       const req = await Ctx.client.getRoles(Ctx.path);
@@ -6820,14 +7083,6 @@ const prepareAvailable = (items, already, title) => {
     text: `Add ${title}`
   };
   if (items.length === 0) return [];
-
-  if (items[0] && typeof items[0] === 'string') {
-    return [def].concat(items.map(x => ({
-      value: x,
-      text: x
-    }))).filter(item => !already.includes(item.value));
-  }
-
   return [def].concat(items).filter(item => !already.includes(item.value));
 };
 
@@ -6839,7 +7094,7 @@ function TagsWidget({
   onChange,
   loading
 }) {
-  const selectRef = useRef();
+  const selectRef = useRef(null);
   const [result, setResult] = useState(items);
   const availableData = prepareAvailable(available || [], result, title);
 
@@ -6877,7 +7132,7 @@ function TagsWidget({
           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,
@@ -6895,12 +7150,12 @@ function TagsWidget({
   });
 }
 
-const initialState$3 = {
-  types: undefined
+const initialState$4 = {
+  types: []
 };
 function CreateButton() {
   const intl = useIntl();
-  const [state, setState] = useSetState(initialState$3);
+  const [state, setState] = useSetState(initialState$4);
   const Ctx = useTraversal();
   const Config = useConfig();
   useEffect(() => {
@@ -6960,11 +7215,11 @@ function ContextToolbar({
   AddButton
 }) {
   const intl = useIntl();
-  const [state, setState] = useSetState(initialState$3);
+  const [state, setState] = useSetState(initialState$4);
   const [location, setLocation, del] = useLocation();
   const traversal = useTraversal();
   const Config = useConfig();
-  const searchText = location.get('q');
+  const searchText = location.get('q') || '';
   const [searchValue, setSearchValue] = useState(searchText || '');
   useEffect(() => {
     loadTypes();
@@ -6980,14 +7235,13 @@ function ContextToolbar({
     });
   }
 
-  const onSearchQuery = ev => {
-    const search = ev.target[0].value;
+  const onSearchQuery = event => {
+    event.preventDefault();
     setLocation({
-      q: search,
+      q: event.currentTarget.elements.filterInput.value,
       tab: 'Items',
       page: 0
     });
-    ev.preventDefault();
   };
 
   const onSearchByType = typeText => {
@@ -7019,7 +7273,8 @@ function ContextToolbar({
               type: "text",
               className: "input is-size-7",
               placeholder: intl.formatMessage(genericMessages.search),
-              "data-test": "inputFilterTest"
+              "data-test": "inputFilterTest",
+              id: "filterInput"
             })
           }), jsx("div", {
             className: "control",
@@ -7044,7 +7299,7 @@ function ContextToolbar({
           text: item,
           value: item
         })),
-        onChange: onSearchByType
+        onChange: value => onSearchByType(value)
       })
     }), traversal.hasPerm('guillotina.AddContent') && jsx("div", {
       className: "level-item",
@@ -7082,18 +7337,12 @@ function TabsPanel({
   fallback = FallbackTab
 }) {
   const [location, setLocation] = useLocation();
-
-  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
   }*/
 
-
   const [current, setTab] = useState(currentTab);
   const CurrentComp = tabs[current] || fallback;
   React.useEffect(() => {
@@ -7153,14 +7402,14 @@ const tabsPermissions = {
   Behaviors: 'guillotina.ModifyContent',
   Permissions: 'guillotina.SeePermissions'
 };
-function FolderCtx(props) {
+function FolderCtx() {
   const ctx = useTraversal();
   const 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, {})
+  });
 }
 
 const tabs$1 = {
@@ -7174,21 +7423,22 @@ const tabsPermissions$1 = {
   Behaviors: 'guillotina.ModifyContent',
   Permissions: 'guillotina.SeePermissions'
 };
-function ItemCtx(props) {
+function ItemCtx() {
   const ctx = useTraversal();
   const calculated = ctx.filterTabs(tabs$1, tabsPermissions$1);
-  return jsx(TabsPanel, _extends({
+  return jsx(TabsPanel, {
     tabs: calculated,
     currentTab: "Properties"
-  }, props));
+  });
 }
 
 function ApplicationCtx() {
   const intl = useIntl();
-  const context = useTraversal();
+  const traversal = useTraversal();
+  const appContext = traversal.state.context;
   const {
     databases
-  } = context.state.context;
+  } = appContext;
   return jsxs(Fragment, {
     children: [jsx("h3", {
       children: intl.formatMessage({
@@ -7202,24 +7452,28 @@ function ApplicationCtx() {
       className: "container",
       children: [jsx(ItemTitle, {
         title: "Objects"
-      }), databases.map(db => jsx(Item, {
-        item: {
-          id: db,
-          path: `/${db}/`
-        },
-        icon: 'fas fa-database'
-      }, db))]
+      }), jsx("table", {
+        children: jsx("tbody", {
+          children: databases.map(db => jsx(Item, {
+            item: {
+              id: db,
+              path: `/${db}/`
+            },
+            icon: 'fas fa-database'
+          }, db))
+        })
+      })]
     })]
   });
 }
 function DatabaseCtx() {
-  const context = useTraversal();
+  const traversal = useTraversal();
   const {
     containers
-  } = context.state.context;
+  } = traversal.state.context;
   const {
     path
-  } = context.state;
+  } = traversal.state;
   return jsx(Fragment, {
     children: jsxs("div", {
       className: "container",
@@ -7477,18 +7731,17 @@ function UsersToolbar() {
   const [location, setLocation] = useLocation();
   const searchText = location.get('q');
 
-  const onSearchQuery = ev => {
-    const search = ev.target[0].value;
+  const onSearchQuery = event => {
+    event.preventDefault();
     setLocation({
-      q: search,
+      q: event.currentTarget.elements.filterInput.value,
       page: 0
     });
-    ev.preventDefault();
   }; // cleanup form on state.search change
 
 
   useEffect(() => {
-    if (!searchText || searchText === '') {
+    if (ref.current && (!searchText || searchText === '')) {
       ref.current.value = '';
     }
   }, [searchText]);
@@ -7508,7 +7761,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",
@@ -7538,12 +7792,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() {
   const intl = useIntl();
@@ -7556,9 +7810,10 @@ function UserCtx() {
     roles: [],
     groups: []
   });
+  const userDataContext = Ctx.context;
   const fields = {
     user_groups: [],
-    user_roles: Ctx.context.user_roles
+    user_roles: userDataContext.user_roles
   };
   const [remotes, updateRemote] = useRemoteField(fields);
   useEffect(() => {
@@ -7636,7 +7891,7 @@ function UserCtx() {
                   "value": "Username"
                 }]
               }), ":", ' ']
-            }), ' ', Ctx.context.username, " (", Ctx.context.email, ")"]
+            }), ' ', userDataContext.username, " (", userDataContext.email, ")"]
           }), jsxs("p", {
             children: [jsxs("label", {
               children: [' ', intl.formatMessage({
@@ -7646,7 +7901,7 @@ function UserCtx() {
                   "value": "Creation Date"
                 }]
               }), ":", ' ']
-            }), ' ', formatDate(Ctx.context.creation_date)]
+            }), ' ', formatDate(userDataContext.creation_date)]
           }), jsxs("p", {
             children: [jsxs("label", {
               children: [' ', intl.formatMessage({
@@ -7656,7 +7911,7 @@ function UserCtx() {
                   "value": "Modification Date"
                 }]
               }), ":", ' ']
-            }), ' ', formatDate(Ctx.context.modification_date)]
+            }), ' ', formatDate(userDataContext.modification_date)]
           }), jsx(Button, {
             className: "is-size-7 is-info",
             onClick: () => {
@@ -7673,7 +7928,7 @@ function UserCtx() {
         }), jsx("hr", {}), jsx(UserForm, {
           actionName: "Save",
           onSubmit: ev => updateObject(ev),
-          formData: Ctx.context,
+          formData: userDataContext,
           exclude: ['password'],
           remotes: remotes,
           submitButton: false,
@@ -7687,7 +7942,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",
@@ -7708,7 +7963,10 @@ function UserCtx() {
               "value": "The user doesn't have any role"
             }]
           }),
-          available: state.roles
+          available: state.roles.map(x => ({
+            value: x,
+            text: x
+          }))
         })]
       })]
     })]
@@ -7726,7 +7984,7 @@ function CopyItems(props) {
   async function copyItems(path, form) {
     const responses = await Promise.all(items.map((item, i) => {
       const 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)
       });
@@ -7762,7 +8020,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)), "\u00A0"]
@@ -7832,9 +8090,9 @@ function MoveItems(props) {
 
   async function moveItems(path) {
     const responses = await Promise.all(items.map(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
       });
     }));
     Ctx.refresh();
@@ -8123,18 +8381,17 @@ function GroupToolbar() {
   const [location, setLocation] = useLocation();
   const searchText = location.get('q');
 
-  const onSearchQuery = ev => {
-    const search = ev.target[0].value;
+  const onSearchQuery = event => {
+    event.preventDefault();
     setLocation({
-      q: search,
+      q: event.currentTarget.elements.filterInput.value,
       page: 0
     });
-    ev.preventDefault();
   }; // cleanup form on state.search change
 
 
   useEffect(() => {
-    if (!searchText || searchText === '') {
+    if (ref.current && (!searchText || searchText === '')) {
       ref.current.value = '';
     }
   }, [searchText]);
@@ -8154,7 +8411,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",
@@ -8190,12 +8448,12 @@ function GroupToolbar() {
     })]
   });
 }
-function GroupsCtx(props) {
-  return jsx(TabsPanel, _extends({
+function GroupsCtx() {
+  return jsx(TabsPanel, {
     tabs: tabs$4,
     currentTab: "Groups",
     rightToolbar: jsx(GroupToolbar, {})
-  }, props));
+  });
 }
 const sortParsed = parser(`_sort_asc=id`);
 const searchParsed = parser('type_name=User');
@@ -8206,6 +8464,7 @@ function GroupCtx() {
     patch
   } = useCrudContext();
   const [roles, setRoles] = useState([]);
+  const groupDataContext = Ctx.context;
   useEffect(() => {
     async function getRoles() {
       const requestGetRoles = await Ctx.client.getRoles(Ctx.path);
@@ -8240,9 +8499,9 @@ function GroupCtx() {
       isError,
       errorMessage
     } = await patch({
-      user_roles: Ctx.context.user_roles.concat(role)
+      user_roles: groupDataContext.user_roles.concat(role)
     });
-    handleResponse(isError, intl.formatMessage({
+    handleResponse(!!isError, intl.formatMessage({
       id: "role_added_to_group",
       defaultMessage: [{
         "type": 0,
@@ -8256,7 +8515,7 @@ function GroupCtx() {
       }]
     }, {
       role
-    }), errorMessage);
+    }), errorMessage != null ? errorMessage : '');
   };
 
   const removeRole = async role => {
@@ -8264,9 +8523,9 @@ function GroupCtx() {
       isError,
       errorMessage
     } = await patch({
-      user_roles: Ctx.context.user_roles.filter(r => r !== role)
+      user_roles: groupDataContext.user_roles.filter(r => r !== role)
     });
-    handleResponse(isError, intl.formatMessage({
+    handleResponse(!!isError, intl.formatMessage({
       id: "role_removed_from_group",
       defaultMessage: [{
         "type": 0,
@@ -8280,21 +8539,22 @@ function GroupCtx() {
       }]
     }, {
       role
-    }), errorMessage);
+    }), errorMessage != null ? errorMessage : '');
   };
 
   const addUser = async newUserId => {
     const data = {};
-    Ctx.context.users.forEach(user => {
+    groupDataContext.users.forEach(user => {
       data[user] = true;
     });
     data[newUserId] = true;
+    const response = await Ctx.client.rest.patch(`${Ctx.containerPath}@groups/${Ctx.context['@name']}`, {
+      users: data
+    });
     const {
       isError,
       errorMessage
-    } = await Ctx.client.rest.patch(`${Ctx.containerPath}@groups/${Ctx.context['@name']}`, {
-      users: data
-    });
+    } = await processResponse(response);
     handleResponse(isError, intl.formatMessage({
       id: "user_added_to_group",
       defaultMessage: [{
@@ -8309,20 +8569,21 @@ function GroupCtx() {
       }]
     }, {
       user: newUserId
-    }), errorMessage);
+    }), errorMessage != null ? errorMessage : '');
   };
 
   const removeUser = async userToRemove => {
     const data = {};
-    Ctx.context.users.forEach(user => {
+    groupDataContext.users.forEach(user => {
       data[user] = userToRemove !== user;
     });
+    const response = await Ctx.client.rest.patch(`${Ctx.containerPath}@groups/${Ctx.context['@name']}`, {
+      users: data
+    });
     const {
       isError,
       errorMessage
-    } = await Ctx.client.rest.patch(`${Ctx.containerPath}@groups/${Ctx.context['@name']}`, {
-      users: data
-    });
+    } = await processResponse(response);
     handleResponse(isError, intl.formatMessage({
       id: "user_removed_from_group",
       defaultMessage: [{
@@ -8337,7 +8598,7 @@ function GroupCtx() {
       }]
     }, {
       user: userToRemove
-    }), errorMessage);
+    }), errorMessage != null ? errorMessage : '');
   };
 
   return jsxs("div", {
@@ -8387,10 +8648,10 @@ function GroupCtx() {
             }]
           })
         }), jsx(Select, {
-          options: roles.filter(role => !Ctx.context.user_roles.includes(role.value)),
+          options: roles.filter(role => !groupDataContext.user_roles.includes(role.value)),
           appendDefault: true,
-          onChange: addRole
-        }), jsx("hr", {}), Ctx.context.user_roles.map(urole => jsx("p", {
+          onChange: value => addRole(value)
+        }), jsx("hr", {}), groupDataContext.user_roles.map(urole => jsx("p", {
           className: "control",
           children: jsx(Tag, {
             name: urole,
@@ -8418,7 +8679,7 @@ function GroupCtx() {
           traversal: Ctx,
           onChange: addUser,
           btnClass: "is-small"
-        }), jsx("hr", {}), Ctx.context.users.map(user => jsx("p", {
+        }), jsx("hr", {}), groupDataContext.users.map(user => jsx("p", {
           className: "control",
           children: jsx(Tag, {
             name: user,
@@ -8549,7 +8810,7 @@ function Path() {
   const links = buildPaths(segments);
 
   if (segments.length === 1) {
-    return false;
+    return null;
   }
 
   return jsx("nav", {
@@ -8704,11 +8965,15 @@ const getItemsColumn = type => {
   return undefined;
 };
 
-const getForm = (type, fallback = BaseForm) => {
-  return registry.forms[type] || fallback;
+const getView = name => {
+  return registry.views[name];
+};
+
+const getForm = (type, fallback) => {
+  return registry.forms[type] || fallback || BaseForm;
 };
 
-const getAction = (type, fallback = undefined) => {
+const getAction = (type, fallback) => {
   return registry.actions[type] || fallback;
 };
 
@@ -8722,24 +8987,16 @@ const getProperties = type => {
 
 const getSchemas = type => {
   return registry.schemas[type] || {};
-  /*
-    filters: [
-      {
-        attribute_key: string,
-        label: string,
-        type: 'select' | 'input'
-        vocabulary: string | undefined
-        values: {[key:string]:any}[]
-      }
-    ]
-  */
 };
 
-const getFieldsToFilter = (type, fallback) => {
+const getFieldsToFilter = (type, fallback = ['title']) => {
   return registry.fieldsToFilter[type] || fallback;
 };
 
-const getDefaultSortValue = (type, fallback) => {
+const getDefaultSortValue = (type, fallback = {
+  key: 'id',
+  direction: 'des'
+}) => {
   return registry.defaultSortValue[type] || fallback;
 };
 
@@ -8752,7 +9009,10 @@ function useRegistry(data) {
 
   if (data && !ref.current) {
     ref.current = true;
-    Object.keys(data).map(key => registry[key] = _extends({}, registry[key], data[key]));
+    Object.keys(data).map(key => {
+      const registryKey = key;
+      registry[registryKey] = _extends({}, registry[registryKey], data[registryKey]);
+    });
   }
 
   return {
@@ -8766,7 +9026,8 @@ function useRegistry(data) {
     getItemsColumn,
     getFieldsToFilter,
     getDefaultSortValue,
-    getSchemas
+    getSchemas,
+    getView
   };
 }
 /*
@@ -8786,83 +9047,6 @@ const registry = {
 
 */
 
-const 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,
@@ -11681,25 +11865,27 @@ function Guillotina(_ref) {
   const {
     Permissions
   } = useConfig(config);
-  const registry = useRegistry(props.registry || {}); // Location is cooked routing solution (only uses search params)
+  const registry = useRegistry(props.registry); // Location is cooked routing solution (only uses search params)
 
   const [location] = useLocation(); // if there is no path provided just go to root
 
   const searchPath = location.get('path') || '/';
 
   if (searchPath && searchPath !== '') {
-    initialState$4.path = searchPath;
+    initialState.path = searchPath;
   }
 
-  const [state, dispatch] = useReducer(guillotinaReducer, initialState$4);
+  const [state, dispatch] = useReducer(guillotinaReducer, initialState);
   const {
     path,
     refresh
   } = state;
   useEffect(() => {
     dispatch({
-      type: 'SET_PATH',
-      payload: searchPath
+      type: GuillotinaReducerActionTypes.SET_PATH,
+      payload: {
+        path: searchPath
+      }
     });
   }, [searchPath]);
   useEffect(() => {
@@ -11708,14 +11894,18 @@ function Guillotina(_ref) {
 
       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;
       }
@@ -11724,7 +11914,7 @@ function Guillotina(_ref) {
       const pr = await client.canido(path, Permissions);
       const permissions = await pr.json();
       dispatch({
-        type: 'SET_CONTEXT',
+        type: GuillotinaReducerActionTypes.SET_CONTEXT,
         payload: {
           context,
           permissions
@@ -11734,9 +11924,9 @@ function Guillotina(_ref) {
 
     initContext();
   }, [path, refresh, client]);
-  const ErrorBoundary = registry.get('views', 'ErrorBoundary');
-  const NotAllowed = registry.get('views', 'NotAllowed');
-  const NotFound = registry.get('views', 'NotFound');
+  const ErrorBoundary = registry.getView('ErrorBoundary');
+  const NotAllowed = registry.getView('NotAllowed');
+  const NotFound = registry.getView('NotFound');
   const Path = registry.get('components', 'Path');
   const contextData = {
     url,
@@ -11761,7 +11951,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",
@@ -11770,7 +11960,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, {
@@ -11876,7 +12066,7 @@ const ERRORS = {
 const initialState$5 = {
   username: '',
   password: '',
-  loading: undefined,
+  loading: false,
   errors: undefined
 };
 const Login = ({
@@ -11889,7 +12079,7 @@ const Login = ({
   const [state, setState] = useSetState(initialState$5);
   const inputRef = useRef(null);
   useEffect(() => {
-    if (inputRef) {
+    if (inputRef && inputRef.current) {
       inputRef.current.focus();
     }
   }, [inputRef]);
@@ -12066,28 +12256,28 @@ function RequiredFieldsForm({
     dataTest: dataTest,
     children: [schema && schema.data && !schema.loading && schema.formFields.map(key => {
       if (!ignoreFiels.includes(key)) {
-        var _value$title;
+        var _schema$data, _value$title, _schema$data2;
 
-        const value = schema.data.properties[key];
+        const 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: ev => {
+          schema: (_schema$data2 = schema.data) == null ? void 0 : _schema$data2.properties[key],
+          setValue: value => {
             if (key === 'title') {
               setFormData(_extends({}, formData, {
-                uuid: stringToSlug(ev),
-                [key]: ev
+                uuid: stringToSlug(value),
+                [key]: value
               }));
             } else if (key === 'uuid') {
               setFormData(_extends({}, formData, {
-                uuid: stringToSlug(ev)
+                uuid: stringToSlug(value)
               }));
             } else {
               setFormData(_extends({}, formData, {
-                [key]: ev
+                [key]: value
               }));
             }
           },
@@ -12264,7 +12454,7 @@ class Auth {
 
     if (!authToken) return {};
 
-    if (this.willExpire(expires) && this.retryRefresh < this.maxRetry) {
+    if (this.willExpire(expires != null ? expires : '') && this.retryRefresh < this.maxRetry) {
 
       (async function () {
         return await _this.refreshToken();
@@ -12280,5 +12470,14 @@ class Auth {
 
 }
 
-export { AddItem, AddPermission, AllItemsCheckbox, ApplicationCtx, Auth, AuthContext, BaseForm, BehaviorNotImplemented, BehaviorsView, Button, Checkbox, ClientContext, ClientProvider, Config, Confirm, ContainerCtx, ContextToolbar, CreateButton, CreateContainer, DatabaseCtx, Delete, DownloadField, EditComponent, EditableField, EmailInput, FileUpload, Flash, FolderCtx, Form, FormBuilder, GroupCtx, GroupToolbar, GroupsCtx, Guillotina, GuillotinaClient, IAttachment, IImageAttachment, IMultiAttachment, IMultiImageAttachment, IMultiImageOrderedAttachment, IWorkflow, Icon, Input, InputList, Item, ItemCheckbox, ItemCtx, ItemModel, ItemTitle, ItemsActionsDropdown, ItemsActionsProvider, Layout, Link, Loading, Login, Modal, NotAllowed, Notification, Pagination, PanelActions, PanelAddons, PanelBehaviors, PanelItems, PanelNotImplemented, PanelPermissions, PanelProperties, PasswordInput, Path, PathTree, PermissionPrinperm, PermissionPrinrole, PermissionRoleperm, Permissions, PropertiesButtonView, PropertiesView, REGEX_EMAIL, REGEX_HEX_COLOR, REGEX_NUMBER, REGEX_URL, RItem, RemoveItems, RenderField, RenderFieldComponent, RequiredFieldsForm, RestClient, SearchInput, 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.modern.js.map