@guillotinaweb/react-gmi 0.20.1 → 0.22.2

package/dist/react-gmi.umd.js

@@ -107,124 +107,148 @@
     return it.next.bind(it);
   }
 
-  var RestClient = /*#__PURE__*/function () {
-    function RestClient(url, auth) {
-      this.auth = auth;
-      this.url = url;
+  var AuthContext = React.createContext({});
+  var ClientContext = React.createContext({});
+  var TraversalContext = React.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__default['default'].createElement(TraversalContext.Provider, {
+      value: new Traversal(props)
+    }, children);
+  }
+  function useTraversal() {
+    return React__default['default'].useContext(TraversalContext);
+  }
+  function ClientProvider(_ref4) {
+    var children = _ref4.children,
+        client = _ref4.client;
+    return /*#__PURE__*/React__default['default'].createElement(ClientContext.Provider, {
+      value: client
+    }, children);
+  }
+  function useGuillotinaClient() {
+    return React__default['default'].useContext(ClientContext);
+  }
+
   var classnames = function classnames(classNames) {
     return classNames.filter(Boolean).join(' ').trim();
   };
@@ -276,2067 +300,2071 @@
     });
   }
 
-  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__default['default'].createElement("span", {
-      className: classnames(['icon', align].concat(addClass))
-    }, /*#__PURE__*/React__default['default'].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__default['default'].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__default['default'].createElement("span", {
-      className: classnames(['tag', color, size])
-    }, name, onRemove !== undefined && /*#__PURE__*/React__default['default'].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__default['default'].createElement("button", {
-      type: "button",
+    if (loading) css = css.concat('is-loading');
+    if (disabled) onClick = noop$1;
+    return /*#__PURE__*/React__default['default'].createElement("p", {
+      className: "control"
+    }, /*#__PURE__*/React__default['default'].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__default['default'].createElement("table", {
-      className: classnames(['table'].concat(className))
-    }, /*#__PURE__*/React__default['default'].createElement("thead", null, /*#__PURE__*/React__default['default'].createElement("tr", null, headers && headers.map(function (item, idx) {
-      return /*#__PURE__*/React__default['default'].createElement("th", {
-        key: item + idx
-      }, item);
-    }))), /*#__PURE__*/React__default['default'].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__default['default'].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 = React.useState(currentSearchParams()),
-        path = _useState[0],
-        update = _useState[1];
+  function Modal(props) {
+    var isActive = props.isActive,
+        setActive = props.setActive,
+        children = props.children;
 
-    var prevPath = React.useRef(path);
-    React.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__default['default'](),
+        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__default['default'].createElement(Portal, null, /*#__PURE__*/React__default['default'].createElement("div", {
+      className: css
+    }, /*#__PURE__*/React__default['default'].createElement("div", {
+      className: "modal-background",
+      onClick: function onClick() {
+        return setActive(false);
+      }
+    }), /*#__PURE__*/React__default['default'].createElement("div", {
+      className: "modal-content"
+    }, /*#__PURE__*/React__default['default'].createElement("div", {
+      className: "box"
+    }, children)), /*#__PURE__*/React__default['default'].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__default['default'].createElement(Modal, {
+      isActive: true,
+      setActive: setActive,
+      className: "confirm"
+    }, /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("h1", {
+      className: "title is-size-5"
+    }, message || 'Are you Sure?'), /*#__PURE__*/React__default['default'].createElement("div", {
+      className: "level",
+      style: {
+        marginTop: 50
+      }
+    }, /*#__PURE__*/React__default['default'].createElement("div", {
+      className: "level-left"
+    }), /*#__PURE__*/React__default['default'].createElement("div", {
+      className: "level-right"
+    }, /*#__PURE__*/React__default['default'].createElement("button", {
+      className: "button is-danger",
+      onClick: function onClick() {
+        return onCancel();
+      },
+      "data-test": "btnCancelModalTest"
+    }, "Cancel"), "\xA0\xA0", /*#__PURE__*/React__default['default'].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 = React.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__default['default'].createElement(Modal, {
+      isActive: true,
+      setActive: onCancel
+    }, /*#__PURE__*/React__default['default'].createElement("h1", null, title), /*#__PURE__*/React__default['default'].createElement("form", {
+      onSubmit: function onSubmit(e) {
+        e.preventDefault();
+        onConfirm(e.target[0].value, e.target);
+      }
+    }, /*#__PURE__*/React__default['default'].createElement("small", {
+      style: {
+        display: 'block',
+        marginTop: 20
       }
+    }, "Example: /folder (without /db/container on front)"), /*#__PURE__*/React__default['default'].createElement("input", {
+      className: "input mb-3",
+      defaultValue: defaultPath,
+      type: "text",
+      "data-test": "inputPathTreeTest"
+    }), children, /*#__PURE__*/React__default['default'].createElement("div", {
+      className: "level-right mt-3"
+    }, /*#__PURE__*/React__default['default'].createElement("button", {
+      type: "button",
+      className: "button is-danger",
+      onClick: onCancel,
+      "data-test": "btnCancelModalTest"
+    }, "Cancel"), "\xA0\xA0", /*#__PURE__*/React__default['default'].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 = React.useState(initialState),
+        state = _useState[0],
+        set = _useState[1];
+
+    var setState = React.useCallback(function (patch) {
+      set(function (prevState) {
+        return Object.assign({}, prevState, patch instanceof Function ? patch(prevState) : patch);
       });
-      setURLParams(current);
-    }, [path]);
-    var remove = React.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__default['default'].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 = React.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__default['default'].createElement("td", _extends({}, props, {
-      onClick: onClick
-    }), /*#__PURE__*/React__default['default'].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__default['default'].createElement("td", {
-            style: smallcss
-          }, /*#__PURE__*/React__default['default'].createElement(Icon, {
-            icon: m.icon
-          }));
-        }
-      }, {
-        label: 'type',
-        child: function child(m) {
-          return /*#__PURE__*/React__default['default'].createElement(TdLink, {
-            style: smallcss,
-            model: m
-          }, /*#__PURE__*/React__default['default'].createElement("span", {
-            className: "tag"
-          }, m.type));
-        }
-      }, {
-        label: 'id/name',
-        child: function child(m, navigate, search) {
-          return /*#__PURE__*/React__default['default'].createElement(TdLink, {
-            model: m
-          }, m.name, search && /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("br", null), /*#__PURE__*/React__default['default'].createElement("span", {
-            className: "is-size-7 tag is-light"
-          }, m.path)));
-        }
-      }, {
-        label: 'created',
-        child: function child(m) {
-          return /*#__PURE__*/React__default['default'].createElement("td", {
-            style: mediumcss,
-            className: "is-size-7 is-vcentered"
-          }, m.created);
-        }
-      }, {
-        label: 'modified',
-        child: function child(m) {
-          return /*#__PURE__*/React__default['default'].createElement("td", {
-            style: mediumcss,
-            className: "is-size-7 is-vcentered"
-          }, m.updated);
-        }
-      }];
-    } // BBB API changes. Compat G5 and G6
-    ;
+    return /*#__PURE__*/React__default['default'].createElement(Modal, {
+      isActive: true,
+      setActive: setActive
+    }, /*#__PURE__*/React__default['default'].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__default['default'].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__default['default'].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__default['default'].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 = React.useRef(null);
 
-        if (path.startsWith('/')) {
-          path = path.substring(1);
-        }
+    var _React$useState = React__default['default'].useState(value),
+        state = _React$useState[0],
+        setState = _React$useState[1];
 
-        return Promise.resolve(_this14.rest.post(path, data));
-      } catch (e) {
-        return Promise.reject(e);
+    React.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__default['default'].createElement("div", {
+      className: "field"
+    }, /*#__PURE__*/React__default['default'].createElement("label", {
+      htmlFor: id,
+      className: classnames(['checkbox', className])
+    }, /*#__PURE__*/React__default['default'].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__default['default'].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__default['default'].node,
+    id: PropTypes__default['default'].string,
+    className: PropTypes__default['default'].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__default['default'].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__default['default'].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__default['default'].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 = React.useState(generateUID('input')),
+        uid = _useState[0];
 
-          function _temp6(_gr$json) {
-            function _temp5(_usr$json) {
-              return {
-                groups: _gr$json,
-                users: _usr$json
-              };
-            }
+    var _useState2 = React.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__default['default'].useRef();
+    React.useEffect(function () {
+      setMounted(true);
+    }, []);
+    React.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__default['default'].createElement("div", {
+      className: "field"
+    }, id && placeholder ? /*#__PURE__*/React__default['default'].createElement("label", {
+      className: "label",
+      htmlFor: id
+    }, placeholder) : null, /*#__PURE__*/React__default['default'].createElement("div", {
+      className: classnames(cssControl())
+    }, /*#__PURE__*/React__default['default'].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__default['default'].createElement(ErrorZone, {
+      className: errorZoneClassName,
+      id: uid
+    }, state.hasError ? theError : ''));
+  });
+  Input.propTypes = {
+    icon: PropTypes__default['default'].node,
+    iconPosition: PropTypes__default['default'].arrayOf(PropTypes__default['default'].oneOf(['has-icons-left', 'has-icons-right', ''])),
+    error: PropTypes__default['default'].string,
+    errorZoneClassName: PropTypes__default['default'].string,
+    autoComplete: PropTypes__default['default'].string,
+    autoFocus: PropTypes__default['default'].bool,
+    className: PropTypes__default['default'].string,
+    disabled: PropTypes__default['default'].bool,
+    loading: PropTypes__default['default'].bool,
+    isSubmitted: PropTypes__default['default'].bool,
+    id: PropTypes__default['default'].string,
+    name: PropTypes__default['default'].string,
+    onChange: PropTypes__default['default'].func,
+    onKeyDown: PropTypes__default['default'].func,
+    onKeyUp: PropTypes__default['default'].func,
+    onPressEnter: PropTypes__default['default'].func,
+    placeholder: PropTypes__default['default'].string,
+    readOnly: PropTypes__default['default'].bool,
+    required: PropTypes__default['default'].bool,
+    type: PropTypes__default['default'].string,
+    value: PropTypes__default['default'].oneOfType([PropTypes__default['default'].string, PropTypes__default['default'].number, PropTypes__default['default'].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__default['default'].createElement("span", {
+      className: classnames(['icon', align].concat(addClass))
+    }, /*#__PURE__*/React__default['default'].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__default['default'].createElement(Input, _extends({
+      type: "email",
+      validator: isEmail,
+      errorMessage: "Email address invalid",
+      value: value,
+      "data-test": dataTest,
+      icon: /*#__PURE__*/React__default['default'].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__default['default'].createElement("div", {
+      "data-test": dataTest
+    }, title && /*#__PURE__*/React__default['default'].createElement("div", {
+      className: "level"
+    }, /*#__PURE__*/React__default['default'].createElement("h1", {
+      className: "title is-size-4"
+    }, title)), error && /*#__PURE__*/React__default['default'].createElement("div", {
+      className: "notification is-danger"
+    }, error), /*#__PURE__*/React__default['default'].createElement("form", _extends({
+      onSubmit: handleSubmit,
+      onReset: onReset,
+      autoComplete: autoComplete,
+      className: classnames(['form', className])
+    }, rest), children));
+  };
+  Form.propTypes = {
+    children: PropTypes__default['default'].node.isRequired,
+    className: PropTypes__default['default'].string,
+    onSubmit: PropTypes__default['default'].func,
+    onReset: PropTypes__default['default'].func,
+    autoComplete: PropTypes__default['default'].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__default['default'].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 = React.createContext({});
-  var ClientContext = React.createContext({});
-  var TraversalContext = React.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__default['default'].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__default['default'].createElement(TraversalContext.Provider, {
-      value: new Traversal(props)
-    }, children);
-  }
-  function useTraversal() {
-    return React__default['default'].useContext(TraversalContext);
-  }
-  function ClientProvider(_ref4) {
-    var children = _ref4.children,
-        client = _ref4.client;
-    return /*#__PURE__*/React__default['default'].createElement(ClientContext.Provider, {
-      value: client
-    }, children);
-  }
-  function useGuillotinaClient() {
-    return React__default['default'].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__default['default'].createElement("p", {
-      className: "control"
-    }, /*#__PURE__*/React__default['default'].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__default['default'](),
-        Portal = _usePortal.Portal;
+    }
 
-    var css = 'modal ' + (isActive ? 'is-active ' : '') + props.className;
-    return /*#__PURE__*/React__default['default'].createElement(Portal, null, /*#__PURE__*/React__default['default'].createElement("div", {
-      className: css
-    }, /*#__PURE__*/React__default['default'].createElement("div", {
-      className: "modal-background",
-      onClick: function onClick() {
-        return setActive(false);
-      }
-    }), /*#__PURE__*/React__default['default'].createElement("div", {
-      className: "modal-content"
-    }, /*#__PURE__*/React__default['default'].createElement("div", {
-      className: "box"
-    }, children)), /*#__PURE__*/React__default['default'].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__default['default'].createElement(Modal, {
-      isActive: true,
-      setActive: setActive,
-      className: "confirm"
-    }, /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("h1", {
-      className: "title is-size-5"
-    }, message || 'Are you Sure?'), /*#__PURE__*/React__default['default'].createElement("div", {
-      className: "level",
-      style: {
-        marginTop: 50
-      }
-    }, /*#__PURE__*/React__default['default'].createElement("div", {
-      className: "level-left"
-    }), /*#__PURE__*/React__default['default'].createElement("div", {
-      className: "level-right"
-    }, /*#__PURE__*/React__default['default'].createElement("button", {
-      className: "button is-danger",
-      onClick: function onClick() {
-        return onCancel();
-      }
-    }, "Cancel"), "\xA0\xA0", /*#__PURE__*/React__default['default'].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__default['default'].createElement(Modal, {
-      isActive: true,
-      setActive: onCancel
-    }, /*#__PURE__*/React__default['default'].createElement("h1", null, title), /*#__PURE__*/React__default['default'].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__default['default'].createElement("input", {
-      className: "input",
-      placeholder: "/folder (without /db/container on front)",
-      style: {
-        margin: '20px 0'
-      },
-      defaultValue: defaultPath,
-      type: "text"
-    }), children, /*#__PURE__*/React__default['default'].createElement("div", {
-      className: "level-right"
-    }, /*#__PURE__*/React__default['default'].createElement("button", {
-      type: "button",
-      className: "button is-danger",
-      onClick: onCancel
-    }, "Cancel"), "\xA0\xA0", /*#__PURE__*/React__default['default'].createElement("button", {
-      type: "submit",
-      className: "button is-success"
-    }, "Confirm"))));
-  }
 
-  function useSetState(initialState) {
-    var _useState = React.useState(initialState),
-        state = _useState[0],
-        set = _useState[1];
+      Tag.displayName = field + "Field";
+      return /*#__PURE__*/React__default['default'].createElement(Tag, props);
+    };
 
-    var setState = React.useCallback(function (patch) {
-      set(function (prevState) {
-        return Object.assign({}, prevState, patch instanceof Function ? patch(prevState) : patch);
+    var children_ = React__default['default'].Children.map(children, function (child) {
+      return React__default['default'].cloneElement(child, {
+        onChange: onUpdate
       });
-    }, [set]);
-    return [state, setState];
+    });
+
+    var changes = function changes() {
+      onSubmit(ref.current, values);
+    };
+
+    return /*#__PURE__*/React__default['default'].createElement(Form, _extends({
+      onSubmit: changes
+    }, rest), fields.map(function (field) {
+      return /*#__PURE__*/React__default['default'].createElement(GetTag, {
+        field: field,
+        key: field
+      });
+    }), children_, submitButton && /*#__PURE__*/React__default['default'].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__default['default'].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 = React.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__default['default'].createElement("div", {
+      className: "field"
+    }, id && placeholder ? /*#__PURE__*/React__default['default'].createElement("label", {
+      className: "label",
+      htmlFor: id
+    }, placeholder) : null, /*#__PURE__*/React__default['default'].createElement("div", {
+      className: classnames(cssWrap)
+    }, /*#__PURE__*/React__default['default'].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__default['default'].createElement("option", _extends({
+        key: index.toString()
+      }, rest), text);
+    }))), error && /*#__PURE__*/React__default['default'].createElement(ErrorZone, {
+      className: errorZoneClassName,
+      id: uid
+    }, error ? error : ''));
+  });
+  Select.propTypes = {
+    error: PropTypes__default['default'].string,
+    disabled: PropTypes__default['default'].bool,
+    loading: PropTypes__default['default'].bool,
+    isSubmitted: PropTypes__default['default'].bool,
+    size: PropTypes__default['default'].number,
+    onChange: PropTypes__default['default'].func,
+    options: PropTypes__default['default'].arrayOf(PropTypes__default['default'].object),
+    multiple: PropTypes__default['default'].bool,
+    className: PropTypes__default['default'].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__default['default'].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__default['default'].createElement("span", {
+      className: classnames(['tag', color, size])
+    }, name, onRemove !== undefined && /*#__PURE__*/React__default['default'].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__default['default'].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__default['default'].createElement("table", {
+      className: classnames(['table'].concat(className))
+    }, /*#__PURE__*/React__default['default'].createElement("thead", null, /*#__PURE__*/React__default['default'].createElement("tr", null, headers && headers.map(function (item, idx) {
+      return /*#__PURE__*/React__default['default'].createElement("th", {
+        key: item + idx
+      }, item);
+    }))), /*#__PURE__*/React__default['default'].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__default['default'].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 = React.useState(currentSearchParams()),
+        path = _useState[0],
+        update = _useState[1];
+
+    var prevPath = React.useRef(path);
+    React.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 = React.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 = React.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__default['default'].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__default['default'].createElement(Modal, {
-      isActive: true,
-      setActive: setActive
-    }, /*#__PURE__*/React__default['default'].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 = React.useRef();
+
+    function onClick() {
+      link.current.click();
+    }
+
+    return /*#__PURE__*/React__default['default'].createElement("td", _extends({}, props, {
+      onClick: onClick
+    }), /*#__PURE__*/React__default['default'].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__default['default'].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__default['default'].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__default['default'].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 = React.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__default['default'].useState(value),
-        state = _React$useState[0],
-        setState = _React$useState[1];
+      if (containerPath.startsWith('/')) {
+        containerPath = containerPath.slice(1);
+      }
 
-    React.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__default['default'].createElement("div", {
-      className: "field"
-    }, /*#__PURE__*/React__default['default'].createElement("label", {
-      htmlFor: id,
-      className: classnames(['checkbox', className])
-    }, /*#__PURE__*/React__default['default'].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__default['default'].createElement("td", {
+            style: smallcss
+          }, /*#__PURE__*/React__default['default'].createElement(Icon, {
+            icon: m.icon
+          }));
+        }
+      }, {
+        label: 'type',
+        child: function child(m) {
+          return /*#__PURE__*/React__default['default'].createElement(TdLink, {
+            style: smallcss,
+            model: m
+          }, /*#__PURE__*/React__default['default'].createElement("span", {
+            className: "tag"
+          }, m.type));
+        }
+      }, {
+        label: 'id/name',
+        child: function child(m, navigate, search) {
+          return /*#__PURE__*/React__default['default'].createElement(TdLink, {
+            model: m
+          }, m.name, search && /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("br", null), /*#__PURE__*/React__default['default'].createElement("span", {
+            className: "is-size-7 tag is-light"
+          }, m.path)));
+        }
+      }, {
+        label: 'created',
+        child: function child(m) {
+          return /*#__PURE__*/React__default['default'].createElement("td", {
+            style: mediumcss,
+            className: "is-size-7 is-vcentered"
+          }, m.created);
+        }
+      }, {
+        label: 'modified',
+        child: function child(m) {
+          return /*#__PURE__*/React__default['default'].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__default['default'].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__default['default'].node,
-    id: PropTypes__default['default'].string,
-    className: PropTypes__default['default'].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__default['default'].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__default['default'].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__default['default'].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 = React.useState(generateUID('input')),
-        uid = _useState[0];
+    _proto.getTypeSchema = function getTypeSchema(path, name) {
+      try {
+        var _this25 = this;
 
-    var _useState2 = React.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__default['default'].useRef();
-    React.useEffect(function () {
-      setMounted(true);
-    }, []);
-    React.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__default['default'].createElement("div", {
-      className: "field"
-    }, id && placeholder ? /*#__PURE__*/React__default['default'].createElement("label", {
-      className: "label",
-      htmlFor: id
-    }, placeholder) : null, /*#__PURE__*/React__default['default'].createElement("div", {
-      className: classnames(cssControl())
-    }, /*#__PURE__*/React__default['default'].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__default['default'].createElement(ErrorZone, {
-      className: errorZoneClassName,
-      id: uid
-    }, state.hasError ? theError : ''));
-  });
-  Input.propTypes = {
-    icon: PropTypes__default['default'].node,
-    iconPosition: PropTypes__default['default'].arrayOf(PropTypes__default['default'].oneOf(['has-icons-left', 'has-icons-right', ''])),
-    error: PropTypes__default['default'].string,
-    errorZoneClassName: PropTypes__default['default'].string,
-    autoComplete: PropTypes__default['default'].string,
-    autoFocus: PropTypes__default['default'].bool,
-    className: PropTypes__default['default'].string,
-    disabled: PropTypes__default['default'].bool,
-    loading: PropTypes__default['default'].bool,
-    isSubmitted: PropTypes__default['default'].bool,
-    id: PropTypes__default['default'].string,
-    name: PropTypes__default['default'].string,
-    onChange: PropTypes__default['default'].func,
-    onKeyDown: PropTypes__default['default'].func,
-    onKeyUp: PropTypes__default['default'].func,
-    onPressEnter: PropTypes__default['default'].func,
-    placeholder: PropTypes__default['default'].string,
-    readOnly: PropTypes__default['default'].bool,
-    required: PropTypes__default['default'].bool,
-    type: PropTypes__default['default'].string,
-    value: PropTypes__default['default'].oneOfType([PropTypes__default['default'].string, PropTypes__default['default'].number, PropTypes__default['default'].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__default['default'].createElement(Input, _extends({
-      type: "email",
-      validator: isEmail,
-      errorMessage: "Email address invalid",
-      value: value,
-      "data-test": dataTest,
-      icon: /*#__PURE__*/React__default['default'].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__default['default'].createElement("div", {
-      "data-test": dataTest
-    }, title && /*#__PURE__*/React__default['default'].createElement("div", {
-      className: "level"
-    }, /*#__PURE__*/React__default['default'].createElement("h1", {
-      className: "title is-size-4"
-    }, title)), error && /*#__PURE__*/React__default['default'].createElement("div", {
-      className: "notification is-danger"
-    }, error), /*#__PURE__*/React__default['default'].createElement("form", _extends({
-      onSubmit: handleSubmit,
-      onReset: onReset,
-      autoComplete: autoComplete,
-      className: classnames(['form', className])
-    }, rest), children));
-  };
-  Form.propTypes = {
-    children: PropTypes__default['default'].node.isRequired,
-    className: PropTypes__default['default'].string,
-    onSubmit: PropTypes__default['default'].func,
-    onReset: PropTypes__default['default'].func,
-    autoComplete: PropTypes__default['default'].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__default['default'].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__default['default'].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__default['default'].createElement(Tag, props);
     };
 
-    var children_ = React__default['default'].Children.map(children, function (child) {
-      return React__default['default'].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__default['default'].createElement(Form, _extends({
-      onSubmit: changes
-    }, rest), fields.map(function (field) {
-      return /*#__PURE__*/React__default['default'].createElement(GetTag, {
-        field: field,
-        key: field
-      });
-    }), children_, submitButton && /*#__PURE__*/React__default['default'].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__default['default'].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 = React.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__default['default'].createElement("div", {
-      className: "field"
-    }, id && placeholder ? /*#__PURE__*/React__default['default'].createElement("label", {
-      className: "label",
-      htmlFor: id
-    }, placeholder) : null, /*#__PURE__*/React__default['default'].createElement("div", {
-      className: classnames(cssWrap)
-    }, /*#__PURE__*/React__default['default'].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__default['default'].createElement("option", _extends({
-        key: index.toString()
-      }, rest), text);
-    }))), error && /*#__PURE__*/React__default['default'].createElement(ErrorZone, {
-      className: errorZoneClassName,
-      id: uid
-    }, error ? error : ''));
-  });
-  Select.propTypes = {
-    error: PropTypes__default['default'].string,
-    disabled: PropTypes__default['default'].bool,
-    loading: PropTypes__default['default'].bool,
-    isSubmitted: PropTypes__default['default'].bool,
-    size: PropTypes__default['default'].number,
-    onChange: PropTypes__default['default'].func,
-    options: PropTypes__default['default'].arrayOf(PropTypes__default['default'].object),
-    multiple: PropTypes__default['default'].bool,
-    className: PropTypes__default['default'].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) {
@@ -2799,7 +2827,7 @@
         // eslint-disable-next-line jsx-a11y/anchor-is-valid
         React__default['default'].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);
@@ -2815,61 +2843,6 @@
     }))));
   }
 
-  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__default['default'].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__default['default'].createElement("div", {
-            key: item
-          }, /*#__PURE__*/React__default['default'].createElement(RenderField, {
-            value: item
-          }));
-        });
-      }
-
-      return Object.keys(value).map(function (key) {
-        return /*#__PURE__*/React__default['default'].createElement(FieldValue, {
-          field: key,
-          value: value[key],
-          key: key
-        });
-      });
-    }
-
-    return /*#__PURE__*/React__default['default'].createElement("p", null, "No render for ", JSON.stringify(value));
-  }
-
-  var FieldValue = function FieldValue(_ref2) {
-    var field = _ref2.field,
-        value = _ref2.value;
-    return /*#__PURE__*/React__default['default'].createElement("div", {
-      className: "field"
-    }, /*#__PURE__*/React__default['default'].createElement("div", {
-      className: "label"
-    }, field), /*#__PURE__*/React__default['default'].createElement("div", {
-      className: "value"
-    }, /*#__PURE__*/React__default['default'].createElement(RenderField, {
-      value: value
-    })));
-  };
-
   var formatDate = function formatDate(str) {
     var d = new Date(str);
     var minutes = d.getMinutes() < 10 ? "0" + d.getMinutes() : d.getMinutes();
@@ -2899,86 +2872,6 @@
     });
   }
 
-  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__*/React.createElement("div", {
-      className: "field"
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "label"
-    }, data.filename), /*#__PURE__*/React.createElement("div", {
-      className: "columns"
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "column"
-    }, /*#__PURE__*/React.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__*/React.createElement("div", {
-      className: "column"
-    }, /*#__PURE__*/React.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,
@@ -3002,36 +2895,17 @@
         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');
     React.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 {
@@ -3128,7 +3002,12 @@
         setEdit(!!canModified);
       },
       "data-test": "editableFieldTest-" + field
-    }, /*#__PURE__*/React__default['default'].createElement(RenderField, getRenderProps()), canModified && /*#__PURE__*/React__default['default'].createElement(Icon, {
+    }, /*#__PURE__*/React__default['default'].createElement(RenderFieldComponent, {
+      schema: schema,
+      field: field,
+      val: val,
+      modifyContent: modifyContent
+    }), canModified && /*#__PURE__*/React__default['default'].createElement(Icon, {
       icon: "fas fa-edit"
     })), isEdit && /*#__PURE__*/React__default['default'].createElement("div", {
       className: "field",
@@ -3158,7 +3037,7 @@
         return setEdit(false);
       },
       dataTest: "editableFieldBtnCancelTest"
-    }, "Cancel")), !required && haveDeleteBtn && /*#__PURE__*/React__default['default'].createElement("div", {
+    }, "Cancel")), !required && fieldHaveDeleteButton(schema) && /*#__PURE__*/React__default['default'].createElement("div", {
       className: "control"
     }, /*#__PURE__*/React__default['default'].createElement(Button, {
       className: "is-small is-danger",
@@ -3167,6 +3046,172 @@
     }, "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__*/React.createElement("div", {
+      className: "field"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "label"
+    }, data.filename), /*#__PURE__*/React.createElement("div", {
+      className: "columns"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "column"
+    }, /*#__PURE__*/React.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__*/React.createElement("div", {
+      className: "column"
+    }, /*#__PURE__*/React.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__default['default'].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__default['default'].createElement("div", {
+            key: item
+          }, /*#__PURE__*/React__default['default'].createElement(RenderField, {
+            value: item
+          }));
+        });
+      }
+
+      return Object.keys(value).map(function (key) {
+        return /*#__PURE__*/React__default['default'].createElement(FieldValue, {
+          field: key,
+          value: value[key],
+          key: key
+        });
+      });
+    }
+
+    return /*#__PURE__*/React__default['default'].createElement("p", null, "No render for ", JSON.stringify(value));
+  }
+
+  var FieldValue = function FieldValue(_ref2) {
+    var field = _ref2.field,
+        value = _ref2.value;
+    return /*#__PURE__*/React__default['default'].createElement("div", {
+      className: "field"
+    }, /*#__PURE__*/React__default['default'].createElement("div", {
+      className: "label"
+    }, field), /*#__PURE__*/React__default['default'].createElement("div", {
+      className: "value"
+    }, /*#__PURE__*/React__default['default'].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__default['default'].createElement(RenderField, getRenderProps());
+  }
+
   function IAttachment(_ref) {
     var properties = _ref.properties,
         values = _ref.values;
@@ -3730,7 +3775,9 @@
    * and it select/unselect all items of the page.
    */
 
-  function AllItemsCheckbox() {
+  function AllItemsCheckbox(_ref2) {
+    var dataTest = _ref2.dataTest;
+
     var _useContext = React.useContext(ItemsActionsCtx),
         onSelectAllItems = _useContext.onSelectAllItems,
         selected = _useContext.selected;
@@ -3741,15 +3788,17 @@
       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 = React.useContext(ItemsActionsCtx),
         selected = _useContext2.selected,
@@ -3762,7 +3811,8 @@
       onChange: function onChange() {
         return onSelectOneItem(item);
       },
-      value: value
+      value: value,
+      dataTest: dataTest
     });
   }
   /**
@@ -3795,7 +3845,9 @@
         });
       },
       options: options
-    }, "Choose action...");
+    }, /*#__PURE__*/React__default['default'].createElement("div", {
+      "data-test": "btnChooseActionTest"
+    }, "Choose action..."));
   }
 
   /* eslint jsx-a11y/anchor-is-valid: "off" */
@@ -4046,7 +4098,8 @@
     }, /*#__PURE__*/React__default['default'].createElement("td", {
       style: smallcss
     }, /*#__PURE__*/React__default['default'].createElement(ItemCheckbox, {
-      item: item
+      item: item,
+      dataTest: "itemCheckboxRowTest"
     })), columns.map(function (i) {
       return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, {
         key: i.label
@@ -5844,7 +5897,7 @@
         items = _props$items === void 0 ? [] : _props$items;
     return /*#__PURE__*/React__default['default'].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();
@@ -5860,12 +5913,15 @@
       }, "New id for \"" + item.id + "\" copy"), /*#__PURE__*/React__default['default'].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] || {};
@@ -5898,7 +5954,7 @@
     var item = props.item;
     return /*#__PURE__*/React__default['default'].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();
@@ -5911,6 +5967,7 @@
     }, "New id for \"" + item['@name'] + "\" copy"), /*#__PURE__*/React__default['default'].createElement("input", {
       type: "text",
       className: "input",
+      "data-test": "inputCopyIdTest-" + item['@name'],
       defaultValue: getNewId(item['@name'])
     })));
   }
@@ -6406,7 +6463,7 @@
     }, /*#__PURE__*/React__default['default'].createElement("h3", {
       className: "title is-size-6"
     }, "Users"), /*#__PURE__*/React__default['default'].createElement("p", null, "Add a User"), /*#__PURE__*/React__default['default'].createElement(SearchInput, {
-      path: getContainerFromPath(Ctx.path),
+      path: Ctx.containerPath,
       qs: [].concat(searchParsed, sortParsed),
       traversal: Ctx,
       onChange: addUser,
@@ -6539,7 +6596,8 @@
         key: indx
       }, /*#__PURE__*/React__default['default'].createElement("a", {
         href: path,
-        onClick: onClick
+        onClick: onClick,
+        "data-test": "breadcrumbItemTest-home"
       }, /*#__PURE__*/React__default['default'].createElement("span", {
         className: "icon"
       }, /*#__PURE__*/React__default['default'].createElement("i", {
@@ -6710,7 +6768,8 @@
     properties: {},
     components: {
       Path: Path,
-      EditComponent: EditComponent
+      EditComponent: EditComponent,
+      RenderFieldComponent: RenderFieldComponent
     },
     searchEngineQueryParamsFunction: {
       PostreSQL: 'getQueryParamsPostresql',
@@ -7065,148 +7124,126 @@
     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__default['default'].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 = React.useRef(null);
+    React.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__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("form", {
-        className: "login__form",
-        action: "",
-        onSubmit: this.doLogin,
-        "data-test": "formLoginTest"
-      }, /*#__PURE__*/React__default['default'].createElement("div", {
-        className: "field"
-      }, /*#__PURE__*/React__default['default'].createElement("label", {
-        className: "label"
-      }, "Username:"), /*#__PURE__*/React__default['default'].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__default['default'].createElement("div", {
-        className: "field"
-      }, /*#__PURE__*/React__default['default'].createElement("label", {
-        className: "label"
-      }, "Password:"), /*#__PURE__*/React__default['default'].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__default['default'].createElement("div", {
-        className: "field"
-      }, /*#__PURE__*/React__default['default'].createElement("label", {
-        className: "label"
-      }, "Schema:"), /*#__PURE__*/React__default['default'].createElement("div", {
-        className: "select"
-      }, /*#__PURE__*/React__default['default'].createElement("select", {
-        onChange: function onChange(e) {
-          return _this2.setState({
-            schema: e.target.value
-          });
-        }
-      }, schemas.map(function (s) {
-        return /*#__PURE__*/React__default['default'].createElement("option", {
-          value: s,
-          key: s
-        }, s);
-      })))), /*#__PURE__*/React__default['default'].createElement("div", {
-        className: "field"
-      }, /*#__PURE__*/React__default['default'].createElement("button", {
-        className: "button is-warning",
-        type: "submit",
-        "data-test": "btnLoginTest"
-      }, "Login")), /*#__PURE__*/React__default['default'].createElement("div", {
-        className: "field"
-      }, errors && /*#__PURE__*/React__default['default'].createElement("p", {
-        className: "has-text-danger"
-      }, ERRORS[errors] || 'Generic error'))));
-    };
-
-    return Login;
-  }(React.Component);
+    return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("form", {
+      className: "login__form",
+      action: "",
+      onSubmit: doLogin,
+      "data-test": "formLoginTest"
+    }, /*#__PURE__*/React__default['default'].createElement("div", {
+      className: "field"
+    }, /*#__PURE__*/React__default['default'].createElement("label", {
+      className: "label"
+    }, "Username:"), /*#__PURE__*/React__default['default'].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__default['default'].createElement("div", {
+      className: "field"
+    }, /*#__PURE__*/React__default['default'].createElement("label", {
+      className: "label"
+    }, "Password:"), /*#__PURE__*/React__default['default'].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__default['default'].createElement("div", {
+      className: "field"
+    }, /*#__PURE__*/React__default['default'].createElement("label", {
+      className: "label"
+    }, "Schema:"), /*#__PURE__*/React__default['default'].createElement("div", {
+      className: "select"
+    }, /*#__PURE__*/React__default['default'].createElement("select", {
+      "data-test": "selectSchemaTest",
+      onChange: function onChange(e) {
+        return setCurrentSchema(e.target.value);
+      }
+    }, schemas.map(function (s) {
+      return /*#__PURE__*/React__default['default'].createElement("option", {
+        value: s,
+        key: s
+      }, s);
+    })))), /*#__PURE__*/React__default['default'].createElement("div", {
+      className: "field"
+    }, /*#__PURE__*/React__default['default'].createElement("button", {
+      className: "button is-warning",
+      type: "submit",
+      "data-test": "btnLoginTest"
+    }, "Login")), /*#__PURE__*/React__default['default'].createElement("div", {
+      className: "field"
+    }, state.errors && /*#__PURE__*/React__default['default'].createElement("p", {
+      className: "has-text-danger"
+    }, ERRORS[state.errors] || 'Generic error'))));
+  };
 
   function _catch$3(body, recover) {
     try {
@@ -7661,6 +7698,7 @@
   exports.RItem = RItem;
   exports.RemoveItems = RemoveItems;
   exports.RenderField = RenderField;
+  exports.RenderFieldComponent = RenderFieldComponent;
   exports.RequiredFieldsForm = RequiredFieldsForm;
   exports.RestClient = RestClient;
   exports.SearchInput = SearchInput;
@@ -7688,7 +7726,6 @@
   exports.generateUID = generateUID;
   exports.get = get$1;
   exports.getClient = getClient;
-  exports.getContainerFromPath = getContainerFromPath;
   exports.getNewId = getNewId;
   exports.isEmail = isEmail;
   exports.isEmpty = isEmpty;