ywana-core8 0.0.488 → 0.0.491

package/dist/index.modern.js

@@ -918,307 +918,6 @@ var Stack = function Stack(props) {
   return /*#__PURE__*/React.createElement(Fragment, null, child);
 };
 
-/**
- * Text Field
- */
-
-var TextField = function TextField(props) {
-  var site = 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.createElement(Text, null, label);
-  return /*#__PURE__*/React.createElement("div", {
-    className: "" + style,
-    onClick: onClick
-  }, /*#__PURE__*/React.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.createElement(Icon, {
-    icon: "close",
-    clickable: true,
-    size: "small",
-    action: clear
-  }) : null, /*#__PURE__*/React.createElement("span", {
-    className: "bar"
-  }), label ? /*#__PURE__*/React.createElement("label", null, labelTxt) : null);
-};
-/**
- * Text Area
- */
-
-var TextArea = function TextArea(props) {
-  var site = 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.createElement(Text, null, label);
-  return /*#__PURE__*/React.createElement("div", {
-    className: "" + style,
-    onClick: onClick
-  }, /*#__PURE__*/React.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.createElement(Icon, {
-    icon: "close",
-    clickable: true,
-    size: "small",
-    action: clear
-  }) : null, /*#__PURE__*/React.createElement("span", {
-    className: "bar"
-  }), label ? /*#__PURE__*/React.createElement("label", null, labelTxt) : null);
-};
-/**
- * Dropdown
- */
-
-var DropDown = function DropDown(props) {
-  var site = 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 = useState(false),
-      open = _useState[0],
-      setOpen = _useState[1];
-
-  var _useState2 = useState(),
-      label = _useState2[0],
-      setLabel = _useState2[1];
-
-  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.createElement("li", {
-          key: option.value,
-          value: option.value
-        }, option.label);
-      });
-      return /*#__PURE__*/React.createElement("menu", null, /*#__PURE__*/React.createElement("ul", {
-        onMouseDown: select
-      }, lis));
-    } else {
-      return null;
-    }
-  }
-
-  return /*#__PURE__*/React.createElement("div", {
-    className: "dropdown"
-  }, /*#__PURE__*/React.createElement(TextField, _extends({}, props, {
-    onClick: toggle,
-    value: label,
-    onChange: change,
-    onBlur: blur,
-    readOnly: !predictive
-  })), !readOnly ? /*#__PURE__*/React.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 = useState({}),
-      form = _useState3[0],
-      setForm = _useState3[1];
-
-  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.createElement("div", {
-    className: "date-range"
-  }, label ? /*#__PURE__*/React.createElement("label", null, label) : null, /*#__PURE__*/React.createElement(TextField, {
-    id: "from",
-    type: "date",
-    label: "From",
-    value: form.from,
-    onChange: change
-  }), /*#__PURE__*/React.createElement(TextField, {
-    id: "to",
-    type: "date",
-    label: "To",
-    value: form.to,
-    onChange: change
-  }));
-};
-
 /**
  * TYPES
  */
@@ -1405,77 +1104,354 @@ var ContentType = /*#__PURE__*/function () {
             }) : [];
           }
 
-          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 = 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.createElement(Text, null, label);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "" + style,
+    onClick: onClick
+  }, /*#__PURE__*/React.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.createElement(Icon, {
+    icon: "close",
+    clickable: true,
+    size: "small",
+    action: clear
+  }) : null, /*#__PURE__*/React.createElement("span", {
+    className: "bar"
+  }), label ? /*#__PURE__*/React.createElement("label", null, labelTxt) : null);
+};
+/**
+ * Text Area
+ */
+
+var TextArea = function TextArea(props) {
+  var site = 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.createElement(Text, null, label);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "" + style,
+    onClick: onClick
+  }, /*#__PURE__*/React.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.createElement(Icon, {
+    icon: "close",
+    clickable: true,
+    size: "small",
+    action: clear
+  }) : null, /*#__PURE__*/React.createElement("span", {
+    className: "bar"
+  }), label ? /*#__PURE__*/React.createElement("label", null, labelTxt) : null);
+};
+/**
+ * Dropdown
+ */
+
+var DropDown = function DropDown(props) {
+  var site = 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 = useState(false),
+      open = _useState[0],
+      setOpen = _useState[1];
+
+  var _useState2 = useState(),
+      label = _useState2[0],
+      setLabel = _useState2[1];
 
-        default:
-          next[name] = field;
-          break;
-      }
+  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.createElement("li", {
+          key: option.value,
+          value: option.value
+        }, option.label);
+      });
+      return /*#__PURE__*/React.createElement("menu", null, /*#__PURE__*/React.createElement("ul", {
+        onMouseDown: select
+      }, lis));
+    } else {
+      return null;
+    }
+  }
 
-var ColorField = function ColorField(props) {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "dropdown"
+  }, /*#__PURE__*/React.createElement(TextField, _extends({}, props, {
+    onClick: toggle,
+    value: label,
+    onChange: change,
+    onBlur: blur,
+    readOnly: !predictive
+  })), !readOnly ? /*#__PURE__*/React.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 = useState({}),
+      form = _useState3[0],
+      setForm = _useState3[1];
+
+  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.createElement("div", {
-    className: "color-field"
-  }, /*#__PURE__*/React.createElement("label", {
-    htmlFor: id
-  }, label), /*#__PURE__*/React.createElement("input", {
-    id: id,
-    type: "color",
-    onChange: change,
-    value: value
+    className: "date-range"
+  }, label ? /*#__PURE__*/React.createElement("label", null, label) : null, /*#__PURE__*/React.createElement(TextField, {
+    id: "from",
+    type: "date",
+    label: "From",
+    value: form.from,
+    onChange: change
+  }), /*#__PURE__*/React.createElement(TextField, {
+    id: "to",
+    type: "date",
+    label: "To",
+    value: form.to,
+    onChange: change
   }));
 };
 
@@ -1502,17 +1478,31 @@ var DataTable = function DataTable(props) {
       className = props.className;
 
   var _useState = useState({}),
-      sortDir = _useState[0];
+      sortDir = _useState[0],
+      setSortDir = _useState[1];
 
   var _useState2 = useState(false),
       allChecked = _useState2[0],
       setAllChecked = _useState2[1];
 
+  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) {
@@ -1555,7 +1545,7 @@ var DataTable = function DataTable(props) {
     }
   }
 
-  function sort(dragged, dropped) {
+  function moveRow(dragged, dropped) {
     if (onSort) onSort(dragged, dropped);
   }
 
@@ -1587,16 +1577,19 @@ var DataTable = function DataTable(props) {
       key: id,
       rowSpan: rowspan,
       colSpan: colspan
-    }, id === "checked" ? /*#__PURE__*/React.createElement(CheckBox, {
+    }, /*#__PURE__*/React.createElement("div", null, id === "checked" ? /*#__PURE__*/React.createElement(CheckBox, {
       onChange: checkAll,
       value: allChecked
     }) : /*#__PURE__*/React.createElement(Text, {
       key: "th_" + id
     }, label), sortable ? /*#__PURE__*/React.createElement(Icon, {
-      icon: "arrow_up",
+      icon: "expand_less",
       size: "small",
-      clickable: true
-    }) : null);
+      clickable: true,
+      action: function action() {
+        return changeSort(id);
+      }
+    }) : null));
   }), /*#__PURE__*/React.createElement("th", {
     rowSpan: 2,
     colSpan: 1
@@ -1617,7 +1610,7 @@ var DataTable = function DataTable(props) {
       row: row,
       columns: columns,
       onSelect: select,
-      onDrop: sort,
+      onDrop: moveRow,
       editable: editable,
       expanded: expanded
     });
@@ -3816,6 +3809,30 @@ var NumberField = function NumberField(_ref3) {
   });
 };
 
+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.createElement("div", {
+    className: "color-field"
+  }, /*#__PURE__*/React.createElement("label", {
+    htmlFor: id
+  }, label), /*#__PURE__*/React.createElement("input", {
+    id: id,
+    type: "color",
+    onChange: change,
+    value: value
+  }));
+};
+
 /**
  * Content Editor
  */
@@ -4864,17 +4881,70 @@ var CollectionPage = function CollectionPage(props) {
     delay: delay
   }), children ? /*#__PURE__*/React.createElement("article", null, children) : null));
 };
-
 var CollectionFilters = function CollectionFilters(props) {
-  return /*#__PURE__*/React.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 = useState({}),
+      form = _useState[0],
+      setForm = _useState[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];
+          }
+        }
+      }
+    }
+
+    return filterSchema;
+  }, [schema]);
+  useEffect(function () {
+    if (onChange) onChange(form);
+  }, [form]);
+
+  function clear() {
+    change({});
+  }
+
+  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
+  })), /*#__PURE__*/React.createElement("main", {
+    className: "table-filters"
+  }, /*#__PURE__*/React.createElement(ContentEditor, {
+    content: content,
+    onChange: change
+  })));
 };
 /**
  * Collection List
  */
 
-
 var CollectionList = function CollectionList(props) {
   var select = function select(id) {
     try {
@@ -5044,9 +5114,9 @@ var CollectionEditor = function CollectionEditor(props) {
       delay = _props$delay2 === void 0 ? 1000 : _props$delay2;
   var timer = useRef(null);
 
-  var _useState = useState(selected),
-      form = _useState[0],
-      setForm = _useState[1];
+  var _useState2 = useState(selected),
+      form = _useState2[0],
+      setForm = _useState2[1];
 
   useEffect(function () {
     setForm(selected);
@@ -7575,5 +7645,5 @@ var isFunction = function isFunction(value) {
   return value && (Object.prototype.toString.call(value) === "[object Function]" || "function" === typeof value || value instanceof Function);
 };
 
-export { Avatar, Button, CheckBox, Chip, Chips, CircularProgress, CollectionContext, CollectionEditor$1 as CollectionEditor, 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, 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 { Avatar, Button, 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, 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 };
 //# sourceMappingURL=index.modern.js.map