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

package/dist/react-gmi.js

@@ -149,6 +149,7 @@ var Traversal = /*#__PURE__*/function () {
   };
 
   _proto.apply = function apply(data) {
+    // apply a optimistic update to context
     this.dispatch({
       type: 'APPLY',
       payload: data
@@ -771,8 +772,10 @@ function base64ToArrayBuffer(base64) {
   return bytes;
 }
 function stringToSlug(str) {
-  str = str.replace(/^\s+|\s+$/g, '');
-  str = str.toLowerCase();
+  str = str.replace(/^\s+|\s+$/g, ''); // trim
+
+  str = str.toLowerCase(); // remove accents, swap ñ for n, etc
+
   var from = 'àáäâèéëêìíïîòóöôùúüûñç·/_,:;';
   var to = 'aaaaeeeeiiiioooouuuunc------';
 
@@ -780,7 +783,10 @@ function stringToSlug(str) {
     str = str.replace(new RegExp(from.charAt(i), 'g'), to.charAt(i));
   }
 
-  str = str.replace(/[^a-z0-9 -]/g, '').replace(/\s+/g, '-').replace(/-+/g, '-');
+  str = str.replace(/[^a-z0-9 -]/g, '') // remove invalid chars
+  .replace(/\s+/g, '-') // collapse whitespace and replace by -
+  .replace(/-+/g, '-'); // collapse dashes
+
   return str;
 }
 function sleep(ms) {
@@ -924,7 +930,8 @@ function Confirm(_ref) {
       })]
     })]
   });
-}
+} // @todo Improve it... Replacing the inputText to a tree
+
 function PathTree(_ref2) {
   var title = _ref2.title,
       defaultPath = _ref2.defaultPath,
@@ -1295,6 +1302,7 @@ var Config = {
   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';
   }
@@ -1351,7 +1359,9 @@ function RemoveItems(props) {
         } catch (e) {
           return Promise.reject(e);
         }
-      });
+      }); // this sleep is here, to let elasticsearch, wait for
+      // index our operations... (will work 99% of use cases)
+
       actions.push(sleep(cfg.DelayActions));
       return Promise.resolve(Promise.all(actions)).then(function () {
         if (errors.length === 0) {
@@ -1521,6 +1531,9 @@ var useInput = function useInput(onChange, value, validator) {
   };
 };
 
+// From github.com/protonmail/proton-shared
+
+/* 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;
@@ -1636,7 +1649,8 @@ var Input = React.forwardRef(function (_ref, ref) {
 
   var _useState2 = React.useState(false),
       mounted = _useState2[0],
-      setMounted = _useState2[1];
+      setMounted = _useState2[1]; // eslint-disable-next-line
+
 
   ref = ref || React.useRef();
   React.useEffect(function () {
@@ -1704,7 +1718,8 @@ var EmailInput = function EmailInput(_ref) {
       value = _ref$value === void 0 ? '' : _ref$value,
       dataTest = _ref.dataTest,
       placeholder = _ref.placeholder,
-      id = _ref.id;
+      id = _ref.id,
+      onChange = _ref.onChange;
   var intl = reactIntl.useIntl();
   return jsxRuntime.jsx(Input, {
     type: "email",
@@ -1722,7 +1737,8 @@ var EmailInput = function EmailInput(_ref) {
       icon: "fas fa-envelope"
     }),
     id: id,
-    placeholder: placeholder
+    placeholder: placeholder,
+    onChange: onChange
   });
 };
 
@@ -1799,14 +1815,15 @@ function FormBuilder(_ref) {
   var ref = React.useRef();
   var properties = schema.properties,
       required = schema.required;
-  var values = Object.assign({}, formData || {});
+  var values = Object.assign({}, formData || {}); // build initial state
+
   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
 
   if (!ref.current) {
     ref.current = {};
@@ -1814,6 +1831,7 @@ function FormBuilder(_ref) {
       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];
@@ -1967,166 +1985,7 @@ var Select = React.forwardRef(function (_ref, ref) {
 });
 Select.displayName = 'Select';
 
-var formatDate = function formatDate(str) {
-  var d = new Date(str);
-  var minutes = d.getMinutes() < 10 ? "0" + d.getMinutes() : d.getMinutes();
-  return d.getDate() + "/" + (d.getMonth() + 1) + "/" + d.getFullYear() + " " + d.getHours() + ":" + minutes;
-};
-var get$1 = function get(obj, path, defValue) {
-  var _pathArray$reduce;
-
-  if (!path) return undefined;
-  var pathArray = Array.isArray(path) ? path : path.match(/([^[.\]])+/g);
-  return (_pathArray$reduce = pathArray.reduce(function (prevObj, key) {
-    return prevObj && prevObj[key];
-  }, obj)) != null ? _pathArray$reduce : defValue;
-};
-function getNewId(id) {
-  if (id === void 0) {
-    id = '';
-  }
-
-  var suffix = '-copy-';
-  var rgx = new RegExp("($|" + suffix + "\\d*)");
-  return stringToSlug(id).replace(rgx, function (r) {
-    var num = parseInt(r.replace(suffix, '') || '0');
-    return "" + suffix + (num + 1);
-  });
-}
-
-function _catch$1(body, recover) {
-  try {
-    var result = body();
-  } catch (e) {
-    return recover(e);
-  }
-
-  if (result && result.then) {
-    return result.then(void 0, recover);
-  }
-
-  return result;
-}
-
-function useVocabulary(vocabularyName, path) {
-  if (path === void 0) {
-    path = null;
-  }
-
-  var traversal = useTraversal();
-
-  var _useSetState = useSetState({
-    data: undefined,
-    loading: false,
-    error: undefined
-  }),
-      vocabulary = _useSetState[0],
-      setVocabulary = _useSetState[1];
-
-  var getPath = function getPath() {
-    if (path) return path;
-    return traversal.path + "@vocabularies/" + vocabularyName;
-  };
-
-  React.useEffect(function () {
-    var getVocabulary = function getVocabulary() {
-      try {
-        var _temp3 = function () {
-          if (vocabularyName && vocabulary.data === undefined && !vocabulary.loading) {
-            var _temp4 = _catch$1(function () {
-              setVocabulary({
-                loading: true
-              });
-              return Promise.resolve(traversal.client.get(getPath())).then(function (data) {
-                return Promise.resolve(data.json()).then(function (dataJson) {
-                  setVocabulary({
-                    loading: false,
-                    data: dataJson
-                  });
-                });
-              });
-            }, function (err) {
-              setVocabulary({
-                loading: false,
-                error: err,
-                data: undefined
-              });
-            });
-
-            if (_temp4 && _temp4.then) return _temp4.then(function () {});
-          }
-        }();
-
-        return Promise.resolve(_temp3 && _temp3.then ? _temp3.then(function () {}) : void 0);
-      } catch (e) {
-        return Promise.reject(e);
-      }
-    };
-
-    getVocabulary();
-  }, [vocabularyName, vocabulary, path]);
-  return vocabulary;
-}
-
-var SelectVocabulary = React.forwardRef(function (_ref, ref) {
-  var vocabularyName = _ref.vocabularyName,
-      className = _ref.className,
-      classWrap = _ref.classWrap,
-      val = _ref.val,
-      dataTest = _ref.dataTest,
-      multiple = _ref.multiple,
-      onChange = _ref.onChange,
-      id = _ref.id,
-      placeholder = _ref.placeholder;
-  var vocabulary = useVocabulary(vocabularyName);
-
-  var getOptions = function getOptions() {
-    if (get$1(vocabulary, 'data.items', null)) {
-      var vocData = vocabulary.data.items.map(function (item) {
-        return {
-          text: item.title,
-          value: item.token
-        };
-      });
-      return vocData;
-    }
-
-    return [];
-  };
-
-  var getProps = function getProps() {
-    if (multiple) {
-      var currentValue = val || [];
-      return {
-        multiple: true,
-        size: 5,
-        value: currentValue,
-        options: getOptions()
-      };
-    }
-
-    return {
-      value: val != null ? val : '',
-      appendDefault: true,
-      options: getOptions()
-    };
-  };
-
-  if (vocabulary.data === undefined || vocabulary.loading) {
-    return jsxRuntime.jsx("div", {});
-  }
-
-  return jsxRuntime.jsx(Select, _extends({}, getProps(), {
-    className: className,
-    classWrap: classWrap || 'is-fullwidth',
-    dataTest: dataTest,
-    ref: ref,
-    onChange: onChange,
-    id: id,
-    placeholder: placeholder
-  }));
-});
-SelectVocabulary.displayName = 'SelectVocabulary';
+// https://github.com/molefrog/wouter
 
 var setURLParams = function setURLParams(p) {
   return window.history.pushState(0, '0', '' + '?' + p.toString().replace(/%2F/g, '/'));
@@ -2147,7 +2006,10 @@ var useLocation = function useLocation() {
 
   var prevPath = React.useRef(path);
   React.useEffect(function () {
-    patchHistoryEvents();
+    patchHistoryEvents(); // this function checks if the location has been changed since the
+    // last render and updates the state only when needed.
+    // unfortunately, we can't rely on `path` value here, since it can be stale,
+    // that's why we store the last pathname in a ref.
 
     var checkForUpdates = function checkForUpdates() {
       var pathname = currentSearchParams();
@@ -2157,14 +2019,22 @@ var useLocation = function useLocation() {
     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 () {
       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.
+
   var navigate = React.useCallback(function (to, replace) {
     if (replace) {
       clean(to);
@@ -2183,7 +2053,12 @@ var useLocation = function useLocation() {
     setURLParams(current);
   }, [path]);
   return [path, navigate, remove];
-};
+}; // While History API does have `popstate` event, the only
+// proper way to listen to changes via `push/replaceState`
+// is to monkey-patch these methods.
+//
+// See https://stackoverflow.com/a/4585031
+
 var patched = 0;
 
 var patchHistoryEvents = function patchHistoryEvents() {
@@ -2193,7 +2068,8 @@ var patchHistoryEvents = function patchHistoryEvents() {
 
     window.history[type] = function () {
       var args = [].slice.call(arguments);
-      var result = original.apply(this, args);
+      var result = original.apply(this, args); // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
       var event = new Event(type);
       event.arguments = args;
       dispatchEvent(event);
@@ -2741,7 +2617,8 @@ var GuillotinaClient = /*#__PURE__*/function () {
         });
       }
     }];
-  };
+  } // BBB API changes. Compat G5 and G6
+  ;
 
   _proto.applyCompat = function applyCompat(data) {
     data.member = data.items;
@@ -2901,7 +2778,8 @@ var GuillotinaClient = /*#__PURE__*/function () {
 
       var _temp4 = function () {
         if (!cacheSchemas[name]) {
-          var url = _this25.getContainerFromPath(path);
+          var url = _this25.getContainerFromPath(path); // todo: handle db case (only addable containers)
+
 
           return Promise.resolve(_this25.rest.get(url + "@types/" + name)).then(function (res) {
             return Promise.resolve(res.json()).then(function (_res$json) {
@@ -3020,6 +2898,7 @@ var GuillotinaClient = /*#__PURE__*/function () {
     try {
       var _this41 = this;
 
+      // paths used to query the API always has to start without a "/"
       if (path.startsWith('/')) {
         path = path.slice(1);
       }
@@ -3248,10 +3127,43 @@ function useClickAway(ref, onClickAway, events) {
   }, [events, ref]);
 }
 
+var formatDate = function formatDate(str) {
+  var d = new Date(str);
+  var minutes = d.getMinutes() < 10 ? "0" + d.getMinutes() : d.getMinutes();
+  return d.getDate() + "/" + (d.getMonth() + 1) + "/" + d.getFullYear() + " " + d.getHours() + ":" + minutes;
+};
+var get$1 = function get(obj, path, defValue) {
+  var _pathArray$reduce;
+
+  // If path is not defined or it has false value
+  if (!path) return undefined; // Check if path is string or array. Regex : ensure that we do not have '.' and brackets.
+  // Regex explained: https://regexr.com/58j0k
+
+  var pathArray = Array.isArray(path) ? path : path.match(/([^[.\]])+/g); // Find value if exist return otherwise return undefined value;
+
+  return (_pathArray$reduce = pathArray.reduce(function (prevObj, key) {
+    return prevObj && prevObj[key];
+  }, obj)) != null ? _pathArray$reduce : defValue;
+};
+function getNewId(id) {
+  if (id === void 0) {
+    id = '';
+  }
+
+  var suffix = '-copy-';
+  var rgx = new RegExp("($|" + suffix + "\\d*)");
+  return stringToSlug(id).replace(rgx, function (r) {
+    var num = parseInt(r.replace(suffix, '') || '0');
+    return "" + suffix + (num + 1);
+  });
+}
+
 function debounce(func, wait) {
   var timeout;
   return function () {
-    var context = this;
+    // eslint-disable-next-line @typescript-eslint/no-this-alias
+    var context = this; // eslint-disable-next-line prefer-rest-params
+
     var args = arguments;
 
     var later = function later() {
@@ -3580,7 +3492,9 @@ var SearchInput = function SearchInput(_ref) {
 function debounce$1(func, wait) {
   var timeout;
   return function () {
-    var context = this;
+    // eslint-disable-next-line @typescript-eslint/no-this-alias
+    var context = this; // eslint-disable-next-line prefer-rest-params
+
     var args = arguments;
 
     var later = function later() {
@@ -4261,7 +4175,8 @@ var DownloadField = function DownloadField(_ref) {
           var blob = new Blob([text], {
             type: data.content_type
           });
-          var url = window.URL.createObjectURL(blob);
+          var url = window.URL.createObjectURL(blob); // Create blob link to download
+
           var link = document.createElement('a');
           link.href = url;
 
@@ -4276,6 +4191,7 @@ var DownloadField = function DownloadField(_ref) {
           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);
@@ -4330,6 +4246,80 @@ var DownloadField = function DownloadField(_ref) {
   });
 };
 
+function _catch$1(body, recover) {
+  try {
+    var result = body();
+  } catch (e) {
+    return recover(e);
+  }
+
+  if (result && result.then) {
+    return result.then(void 0, recover);
+  }
+
+  return result;
+}
+
+function useVocabulary(vocabularyName, path) {
+  if (path === void 0) {
+    path = null;
+  }
+
+  var traversal = useTraversal();
+
+  var _useSetState = useSetState({
+    data: undefined,
+    loading: false,
+    error: undefined
+  }),
+      vocabulary = _useSetState[0],
+      setVocabulary = _useSetState[1];
+
+  var getPath = function getPath() {
+    if (path) return path;
+    return traversal.path + "@vocabularies/" + vocabularyName;
+  };
+
+  React.useEffect(function () {
+    var getVocabulary = function getVocabulary() {
+      try {
+        var _temp3 = function () {
+          if (vocabularyName && vocabulary.data === undefined && !vocabulary.loading) {
+            var _temp4 = _catch$1(function () {
+              setVocabulary({
+                loading: true
+              });
+              return Promise.resolve(traversal.client.get(getPath())).then(function (data) {
+                return Promise.resolve(data.json()).then(function (dataJson) {
+                  setVocabulary({
+                    loading: false,
+                    data: dataJson
+                  });
+                });
+              });
+            }, function (err) {
+              setVocabulary({
+                loading: false,
+                error: err,
+                data: undefined
+              });
+            });
+
+            if (_temp4 && _temp4.then) return _temp4.then(function () {});
+          }
+        }();
+
+        return Promise.resolve(_temp3 && _temp3.then ? _temp3.then(function () {}) : void 0);
+      } catch (e) {
+        return Promise.reject(e);
+      }
+    };
+
+    getVocabulary();
+  }, [vocabularyName, vocabulary, path]);
+  return vocabulary;
+}
+
 var plain = ['string', 'number', 'boolean'];
 function RenderField(_ref) {
   var value = _ref.value,
@@ -4574,6 +4564,66 @@ function RenderFieldComponent(_ref5) {
   return jsxRuntime.jsx(RenderField, _extends({}, getRenderProps()));
 }
 
+var SelectVocabulary = React.forwardRef(function (_ref, ref) {
+  var vocabularyName = _ref.vocabularyName,
+      className = _ref.className,
+      classWrap = _ref.classWrap,
+      val = _ref.val,
+      dataTest = _ref.dataTest,
+      multiple = _ref.multiple,
+      onChange = _ref.onChange,
+      id = _ref.id,
+      placeholder = _ref.placeholder;
+  var vocabulary = useVocabulary(vocabularyName);
+
+  var getOptions = function getOptions() {
+    if (get$1(vocabulary, 'data.items', null)) {
+      var vocData = vocabulary.data.items.map(function (item) {
+        return {
+          text: item.title,
+          value: item.token
+        };
+      });
+      return vocData;
+    }
+
+    return [];
+  };
+
+  var getProps = function getProps() {
+    if (multiple) {
+      var currentValue = val || [];
+      return {
+        multiple: true,
+        size: 5,
+        value: currentValue,
+        options: getOptions()
+      };
+    }
+
+    return {
+      value: val != null ? val : '',
+      appendDefault: true,
+      options: getOptions()
+    };
+  };
+
+  if (vocabulary.data === undefined || vocabulary.loading) {
+    return jsxRuntime.jsx("div", {});
+  }
+
+  return jsxRuntime.jsx(Select, _extends({}, getProps(), {
+    className: className,
+    classWrap: classWrap || 'is-fullwidth',
+    dataTest: dataTest,
+    ref: ref,
+    onChange: onChange,
+    id: id,
+    placeholder: placeholder
+  }));
+});
+SelectVocabulary.displayName = 'SelectVocabulary';
+
 var EditComponent = React.forwardRef(function (_ref, ref) {
   var schema = _ref.schema,
       val = _ref.val,
@@ -6130,6 +6180,7 @@ var ItemModel = /*#__PURE__*/function () {
   _createClass(ItemModel, [{
     key: "path",
     get: function get() {
+      // Compat
       var item = this.item['@id'] ? this.item['@id'] : this.item['@absolute_url'];
       var path = item.split('//')[1].split('/').splice(1).join('/');
       path = "/" + path + "/";
@@ -6152,6 +6203,7 @@ var ItemModel = /*#__PURE__*/function () {
   }, {
     key: "icon",
     get: function get() {
+      // eslint-disable-next-line
       var cfg = useConfig();
 
       if (cfg.icons && cfg.icons[this.type]) {
@@ -6464,7 +6516,8 @@ var messages$2 = reactIntl.defineMessages({
       "value": "Installed Addons"
     }]
   }
-});
+}); // TODO: Refactor without useAsync... just crudContext
+
 function PanelAddons() {
   var _state$data$available, _state$data, _state$data$available2, _state$data2, _state$data$installed, _state$data3, _state$data$installed2, _state$data4;
 
@@ -6817,6 +6870,11 @@ function ItemsActionsProvider(_ref) {
     children: children
   });
 }
+/**
+ * Checkbox component without props that consume the ItemsActionsContext
+ * and it select/unselect all items of the page.
+ */
+
 function AllItemsCheckbox(_ref2) {
   var dataTest = _ref2.dataTest;
 
@@ -6848,6 +6906,10 @@ function ItemCheckbox(_ref3) {
     dataTest: dataTest
   });
 }
+/**
+ * Dropdown to choose some action to apply to the selected items.
+ */
+
 function ItemsActionsDropdown() {
   var intl = reactIntl.useIntl();
   var ACTIONS_OBJECT = getActionsObject(intl, true);
@@ -6939,6 +7001,7 @@ function Pagination(_ref) {
       "aria-label": "pagination",
       children: [jsxRuntime.jsx("a", {
         className: "pagination-previous is-small",
+        // disabled={current === 0}
         onClick: function onClick() {
           return current > 0 ? doPaginate(current - 1) : null;
         },
@@ -6950,6 +7013,7 @@ function Pagination(_ref) {
         })
       }), jsxRuntime.jsx("a", {
         className: "pagination-next is-small",
+        // disabled={current >= maxPages - 1}
         onClick: function onClick() {
           return doPaginate(current + 1);
         },
@@ -7305,7 +7369,7 @@ function PanelItems() {
           key: 'id',
           direction: 'des'
         });
-        sortParsed = parser("_sort_" + defaultSortValue.direction + "=" + defaultSortValue.key + "}");
+        sortParsed = parser("_sort_" + defaultSortValue.direction + "=" + defaultSortValue.key);
       }
 
       var qsParsed = Ctx.client[fnName]({
@@ -7315,12 +7379,14 @@ function PanelItems() {
       });
       var qs = '';
 
-      if (search || type || sort || resultQueryParams.length > 0) {
+      if (search || type || resultQueryParams.length > 0) {
         var _searchParsed, _typeParsed, _sortParsed;
 
         qs = buildQs([].concat(qsParsed, (_searchParsed = searchParsed) != null ? _searchParsed : [], (_typeParsed = typeParsed) != null ? _typeParsed : [], (_sortParsed = sortParsed) != null ? _sortParsed : [], resultQueryParams));
       } else {
-        qs = buildQs(qsParsed);
+        var _sortParsed2;
+
+        qs = buildQs([].concat(qsParsed, (_sortParsed2 = sortParsed) != null ? _sortParsed2 : []));
       }
 
       var signal = controller.signal;
@@ -8645,7 +8711,8 @@ function CreateButton() {
 
   if (state.types && state.types.length === 0) {
     return null;
-  }
+  } // Implement some kind of filtering
+
 
   return jsxRuntime.jsx(Dropdown, {
     id: "dropdown-menu",
@@ -8822,6 +8889,11 @@ function TabsPanel(_ref2) {
   } else {
     currentTab = currentTab || Object.keys(tabs)[0];
   }
+  /*if (!Object.keys(tabs).includes(currentTab)) {
+    setLocation(defaultTab)
+    currentTab = defaultTab
+  }*/
+
 
   var _useState = React.useState(currentTab),
       current = _useState[0],
@@ -8830,7 +8902,7 @@ function TabsPanel(_ref2) {
   var CurrentComp = tabs[current] || fallback;
   React__default['default'].useEffect(function () {
     if (Object.keys(tabs).includes(currentTab)) {
-      setTab(currentTab);
+      setTab(currentTab); // setLocation({tab: currentTab})
     }
   }, [currentTab, tabs]);
 
@@ -9260,7 +9332,8 @@ function UsersToolbar() {
       page: 0
     });
     ev.preventDefault();
-  };
+  }; // cleanup form on state.search change
+
 
   React.useEffect(function () {
     if (!searchText || searchText === '') {
@@ -9998,7 +10071,8 @@ function GroupToolbar() {
       page: 0
     });
     ev.preventDefault();
-  };
+  }; // cleanup form on state.search change
+
 
   React.useEffect(function () {
     if (!searchText || searchText === '') {
@@ -10619,11 +10693,13 @@ var getComponent = function getComponent(context, path, fallback) {
     fallback = undefined;
   }
 
-  if (!context) return;
+  if (!context) return; // console.log("Component for path", path)
+  // lookup by path
 
   if (registry.paths[path]) {
     return registry.paths[path];
-  }
+  } // by type
+
 
   if (registry.views[context['@type']]) {
     return registry.views[context['@type']];
@@ -10672,6 +10748,17 @@ var getProperties = function getProperties(type) {
 
 var getSchemas = function getSchemas(type) {
   return registry.schemas[type] || {};
+  /*
+    filters: [
+      {
+        attribute_key: string,
+        label: string,
+        type: 'select' | 'input'
+        vocabulary: string | undefined
+        values: {[key:string]:any}[]
+      }
+    ]
+  */
 };
 
 var getFieldsToFilter = function getFieldsToFilter(type, fallback) {
@@ -10686,6 +10773,7 @@ var defaultComponent = function defaultComponent(context) {
   return context.is_folderish ? FolderCtx : ItemCtx;
 };
 function useRegistry(data) {
+  // if data is provided we need to merge it into actual registry
   var ref = React__default['default'].useRef();
 
   if (data && !ref.current) {
@@ -10709,6 +10797,22 @@ function useRegistry(data) {
     getSchemas: getSchemas
   };
 }
+/*
+
+const registry = {
+  paths: {
+    "/db/guillotina/tags/": TagsContext
+  },
+  forms: {
+    Tag: AddTagForm
+  }
+}
+
+
+<guillotina registry={registry} />
+
+
+*/
 
 var initialState$4 = {
   path: '',
@@ -13596,17 +13700,19 @@ function Guillotina(_ref) {
       props = _objectWithoutPropertiesLoose(_ref, ["auth", "locale"]);
 
   var messages = loadLocaleData(locale);
-  var url = props.url || 'http://localhost:8080';
+  var url = props.url || 'http://localhost:8080'; // without trailing slash
+
   var config = props.config || {};
   var client = useGuillotinaClient();
 
   var _useConfig = useConfig(config),
       Permissions = _useConfig.Permissions;
 
-  var registry = useRegistry(props.registry || {});
+  var registry = useRegistry(props.registry || {}); // Location is cooked routing solution (only uses search params)
 
   var _useLocation = useLocation(),
-      location = _useLocation[0];
+      location = _useLocation[0]; // if there is no path provided just go to root
+
 
   var searchPath = location.get('path') || '/';
 
@@ -14200,6 +14306,7 @@ var Auth = /*#__PURE__*/function () {
         method: 'post'
       })).then(function (data) {
         if (data.status === 401) {
+          // invalid token
           _this4.cleanAuth();
 
           _this4.logout();