@guillotinaweb/react-gmi 0.29.1 → 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;
   }
 
@@ -92,15 +187,18 @@ 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,
@@ -117,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
@@ -133,7 +232,8 @@ class Traversal {
 
   cancelAction() {
     this.dispatch({
-      type: 'CLEAR_ACTION'
+      type: GuillotinaReducerActionTypes.CLEAR_ACTION,
+      payload: {}
     });
   }
 
@@ -169,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,
@@ -181,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({
@@ -682,8 +794,10 @@ function base64ToArrayBuffer(base64) {
   return bytes;
 }
 function stringToSlug(str) {
-  str = str.replace(/^\s+|\s+$/g, '');
-  str = str.toLowerCase();
+  str = str.replace(/^\s+|\s+$/g, ''); // trim
+
+  str = str.toLowerCase(); // remove accents, swap ñ for n, etc
+
   const from = 'àáäâèéëêìíïîòóöôùúüûñç·/_,:;';
   const to = 'aaaaeeeeiiiioooouuuunc------';
 
@@ -691,13 +805,16 @@ function stringToSlug(str) {
     str = str.replace(new RegExp(from.charAt(i), 'g'), to.charAt(i));
   }
 
-  str = str.replace(/[^a-z0-9 -]/g, '').replace(/\s+/g, '-').replace(/-+/g, '-');
+  str = str.replace(/[^a-z0-9 -]/g, '') // remove invalid chars
+  .replace(/\s+/g, '-') // collapse whitespace and replace by -
+  .replace(/-+/g, '-'); // collapse dashes
+
   return str;
 }
 function sleep(ms) {
   return new Promise(resolve => {
     setTimeout(function () {
-      resolve(null);
+      resolve();
     }, ms);
   });
 }
@@ -728,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",
@@ -743,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,
@@ -814,7 +966,8 @@ function Confirm({
       })]
     })]
   });
-}
+} // @todo Improve it... Replacing the inputText to a tree
+
 function PathTree({
   title,
   defaultPath,
@@ -831,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: {
@@ -863,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;
@@ -889,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,
@@ -898,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();
@@ -999,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)
   });
 }
 
@@ -1046,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,
@@ -1056,31 +1233,50 @@ 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,
   Permissions: Permissions,
   SearchEngine: 'PostreSQL',
+  // Elasticsearch
   fieldHaveDeleteButton: schema => {
     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();
@@ -1100,20 +1296,22 @@ 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();
         errors.push(err);
       }
-    });
+    }); // this sleep is here, to let elasticsearch, wait for
+    // index our operations... (will work 99% of use cases)
+
     actions.push(sleep(cfg.DelayActions));
     await Promise.all(actions);
 
@@ -1151,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;
@@ -1167,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
@@ -1211,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
@@ -1227,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
@@ -1257,6 +1455,9 @@ const useInput = (onChange, value, validator) => {
   };
 };
 
+// From github.com/protonmail/proton-shared
+
+/* eslint-disable no-useless-escape */
 const REGEX_EMAIL = /(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))/i;
 const REGEX_URL = /((([A-Za-z]{3,9}:(?:\/\/)?)(?:[\-;:&=\+\$,\w]+@)?[A-Za-z0-9\.\-]+|(?:www\.|[\-;:&=\+\$,\w]+@)[A-Za-z0-9\.\-]+)((?:\/[\+~%\/\.\w\-_]*)?\??(?:[\-\+=&;%@\.\w_]*)#?(?:[\.\!\/\\\w]*))?)/;
 const REGEX_HEX_COLOR = /^#([a-f0-9]{3,4}|[a-f0-9]{4}(?:[a-f0-9]{2}){1,2})\b$/i;
@@ -1294,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),
@@ -1307,16 +1508,17 @@ const Input = forwardRef(({
         handlers = _objectWithoutPropertiesLoose(_useInput, ["state"]);
 
   const [uid] = useState(generateUID('input'));
-  const [mounted, setMounted] = useState(false);
-  ref = ref || useRef();
+  const [mounted, setMounted] = useState(false); // eslint-disable-next-line
+
+  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' : '';
 
@@ -1355,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]),
@@ -1372,7 +1574,8 @@ const EmailInput = ({
   value: _value = '',
   dataTest,
   placeholder,
-  id
+  id,
+  onChange
 }) => {
   const intl = useIntl();
   return jsx(Input, {
@@ -1391,7 +1594,8 @@ const EmailInput = ({
       icon: "fas fa-envelope"
     }),
     id: id,
-    placeholder: placeholder
+    placeholder: placeholder,
+    onChange: onChange
   });
 };
 
@@ -1461,22 +1665,24 @@ function FormBuilder({
   remotes = {},
   submitButton = true
 }) {
-  const ref = useRef();
+  const ref = useRef(null);
   const {
     properties,
     required
   } = schema;
-  const values = Object.assign({}, formData || {});
+  const values = Object.assign({}, formData || {}); // build initial state
+
   const initialState = {};
   const fields = Object.keys(properties).filter(x => !exclude.includes(x));
   fields.forEach(element => {
     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 {
+    // apply remote changes
     Object.keys(remotes).forEach(key => {
       if (JSON.stringify(ref.current[key]) !== JSON.stringify(remotes[key])) {
         ref.current[key] = remotes[key];
@@ -1486,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),
@@ -1509,7 +1716,6 @@ function FormBuilder({
       props.placeholder += ' *';
     }
 
-    Tag.displayName = `${field}Field`;
     return jsx(Tag, _extends({}, props));
   };
 
@@ -1568,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);
+      }
     }
   };
 
@@ -1621,28 +1831,7 @@ const Select = forwardRef(({
 });
 Select.displayName = 'Select';
 
-const formatDate = str => {
-  const d = new Date(str);
-  const minutes = d.getMinutes() < 10 ? `0${d.getMinutes()}` : d.getMinutes();
-  return `${d.getDate()}/${d.getMonth() + 1}/${d.getFullYear()} ${d.getHours()}:${minutes}`;
-};
-const get$1 = (obj, path, defValue) => {
-  var _pathArray$reduce;
-
-  if (!path) return undefined;
-  const pathArray = Array.isArray(path) ? path : path.match(/([^[.\]])+/g);
-  return (_pathArray$reduce = pathArray.reduce((prevObj, key) => prevObj && prevObj[key], obj)) != null ? _pathArray$reduce : defValue;
-};
-function getNewId(id = '') {
-  const suffix = '-copy-';
-  const rgx = new RegExp(`($|${suffix}\\d*)`);
-  return stringToSlug(id).replace(rgx, r => {
-    const num = parseInt(r.replace(suffix, '') || '0');
-    return `${suffix}${num + 1}`;
-  });
-}
-
-function useVocabulary(vocabularyName, path = null) {
+function useVocabulary(vocabularyName, path) {
   const traversal = useTraversal();
   const [vocabulary, setVocabulary] = useSetState({
     data: undefined,
@@ -1697,8 +1886,10 @@ const SelectVocabulary = forwardRef(({
   const vocabulary = useVocabulary(vocabularyName);
 
   const getOptions = () => {
-    if (get$1(vocabulary, 'data.items', null)) {
-      const vocData = vocabulary.data.items.map(item => {
+    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
@@ -1744,6 +1935,8 @@ const SelectVocabulary = forwardRef(({
 });
 SelectVocabulary.displayName = 'SelectVocabulary';
 
+// https://github.com/molefrog/wouter
+
 const setURLParams = p => {
   return window.history.pushState(0, '0', '' + '?' + p.toString().replace(/%2F/g, '/'));
 };
@@ -1758,7 +1951,10 @@ const useLocation = () => {
   const [path, update] = useState(currentSearchParams());
   const prevPath = useRef(path);
   useEffect(() => {
-    patchHistoryEvents();
+    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();
@@ -1766,12 +1962,20 @@ const useLocation = () => {
     };
 
     const events = ['popstate', 'pushState', 'replaceState'];
-    events.map(e => window.addEventListener(e, checkForUpdates));
+    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
+
     checkForUpdates();
     return () => {
       events.map(e => window.removeEventListener(e, checkForUpdates));
     };
-  }, []);
+  }, []); // the 2nd argument of the `useLocation` return value is a function
+  // that allows to perform a navigation.
+  //
+  // the function reference should stay the same between re-renders, so that
+  // it can be passed down as an element prop without any performance concerns.
+
   const navigate = useCallback((to, replace) => {
     if (replace) {
       clean(to);
@@ -1788,22 +1992,38 @@ const useLocation = () => {
     setURLParams(current);
   }, [path]);
   return [path, navigate, remove];
-};
+}; // While History API does have `popstate` event, the only
+// proper way to listen to changes via `push/replaceState`
+// is to monkey-patch these methods.
+//
+// See https://stackoverflow.com/a/4585031
+
 let patched = 0;
 
 const patchHistoryEvents = () => {
   if (patched) return;
-  ['pushState', 'replaceState'].map(type => {
-    const original = window.history[type];
-
-    window.history[type] = function (...args) {
-      const result = original.apply(this, args);
-      const event = new Event(type);
-      event.arguments = args;
-      dispatchEvent(event);
-      return result;
-    };
-  });
+  const originalPushState = window.history.pushState;
+
+  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;
+  };
+
   return patched = 1;
 };
 
@@ -1851,7 +2071,7 @@ function TdLink({
   children,
   style = {}
 }) {
-  const link = useRef();
+  const link = useRef(null);
 
   function onClick() {
     if (link && link.current) {
@@ -1947,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, '');
     }
@@ -1960,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();
 
-  getHeaders() {
-    const authToken = this.auth.getToken();
-    if (!authToken) return {};
-    return {
-      Accept: 'application/json',
-      'Content-Type': 'application/json',
-      Authorization: 'Bearer ' + authToken
-    };
+    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();
+    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) {
@@ -1982,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) {
@@ -2002,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)
@@ -2119,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,
@@ -2202,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", {
@@ -2232,15 +2469,19 @@ class GuillotinaClient {
         children: m.updated
       })
     }];
-  }
+  } // BBB API changes. Compat G5 and G6
+
 
   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);
     }
@@ -2251,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);
   }
@@ -2320,7 +2561,8 @@ class GuillotinaClient {
 
   async getTypeSchema(path, name) {
     if (!cacheSchemas[name]) {
-      const url = this.getContainerFromPath(path);
+      const url = this.getContainerFromPath(path); // todo: handle db case (only addable containers)
+
       const res = await this.rest.get(`${url}@types/${name}`);
       cacheSchemas[name] = await res.json();
     }
@@ -2357,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
     };
   }
 
@@ -2370,6 +2638,7 @@ class GuillotinaClient {
   }
 
   async getAllPermissions(path) {
+    // paths used to query the API always has to start without a "/"
     if (path.startsWith('/')) {
       path = path.slice(1);
     }
@@ -2404,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');
+      }
     };
   });
 };
@@ -2441,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", {
@@ -2525,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);
@@ -2554,23 +2832,7 @@ function useClickAway(ref, onClickAway, events = defaultEvents) {
   }, [events, ref]);
 }
 
-function debounce(func, wait) {
-  let timeout;
-  return function () {
-    const context = this;
-    const args = arguments;
-
-    const later = function later() {
-      timeout = null;
-      func.apply(context, args);
-    };
-
-    clearTimeout(timeout);
-    timeout = setTimeout(later, wait);
-  };
-}
-
-const initialState = {
+const initialState$1 = {
   page: 0,
   items: undefined,
   loading: false,
@@ -2580,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,
@@ -2589,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);
@@ -2629,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) {
@@ -2649,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);
@@ -2661,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
     });
@@ -2673,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 = [];
 
@@ -2690,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 : [],
@@ -2709,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(() => {
@@ -2735,7 +2994,7 @@ const SearchInput = ({
         if (!ev.currentTarget.contains(ev.relatedTarget)) {
           if (searchTerm !== '') {
             setSearchTerm('');
-            setOptions(initialState);
+            setOptions(initialState$1);
           }
 
           setIsOpen(false);
@@ -2753,6 +3012,7 @@ const SearchInput = ({
             }
 
             setIsOpen(!isOpen);
+            console.log('on clic btn', options);
 
             if (!options.loading && !options.items) {
               handleSearch(options.page);
@@ -2761,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", {
@@ -2835,23 +3095,7 @@ const SearchInput = ({
   });
 };
 
-function debounce$1(func, wait) {
-  let timeout;
-  return function () {
-    const context = this;
-    const args = arguments;
-
-    const later = function later() {
-      timeout = null;
-      func.apply(context, args);
-    };
-
-    clearTimeout(timeout);
-    timeout = setTimeout(later, wait);
-  };
-}
-
-const initialState$1 = {
+const initialState$2 = {
   page: 0,
   items: undefined,
   loading: false,
@@ -2861,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,
@@ -2870,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('');
@@ -2903,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;
@@ -2920,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 = [];
 
@@ -2941,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 : [],
@@ -2958,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) {
@@ -2978,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);
@@ -2993,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(() => {
@@ -3015,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();
@@ -3032,7 +3272,7 @@ const SearchInputList = ({
         if (!ev.currentTarget.contains(ev.relatedTarget)) {
           if (searchTerm !== '') {
             setSearchTerm('');
-            setOptions(initialState$1);
+            setOptions(initialState$2);
           }
 
           setIsOpen(false);
@@ -3095,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]);
                 }
@@ -3260,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();
@@ -3318,6 +3558,8 @@ function EditableField({
   };
 
   const deleteField = async ev => {
+    var _schema$items;
+
     if (ev) ev.preventDefault();
 
     if ((schema == null ? void 0 : schema.widget) === 'file') {
@@ -3351,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([]);
     }
   };
@@ -3402,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",
@@ -3433,7 +3675,8 @@ const DownloadField = ({
     const blob = new Blob([text], {
       type: data.content_type
     });
-    const url = window.URL.createObjectURL(blob);
+    const url = window.URL.createObjectURL(blob); // Create blob link to download
+
     const link = document.createElement('a');
     link.href = url;
 
@@ -3448,6 +3691,7 @@ const DownloadField = ({
     setTimeout(function () {
       var _link$parentNode;
 
+      // For Firefox it is necessary to delay revoking the ObjectURL
       window.URL.revokeObjectURL(url);
       (_link$parentNode = link.parentNode) == null ? void 0 : _link$parentNode.removeChild(link);
     }, 100);
@@ -3509,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", {
@@ -3565,6 +3813,7 @@ const SearchRenderField = ({
   value,
   modifyContent
 }) => {
+  console.log('search render fields');
   const intl = useIntl();
   const [valuesLabels, setValuesLabels] = useState([]);
   const [isLoadingData, setIsLoadingData] = useState(false);
@@ -3582,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,
@@ -3593,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([]);
@@ -3645,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 = () => {
@@ -3656,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;
@@ -3664,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 : '';
       });
     }
 
@@ -3739,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') {
@@ -3754,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') {
@@ -3780,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",
@@ -3817,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 || '',
@@ -3837,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
       });
@@ -3849,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
@@ -3865,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,
@@ -3939,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)]
@@ -3974,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);
 
@@ -4030,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",
@@ -4108,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);
 
@@ -4138,7 +4403,7 @@ function IImageAttachment({
       }
     }
 
-    setFile(undefined);
+    setFile(null);
     setLoading(false);
     Ctx.flash(intl.formatMessage(genericFileMessages.image_uploaded), 'success');
     Ctx.refresh();
@@ -4237,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);
@@ -4257,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);
 
@@ -4334,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", {
@@ -4450,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);
@@ -4580,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", {
@@ -4630,138 +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() {
-    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.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",
@@ -4820,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`);
@@ -4851,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;
@@ -4882,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']
@@ -4905,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']);
       })]
     })]
@@ -4929,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}`);
       }
     })
   });
@@ -4964,7 +5106,8 @@ const messages$2 = defineMessages({
       "value": "Installed Addons"
     }]
   }
-});
+}); // TODO: Refactor without useAsync... just crudContext
+
 function PanelAddons() {
   var _state$data$available, _state$data, _state$data$available2, _state$data2, _state$data$installed, _state$data3, _state$data$installed2, _state$data4;
 
@@ -5077,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() {
@@ -5213,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
     }));
@@ -5243,13 +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,
@@ -5263,7 +5434,7 @@ function ItemCheckbox({
   const {
     selected,
     onSelectOneItem
-  } = useContext(ItemsActionsCtx);
+  } = useItemsActions();
   const absId = `${item.path}/${item.id}`;
   const value = selected[absId];
   return jsx(Checkbox, {
@@ -5272,6 +5443,10 @@ function ItemCheckbox({
     dataTest: dataTest
   });
 }
+/**
+ * Dropdown to choose some action to apply to the selected items.
+ */
+
 function ItemsActionsDropdown() {
   const intl = useIntl();
   const ACTIONS_OBJECT = getActionsObject(intl, true);
@@ -5279,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,
@@ -5305,75 +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'];
+  }
+
+  get type() {
+    return this.item['@type'] || this.item.type_name;
+  }
 
-  if (maxPages <= 1) {
-    return null;
+  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",
-        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",
-        onClick: () => doPaginate(current + 1),
-        children: jsx("span", {
-          className: "icon",
-          children: jsx("i", {
-            className: "fas fa-arrow-right"
-          })
-        })
-      })]
-    })]
-  });
 }
 
 function Item({
@@ -5494,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) {
@@ -5536,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;
@@ -5573,7 +5891,7 @@ function SearchVocabularyLabels({
   return null;
 }
 
-const initialState$2 = {
+const initialState$3 = {
   page: 0,
   items: [],
   loading: true,
@@ -5587,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,
@@ -5602,7 +5920,7 @@ function PanelItems() {
   let page;
 
   try {
-    page = parseInt(location.get('page')) || 0;
+    page = parseInt(location.get('page') || '0');
   } catch (_unused) {
     page = 0;
   }
@@ -5649,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) {
@@ -5661,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
@@ -5672,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
@@ -5699,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();
     };
@@ -5753,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 => {
@@ -5831,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", {
@@ -5840,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,
@@ -5883,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"
@@ -5892,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", {
@@ -5918,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'], {})
     });
   };
 
@@ -6005,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) {
@@ -6016,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
@@ -6081,7 +6403,7 @@ function PanelProperties() {
               }), jsx("td", {
                 children: jsx(EditableField, {
                   field: prop,
-                  value: Ctx.context[prop],
+                  value: get(Ctx.context, prop, ''),
                   modifyContent: false
                 })
               })]
@@ -6107,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", {
@@ -6118,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);
@@ -6155,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({
@@ -6204,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
         }),
@@ -6216,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"
@@ -6264,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({
@@ -6313,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
         }),
@@ -6326,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"
@@ -6373,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({
@@ -6434,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
@@ -6561,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", {
@@ -6698,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);
@@ -6756,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));
 };
 
@@ -6775,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);
 
@@ -6813,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,
@@ -6831,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(() => {
@@ -6872,7 +7191,8 @@ function CreateButton() {
 
   if (state.types && state.types.length === 0) {
     return null;
-  }
+  } // Implement some kind of filtering
+
 
   return jsx(Dropdown, {
     id: "dropdown-menu",
@@ -6895,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();
@@ -6915,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 => {
@@ -6954,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",
@@ -6979,7 +7299,7 @@ function ContextToolbar({
           text: item,
           value: item
         })),
-        onChange: onSearchByType
+        onChange: value => onSearchByType(value)
       })
     }), traversal.hasPerm('guillotina.AddContent') && jsx("div", {
       className: "level-item",
@@ -7017,18 +7337,17 @@ 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(() => {
     if (Object.keys(tabs).includes(currentTab)) {
-      setTab(currentTab);
+      setTab(currentTab); // setLocation({tab: currentTab})
     }
   }, [currentTab, tabs]);
 
@@ -7083,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 = {
@@ -7104,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({
@@ -7132,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",
@@ -7407,17 +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]);
@@ -7437,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",
@@ -7467,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();
@@ -7485,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(() => {
@@ -7565,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({
@@ -7575,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({
@@ -7585,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: () => {
@@ -7602,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,
@@ -7616,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",
@@ -7637,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
+          }))
         })]
       })]
     })]
@@ -7655,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)
       });
@@ -7691,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"]
@@ -7761,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();
@@ -8052,17 +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]);
@@ -8082,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",
@@ -8118,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');
@@ -8134,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);
@@ -8168,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,
@@ -8184,7 +8515,7 @@ function GroupCtx() {
       }]
     }, {
       role
-    }), errorMessage);
+    }), errorMessage != null ? errorMessage : '');
   };
 
   const removeRole = async role => {
@@ -8192,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,
@@ -8208,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: [{
@@ -8237,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: [{
@@ -8265,7 +8598,7 @@ function GroupCtx() {
       }]
     }, {
       user: userToRemove
-    }), errorMessage);
+    }), errorMessage != null ? errorMessage : '');
   };
 
   return jsxs("div", {
@@ -8315,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,
@@ -8346,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,
@@ -8477,7 +8810,7 @@ function Path() {
   const links = buildPaths(segments);
 
   if (segments.length === 1) {
-    return false;
+    return null;
   }
 
   return jsx("nav", {
@@ -8603,11 +8936,13 @@ const get$2 = (key, param, fallback = undefined) => {
 };
 
 const getComponent = (context, path, fallback = undefined) => {
-  if (!context) return;
+  if (!context) return; // console.log("Component for path", path)
+  // lookup by path
 
   if (registry.paths[path]) {
     return registry.paths[path];
-  }
+  } // by type
+
 
   if (registry.views[context['@type']]) {
     return registry.views[context['@type']];
@@ -8630,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;
 };
 
@@ -8650,11 +8989,14 @@ const getSchemas = type => {
   return registry.schemas[type] || {};
 };
 
-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;
 };
 
@@ -8662,11 +9004,15 @@ const defaultComponent = context => {
   return context.is_folderish ? FolderCtx : ItemCtx;
 };
 function useRegistry(data) {
+  // if data is provided we need to merge it into actual registry
   const ref = React.useRef();
 
   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 {
@@ -8680,86 +9026,26 @@ function useRegistry(data) {
     getItemsColumn,
     getFieldsToFilter,
     getDefaultSortValue,
-    getSchemas
+    getSchemas,
+    getView
   };
 }
+/*
 
-const initialState$4 = {
-  path: '',
-  loading: false,
-  context: undefined,
-  flash: {
-    message: undefined,
-    type: undefined
-  },
-  action: {
-    action: undefined,
-    params: undefined
+const registry = {
+  paths: {
+    "/db/guillotina/tags/": TagsContext
   },
-  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
-      });
+  forms: {
+    Tag: AddTagForm
+  }
+}
 
-    case 'CLEAR_ACTION':
-      return _extends({}, state, {
-        action: {
-          action: undefined,
-          params: undefined
-        }
-      });
 
-    case 'REFRESH':
-      return _extends({}, state, {
-        refresh: Date.now(),
-        loading: !action.payload.transparent
-      });
+<guillotina registry={registry} />
 
-    case 'APPLY':
-      return _extends({}, state, {
-        context: _extends({}, state.context, action.payload)
-      });
 
-    default:
-      return state;
-  }
-}
+*/
 
 var actions = [
 	{
@@ -11572,29 +11858,34 @@ function Guillotina(_ref) {
       props = _objectWithoutPropertiesLoose(_ref, ["auth", "locale"]);
 
   const messages = loadLocaleData(locale);
-  const url = props.url || 'http://localhost:8080';
+  const url = props.url || 'http://localhost:8080'; // without trailing slash
+
   const config = props.config || {};
   const client = useGuillotinaClient();
   const {
     Permissions
   } = useConfig(config);
-  const registry = useRegistry(props.registry || {});
-  const [location] = useLocation();
+  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(() => {
@@ -11603,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;
       }
@@ -11619,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
@@ -11629,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,
@@ -11656,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",
@@ -11665,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, {
@@ -11771,7 +12066,7 @@ const ERRORS = {
 const initialState$5 = {
   username: '',
   password: '',
-  loading: undefined,
+  loading: false,
   errors: undefined
 };
 const Login = ({
@@ -11784,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]);
@@ -11961,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
               }));
             }
           },
@@ -12108,6 +12403,7 @@ class Auth {
     });
 
     if (data.status === 401) {
+      // invalid token
       this.cleanAuth();
       this.logout();
       return;
@@ -12158,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();
@@ -12174,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