ywana-core8 0.0.569 → 0.0.572

package/dist/index.modern.js

@@ -1,5 +1,5 @@
 import 'material-design-icons-iconfont/dist/material-design-icons.css';
-import React, { useContext, useState, useEffect, Fragment, useMemo, useRef, Children } from 'react';
+import React, { useState, useContext, useEffect, Fragment, useMemo, useRef, Children } from 'react';
 import RSwitch from 'react-switch';
 import moment$1 from 'moment';
 import { extendMoment } from 'moment-range';
@@ -9,7 +9,7 @@ import { ReactNotifications, Store } from 'react-notifications-component';
 import 'react-notifications-component/dist/theme.css';
 import equal from 'deep-equal';
 
-function _catch$3(body, recover) {
+function _catch$4(body, recover) {
   try {
     var result = body();
   } catch (e) {
@@ -41,7 +41,7 @@ var fetchAsync = function fetchAsync(method, URL, body, token, headers) {
       body: body
     };
     if (headers) request.headers = request.headers;
-    return Promise.resolve(_catch$3(function () {
+    return Promise.resolve(_catch$4(function () {
       return Promise.resolve(fetch(URL, request)).then(function (response) {
         var _exit;
 
@@ -142,6 +142,24 @@ var Session = {
   }
 };
 
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
 /**
  * Icon 
  */
@@ -174,6 +192,99 @@ var Icon = function Icon(_ref) {
   }, icon);
 };
 
+var Accordion = function Accordion(props) {
+  var className = props.className,
+      _props$sections = props.sections,
+      sections = _props$sections === void 0 ? [] : _props$sections,
+      onCheck = props.onCheck;
+
+  var _useState = useState(sections.map(function (section) {
+    return section.open;
+  })),
+      openSections = _useState[0],
+      setOpenSections = _useState[1];
+
+  var _useState2 = useState(sections.map(function (section) {
+    return section.checked;
+  })),
+      checkedSections = _useState2[0],
+      setCheckedSections = _useState2[1];
+
+  function toggle(index) {
+    var next = openSections.map(function (open, i) {
+      return i === index ? !open : open;
+    });
+    setOpenSections(next);
+  }
+
+  function check(index) {
+    var next = checkedSections.map(function (checked, i) {
+      return i === index ? !checked : checked;
+    });
+    setCheckedSections(next);
+    if (onCheck) onCheck(index, next[index], sections[index].id);
+  }
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: "accordion " + className
+  }, sections.map(function (section, index) {
+    var isOpen = openSections[index];
+    var isChecked = checkedSections[index];
+    return /*#__PURE__*/React.createElement(AccordionSection, _extends({
+      key: index
+    }, section, {
+      open: isOpen,
+      checked: isChecked,
+      onToggle: function onToggle() {
+        return toggle(index);
+      },
+      onCheck: function onCheck() {
+        return check(index);
+      }
+    }), section.children);
+  }));
+};
+
+var AccordionSection = function AccordionSection(props) {
+  var checked = props.checked,
+      icon = props.icon,
+      title = props.title,
+      subtitle = props.subtitle,
+      _props$open = props.open,
+      open = _props$open === void 0 ? false : _props$open,
+      onToggle = props.onToggle,
+      onCheck = props.onCheck,
+      toolbar = props.toolbar,
+      info = props.info,
+      children = props.children;
+  var togglerIcon = open ? "expand_less" : "expand_more";
+  var checkedIcon = checked === undefined || checked === null ? null : checked === false ? "check_box_outline_blank" : "check_box";
+  return /*#__PURE__*/React.createElement("section", {
+    className: "accordion-section"
+  }, /*#__PURE__*/React.createElement("header", null, checkedIcon ? /*#__PURE__*/React.createElement(Icon, {
+    className: "accordion-section-checker",
+    icon: checkedIcon,
+    clickable: true,
+    action: onCheck
+  }) : '', icon ? /*#__PURE__*/React.createElement(Icon, {
+    className: "accordion-section-icon",
+    icon: icon
+  }) : '', title ? /*#__PURE__*/React.createElement("div", {
+    className: "accordion-section--title"
+  }, title) : '', subtitle ? /*#__PURE__*/React.createElement("div", {
+    className: "accordion-section--subtitle"
+  }, subtitle) : '', info ? /*#__PURE__*/React.createElement("div", {
+    className: "accordion-section--info"
+  }, info) : '', toolbar ? /*#__PURE__*/React.createElement("div", {
+    className: "accordion-section--toolbar"
+  }, toolbar) : '', /*#__PURE__*/React.createElement(Icon, {
+    className: "accordion-section-toggler",
+    icon: togglerIcon,
+    clickable: true,
+    action: onToggle
+  })), open ? /*#__PURE__*/React.createElement("main", null, children) : '');
+};
+
 /**
  * HTML Button
  */
@@ -493,24 +604,6 @@ var Header = function Header(props) {
   }, props.children));
 };
 
-function _extends() {
-  _extends = Object.assign || function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-
-    return target;
-  };
-
-  return _extends.apply(this, arguments);
-}
-
 /**
  * List
  */
@@ -851,7 +944,7 @@ var Section = function Section(props) {
   };
 
   return /*#__PURE__*/React.createElement("section", {
-    className: "section2 " + className
+    className: "section " + className
   }, /*#__PURE__*/React.createElement(Header, {
     icon: icon,
     title: title
@@ -1374,8 +1467,8 @@ var DropDown = function DropDown(props) {
     if (!readOnly) setOpen(!open);
   }
 
-  function select(event) {
-    var next = event.target.getAttribute("value");
+  function select(value) {
+    var next = value;
     var option = options.find(function (option) {
       return option.value === next;
     });
@@ -1400,12 +1493,13 @@ var DropDown = function DropDown(props) {
       var lis = items.map(function (option) {
         return /*#__PURE__*/React.createElement("li", {
           key: option.value,
-          value: option.value
+          value: option.value,
+          onClick: function onClick() {
+            return select(option.value);
+          }
         }, /*#__PURE__*/React.createElement(Text, null, option.label));
       });
-      return /*#__PURE__*/React.createElement("menu", null, /*#__PURE__*/React.createElement("ul", {
-        onMouseDown: select
-      }, lis));
+      return /*#__PURE__*/React.createElement("menu", null, /*#__PURE__*/React.createElement("ul", null, lis));
     } else {
       return null;
     }
@@ -3618,7 +3712,9 @@ var SiteMenu = function SiteMenu(_ref6) {
           return _goto(id);
         }
       }, /*#__PURE__*/React.createElement(Tooltip, {
-        text: title
+        text: title,
+        top: ".5rem",
+        left: "2rem"
       }, /*#__PURE__*/React.createElement(Icon, {
         key: id,
         icon: icon,
@@ -4189,13 +4285,13 @@ var ContentEditor = function ContentEditor(_ref) {
  * Tabbed Content Editor
  */
 
-var TabbedContentEditor = function TabbedContentEditor(_ref2) {
-  var content = _ref2.content,
-      filter = _ref2.filter,
-      _ref2$grouped = _ref2.grouped,
-      grouped = _ref2$grouped === void 0 ? false : _ref2$grouped,
-      onChange = _ref2.onChange,
-      onReload = _ref2.onReload;
+var TabbedContentEditor = function TabbedContentEditor(_ref3) {
+  var content = _ref3.content,
+      filter = _ref3.filter,
+      _ref3$grouped = _ref3.grouped,
+      grouped = _ref3$grouped === void 0 ? false : _ref3$grouped,
+      onChange = _ref3.onChange,
+      onReload = _ref3.onReload;
 
   var _useState = useState(0),
       tab = _useState[0],
@@ -4280,9 +4376,9 @@ var TabbedContentEditor = function TabbedContentEditor(_ref2) {
  * TreededContentEditor 
  */
 
-var TreededContentEditor = function TreededContentEditor(_ref3) {
-  var content = _ref3.content,
-      onChange = _ref3.onChange;
+var TreededContentEditor = function TreededContentEditor(_ref4) {
+  var content = _ref4.content,
+      onChange = _ref4.onChange;
   var value = content.value();
   var nodes = Object.values(content.type).filter(function (field) {
     return field.type === TYPES.ARRAY;
@@ -4347,13 +4443,13 @@ var TreededContentEditor = function TreededContentEditor(_ref3) {
  * FieldEditor
  */
 
-var FieldEditor = function FieldEditor(_ref4) {
-  var field = _ref4.field,
-      onChange = _ref4.onChange,
-      content = _ref4.content,
-      _ref4$outlined = _ref4.outlined,
-      outlined = _ref4$outlined === void 0 ? false : _ref4$outlined,
-      onReload = _ref4.onReload;
+var FieldEditor = function FieldEditor(_ref5) {
+  var field = _ref5.field,
+      onChange = _ref5.onChange,
+      content = _ref5.content,
+      _ref5$outlined = _ref5.outlined,
+      outlined = _ref5$outlined === void 0 ? false : _ref5$outlined,
+      onReload = _ref5.onReload;
   var id = field.id,
       type = field.type,
       item = field.item,
@@ -4440,11 +4536,11 @@ var FieldEditor = function FieldEditor(_ref4) {
  * Entity Editor
  */
 
-var EntityEditor = function EntityEditor(_ref5) {
-  var field = _ref5.field,
-      _ref5$value = _ref5.value,
-      value = _ref5$value === void 0 ? {} : _ref5$value,
-      onChange = _ref5.onChange;
+var EntityEditor = function EntityEditor(_ref6) {
+  var field = _ref6.field,
+      _ref6$value = _ref6.value,
+      value = _ref6$value === void 0 ? {} : _ref6$value,
+      onChange = _ref6.onChange;
   var id = field.id,
       item = field.item,
       label = field.label;
@@ -4504,13 +4600,13 @@ var EntityEditor = function EntityEditor(_ref5) {
  */
 
 
-var StringEditor = function StringEditor(_ref6) {
-  var field = _ref6.field,
-      _ref6$value = _ref6.value,
-      value = _ref6$value === void 0 ? '' : _ref6$value,
-      onChange = _ref6.onChange,
-      content = _ref6.content,
-      outlined = _ref6.outlined;
+var StringEditor = function StringEditor(_ref7) {
+  var field = _ref7.field,
+      _ref7$value = _ref7.value,
+      value = _ref7$value === void 0 ? '' : _ref7$value,
+      onChange = _ref7.onChange,
+      content = _ref7.content,
+      outlined = _ref7.outlined;
   var id = field.id,
       format = field.format,
       label = field.label,
@@ -4626,12 +4722,12 @@ var StringEditor = function StringEditor(_ref6) {
  * Number Editor
  */
 
-var NumberEditor = function NumberEditor(_ref7) {
-  var field = _ref7.field,
-      value = _ref7.value,
-      onChange = _ref7.onChange,
-      _ref7$outlined = _ref7.outlined,
-      outlined = _ref7$outlined === void 0 ? false : _ref7$outlined;
+var NumberEditor = function NumberEditor(_ref8) {
+  var field = _ref8.field,
+      value = _ref8.value,
+      onChange = _ref8.onChange,
+      _ref8$outlined = _ref8.outlined,
+      outlined = _ref8$outlined === void 0 ? false : _ref8$outlined;
   var id = field.id,
       label = field.label,
       _field$editable2 = field.editable,
@@ -4664,11 +4760,11 @@ var NumberEditor = function NumberEditor(_ref7) {
  */
 
 
-var ListEditor = function ListEditor(_ref8) {
-  var field = _ref8.field,
-      _ref8$value = _ref8.value,
-      value = _ref8$value === void 0 ? [] : _ref8$value,
-      onChange = _ref8.onChange;
+var ListEditor = function ListEditor(_ref9) {
+  var field = _ref9.field,
+      _ref9$value = _ref9.value,
+      value = _ref9$value === void 0 ? [] : _ref9$value,
+      onChange = _ref9.onChange;
   var label = field.label;
 
   function change(id, value) {
@@ -4688,12 +4784,12 @@ var ListEditor = function ListEditor(_ref8) {
  * Multi Selection Editor
  */
 
-var MultiSelectionEditor = function MultiSelectionEditor(_ref9) {
-  var field = _ref9.field,
-      _ref9$value = _ref9.value,
-      value = _ref9$value === void 0 ? [] : _ref9$value,
-      content = _ref9.content,
-      onChange = _ref9.onChange;
+var MultiSelectionEditor = function MultiSelectionEditor(_ref10) {
+  var field = _ref10.field,
+      _ref10$value = _ref10.value,
+      value = _ref10$value === void 0 ? [] : _ref10$value,
+      content = _ref10.content,
+      onChange = _ref10.onChange;
   var id = field.id,
       label = field.label,
       options = field.options;
@@ -4732,12 +4828,12 @@ var MultiSelectionEditor = function MultiSelectionEditor(_ref9) {
  * Collection Editor
  */
 
-var CollectionEditor$1 = function CollectionEditor(_ref10) {
-  var field = _ref10.field,
-      _ref10$value = _ref10.value,
-      value = _ref10$value === void 0 ? [] : _ref10$value,
-      onChange = _ref10.onChange,
-      onReload = _ref10.onReload;
+var CollectionEditor$1 = function CollectionEditor(_ref11) {
+  var field = _ref11.field,
+      _ref11$value = _ref11.value,
+      value = _ref11$value === void 0 ? [] : _ref11$value,
+      onChange = _ref11.onChange,
+      onReload = _ref11.onReload;
   var id = field.id,
       item = field.item,
       label = field.label,
@@ -4807,7 +4903,7 @@ var CollectionEditor$1 = function CollectionEditor(_ref10) {
     onChange: onChange,
     onReload: reload
   }) // : <DataTable {...table} editable={editable} />
-  : /*#__PURE__*/React.createElement(TableEditor$2, {
+  : /*#__PURE__*/React.createElement(TableEditor$3, {
     icon: "info",
     title: label,
     data: value,
@@ -4827,9 +4923,9 @@ var CollectionEditor$1 = function CollectionEditor(_ref10) {
  * Collection Adder
  */
 
-var CollectionAdder = function CollectionAdder(_ref11) {
-  var item = _ref11.item,
-      onAdd = _ref11.onAdd;
+var CollectionAdder = function CollectionAdder(_ref12) {
+  var item = _ref12.item,
+      onAdd = _ref12.onAdd;
 
   var _useState3 = useState(false),
       edit = _useState3[0],
@@ -4898,7 +4994,7 @@ var CollectionAdder = function CollectionAdder(_ref11) {
  */
 
 
-var TableEditor$2 = function TableEditor(props) {
+var TableEditor$3 = function TableEditor(props) {
   var select = function select(row) {
     try {
       if (onSelect) onSelect(row.id);
@@ -5242,7 +5338,7 @@ var EditContentDialog = function EditContentDialog(_ref) {
  * Collection Page
  */
 
-function _catch$2(body, recover) {
+function _catch$3(body, recover) {
   try {
     var result = body();
   } catch (e) {
@@ -5819,7 +5915,7 @@ var CollectionContext = function CollectionContext(url, field, host, page, fetch
       try {
         var _this2 = this;
 
-        var _temp2 = _catch$2(function () {
+        var _temp2 = _catch$3(function () {
           return Promise.resolve(API.all(null, page)).then(function (data) {
             _this2.all = field ? data[field] : data;
           });
@@ -5868,7 +5964,7 @@ var CollectionContext = function CollectionContext(url, field, host, page, fetch
     },
     fetch: function fetch(id) {
       try {
-        return Promise.resolve(_catch$2(function () {
+        return Promise.resolve(_catch$3(function () {
           return Promise.resolve(API.find(id));
         }, function (error) {
           console.log(error);
@@ -5884,7 +5980,7 @@ var CollectionContext = function CollectionContext(url, field, host, page, fetch
       try {
         var _this8 = this;
 
-        var _temp6 = _catch$2(function () {
+        var _temp6 = _catch$3(function () {
           return Promise.resolve(API.create(form)).then(function () {
             return Promise.resolve(_this8.load()).then(function () {});
           });
@@ -5901,7 +5997,7 @@ var CollectionContext = function CollectionContext(url, field, host, page, fetch
       try {
         var _this10 = this;
 
-        var _temp8 = _catch$2(function () {
+        var _temp8 = _catch$3(function () {
           return Promise.resolve(API.update(form)).then(function () {
             return Promise.resolve(_this10.load()).then(function () {});
           });
@@ -5918,7 +6014,7 @@ var CollectionContext = function CollectionContext(url, field, host, page, fetch
       try {
         var _this12 = this;
 
-        var _temp10 = _catch$2(function () {
+        var _temp10 = _catch$3(function () {
           return Promise.resolve(API.patch(id, form)).then(function () {
             return Promise.resolve(_this12.load()).then(function () {});
           });
@@ -5935,7 +6031,7 @@ var CollectionContext = function CollectionContext(url, field, host, page, fetch
       try {
         var _this14 = this;
 
-        var _temp12 = _catch$2(function () {
+        var _temp12 = _catch$3(function () {
           return Promise.resolve(API.updateProperty(id, propertyName, form)).then(function () {
             return Promise.resolve(_this14.load()).then(function () {});
           });
@@ -5952,7 +6048,7 @@ var CollectionContext = function CollectionContext(url, field, host, page, fetch
       try {
         var _this16 = this;
 
-        var _temp14 = _catch$2(function () {
+        var _temp14 = _catch$3(function () {
           return Promise.resolve(API.remove(id)).then(function () {
             return Promise.resolve(_this16.load()).then(function () {});
           });
@@ -6165,7 +6261,7 @@ var QUERY = {
  * Table Page
  */
 
-function _catch$1(body, recover) {
+function _catch$2(body, recover) {
   try {
     var result = body();
   } catch (e) {
@@ -6292,7 +6388,7 @@ var TablePage = function TablePage(props) {
       pageContext = _useContext[0],
       setPageContext = _useContext[1];
 
-  var context = TableContext$1(url, field, host, urlQuery, params);
+  var context = TableContext$2(url, field, host, urlQuery, params);
   var selected = pageContext.selected;
   var timer = useRef(null);
 
@@ -6392,13 +6488,13 @@ var TablePage = function TablePage(props) {
     if (rowSelected || rowChecked) {
       return /*#__PURE__*/React.createElement("aside", {
         className: "table-page"
-      }, rowSelected ? /*#__PURE__*/React.createElement(TableRowEditor$1, {
+      }, rowSelected ? /*#__PURE__*/React.createElement(TableRowEditor$2, {
         content: new Content(schema, form),
         filter: editorFilter,
         onChange: change,
         onClose: closeAside,
         editable: canEdit
-      }) : null, rowChecked ? /*#__PURE__*/React.createElement(TableSelector$1, {
+      }) : null, rowChecked ? /*#__PURE__*/React.createElement(TableSelector$2, {
         schema: schema,
         actions: selectionActions
       }) : null);
@@ -6439,17 +6535,17 @@ var TablePage = function TablePage(props) {
     onSelect: playScenario
   })) : null, renderActions()), canQuery || canFilter ? /*#__PURE__*/React.createElement("menu", {
     className: "table-page"
-  }, canQuery ? /*#__PURE__*/React.createElement(TableQueries$1, {
+  }, canQuery ? /*#__PURE__*/React.createElement(TableQueries$2, {
     schema: schema,
     url: url,
     user: user
-  }) : null, canFilter ? /*#__PURE__*/React.createElement(TableFilters$1, {
+  }) : null, canFilter ? /*#__PURE__*/React.createElement(TableFilters$2, {
     schema: schema,
     onSave: canQuery ? saveQuery : null
   }) : null) : null, /*#__PURE__*/React.createElement("main", {
     key: id,
     className: "table-page"
-  }, /*#__PURE__*/React.createElement(TableEditor$1, {
+  }, /*#__PURE__*/React.createElement(TableEditor$2, {
     icon: icon,
     title: name,
     schema: schema,
@@ -6463,7 +6559,7 @@ var TablePage = function TablePage(props) {
   }), children ? /*#__PURE__*/React.createElement("article", null, children) : null), renderAside());
 };
 
-var TableRowEditor$1 = function TableRowEditor(props) {
+var TableRowEditor$2 = function TableRowEditor(props) {
   var name = props.name,
       content = props.content,
       filter = props.filter,
@@ -6492,7 +6588,7 @@ var TableRowEditor$1 = function TableRowEditor(props) {
  */
 
 
-var TableSelector$1 = function TableSelector(props) {
+var TableSelector$2 = function TableSelector(props) {
   var schema = props.schema,
       _props$actions2 = props.actions,
       actions = _props$actions2 === void 0 ? [] : _props$actions2;
@@ -6555,7 +6651,7 @@ var TableSelector$1 = function TableSelector(props) {
  */
 
 
-var TableQueries$1 = function TableQueries(props) {
+var TableQueries$2 = function TableQueries(props) {
   var remove = function remove(id) {
     try {
       return Promise.resolve(pageContext.removeQuery(id, user)).then(function () {
@@ -6617,7 +6713,7 @@ var TableQueries$1 = function TableQueries(props) {
  */
 
 
-var TableFilters$1 = function TableFilters(props) {
+var TableFilters$2 = function TableFilters(props) {
   var reload = function reload() {
     try {
       return Promise.resolve(pageContext.load(form)).then(function () {
@@ -6713,7 +6809,7 @@ var TableFilters$1 = function TableFilters(props) {
  */
 
 
-var TableEditor$1 = function TableEditor(props) {
+var TableEditor$2 = function TableEditor(props) {
   var checkOne = function checkOne(id, field, value) {
     check([id], value);
     return Promise.resolve();
@@ -6945,6 +7041,1028 @@ var TableEditor$1 = function TableEditor(props) {
  * Table Context
  */
 
+var TableContext$2 = function TableContext(url, field, host, urlQuery, params) {
+  var API = TableAPI$2(url, host, params);
+  return {
+    all: [],
+    checked: new Set([]),
+    selected: null,
+    filters: {},
+    queries: [],
+    load: function load(filter) {
+      try {
+        var _this2 = this;
+
+        var _temp5 = _catch$2(function () {
+          var filters = filter ? Object.keys(filter).reduce(function (filters, key) {
+            var field = filter[key];
+
+            if (field) {
+              if (CHECK['isObject'](field)) {
+                Object.keys(field).forEach(function (key2) {
+                  var subfield = field[key2];
+                  if (subfield) filters[key + "." + key2] = subfield;
+                });
+              } else {
+                filters[key] = field;
+              }
+            }
+
+            return filters;
+          }, {}) : [];
+          return Promise.resolve(API.all(filters)).then(function (data) {
+            _this2.all = field ? data[field] : data;
+          });
+        }, function (error) {
+          console.log(error);
+        });
+
+        return Promise.resolve(_temp5 && _temp5.then ? _temp5.then(function () {}) : void 0);
+      } catch (e) {
+        return Promise.reject(e);
+      }
+    },
+    check: function check(ids, isChecked) {
+      var _this3 = this;
+
+      if (isChecked === void 0) {
+        isChecked = true;
+      }
+
+      if (isChecked) {
+        ids.forEach(function (id) {
+          return _this3.checked.add(id);
+        });
+      } else {
+        ids.forEach(function (id) {
+          return _this3.checked["delete"](id);
+        });
+      }
+    },
+    select: function select(id) {
+      var result = this.all.find(function (item) {
+        return item.id === id;
+      });
+      this.selected = result;
+    },
+    clear: function clear() {
+      this.selected = null;
+    },
+    create: function create(form) {
+      try {
+        var _this5 = this;
+
+        var _temp7 = _catch$2(function () {
+          return Promise.resolve(API.create(form)).then(function () {
+            return Promise.resolve(_this5.load()).then(function () {});
+          });
+        }, function (error) {
+          console.log(error);
+        });
+
+        return Promise.resolve(_temp7 && _temp7.then ? _temp7.then(function () {}) : void 0);
+      } catch (e) {
+        return Promise.reject(e);
+      }
+    },
+    update: function update(form) {
+      try {
+        var _this7 = this;
+
+        var _temp9 = _catch$2(function () {
+          return Promise.resolve(API.update(form)).then(function () {
+            return Promise.resolve(_this7.load()).then(function () {});
+          });
+        }, function (error) {
+          console.log(error);
+        });
+
+        return Promise.resolve(_temp9 && _temp9.then ? _temp9.then(function () {}) : void 0);
+      } catch (e) {
+        return Promise.reject(e);
+      }
+    },
+    remove: function remove(id) {
+      try {
+        var _this9 = this;
+
+        var _temp11 = _catch$2(function () {
+          return Promise.resolve(API.remove(id)).then(function () {
+            return Promise.resolve(_this9.load()).then(function () {});
+          });
+        }, function (error) {
+          console.log(error);
+        });
+
+        return Promise.resolve(_temp11 && _temp11.then ? _temp11.then(function () {}) : void 0);
+      } catch (e) {
+        return Promise.reject(e);
+      }
+    },
+    changeFilters: function changeFilters(filters) {
+      this.filters = filters;
+    },
+    loadQueries: function loadQueries(user) {
+      try {
+        var _this11 = this;
+
+        var _temp13 = _catch$2(function () {
+          return Promise.resolve(API.queries(user, urlQuery)).then(function (_API$queries) {
+            _this11.queries = _API$queries;
+          });
+        }, function (error) {
+          console.log(error);
+        });
+
+        return Promise.resolve(_temp13 && _temp13.then ? _temp13.then(function () {}) : void 0);
+      } catch (e) {
+        return Promise.reject(e);
+      }
+    },
+    createQuery: function createQuery(query, user) {
+      try {
+        var _this13 = this;
+
+        var _temp15 = _catch$2(function () {
+          return Promise.resolve(API.createQuery(query, urlQuery)).then(function () {
+            return Promise.resolve(_this13.loadQueries(user)).then(function () {});
+          });
+        }, function (error) {
+          console.log(error);
+        });
+
+        return Promise.resolve(_temp15 && _temp15.then ? _temp15.then(function () {}) : void 0);
+      } catch (e) {
+        return Promise.reject(e);
+      }
+    },
+    removeQuery: function removeQuery(id, user) {
+      try {
+        var _this15 = this;
+
+        var _temp17 = _catch$2(function () {
+          return Promise.resolve(API.removeQuery(id, urlQuery)).then(function () {
+            return Promise.resolve(_this15.loadQueries(user)).then(function () {});
+          });
+        }, function (error) {
+          console.log(error);
+        });
+
+        return Promise.resolve(_temp17 && _temp17.then ? _temp17.then(function () {}) : void 0);
+      } catch (e) {
+        return Promise.reject(e);
+      }
+    }
+  };
+};
+/**
+ * table API
+ */
+
+
+var TableAPI$2 = function TableAPI(url, host, params) {
+  if (params === void 0) {
+    params = "";
+  }
+
+  var http = HTTPClient(host || window.API || process.env.REACT_APP_API, Session);
+  return {
+    all: function all(filters) {
+      var queryParams = "?" + params;
+
+      if (filters) {
+        var filterQuery = Object.keys(filters).reduce(function (query, key) {
+          var value = filters[key];
+
+          if (typeof value === 'boolean') {
+            return query.concat(key + "=" + value + "&");
+          } else if (Array.isArray(value)) {
+            var param = value.length === 0 ? '' : value.reduce(function (param, item) {
+              param = param.concat(key + "=" + item + "&");
+              return param;
+            }, "");
+            return query.concat(param);
+          } else {
+            return query.concat(key + "=%" + filters[key] + "%&");
+          }
+        }, "");
+        queryParams = queryParams.concat(filterQuery);
+      }
+
+      return http.GET(url + queryParams);
+    },
+    find: function find(id) {
+      return http.GET(url + "/" + id);
+    },
+    create: function create(form) {
+      var body = JSON.stringify(form);
+      return http.POST(url, body);
+    },
+    update: function update(form) {
+      var body = JSON.stringify(form);
+      return http.PUT(url + "/" + form.id, body);
+    },
+    remove: function remove(id) {
+      return http.DELETE(url + "/" + id);
+    },
+    queries: function queries(user, url2) {
+      var url3 = url2 ? url2 : url;
+      url3 = url3 + "queries";
+      if (user) url3 = url3 + ("?user=" + user);
+      return http.GET(url3);
+    },
+    createQuery: function createQuery(form, url2) {
+      var url3 = url2 ? url2 : url;
+      var body = JSON.stringify(form);
+      return http.POST(url3 + "queries", body);
+    },
+    removeQuery: function removeQuery(id, url2) {
+      var url3 = url2 ? url2 : url;
+      return http.DELETE(url3 + "queries/" + id);
+    }
+  };
+};
+
+/**
+ * Table Page
+ */
+
+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;
+}
+/**
+ * TableRowEditor
+ */
+
+
+var TablePage2 = function TablePage2(props) {
+  var playScenario = function playScenario() {
+    try {
+      var promises1 = pageContext.all.map(function (item) {
+        try {
+          return Promise.resolve(pageContext.remove(item.id));
+        } catch (e) {
+          return Promise.reject(e);
+        }
+      });
+      Promise.all(promises1).then(function () {
+        try {
+          var promises2 = scenario.map(function (item) {
+            try {
+              return Promise.resolve(pageContext.create(item));
+            } catch (e) {
+              return Promise.reject(e);
+            }
+          });
+          Promise.all(promises2).then(function () {
+            try {
+              return Promise.resolve(pageContext.load()).then(function () {
+                setPageContext(Object.assign({}, pageContext));
+              });
+            } catch (e) {
+              return Promise.reject(e);
+            }
+          });
+          return Promise.resolve();
+        } catch (e) {
+          return Promise.reject(e);
+        }
+      });
+      return Promise.resolve();
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+
+  var save = function save() {
+    try {
+      return Promise.resolve(pageContext.update(form)).then(function () {
+        setPageContext(Object.assign({}, pageContext));
+      });
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+
+  var reload = function reload() {
+    try {
+      return Promise.resolve(pageContext.load()).then(function () {
+        setPageContext(Object.assign({}, pageContext));
+      });
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+
+  var site = useContext(SiteContext);
+  var _props$id = props.id,
+      id = _props$id === void 0 ? "table" : _props$id,
+      icon = props.icon,
+      title = props.title,
+      name = props.name,
+      schema = props.schema,
+      url = props.url,
+      field = props.field,
+      host = props.host,
+      _props$params = props.params,
+      params = _props$params === void 0 ? "" : _props$params,
+      _props$autosave = props.autosave,
+      autosave = _props$autosave === void 0 ? true : _props$autosave,
+      _props$delay = props.delay,
+      delay = _props$delay === void 0 ? 1000 : _props$delay,
+      editable = props.editable,
+      _props$actions = props.actions,
+      actions = _props$actions === void 0 ? [] : _props$actions,
+      _props$dev = props.dev,
+      dev = _props$dev === void 0 ? false : _props$dev,
+      tableActions = props.tableActions,
+      _props$selectionActio = props.selectionActions,
+      selectionActions = _props$selectionActio === void 0 ? [] : _props$selectionActio,
+      _props$canFilter = props.canFilter,
+      canFilter = _props$canFilter === void 0 ? false : _props$canFilter,
+      _props$canAdd = props.canAdd,
+      canAdd = _props$canAdd === void 0 ? true : _props$canAdd,
+      _props$canDelete = props.canDelete,
+      canDelete = _props$canDelete === void 0 ? true : _props$canDelete,
+      _props$canEdit = props.canEdit,
+      canEdit = _props$canEdit === void 0 ? true : _props$canEdit,
+      _props$canQuery = props.canQuery,
+      canQuery = _props$canQuery === void 0 ? false : _props$canQuery,
+      urlQuery = props.urlQuery,
+      user = props.user,
+      groupBy = props.groupBy,
+      validator = props.validator,
+      scenario = props.scenario,
+      formFilter = props.formFilter,
+      tableFilter = props.tableFilter,
+      _props$editorFilter = props.editorFilter,
+      editorFilter = _props$editorFilter === void 0 ? false : _props$editorFilter,
+      tableClassName = props.tableClassName,
+      children = props.children;
+
+  var _useContext = useContext(PageContext),
+      pageContext = _useContext[0],
+      setPageContext = _useContext[1];
+
+  var context = TableContext$1(url, field, host, urlQuery, params);
+  var selected = pageContext.selected;
+  var timer = useRef(null);
+
+  var _useState = useState(selected),
+      form = _useState[0],
+      setForm = _useState[1];
+
+  useEffect(function () {
+    try {
+      return Promise.resolve(context.load()).then(function () {
+        function _temp2() {
+          setPageContext(context);
+        }
+
+        var _temp = function () {
+          if (canQuery) return Promise.resolve(context.loadQueries(user)).then(function () {});
+        }();
+
+        return _temp && _temp.then ? _temp.then(_temp2) : _temp2(_temp);
+      });
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  }, []);
+  useEffect(function () {
+    setForm(selected);
+  }, [selected]);
+  useEffect(function () {
+    if (autosave) {
+      clearTimeout(timer.current);
+      timer.current = setTimeout(function () {
+        if (canSave()) save();
+      }, delay);
+    }
+  }, [form]);
+
+  function add() {
+    var onOK = function onOK(form) {
+      try {
+        return Promise.resolve(pageContext.create(form)).then(function () {
+          setPageContext(Object.assign({}, pageContext));
+        });
+      } catch (e) {
+        return Promise.reject(e);
+      }
+    };
+
+    site.openDialog( /*#__PURE__*/React.createElement(CreateContentDialog, {
+      label: "Crear " + name,
+      type: schema,
+      onOK: onOK,
+      validator: validator,
+      filter: formFilter
+    }));
+  }
+
+  function saveQuery(filters) {
+    var onOK = function onOK(form) {
+      try {
+        form.filters = filters;
+        form.layout = {};
+        form.user = user;
+        form.url = url;
+        return Promise.resolve(pageContext.createQuery(form, user)).then(function () {
+          setPageContext(Object.assign({}, pageContext));
+        });
+      } catch (e) {
+        return Promise.reject(e);
+      }
+    };
+
+    site.openDialog( /*#__PURE__*/React.createElement(CreateContentDialog, {
+      label: "Nueva query",
+      type: QUERY,
+      onOK: onOK
+    }));
+  }
+
+  function change(next) {
+    setForm(next);
+  }
+
+  function canSave() {
+    var can = !equal(form, selected);
+    return can;
+  }
+
+  function closeAside() {
+    pageContext.select(null);
+    setPageContext(Object.assign({}, pageContext));
+  }
+
+  function renderAside() {
+    var rowSelected = selected && form;
+    var rowChecked = pageContext.checked && pageContext.checked.size > 0;
+
+    if (rowSelected || rowChecked) {
+      return /*#__PURE__*/React.createElement("aside", {
+        className: "table-page"
+      }, rowSelected ? /*#__PURE__*/React.createElement(TableRowEditor$1, {
+        content: new Content(schema, form),
+        filter: editorFilter,
+        onChange: change,
+        onClose: closeAside,
+        editable: canEdit
+      }) : null, rowChecked ? /*#__PURE__*/React.createElement(TableSelector$1, {
+        schema: schema,
+        actions: selectionActions
+      }) : null);
+    }
+
+    return null;
+  }
+
+  function renderActions() {
+    return actions.map(function (element) {
+      var action = function action() {
+        return element.props.action(pageContext);
+      };
+
+      var clone = React.cloneElement(element, {
+        action: action
+      });
+      return clone;
+    });
+  }
+
+  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Header, {
+    className: "table-page",
+    title: /*#__PURE__*/React.createElement(Text, null, title)
+  }, canAdd ? /*#__PURE__*/React.createElement(Button, {
+    icon: "add",
+    label: "A\xF1adir",
+    action: add,
+    raised: true
+  }) : null, "\xA0", /*#__PURE__*/React.createElement(Button, {
+    icon: "refresh",
+    label: "Reload",
+    action: reload
+  }), dev ? /*#__PURE__*/React.createElement(MenuIcon, {
+    align: "alignRight"
+  }, /*#__PURE__*/React.createElement(MenuItem, {
+    label: "Cargar Escenario 1",
+    onSelect: playScenario
+  })) : null, renderActions()), canQuery || canFilter ? /*#__PURE__*/React.createElement("menu", {
+    className: "table-page"
+  }, canQuery ? /*#__PURE__*/React.createElement(TableQueries$1, {
+    schema: schema,
+    url: url,
+    user: user
+  }) : null, canFilter ? /*#__PURE__*/React.createElement(TableFilters$1, {
+    schema: schema,
+    onSave: canQuery ? saveQuery : null
+  }) : null) : null, /*#__PURE__*/React.createElement("main", {
+    key: id,
+    className: "table-page"
+  }, /*#__PURE__*/React.createElement(TableEditor$1, {
+    icon: icon,
+    title: name,
+    schema: schema,
+    delay: delay,
+    editable: editable,
+    groupBy: groupBy,
+    filter: tableFilter,
+    actions: tableActions,
+    canDelete: canDelete,
+    className: tableClassName
+  }), children ? /*#__PURE__*/React.createElement("article", null, children) : null), renderAside());
+};
+
+var TableRowEditor$1 = function TableRowEditor(props) {
+  var name = props.name,
+      content = props.content,
+      filter = props.filter,
+      editable = props.editable,
+      onChange = props.onChange,
+      onClose = props.onClose;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "table-row-editor"
+  }, /*#__PURE__*/React.createElement(Header, {
+    icon: "local_offer",
+    title: name || "Propiedades"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: "close",
+    clickable: true,
+    action: onClose
+  })), /*#__PURE__*/React.createElement("main", null, editable ? /*#__PURE__*/React.createElement(ContentEditor, {
+    content: content,
+    onChange: onChange,
+    filter: filter
+  }) : /*#__PURE__*/React.createElement(ContentViewer, {
+    content: content
+  })));
+};
+/**
+ * Table Selector
+ */
+
+
+var TableSelector$1 = function TableSelector(props) {
+  var schema = props.schema,
+      _props$actions2 = props.actions,
+      actions = _props$actions2 === void 0 ? [] : _props$actions2;
+
+  var _useContext2 = useContext(PageContext),
+      pageContext = _useContext2[0],
+      setPageContext = _useContext2[1];
+
+  var all = pageContext.all,
+      checked = pageContext.checked;
+  var count = checked.size + "/" + all.length;
+  var columns = Object.keys(schema).filter(function (key) {
+    return schema[key].selectorColumn === true;
+  }).map(function (key) {
+    var field = schema[key];
+    return {
+      id: field.id,
+      label: field.label
+    };
+  });
+  var rows = all.filter(function (item) {
+    return checked.has(item.id);
+  });
+  var table = {
+    columns: columns,
+    rows: rows || []
+  };
+  var buttons = actions.map(function (_ref) {
+    var label = _ref.label,
+        _action = _ref.action,
+        validate = _ref.validate;
+    return /*#__PURE__*/React.createElement(Button, {
+      label: label,
+      raised: true,
+      action: function action() {
+        return _action(checked, pageContext, function () {
+          try {
+            return Promise.resolve(pageContext.load()).then(function () {
+              setPageContext(Object.assign({}, pageContext));
+            });
+          } catch (e) {
+            return Promise.reject(e);
+          }
+        }, rows);
+      },
+      disabled: !validate(checked, rows)
+    });
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    className: "table-selector"
+  }, /*#__PURE__*/React.createElement(Header, {
+    icon: "checklist_rtl",
+    title: "Selecci\xF3n"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "size"
+  }, count)), /*#__PURE__*/React.createElement("main", null, /*#__PURE__*/React.createElement(DataTable, table)), /*#__PURE__*/React.createElement("footer", null, buttons));
+};
+/**
+ * Table Queries
+ */
+
+
+var TableQueries$1 = function TableQueries(props) {
+  var remove = function remove(id) {
+    try {
+      return Promise.resolve(pageContext.removeQuery(id, user)).then(function () {
+        setPageContext(Object.assign({}, pageContext));
+      });
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+
+  var _useContext3 = useContext(PageContext),
+      pageContext = _useContext3[0],
+      setPageContext = _useContext3[1];
+
+  var url = props.url,
+      user = props.user;
+  var _pageContext$queries = pageContext.queries,
+      queries = _pageContext$queries === void 0 ? [] : _pageContext$queries;
+
+  var _useState2 = useState(),
+      selected = _useState2[0],
+      setSelected = _useState2[1];
+
+  function select(query) {
+    setSelected(query.id);
+    pageContext.changeFilters(query.filters);
+    setPageContext(Object.assign({}, pageContext));
+  }
+
+  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Header, {
+    className: "table-queries",
+    title: /*#__PURE__*/React.createElement(Text, null, "Queries")
+  }), /*#__PURE__*/React.createElement("main", {
+    className: "table-queries"
+  }, queries ? queries.filter(function (query) {
+    return query.url === url;
+  }).map(function (query) {
+    var style = selected === query.id ? "selected" : "";
+    return /*#__PURE__*/React.createElement("div", {
+      className: "table-queries-item " + style,
+      onClick: function onClick() {
+        return select(query);
+      }
+    }, /*#__PURE__*/React.createElement(Icon, {
+      icon: "star",
+      size: "small"
+    }), /*#__PURE__*/React.createElement("label", null, query.name), /*#__PURE__*/React.createElement(Icon, {
+      icon: "close",
+      clickable: true,
+      size: "small",
+      action: function action() {
+        return remove(query.id);
+      }
+    }));
+  }) : /*#__PURE__*/React.createElement("div", null, "...empty...")));
+};
+/**
+ * Table Filters
+ */
+
+
+var TableFilters$1 = function TableFilters(props) {
+  var reload = function reload() {
+    try {
+      return Promise.resolve(pageContext.load(form)).then(function () {
+        setPageContext(Object.assign({}, pageContext));
+      });
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+
+  var change = function change(next) {
+    try {
+      setForm(next);
+      return Promise.resolve();
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+
+  var _useContext4 = useContext(PageContext),
+      pageContext = _useContext4[0],
+      setPageContext = _useContext4[1];
+
+  var filters = pageContext.filters;
+  var schema = props.schema,
+      onSave = props.onSave;
+
+  var _useState3 = useState({}),
+      form = _useState3[0],
+      setForm = _useState3[1];
+
+  var filterSchema = useMemo(function () {
+    var filterSchema = Object.assign({}, schema);
+
+    for (var key in filterSchema) {
+      if (filterSchema[key].filter === false) {
+        delete filterSchema[key];
+      } else {
+        if (filterSchema[key].type === TYPES.ENTITY) {
+          var fs = filterSchema[key].item;
+
+          for (var key in fs) {
+            if (fs[key].filter === false) delete fs[key];
+          }
+        }
+      }
+    } //Object.values(filterSchema).forEach(field => field.section = null)
+
+
+    delete filterSchema.flows;
+    return filterSchema;
+  }, [schema]);
+  useEffect(function () {
+    if (filters) setForm(filters);
+  }, [filters]);
+  useEffect(function () {
+    reload();
+  }, [form]);
+
+  function clear() {
+    change({});
+  }
+
+  function save() {
+    if (onSave) {
+      onSave(form);
+    }
+  }
+
+  var content = new Content(filterSchema, form);
+  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Header, {
+    className: "table-filters",
+    title: /*#__PURE__*/React.createElement(Text, null, "Filters")
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: "filter_list_off",
+    size: "small",
+    clickable: true,
+    action: clear
+  }), onSave ? /*#__PURE__*/React.createElement(Icon, {
+    icon: "save",
+    size: "small",
+    clickable: true,
+    action: save
+  }) : null), /*#__PURE__*/React.createElement("main", {
+    className: "table-filters"
+  }, /*#__PURE__*/React.createElement(ContentEditor, {
+    content: content,
+    onChange: change
+  })));
+};
+/**
+ * Table Editor
+ */
+
+
+var TableEditor$1 = function TableEditor(props) {
+  var checkOne = function checkOne(id, field, value) {
+    check([id], value);
+    return Promise.resolve();
+  };
+
+  var check = function check(ids, value) {
+    try {
+      pageContext.check(ids, value);
+      setPageContext(Object.assign({}, pageContext));
+      return Promise.resolve();
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+
+  var select = function select(row, event) {
+    try {
+      clear();
+      return Promise.resolve(pageContext.select(row.id)).then(function () {
+        setPageContext(Object.assign({}, pageContext));
+      });
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+
+  var remove = function remove(id) {
+    try {
+      return Promise.resolve(site.confirm("Are you sure ?")).then(function (confirm) {
+        var _temp3 = function () {
+          if (confirm) {
+            return Promise.resolve(pageContext.remove(id)).then(function () {
+              pageContext.clear();
+              setPageContext(Object.assign({}, pageContext));
+            });
+          }
+        }();
+
+        if (_temp3 && _temp3.then) return _temp3.then(function () {});
+      });
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+
+  var site = useContext(SiteContext);
+
+  var _useContext5 = useContext(PageContext),
+      pageContext = _useContext5[0],
+      setPageContext = _useContext5[1];
+
+  var _pageContext$all = pageContext.all,
+      all = _pageContext$all === void 0 ? [] : _pageContext$all;
+  var icon = props.icon,
+      title = props.title,
+      schema = props.schema,
+      editable = props.editable,
+      canDelete = props.canDelete,
+      filter = props.filter,
+      actions = props.actions,
+      className = props.className;
+
+  var _useState4 = useState(props.groupBy),
+      groupBy = _useState4[0],
+      setGroupBy = _useState4[1];
+
+  function changeGroup(id, value) {
+    setGroupBy(value);
+  }
+
+  function change(rowID, cellID, value) {
+    var _Object$assign;
+
+    var row = all.find(function (r) {
+      return r.id === rowID;
+    });
+    var next = Object.assign({}, row, (_Object$assign = {}, _Object$assign[cellID] = value, _Object$assign));
+    delete next.actions;
+    pageContext.update(next);
+    setPageContext(Object.assign({}, pageContext));
+  }
+
+  function clear() {
+    pageContext.clear();
+    setPageContext(Object.assign({}, pageContext));
+  }
+
+  function run(action, item) {
+    action.action(item.id, pageContext, function () {
+      try {
+        return Promise.resolve(pageContext.load()).then(function () {
+          setPageContext(Object.assign({}, pageContext));
+        });
+      } catch (e) {
+        return Promise.reject(e);
+      }
+    });
+  }
+
+  function buildGroupOptions(schema) {
+    return Object.values(schema).filter(function (field) {
+      return field.grouper === true;
+    }).map(function (field) {
+      return {
+        label: field.label,
+        value: field.id
+      };
+    });
+  }
+
+  function renderGroupLabel(groupName) {
+    var grouper = schema[groupBy];
+    if (!groupName || !grouper) return "";
+
+    if (grouper.options) {
+      var options = CHECK['isFunction'](grouper.options) ? grouper.options() : grouper.options;
+      var option = options.find(function (option) {
+        return option.value === groupName;
+      });
+      return option ? option.label : groupName;
+    } else {
+      return groupName;
+    }
+  }
+
+  var table = useMemo(function () {
+    return {
+      columns: Object.values(schema).filter(function (field) {
+        return field.column === true;
+      }).map(function (field) {
+        var options = field.options;
+
+        if (options && typeof options == 'function') {
+          options = options();
+        }
+
+        return {
+          id: field.id,
+          label: field.label,
+          type: field.type,
+          format: field.format,
+          item: field.item ? field.item : [],
+          onChange: field.id === "checked" ? checkOne : field.editable ? change : null,
+
+          /* checked has it´s own handler */
+          options: options
+        };
+      }),
+      rows: []
+    };
+  }, [schema]);
+  var items = filter ? filter(all) : all;
+  if (items.length === 0) return /*#__PURE__*/React.createElement("div", {
+    className: "empty-message"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: "search_off"
+  }), /*#__PURE__*/React.createElement(Text, null, "No Result Found"));
+  var groups = items.reduce(function (groups, item) {
+    var groupName = item[groupBy];
+    if (!groups[groupName]) groups[groupName] = [];
+    groups[groupName].push(item);
+    return groups;
+  }, {});
+  var sections = Object.keys(groups).map(function (groupName) {
+    var rows = groups[groupName].map(function (item) {
+      item.checked = pageContext.checked ? pageContext.checked.has(item.id) : false;
+      item.actions = actions ? actions.map(function (_action2) {
+        return _action2.filter ? _action2.filter(item) ? /*#__PURE__*/React.createElement(Icon, {
+          icon: _action2.icon,
+          clickable: true,
+          size: "small",
+          action: function action() {
+            return run(_action2, item);
+          }
+        }) : null : /*#__PURE__*/React.createElement(Icon, {
+          icon: _action2.icon,
+          clickable: true,
+          size: "small",
+          action: function action() {
+            return run(_action2, item);
+          }
+        });
+      }) : [];
+      if (canDelete) item.actions.push( /*#__PURE__*/React.createElement(Icon, {
+        icon: "delete",
+        size: "small",
+        clickable: true,
+        action: function action() {
+          return remove(item.id);
+        }
+      }));
+      return item;
+    });
+    table.rows = rows;
+    return {
+      id: groupName,
+      checked: false,
+      title: renderGroupLabel(groupName),
+      info: groups[groupName].length,
+      open: true,
+      children: /*#__PURE__*/React.createElement(DataTable, _extends({}, table, {
+        onRowSelection: select,
+        editable: editable,
+        onCheckAll: check,
+        className: className
+      }))
+    };
+  });
+  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Header, {
+    icon: icon,
+    title: /*#__PURE__*/React.createElement(Text, null, title)
+  }, groupBy ? /*#__PURE__*/React.createElement(DropDown, {
+    id: "groupBy",
+    label: "Agrupar Por",
+    value: groupBy,
+    options: buildGroupOptions(schema),
+    onChange: changeGroup
+  }) : null), /*#__PURE__*/React.createElement("main", {
+    className: "table-editor"
+  }, /*#__PURE__*/React.createElement(Accordion, {
+    sections: sections
+  })));
+};
+/**
+ * Table Context
+ */
+
 var TableContext$1 = function TableContext(url, field, host, urlQuery, params) {
   var API = TableAPI$1(url, host, params);
   return {
@@ -8289,5 +9407,5 @@ var isFunction = function isFunction(value) {
   return value && (Object.prototype.toString.call(value) === "[object Function]" || "function" === typeof value || value instanceof Function);
 };
 
-export { Avatar, Button, Calendar, CheckBox, Chip, Chips, CircularProgress, CollectionContext, CollectionEditor$1 as CollectionEditor, CollectionFilters, CollectionPage, CollectionTree, Content, ContentEditor, ContentForm, CreateContentDialog, DataTable, Dialog, DropDown, EditContentDialog, FORMATS, FieldEditor, FileExplorer, FileIconsView, Form, HTTPClient, Header, Icon, Kanban, KanbanCard, KanbanColumn, LinearProgress, List, ListEditor, LoginBox, Menu, MenuIcon, MenuItem, MenuSeparator, Page, PageContext, PageProvider, Planner, Property, RadioButton, ResetPasswordBox, Section, Session, Site, SiteContext, SiteProvider, Stack, Switch, TEXTFORMATS, TYPES, Tab, TabbedContentEditor, TabbedTablePage, TabbedView, TableEditor$1 as TableEditor, TablePage, Tabs, Text, TextArea, TextField, Thumbnail, TokenField, Tooltip, Tree, TreeItem, TreeNode, TreededContentEditor, UploadArea, UploadDialog, UploadFile, UploadIcon, Uploader, View, Viewer, WaitScreen, isFunction };
+export { Accordion, Avatar, Button, Calendar, CheckBox, Chip, Chips, CircularProgress, CollectionContext, CollectionEditor$1 as CollectionEditor, CollectionFilters, CollectionPage, CollectionTree, Content, ContentEditor, ContentForm, CreateContentDialog, DataTable, Dialog, DropDown, EditContentDialog, FORMATS, FieldEditor, FileExplorer, FileIconsView, Form, HTTPClient, Header, Icon, Kanban, KanbanCard, KanbanColumn, LinearProgress, List, ListEditor, LoginBox, Menu, MenuIcon, MenuItem, MenuSeparator, Page, PageContext, PageProvider, Planner, Property, RadioButton, ResetPasswordBox, Section, Session, Site, SiteContext, SiteProvider, Stack, Switch, TEXTFORMATS, TYPES, Tab, TabbedContentEditor, TabbedTablePage, TabbedView, TableEditor$2 as TableEditor, TablePage, TablePage2, Tabs, Text, TextArea, TextField, Thumbnail, TokenField, Tooltip, Tree, TreeItem, TreeNode, TreededContentEditor, UploadArea, UploadDialog, UploadFile, UploadIcon, Uploader, View, Viewer, WaitScreen, isFunction };
 //# sourceMappingURL=index.modern.js.map