ywana-core8 0.0.488 → 0.0.491

package/dist/index.umd.js

@@ -921,307 +921,6 @@
     return /*#__PURE__*/React__default["default"].createElement(React.Fragment, null, child);
   };
 
-  /**
-   * Text Field
-   */
-
-  var TextField = function TextField(props) {
-    var site = React.useContext(SiteContext);
-    var id = props.id,
-        _props$type = props.type,
-        type = _props$type === void 0 ? 'text' : _props$type,
-        label = props.label,
-        placeholder = props.placeholder,
-        value = props.value,
-        outlined = props.outlined,
-        _props$readOnly = props.readOnly,
-        readOnly = _props$readOnly === void 0 ? false : _props$readOnly,
-        _props$canClear = props.canClear,
-        canClear = _props$canClear === void 0 ? true : _props$canClear,
-        onChange = props.onChange,
-        onEnter = props.onEnter,
-        onClick = props.onClick,
-        onBlur = props.onBlur;
-
-    function onKeyPress(event) {
-      var key = event.charCode ? event.charCode : event.keyCode ? event.keyCode : 0;
-
-      if (key == 13) {
-        if (onEnter) onEnter();
-      }
-    }
-
-    function change(event) {
-      event.stopPropagation();
-      event.preventDefault();
-      var value = event.target.value;
-      if (onChange) onChange(id, value);
-    }
-
-    function focus() {
-      if (site && site.changeFocus) {
-        site.changeFocus({
-          lose: function lose() {// DO NOTHING
-          }
-        });
-      }
-    }
-
-    function blur() {
-      if (onBlur) onBlur();
-    }
-
-    function clear() {
-      if (onChange) onChange(id, "");
-    }
-
-    var borderStyle = outlined ? "textfield-outlined" : "textfield";
-    var labelStyle = label ? "" : "no-label";
-    var style = labelStyle + " " + borderStyle + " textfield-" + type;
-    var labelTxt = /*#__PURE__*/React__default["default"].createElement(Text, null, label);
-    return /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "" + style,
-      onClick: onClick
-    }, /*#__PURE__*/React__default["default"].createElement("input", {
-      id: id,
-      type: type,
-      placeholder: placeholder,
-      value: value,
-      required: true,
-      onChange: change,
-      onKeyDown: onKeyPress,
-      onFocus: focus,
-      onBlur: blur,
-      readOnly: readOnly
-    }), canClear && value && value.length > 0 ? /*#__PURE__*/React__default["default"].createElement(Icon, {
-      icon: "close",
-      clickable: true,
-      size: "small",
-      action: clear
-    }) : null, /*#__PURE__*/React__default["default"].createElement("span", {
-      className: "bar"
-    }), label ? /*#__PURE__*/React__default["default"].createElement("label", null, labelTxt) : null);
-  };
-  /**
-   * Text Area
-   */
-
-  var TextArea = function TextArea(props) {
-    var site = React.useContext(SiteContext);
-    var id = props.id,
-        _props$type2 = props.type,
-        type = _props$type2 === void 0 ? 'text' : _props$type2,
-        label = props.label,
-        placeholder = props.placeholder,
-        value = props.value,
-        _props$readOnly2 = props.readOnly,
-        readOnly = _props$readOnly2 === void 0 ? false : _props$readOnly2,
-        _props$canClear2 = props.canClear,
-        canClear = _props$canClear2 === void 0 ? true : _props$canClear2,
-        onChange = props.onChange,
-        onEnter = props.onEnter,
-        onClick = props.onClick;
-
-    function onKeyPress(event) {
-      var key = event.charCode ? event.charCode : event.keyCode ? event.keyCode : 0;
-
-      if (key == 13) {
-        if (onEnter) onEnter();
-      }
-    }
-
-    function change(event) {
-      event.stopPropagation();
-      event.preventDefault();
-      var value = event.target.value;
-      if (onChange) onChange(id, value);
-    }
-
-    function focus() {
-      if (site && site.changeFocus) {
-        site.changeFocus({
-          lose: function lose() {// DO NOTHING
-          }
-        });
-      }
-    }
-
-    function clear() {
-      if (onChange) onChange(id, "");
-    }
-
-    var labelStyle = label ? "" : "no-label";
-    var style = "textarea " + labelStyle + " textarea-" + type;
-    var labelTxt = /*#__PURE__*/React__default["default"].createElement(Text, null, label);
-    return /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "" + style,
-      onClick: onClick
-    }, /*#__PURE__*/React__default["default"].createElement("textarea", {
-      id: id,
-      placeholder: placeholder,
-      value: value,
-      required: true,
-      onChange: change,
-      onKeyDown: onKeyPress,
-      onFocus: focus,
-      readOnly: readOnly
-    }), canClear && value && value.length > 0 ? /*#__PURE__*/React__default["default"].createElement(Icon, {
-      icon: "close",
-      clickable: true,
-      size: "small",
-      action: clear
-    }) : null, /*#__PURE__*/React__default["default"].createElement("span", {
-      className: "bar"
-    }), label ? /*#__PURE__*/React__default["default"].createElement("label", null, labelTxt) : null);
-  };
-  /**
-   * Dropdown
-   */
-
-  var DropDown = function DropDown(props) {
-    var site = React.useContext(SiteContext);
-    var id = props.id,
-        _props$options = props.options,
-        options = _props$options === void 0 ? [] : _props$options,
-        value = props.value,
-        onChange = props.onChange,
-        _props$predictive = props.predictive,
-        predictive = _props$predictive === void 0 ? false : _props$predictive,
-        _props$readOnly3 = props.readOnly,
-        readOnly = _props$readOnly3 === void 0 ? false : _props$readOnly3,
-        _props$verbose = props.verbose,
-        verbose = _props$verbose === void 0 ? true : _props$verbose,
-        onBlur = props.onBlur;
-
-    var _useState = React.useState(false),
-        open = _useState[0],
-        setOpen = _useState[1];
-
-    var _useState2 = React.useState(),
-        label = _useState2[0],
-        setLabel = _useState2[1];
-
-    React.useEffect(function () {
-      if (Array.isArray(options)) {
-        var option = options.find(function (option) {
-          return option.value === value;
-        });
-
-        var _label = option ? option.label : "";
-
-        setLabel(_label);
-      }
-    }, [value]);
-
-    function change(id, value) {
-      if (predictive) {
-        setLabel(value);
-      } else {
-        if (onChange) onChange(id, value);
-      }
-    }
-
-    function toggle() {
-      if (site && site.changeFocus) {
-        site.changeFocus({
-          lose: function lose() {
-            setOpen(false);
-          }
-        });
-      }
-
-      if (!readOnly) setOpen(!open);
-    }
-
-    function select(event) {
-      var next = event.target.getAttribute("value");
-      var option = options.find(function (option) {
-        return option.value === next;
-      });
-      setOpen(false);
-      var label = verbose ? option.label : "";
-      setLabel(label);
-      if (onChange) onChange(id, next);
-    }
-
-    function blur() {
-      if (onBlur) onBlur();
-    }
-
-    function renderOptions() {
-      var canShow = open == true && Array.isArray(options);
-
-      if (canShow) {
-        var filterActive = predictive === true && label && label.length > 0;
-        var items = filterActive ? options.filter(function (option) {
-          return option.label.toUpperCase().indexOf(label.toUpperCase()) >= 0;
-        }) : options;
-        var lis = items.map(function (option) {
-          return /*#__PURE__*/React__default["default"].createElement("li", {
-            key: option.value,
-            value: option.value
-          }, option.label);
-        });
-        return /*#__PURE__*/React__default["default"].createElement("menu", null, /*#__PURE__*/React__default["default"].createElement("ul", {
-          onMouseDown: select
-        }, lis));
-      } else {
-        return null;
-      }
-    }
-
-    return /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "dropdown"
-    }, /*#__PURE__*/React__default["default"].createElement(TextField, _extends({}, props, {
-      onClick: toggle,
-      value: label,
-      onChange: change,
-      onBlur: blur,
-      readOnly: !predictive
-    })), !readOnly ? /*#__PURE__*/React__default["default"].createElement(Icon, {
-      icon: "expand_more",
-      clickable: true,
-      size: "small",
-      action: toggle
-    }) : null, renderOptions());
-  };
-  var DateRange = function DateRange(props) {
-    var id = props.id,
-        label = props.label,
-        onChange = props.onChange;
-
-    var _useState3 = React.useState({}),
-        form = _useState3[0],
-        setForm = _useState3[1];
-
-    React.useEffect(function () {
-      if (onChange) onChange(id, form);
-    }, [form]);
-
-    function change(id, value) {
-      var _Object$assign;
-
-      var next = Object.assign({}, form, (_Object$assign = {}, _Object$assign[id] = value, _Object$assign));
-      setForm(next);
-    }
-
-    return /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "date-range"
-    }, label ? /*#__PURE__*/React__default["default"].createElement("label", null, label) : null, /*#__PURE__*/React__default["default"].createElement(TextField, {
-      id: "from",
-      type: "date",
-      label: "From",
-      value: form.from,
-      onChange: change
-    }), /*#__PURE__*/React__default["default"].createElement(TextField, {
-      id: "to",
-      type: "date",
-      label: "To",
-      value: form.to,
-      onChange: change
-    }));
-  };
-
   /**
    * TYPES
    */
@@ -1408,77 +1107,354 @@
               }) : [];
             }
 
-            break;
+            break;
+
+          default:
+            next[name] = field;
+            break;
+        }
+
+        return next;
+      }, {});
+      return next;
+    };
+
+    return ContentType;
+  }();
+  /**
+   * Content
+   */
+
+  var Content = /*#__PURE__*/function () {
+    function Content(type, value) {
+      this.type = type;
+      this._type = new ContentType(type);
+      this._value = value;
+    }
+
+    var _proto2 = Content.prototype;
+
+    _proto2.isValid = function isValid() {
+      return this._type.validate(this._value);
+    };
+
+    _proto2.value = function value() {
+      return this._type.value(this._value);
+    };
+
+    _proto2.form = function form() {
+      return this._type.form(this._value);
+    };
+
+    _proto2.sections = function sections() {
+      return this._type.sections(this._value);
+    };
+
+    _proto2.update = function update(value) {
+      this._value = value;
+    };
+
+    return Content;
+  }();
+
+  /**
+   * Text Field
+   */
+
+  var TextField = function TextField(props) {
+    var site = React.useContext(SiteContext);
+    var id = props.id,
+        _props$type = props.type,
+        type = _props$type === void 0 ? 'text' : _props$type,
+        label = props.label,
+        placeholder = props.placeholder,
+        value = props.value,
+        outlined = props.outlined,
+        _props$readOnly = props.readOnly,
+        readOnly = _props$readOnly === void 0 ? false : _props$readOnly,
+        _props$canClear = props.canClear,
+        canClear = _props$canClear === void 0 ? true : _props$canClear,
+        onChange = props.onChange,
+        onEnter = props.onEnter,
+        onClick = props.onClick,
+        onBlur = props.onBlur;
+
+    function onKeyPress(event) {
+      var key = event.charCode ? event.charCode : event.keyCode ? event.keyCode : 0;
+
+      if (key == 13) {
+        if (onEnter) onEnter();
+      }
+    }
+
+    function change(event) {
+      event.stopPropagation();
+      event.preventDefault();
+      var value = event.target.value;
+      if (onChange) onChange(id, value);
+    }
+
+    function focus() {
+      if (site && site.changeFocus) {
+        site.changeFocus({
+          lose: function lose() {// DO NOTHING
+          }
+        });
+      }
+    }
+
+    function blur() {
+      if (onBlur) onBlur();
+    }
+
+    function clear() {
+      if (onChange) onChange(id, "");
+    }
+
+    var borderStyle = outlined ? "textfield-outlined" : "textfield";
+    var labelStyle = label ? "" : "no-label";
+    var style = labelStyle + " " + borderStyle + " textfield-" + type;
+    var labelTxt = /*#__PURE__*/React__default["default"].createElement(Text, null, label);
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "" + style,
+      onClick: onClick
+    }, /*#__PURE__*/React__default["default"].createElement("input", {
+      id: id,
+      type: type,
+      placeholder: placeholder,
+      value: value,
+      required: true,
+      onChange: change,
+      onKeyDown: onKeyPress,
+      onFocus: focus,
+      onBlur: blur,
+      readOnly: readOnly
+    }), canClear && value && value.length > 0 ? /*#__PURE__*/React__default["default"].createElement(Icon, {
+      icon: "close",
+      clickable: true,
+      size: "small",
+      action: clear
+    }) : null, /*#__PURE__*/React__default["default"].createElement("span", {
+      className: "bar"
+    }), label ? /*#__PURE__*/React__default["default"].createElement("label", null, labelTxt) : null);
+  };
+  /**
+   * Text Area
+   */
+
+  var TextArea = function TextArea(props) {
+    var site = React.useContext(SiteContext);
+    var id = props.id,
+        _props$type2 = props.type,
+        type = _props$type2 === void 0 ? 'text' : _props$type2,
+        label = props.label,
+        placeholder = props.placeholder,
+        value = props.value,
+        _props$readOnly2 = props.readOnly,
+        readOnly = _props$readOnly2 === void 0 ? false : _props$readOnly2,
+        _props$canClear2 = props.canClear,
+        canClear = _props$canClear2 === void 0 ? true : _props$canClear2,
+        onChange = props.onChange,
+        onEnter = props.onEnter,
+        onClick = props.onClick;
+
+    function onKeyPress(event) {
+      var key = event.charCode ? event.charCode : event.keyCode ? event.keyCode : 0;
+
+      if (key == 13) {
+        if (onEnter) onEnter();
+      }
+    }
+
+    function change(event) {
+      event.stopPropagation();
+      event.preventDefault();
+      var value = event.target.value;
+      if (onChange) onChange(id, value);
+    }
+
+    function focus() {
+      if (site && site.changeFocus) {
+        site.changeFocus({
+          lose: function lose() {// DO NOTHING
+          }
+        });
+      }
+    }
+
+    function clear() {
+      if (onChange) onChange(id, "");
+    }
+
+    var labelStyle = label ? "" : "no-label";
+    var style = "textarea " + labelStyle + " textarea-" + type;
+    var labelTxt = /*#__PURE__*/React__default["default"].createElement(Text, null, label);
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "" + style,
+      onClick: onClick
+    }, /*#__PURE__*/React__default["default"].createElement("textarea", {
+      id: id,
+      placeholder: placeholder,
+      value: value,
+      required: true,
+      onChange: change,
+      onKeyDown: onKeyPress,
+      onFocus: focus,
+      readOnly: readOnly
+    }), canClear && value && value.length > 0 ? /*#__PURE__*/React__default["default"].createElement(Icon, {
+      icon: "close",
+      clickable: true,
+      size: "small",
+      action: clear
+    }) : null, /*#__PURE__*/React__default["default"].createElement("span", {
+      className: "bar"
+    }), label ? /*#__PURE__*/React__default["default"].createElement("label", null, labelTxt) : null);
+  };
+  /**
+   * Dropdown
+   */
+
+  var DropDown = function DropDown(props) {
+    var site = React.useContext(SiteContext);
+    var id = props.id,
+        _props$options = props.options,
+        options = _props$options === void 0 ? [] : _props$options,
+        value = props.value,
+        onChange = props.onChange,
+        _props$predictive = props.predictive,
+        predictive = _props$predictive === void 0 ? false : _props$predictive,
+        _props$readOnly3 = props.readOnly,
+        readOnly = _props$readOnly3 === void 0 ? false : _props$readOnly3,
+        _props$verbose = props.verbose,
+        verbose = _props$verbose === void 0 ? true : _props$verbose,
+        onBlur = props.onBlur;
+
+    var _useState = React.useState(false),
+        open = _useState[0],
+        setOpen = _useState[1];
+
+    var _useState2 = React.useState(),
+        label = _useState2[0],
+        setLabel = _useState2[1];
 
-          default:
-            next[name] = field;
-            break;
-        }
+    React.useEffect(function () {
+      if (Array.isArray(options)) {
+        var option = options.find(function (option) {
+          return option.value === value;
+        });
 
-        return next;
-      }, {});
-      return next;
-    };
+        var _label = option ? option.label : "";
 
-    return ContentType;
-  }();
-  /**
-   * Content
-   */
+        setLabel(_label);
+      }
+    }, [value]);
 
-  var Content = /*#__PURE__*/function () {
-    function Content(type, value) {
-      this.type = type;
-      this._type = new ContentType(type);
-      this._value = value;
+    function change(id, value) {
+      if (predictive) {
+        setLabel(value);
+      } else {
+        if (onChange) onChange(id, value);
+      }
     }
 
-    var _proto2 = Content.prototype;
-
-    _proto2.isValid = function isValid() {
-      return this._type.validate(this._value);
-    };
+    function toggle() {
+      if (site && site.changeFocus) {
+        site.changeFocus({
+          lose: function lose() {
+            setOpen(false);
+          }
+        });
+      }
 
-    _proto2.value = function value() {
-      return this._type.value(this._value);
-    };
+      if (!readOnly) setOpen(!open);
+    }
 
-    _proto2.form = function form() {
-      return this._type.form(this._value);
-    };
+    function select(event) {
+      var next = event.target.getAttribute("value");
+      var option = options.find(function (option) {
+        return option.value === next;
+      });
+      setOpen(false);
+      var label = verbose ? option.label : "";
+      setLabel(label);
+      if (onChange) onChange(id, next);
+    }
 
-    _proto2.sections = function sections() {
-      return this._type.sections(this._value);
-    };
+    function blur() {
+      if (onBlur) onBlur();
+    }
 
-    _proto2.update = function update(value) {
-      this._value = value;
-    };
+    function renderOptions() {
+      var canShow = open == true && Array.isArray(options);
 
-    return Content;
-  }();
+      if (canShow) {
+        var filterActive = predictive === true && label && label.length > 0;
+        var items = filterActive ? options.filter(function (option) {
+          return option.label.toUpperCase().indexOf(label.toUpperCase()) >= 0;
+        }) : options;
+        var lis = items.map(function (option) {
+          return /*#__PURE__*/React__default["default"].createElement("li", {
+            key: option.value,
+            value: option.value
+          }, option.label);
+        });
+        return /*#__PURE__*/React__default["default"].createElement("menu", null, /*#__PURE__*/React__default["default"].createElement("ul", {
+          onMouseDown: select
+        }, lis));
+      } else {
+        return null;
+      }
+    }
 
-  var ColorField = function ColorField(props) {
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "dropdown"
+    }, /*#__PURE__*/React__default["default"].createElement(TextField, _extends({}, props, {
+      onClick: toggle,
+      value: label,
+      onChange: change,
+      onBlur: blur,
+      readOnly: !predictive
+    })), !readOnly ? /*#__PURE__*/React__default["default"].createElement(Icon, {
+      icon: "expand_more",
+      clickable: true,
+      size: "small",
+      action: toggle
+    }) : null, renderOptions());
+  };
+  var DateRange = function DateRange(props) {
     var id = props.id,
-        _props$label = props.label,
-        label = _props$label === void 0 ? "Color" : _props$label,
-        value = props.value,
+        label = props.label,
         onChange = props.onChange;
 
-    function change(event) {
-      var color = event.target.value;
-      if (onChange) onChange(id, color);
+    var _useState3 = React.useState({}),
+        form = _useState3[0],
+        setForm = _useState3[1];
+
+    React.useEffect(function () {
+      if (onChange) onChange(id, form);
+    }, [form]);
+
+    function change(id, value) {
+      var _Object$assign;
+
+      var next = Object.assign({}, form, (_Object$assign = {}, _Object$assign[id] = value, _Object$assign));
+      setForm(next);
     }
 
     return /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "color-field"
-    }, /*#__PURE__*/React__default["default"].createElement("label", {
-      htmlFor: id
-    }, label), /*#__PURE__*/React__default["default"].createElement("input", {
-      id: id,
-      type: "color",
-      onChange: change,
-      value: value
+      className: "date-range"
+    }, label ? /*#__PURE__*/React__default["default"].createElement("label", null, label) : null, /*#__PURE__*/React__default["default"].createElement(TextField, {
+      id: "from",
+      type: "date",
+      label: "From",
+      value: form.from,
+      onChange: change
+    }), /*#__PURE__*/React__default["default"].createElement(TextField, {
+      id: "to",
+      type: "date",
+      label: "To",
+      value: form.to,
+      onChange: change
     }));
   };
 
@@ -1505,17 +1481,31 @@
         className = props.className;
 
     var _useState = React.useState({}),
-        sortDir = _useState[0];
+        sortDir = _useState[0],
+        setSortDir = _useState[1];
 
     var _useState2 = React.useState(false),
         allChecked = _useState2[0],
         setAllChecked = _useState2[1];
 
+    React.useEffect(function () {
+      console.log(sortDir);
+    }, [sortDir]);
+
+    function changeSort(id) {
+      var _Object$assign;
+
+      var nextDir = sortDir[id] ? sortDir[id] * -1 : 1;
+      var next = Object.assign({}, sortDir, (_Object$assign = {}, _Object$assign[id] = nextDir, _Object$assign));
+      setSortDir(next);
+    }
+
     function multiSort(array, sortObject) {
       if (sortObject === void 0) {
         sortObject = {};
       }
 
+      console.log('multisort', sortObject);
       var sortKeys = Object.keys(sortObject);
 
       if (!sortKeys.length) {
@@ -1558,7 +1548,7 @@
       }
     }
 
-    function sort(dragged, dropped) {
+    function moveRow(dragged, dropped) {
       if (onSort) onSort(dragged, dropped);
     }
 
@@ -1590,16 +1580,19 @@
         key: id,
         rowSpan: rowspan,
         colSpan: colspan
-      }, id === "checked" ? /*#__PURE__*/React__default["default"].createElement(CheckBox, {
+      }, /*#__PURE__*/React__default["default"].createElement("div", null, id === "checked" ? /*#__PURE__*/React__default["default"].createElement(CheckBox, {
         onChange: checkAll,
         value: allChecked
       }) : /*#__PURE__*/React__default["default"].createElement(Text, {
         key: "th_" + id
       }, label), sortable ? /*#__PURE__*/React__default["default"].createElement(Icon, {
-        icon: "arrow_up",
+        icon: "expand_less",
         size: "small",
-        clickable: true
-      }) : null);
+        clickable: true,
+        action: function action() {
+          return changeSort(id);
+        }
+      }) : null));
     }), /*#__PURE__*/React__default["default"].createElement("th", {
       rowSpan: 2,
       colSpan: 1
@@ -1620,7 +1613,7 @@
         row: row,
         columns: columns,
         onSelect: select,
-        onDrop: sort,
+        onDrop: moveRow,
         editable: editable,
         expanded: expanded
       });
@@ -3819,6 +3812,30 @@
     });
   };
 
+  var ColorField = function ColorField(props) {
+    var id = props.id,
+        _props$label = props.label,
+        label = _props$label === void 0 ? "Color" : _props$label,
+        value = props.value,
+        onChange = props.onChange;
+
+    function change(event) {
+      var color = event.target.value;
+      if (onChange) onChange(id, color);
+    }
+
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "color-field"
+    }, /*#__PURE__*/React__default["default"].createElement("label", {
+      htmlFor: id
+    }, label), /*#__PURE__*/React__default["default"].createElement("input", {
+      id: id,
+      type: "color",
+      onChange: change,
+      value: value
+    }));
+  };
+
   /**
    * Content Editor
    */
@@ -4867,17 +4884,70 @@
       delay: delay
     }), children ? /*#__PURE__*/React__default["default"].createElement("article", null, children) : null));
   };
-
   var CollectionFilters = function CollectionFilters(props) {
-    return /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "collection-filters"
-    }, "TODO: filters");
+    var change = function change(next) {
+      try {
+        setForm(next);
+        return Promise.resolve();
+      } catch (e) {
+        return Promise.reject(e);
+      }
+    };
+
+    var schema = props.schema,
+        onChange = props.onChange;
+
+    var _useState = React.useState({}),
+        form = _useState[0],
+        setForm = _useState[1];
+
+    var filterSchema = React.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];
+            }
+          }
+        }
+      }
+
+      return filterSchema;
+    }, [schema]);
+    React.useEffect(function () {
+      if (onChange) onChange(form);
+    }, [form]);
+
+    function clear() {
+      change({});
+    }
+
+    var content = new Content(filterSchema, form);
+    return /*#__PURE__*/React__default["default"].createElement(React.Fragment, null, /*#__PURE__*/React__default["default"].createElement(Header, {
+      className: "table-filters",
+      title: /*#__PURE__*/React__default["default"].createElement(Text, null, "Filters")
+    }, /*#__PURE__*/React__default["default"].createElement(Icon, {
+      icon: "filter_list_off",
+      size: "small",
+      clickable: true,
+      action: clear
+    })), /*#__PURE__*/React__default["default"].createElement("main", {
+      className: "table-filters"
+    }, /*#__PURE__*/React__default["default"].createElement(ContentEditor, {
+      content: content,
+      onChange: change
+    })));
   };
   /**
    * Collection List
    */
 
-
   var CollectionList = function CollectionList(props) {
     var select = function select(id) {
       try {
@@ -5047,9 +5117,9 @@
         delay = _props$delay2 === void 0 ? 1000 : _props$delay2;
     var timer = React.useRef(null);
 
-    var _useState = React.useState(selected),
-        form = _useState[0],
-        setForm = _useState[1];
+    var _useState2 = React.useState(selected),
+        form = _useState2[0],
+        setForm = _useState2[1];
 
     React.useEffect(function () {
       setForm(selected);
@@ -7586,6 +7656,7 @@
   exports.CircularProgress = CircularProgress;
   exports.CollectionContext = CollectionContext;
   exports.CollectionEditor = CollectionEditor$1;
+  exports.CollectionFilters = CollectionFilters;
   exports.CollectionPage = CollectionPage;
   exports.CollectionTree = CollectionTree;
   exports.Content = Content;