ywana-core8 0.0.486 → 0.0.489

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, { useContext, useState, useEffect, Fragment, useMemo as useMemo$1, useRef, Children } from 'react';
 import RSwitch from 'react-switch';
 import moment from 'moment';
 import { extendMoment } from 'moment-range';
@@ -918,275 +918,10 @@ 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());
-};
-
 /**
  * TYPES
  */
-var TYPES = {
+var TYPES$1 = {
   STRING: 'String',
   NUMBER: 'Number',
   BOOLEAN: 'Boolean',
@@ -1201,7 +936,7 @@ var TYPES = {
 var FORMATS = {
   NONE: '',
   DATE: 'date',
-  DATERANGE: 'DATARANGE',
+  DATERANGE: 'DATERANGE',
   TIME: 'time',
   EMAIL: 'email',
   HTML: 'HTML',
@@ -1214,7 +949,7 @@ var FORMATS = {
  * CHECK
  */
 
-var CHECK = Object.values(TYPES).reduce(function (obj, name) {
+var CHECK = Object.values(TYPES$1).reduce(function (obj, name) {
   obj['is' + name] = function (x) {
     return toString.call(x) == '[object ' + name + ']';
   };
@@ -1242,19 +977,19 @@ var ContentType = /*#__PURE__*/function () {
       var child = new ContentType(item);
 
       switch (type) {
-        case TYPES.ARRAY:
+        case TYPES$1.ARRAY:
           valid = CHECK['is' + type](data);
           validChildren = data.every(function (element) {
             return child.validate(element);
           });
           break;
 
-        case TYPES.ENTITY:
+        case TYPES$1.ENTITY:
           valid = CHECK['is' + type](data);
           validChildren = child.validate(data);
           break;
 
-        case TYPES.NUMBER:
+        case TYPES$1.NUMBER:
           valid = CHECK['is' + type](data.value);
           validChildren = true;
           break;
@@ -1340,27 +1075,27 @@ var ContentType = /*#__PURE__*/function () {
       var entryData = data ? data[name] : null;
 
       switch (type) {
-        case TYPES.STRING:
+        case TYPES$1.STRING:
           next[name] = entryData || field["default"];
           break;
 
-        case TYPES.NUMBER:
+        case TYPES$1.NUMBER:
           next[name] = entryData || field["default"];
           break;
 
-        case TYPES.BOOLEAN:
+        case TYPES$1.BOOLEAN:
           next[name] = entryData || field["default"];
           break;
 
-        case TYPES.ENTITY:
+        case TYPES$1.ENTITY:
           if (optional === true) console.log('OPTIONAL', field, !entryData);
           if (optional === true && !entryData) break;
           var child1 = new ContentType(item);
           next[name] = child1.value(entryData);
           break;
 
-        case TYPES.ARRAY:
-          if (item === TYPES.STRING) {
+        case TYPES$1.ARRAY:
+          if (item === TYPES$1.STRING) {
             next[name] = entryData ? entryData : [];
           } else {
             var child2 = new ContentType(item);
@@ -1369,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];
 
-        default:
-          next[name] = field;
-          break;
-      }
+  var _useState2 = useState(),
+      label = _useState2[0],
+      setLabel = _useState2[1];
 
-      return next;
-    }, {});
-    return next;
-  };
+  useEffect(function () {
+    if (Array.isArray(options)) {
+      var option = options.find(function (option) {
+        return option.value === value;
+      });
 
-  return ContentType;
-}();
-/**
- * Content
- */
+      var _label = option ? option.label : "";
 
-var Content = /*#__PURE__*/function () {
-  function Content(type, value) {
-    this.type = type;
-    this._type = new ContentType(type);
-    this._value = value;
-  }
+      setLabel(_label);
+    }
+  }, [value]);
 
-  var _proto2 = Content.prototype;
+  function change(id, value) {
+    if (predictive) {
+      setLabel(value);
+    } else {
+      if (onChange) onChange(id, value);
+    }
+  }
 
-  _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
   }));
 };
 
@@ -1466,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) {
@@ -1519,7 +1545,7 @@ var DataTable = function DataTable(props) {
     }
   }
 
-  function sort(dragged, dropped) {
+  function moveRow(dragged, dropped) {
     if (onSort) onSort(dragged, dropped);
   }
 
@@ -1541,7 +1567,7 @@ var DataTable = function DataTable(props) {
         item = _ref.item,
         sortable = _ref.sortable;
 
-    var _ref2 = type === TYPES.ENTITY ? [1, Object.values(item).filter(function (v) {
+    var _ref2 = type === TYPES$1.ENTITY ? [1, Object.values(item).filter(function (v) {
       return v.column === true;
     }).length] : [2, 1],
         rowspan = _ref2[0],
@@ -1551,22 +1577,25 @@ 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
   })), /*#__PURE__*/React.createElement("tr", null, columns.filter(function (_ref3) {
     var type = _ref3.type;
-    return type === TYPES.ENTITY;
+    return type === TYPES$1.ENTITY;
   }).map(function (column) {
     var item = column.item;
     var fields = item ? Object.values(item) : [];
@@ -1581,7 +1610,7 @@ var DataTable = function DataTable(props) {
       row: row,
       columns: columns,
       onSelect: select,
-      onDrop: sort,
+      onDrop: moveRow,
       editable: editable,
       expanded: expanded
     });
@@ -1779,7 +1808,7 @@ var DataTableCell = function DataTableCell(_ref4) {
     }
   };
 
-  return column.type === TYPES.ENTITY ? /*#__PURE__*/React.createElement(EntityCellViewer, {
+  return column.type === TYPES$1.ENTITY ? /*#__PURE__*/React.createElement(EntityCellViewer, {
     id: column.id,
     item: column.item,
     value: cell
@@ -2584,7 +2613,7 @@ var Planner = function Planner(_ref) {
     if (onSelectCell) onSelectCell(lane, date);
   }
 
-  var period = useMemo(function () {
+  var period = useMemo$1(function () {
     var start = ranges(from, "YYYY-MM-DD");
     var end = ranges(to, "YYYY-MM-DD");
     var range = ranges.range(start, end);
@@ -2935,7 +2964,7 @@ var Uploader = function Uploader(_ref) {
       onSuccess = _ref.onSuccess,
       onError = _ref.onError,
       onComplete = _ref.onComplete;
-  var resumable = useMemo(function () {
+  var resumable = useMemo$1(function () {
     var config = {
       target: target,
       chunkSize: 1 * 1024 * 1024,
@@ -3677,12 +3706,12 @@ var ContentFormField = function ContentFormField(props) {
   var type = props.type;
 
   switch (type) {
-    case TYPES.BOOLEAN:
+    case TYPES$1.BOOLEAN:
       return /*#__PURE__*/React.createElement(CheckBox, _extends({
         key: props.id
       }, props));
 
-    case TYPES.NUMBER:
+    case TYPES$1.NUMBER:
       return /*#__PURE__*/React.createElement(NumberField, _extends({
         key: props.id
       }, props));
@@ -3711,7 +3740,7 @@ var StringField = function StringField(_ref2) {
       value = _ref2.value,
       onChange = _ref2.onChange,
       outlined = _ref2.outlined;
-  var fieldTypes = (_fieldTypes = {}, _fieldTypes[TYPES.NUMBER] = 'number', _fieldTypes[TYPES.DATE] = 'date', _fieldTypes);
+  var fieldTypes = (_fieldTypes = {}, _fieldTypes[TYPES$1.NUMBER] = 'number', _fieldTypes[TYPES$1.DATE] = 'date', _fieldTypes);
 
   function buildOptions() {
     var opts = typeof options === 'function' ? options() : options;
@@ -3780,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
  */
@@ -3920,7 +3973,7 @@ var TreededContentEditor = function TreededContentEditor(_ref3) {
       onChange = _ref3.onChange;
   var value = content.value();
   var nodes = Object.values(content.type).filter(function (field) {
-    return field.type === TYPES.ARRAY;
+    return field.type === TYPES$1.ARRAY;
   });
 
   var _useState2 = useState(),
@@ -4007,14 +4060,14 @@ var FieldEditor = function FieldEditor(_ref4) {
       return null;
     } else {
       switch (type) {
-        case TYPES.ENTITY:
+        case TYPES$1.ENTITY:
           return /*#__PURE__*/React.createElement(EntityEditor, {
             field: field,
             value: value1,
             onChange: change
           });
 
-        case TYPES.STRING:
+        case TYPES$1.STRING:
           return /*#__PURE__*/React.createElement(StringEditor, {
             outlined: outlined,
             field: field,
@@ -4023,7 +4076,7 @@ var FieldEditor = function FieldEditor(_ref4) {
             content: content
           });
 
-        case TYPES.BOOLEAN:
+        case TYPES$1.BOOLEAN:
           return /*#__PURE__*/React.createElement(CheckBox, {
             outlined: true,
             id: id,
@@ -4032,7 +4085,7 @@ var FieldEditor = function FieldEditor(_ref4) {
             onChange: change
           });
 
-        case TYPES.NUMBER:
+        case TYPES$1.NUMBER:
           return /*#__PURE__*/React.createElement(NumberEditor, {
             outlined: outlined,
             field: field,
@@ -4040,8 +4093,8 @@ var FieldEditor = function FieldEditor(_ref4) {
             onChange: change
           });
 
-        case TYPES.ARRAY:
-          return item === TYPES.STRING ? options ? /*#__PURE__*/React.createElement(MultiSelectionEditor, {
+        case TYPES$1.ARRAY:
+          return item === TYPES$1.STRING ? options ? /*#__PURE__*/React.createElement(MultiSelectionEditor, {
             content: content,
             field: field,
             value: value1,
@@ -4828,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 {
@@ -5008,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);
@@ -5338,19 +5444,19 @@ var FieldViewer = function FieldViewer(props) {
   if (optional && value === undefined) return null;
 
   switch (type) {
-    case TYPES.STRING:
+    case TYPES$1.STRING:
       return /*#__PURE__*/React.createElement(Property, {
         label: label,
         value: value
       });
 
-    case TYPES.ENTITY:
+    case TYPES$1.ENTITY:
       return /*#__PURE__*/React.createElement(EntityViewer, {
         field: field,
         value: value
       });
 
-    case TYPES.ARRAY:
+    case TYPES$1.ARRAY:
       return /*#__PURE__*/React.createElement(ArrayViewer, {
         label: label,
         item: item,
@@ -5415,12 +5521,12 @@ var ArrayViewer = function ArrayViewer(props) {
 var QUERY = {
   id: {
     id: "id",
-    type: TYPES.STRING,
+    type: TYPES$1.STRING,
     editable: false
   },
   name: {
     id: "name",
-    type: TYPES.STRING,
+    type: TYPES$1.STRING,
     required: true,
     label: "Name"
   }
@@ -5913,14 +6019,14 @@ var TableFilters$1 = function TableFilters(props) {
       form = _useState3[0],
       setForm = _useState3[1];
 
-  var filterSchema = useMemo(function () {
+  var filterSchema = useMemo$1(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) {
+        if (filterSchema[key].type === TYPES$1.ENTITY) {
           var fs = filterSchema[key].item;
 
           for (var key in fs) {
@@ -6981,14 +7087,14 @@ var TableFilters = function TableFilters(props) {
       form = _useState4[0],
       setForm = _useState4[1];
 
-  var filterSchema = useMemo(function () {
+  var filterSchema = useMemo$1(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) {
+        if (filterSchema[key].type === TYPES$1.ENTITY) {
           var fs = filterSchema[key].item;
 
           for (var key in fs) {
@@ -7002,7 +7108,7 @@ var TableFilters = function TableFilters(props) {
     delete filterSchema.flows;
     return filterSchema;
   }, [schema]);
-  var likes = useMemo(function () {
+  var likes = useMemo$1(function () {
     var fields = Object.values(schema);
     return fields.reduce(function (likes, field) {
       if (field.like === true) likes.push(field.id);
@@ -7539,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$1 as 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