@guillotinaweb/react-gmi 0.20.1 → 0.22.2

package/dist/react-gmi.esm.js

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect, useCallback, createContext, forwardRef, createElement, Fragment, useContext, useReducer, Component } from 'react';
+import React, { createContext, useState, useCallback, useRef, useEffect, forwardRef, createElement, Fragment, useContext, useReducer } from 'react';
 import usePortal from 'react-useportal';
 import PropTypes from 'prop-types';
 import jwt_decode from 'jwt-decode';
@@ -100,124 +100,148 @@ function _createForOfIteratorHelperLoose(o, allowArrayLike) {
   return it.next.bind(it);
 }
 
-var RestClient = /*#__PURE__*/function () {
-  function RestClient(url, auth) {
-    this.auth = auth;
-    this.url = url;
+var AuthContext = createContext({});
+var ClientContext = createContext({});
+var TraversalContext = createContext({});
+
+var Traversal = /*#__PURE__*/function () {
+  function Traversal(_ref) {
+    var flash = _ref.flash,
+        props = _objectWithoutPropertiesLoose(_ref, ["flash"]);
+
+    Object.assign(this, props);
+    if (typeof flash === 'function') this.flash = flash;
   }
 
-  var _proto = RestClient.prototype;
+  var _proto = Traversal.prototype;
 
-  _proto.request = function request(path, data, headers) {
-    try {
-      var _this2 = this;
+  _proto.refresh = function refresh(_temp) {
+    var _ref2 = _temp === void 0 ? {} : _temp,
+        _ref2$transparent = _ref2.transparent,
+        transparent = _ref2$transparent === void 0 ? false : _ref2$transparent;
 
-      data = data || {};
-      data.headers = headers || _this2.getHeaders();
-      return Promise.resolve(fetch("" + _this2.url + path, data));
-    } catch (e) {
-      return Promise.reject(e);
-    }
+    this.dispatch({
+      type: 'REFRESH',
+      payload: {
+        transparent: transparent
+      }
+    });
   };
 
-  _proto.getHeaders = function getHeaders() {
-    var authToken = this.auth.getToken();
-    if (!authToken) return {};
-    return {
-      Accept: 'application/json',
-      'Content-Type': 'application/json',
-      Authorization: 'Bearer ' + authToken
-    };
+  _proto.apply = function apply(data) {
+    // apply a optimistic update to context
+    this.dispatch({
+      type: 'APPLY',
+      payload: data
+    });
   };
 
-  _proto.post = function post(path, data) {
-    try {
-      var _this4 = this;
-
-      return Promise.resolve(_this4.request(path, {
-        method: 'post',
-        body: JSON.stringify(data)
-      }));
-    } catch (e) {
-      return Promise.reject(e);
-    }
+  _proto.flash = function flash(message, type) {
+    this.dispatch({
+      type: 'SET_FLASH',
+      payload: {
+        flash: {
+          message: message,
+          type: type
+        }
+      }
+    });
+    window.scrollTo({
+      top: 0,
+      left: 0,
+      behavior: 'smooth'
+    });
   };
 
-  _proto.get = function get(path) {
-    try {
-      var _this6 = this;
-
-      return Promise.resolve(_this6.request(path, {}));
-    } catch (e) {
-      return Promise.reject(e);
-    }
+  _proto.clearFlash = function clearFlash() {
+    this.dispatch({
+      type: 'CLEAR_FLASH'
+    });
   };
 
-  _proto.put = function put(path, data) {
-    try {
-      var _this8 = this;
-
-      return Promise.resolve(_this8.request(path, {
-        method: 'put',
-        body: JSON.stringify(data)
-      }));
-    } catch (e) {
-      return Promise.reject(e);
-    }
+  _proto.doAction = function doAction(action, params) {
+    this.dispatch({
+      type: 'SET_ACTION',
+      payload: {
+        action: action,
+        params: params
+      }
+    });
   };
 
-  _proto.patch = function patch(path, data) {
-    try {
-      var _this10 = this;
+  _proto.cancelAction = function cancelAction() {
+    this.dispatch({
+      type: 'CLEAR_ACTION'
+    });
+  };
 
-      return Promise.resolve(_this10.request(path, {
-        method: 'PATCH',
-        body: JSON.stringify(data)
-      }));
-    } catch (e) {
-      return Promise.reject(e);
-    }
+  _proto.hasPerm = function hasPerm(permission) {
+    return this.state.permissions[permission] === true;
   };
 
-  _proto.upload = function upload(path, data) {
-    try {
-      var _this12 = this;
+  _proto.filterTabs = function filterTabs(tabs, tabsPermissions) {
+    var _this = this;
 
-      var headers = _this12.getHeaders();
+    var result = {};
+    Object.keys(tabs).forEach(function (item) {
+      var perm = tabsPermissions[item];
 
-      delete headers['Content-Type'];
-      headers['Content-Type'] = data['content-type'];
-      headers['X-UPLOAD-FILENAME'] = data.filename;
-      headers['Content-Encoding'] = 'base64';
-      return Promise.resolve(_this12.request(path, {
-        method: 'PATCH',
-        body: data.data
-      }, headers));
-    } catch (e) {
-      return Promise.reject(e);
-    }
+      if (perm && _this.hasPerm(perm)) {
+        result[item] = tabs[item];
+      } else if (!perm) {
+        result[item] = tabs[item];
+      }
+    });
+    return result;
   };
 
-  _proto.delete = function _delete(path, data) {
-    if (data === void 0) {
-      data = undefined;
+  _createClass(Traversal, [{
+    key: "path",
+    get: function get() {
+      return this.state.path;
     }
-
-    try {
-      var _this14 = this;
-
-      return Promise.resolve(_this14.request(path, {
-        method: 'delete',
-        body: JSON.stringify(data)
-      }));
-    } catch (e) {
-      return Promise.reject(e);
+  }, {
+    key: "pathPrefix",
+    get: function get() {
+      return this.state.path.slice(1);
     }
-  };
+  }, {
+    key: "context",
+    get: function get() {
+      return this.state.context;
+    }
+  }, {
+    key: "containerPath",
+    get: function get() {
+      return this.client.getContainerFromPath(this.path);
+    }
+  }]);
 
-  return RestClient;
+  return Traversal;
 }();
 
+function TraversalProvider(_ref3) {
+  var children = _ref3.children,
+      props = _objectWithoutPropertiesLoose(_ref3, ["children"]);
+
+  return /*#__PURE__*/React.createElement(TraversalContext.Provider, {
+    value: new Traversal(props)
+  }, children);
+}
+function useTraversal() {
+  return React.useContext(TraversalContext);
+}
+function ClientProvider(_ref4) {
+  var children = _ref4.children,
+      client = _ref4.client;
+  return /*#__PURE__*/React.createElement(ClientContext.Provider, {
+    value: client
+  }, children);
+}
+function useGuillotinaClient() {
+  return React.useContext(ClientContext);
+}
+
 var classnames = function classnames(classNames) {
   return classNames.filter(Boolean).join(' ').trim();
 };
@@ -269,2067 +293,2071 @@ function sleep(ms) {
   });
 }
 
-var Icon = function Icon(_ref) {
-  var icon = _ref.icon,
-      className = _ref.className,
-      align = _ref.align;
-  var addClass = className ? className.split(' ') : [className];
-  align = align || 'is-right';
-  return /*#__PURE__*/React.createElement("span", {
-    className: classnames(['icon', align].concat(addClass))
-  }, /*#__PURE__*/React.createElement("i", {
-    className: icon
-  }));
-};
+var noop$1 = function noop() {};
 
-var Loading = function Loading(_ref) {
-  var rest = _extends({}, _ref);
+var Button = function Button(_ref) {
+  var _ref2;
 
-  return /*#__PURE__*/React.createElement("div", _extends({
-    className: "progress-line"
-  }, rest));
-};
+  var children = _ref.children,
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? 'is-primary' : _ref$className,
+      onClick = _ref.onClick,
+      _ref$type = _ref.type,
+      type = _ref$type === void 0 ? 'submit' : _ref$type,
+      _ref$loading = _ref.loading,
+      loading = _ref$loading === void 0 ? false : _ref$loading,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      dataTest = _ref.dataTest,
+      rest = _objectWithoutPropertiesLoose(_ref, ["children", "className", "onClick", "type", "loading", "disabled", "dataTest"]);
 
-var Tag = function Tag(_ref) {
-  var name = _ref.name,
-      onRemove = _ref.onRemove,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 'is-medium' : _ref$size,
-      _ref$color = _ref.color,
-      color = _ref$color === void 0 ? 'is-warning' : _ref$color;
-  return /*#__PURE__*/React.createElement("span", {
-    className: classnames(['tag', color, size])
-  }, name, onRemove !== undefined && /*#__PURE__*/React.createElement("button", {
-    className: "delete is-small",
-    onClick: function onClick() {
-      return onRemove();
-    }
-  }));
-};
+  var css = (_ref2 = []).concat.apply(_ref2, ['button'].concat(className.split(' ')));
 
-function Delete(_ref) {
-  var onClick = _ref.onClick,
-      className = _ref.className,
-      children = _ref.children;
-  return /*#__PURE__*/React.createElement("button", {
-    type: "button",
+  if (loading) css = css.concat('is-loading');
+  if (disabled) onClick = noop$1;
+  return /*#__PURE__*/React.createElement("p", {
+    className: "control"
+  }, /*#__PURE__*/React.createElement("button", _extends({
+    type: type,
+    className: classnames(css),
     onClick: onClick,
-    className: "delete " + className,
-    "data-test": "btnDeleteTest"
-  }, children);
-}
-
-function Table(_ref) {
-  var headers = _ref.headers,
-      children = _ref.children,
-      className = _ref.className;
-  className = className ? className.split(' ') : ' is-full is-fullwidth is-narrow'.split(' ');
-  return /*#__PURE__*/React.createElement("table", {
-    className: classnames(['table'].concat(className))
-  }, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, headers && headers.map(function (item, idx) {
-    return /*#__PURE__*/React.createElement("th", {
-      key: item + idx
-    }, item);
-  }))), /*#__PURE__*/React.createElement("tbody", null, children));
-}
-
-function Notification(_ref) {
-  var _ref$isColor = _ref.isColor,
-      isColor = _ref$isColor === void 0 ? '' : _ref$isColor,
-      children = _ref.children;
-  return /*#__PURE__*/React.createElement("div", {
-    className: 'notification is-' + isColor,
-    "data-test": "notificationTest"
-  }, children);
-}
-
-// https://github.com/molefrog/wouter
-
-var setURLParams = function setURLParams(p) {
-  return window.history['pushState'](0, 0, (window.history.pathname || '') + '?' + p.toString().replace(/%2F/g, '/'));
-};
-
-var clean = function clean(to) {
-  var current = new URLSearchParams();
-  Object.keys(to).forEach(function (_key) {
-    return current.set(_key, to[_key]);
-  });
-  setURLParams(current);
+    disabled: disabled
+  }, rest, {
+    "data-test": dataTest
+  }), children));
 };
 
-var useLocation = function useLocation() {
-  var _useState = useState(currentSearchParams()),
-      path = _useState[0],
-      update = _useState[1];
+function Modal(props) {
+  var isActive = props.isActive,
+      setActive = props.setActive,
+      children = props.children;
 
-  var prevPath = useRef(path);
-  useEffect(function () {
-    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.
+  var _usePortal = usePortal(),
+      Portal = _usePortal.Portal;
 
-    var checkForUpdates = function checkForUpdates() {
-      var pathname = currentSearchParams();
-      prevPath.current !== pathname && update(prevPath.current = pathname);
-    };
+  var css = 'modal ' + (isActive ? 'is-active ' : '') + props.className;
+  return /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement("div", {
+    className: css
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "modal-background",
+    onClick: function onClick() {
+      return setActive(false);
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "modal-content"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "box"
+  }, children)), /*#__PURE__*/React.createElement("button", {
+    className: "modal-close is-large",
+    "aria-label": "close",
+    onClick: function onClick() {
+      return setActive(false);
+    }
+  })));
+}
+function Confirm(_ref) {
+  var message = _ref.message,
+      onCancel = _ref.onCancel,
+      onConfirm = _ref.onConfirm,
+      loading = _ref.loading;
 
-    var events = ['popstate', 'pushState', 'replaceState'];
-    events.map(function (e) {
-      return 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
+  var setActive = function setActive() {
+    return onCancel();
+  };
 
-    checkForUpdates();
-    return function () {
-      return events.map(function (e) {
-        return 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.
+  return /*#__PURE__*/React.createElement(Modal, {
+    isActive: true,
+    setActive: setActive,
+    className: "confirm"
+  }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", {
+    className: "title is-size-5"
+  }, message || 'Are you Sure?'), /*#__PURE__*/React.createElement("div", {
+    className: "level",
+    style: {
+      marginTop: 50
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "level-left"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "level-right"
+  }, /*#__PURE__*/React.createElement("button", {
+    className: "button is-danger",
+    onClick: function onClick() {
+      return onCancel();
+    },
+    "data-test": "btnCancelModalTest"
+  }, "Cancel"), "\xA0\xA0", /*#__PURE__*/React.createElement(Button, {
+    loading: loading,
+    className: "is-success",
+    onClick: function onClick() {
+      return onConfirm();
+    },
+    dataTest: "btnConfirmModalTest"
+  }, "Confirm")))));
+} // @todo Improve it... Replacing the inputText to a tree
 
-  var navigate = useCallback(function (to, replace) {
-    if (replace) {
-      clean(to);
-      return;
+function PathTree(_ref2) {
+  var title = _ref2.title,
+      defaultPath = _ref2.defaultPath,
+      children = _ref2.children,
+      onConfirm = _ref2.onConfirm,
+      onCancel = _ref2.onCancel;
+  return /*#__PURE__*/React.createElement(Modal, {
+    isActive: true,
+    setActive: onCancel
+  }, /*#__PURE__*/React.createElement("h1", null, title), /*#__PURE__*/React.createElement("form", {
+    onSubmit: function onSubmit(e) {
+      e.preventDefault();
+      onConfirm(e.target[0].value, e.target);
+    }
+  }, /*#__PURE__*/React.createElement("small", {
+    style: {
+      display: 'block',
+      marginTop: 20
     }
+  }, "Example: /folder (without /db/container on front)"), /*#__PURE__*/React.createElement("input", {
+    className: "input mb-3",
+    defaultValue: defaultPath,
+    type: "text",
+    "data-test": "inputPathTreeTest"
+  }), children, /*#__PURE__*/React.createElement("div", {
+    className: "level-right mt-3"
+  }, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: "button is-danger",
+    onClick: onCancel,
+    "data-test": "btnCancelModalTest"
+  }, "Cancel"), "\xA0\xA0", /*#__PURE__*/React.createElement("button", {
+    type: "submit",
+    className: "button is-success",
+    "data-test": "btnConfirmModalTest"
+  }, "Confirm"))));
+}
 
-    var current = new URLSearchParams(path.toString());
-    Object.keys(to).forEach(function (_key) {
-      return current.set(_key, to[_key]);
+function useSetState(initialState) {
+  var _useState = useState(initialState),
+      state = _useState[0],
+      set = _useState[1];
+
+  var setState = useCallback(function (patch) {
+    set(function (prevState) {
+      return Object.assign({}, prevState, patch instanceof Function ? patch(prevState) : patch);
     });
-    setURLParams(current);
-  }, [path]);
-  var remove = useCallback(function (param) {
-    var current = new URLSearchParams(path.toString());
-    current.delete(param);
-    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
+  }, [set]);
+  return [state, setState];
+}
 
-var patched = 0;
+function _catch(body, recover) {
+  try {
+    var result = body();
+  } catch (e) {
+    return recover(e);
+  }
 
-var patchHistoryEvents = function patchHistoryEvents() {
-  if (patched) return;
-  ['pushState', 'replaceState'].map(function (type) {
-    var original = window.history[type];
+  if (result && result.then) {
+    return result.then(void 0, recover);
+  }
 
-    window.history[type] = function () {
-      var result = original.apply(this, arguments);
-      var event = new Event(type);
-      event.arguments = arguments;
-      dispatchEvent(event);
-      return result;
-    };
-  });
-  return patched = 1;
+  return result;
+}
+
+var initial = {
+  loading: undefined,
+  isError: false,
+  errorMessage: undefined,
+  result: undefined,
+  response: undefined
 };
 
-var currentSearchParams = function currentSearchParams(path) {
-  if (path === void 0) {
-    path = window.location.search;
+var getErrorMessage = function getErrorMessage(dataError, defaultValue) {
+  if (dataError && dataError.details) {
+    return dataError.details;
+  } else if (dataError && dataError.reason) {
+    return dataError.reason;
   }
 
-  return new URLSearchParams(path);
+  return defaultValue;
 };
 
-function Link(_ref) {
-  var aRef = _ref.aRef,
-      model = _ref.model,
-      children = _ref.children,
-      props = _objectWithoutPropertiesLoose(_ref, ["aRef", "model", "children"]);
-
-  var _useLocation = useLocation(),
-      path = _useLocation[0],
-      navigate = _useLocation[1];
-
-  var aStyle = {
-    textDecoration: 'none',
-    color: 'currentColor'
-  };
-
-  function onClick(e) {
-    e.stopPropagation();
-    if (actAsLink(e)) return;
-    e.preventDefault();
-    navigate({
-      path: model.path
-    }, true);
-    if (props.onClick) props.onClick(e);
+var processResponse = function processResponse(res, ready_body) {
+  if (ready_body === void 0) {
+    ready_body = true;
   }
 
-  return /*#__PURE__*/React.createElement("a", _extends({}, props, {
-    ref: aRef,
-    href: "?" + path + model.id + "/",
-    style: aStyle,
-    onClick: onClick
-  }), children);
-}
-
-function actAsLink(e) {
-  return e.ctrlKey || e.metaKey || e.altKey || e.shiftKey || e.button !== 0;
-}
-
-function TdLink(_ref) {
-  var model = _ref.model,
-      children = _ref.children,
-      props = _objectWithoutPropertiesLoose(_ref, ["model", "children"]);
-
-  var link = useRef();
+  try {
+    var _temp2 = function _temp2(_res$json) {
+      return {
+        isError: false,
+        loading: false,
+        result: _res$json,
+        response: res
+      };
+    };
 
-  function onClick() {
-    link.current.click();
+    if (res.status < 400) return Promise.resolve(ready_body ? Promise.resolve(res.json()).then(_temp2) : _temp2(res.status));else return Promise.resolve(res.json()).then(function (_res$json2) {
+      return {
+        isError: true,
+        loading: false,
+        errorMessage: getErrorMessage(_res$json2, res.status),
+        response: res
+      };
+    });
+  } catch (e) {
+    return Promise.reject(e);
   }
+};
 
-  return /*#__PURE__*/React.createElement("td", _extends({}, props, {
-    onClick: onClick
-  }), /*#__PURE__*/React.createElement(Link, {
-    model: model,
-    aRef: link
-  }, children));
-}
+var patch = function patch(setState, Ctx) {
+  return function (data, endpoint, body) {
+    if (body === void 0) {
+      body = false;
+    }
 
-var SEP = '=';
-var DEFAULT_FIELD = 'title__in';
-var CLEANER = '||';
-function parser(qs, defaultField) {
-  if (defaultField === void 0) {
-    defaultField = DEFAULT_FIELD;
-  }
+    try {
+      var _temp5 = function _temp5() {
+        setState(newState);
+        return newState;
+      };
 
-  var lastKey = undefined;
-  qs.trim();
+      setState({
+        loading: true
+      });
+      var newState = {};
 
-  if (qs.includes('"')) {
-    qs = qs.replace(/"(\w+) (\w+)"/, "$1" + CLEANER + "$2");
-  }
+      var _temp6 = _catch(function () {
+        var path = endpoint ? "" + Ctx.path + endpoint : Ctx.path;
+        return Promise.resolve(Ctx.client.patch(path, data)).then(function (res) {
+          return Promise.resolve(processResponse(res, body)).then(function (_processResponse) {
+            newState = _processResponse;
+          });
+        });
+      }, function (e) {
+        console.error('Error', e);
+        newState = {
+          isError: true,
+          errorMessage: 'unhandled exception'
+        };
+      });
 
-  qs = qs.split(' ');
-  return qs.map(function (part) {
-    if (part.includes(CLEANER)) {
-      part = part.replace('||', ' ');
+      return Promise.resolve(_temp6 && _temp6.then ? _temp6.then(_temp5) : _temp5(_temp6));
+    } catch (e) {
+      return Promise.reject(e);
     }
+  };
+};
 
-    if (!part.includes(SEP)) {
-      return !lastKey ? [defaultField, part] : [lastKey, part];
+var del = function del(setState, Ctx) {
+  return function (data, endpoint, body) {
+    if (body === void 0) {
+      body = false;
     }
 
-    var _part$split = part.split(SEP),
-        key = _part$split[0],
-        val = _part$split[1];
+    try {
+      var _temp9 = function _temp9() {
+        setState(newState);
+        return newState;
+      };
 
-    lastKey = key;
-    return [key, val];
-  });
-}
-function buildQs(parsedQuery) {
-  return parsedQuery.map(function (_ref) {
-    var key = _ref[0],
-        val = _ref[1];
-    return encodeURIComponent(key) + "=" + encodeURIComponent(val);
-  }).join('&');
-}
+      setState({
+        loading: true
+      });
+      var newState = {};
 
-var cacheTypes = {};
-var cacheSchemas = {};
-var GuillotinaClient = /*#__PURE__*/function () {
-  function GuillotinaClient(rest, isContainer) {
-    this.rest = rest;
-    this.isContainer = isContainer;
-  }
+      var _temp10 = _catch(function () {
+        var path = endpoint ? "" + Ctx.path + endpoint : Ctx.path;
+        return Promise.resolve(Ctx.client.delete(path, data)).then(function (res) {
+          return Promise.resolve(processResponse(res, body)).then(function (_processResponse2) {
+            newState = _processResponse2;
+          });
+        });
+      }, function (e) {
+        console.error('Error', e);
+        newState = {
+          isError: true,
+          errorMessage: 'unhandled exception'
+        };
+      });
 
-  var _proto = GuillotinaClient.prototype;
+      return Promise.resolve(_temp10 && _temp10.then ? _temp10.then(_temp9) : _temp9(_temp10));
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+};
+
+var post = function post(setState, Ctx) {
+  return function (data, endpoint, body) {
+    if (body === void 0) {
+      body = true;
+    }
 
-  _proto.getContext = function getContext(path) {
     try {
-      var _this2 = this;
+      var _temp13 = function _temp13() {
+        setState(newState);
+        return newState;
+      };
 
-      switch (path) {
-        case '/':
-          return Promise.resolve(_this2.rest.get(''));
+      setState({
+        loading: true
+      });
+      var newState = {};
 
-        default:
-          if (path.startsWith('/')) {
-            path = path.substring(1);
-          }
+      var _temp14 = _catch(function () {
+        var path = endpoint ? "" + Ctx.path + endpoint : Ctx.path;
+        return Promise.resolve(Ctx.client.post(path, data)).then(function (res) {
+          return Promise.resolve(processResponse(res, body)).then(function (_processResponse3) {
+            newState = _processResponse3;
+          });
+        });
+      }, function (e) {
+        console.error('Error', e);
+        newState = {
+          isError: true,
+          errorMessage: 'unhandled exception'
+        };
+      });
 
-          return Promise.resolve(_this2.rest.get(path));
-      }
+      return Promise.resolve(_temp14 && _temp14.then ? _temp14.then(_temp13) : _temp13(_temp14));
     } catch (e) {
       return Promise.reject(e);
     }
   };
+};
 
-  _proto.get = function get(path) {
+var get = function get(setState, Ctx) {
+  return function (endpoint) {
     try {
-      var _this4 = this;
-
-      if (path.startsWith('/')) {
-        path = path.slice(1);
-      }
-
-      return Promise.resolve(_this4.rest.get(path));
+      setState({
+        loading: true
+      });
+      var path = endpoint ? "" + Ctx.path + endpoint : Ctx.path;
+      return Promise.resolve(Ctx.client.get(path)).then(function (req) {
+        return Promise.resolve(req.json()).then(function (data) {
+          setState({
+            loading: false,
+            result: data,
+            response: req
+          });
+          return data;
+        });
+      });
     } catch (e) {
       return Promise.reject(e);
     }
   };
+};
 
-  _proto.getQueryParamsPostresql = function getQueryParamsPostresql(_ref) {
-    var _ref$start = _ref.start,
-        start = _ref$start === void 0 ? 0 : _ref$start,
-        _ref$pageSize = _ref.pageSize,
-        pageSize = _ref$pageSize === void 0 ? 10 : _ref$pageSize,
-        _ref$withDepth = _ref.withDepth,
-        withDepth = _ref$withDepth === void 0 ? true : _ref$withDepth;
-    var result = [];
-    result = [].concat(parser(start.toString(), 'b_start'), parser(pageSize.toString(), 'b_size'));
-
-    if (withDepth) {
-      var _parser;
+function useCrudContext() {
+  var Ctx = useTraversal();
 
-      result = [].concat(result, (_parser = parser('1', 'depth')) != null ? _parser : []);
-    }
+  var _useSetState = useSetState(initial),
+      state = _useSetState[0],
+      setState = _useSetState[1];
 
-    return result;
-  };
-
-  _proto.getQueryParamsElasticsearch = function getQueryParamsElasticsearch(_ref2) {
-    var _ref2$start = _ref2.start,
-        start = _ref2$start === void 0 ? 0 : _ref2$start,
-        _ref2$pageSize = _ref2.pageSize,
-        pageSize = _ref2$pageSize === void 0 ? 10 : _ref2$pageSize,
-        path = _ref2.path,
-        _ref2$withDepth = _ref2.withDepth,
-        withDepth = _ref2$withDepth === void 0 ? true : _ref2$withDepth;
-    var result = [];
-    var containerPath = getContainerFromPath(path);
+  return _extends({}, state, {
+    Ctx: Ctx,
+    patch: patch(setState, Ctx),
+    del: del(setState, Ctx),
+    post: post(setState, Ctx),
+    get: get(setState, Ctx)
+  });
+}
 
-    if (containerPath.startsWith('/')) {
-      containerPath = containerPath.slice(1);
-    }
+function AddItem(props) {
+  var doSubmit = function doSubmit(data) {
+    try {
+      var form = Object.assign({}, {
+        '@type': type
+      }, data.formData ? data.formData : data);
+      return Promise.resolve(post(form)).then(function (_ref) {
+        var isError = _ref.isError,
+            errorMessage = _ref.errorMessage;
 
-    var objectPath = path.replace(containerPath, '');
+        if (!isError) {
+          Ctx.flash('Content created!', 'success');
+        } else {
+          Ctx.flash("An error has ocurred: " + errorMessage, 'danger');
+        }
 
-    if (objectPath.endsWith('/')) {
-      objectPath = objectPath.slice(0, -1);
+        Ctx.cancelAction();
+        Ctx.refresh();
+      });
+    } catch (e) {
+      return Promise.reject(e);
     }
+  };
 
-    result = [].concat(parser(start.toString(), '_from'), parser(pageSize.toString(), 'size'));
-
-    if (withDepth) {
-      var _parser2;
+  var Ctx = useTraversal();
 
-      result = [].concat(result, (_parser2 = parser('1', 'depth')) != null ? _parser2 : []);
-    }
+  var _useCrudContext = useCrudContext(),
+      post = _useCrudContext.post,
+      loading = _useCrudContext.loading;
 
-    if (objectPath !== '') {
-      result = [].concat(result, parser(objectPath, 'path__wildcard'));
-    }
+  var type = props.type;
+  var getForm = Ctx.registry.getForm;
+  var Form = getForm(type);
 
-    return result;
+  var setActive = function setActive() {
+    Ctx.cancelAction();
   };
 
-  _proto.getItemsColumn = function getItemsColumn() {
-    var smallcss = {
-      width: 25
-    };
-    var mediumcss = {
-      width: 120
-    };
-    return [{
-      label: '',
-      child: function child(m) {
-        return /*#__PURE__*/React.createElement("td", {
-          style: smallcss
-        }, /*#__PURE__*/React.createElement(Icon, {
-          icon: m.icon
-        }));
-      }
-    }, {
-      label: 'type',
-      child: function child(m) {
-        return /*#__PURE__*/React.createElement(TdLink, {
-          style: smallcss,
-          model: m
-        }, /*#__PURE__*/React.createElement("span", {
-          className: "tag"
-        }, m.type));
-      }
-    }, {
-      label: 'id/name',
-      child: function child(m, navigate, search) {
-        return /*#__PURE__*/React.createElement(TdLink, {
-          model: m
-        }, m.name, search && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("span", {
-          className: "is-size-7 tag is-light"
-        }, m.path)));
-      }
-    }, {
-      label: 'created',
-      child: function child(m) {
-        return /*#__PURE__*/React.createElement("td", {
-          style: mediumcss,
-          className: "is-size-7 is-vcentered"
-        }, m.created);
-      }
-    }, {
-      label: 'modified',
-      child: function child(m) {
-        return /*#__PURE__*/React.createElement("td", {
-          style: mediumcss,
-          className: "is-size-7 is-vcentered"
-        }, m.updated);
-      }
-    }];
-  } // BBB API changes. Compat G5 and G6
-  ;
+  return /*#__PURE__*/React.createElement(Modal, {
+    isActive: true,
+    setActive: setActive
+  }, /*#__PURE__*/React.createElement(Form, {
+    loading: loading,
+    onSubmit: doSubmit,
+    onError: function onError(err) {
+      return console.log(err);
+    },
+    actionName: 'Add ' + type,
+    title: 'Add ' + type,
+    type: type,
+    dataTest: "formAdd" + type + "Test"
+  }));
+}
 
-  _proto.applyCompat = function applyCompat(data) {
-    data.member = data.items;
-    data.items_count = data.items_total;
-    return data;
-  };
+var Permissions = ['guillotina.AddContent', 'guillotina.ModifyContent', 'guillotina.ViewContent', 'guillotina.DeleteContent', 'guillotina.AccessContent', 'guillotina.SeePermissions', 'guillotina.ChangePermissions', 'guillotina.MoveContent', 'guillotina.DuplicateContent', 'guillotina.ReadConfiguration', 'guillotina.RegisterConfigurations', 'guillotina.WriteConfiguration', 'guillotina.ManageAddons', 'guillotina.swagger.View'];
+var Config = {
+  DisabledTypes: ['UserManager', 'GroupManager'],
+  PageSize: 10,
+  DelayActions: 200,
+  Permissions: Permissions,
+  SearchEngine: 'PostreSQL',
+  // Elasticsearch
+  fieldHaveDeleteButton: function fieldHaveDeleteButton(schema) {
+    return (schema == null ? void 0 : schema.widget) === 'file' || (schema == null ? void 0 : schema.widget) === 'select' || (schema == null ? void 0 : schema.type) === 'array';
+  }
+};
+var calculated = Object.assign({}, Config);
 
-  _proto.search = function search(path, params, container, prepare) {
-    if (container === void 0) {
-      container = false;
+var addConfig = function addConfig(additional, original) {
+  var rest = Object.assign({}, original);
+  Object.keys(additional).forEach(function (item) {
+    if (typeof Config[item] === 'object' && Array.isArray(Config[item])) {
+      rest[item] = [].concat(Config[item], additional[item]);
+    } else if (typeof Config[item] === 'object') {
+      rest[item] = Object.assign({}, Config[item], additional[item]);
+    } else {
+      rest[item] = additional[item];
     }
+  });
+  return rest;
+};
 
-    if (prepare === void 0) {
-      prepare = true;
-    }
+function useConfig(cfg) {
+  var ref = React.useRef();
 
-    try {
-      var _this6 = this;
+  if (cfg && !ref.current) {
+    console.log('cfg', cfg);
+    calculated = addConfig(cfg, calculated);
+    ref.current = calculated;
+  } // if (cfg && !ref.current) {
+  //   ref.current = addConfig(cfg, ref.current);
+  //   calculated = ref.current
+  //   console.log("Current config", cfg)
+  // }
 
-      if (path.startsWith('/')) {
-        path = path.slice(1);
-      }
 
-      if (container) {
-        path = getContainerFromPath(path);
-      }
+  return calculated;
+}
 
-      var query = prepare ? toQueryString(params) : params;
-      var url = path + "@search?" + query;
-      return Promise.resolve(_this6.rest.get(url)).then(function (res) {
-        return Promise.resolve(res.json()).then(function (data) {
-          return _this6.applyCompat(data);
-        });
-      });
-    } catch (e) {
-      return Promise.reject(e);
-    }
-  };
+var getId = function getId(item) {
+  if (item['@id']) {
+    return item['@id'];
+  }
 
-  _proto.canido = function canido(path, permissions) {
+  return item['@absolute_url'];
+};
+
+function RemoveItems(props) {
+  var removeItems = function removeItems() {
     try {
-      var _this8 = this;
+      var errors = [];
+      setLoading(true);
+      var actions = items.map(function (item) {
+        try {
+          console.log(item);
+          return Promise.resolve(Ctx.client.delete(getId(item))).then(function (res) {
+            var _temp = function () {
+              if (!res.ok) {
+                return Promise.resolve(res.json()).then(function (err) {
+                  errors.push(err);
+                });
+              }
+            }();
 
-      if (path.startsWith('/')) {
-        path = path.slice(1);
-      }
+            if (_temp && _temp.then) return _temp.then(function () {});
+          });
+        } catch (e) {
+          return Promise.reject(e);
+        }
+      }); // this sleep is here, to let elasticsearch, wait for
+      // index our operations... (will work 99% of use cases)
 
-      if (Array.isArray(permissions)) {
-        permissions.join(',');
-      }
+      actions.push(sleep(cfg.DelayActions));
+      return Promise.resolve(Promise.all(actions)).then(function () {
+        if (errors.length === 0) {
+          Ctx.flash("Items removed!", 'success');
+          Ctx.refresh();
+        } else {
+          var errorstr = errors.map(function (err) {
+            return JSON.stringify(err);
+          }).join('\n');
+          Ctx.flash("Something went wrong!! " + errorstr, 'danger');
+        }
 
-      var url = path + "@canido?permissions=" + permissions;
-      return Promise.resolve(_this8.rest.get(url));
+        setLoading(false);
+        Ctx.cancelAction();
+      });
     } catch (e) {
       return Promise.reject(e);
     }
   };
 
-  _proto.createObject = function createObject(path, data) {
-    try {
-      var _this10 = this;
-
-      return Promise.resolve(_this10.rest.post(path, data));
-    } catch (e) {
-      return Promise.reject(e);
-    }
-  };
+  var Ctx = useTraversal();
+  var cfg = useConfig();
 
-  _proto.cleanPath = function cleanPath(path) {
-    var url = path.split('/').slice(3);
-    return "" + url.join('/');
-  };
+  var _React$useState = React.useState(false),
+      loading = _React$useState[0],
+      setLoading = _React$useState[1];
 
-  _proto.delete = function _delete(path, data) {
-    try {
-      var _this12 = this;
+  var _props$items = props.items,
+      items = _props$items === void 0 ? [] : _props$items;
+  var last = items[items.length - 1]['@name'];
+  var itemsNames = items.map(function (item) {
+    return item['@name'];
+  }).join(', ').replace(", " + last, " and " + last);
+  return /*#__PURE__*/React.createElement(Confirm, {
+    loading: loading,
+    onCancel: function onCancel() {
+      return Ctx.cancelAction();
+    },
+    onConfirm: removeItems,
+    message: "Are you sure to remove: " + itemsNames + "?"
+  });
+}
 
-      console.log('path', path, _this12.cleanPath(path));
-      return Promise.resolve(_this12.rest.delete(_this12.cleanPath(path), data));
-    } catch (e) {
-      return Promise.reject(e);
-    }
-  };
+var Checkbox = function Checkbox(_ref) {
+  var id = _ref.id,
+      className = _ref.className,
+      classNameInput = _ref.classNameInput,
+      loading = _ref.loading,
+      disabled = _ref.disabled,
+      _ref$indeterminate = _ref.indeterminate,
+      indeterminate = _ref$indeterminate === void 0 ? false : _ref$indeterminate,
+      _ref$value = _ref.value,
+      value = _ref$value === void 0 ? false : _ref$value,
+      children = _ref.children,
+      placeholder = _ref.placeholder,
+      onChange = _ref.onChange,
+      dataTest = _ref.dataTest,
+      rest = _objectWithoutPropertiesLoose(_ref, ["id", "className", "classNameInput", "loading", "disabled", "indeterminate", "value", "color", "backgroundColor", "borderColor", "children", "placeholder", "onChange", "dataTest"]);
 
-  _proto.create = function create(path, data) {
-    try {
-      var _this14 = this;
+  var inputRef = useRef(null);
 
-      if (path.startsWith('/')) {
-        path = path.substring(1);
-      }
+  var _React$useState = React.useState(value),
+      state = _React$useState[0],
+      setState = _React$useState[1];
 
-      return Promise.resolve(_this14.rest.post(path, data));
-    } catch (e) {
-      return Promise.reject(e);
+  useEffect(function () {
+    if (inputRef.current) {
+      inputRef.current.indeterminate = indeterminate;
     }
-  };
-
-  _proto.post = function post(path, data) {
-    try {
-      var _this16 = this;
+  }, [indeterminate]);
 
-      return Promise.resolve(_this16.create(path, data));
-    } catch (e) {
-      return Promise.reject(e);
-    }
+  var updateState = function updateState(ev) {
+    setState(ev.target.checked);
+    onChange(ev.target.checked);
   };
 
-  _proto.patch = function patch(path, data) {
-    try {
-      var _this18 = this;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "field"
+  }, /*#__PURE__*/React.createElement("label", {
+    htmlFor: id,
+    className: classnames(['checkbox', className])
+  }, /*#__PURE__*/React.createElement("input", _extends({
+    ref: inputRef,
+    disabled: disabled || loading,
+    id: id,
+    type: "checkbox",
+    className: classnames(['checkbox', classNameInput]),
+    checked: state,
+    onChange: updateState,
+    "data-test": dataTest
+  }, rest)), children || placeholder));
+};
 
-      if (path.startsWith('/')) {
-        path = path.substring(1);
-      }
+var ErrorZone = function ErrorZone(_ref) {
+  var children = _ref.children,
+      id = _ref.id,
+      className = _ref.className;
+  return /*#__PURE__*/React.createElement("p", {
+    className: classnames(['help is-danger', className]),
+    id: id
+  }, children);
+};
 
-      return Promise.resolve(_this18.rest.patch(path, data));
-    } catch (e) {
-      return Promise.reject(e);
-    }
-  };
+ErrorZone.propTypes = {
+  children: PropTypes.node,
+  id: PropTypes.string,
+  className: PropTypes.string
+};
 
-  _proto.upload = function upload(path, file) {
-    try {
-      var _this20 = this;
+var applyValidators = function applyValidators(value, validators) {
+  var validation = Array.isArray(validators) ? validators : [validators];
+  var result = true;
+  validation.forEach(function (func) {
+    if (func(value) === false) {
+      result = false;
+    }
+  });
+  return result;
+};
 
-      if (path.startsWith('/')) {
-        path = path.substring(1);
-      }
+var useInput = function useInput(onChange, value, validator) {
+  var _React$useState = React.useState({
+    hasError: false,
+    value: value
+  }),
+      state = _React$useState[0],
+      setState = _React$useState[1];
 
-      return Promise.resolve(_this20.rest.upload(path, file));
-    } catch (e) {
-      return Promise.reject(e);
-    }
+  var onUpdate = function onUpdate(ev) {
+    var value = ev && ev.target ? ev.target.value : ev ? ev : '';
+    setState({
+      value: value,
+      hasError: false
+    });
+    if (onChange) onChange(value);
   };
 
-  _proto.download = function download(path) {
-    try {
-      var _this22 = this;
-
-      if (path.startsWith('/')) {
-        path = path.substring(1);
-      }
+  var onBlur = function onBlur() {
+    var hasError = applyValidators(state.value, validator) === false;
+    if (hasError) setState({
+      value: state.value,
+      hasError: hasError
+    });
+  };
 
-      return Promise.resolve(_this22.rest.get(path));
-    } catch (e) {
-      return Promise.reject(e);
+  var onFocus = function onFocus() {
+    if (state.hasError) {
+      setState({
+        value: state.value,
+        hasError: false
+      });
     }
   };
 
-  _proto.getTypeSchema = function getTypeSchema(path, name) {
-    try {
-      var _this24 = this;
+  React.useEffect(function () {
+    setState({
+      value: value,
+      hasError: false
+    });
+  }, [value]);
+  return {
+    onChange: onUpdate,
+    onFocus: onFocus,
+    onBlur: onBlur,
+    state: state
+  };
+};
 
-      var _temp3 = function _temp3() {
-        return cacheSchemas[name];
-      };
+// From github.com/protonmail/proton-shared
 
-      var _temp4 = function () {
-        if (!cacheSchemas[name]) {
-          var url = getContainerFromPath(path); // todo: handle db case (only addable containers)
+/* eslint-disable no-useless-escape */
+var 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;
+var REGEX_URL = /((([A-Za-z]{3,9}:(?:\/\/)?)(?:[\-;:&=\+\$,\w]+@)?[A-Za-z0-9\.\-]+|(?:www\.|[\-;:&=\+\$,\w]+@)[A-Za-z0-9\.\-]+)((?:\/[\+~%\/\.\w\-_]*)?\??(?:[\-\+=&;%@\.\w_]*)#?(?:[\.\!\/\\\w]*))?)/;
+var REGEX_HEX_COLOR = /^#([a-f0-9]{3,4}|[a-f0-9]{4}(?:[a-f0-9]{2}){1,2})\b$/i;
+var REGEX_NUMBER = /^\d+$/;
+var isEmpty = function isEmpty(value) {
+  if (value === void 0) {
+    value = '';
+  }
 
-          return Promise.resolve(_this24.rest.get(url + "@types/" + name)).then(function (res) {
-            return Promise.resolve(res.json()).then(function (_res$json) {
-              cacheSchemas[name] = _res$json;
-            });
-          });
-        }
-      }();
+  return !value.length;
+};
+var maxLength = function maxLength(value, limit) {
+  if (value === void 0) {
+    value = '';
+  }
 
-      return Promise.resolve(_temp4 && _temp4.then ? _temp4.then(_temp3) : _temp3(_temp4));
-    } catch (e) {
-      return Promise.reject(e);
-    }
-  };
+  if (limit === void 0) {
+    limit = 0;
+  }
 
-  _proto.getAddons = function getAddons(path) {
-    try {
-      var _this26 = this;
+  return value.length <= limit;
+};
+var minLength = function minLength(value, limit) {
+  if (value === void 0) {
+    value = '';
+  }
 
-      return Promise.resolve(_this26.rest.get(path + "@addons"));
-    } catch (e) {
-      return Promise.reject(e);
-    }
-  };
+  if (limit === void 0) {
+    limit = 0;
+  }
 
-  _proto.installAddon = function installAddon(path, key) {
-    try {
-      var _this28 = this;
+  return value.length >= limit;
+};
+var isEmail = function isEmail(value) {
+  if (value === void 0) {
+    value = '';
+  }
 
-      return Promise.resolve(_this28.rest.post(path + "@addons", {
-        id: key
-      }));
-    } catch (e) {
-      return Promise.reject(e);
-    }
-  };
+  return REGEX_EMAIL.test(value);
+};
+var isURL = function isURL(value) {
+  if (value === void 0) {
+    value = '';
+  }
 
-  _proto.removeAddon = function removeAddon(path, key) {
-    try {
-      var _this30 = this;
+  return REGEX_URL.test(value);
+};
+var isHexColor = function isHexColor(value) {
+  if (value === void 0) {
+    value = '';
+  }
 
-      return Promise.resolve(_this30.rest.delete(path + "@addons", {
-        id: key
-      }));
-    } catch (e) {
-      return Promise.reject(e);
-    }
-  };
-
-  _proto.getGroups = function getGroups(path) {
-    try {
-      var _this32 = this;
+  return REGEX_HEX_COLOR.test(value);
+};
+var isNumber = function isNumber(value) {
+  if (value === void 0) {
+    value = '';
+  }
 
-      var endpoint = getContainerFromPath(path) + "@groups";
-      return Promise.resolve(_this32.rest.get(endpoint));
-    } catch (e) {
-      return Promise.reject(e);
-    }
-  };
+  return REGEX_NUMBER.test(value);
+};
+var notEmpty = function notEmpty(value) {
+  return !!value.length;
+};
 
-  _proto.getUsers = function getUsers(path) {
-    try {
-      var _this34 = this;
+var noop$2 = function noop() {
+  return true;
+};
+/** @type any */
 
-      var endpoint = getContainerFromPath(path) + "@users";
-      return Promise.resolve(_this34.rest.get(endpoint));
-    } catch (e) {
-      return Promise.reject(e);
-    }
-  };
 
-  _proto.getPrincipals = function getPrincipals(path) {
-    try {
-      var _this36 = this;
+var Input = React.forwardRef(function (_ref, ref) {
+  var icon = _ref.icon,
+      _ref$iconPosition = _ref.iconPosition,
+      iconPosition = _ref$iconPosition === void 0 ? 'has-icons-right' : _ref$iconPosition,
+      error = _ref.error,
+      errorZoneClassName = _ref.errorZoneClassName,
+      _ref$autoComplete = _ref.autoComplete,
+      autoComplete = _ref$autoComplete === void 0 ? 'off' : _ref$autoComplete,
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? '' : _ref$className,
+      _ref$widget = _ref.widget,
+      widget = _ref$widget === void 0 ? 'input' : _ref$widget,
+      _ref$type = _ref.type,
+      type = _ref$type === void 0 ? 'text' : _ref$type,
+      _ref$loading = _ref.loading,
+      loading = _ref$loading === void 0 ? false : _ref$loading,
+      _ref$required = _ref.required,
+      required = _ref$required === void 0 ? false : _ref$required,
+      id = _ref.id,
+      placeholder = _ref.placeholder,
+      value = _ref.value,
+      _ref$autofocus = _ref.autofocus,
+      autofocus = _ref$autofocus === void 0 ? false : _ref$autofocus,
+      onChange = _ref.onChange,
+      _ref$validator = _ref.validator,
+      validator = _ref$validator === void 0 ? noop$2 : _ref$validator,
+      errorMessage = _ref.errorMessage,
+      _ref$dataTest = _ref.dataTest,
+      dataTest = _ref$dataTest === void 0 ? 'testInput' : _ref$dataTest,
+      rest = _objectWithoutPropertiesLoose(_ref, ["icon", "iconPosition", "error", "errorZoneClassName", "autoComplete", "className", "widget", "type", "onPressEnter", "isSubmitted", "loading", "required", "id", "placeholder", "value", "autofocus", "onChange", "validator", "errorMessage", "dataTest"]);
 
-      var groups = _this36.getGroups(path);
+  if (required) {
+    validator = Array.isArray(validator) ? validator.push(notEmpty) : [validator, notEmpty];
+  }
 
-      var users = _this36.getUsers(path);
+  var _useInput = useInput(onChange, value != null ? value : '', validator),
+      state = _useInput.state,
+      handlers = _objectWithoutPropertiesLoose(_useInput, ["state"]);
 
-      return Promise.resolve(Promise.all([groups, users])).then(function (_ref3) {
-        var gr = _ref3[0],
-            usr = _ref3[1];
+  var _useState = useState(generateUID('input')),
+      uid = _useState[0];
 
-        function _temp6(_gr$json) {
-          function _temp5(_usr$json) {
-            return {
-              groups: _gr$json,
-              users: _usr$json
-            };
-          }
+  var _useState2 = useState(false),
+      mounted = _useState2[0],
+      setMounted = _useState2[1]; // eslint-disable-next-line
 
-          var _usr$ok = usr.ok;
-          return _usr$ok ? Promise.resolve(usr.json()).then(_temp5) : _temp5([]);
-        }
 
-        var _gr$ok = gr.ok;
-        return _gr$ok ? Promise.resolve(gr.json()).then(_temp6) : _temp6([]);
-      });
-    } catch (e) {
-      return Promise.reject(e);
+  ref = ref || React.useRef();
+  useEffect(function () {
+    setMounted(true);
+  }, []);
+  useEffect(function () {
+    if (autofocus && !error) {
+      ref.current.focus();
     }
+  }, [mounted, autofocus, ref, error]);
+  var theError = state.hasError ? errorMessage || 'invalid field' : '';
+  var statusClasses = state.hasError ? 'is-danger' : '';
+
+  var cssControl = function cssControl() {
+    return icon ? ['control', iconPosition] : ['control'];
   };
 
-  _proto.getRoles = function getRoles(path) {
-    try {
-      var _this38 = this;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "field"
+  }, id && placeholder ? /*#__PURE__*/React.createElement("label", {
+    className: "label",
+    htmlFor: id
+  }, placeholder) : null, /*#__PURE__*/React.createElement("div", {
+    className: classnames(cssControl())
+  }, /*#__PURE__*/React.createElement("input", _extends({
+    className: classnames([widget, className, statusClasses]),
+    "aria-invalid": theError,
+    "aria-describedby": uid,
+    id: id,
+    ref: ref,
+    type: type,
+    value: state.value,
+    placeholder: placeholder,
+    autoComplete: autoComplete,
+    disabled: loading || rest.disabled,
+    required: required,
+    "data-test": dataTest
+  }, handlers, rest)), icon && icon), /*#__PURE__*/React.createElement(ErrorZone, {
+    className: errorZoneClassName,
+    id: uid
+  }, state.hasError ? theError : ''));
+});
+Input.propTypes = {
+  icon: PropTypes.node,
+  iconPosition: PropTypes.arrayOf(PropTypes.oneOf(['has-icons-left', 'has-icons-right', ''])),
+  error: PropTypes.string,
+  errorZoneClassName: PropTypes.string,
+  autoComplete: PropTypes.string,
+  autoFocus: PropTypes.bool,
+  className: PropTypes.string,
+  disabled: PropTypes.bool,
+  loading: PropTypes.bool,
+  isSubmitted: PropTypes.bool,
+  id: PropTypes.string,
+  name: PropTypes.string,
+  onChange: PropTypes.func,
+  onKeyDown: PropTypes.func,
+  onKeyUp: PropTypes.func,
+  onPressEnter: PropTypes.func,
+  placeholder: PropTypes.string,
+  readOnly: PropTypes.bool,
+  required: PropTypes.bool,
+  type: PropTypes.string,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool])
+};
 
-      var endpoint = getContainerFromPath(path) + "@available-roles";
-      return Promise.resolve(_this38.rest.get(endpoint));
-    } catch (e) {
-      return Promise.reject(e);
-    }
-  };
+var Icon = function Icon(_ref) {
+  var icon = _ref.icon,
+      className = _ref.className,
+      align = _ref.align;
+  var addClass = className ? className.split(' ') : [className];
+  align = align || 'is-right';
+  return /*#__PURE__*/React.createElement("span", {
+    className: classnames(['icon', align].concat(addClass))
+  }, /*#__PURE__*/React.createElement("i", {
+    className: icon
+  }));
+};
 
-  _proto.getAllPermissions = function getAllPermissions(path) {
-    try {
-      var _this40 = this;
+var EmailInput = function EmailInput(_ref) {
+  var _ref$value = _ref.value,
+      value = _ref$value === void 0 ? '' : _ref$value,
+      dataTest = _ref.dataTest,
+      rest = _objectWithoutPropertiesLoose(_ref, ["value", "dataTest"]);
 
-      // paths used to query the API always has to start without a "/"
-      if (path.startsWith('/')) {
-        path = path.slice(1);
-      }
+  return /*#__PURE__*/React.createElement(Input, _extends({
+    type: "email",
+    validator: isEmail,
+    errorMessage: "Email address invalid",
+    value: value,
+    "data-test": dataTest,
+    icon: /*#__PURE__*/React.createElement(Icon, {
+      icon: "fas fa-envelope"
+    })
+  }, rest));
+};
 
-      if (!path.endsWith('/')) {
-        path = path + "/";
-      }
+var Form = function Form(_ref) {
+  var children = _ref.children,
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? '' : _ref$className,
+      _ref$onSubmit = _ref.onSubmit,
+      onSubmit = _ref$onSubmit === void 0 ? noop : _ref$onSubmit,
+      _ref$onReset = _ref.onReset,
+      onReset = _ref$onReset === void 0 ? noop : _ref$onReset,
+      _ref$autoComplete = _ref.autoComplete,
+      autoComplete = _ref$autoComplete === void 0 ? 'off' : _ref$autoComplete,
+      title = _ref.title,
+      error = _ref.error,
+      dataTest = _ref.dataTest,
+      rest = _objectWithoutPropertiesLoose(_ref, ["children", "className", "onSubmit", "onReset", "autoComplete", "title", "error", "dataTest"]);
 
-      return Promise.resolve(_this40.rest.get(path + '@all_permissions')).then(function (req) {
-        return Promise.resolve(req.json()).then(function (resp) {
-          var permissions = Array.from(new Set(extractPermissions(resp)));
-          return permissions;
-        });
-      });
-    } catch (e) {
-      return Promise.reject(e);
-    }
+  var handleSubmit = function handleSubmit(event) {
+    event.preventDefault();
+    onSubmit(event);
   };
 
-  _proto.getTypes = function getTypes(path) {
-    try {
-      var _this42 = this;
-
-      var _temp10 = function _temp10() {
-        return cacheTypes[path];
-      };
+  return /*#__PURE__*/React.createElement("div", {
+    "data-test": dataTest
+  }, title && /*#__PURE__*/React.createElement("div", {
+    className: "level"
+  }, /*#__PURE__*/React.createElement("h1", {
+    className: "title is-size-4"
+  }, title)), error && /*#__PURE__*/React.createElement("div", {
+    className: "notification is-danger"
+  }, error), /*#__PURE__*/React.createElement("form", _extends({
+    onSubmit: handleSubmit,
+    onReset: onReset,
+    autoComplete: autoComplete,
+    className: classnames(['form', className])
+  }, rest), children));
+};
+Form.propTypes = {
+  children: PropTypes.node.isRequired,
+  className: PropTypes.string,
+  onSubmit: PropTypes.func,
+  onReset: PropTypes.func,
+  autoComplete: PropTypes.string
+};
 
-      if (path.startsWith('/')) {
-        path = path.slice(1);
-      }
+var PasswordInput = function PasswordInput(_ref) {
+  var _ref$value = _ref.value,
+      value = _ref$value === void 0 ? '' : _ref$value,
+      rest = _objectWithoutPropertiesLoose(_ref, ["value"]);
 
-      var _temp11 = function () {
-        if (!cacheTypes[path]) {
-          return Promise.resolve(_this42.rest.get(path + '@addable-types')).then(function (types) {
-            var _temp7 = function () {
-              if (types.status === 401 || types.status === 404) {
-                cacheTypes[path] = [];
-              } else {
-                return Promise.resolve(types.json()).then(function (res) {
-                  cacheTypes[path] = res;
-                });
-              }
-            }();
-
-            if (_temp7 && _temp7.then) return _temp7.then(function () {});
-          });
-        }
-      }();
-
-      return Promise.resolve(_temp11 && _temp11.then ? _temp11.then(_temp10) : _temp10(_temp11));
-    } catch (e) {
-      return Promise.reject(e);
-    }
-  };
-
-  return GuillotinaClient;
-}();
-function getClient(url, auth, isContainer) {
-  if (isContainer === void 0) {
-    isContainer = false;
-  }
-
-  return new GuillotinaClient(new RestClient(url, auth), isContainer);
-}
-var getContainerFromPath = function getContainerFromPath(path) {
-  if (path.startsWith('/')) {
-    path = path.substring(1);
-  }
-
-  var parts = path.split('/');
-  return parts[0] + "/" + parts[1] + "/";
-};
-var lightFileReader = function lightFileReader(file) {
-  try {
-    return Promise.resolve(new Promise(function (resolve) {
-      var reader = new FileReader();
-      reader.readAsArrayBuffer(file);
-
-      reader.onloadend = function (e) {
-        var fileData = e.target.result;
-        resolve({
-          filename: file.name.normalize('NFD').replace(/[\u0300-\u036f]/g, ''),
-          data: fileData,
-          'content-type': file.type
-        });
-      };
-    }));
-  } catch (e) {
-    return Promise.reject(e);
-  }
+  return /*#__PURE__*/React.createElement(Input, _extends({
+    value: value,
+    type: "password"
+  }, rest));
 };
 
-var extractPermissions = function extractPermissions(data) {
-  var result = [];
-
-  if (typeof data !== 'object') ; else if (!Array.isArray(data) && data.permission) {
-    result = result.concat([data.permission]);
-  } else if (!Array.isArray(data)) {
-    Object.keys(data).map(function (key) {
-      return result = result.concat(extractPermissions(data[key]));
-    });
-  } else if (Array.isArray(data)) {
-    data.map(function (item) {
-      return result = result.concat(extractPermissions(item));
-    });
-  }
-
-  return result;
+var formComponents = {
+  string: Input,
+  password: PasswordInput,
+  boolean: Checkbox,
+  email: EmailInput
 };
+function FormBuilder(_ref) {
+  var schema = _ref.schema,
+      formData = _ref.formData,
+      onSubmit = _ref.onSubmit,
+      actionName = _ref.actionName,
+      children = _ref.children,
+      _ref$exclude = _ref.exclude,
+      exclude = _ref$exclude === void 0 ? [] : _ref$exclude,
+      _ref$remotes = _ref.remotes,
+      remotes = _ref$remotes === void 0 ? [] : _ref$remotes,
+      _ref$submitButton = _ref.submitButton,
+      submitButton = _ref$submitButton === void 0 ? true : _ref$submitButton,
+      rest = _objectWithoutPropertiesLoose(_ref, ["schema", "formData", "title", "onSubmit", "actionName", "children", "exclude", "remotes", "submitButton"]);
 
-var AuthContext = createContext({});
-var ClientContext = createContext({});
-var TraversalContext = createContext({});
-
-var Traversal = /*#__PURE__*/function () {
-  function Traversal(_ref) {
-    var flash = _ref.flash,
-        props = _objectWithoutPropertiesLoose(_ref, ["flash"]);
-
-    Object.assign(this, props);
-    if (typeof flash === 'function') this.flash = flash;
-  }
-
-  var _proto = Traversal.prototype;
-
-  _proto.refresh = function refresh(_temp) {
-    var _ref2 = _temp === void 0 ? {} : _temp,
-        _ref2$transparent = _ref2.transparent,
-        transparent = _ref2$transparent === void 0 ? false : _ref2$transparent;
-
-    this.dispatch({
-      type: 'REFRESH',
-      payload: {
-        transparent: transparent
-      }
-    });
-  };
-
-  _proto.apply = function apply(data) {
-    // apply a optimistic update to context
-    this.dispatch({
-      type: 'APPLY',
-      payload: data
-    });
-  };
-
-  _proto.flash = function flash(message, type) {
-    this.dispatch({
-      type: 'SET_FLASH',
-      payload: {
-        flash: {
-          message: message,
-          type: type
-        }
-      }
-    });
-    window.scrollTo({
-      top: 0,
-      left: 0,
-      behavior: 'smooth'
-    });
-  };
-
-  _proto.clearFlash = function clearFlash() {
-    this.dispatch({
-      type: 'CLEAR_FLASH'
-    });
-  };
+  var ref = React.useRef();
+  var properties = schema.properties,
+      required = schema.required;
+  var values = Object.assign({}, formData || {}); // build initial state
 
-  _proto.doAction = function doAction(action, params) {
-    this.dispatch({
-      type: 'SET_ACTION',
-      payload: {
-        action: action,
-        params: params
-      }
-    });
-  };
+  var initialState = {};
+  var fields = Object.keys(properties).filter(function (x) {
+    return !exclude.includes(x);
+  });
+  fields.forEach(function (element) {
+    initialState[element] = values[element] || undefined;
+  }); // Register remotes
 
-  _proto.cancelAction = function cancelAction() {
-    this.dispatch({
-      type: 'CLEAR_ACTION'
+  if (!ref.current) {
+    ref.current = {};
+    Object.keys(remotes).forEach(function (item) {
+      return ref.current[item] = remotes[item];
     });
-  };
-
-  _proto.hasPerm = function hasPerm(permission) {
-    return this.state.permissions[permission] === true;
-  };
-
-  _proto.filterTabs = function filterTabs(tabs, tabsPermissions) {
-    var _this = this;
-
-    var result = {};
-    Object.keys(tabs).forEach(function (item) {
-      var perm = tabsPermissions[item];
-
-      if (perm && _this.hasPerm(perm)) {
-        result[item] = tabs[item];
-      } else if (!perm) {
-        result[item] = tabs[item];
+  } else {
+    // apply remote changes
+    Object.keys(remotes).forEach(function (key) {
+      if (JSON.stringify(ref.current[key]) !== JSON.stringify(remotes[key])) {
+        ref.current[key] = remotes[key];
       }
     });
-    return result;
-  };
-
-  _createClass(Traversal, [{
-    key: "path",
-    get: function get() {
-      return this.state.path;
-    }
-  }, {
-    key: "pathPrefix",
-    get: function get() {
-      return this.state.path.slice(1);
-    }
-  }, {
-    key: "context",
-    get: function get() {
-      return this.state.context;
-    }
-  }, {
-    key: "containerPath",
-    get: function get() {
-      return getContainerFromPath(this.path);
-    }
-  }]);
-
-  return Traversal;
-}();
-
-function TraversalProvider(_ref3) {
-  var children = _ref3.children,
-      props = _objectWithoutPropertiesLoose(_ref3, ["children"]);
-
-  return /*#__PURE__*/React.createElement(TraversalContext.Provider, {
-    value: new Traversal(props)
-  }, children);
-}
-function useTraversal() {
-  return React.useContext(TraversalContext);
-}
-function ClientProvider(_ref4) {
-  var children = _ref4.children,
-      client = _ref4.client;
-  return /*#__PURE__*/React.createElement(ClientContext.Provider, {
-    value: client
-  }, children);
-}
-function useGuillotinaClient() {
-  return React.useContext(ClientContext);
-}
-
-var noop$1 = function noop() {};
-
-var Button = function Button(_ref) {
-  var _ref2;
-
-  var children = _ref.children,
-      _ref$className = _ref.className,
-      className = _ref$className === void 0 ? 'is-primary' : _ref$className,
-      onClick = _ref.onClick,
-      _ref$type = _ref.type,
-      type = _ref$type === void 0 ? 'submit' : _ref$type,
-      _ref$loading = _ref.loading,
-      loading = _ref$loading === void 0 ? false : _ref$loading,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      dataTest = _ref.dataTest,
-      rest = _objectWithoutPropertiesLoose(_ref, ["children", "className", "onClick", "type", "loading", "disabled", "dataTest"]);
-
-  var css = (_ref2 = []).concat.apply(_ref2, ['button'].concat(className.split(' ')));
-
-  if (loading) css = css.concat('is-loading');
-  if (disabled) onClick = noop$1;
-  return /*#__PURE__*/React.createElement("p", {
-    className: "control"
-  }, /*#__PURE__*/React.createElement("button", _extends({
-    type: type,
-    className: classnames(css),
-    onClick: onClick,
-    disabled: disabled
-  }, rest, {
-    "data-test": dataTest
-  }), children));
-};
-
-function Modal(props) {
-  var isActive = props.isActive,
-      setActive = props.setActive,
-      children = props.children;
-
-  var _usePortal = usePortal(),
-      Portal = _usePortal.Portal;
+  }
 
-  var css = 'modal ' + (isActive ? 'is-active ' : '') + props.className;
-  return /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement("div", {
-    className: css
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "modal-background",
-    onClick: function onClick() {
-      return setActive(false);
-    }
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "modal-content"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "box"
-  }, children)), /*#__PURE__*/React.createElement("button", {
-    className: "modal-close is-large",
-    "aria-label": "close",
-    onClick: function onClick() {
-      return setActive(false);
-    }
-  })));
-}
-function Confirm(_ref) {
-  var message = _ref.message,
-      onCancel = _ref.onCancel,
-      onConfirm = _ref.onConfirm,
-      loading = _ref.loading;
+  ref.current = ref.current || {};
 
-  var setActive = function setActive() {
-    return onCancel();
+  var onUpdate = function onUpdate(field) {
+    return function (ev) {
+      ref.current[field] = ev.target ? ev.target.value : ev.value || ev;
+    };
   };
 
-  return /*#__PURE__*/React.createElement(Modal, {
-    isActive: true,
-    setActive: setActive,
-    className: "confirm"
-  }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", {
-    className: "title is-size-5"
-  }, message || 'Are you Sure?'), /*#__PURE__*/React.createElement("div", {
-    className: "level",
-    style: {
-      marginTop: 50
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "level-left"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "level-right"
-  }, /*#__PURE__*/React.createElement("button", {
-    className: "button is-danger",
-    onClick: function onClick() {
-      return onCancel();
-    }
-  }, "Cancel"), "\xA0\xA0", /*#__PURE__*/React.createElement(Button, {
-    loading: loading,
-    className: "is-success",
-    onClick: function onClick() {
-      return onConfirm();
-    },
-    dataTest: "btnConfirmModalTest"
-  }, "Confirm")))));
-} // @todo Improve it... Replacing the inputText to a tree
+  var GetTag = function GetTag(_ref2) {
+    var field = _ref2.field;
+    var Tag = formComponents[properties[field].widget || properties[field].type];
+    var props = {
+      label: properties[field].title,
+      value: initialState[field],
+      onChange: onUpdate(field),
+      placeholder: properties[field].title || '',
+      id: generateUID(),
+      dataTest: field + "TestInput"
+    };
 
-function PathTree(_ref2) {
-  var title = _ref2.title,
-      defaultPath = _ref2.defaultPath,
-      children = _ref2.children,
-      onConfirm = _ref2.onConfirm,
-      onCancel = _ref2.onCancel;
-  return /*#__PURE__*/React.createElement(Modal, {
-    isActive: true,
-    setActive: onCancel
-  }, /*#__PURE__*/React.createElement("h1", null, title), /*#__PURE__*/React.createElement("form", {
-    onSubmit: function onSubmit(e) {
-      e.preventDefault();
-      onConfirm(e.target[0].value, e.target);
+    if (required.includes(field)) {
+      props.required = true;
+      props.placeholder += ' *';
     }
-  }, /*#__PURE__*/React.createElement("input", {
-    className: "input",
-    placeholder: "/folder (without /db/container on front)",
-    style: {
-      margin: '20px 0'
-    },
-    defaultValue: defaultPath,
-    type: "text"
-  }), children, /*#__PURE__*/React.createElement("div", {
-    className: "level-right"
-  }, /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    className: "button is-danger",
-    onClick: onCancel
-  }, "Cancel"), "\xA0\xA0", /*#__PURE__*/React.createElement("button", {
-    type: "submit",
-    className: "button is-success"
-  }, "Confirm"))));
-}
 
-function useSetState(initialState) {
-  var _useState = useState(initialState),
-      state = _useState[0],
-      set = _useState[1];
+    Tag.displayName = field + "Field";
+    return /*#__PURE__*/React.createElement(Tag, props);
+  };
 
-  var setState = useCallback(function (patch) {
-    set(function (prevState) {
-      return Object.assign({}, prevState, patch instanceof Function ? patch(prevState) : patch);
+  var children_ = React.Children.map(children, function (child) {
+    return React.cloneElement(child, {
+      onChange: onUpdate
     });
-  }, [set]);
-  return [state, setState];
+  });
+
+  var changes = function changes() {
+    onSubmit(ref.current, values);
+  };
+
+  return /*#__PURE__*/React.createElement(Form, _extends({
+    onSubmit: changes
+  }, rest), fields.map(function (field) {
+    return /*#__PURE__*/React.createElement(GetTag, {
+      field: field,
+      key: field
+    });
+  }), children_, submitButton && /*#__PURE__*/React.createElement(Button, null, actionName));
 }
 
-function _catch(body, recover) {
-  try {
-    var result = body();
-  } catch (e) {
-    return recover(e);
-  }
+/** @type any */
 
-  if (result && result.then) {
-    return result.then(void 0, recover);
-  }
+var Select = React.forwardRef(function (_ref, ref) {
+  var options = _ref.options,
+      error = _ref.error,
+      errorZoneClassName = _ref.errorZoneClassName,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 1 : _ref$size,
+      placeholder = _ref.placeholder,
+      id = _ref.id,
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? '' : _ref$className,
+      _ref$classWrap = _ref.classWrap,
+      classWrap = _ref$classWrap === void 0 ? '' : _ref$classWrap,
+      _ref$multiple = _ref.multiple,
+      multiple = _ref$multiple === void 0 ? false : _ref$multiple,
+      _ref$loading = _ref.loading,
+      loading = _ref$loading === void 0 ? false : _ref$loading,
+      onChange = _ref.onChange,
+      _ref$appendDefault = _ref.appendDefault,
+      appendDefault = _ref$appendDefault === void 0 ? false : _ref$appendDefault,
+      _ref$style = _ref.style,
+      style = _ref$style === void 0 ? {} : _ref$style,
+      dataTest = _ref.dataTest,
+      rest = _objectWithoutPropertiesLoose(_ref, ["options", "error", "errorZoneClassName", "size", "placeholder", "id", "className", "classWrap", "multiple", "loading", "isSubmitted", "onChange", "appendDefault", "style", "dataTest"]);
 
-  return result;
-}
+  var _useState = useState(generateUID('select')),
+      uid = _useState[0];
 
-var initial = {
-  loading: undefined,
-  isError: false,
-  errorMessage: undefined,
-  result: undefined,
-  response: undefined
-};
+  var onUpdate = function onUpdate(ev) {
+    if (ev.target.value === '') {
+      onChange({
+        target: {
+          value: undefined
+        }
+      });
+    } else {
+      onChange(ev);
+    }
+  };
 
-var getErrorMessage = function getErrorMessage(dataError, defaultValue) {
-  if (dataError && dataError.details) {
-    return dataError.details;
-  } else if (dataError && dataError.reason) {
-    return dataError.reason;
+  if (appendDefault) {
+    options = [{
+      text: 'Choose..',
+      value: ''
+    }].concat(options);
   }
 
-  return defaultValue;
+  var statusClasses = error ? 'is-danger' : '';
+  var cssWrap = ['select', statusClasses, multiple ? 'is-multiple' : '', classWrap];
+  return /*#__PURE__*/React.createElement("div", {
+    className: "field"
+  }, id && placeholder ? /*#__PURE__*/React.createElement("label", {
+    className: "label",
+    htmlFor: id
+  }, placeholder) : null, /*#__PURE__*/React.createElement("div", {
+    className: classnames(cssWrap)
+  }, /*#__PURE__*/React.createElement("select", _extends({
+    className: classnames(['', className]),
+    size: size,
+    multiple: multiple,
+    disabled: loading || rest.disabled,
+    onChange: onUpdate
+  }, rest, {
+    ref: ref,
+    style: style,
+    "data-test": dataTest
+  }), options.map(function (_ref2, index) {
+    var text = _ref2.text,
+        rest = _objectWithoutPropertiesLoose(_ref2, ["text"]);
+
+    return /*#__PURE__*/React.createElement("option", _extends({
+      key: index.toString()
+    }, rest), text);
+  }))), error && /*#__PURE__*/React.createElement(ErrorZone, {
+    className: errorZoneClassName,
+    id: uid
+  }, error ? error : ''));
+});
+Select.propTypes = {
+  error: PropTypes.string,
+  disabled: PropTypes.bool,
+  loading: PropTypes.bool,
+  isSubmitted: PropTypes.bool,
+  size: PropTypes.number,
+  onChange: PropTypes.func,
+  options: PropTypes.arrayOf(PropTypes.object),
+  multiple: PropTypes.bool,
+  className: PropTypes.string
 };
 
-var processResponse = function processResponse(res, ready_body) {
-  if (ready_body === void 0) {
-    ready_body = true;
+var RestClient = /*#__PURE__*/function () {
+  function RestClient(url, container, auth) {
+    this.auth = auth;
+    this.url = url;
+    this.container = container;
   }
 
-  try {
-    var _temp2 = function _temp2(_res$json) {
-      return {
-        isError: false,
-        loading: false,
-        result: _res$json,
-        response: res
-      };
+  var _proto = RestClient.prototype;
+
+  _proto.request = function request(path, data, headers) {
+    try {
+      var _this2 = this;
+
+      if (path.indexOf(_this2.url) !== -1) {
+        path = path.replace(_this2.url, '');
+      }
+
+      if (_this2.container !== '/' && path.indexOf(_this2.container) === -1) {
+        path = "" + _this2.container + path;
+      }
+
+      if (!path.startsWith('/')) {
+        path = "/" + path;
+      }
+
+      data = data || {};
+      data.headers = headers || _this2.getHeaders();
+      return Promise.resolve(fetch("" + _this2.url + path, data));
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+
+  _proto.getHeaders = function getHeaders() {
+    var authToken = this.auth.getToken();
+    if (!authToken) return {};
+    return {
+      Accept: 'application/json',
+      'Content-Type': 'application/json',
+      Authorization: 'Bearer ' + authToken
     };
+  };
 
-    if (res.status < 400) return Promise.resolve(ready_body ? Promise.resolve(res.json()).then(_temp2) : _temp2(res.status));else return Promise.resolve(res.json()).then(function (_res$json2) {
-      return {
-        isError: true,
-        loading: false,
-        errorMessage: getErrorMessage(_res$json2, res.status),
-        response: res
-      };
-    });
-  } catch (e) {
-    return Promise.reject(e);
-  }
-};
+  _proto.post = function post(path, data) {
+    try {
+      var _this4 = this;
 
-var patch = function patch(setState, Ctx) {
-  return function (data, endpoint, body) {
-    if (body === void 0) {
-      body = false;
+      return Promise.resolve(_this4.request(path, {
+        method: 'post',
+        body: JSON.stringify(data)
+      }));
+    } catch (e) {
+      return Promise.reject(e);
     }
+  };
 
+  _proto.get = function get(path) {
     try {
-      var _temp5 = function _temp5() {
-        setState(newState);
-        return newState;
-      };
+      var _this6 = this;
 
-      setState({
-        loading: true
-      });
-      var newState = {};
+      return Promise.resolve(_this6.request(path, {}));
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
 
-      var _temp6 = _catch(function () {
-        var path = endpoint ? "" + Ctx.path + endpoint : Ctx.path;
-        return Promise.resolve(Ctx.client.patch(path, data)).then(function (res) {
-          return Promise.resolve(processResponse(res, body)).then(function (_processResponse) {
-            newState = _processResponse;
-          });
-        });
-      }, function (e) {
-        console.error('Error', e);
-        newState = {
-          isError: true,
-          errorMessage: 'unhandled exception'
-        };
-      });
+  _proto.put = function put(path, data) {
+    try {
+      var _this8 = this;
 
-      return Promise.resolve(_temp6 && _temp6.then ? _temp6.then(_temp5) : _temp5(_temp6));
+      return Promise.resolve(_this8.request(path, {
+        method: 'put',
+        body: JSON.stringify(data)
+      }));
     } catch (e) {
       return Promise.reject(e);
     }
   };
-};
 
-var del = function del(setState, Ctx) {
-  return function (data, endpoint, body) {
-    if (body === void 0) {
-      body = false;
+  _proto.patch = function patch(path, data) {
+    try {
+      var _this10 = this;
+
+      return Promise.resolve(_this10.request(path, {
+        method: 'PATCH',
+        body: JSON.stringify(data)
+      }));
+    } catch (e) {
+      return Promise.reject(e);
     }
+  };
 
+  _proto.upload = function upload(path, data) {
     try {
-      var _temp9 = function _temp9() {
-        setState(newState);
-        return newState;
-      };
-
-      setState({
-        loading: true
-      });
-      var newState = {};
+      var _this12 = this;
 
-      var _temp10 = _catch(function () {
-        var path = endpoint ? "" + Ctx.path + endpoint : Ctx.path;
-        return Promise.resolve(Ctx.client.delete(path, data)).then(function (res) {
-          return Promise.resolve(processResponse(res, body)).then(function (_processResponse2) {
-            newState = _processResponse2;
-          });
-        });
-      }, function (e) {
-        console.error('Error', e);
-        newState = {
-          isError: true,
-          errorMessage: 'unhandled exception'
-        };
-      });
+      var headers = _this12.getHeaders();
 
-      return Promise.resolve(_temp10 && _temp10.then ? _temp10.then(_temp9) : _temp9(_temp10));
+      delete headers['Content-Type'];
+      headers['Content-Type'] = data['content-type'];
+      headers['X-UPLOAD-FILENAME'] = data.filename;
+      headers['Content-Encoding'] = 'base64';
+      return Promise.resolve(_this12.request(path, {
+        method: 'PATCH',
+        body: data.data
+      }, headers));
     } catch (e) {
       return Promise.reject(e);
     }
   };
-};
 
-var post = function post(setState, Ctx) {
-  return function (data, endpoint, body) {
-    if (body === void 0) {
-      body = true;
+  _proto.delete = function _delete(path, data) {
+    if (data === void 0) {
+      data = undefined;
     }
 
     try {
-      var _temp13 = function _temp13() {
-        setState(newState);
-        return newState;
-      };
-
-      setState({
-        loading: true
-      });
-      var newState = {};
-
-      var _temp14 = _catch(function () {
-        var path = endpoint ? "" + Ctx.path + endpoint : Ctx.path;
-        return Promise.resolve(Ctx.client.post(path, data)).then(function (res) {
-          return Promise.resolve(processResponse(res, body)).then(function (_processResponse3) {
-            newState = _processResponse3;
-          });
-        });
-      }, function (e) {
-        console.error('Error', e);
-        newState = {
-          isError: true,
-          errorMessage: 'unhandled exception'
-        };
-      });
+      var _this14 = this;
 
-      return Promise.resolve(_temp14 && _temp14.then ? _temp14.then(_temp13) : _temp13(_temp14));
+      return Promise.resolve(_this14.request(path, {
+        method: 'delete',
+        body: JSON.stringify(data)
+      }));
     } catch (e) {
       return Promise.reject(e);
     }
   };
+
+  return RestClient;
+}();
+
+var Loading = function Loading(_ref) {
+  var rest = _extends({}, _ref);
+
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: "progress-line"
+  }, rest));
 };
 
-var get = function get(setState, Ctx) {
-  return function (endpoint) {
-    try {
-      setState({
-        loading: true
-      });
-      var path = endpoint ? "" + Ctx.path + endpoint : Ctx.path;
-      return Promise.resolve(Ctx.client.get(path)).then(function (req) {
-        return Promise.resolve(req.json()).then(function (data) {
-          setState({
-            loading: false,
-            result: data,
-            response: req
-          });
-          return data;
-        });
+var Tag = function Tag(_ref) {
+  var name = _ref.name,
+      onRemove = _ref.onRemove,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'is-medium' : _ref$size,
+      _ref$color = _ref.color,
+      color = _ref$color === void 0 ? 'is-warning' : _ref$color;
+  return /*#__PURE__*/React.createElement("span", {
+    className: classnames(['tag', color, size])
+  }, name, onRemove !== undefined && /*#__PURE__*/React.createElement("button", {
+    className: "delete is-small",
+    onClick: function onClick() {
+      return onRemove();
+    }
+  }));
+};
+
+function Delete(_ref) {
+  var onClick = _ref.onClick,
+      className = _ref.className,
+      children = _ref.children;
+  return /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: onClick,
+    className: "delete " + className,
+    "data-test": "btnDeleteTest"
+  }, children);
+}
+
+function Table(_ref) {
+  var headers = _ref.headers,
+      children = _ref.children,
+      className = _ref.className;
+  className = className ? className.split(' ') : ' is-full is-fullwidth is-narrow'.split(' ');
+  return /*#__PURE__*/React.createElement("table", {
+    className: classnames(['table'].concat(className))
+  }, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, headers && headers.map(function (item, idx) {
+    return /*#__PURE__*/React.createElement("th", {
+      key: item + idx
+    }, item);
+  }))), /*#__PURE__*/React.createElement("tbody", null, children));
+}
+
+function Notification(_ref) {
+  var _ref$isColor = _ref.isColor,
+      isColor = _ref$isColor === void 0 ? '' : _ref$isColor,
+      children = _ref.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: 'notification is-' + isColor,
+    "data-test": "notificationTest"
+  }, children);
+}
+
+// https://github.com/molefrog/wouter
+
+var setURLParams = function setURLParams(p) {
+  return window.history['pushState'](0, 0, (window.history.pathname || '') + '?' + p.toString().replace(/%2F/g, '/'));
+};
+
+var clean = function clean(to) {
+  var current = new URLSearchParams();
+  Object.keys(to).forEach(function (_key) {
+    return current.set(_key, to[_key]);
+  });
+  setURLParams(current);
+};
+
+var useLocation = function useLocation() {
+  var _useState = useState(currentSearchParams()),
+      path = _useState[0],
+      update = _useState[1];
+
+  var prevPath = useRef(path);
+  useEffect(function () {
+    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.
+
+    var checkForUpdates = function checkForUpdates() {
+      var pathname = currentSearchParams();
+      prevPath.current !== pathname && update(prevPath.current = pathname);
+    };
+
+    var events = ['popstate', 'pushState', 'replaceState'];
+    events.map(function (e) {
+      return 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 function () {
+      return events.map(function (e) {
+        return window.removeEventListener(e, checkForUpdates);
       });
-    } catch (e) {
-      return Promise.reject(e);
+    };
+  }, []); // 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.
+
+  var navigate = useCallback(function (to, replace) {
+    if (replace) {
+      clean(to);
+      return;
     }
-  };
+
+    var current = new URLSearchParams(path.toString());
+    Object.keys(to).forEach(function (_key) {
+      return current.set(_key, to[_key]);
+    });
+    setURLParams(current);
+  }, [path]);
+  var remove = useCallback(function (param) {
+    var current = new URLSearchParams(path.toString());
+    current.delete(param);
+    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
+
+var patched = 0;
+
+var patchHistoryEvents = function patchHistoryEvents() {
+  if (patched) return;
+  ['pushState', 'replaceState'].map(function (type) {
+    var original = window.history[type];
+
+    window.history[type] = function () {
+      var result = original.apply(this, arguments);
+      var event = new Event(type);
+      event.arguments = arguments;
+      dispatchEvent(event);
+      return result;
+    };
+  });
+  return patched = 1;
 };
 
-function useCrudContext() {
-  var Ctx = useTraversal();
-
-  var _useSetState = useSetState(initial),
-      state = _useSetState[0],
-      setState = _useSetState[1];
+var currentSearchParams = function currentSearchParams(path) {
+  if (path === void 0) {
+    path = window.location.search;
+  }
 
-  return _extends({}, state, {
-    Ctx: Ctx,
-    patch: patch(setState, Ctx),
-    del: del(setState, Ctx),
-    post: post(setState, Ctx),
-    get: get(setState, Ctx)
-  });
-}
+  return new URLSearchParams(path);
+};
 
-function AddItem(props) {
-  var doSubmit = function doSubmit(data) {
-    try {
-      var form = Object.assign({}, {
-        '@type': type
-      }, data.formData ? data.formData : data);
-      return Promise.resolve(post(form)).then(function (_ref) {
-        var isError = _ref.isError,
-            errorMessage = _ref.errorMessage;
+function Link(_ref) {
+  var aRef = _ref.aRef,
+      model = _ref.model,
+      children = _ref.children,
+      props = _objectWithoutPropertiesLoose(_ref, ["aRef", "model", "children"]);
 
-        if (!isError) {
-          Ctx.flash('Content created!', 'success');
-        } else {
-          Ctx.flash("An error has ocurred: " + errorMessage, 'danger');
-        }
+  var _useLocation = useLocation(),
+      path = _useLocation[0],
+      navigate = _useLocation[1];
 
-        Ctx.cancelAction();
-        Ctx.refresh();
-      });
-    } catch (e) {
-      return Promise.reject(e);
-    }
+  var aStyle = {
+    textDecoration: 'none',
+    color: 'currentColor'
   };
 
-  var Ctx = useTraversal();
+  function onClick(e) {
+    e.stopPropagation();
+    if (actAsLink(e)) return;
+    e.preventDefault();
+    navigate({
+      path: model.path
+    }, true);
+    if (props.onClick) props.onClick(e);
+  }
 
-  var _useCrudContext = useCrudContext(),
-      post = _useCrudContext.post,
-      loading = _useCrudContext.loading;
+  return /*#__PURE__*/React.createElement("a", _extends({}, props, {
+    ref: aRef,
+    href: "?" + path + model.id + "/",
+    style: aStyle,
+    onClick: onClick
+  }), children);
+}
 
-  var type = props.type;
-  var getForm = Ctx.registry.getForm;
-  var Form = getForm(type);
+function actAsLink(e) {
+  return e.ctrlKey || e.metaKey || e.altKey || e.shiftKey || e.button !== 0;
+}
 
-  var setActive = function setActive() {
-    Ctx.cancelAction();
-  };
+function TdLink(_ref) {
+  var model = _ref.model,
+      children = _ref.children,
+      props = _objectWithoutPropertiesLoose(_ref, ["model", "children"]);
 
-  return /*#__PURE__*/React.createElement(Modal, {
-    isActive: true,
-    setActive: setActive
-  }, /*#__PURE__*/React.createElement(Form, {
-    loading: loading,
-    onSubmit: doSubmit,
-    onError: function onError(err) {
-      return console.log(err);
-    },
-    actionName: 'Add ' + type,
-    title: 'Add ' + type,
-    type: type,
-    dataTest: "formAdd" + type + "Test"
-  }));
+  var link = useRef();
+
+  function onClick() {
+    link.current.click();
+  }
+
+  return /*#__PURE__*/React.createElement("td", _extends({}, props, {
+    onClick: onClick
+  }), /*#__PURE__*/React.createElement(Link, {
+    model: model,
+    aRef: link
+  }, children));
 }
 
-var Permissions = ['guillotina.AddContent', 'guillotina.ModifyContent', 'guillotina.ViewContent', 'guillotina.DeleteContent', 'guillotina.AccessContent', 'guillotina.SeePermissions', 'guillotina.ChangePermissions', 'guillotina.MoveContent', 'guillotina.DuplicateContent', 'guillotina.ReadConfiguration', 'guillotina.RegisterConfigurations', 'guillotina.WriteConfiguration', 'guillotina.ManageAddons', 'guillotina.swagger.View'];
-var Config = {
-  DisabledTypes: ['UserManager', 'GroupManager'],
-  PageSize: 10,
-  DelayActions: 200,
-  Permissions: Permissions,
-  SearchEngine: 'PostreSQL' // Elasticsearch
+var SEP = '=';
+var DEFAULT_FIELD = 'title__in';
+var CLEANER = '||';
+function parser(qs, defaultField) {
+  if (defaultField === void 0) {
+    defaultField = DEFAULT_FIELD;
+  }
 
-};
-var calculated = Object.assign({}, Config);
+  var lastKey = undefined;
+  qs.trim();
 
-var addConfig = function addConfig(additional, original) {
-  var rest = Object.assign({}, original);
-  Object.keys(additional).forEach(function (item) {
-    if (typeof Config[item] === 'object' && Array.isArray(Config[item])) {
-      rest[item] = [].concat(Config[item], additional[item]);
-    } else if (typeof Config[item] === 'object') {
-      rest[item] = Object.assign({}, Config[item], additional[item]);
-    } else {
-      rest[item] = additional[item];
+  if (qs.includes('"')) {
+    qs = qs.replace(/"(\w+) (\w+)"/, "$1" + CLEANER + "$2");
+  }
+
+  qs = qs.split(' ');
+  return qs.map(function (part) {
+    if (part.includes(CLEANER)) {
+      part = part.replace('||', ' ');
+    }
+
+    if (!part.includes(SEP)) {
+      return !lastKey ? [defaultField, part] : [lastKey, part];
     }
+
+    var _part$split = part.split(SEP),
+        key = _part$split[0],
+        val = _part$split[1];
+
+    lastKey = key;
+    return [key, val];
   });
-  return rest;
-};
+}
+function buildQs(parsedQuery) {
+  return parsedQuery.map(function (_ref) {
+    var key = _ref[0],
+        val = _ref[1];
+    return encodeURIComponent(key) + "=" + encodeURIComponent(val);
+  }).join('&');
+}
 
-function useConfig(cfg) {
-  var ref = React.useRef();
+var cacheTypes = {};
+var cacheSchemas = {};
+var GuillotinaClient = /*#__PURE__*/function () {
+  function GuillotinaClient(rest, pathContainsContainer) {
+    var _this = this;
 
-  if (cfg && !ref.current) {
-    console.log('cfg', cfg);
-    calculated = addConfig(cfg, calculated);
-    ref.current = calculated;
-  } // if (cfg && !ref.current) {
-  //   ref.current = addConfig(cfg, ref.current);
-  //   calculated = ref.current
-  //   console.log("Current config", cfg)
-  // }
+    this.getContainerFromPath = function (path) {
+      if (_this.pathContainsContainer) {
+        if (path.startsWith('/')) {
+          path = path.substring(1);
+        }
 
+        var parts = path.split('/');
+        return parts[0] + "/" + parts[1] + "/";
+      }
 
-  return calculated;
-}
+      return '';
+    };
 
-var getId = function getId(item) {
-  if (item['@id']) {
-    return item['@id'];
+    this.clearContainerFromPath = function (path) {
+      if (_this.pathContainsContainer) {
+        return "/" + _this.cleanPath(path);
+      }
+
+      return path;
+    };
+
+    this.rest = rest;
+    this.pathContainsContainer = pathContainsContainer;
   }
 
-  return item['@absolute_url'];
-};
+  var _proto = GuillotinaClient.prototype;
 
-function RemoveItems(props) {
-  var removeItems = function removeItems() {
+  _proto.getContext = function getContext(path) {
     try {
-      var errors = [];
-      setLoading(true);
-      var actions = items.map(function (item) {
-        try {
-          console.log(item);
-          return Promise.resolve(Ctx.client.delete(getId(item))).then(function (res) {
-            var _temp = function () {
-              if (!res.ok) {
-                return Promise.resolve(res.json()).then(function (err) {
-                  errors.push(err);
-                });
-              }
-            }();
+      var _this3 = this;
 
-            if (_temp && _temp.then) return _temp.then(function () {});
-          });
-        } catch (e) {
-          return Promise.reject(e);
-        }
-      }); // this sleep is here, to let elasticsearch, wait for
-      // index our operations... (will work 99% of use cases)
+      switch (path) {
+        case '/':
+          return Promise.resolve(_this3.rest.get(''));
 
-      actions.push(sleep(cfg.DelayActions));
-      return Promise.resolve(Promise.all(actions)).then(function () {
-        if (errors.length === 0) {
-          Ctx.flash("Items removed!", 'success');
-          Ctx.refresh();
-        } else {
-          var errorstr = errors.map(function (err) {
-            return JSON.stringify(err);
-          }).join('\n');
-          Ctx.flash("Something went wrong!! " + errorstr, 'danger');
-        }
+        default:
+          if (path.startsWith('/')) {
+            path = path.substring(1);
+          }
 
-        setLoading(false);
-        Ctx.cancelAction();
-      });
+          return Promise.resolve(_this3.rest.get(path));
+      }
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+
+  _proto.get = function get(path) {
+    try {
+      var _this5 = this;
+
+      if (path.startsWith('/')) {
+        path = path.slice(1);
+      }
+
+      return Promise.resolve(_this5.rest.get(path));
     } catch (e) {
       return Promise.reject(e);
     }
   };
 
-  var Ctx = useTraversal();
-  var cfg = useConfig();
+  _proto.getQueryParamsPostresql = function getQueryParamsPostresql(_ref) {
+    var _ref$start = _ref.start,
+        start = _ref$start === void 0 ? 0 : _ref$start,
+        _ref$pageSize = _ref.pageSize,
+        pageSize = _ref$pageSize === void 0 ? 10 : _ref$pageSize,
+        _ref$withDepth = _ref.withDepth,
+        withDepth = _ref$withDepth === void 0 ? true : _ref$withDepth;
+    var result = [];
+    result = [].concat(parser(start.toString(), 'b_start'), parser(pageSize.toString(), 'b_size'));
 
-  var _React$useState = React.useState(false),
-      loading = _React$useState[0],
-      setLoading = _React$useState[1];
+    if (withDepth) {
+      var _parser;
 
-  var _props$items = props.items,
-      items = _props$items === void 0 ? [] : _props$items;
-  var last = items[items.length - 1]['@name'];
-  var itemsNames = items.map(function (item) {
-    return item['@name'];
-  }).join(', ').replace(", " + last, " and " + last);
-  return /*#__PURE__*/React.createElement(Confirm, {
-    loading: loading,
-    onCancel: function onCancel() {
-      return Ctx.cancelAction();
-    },
-    onConfirm: removeItems,
-    message: "Are you sure to remove: " + itemsNames + "?"
-  });
-}
+      result = [].concat(result, (_parser = parser('1', 'depth')) != null ? _parser : []);
+    }
 
-var Checkbox = function Checkbox(_ref) {
-  var id = _ref.id,
-      className = _ref.className,
-      classNameInput = _ref.classNameInput,
-      loading = _ref.loading,
-      disabled = _ref.disabled,
-      _ref$indeterminate = _ref.indeterminate,
-      indeterminate = _ref$indeterminate === void 0 ? false : _ref$indeterminate,
-      _ref$value = _ref.value,
-      value = _ref$value === void 0 ? false : _ref$value,
-      children = _ref.children,
-      placeholder = _ref.placeholder,
-      onChange = _ref.onChange,
-      dataTest = _ref.dataTest,
-      rest = _objectWithoutPropertiesLoose(_ref, ["id", "className", "classNameInput", "loading", "disabled", "indeterminate", "value", "color", "backgroundColor", "borderColor", "children", "placeholder", "onChange", "dataTest"]);
+    return result;
+  };
 
-  var inputRef = useRef(null);
+  _proto.getQueryParamsElasticsearch = function getQueryParamsElasticsearch(_ref2) {
+    var _ref2$start = _ref2.start,
+        start = _ref2$start === void 0 ? 0 : _ref2$start,
+        _ref2$pageSize = _ref2.pageSize,
+        pageSize = _ref2$pageSize === void 0 ? 10 : _ref2$pageSize,
+        path = _ref2.path,
+        _ref2$withDepth = _ref2.withDepth,
+        withDepth = _ref2$withDepth === void 0 ? true : _ref2$withDepth;
+    var result = [];
+    var containerPath = this.getContainerFromPath(path);
 
-  var _React$useState = React.useState(value),
-      state = _React$useState[0],
-      setState = _React$useState[1];
+    if (containerPath.startsWith('/')) {
+      containerPath = containerPath.slice(1);
+    }
 
-  useEffect(function () {
-    if (inputRef.current) {
-      inputRef.current.indeterminate = indeterminate;
+    var objectPath = path.replace(containerPath, '');
+
+    if (objectPath.endsWith('/')) {
+      objectPath = objectPath.slice(0, -1);
     }
-  }, [indeterminate]);
 
-  var updateState = function updateState(ev) {
-    setState(ev.target.checked);
-    onChange(ev.target.checked);
+    result = [].concat(parser(start.toString(), '_from'), parser(pageSize.toString(), 'size'));
+
+    if (withDepth) {
+      var _parser2;
+
+      result = [].concat(result, (_parser2 = parser('1', 'depth')) != null ? _parser2 : []);
+    }
+
+    if (objectPath !== '') {
+      result = [].concat(result, parser(objectPath, 'path__wildcard'));
+    }
+
+    return result;
   };
 
-  return /*#__PURE__*/React.createElement("div", {
-    className: "field"
-  }, /*#__PURE__*/React.createElement("label", {
-    htmlFor: id,
-    className: classnames(['checkbox', className])
-  }, /*#__PURE__*/React.createElement("input", _extends({
-    ref: inputRef,
-    disabled: disabled || loading,
-    id: id,
-    type: "checkbox",
-    className: classnames(['checkbox', classNameInput]),
-    checked: state,
-    onChange: updateState,
-    "data-test": dataTest
-  }, rest)), children || placeholder));
-};
+  _proto.getItemsColumn = function getItemsColumn() {
+    var smallcss = {
+      width: 25
+    };
+    var mediumcss = {
+      width: 120
+    };
+    return [{
+      label: '',
+      child: function child(m) {
+        return /*#__PURE__*/React.createElement("td", {
+          style: smallcss
+        }, /*#__PURE__*/React.createElement(Icon, {
+          icon: m.icon
+        }));
+      }
+    }, {
+      label: 'type',
+      child: function child(m) {
+        return /*#__PURE__*/React.createElement(TdLink, {
+          style: smallcss,
+          model: m
+        }, /*#__PURE__*/React.createElement("span", {
+          className: "tag"
+        }, m.type));
+      }
+    }, {
+      label: 'id/name',
+      child: function child(m, navigate, search) {
+        return /*#__PURE__*/React.createElement(TdLink, {
+          model: m
+        }, m.name, search && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("span", {
+          className: "is-size-7 tag is-light"
+        }, m.path)));
+      }
+    }, {
+      label: 'created',
+      child: function child(m) {
+        return /*#__PURE__*/React.createElement("td", {
+          style: mediumcss,
+          className: "is-size-7 is-vcentered"
+        }, m.created);
+      }
+    }, {
+      label: 'modified',
+      child: function child(m) {
+        return /*#__PURE__*/React.createElement("td", {
+          style: mediumcss,
+          className: "is-size-7 is-vcentered"
+        }, m.updated);
+      }
+    }];
+  } // BBB API changes. Compat G5 and G6
+  ;
 
-var ErrorZone = function ErrorZone(_ref) {
-  var children = _ref.children,
-      id = _ref.id,
-      className = _ref.className;
-  return /*#__PURE__*/React.createElement("p", {
-    className: classnames(['help is-danger', className]),
-    id: id
-  }, children);
-};
+  _proto.applyCompat = function applyCompat(data) {
+    data.member = data.items;
+    data.items_count = data.items_total;
+    return data;
+  };
 
-ErrorZone.propTypes = {
-  children: PropTypes.node,
-  id: PropTypes.string,
-  className: PropTypes.string
-};
+  _proto.search = function search(path, params, container, prepare) {
+    if (container === void 0) {
+      container = false;
+    }
 
-var applyValidators = function applyValidators(value, validators) {
-  var validation = Array.isArray(validators) ? validators : [validators];
-  var result = true;
-  validation.forEach(function (func) {
-    if (func(value) === false) {
-      result = false;
+    if (prepare === void 0) {
+      prepare = true;
     }
-  });
-  return result;
-};
 
-var useInput = function useInput(onChange, value, validator) {
-  var _React$useState = React.useState({
-    hasError: false,
-    value: value
-  }),
-      state = _React$useState[0],
-      setState = _React$useState[1];
+    try {
+      var _this7 = this;
 
-  var onUpdate = function onUpdate(ev) {
-    var value = ev && ev.target ? ev.target.value : ev ? ev : '';
-    setState({
-      value: value,
-      hasError: false
-    });
-    if (onChange) onChange(value);
+      if (path.startsWith('/')) {
+        path = path.slice(1);
+      }
+
+      if (container) {
+        path = _this7.getContainerFromPath(path);
+      }
+
+      var query = prepare ? toQueryString(params) : params;
+      var url = path + "@search?" + query;
+      return Promise.resolve(_this7.rest.get(url)).then(function (res) {
+        return Promise.resolve(res.json()).then(function (data) {
+          return _this7.applyCompat(data);
+        });
+      });
+    } catch (e) {
+      return Promise.reject(e);
+    }
   };
 
-  var onBlur = function onBlur() {
-    var hasError = applyValidators(state.value, validator) === false;
-    if (hasError) setState({
-      value: state.value,
-      hasError: hasError
-    });
+  _proto.canido = function canido(path, permissions) {
+    try {
+      var _this9 = this;
+
+      if (path.startsWith('/')) {
+        path = path.slice(1);
+      }
+
+      if (Array.isArray(permissions)) {
+        permissions.join(',');
+      }
+
+      var url = path + "@canido?permissions=" + permissions;
+      return Promise.resolve(_this9.rest.get(url));
+    } catch (e) {
+      return Promise.reject(e);
+    }
   };
 
-  var onFocus = function onFocus() {
-    if (state.hasError) {
-      setState({
-        value: state.value,
-        hasError: false
-      });
+  _proto.createObject = function createObject(path, data) {
+    try {
+      var _this11 = this;
+
+      return Promise.resolve(_this11.rest.post(path, data));
+    } catch (e) {
+      return Promise.reject(e);
     }
   };
 
-  React.useEffect(function () {
-    setState({
-      value: value,
-      hasError: false
-    });
-  }, [value]);
-  return {
-    onChange: onUpdate,
-    onFocus: onFocus,
-    onBlur: onBlur,
-    state: state
+  _proto.cleanPath = function cleanPath(path) {
+    var url = path.split('/').slice(3);
+    return "" + url.join('/');
   };
-};
 
-// From github.com/protonmail/proton-shared
+  _proto.delete = function _delete(path, data) {
+    try {
+      var _this13 = this;
 
-/* eslint-disable no-useless-escape */
-var 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;
-var REGEX_URL = /((([A-Za-z]{3,9}:(?:\/\/)?)(?:[\-;:&=\+\$,\w]+@)?[A-Za-z0-9\.\-]+|(?:www\.|[\-;:&=\+\$,\w]+@)[A-Za-z0-9\.\-]+)((?:\/[\+~%\/\.\w\-_]*)?\??(?:[\-\+=&;%@\.\w_]*)#?(?:[\.\!\/\\\w]*))?)/;
-var REGEX_HEX_COLOR = /^#([a-f0-9]{3,4}|[a-f0-9]{4}(?:[a-f0-9]{2}){1,2})\b$/i;
-var REGEX_NUMBER = /^\d+$/;
-var isEmpty = function isEmpty(value) {
-  if (value === void 0) {
-    value = '';
-  }
+      return Promise.resolve(_this13.rest.delete(path, data));
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
 
-  return !value.length;
-};
-var maxLength = function maxLength(value, limit) {
-  if (value === void 0) {
-    value = '';
-  }
+  _proto.create = function create(path, data) {
+    try {
+      var _this15 = this;
 
-  if (limit === void 0) {
-    limit = 0;
-  }
+      if (path.startsWith('/')) {
+        path = path.substring(1);
+      }
 
-  return value.length <= limit;
-};
-var minLength = function minLength(value, limit) {
-  if (value === void 0) {
-    value = '';
-  }
+      return Promise.resolve(_this15.rest.post(path, data));
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
 
-  if (limit === void 0) {
-    limit = 0;
-  }
+  _proto.post = function post(path, data) {
+    try {
+      var _this17 = this;
 
-  return value.length >= limit;
-};
-var isEmail = function isEmail(value) {
-  if (value === void 0) {
-    value = '';
-  }
+      return Promise.resolve(_this17.create(path, data));
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
 
-  return REGEX_EMAIL.test(value);
-};
-var isURL = function isURL(value) {
-  if (value === void 0) {
-    value = '';
-  }
+  _proto.patch = function patch(path, data) {
+    try {
+      var _this19 = this;
 
-  return REGEX_URL.test(value);
-};
-var isHexColor = function isHexColor(value) {
-  if (value === void 0) {
-    value = '';
-  }
+      if (path.startsWith('/')) {
+        path = path.substring(1);
+      }
 
-  return REGEX_HEX_COLOR.test(value);
-};
-var isNumber = function isNumber(value) {
-  if (value === void 0) {
-    value = '';
-  }
+      return Promise.resolve(_this19.rest.patch(path, data));
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
 
-  return REGEX_NUMBER.test(value);
-};
-var notEmpty = function notEmpty(value) {
-  return !!value.length;
-};
+  _proto.upload = function upload(path, file) {
+    try {
+      var _this21 = this;
 
-var noop$2 = function noop() {
-  return true;
-};
-/** @type any */
+      if (path.startsWith('/')) {
+        path = path.substring(1);
+      }
 
+      return Promise.resolve(_this21.rest.upload(path, file));
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
 
-var Input = React.forwardRef(function (_ref, ref) {
-  var icon = _ref.icon,
-      _ref$iconPosition = _ref.iconPosition,
-      iconPosition = _ref$iconPosition === void 0 ? 'has-icons-right' : _ref$iconPosition,
-      error = _ref.error,
-      errorZoneClassName = _ref.errorZoneClassName,
-      _ref$autoComplete = _ref.autoComplete,
-      autoComplete = _ref$autoComplete === void 0 ? 'off' : _ref$autoComplete,
-      _ref$className = _ref.className,
-      className = _ref$className === void 0 ? '' : _ref$className,
-      _ref$widget = _ref.widget,
-      widget = _ref$widget === void 0 ? 'input' : _ref$widget,
-      _ref$type = _ref.type,
-      type = _ref$type === void 0 ? 'text' : _ref$type,
-      _ref$loading = _ref.loading,
-      loading = _ref$loading === void 0 ? false : _ref$loading,
-      _ref$required = _ref.required,
-      required = _ref$required === void 0 ? false : _ref$required,
-      id = _ref.id,
-      placeholder = _ref.placeholder,
-      value = _ref.value,
-      _ref$autofocus = _ref.autofocus,
-      autofocus = _ref$autofocus === void 0 ? false : _ref$autofocus,
-      onChange = _ref.onChange,
-      _ref$validator = _ref.validator,
-      validator = _ref$validator === void 0 ? noop$2 : _ref$validator,
-      errorMessage = _ref.errorMessage,
-      _ref$dataTest = _ref.dataTest,
-      dataTest = _ref$dataTest === void 0 ? 'testInput' : _ref$dataTest,
-      rest = _objectWithoutPropertiesLoose(_ref, ["icon", "iconPosition", "error", "errorZoneClassName", "autoComplete", "className", "widget", "type", "onPressEnter", "isSubmitted", "loading", "required", "id", "placeholder", "value", "autofocus", "onChange", "validator", "errorMessage", "dataTest"]);
+  _proto.download = function download(path) {
+    try {
+      var _this23 = this;
 
-  if (required) {
-    validator = Array.isArray(validator) ? validator.push(notEmpty) : [validator, notEmpty];
-  }
+      if (path.startsWith('/')) {
+        path = path.substring(1);
+      }
 
-  var _useInput = useInput(onChange, value != null ? value : '', validator),
-      state = _useInput.state,
-      handlers = _objectWithoutPropertiesLoose(_useInput, ["state"]);
+      return Promise.resolve(_this23.rest.get(path));
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
 
-  var _useState = useState(generateUID('input')),
-      uid = _useState[0];
+  _proto.getTypeSchema = function getTypeSchema(path, name) {
+    try {
+      var _this25 = this;
 
-  var _useState2 = useState(false),
-      mounted = _useState2[0],
-      setMounted = _useState2[1]; // eslint-disable-next-line
+      var _temp3 = function _temp3() {
+        return cacheSchemas[name];
+      };
 
+      var _temp4 = function () {
+        if (!cacheSchemas[name]) {
+          var url = _this25.getContainerFromPath(path); // todo: handle db case (only addable containers)
 
-  ref = ref || React.useRef();
-  useEffect(function () {
-    setMounted(true);
-  }, []);
-  useEffect(function () {
-    if (autofocus && !error) {
-      ref.current.focus();
+
+          return Promise.resolve(_this25.rest.get(url + "@types/" + name)).then(function (res) {
+            return Promise.resolve(res.json()).then(function (_res$json) {
+              cacheSchemas[name] = _res$json;
+            });
+          });
+        }
+      }();
+
+      return Promise.resolve(_temp4 && _temp4.then ? _temp4.then(_temp3) : _temp3(_temp4));
+    } catch (e) {
+      return Promise.reject(e);
     }
-  }, [mounted, autofocus, ref, error]);
-  var theError = state.hasError ? errorMessage || 'invalid field' : '';
-  var statusClasses = state.hasError ? 'is-danger' : '';
+  };
 
-  var cssControl = function cssControl() {
-    return icon ? ['control', iconPosition] : ['control'];
+  _proto.getAddons = function getAddons(path) {
+    try {
+      var _this27 = this;
+
+      return Promise.resolve(_this27.rest.get(path + "@addons"));
+    } catch (e) {
+      return Promise.reject(e);
+    }
   };
 
-  return /*#__PURE__*/React.createElement("div", {
-    className: "field"
-  }, id && placeholder ? /*#__PURE__*/React.createElement("label", {
-    className: "label",
-    htmlFor: id
-  }, placeholder) : null, /*#__PURE__*/React.createElement("div", {
-    className: classnames(cssControl())
-  }, /*#__PURE__*/React.createElement("input", _extends({
-    className: classnames([widget, className, statusClasses]),
-    "aria-invalid": theError,
-    "aria-describedby": uid,
-    id: id,
-    ref: ref,
-    type: type,
-    value: state.value,
-    placeholder: placeholder,
-    autoComplete: autoComplete,
-    disabled: loading || rest.disabled,
-    required: required,
-    "data-test": dataTest
-  }, handlers, rest)), icon && icon), /*#__PURE__*/React.createElement(ErrorZone, {
-    className: errorZoneClassName,
-    id: uid
-  }, state.hasError ? theError : ''));
-});
-Input.propTypes = {
-  icon: PropTypes.node,
-  iconPosition: PropTypes.arrayOf(PropTypes.oneOf(['has-icons-left', 'has-icons-right', ''])),
-  error: PropTypes.string,
-  errorZoneClassName: PropTypes.string,
-  autoComplete: PropTypes.string,
-  autoFocus: PropTypes.bool,
-  className: PropTypes.string,
-  disabled: PropTypes.bool,
-  loading: PropTypes.bool,
-  isSubmitted: PropTypes.bool,
-  id: PropTypes.string,
-  name: PropTypes.string,
-  onChange: PropTypes.func,
-  onKeyDown: PropTypes.func,
-  onKeyUp: PropTypes.func,
-  onPressEnter: PropTypes.func,
-  placeholder: PropTypes.string,
-  readOnly: PropTypes.bool,
-  required: PropTypes.bool,
-  type: PropTypes.string,
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool])
-};
+  _proto.installAddon = function installAddon(path, key) {
+    try {
+      var _this29 = this;
+
+      return Promise.resolve(_this29.rest.post(path + "@addons", {
+        id: key
+      }));
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
 
-var EmailInput = function EmailInput(_ref) {
-  var _ref$value = _ref.value,
-      value = _ref$value === void 0 ? '' : _ref$value,
-      dataTest = _ref.dataTest,
-      rest = _objectWithoutPropertiesLoose(_ref, ["value", "dataTest"]);
+  _proto.removeAddon = function removeAddon(path, key) {
+    try {
+      var _this31 = this;
 
-  return /*#__PURE__*/React.createElement(Input, _extends({
-    type: "email",
-    validator: isEmail,
-    errorMessage: "Email address invalid",
-    value: value,
-    "data-test": dataTest,
-    icon: /*#__PURE__*/React.createElement(Icon, {
-      icon: "fas fa-envelope"
-    })
-  }, rest));
-};
+      return Promise.resolve(_this31.rest.delete(path + "@addons", {
+        id: key
+      }));
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
 
-var Form = function Form(_ref) {
-  var children = _ref.children,
-      _ref$className = _ref.className,
-      className = _ref$className === void 0 ? '' : _ref$className,
-      _ref$onSubmit = _ref.onSubmit,
-      onSubmit = _ref$onSubmit === void 0 ? noop : _ref$onSubmit,
-      _ref$onReset = _ref.onReset,
-      onReset = _ref$onReset === void 0 ? noop : _ref$onReset,
-      _ref$autoComplete = _ref.autoComplete,
-      autoComplete = _ref$autoComplete === void 0 ? 'off' : _ref$autoComplete,
-      title = _ref.title,
-      error = _ref.error,
-      dataTest = _ref.dataTest,
-      rest = _objectWithoutPropertiesLoose(_ref, ["children", "className", "onSubmit", "onReset", "autoComplete", "title", "error", "dataTest"]);
+  _proto.getGroups = function getGroups(path) {
+    try {
+      var _this33 = this;
 
-  var handleSubmit = function handleSubmit(event) {
-    event.preventDefault();
-    onSubmit(event);
+      var endpoint = _this33.getContainerFromPath(path) + "@groups";
+      return Promise.resolve(_this33.rest.get(endpoint));
+    } catch (e) {
+      return Promise.reject(e);
+    }
   };
 
-  return /*#__PURE__*/React.createElement("div", {
-    "data-test": dataTest
-  }, title && /*#__PURE__*/React.createElement("div", {
-    className: "level"
-  }, /*#__PURE__*/React.createElement("h1", {
-    className: "title is-size-4"
-  }, title)), error && /*#__PURE__*/React.createElement("div", {
-    className: "notification is-danger"
-  }, error), /*#__PURE__*/React.createElement("form", _extends({
-    onSubmit: handleSubmit,
-    onReset: onReset,
-    autoComplete: autoComplete,
-    className: classnames(['form', className])
-  }, rest), children));
-};
-Form.propTypes = {
-  children: PropTypes.node.isRequired,
-  className: PropTypes.string,
-  onSubmit: PropTypes.func,
-  onReset: PropTypes.func,
-  autoComplete: PropTypes.string
-};
+  _proto.getUsers = function getUsers(path) {
+    try {
+      var _this35 = this;
 
-var PasswordInput = function PasswordInput(_ref) {
-  var _ref$value = _ref.value,
-      value = _ref$value === void 0 ? '' : _ref$value,
-      rest = _objectWithoutPropertiesLoose(_ref, ["value"]);
+      var endpoint = _this35.getContainerFromPath(path) + "@users";
+      return Promise.resolve(_this35.rest.get(endpoint));
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
 
-  return /*#__PURE__*/React.createElement(Input, _extends({
-    value: value,
-    type: "password"
-  }, rest));
-};
+  _proto.getPrincipals = function getPrincipals(path) {
+    try {
+      var _this37 = this;
 
-var formComponents = {
-  string: Input,
-  password: PasswordInput,
-  boolean: Checkbox,
-  email: EmailInput
-};
-function FormBuilder(_ref) {
-  var schema = _ref.schema,
-      formData = _ref.formData,
-      onSubmit = _ref.onSubmit,
-      actionName = _ref.actionName,
-      children = _ref.children,
-      _ref$exclude = _ref.exclude,
-      exclude = _ref$exclude === void 0 ? [] : _ref$exclude,
-      _ref$remotes = _ref.remotes,
-      remotes = _ref$remotes === void 0 ? [] : _ref$remotes,
-      _ref$submitButton = _ref.submitButton,
-      submitButton = _ref$submitButton === void 0 ? true : _ref$submitButton,
-      rest = _objectWithoutPropertiesLoose(_ref, ["schema", "formData", "title", "onSubmit", "actionName", "children", "exclude", "remotes", "submitButton"]);
+      var groups = _this37.getGroups(path);
 
-  var ref = React.useRef();
-  var properties = schema.properties,
-      required = schema.required;
-  var values = Object.assign({}, formData || {}); // build initial state
+      var users = _this37.getUsers(path);
 
-  var initialState = {};
-  var fields = Object.keys(properties).filter(function (x) {
-    return !exclude.includes(x);
-  });
-  fields.forEach(function (element) {
-    initialState[element] = values[element] || undefined;
-  }); // Register remotes
+      return Promise.resolve(Promise.all([groups, users])).then(function (_ref3) {
+        var gr = _ref3[0],
+            usr = _ref3[1];
 
-  if (!ref.current) {
-    ref.current = {};
-    Object.keys(remotes).forEach(function (item) {
-      return ref.current[item] = remotes[item];
-    });
-  } else {
-    // apply remote changes
-    Object.keys(remotes).forEach(function (key) {
-      if (JSON.stringify(ref.current[key]) !== JSON.stringify(remotes[key])) {
-        ref.current[key] = remotes[key];
-      }
-    });
-  }
+        function _temp6(_gr$json) {
+          function _temp5(_usr$json) {
+            return {
+              groups: _gr$json,
+              users: _usr$json
+            };
+          }
 
-  ref.current = ref.current || {};
+          var _usr$ok = usr.ok;
+          return _usr$ok ? Promise.resolve(usr.json()).then(_temp5) : _temp5([]);
+        }
 
-  var onUpdate = function onUpdate(field) {
-    return function (ev) {
-      ref.current[field] = ev.target ? ev.target.value : ev.value || ev;
-    };
+        var _gr$ok = gr.ok;
+        return _gr$ok ? Promise.resolve(gr.json()).then(_temp6) : _temp6([]);
+      });
+    } catch (e) {
+      return Promise.reject(e);
+    }
   };
 
-  var GetTag = function GetTag(_ref2) {
-    var field = _ref2.field;
-    var Tag = formComponents[properties[field].widget || properties[field].type];
-    var props = {
-      label: properties[field].title,
-      value: initialState[field],
-      onChange: onUpdate(field),
-      placeholder: properties[field].title || '',
-      id: generateUID(),
-      dataTest: field + "TestInput"
-    };
+  _proto.getRoles = function getRoles(path) {
+    try {
+      var _this39 = this;
 
-    if (required.includes(field)) {
-      props.required = true;
-      props.placeholder += ' *';
+      var endpoint = _this39.getContainerFromPath(path) + "@available-roles";
+      return Promise.resolve(_this39.rest.get(endpoint));
+    } catch (e) {
+      return Promise.reject(e);
     }
-
-    Tag.displayName = field + "Field";
-    return /*#__PURE__*/React.createElement(Tag, props);
   };
 
-  var children_ = React.Children.map(children, function (child) {
-    return React.cloneElement(child, {
-      onChange: onUpdate
-    });
-  });
+  _proto.getAllPermissions = function getAllPermissions(path) {
+    try {
+      var _this41 = this;
 
-  var changes = function changes() {
-    onSubmit(ref.current, values);
-  };
+      // paths used to query the API always has to start without a "/"
+      if (path.startsWith('/')) {
+        path = path.slice(1);
+      }
 
-  return /*#__PURE__*/React.createElement(Form, _extends({
-    onSubmit: changes
-  }, rest), fields.map(function (field) {
-    return /*#__PURE__*/React.createElement(GetTag, {
-      field: field,
-      key: field
-    });
-  }), children_, submitButton && /*#__PURE__*/React.createElement(Button, null, actionName));
-}
+      return Promise.resolve(_this41.rest.get(path + '@all_permissions')).then(function (req) {
+        return Promise.resolve(req.json()).then(function (resp) {
+          var permissions = Array.from(new Set(extractPermissions(resp)));
+          return permissions;
+        });
+      });
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
 
-/** @type any */
+  _proto.getTypes = function getTypes(path) {
+    try {
+      var _this43 = this;
 
-var Select = React.forwardRef(function (_ref, ref) {
-  var options = _ref.options,
-      error = _ref.error,
-      errorZoneClassName = _ref.errorZoneClassName,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 1 : _ref$size,
-      placeholder = _ref.placeholder,
-      id = _ref.id,
-      _ref$className = _ref.className,
-      className = _ref$className === void 0 ? '' : _ref$className,
-      _ref$classWrap = _ref.classWrap,
-      classWrap = _ref$classWrap === void 0 ? '' : _ref$classWrap,
-      _ref$multiple = _ref.multiple,
-      multiple = _ref$multiple === void 0 ? false : _ref$multiple,
-      _ref$loading = _ref.loading,
-      loading = _ref$loading === void 0 ? false : _ref$loading,
-      onChange = _ref.onChange,
-      _ref$appendDefault = _ref.appendDefault,
-      appendDefault = _ref$appendDefault === void 0 ? false : _ref$appendDefault,
-      _ref$style = _ref.style,
-      style = _ref$style === void 0 ? {} : _ref$style,
-      dataTest = _ref.dataTest,
-      rest = _objectWithoutPropertiesLoose(_ref, ["options", "error", "errorZoneClassName", "size", "placeholder", "id", "className", "classWrap", "multiple", "loading", "isSubmitted", "onChange", "appendDefault", "style", "dataTest"]);
+      var _temp10 = function _temp10() {
+        return cacheTypes[path];
+      };
 
-  var _useState = useState(generateUID('select')),
-      uid = _useState[0];
+      if (path.startsWith('/')) {
+        path = path.slice(1);
+      }
 
-  var onUpdate = function onUpdate(ev) {
-    if (ev.target.value === '') {
-      onChange({
-        target: {
-          value: undefined
+      var _temp11 = function () {
+        if (!cacheTypes[path]) {
+          return Promise.resolve(_this43.rest.get(path + '@addable-types')).then(function (types) {
+            var _temp7 = function () {
+              if (types.status === 401 || types.status === 404) {
+                cacheTypes[path] = [];
+              } else {
+                return Promise.resolve(types.json()).then(function (res) {
+                  cacheTypes[path] = res;
+                });
+              }
+            }();
+
+            if (_temp7 && _temp7.then) return _temp7.then(function () {});
+          });
         }
-      });
-    } else {
-      onChange(ev);
+      }();
+
+      return Promise.resolve(_temp11 && _temp11.then ? _temp11.then(_temp10) : _temp10(_temp11));
+    } catch (e) {
+      return Promise.reject(e);
     }
   };
 
-  if (appendDefault) {
-    options = [{
-      text: 'Choose..',
-      value: ''
-    }].concat(options);
+  return GuillotinaClient;
+}();
+function getClient(url, container, auth) {
+  return new GuillotinaClient(new RestClient(url, container, auth), container === '/');
+}
+var lightFileReader = function lightFileReader(file) {
+  try {
+    return Promise.resolve(new Promise(function (resolve) {
+      var reader = new FileReader();
+      reader.readAsArrayBuffer(file);
+
+      reader.onloadend = function (e) {
+        var fileData = e.target.result;
+        resolve({
+          filename: file.name.normalize('NFD').replace(/[\u0300-\u036f]/g, ''),
+          data: fileData,
+          'content-type': file.type
+        });
+      };
+    }));
+  } catch (e) {
+    return Promise.reject(e);
   }
+};
 
-  var statusClasses = error ? 'is-danger' : '';
-  var cssWrap = ['select', statusClasses, multiple ? 'is-multiple' : '', classWrap];
-  return /*#__PURE__*/React.createElement("div", {
-    className: "field"
-  }, id && placeholder ? /*#__PURE__*/React.createElement("label", {
-    className: "label",
-    htmlFor: id
-  }, placeholder) : null, /*#__PURE__*/React.createElement("div", {
-    className: classnames(cssWrap)
-  }, /*#__PURE__*/React.createElement("select", _extends({
-    className: classnames(['', className]),
-    size: size,
-    multiple: multiple,
-    disabled: loading || rest.disabled,
-    onChange: onUpdate
-  }, rest, {
-    ref: ref,
-    style: style,
-    "data-test": dataTest
-  }), options.map(function (_ref2, index) {
-    var text = _ref2.text,
-        rest = _objectWithoutPropertiesLoose(_ref2, ["text"]);
+var extractPermissions = function extractPermissions(data) {
+  var result = [];
 
-    return /*#__PURE__*/React.createElement("option", _extends({
-      key: index.toString()
-    }, rest), text);
-  }))), error && /*#__PURE__*/React.createElement(ErrorZone, {
-    className: errorZoneClassName,
-    id: uid
-  }, error ? error : ''));
-});
-Select.propTypes = {
-  error: PropTypes.string,
-  disabled: PropTypes.bool,
-  loading: PropTypes.bool,
-  isSubmitted: PropTypes.bool,
-  size: PropTypes.number,
-  onChange: PropTypes.func,
-  options: PropTypes.arrayOf(PropTypes.object),
-  multiple: PropTypes.bool,
-  className: PropTypes.string
+  if (typeof data !== 'object') ; else if (!Array.isArray(data) && data.permission) {
+    result = result.concat([data.permission]);
+  } else if (!Array.isArray(data)) {
+    Object.keys(data).map(function (key) {
+      return result = result.concat(extractPermissions(data[key]));
+    });
+  } else if (Array.isArray(data)) {
+    data.map(function (item) {
+      return result = result.concat(extractPermissions(item));
+    });
+  }
+
+  return result;
 };
 
 function FileUpload(_ref) {
@@ -2792,7 +2820,7 @@ function Dropdown(_ref) {
       // eslint-disable-next-line jsx-a11y/anchor-is-valid
       React.createElement("a", {
         className: disabled ? 'dropdown-item is-active' : 'dropdown-item',
-        "data-test": "dropdownItemTest-" + option.text.toLowerCase(),
+        "data-test": "dropdownItemTest-" + option.value.toLowerCase(),
         key: option.text,
         onClick: disabled ? undefined : function () {
           return onChange(option.value);
@@ -2808,61 +2836,6 @@ function Dropdown(_ref) {
   }))));
 }
 
-var plain = ['string', 'number', 'boolean'];
-function RenderField(_ref) {
-  var value = _ref.value,
-      Widget = _ref.Widget;
-  if (value === null || value === undefined) return '';
-
-  if (Widget) {
-    return /*#__PURE__*/React.createElement(Widget, {
-      value: value
-    });
-  }
-
-  var type = typeof value;
-
-  if (plain.includes(type)) {
-    return value;
-  }
-
-  if (type === 'object') {
-    if (Array.isArray(value)) {
-      return value.map(function (item) {
-        return /*#__PURE__*/React.createElement("div", {
-          key: item
-        }, /*#__PURE__*/React.createElement(RenderField, {
-          value: item
-        }));
-      });
-    }
-
-    return Object.keys(value).map(function (key) {
-      return /*#__PURE__*/React.createElement(FieldValue, {
-        field: key,
-        value: value[key],
-        key: key
-      });
-    });
-  }
-
-  return /*#__PURE__*/React.createElement("p", null, "No render for ", JSON.stringify(value));
-}
-
-var FieldValue = function FieldValue(_ref2) {
-  var field = _ref2.field,
-      value = _ref2.value;
-  return /*#__PURE__*/React.createElement("div", {
-    className: "field"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "label"
-  }, field), /*#__PURE__*/React.createElement("div", {
-    className: "value"
-  }, /*#__PURE__*/React.createElement(RenderField, {
-    value: value
-  })));
-};
-
 var formatDate = function formatDate(str) {
   var d = new Date(str);
   var minutes = d.getMinutes() < 10 ? "0" + d.getMinutes() : d.getMinutes();
@@ -2892,86 +2865,6 @@ function getNewId(id) {
   });
 }
 
-var DownloadField = function DownloadField(_ref) {
-  var value = _ref.value;
-  var Ctx = useTraversal();
-  var data = value.data,
-      field = value.field;
-
-  var getField = function getField(downloadFile) {
-    try {
-      var endpoint = Ctx.path + "@download/" + field;
-      return Promise.resolve(Ctx.client.download(endpoint)).then(function (res) {
-        return Promise.resolve(res.blob()).then(function (text) {
-          var blob = new Blob([text], {
-            type: data.content_type
-          });
-          var url = window.URL.createObjectURL(blob); // Create blob link to download
-
-          var link = document.createElement('a');
-          link.href = url;
-
-          if (downloadFile) {
-            link.setAttribute('download', "" + data.filename);
-          } else {
-            link.setAttribute('target', "_blank");
-          }
-
-          document.body.appendChild(link);
-          link.click();
-          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);
-        });
-      });
-    } catch (e) {
-      return Promise.reject(e);
-    }
-  };
-
-  return /*#__PURE__*/createElement("div", {
-    className: "field"
-  }, /*#__PURE__*/createElement("div", {
-    className: "label"
-  }, data.filename), /*#__PURE__*/createElement("div", {
-    className: "columns"
-  }, /*#__PURE__*/createElement("div", {
-    className: "column"
-  }, /*#__PURE__*/createElement("button", {
-    className: "button is-small is-primary level-left",
-    onClick: function onClick(event) {
-      try {
-        event.preventDefault();
-        event.stopPropagation();
-        getField(false);
-        return Promise.resolve();
-      } catch (e) {
-        return Promise.reject(e);
-      }
-    }
-  }, "Open")), /*#__PURE__*/createElement("div", {
-    className: "column"
-  }, /*#__PURE__*/createElement("button", {
-    className: "button is-small is-primary level-right",
-    onClick: function onClick(event) {
-      try {
-        event.preventDefault();
-        event.stopPropagation();
-        getField(true);
-        return Promise.resolve();
-      } catch (e) {
-        return Promise.reject(e);
-      }
-    }
-  }, "Download"))));
-};
-
-var DEFAULT_VALUE_EDITABLE_FIELD = 'Click to edit';
-var DEFAULT_VALUE_NO_EDITABLE_FIELD = ' -- ';
 function EditableField(_ref) {
   var field = _ref.field,
       value = _ref.value,
@@ -2995,36 +2888,17 @@ function EditableField(_ref) {
       loading = _useCrudContext.loading,
       Ctx = _useCrudContext.Ctx;
 
+  var _useConfig = useConfig(),
+      fieldHaveDeleteButton = _useConfig.fieldHaveDeleteButton;
+
   var EditComponent = Ctx.registry.get('components', 'EditComponent');
+  var RenderFieldComponent = Ctx.registry.get('components', 'RenderFieldComponent');
   useEffect(function () {
     if (isEdit && ref.current) {
       ref.current.focus();
     }
-  });
-  var canModified = modifyContent && !get$1(schema, 'readonly', false);
-  var haveDeleteBtn = (schema == null ? void 0 : schema.widget) === 'file' || (schema == null ? void 0 : schema.widget) === 'select' || (schema == null ? void 0 : schema.type) === 'array';
-
-  var getRenderProps = function getRenderProps() {
-    var renderProps = {
-      value: val != null ? val : modifyContent ? DEFAULT_VALUE_EDITABLE_FIELD : DEFAULT_VALUE_NO_EDITABLE_FIELD
-    };
-
-    if (val && (schema == null ? void 0 : schema.widget) === 'file') {
-      renderProps['value'] = {
-        data: val,
-        field: field
-      };
-      renderProps['Widget'] = DownloadField;
-    } else if ((schema == null ? void 0 : schema.type) === 'boolean') {
-      var _val$toString;
-
-      renderProps['value'] = (_val$toString = val == null ? void 0 : val.toString()) != null ? _val$toString : renderProps['value'];
-    } else if (val && (schema == null ? void 0 : schema.type) === 'datetime') {
-      renderProps['value'] = new Date(val).toLocaleString();
-    }
-
-    return renderProps;
-  };
+  });
+  var canModified = modifyContent && !get$1(schema, 'readonly', false);
 
   var saveField = function saveField(ev) {
     try {
@@ -3121,7 +2995,12 @@ function EditableField(_ref) {
       setEdit(!!canModified);
     },
     "data-test": "editableFieldTest-" + field
-  }, /*#__PURE__*/React.createElement(RenderField, getRenderProps()), canModified && /*#__PURE__*/React.createElement(Icon, {
+  }, /*#__PURE__*/React.createElement(RenderFieldComponent, {
+    schema: schema,
+    field: field,
+    val: val,
+    modifyContent: modifyContent
+  }), canModified && /*#__PURE__*/React.createElement(Icon, {
     icon: "fas fa-edit"
   })), isEdit && /*#__PURE__*/React.createElement("div", {
     className: "field",
@@ -3151,7 +3030,7 @@ function EditableField(_ref) {
       return setEdit(false);
     },
     dataTest: "editableFieldBtnCancelTest"
-  }, "Cancel")), !required && haveDeleteBtn && /*#__PURE__*/React.createElement("div", {
+  }, "Cancel")), !required && fieldHaveDeleteButton(schema) && /*#__PURE__*/React.createElement("div", {
     className: "control"
   }, /*#__PURE__*/React.createElement(Button, {
     className: "is-small is-danger",
@@ -3160,6 +3039,172 @@ function EditableField(_ref) {
   }, "Delete")))));
 }
 
+var DownloadField = function DownloadField(_ref) {
+  var value = _ref.value;
+  var Ctx = useTraversal();
+  var data = value.data,
+      field = value.field;
+
+  var getField = function getField(downloadFile) {
+    try {
+      var endpoint = Ctx.path + "@download/" + field;
+      return Promise.resolve(Ctx.client.download(endpoint)).then(function (res) {
+        return Promise.resolve(res.blob()).then(function (text) {
+          var blob = new Blob([text], {
+            type: data.content_type
+          });
+          var url = window.URL.createObjectURL(blob); // Create blob link to download
+
+          var link = document.createElement('a');
+          link.href = url;
+
+          if (downloadFile) {
+            link.setAttribute('download', "" + data.filename);
+          } else {
+            link.setAttribute('target', "_blank");
+          }
+
+          document.body.appendChild(link);
+          link.click();
+          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);
+        });
+      });
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+
+  return /*#__PURE__*/createElement("div", {
+    className: "field"
+  }, /*#__PURE__*/createElement("div", {
+    className: "label"
+  }, data.filename), /*#__PURE__*/createElement("div", {
+    className: "columns"
+  }, /*#__PURE__*/createElement("div", {
+    className: "column"
+  }, /*#__PURE__*/createElement("button", {
+    className: "button is-small is-primary level-left",
+    onClick: function onClick(event) {
+      try {
+        event.preventDefault();
+        event.stopPropagation();
+        getField(false);
+        return Promise.resolve();
+      } catch (e) {
+        return Promise.reject(e);
+      }
+    }
+  }, "Open")), /*#__PURE__*/createElement("div", {
+    className: "column"
+  }, /*#__PURE__*/createElement("button", {
+    className: "button is-small is-primary level-right",
+    onClick: function onClick(event) {
+      try {
+        event.preventDefault();
+        event.stopPropagation();
+        getField(true);
+        return Promise.resolve();
+      } catch (e) {
+        return Promise.reject(e);
+      }
+    }
+  }, "Download"))));
+};
+
+var plain = ['string', 'number', 'boolean'];
+function RenderField(_ref) {
+  var value = _ref.value,
+      Widget = _ref.Widget;
+  if (value === null || value === undefined) return '';
+
+  if (Widget) {
+    return /*#__PURE__*/React.createElement(Widget, {
+      value: value
+    });
+  }
+
+  var type = typeof value;
+
+  if (plain.includes(type)) {
+    return value;
+  }
+
+  if (type === 'object') {
+    if (Array.isArray(value)) {
+      return value.map(function (item) {
+        return /*#__PURE__*/React.createElement("div", {
+          key: item
+        }, /*#__PURE__*/React.createElement(RenderField, {
+          value: item
+        }));
+      });
+    }
+
+    return Object.keys(value).map(function (key) {
+      return /*#__PURE__*/React.createElement(FieldValue, {
+        field: key,
+        value: value[key],
+        key: key
+      });
+    });
+  }
+
+  return /*#__PURE__*/React.createElement("p", null, "No render for ", JSON.stringify(value));
+}
+
+var FieldValue = function FieldValue(_ref2) {
+  var field = _ref2.field,
+      value = _ref2.value;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "field"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "label"
+  }, field), /*#__PURE__*/React.createElement("div", {
+    className: "value"
+  }, /*#__PURE__*/React.createElement(RenderField, {
+    value: value
+  })));
+};
+
+var DEFAULT_VALUE_EDITABLE_FIELD = 'Click to edit';
+var DEFAULT_VALUE_NO_EDITABLE_FIELD = ' -- ';
+function RenderFieldComponent(_ref3) {
+  var schema = _ref3.schema,
+      field = _ref3.field,
+      val = _ref3.val,
+      modifyContent = _ref3.modifyContent;
+
+  var getRenderProps = function getRenderProps() {
+    var renderProps = {
+      value: val != null ? val : modifyContent ? DEFAULT_VALUE_EDITABLE_FIELD : DEFAULT_VALUE_NO_EDITABLE_FIELD
+    };
+
+    if (val && (schema == null ? void 0 : schema.widget) === 'file') {
+      renderProps['value'] = {
+        data: val,
+        field: field
+      };
+      renderProps['Widget'] = DownloadField;
+    } else if ((schema == null ? void 0 : schema.type) === 'boolean') {
+      var _val$toString;
+
+      renderProps['value'] = (_val$toString = val == null ? void 0 : val.toString()) != null ? _val$toString : renderProps['value'];
+    } else if (val && (schema == null ? void 0 : schema.type) === 'datetime') {
+      renderProps['value'] = new Date(val).toLocaleString();
+    }
+
+    return renderProps;
+  };
+
+  return /*#__PURE__*/React.createElement(RenderField, getRenderProps());
+}
+
 function IAttachment(_ref) {
   var properties = _ref.properties,
       values = _ref.values;
@@ -3723,7 +3768,9 @@ function ItemsActionsProvider(_ref) {
  * and it select/unselect all items of the page.
  */
 
-function AllItemsCheckbox() {
+function AllItemsCheckbox(_ref2) {
+  var dataTest = _ref2.dataTest;
+
   var _useContext = useContext(ItemsActionsCtx),
       onSelectAllItems = _useContext.onSelectAllItems,
       selected = _useContext.selected;
@@ -3734,15 +3781,17 @@ function AllItemsCheckbox() {
     style: {
       marginLeft: 2
     },
-    value: selected.all
+    value: selected.all,
+    dataTest: dataTest
   });
 }
 /**
  * Checkbox component to select ONE item.
  */
 
-function ItemCheckbox(_ref2) {
-  var item = _ref2.item;
+function ItemCheckbox(_ref3) {
+  var item = _ref3.item,
+      dataTest = _ref3.dataTest;
 
   var _useContext2 = useContext(ItemsActionsCtx),
       selected = _useContext2.selected,
@@ -3755,7 +3804,8 @@ function ItemCheckbox(_ref2) {
     onChange: function onChange() {
       return onSelectOneItem(item);
     },
-    value: value
+    value: value,
+    dataTest: dataTest
   });
 }
 /**
@@ -3788,7 +3838,9 @@ function ItemsActionsDropdown() {
       });
     },
     options: options
-  }, "Choose action...");
+  }, /*#__PURE__*/React.createElement("div", {
+    "data-test": "btnChooseActionTest"
+  }, "Choose action..."));
 }
 
 /* eslint jsx-a11y/anchor-is-valid: "off" */
@@ -4039,7 +4091,8 @@ function RItem(_ref2) {
   }, /*#__PURE__*/React.createElement("td", {
     style: smallcss
   }, /*#__PURE__*/React.createElement(ItemCheckbox, {
-    item: item
+    item: item,
+    dataTest: "itemCheckboxRowTest"
   })), columns.map(function (i) {
     return /*#__PURE__*/React.createElement(React.Fragment, {
       key: i.label
@@ -5837,7 +5890,7 @@ function CopyItems(props) {
       items = _props$items === void 0 ? [] : _props$items;
   return /*#__PURE__*/React.createElement(PathTree, {
     title: "Copy to...",
-    defaultPath: "/" + Ctx.path.split(getContainerFromPath(Ctx.path))[1],
+    defaultPath: Ctx.client.clearContainerFromPath(Ctx.path),
     onConfirm: copyItems,
     onCancel: function onCancel() {
       return Ctx.cancelAction();
@@ -5853,12 +5906,15 @@ function CopyItems(props) {
     }, "New id for \"" + item.id + "\" copy"), /*#__PURE__*/React.createElement("input", {
       type: "text",
       className: "input",
+      "data-test": "inputCopyIdTest-" + item['@name'],
       defaultValue: getNewId(item.id)
     }));
   }), "\xA0");
 }
 
 function CopyItem(props) {
+  var _item$parent$Name;
+
   var copyItem = function copyItem(path, form) {
     try {
       var input = form[1] || {};
@@ -5891,7 +5947,7 @@ function CopyItem(props) {
   var item = props.item;
   return /*#__PURE__*/React.createElement(PathTree, {
     title: "Copy to...",
-    defaultPath: "/" + item['parent']['@name'],
+    defaultPath: "/" + ((_item$parent$Name = item['parent']['@name']) != null ? _item$parent$Name : '/'),
     onConfirm: copyItem,
     onCancel: function onCancel() {
       return Ctx.cancelAction();
@@ -5904,6 +5960,7 @@ function CopyItem(props) {
   }, "New id for \"" + item['@name'] + "\" copy"), /*#__PURE__*/React.createElement("input", {
     type: "text",
     className: "input",
+    "data-test": "inputCopyIdTest-" + item['@name'],
     defaultValue: getNewId(item['@name'])
   })));
 }
@@ -6399,7 +6456,7 @@ function GroupCtx() {
   }, /*#__PURE__*/React.createElement("h3", {
     className: "title is-size-6"
   }, "Users"), /*#__PURE__*/React.createElement("p", null, "Add a User"), /*#__PURE__*/React.createElement(SearchInput, {
-    path: getContainerFromPath(Ctx.path),
+    path: Ctx.containerPath,
     qs: [].concat(searchParsed, sortParsed),
     traversal: Ctx,
     onChange: addUser,
@@ -6532,7 +6589,8 @@ function Path() {
       key: indx
     }, /*#__PURE__*/React.createElement("a", {
       href: path,
-      onClick: onClick
+      onClick: onClick,
+      "data-test": "breadcrumbItemTest-home"
     }, /*#__PURE__*/React.createElement("span", {
       className: "icon"
     }, /*#__PURE__*/React.createElement("i", {
@@ -6703,7 +6761,8 @@ var registry = {
   properties: {},
   components: {
     Path: Path,
-    EditComponent: EditComponent
+    EditComponent: EditComponent,
+    RenderFieldComponent: RenderFieldComponent
   },
   searchEngineQueryParamsFunction: {
     PostreSQL: 'getQueryParamsPostresql',
@@ -7058,148 +7117,126 @@ var ERRORS = {
   failed_to_fetch: 'Failed to fetch data: Backend not running?',
   invalid_credentials: 'Failed! Invalid credentials'
 };
-var Login = /*#__PURE__*/function (_Component) {
-  _inheritsLoose(Login, _Component);
-
-  function Login(props) {
-    var _this;
-
-    _this = _Component.call(this, props) || this;
-    _this.state = {
-      username: '',
-      password: '',
-      loading: undefined,
-      schema: '',
-      errors: undefined
-    };
-    _this.ref = React.createRef();
+var initialState$4 = {
+  username: '',
+  password: '',
+  loading: undefined,
+  errors: undefined
+};
+var Login = function Login(_ref) {
+  var currentSchema = _ref.currentSchema,
+      setCurrentSchema = _ref.setCurrentSchema,
+      schemas = _ref.schemas,
+      auth = _ref.auth,
+      onLogin = _ref.onLogin;
+
+  var _useSetState = useSetState(initialState$4),
+      state = _useSetState[0],
+      setState = _useSetState[1];
 
-    _this.doLogin = function (ev) {
-      try {
-        ev.preventDefault();
+  var inputRef = useRef(null);
+  useEffect(function () {
+    if (inputRef) {
+      inputRef.current.focus();
+    }
+  }, [inputRef]);
 
-        _this.setState({
-          loading: true,
-          errors: undefined
-        });
+  var doLogin = function doLogin(ev) {
+    try {
+      ev.preventDefault();
+      setState({
+        loading: true,
+        errors: undefined
+      });
+      var username = state.username,
+          password = state.password;
 
-        var _this$state = _this.state,
-            username = _this$state.username,
-            password = _this$state.password,
-            schema = _this$state.schema;
+      if (currentSchema !== '') {
+        auth.setAccount(currentSchema);
+      }
 
-        if (schema !== '') {
-          _this.props.auth.setAccount(schema);
+      return Promise.resolve(auth.login(username, password)).then(function (res) {
+        if (!res) {
+          setState({
+            errors: auth.errors,
+            loading: false
+          });
+          return;
         }
 
-        var auth = _this.props.auth;
-        return Promise.resolve(auth.login(username, password)).then(function (res) {
-          if (!res) {
-            _this.setState({
-              errors: auth.errors,
-              loading: false
-            });
-
-            return;
-          }
-
-          if (_this.props.onLogin) {
-            _this.props.onLogin();
-          }
-        });
-      } catch (e) {
-        return Promise.reject(e);
-      }
-    };
-
-    if (props.schemas) {
-      _this.state.schema = props.schemas[0];
+        if (onLogin) {
+          onLogin();
+        }
+      });
+    } catch (e) {
+      return Promise.reject(e);
     }
-
-    return _this;
-  }
-
-  var _proto = Login.prototype;
-
-  _proto.componentDidMount = function componentDidMount() {
-    this.ref.current.focus();
   };
 
-  _proto.render = function render() {
-    var _this2 = this;
-
-    var _this$state2 = this.state,
-        password = _this$state2.password,
-        username = _this$state2.username,
-        errors = _this$state2.errors;
-    var schemas = this.props.schemas;
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("form", {
-      className: "login__form",
-      action: "",
-      onSubmit: this.doLogin,
-      "data-test": "formLoginTest"
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "field"
-    }, /*#__PURE__*/React.createElement("label", {
-      className: "label"
-    }, "Username:"), /*#__PURE__*/React.createElement("input", {
-      type: "text",
-      className: "input",
-      placeholder: "Username",
-      onChange: function onChange(e) {
-        return _this2.setState({
-          username: e.target.value
-        });
-      },
-      value: username,
-      ref: this.ref,
-      "data-test": "inputUsernameLoginTest"
-    })), /*#__PURE__*/React.createElement("div", {
-      className: "field"
-    }, /*#__PURE__*/React.createElement("label", {
-      className: "label"
-    }, "Password:"), /*#__PURE__*/React.createElement("input", {
-      type: "password",
-      className: "input",
-      onChange: function onChange(e) {
-        return _this2.setState({
-          password: e.target.value
-        });
-      },
-      value: password,
-      "data-test": "inputPasswordLoginTest"
-    })), schemas && /*#__PURE__*/React.createElement("div", {
-      className: "field"
-    }, /*#__PURE__*/React.createElement("label", {
-      className: "label"
-    }, "Schema:"), /*#__PURE__*/React.createElement("div", {
-      className: "select"
-    }, /*#__PURE__*/React.createElement("select", {
-      onChange: function onChange(e) {
-        return _this2.setState({
-          schema: e.target.value
-        });
-      }
-    }, schemas.map(function (s) {
-      return /*#__PURE__*/React.createElement("option", {
-        value: s,
-        key: s
-      }, s);
-    })))), /*#__PURE__*/React.createElement("div", {
-      className: "field"
-    }, /*#__PURE__*/React.createElement("button", {
-      className: "button is-warning",
-      type: "submit",
-      "data-test": "btnLoginTest"
-    }, "Login")), /*#__PURE__*/React.createElement("div", {
-      className: "field"
-    }, errors && /*#__PURE__*/React.createElement("p", {
-      className: "has-text-danger"
-    }, ERRORS[errors] || 'Generic error'))));
-  };
-
-  return Login;
-}(Component);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("form", {
+    className: "login__form",
+    action: "",
+    onSubmit: doLogin,
+    "data-test": "formLoginTest"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "field"
+  }, /*#__PURE__*/React.createElement("label", {
+    className: "label"
+  }, "Username:"), /*#__PURE__*/React.createElement("input", {
+    type: "text",
+    className: "input",
+    placeholder: "Username",
+    onChange: function onChange(e) {
+      return setState({
+        username: e.target.value
+      });
+    },
+    value: state.username,
+    ref: inputRef,
+    "data-test": "inputUsernameLoginTest"
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "field"
+  }, /*#__PURE__*/React.createElement("label", {
+    className: "label"
+  }, "Password:"), /*#__PURE__*/React.createElement("input", {
+    type: "password",
+    className: "input",
+    placeholder: "Password",
+    onChange: function onChange(e) {
+      return setState({
+        password: e.target.value
+      });
+    },
+    value: state.password,
+    "data-test": "inputPasswordLoginTest"
+  })), schemas && schemas.length > 1 && /*#__PURE__*/React.createElement("div", {
+    className: "field"
+  }, /*#__PURE__*/React.createElement("label", {
+    className: "label"
+  }, "Schema:"), /*#__PURE__*/React.createElement("div", {
+    className: "select"
+  }, /*#__PURE__*/React.createElement("select", {
+    "data-test": "selectSchemaTest",
+    onChange: function onChange(e) {
+      return setCurrentSchema(e.target.value);
+    }
+  }, schemas.map(function (s) {
+    return /*#__PURE__*/React.createElement("option", {
+      value: s,
+      key: s
+    }, s);
+  })))), /*#__PURE__*/React.createElement("div", {
+    className: "field"
+  }, /*#__PURE__*/React.createElement("button", {
+    className: "button is-warning",
+    type: "submit",
+    "data-test": "btnLoginTest"
+  }, "Login")), /*#__PURE__*/React.createElement("div", {
+    className: "field"
+  }, state.errors && /*#__PURE__*/React.createElement("p", {
+    className: "has-text-danger"
+  }, ERRORS[state.errors] || 'Generic error'))));
+};
 
 function _catch$3(body, recover) {
   try {
@@ -7573,5 +7610,5 @@ var Auth = /*#__PURE__*/function () {
   return Auth;
 }();
 
-export { ACTIONS_OBJECT, AddItem, AddPermission, AllItemsCheckbox, ApplicationCtx, Auth, AuthContext, BaseForm, BehaviorNotImplemented, BehaviorsView, Button, Checkbox, ClientContext, ClientProvider, Config, Confirm, ContainerCtx, ContextToolbar, CreateButton, CreateContainer, DEFAULT_VALUE_EDITABLE_FIELD, DEFAULT_VALUE_NO_EDITABLE_FIELD, DatabaseCtx, Delete, DownloadField, EditableField, EmailInput, FileUpload, Flash, FolderCtx, Form, FormBuilder, GroupCtx, GroupToolbar, GroupsCtx, Guillotina, GuillotinaClient, IAttachment, IDublinCore, IMultiAttachment, 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, RequiredFieldsForm, RestClient, SearchInput, SearchLabels, Select, Sharing, Table, TabsPanel, Tag, TagsWidget, TdLink, Textarea, TraversalContext, TraversalProvider, UserCtx, UserForm, UsersCtx, UsersToolbar, actions, base64ToArrayBuffer, buildQs, classnames, defaultComponent, formatDate, generateUID, get$1 as get, getClient, getContainerFromPath, getNewId, isEmail, isEmpty, isHexColor, isNumber, isURL, lightFileReader, maxLength, minLength, noop, notEmpty, parser, sleep, stringToSlug, toQueryString, useConfig, useCrudContext, useGuillotinaClient, useLocation, useRegistry, useRemoteField, useTraversal };
+export { ACTIONS_OBJECT, AddItem, AddPermission, AllItemsCheckbox, ApplicationCtx, Auth, AuthContext, BaseForm, BehaviorNotImplemented, BehaviorsView, Button, Checkbox, ClientContext, ClientProvider, Config, Confirm, ContainerCtx, ContextToolbar, CreateButton, CreateContainer, DEFAULT_VALUE_EDITABLE_FIELD, DEFAULT_VALUE_NO_EDITABLE_FIELD, DatabaseCtx, Delete, DownloadField, EditableField, EmailInput, FileUpload, Flash, FolderCtx, Form, FormBuilder, GroupCtx, GroupToolbar, GroupsCtx, Guillotina, GuillotinaClient, IAttachment, IDublinCore, IMultiAttachment, Icon, Input, InputList, Item, ItemCheckbox, ItemCtx, ItemModel, ItemTitle, ItemsActionsDropdown, ItemsActionsProvider, Layout, Link, Loading, Login, Modal, NotAllowed, Notification, Pagination, PanelActions, PanelAddons, PanelBehaviors, PanelItems, PanelNotImplemented, PanelPermissions, PanelProperties, PasswordInput, Path, PathTree, PermissionPrinperm, PermissionPrinrole, PermissionRoleperm, Permissions, PropertiesButtonView, PropertiesView, REGEX_EMAIL, REGEX_HEX_COLOR, REGEX_NUMBER, REGEX_URL, RItem, RemoveItems, RenderField, RenderFieldComponent, RequiredFieldsForm, RestClient, SearchInput, SearchLabels, Select, Sharing, Table, TabsPanel, Tag, TagsWidget, TdLink, Textarea, TraversalContext, TraversalProvider, UserCtx, UserForm, UsersCtx, UsersToolbar, actions, base64ToArrayBuffer, buildQs, classnames, defaultComponent, formatDate, generateUID, get$1 as get, getClient, getNewId, isEmail, isEmpty, isHexColor, isNumber, isURL, lightFileReader, maxLength, minLength, noop, notEmpty, parser, sleep, stringToSlug, toQueryString, useConfig, useCrudContext, useGuillotinaClient, useLocation, useRegistry, useRemoteField, useTraversal };
 //# sourceMappingURL=react-gmi.esm.js.map