@mirai/ui 1.0.133 → 1.0.134

package/build/components/Table/Table.ColumnFilter.js

@@ -0,0 +1,154 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ColumnFilter = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = _interopRequireWildcard(require("react"));
+var _helpers = require("../../helpers");
+var _primitives = require("../../primitives");
+var _Button = require("../Button");
+var _InputText = require("../InputText");
+var _Menu = require("../Menu");
+var _TableModule = _interopRequireDefault(require("./Table.module.css"));
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0) { ; } } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+var ColumnFilter = function ColumnFilter(_ref) {
+  var field = _ref.field,
+    _ref$labelCancel = _ref.labelCancel,
+    labelCancel = _ref$labelCancel === void 0 ? '$Cancel' : _ref$labelCancel,
+    _ref$labelSubmit = _ref.labelSubmit,
+    labelSubmit = _ref$labelSubmit === void 0 ? '$Submit' : _ref$labelSubmit,
+    _ref$schema = _ref.schema;
+  _ref$schema = _ref$schema === void 0 ? {} : _ref$schema;
+  var label = _ref$schema.label,
+    _ref$schema$type = _ref$schema.type,
+    type = _ref$schema$type === void 0 ? 'text' : _ref$schema$type,
+    _ref$onSubmit = _ref.onSubmit,
+    onSubmit = _ref$onSubmit === void 0 ? function () {} : _ref$onSubmit;
+  var _useState = (0, _react.useState)({}),
+    _useState2 = _slicedToArray(_useState, 2),
+    form = _useState2[0],
+    setForm = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    visible = _useState4[0],
+    setVisible = _useState4[1];
+  (0, _react.useEffect)(function () {
+    setForm({});
+  }, [visible]);
+  var handlePress = function handlePress(event) {
+    event.preventDefault();
+    setVisible(!visible);
+  };
+  var handleCancel = function handleCancel() {
+    setVisible(false);
+  };
+  var handleSubmit = function handleSubmit(event) {
+    event.preventDefault();
+    setVisible(false);
+    onSubmit(_objectSpread({
+      field: field,
+      type: type
+    }, form), event);
+  };
+  return /*#__PURE__*/_react.default.createElement(_Menu.Menu, {
+    options: [{
+      children: /*#__PURE__*/_react.default.createElement(_primitives.Text, {
+        bold: true,
+        small: true
+      }, label || field),
+      divider: true
+    }, {
+      children: type === 'number' ? /*#__PURE__*/_react.default.createElement(_primitives.View, {
+        row: true,
+        className: _TableModule.default.items
+      }, /*#__PURE__*/_react.default.createElement(_InputText.InputText, {
+        label: "min",
+        name: "min",
+        type: "number",
+        value: form.min,
+        onChange: function onChange(min) {
+          return setForm(_objectSpread(_objectSpread({}, form), {}, {
+            min: min
+          }));
+        },
+        className: _TableModule.default.input
+      }), /*#__PURE__*/_react.default.createElement(_InputText.InputText, {
+        label: "max",
+        name: "max",
+        type: "number",
+        value: form.max,
+        onChange: function onChange(max) {
+          return setForm(_objectSpread(_objectSpread({}, form), {}, {
+            max: max
+          }));
+        },
+        className: _TableModule.default.input
+      })) : /*#__PURE__*/_react.default.createElement(_InputText.InputText, {
+        name: "search",
+        type: "search",
+        value: form.value,
+        onChange: function onChange(value) {
+          return setForm({
+            value: value
+          });
+        },
+        className: _TableModule.default.input
+      }),
+      divider: true
+    }, {
+      children: /*#__PURE__*/_react.default.createElement(_primitives.View, {
+        row: true,
+        wide: true,
+        className: _TableModule.default.items
+      }, /*#__PURE__*/_react.default.createElement(_Button.Button, {
+        secondary: true,
+        wide: true,
+        onPress: handleCancel
+      }, labelCancel), /*#__PURE__*/_react.default.createElement(_Button.Button, {
+        wide: true,
+        onPress: handleSubmit
+      }, labelSubmit))
+    }],
+    bottom: true,
+    centered: true,
+    visible: visible,
+    className: _TableModule.default.menuFilter
+  }, /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
+    onPress: handlePress,
+    style: {
+      position: 'relative'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
+    value: _primitives.ICON.FILTER,
+    className: (0, _helpers.styles)(_TableModule.default.icon, !visible && _TableModule.default.disabled)
+  })));
+};
+exports.ColumnFilter = ColumnFilter;
+ColumnFilter.displayName = 'Component:Table:ColumnFilter';
+ColumnFilter.propTypes = {
+  field: _propTypes.default.string.isRequired,
+  labelCancel: _propTypes.default.string,
+  labelSubmit: _propTypes.default.string,
+  schema: _propTypes.default.shape({
+    label: _propTypes.default.string,
+    type: _propTypes.default.string
+  }).isRequired,
+  onSubmit: _propTypes.default.func.isRequired
+};
+//# sourceMappingURL=Table.ColumnFilter.js.map

package/build/components/Table/Table.ColumnFilter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table.ColumnFilter.js","names":["ColumnFilter","field","labelCancel","labelSubmit","schema","label","type","onSubmit","useState","form","setForm","visible","setVisible","useEffect","handlePress","event","preventDefault","handleCancel","handleSubmit","children","divider","style","items","min","input","max","value","menuFilter","position","ICON","FILTER","styles","icon","disabled","displayName","propTypes","PropTypes","string","isRequired","shape","func"],"sources":["../../../src/components/Table/Table.ColumnFilter.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useEffect, useState } from 'react';\n\nimport { styles } from '../../helpers';\nimport { Icon, ICON, Pressable, Text, View } from '../../primitives';\nimport { Button } from '../Button';\nimport { InputText } from '../InputText';\nimport { Menu } from '../Menu';\nimport style from './Table.module.css';\n\nconst ColumnFilter = ({\n  field,\n  labelCancel = '$Cancel',\n  labelSubmit = '$Submit',\n  schema: { label, type = 'text' } = {},\n  onSubmit = () => {},\n}) => {\n  const [form, setForm] = useState({});\n  const [visible, setVisible] = useState(false);\n\n  useEffect(() => {\n    setForm({});\n  }, [visible]);\n\n  const handlePress = (event) => {\n    event.preventDefault();\n    setVisible(!visible);\n  };\n\n  const handleCancel = () => {\n    setVisible(false);\n  };\n\n  const handleSubmit = (event) => {\n    event.preventDefault();\n    setVisible(false);\n    onSubmit({ field, type, ...form }, event);\n  };\n\n  return (\n    <Menu\n      options={[\n        {\n          children: (\n            <Text bold small>\n              {label || field}\n            </Text>\n          ),\n          divider: true,\n        },\n        {\n          children:\n            type === 'number' ? (\n              <View row className={style.items}>\n                <InputText\n                  label=\"min\"\n                  name=\"min\"\n                  type=\"number\"\n                  value={form.min}\n                  onChange={(min) => setForm({ ...form, min })}\n                  className={style.input}\n                />\n                <InputText\n                  label=\"max\"\n                  name=\"max\"\n                  type=\"number\"\n                  value={form.max}\n                  onChange={(max) => setForm({ ...form, max })}\n                  className={style.input}\n                />\n              </View>\n            ) : (\n              <InputText\n                name=\"search\"\n                type=\"search\"\n                value={form.value}\n                onChange={(value) => setForm({ value })}\n                className={style.input}\n              />\n            ),\n          divider: true,\n        },\n\n        {\n          children: (\n            <View row wide className={style.items}>\n              <Button secondary wide onPress={handleCancel}>\n                {labelCancel}\n              </Button>\n              <Button wide onPress={handleSubmit}>\n                {labelSubmit}\n              </Button>\n            </View>\n          ),\n        },\n      ]}\n      bottom\n      centered\n      visible={visible}\n      className={style.menuFilter}\n    >\n      <Pressable onPress={handlePress} style={{ position: 'relative' }}>\n        <Icon value={ICON.FILTER} className={styles(style.icon, !visible && style.disabled)} />\n      </Pressable>\n    </Menu>\n  );\n};\n\nColumnFilter.displayName = 'Component:Table:ColumnFilter';\n\nColumnFilter.propTypes = {\n  field: PropTypes.string.isRequired,\n  labelCancel: PropTypes.string,\n  labelSubmit: PropTypes.string,\n  schema: PropTypes.shape({\n    label: PropTypes.string,\n    type: PropTypes.string,\n  }).isRequired,\n  onSubmit: PropTypes.func.isRequired,\n};\n\nexport { ColumnFilter };\n"],"mappings":"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"}

package/build/components/Table/Table.Filter.js

@@ -0,0 +1,57 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Filter = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = _interopRequireDefault(require("react"));
+var _primitives = require("../../primitives");
+var _TableModule = _interopRequireDefault(require("./Table.module.css"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var Filter = function Filter(_ref) {
+  var _ref$filter = _ref.filter,
+    filter = _ref$filter === void 0 ? [] : _ref$filter,
+    _ref$onRemove = _ref.onRemove,
+    onRemove = _ref$onRemove === void 0 ? function () {} : _ref$onRemove;
+  return /*#__PURE__*/_react.default.createElement(_primitives.View, {
+    row: true,
+    wide: true,
+    className: _TableModule.default.filters
+  }, filter.map(function (_ref2, index) {
+    var field = _ref2.field,
+      value = _ref2.value,
+      min = _ref2.min,
+      max = _ref2.max;
+    return /*#__PURE__*/_react.default.createElement(_primitives.View, {
+      row: true,
+      key: index,
+      className: _TableModule.default.filter
+    }, /*#__PURE__*/_react.default.createElement(_primitives.Text, {
+      small: true
+    }, field), value && /*#__PURE__*/_react.default.createElement(_primitives.Text, {
+      bold: true,
+      small: true
+    }, value), min && /*#__PURE__*/_react.default.createElement(_primitives.Text, {
+      bold: true,
+      small: true
+    }, "".concat(max ? '' : '≥ ').concat(min)), max && /*#__PURE__*/_react.default.createElement(_primitives.Text, {
+      bold: true,
+      small: true
+    }, "".concat(min ? ' - ' : '≤ ').concat(max)), /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
+      onPress: function onPress() {
+        return onRemove(index);
+      }
+    }, /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
+      action: true,
+      value: _primitives.ICON.CLOSE
+    })));
+  }));
+};
+exports.Filter = Filter;
+Filter.displayName = 'Component:Table:Filter';
+Filter.propTypes = {
+  filter: _propTypes.default.arrayOf(_propTypes.default.shape({})),
+  onRemove: _propTypes.default.func.isRequired
+};
+//# sourceMappingURL=Table.Filter.js.map

package/build/components/Table/Table.Filter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table.Filter.js","names":["Filter","filter","onRemove","style","filters","map","index","field","value","min","max","ICON","CLOSE","displayName","propTypes","PropTypes","arrayOf","shape","func","isRequired"],"sources":["../../../src/components/Table/Table.Filter.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { Icon, ICON, Pressable, Text, View } from '../../primitives';\nimport style from './Table.module.css';\n\nconst Filter = ({ filter = [], onRemove = () => {} }) => (\n  <View row wide className={style.filters}>\n    {filter.map(({ field, value, min, max }, index) => (\n      <View row key={index} className={style.filter}>\n        <Text small>{field}</Text>\n        {value && (\n          <Text bold small>\n            {value}\n          </Text>\n        )}\n        {min && (\n          <Text bold small>\n            {`${max ? '' : '≥ '}${min}`}\n          </Text>\n        )}\n        {max && (\n          <Text bold small>\n            {`${min ? ' - ' : '≤ '}${max}`}\n          </Text>\n        )}\n        <Pressable onPress={() => onRemove(index)}>\n          <Icon action value={ICON.CLOSE} />\n        </Pressable>\n      </View>\n    ))}\n  </View>\n);\n\nFilter.displayName = 'Component:Table:Filter';\n\nFilter.propTypes = {\n  filter: PropTypes.arrayOf(PropTypes.shape({})),\n  onRemove: PropTypes.func.isRequired,\n};\n\nexport { Filter };\n"],"mappings":";;;;;;AAAA;AACA;AAEA;AACA;AAAuC;AAEvC,IAAMA,MAAM,GAAG,SAATA,MAAM;EAAA,uBAAMC,MAAM;IAANA,MAAM,4BAAG,EAAE;IAAA,qBAAEC,QAAQ;IAARA,QAAQ,8BAAG,YAAM,CAAC,CAAC;EAAA,oBAChD,6BAAC,gBAAI;IAAC,GAAG;IAAC,IAAI;IAAC,SAAS,EAAEC,oBAAK,CAACC;EAAQ,GACrCH,MAAM,CAACI,GAAG,CAAC,iBAA6BC,KAAK;IAAA,IAA/BC,KAAK,SAALA,KAAK;MAAEC,KAAK,SAALA,KAAK;MAAEC,GAAG,SAAHA,GAAG;MAAEC,GAAG,SAAHA,GAAG;IAAA,oBACnC,6BAAC,gBAAI;MAAC,GAAG;MAAC,GAAG,EAAEJ,KAAM;MAAC,SAAS,EAAEH,oBAAK,CAACF;IAAO,gBAC5C,6BAAC,gBAAI;MAAC,KAAK;IAAA,GAAEM,KAAK,CAAQ,EACzBC,KAAK,iBACJ,6BAAC,gBAAI;MAAC,IAAI;MAAC,KAAK;IAAA,GACbA,KAAK,CAET,EACAC,GAAG,iBACF,6BAAC,gBAAI;MAAC,IAAI;MAAC,KAAK;IAAA,aACVC,GAAG,GAAG,EAAE,GAAG,IAAI,SAAGD,GAAG,EAE5B,EACAC,GAAG,iBACF,6BAAC,gBAAI;MAAC,IAAI;MAAC,KAAK;IAAA,aACVD,GAAG,GAAG,KAAK,GAAG,IAAI,SAAGC,GAAG,EAE/B,eACD,6BAAC,qBAAS;MAAC,OAAO,EAAE;QAAA,OAAMR,QAAQ,CAACI,KAAK,CAAC;MAAA;IAAC,gBACxC,6BAAC,gBAAI;MAAC,MAAM;MAAC,KAAK,EAAEK,gBAAI,CAACC;IAAM,EAAG,CACxB,CACP;EAAA,CACR,CAAC,CACG;AAAA,CACR;AAAC;AAEFZ,MAAM,CAACa,WAAW,GAAG,wBAAwB;AAE7Cb,MAAM,CAACc,SAAS,GAAG;EACjBb,MAAM,EAAEc,kBAAS,CAACC,OAAO,CAACD,kBAAS,CAACE,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;EAC9Cf,QAAQ,EAAEa,kBAAS,CAACG,IAAI,CAACC;AAC3B,CAAC"}

package/build/components/Table/Table.Row.js

@@ -4,14 +4,15 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TableRow = void 0;
+exports.Row = void 0;
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireDefault(require("react"));
 var _helpers = require("../../helpers");
 var _primitives = require("../../primitives");
 var _InputOption = require("../InputOption");
+var _Table = require("./Table.ColumnFilter");
 var _TableModule = _interopRequireDefault(require("./Table.module.css"));
-var _excluded = ["checked", "dataSource", "indeterminate", "schema", "sort", "onPress", "onSelect", "onSort"];
+var _excluded = ["checked", "dataSource", "indeterminate", "schema", "sort", "onFilter", "onPress", "onSelect", "onSort"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -20,13 +21,14 @@ function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input ==
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 var CUSTOM_EVENT_TYPES = ['button', 'checkbox', 'input', 'radio', 'submit'];
-var TableRow = function TableRow(_ref) {
+var Row = function Row(_ref) {
   var checked = _ref.checked,
     dataSource = _ref.dataSource,
     indeterminate = _ref.indeterminate,
     schema = _ref.schema,
     _ref$sort = _ref.sort,
     sort = _ref$sort === void 0 ? {} : _ref$sort,
+    onFilter = _ref.onFilter,
     onPress = _ref.onPress,
     onSelect = _ref.onSelect,
     onSort = _ref.onSort,
@@ -62,20 +64,28 @@ var TableRow = function TableRow(_ref) {
       onChange: function onChange(event) {
         return onSelect(dataSource, event);
       }
-    }), isHead ? schema[field].label : dataSource[field], isHead && onSort && /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
+    }), isHead ? schema[field].label : dataSource[field], isHead && onSort && /*#__PURE__*/_react.default.createElement(_primitives.View, {
+      row: true,
+      className: _TableModule.default.icons
+    }, onSort && /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
       value: sort[field] === false ? _primitives.ICON.UP : _primitives.ICON.DOWN,
       className: (0, _helpers.styles)(_TableModule.default.icon, sort[field] === undefined && _TableModule.default.disabled)
-    })));
+    }), onFilter && /*#__PURE__*/_react.default.createElement(_Table.ColumnFilter, {
+      field: field,
+      schema: schema[field],
+      onSubmit: onFilter
+    }))));
   }));
 };
-exports.TableRow = TableRow;
-TableRow.displayName = 'Table:Row';
-TableRow.propTypes = {
+exports.Row = Row;
+Row.displayName = 'Component:Table:Row';
+Row.propTypes = {
   checked: _propTypes.default.bool,
   dataSource: _propTypes.default.shape({}),
   indeterminate: _propTypes.default.bool,
   schema: _propTypes.default.shape({}).isRequired,
   sort: _propTypes.default.shape({}),
+  onFilter: _propTypes.default.func,
   onPress: _propTypes.default.func,
   onSelect: _propTypes.default.func,
   onSort: _propTypes.default.func

package/build/components/Table/Table.Row.js.map

@@ -1 +1 @@
-{"version":3,"file":"Table.Row.js","names":["CUSTOM_EVENT_TYPES","TableRow","checked","dataSource","indeterminate","schema","sort","onPress","onSelect","onSort","others","isHead","undefined","testId","handlePress","field","event","target","type","includes","styles","style","selected","Object","keys","filter","map","index","React","createElement","column","selectable","checkbox","label","ICON","UP","DOWN","icon","disabled","displayName","propTypes","PropTypes","bool","shape","isRequired","func"],"sources":["../../../src/components/Table/Table.Row.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { Icon, ICON, View } from '../../primitives';\nimport { InputOption } from '../InputOption';\nimport style from './Table.module.css';\n\nconst CUSTOM_EVENT_TYPES = ['button', 'checkbox', 'input', 'radio', 'submit'];\n\nconst TableRow = ({ checked, dataSource, indeterminate, schema, sort = {}, onPress, onSelect, onSort, ...others }) => {\n  const isHead = dataSource === undefined;\n  const { ['data-testid']: testId } = others;\n\n  const handlePress = (field, event) => {\n    const { target: { type } = {} } = event;\n    if (CUSTOM_EVENT_TYPES.includes(type)) return;\n\n    isHead ? onSort(field) : onPress && onPress(dataSource, event);\n  };\n\n  return (\n    <tr {...others} role=\"tr\" className={styles(checked && style.selected, onPress && style.onPress)}>\n      {Object.keys(schema)\n        .filter((field) => schema[field].type !== 'hidden')\n        .map((field, index) =>\n          React.createElement(\n            isHead ? 'th' : 'td',\n            {\n              ['data-testid']: testId ? `${testId}-${field}` : undefined,\n              key: field,\n              onClick: (event) => handlePress(field, event),\n            },\n            <View\n              forceRow\n              tag=\"span\"\n              className={styles(\n                style.column,\n                onSelect && index === 0 && style.selectable,\n                !isHead && !(onSelect && index === 0) && style[schema[field].type || 'text'],\n              )}\n            >\n              {onSelect && index === 0 && (\n                <InputOption\n                  checked={checked}\n                  data-testid={testId ? `${testId}-checkbox` : undefined}\n                  indeterminate={indeterminate}\n                  name=\"checkbox\"\n                  className={style.checkbox}\n                  onChange={(event) => onSelect(dataSource, event)}\n                />\n              )}\n\n              {isHead ? schema[field].label : dataSource[field]}\n\n              {isHead && onSort && (\n                <Icon\n                  value={sort[field] === false ? ICON.UP : ICON.DOWN}\n                  className={styles(style.icon, sort[field] === undefined && style.disabled)}\n                />\n              )}\n            </View>,\n          ),\n        )}\n    </tr>\n  );\n};\n\nTableRow.displayName = 'Table:Row';\n\nTableRow.propTypes = {\n  checked: PropTypes.bool,\n  dataSource: PropTypes.shape({}),\n  indeterminate: PropTypes.bool,\n  schema: PropTypes.shape({}).isRequired,\n  sort: PropTypes.shape({}),\n  onPress: PropTypes.func,\n  onSelect: PropTypes.func,\n  onSort: PropTypes.func,\n};\n\nexport { TableRow };\n"],"mappings":"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"}
+{"version":3,"file":"Table.Row.js","names":["CUSTOM_EVENT_TYPES","Row","checked","dataSource","indeterminate","schema","sort","onFilter","onPress","onSelect","onSort","others","isHead","undefined","testId","handlePress","field","event","target","type","includes","styles","style","selected","Object","keys","filter","map","index","React","createElement","column","selectable","checkbox","label","icons","ICON","UP","DOWN","icon","disabled","displayName","propTypes","PropTypes","bool","shape","isRequired","func"],"sources":["../../../src/components/Table/Table.Row.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { Icon, ICON, View } from '../../primitives';\nimport { InputOption } from '../InputOption';\nimport { ColumnFilter } from './Table.ColumnFilter';\nimport style from './Table.module.css';\n\nconst CUSTOM_EVENT_TYPES = ['button', 'checkbox', 'input', 'radio', 'submit'];\n\nconst Row = ({\n  checked,\n  dataSource,\n  indeterminate,\n  schema,\n  sort = {},\n  onFilter,\n  onPress,\n  onSelect,\n  onSort,\n  ...others\n}) => {\n  const isHead = dataSource === undefined;\n  const { ['data-testid']: testId } = others;\n\n  const handlePress = (field, event) => {\n    const { target: { type } = {} } = event;\n    if (CUSTOM_EVENT_TYPES.includes(type)) return;\n\n    isHead ? onSort(field) : onPress && onPress(dataSource, event);\n  };\n\n  return (\n    <tr {...others} role=\"tr\" className={styles(checked && style.selected, onPress && style.onPress)}>\n      {Object.keys(schema)\n        .filter((field) => schema[field].type !== 'hidden')\n        .map((field, index) =>\n          React.createElement(\n            isHead ? 'th' : 'td',\n            {\n              ['data-testid']: testId ? `${testId}-${field}` : undefined,\n              key: field,\n              onClick: (event) => handlePress(field, event),\n            },\n            <View\n              forceRow\n              tag=\"span\"\n              className={styles(\n                style.column,\n                onSelect && index === 0 && style.selectable,\n                !isHead && !(onSelect && index === 0) && style[schema[field].type || 'text'],\n              )}\n            >\n              {onSelect && index === 0 && (\n                <InputOption\n                  checked={checked}\n                  data-testid={testId ? `${testId}-checkbox` : undefined}\n                  indeterminate={indeterminate}\n                  name=\"checkbox\"\n                  className={style.checkbox}\n                  onChange={(event) => onSelect(dataSource, event)}\n                />\n              )}\n\n              {isHead ? schema[field].label : dataSource[field]}\n\n              {isHead && onSort && (\n                <View row className={style.icons}>\n                  {onSort && (\n                    <Icon\n                      value={sort[field] === false ? ICON.UP : ICON.DOWN}\n                      className={styles(style.icon, sort[field] === undefined && style.disabled)}\n                    />\n                  )}\n                  {onFilter && <ColumnFilter field={field} schema={schema[field]} onSubmit={onFilter} />}\n                </View>\n              )}\n            </View>,\n          ),\n        )}\n    </tr>\n  );\n};\n\nRow.displayName = 'Component:Table:Row';\n\nRow.propTypes = {\n  checked: PropTypes.bool,\n  dataSource: PropTypes.shape({}),\n  indeterminate: PropTypes.bool,\n  schema: PropTypes.shape({}).isRequired,\n  sort: PropTypes.shape({}),\n  onFilter: PropTypes.func,\n  onPress: PropTypes.func,\n  onSelect: PropTypes.func,\n  onSort: PropTypes.func,\n};\n\nexport { Row };\n"],"mappings":"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"}

package/build/components/Table/Table.js

@@ -10,9 +10,10 @@ var _react = _interopRequireWildcard(require("react"));
 var _helpers = require("../../helpers");
 var _primitives = require("../../primitives");
 var _helpers2 = require("./helpers");
+var _Table = require("./Table.Filter");
 var _TableModule = _interopRequireDefault(require("./Table.module.css"));
-var _Table = require("./Table.Row");
-var _excluded = ["dataSource", "inline", "schema", "search", "selected", "onPress", "onScroll", "onSelect"];
+var _Table2 = require("./Table.Row");
+var _excluded = ["dataSource", "filter", "inline", "schema", "search", "selected", "onPress", "onScroll", "onSelect"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -22,6 +23,10 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
@@ -33,6 +38,8 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 var Table = function Table(_ref) {
   var _ref$dataSource = _ref.dataSource,
     dataSource = _ref$dataSource === void 0 ? [] : _ref$dataSource,
+    _ref$filter = _ref.filter,
+    propFilter = _ref$filter === void 0 ? [] : _ref$filter,
     _ref$inline = _ref.inline,
     inline = _ref$inline === void 0 ? true : _ref$inline,
     schema = _ref.schema,
@@ -43,14 +50,36 @@ var Table = function Table(_ref) {
     onScroll = _ref.onScroll,
     onSelect = _ref.onSelect,
     others = _objectWithoutProperties(_ref, _excluded);
-  var _useState = (0, _react.useState)(propSelected),
+  var _useState = (0, _react.useState)(propFilter),
     _useState2 = _slicedToArray(_useState, 2),
-    selected = _useState2[0],
-    setSelected = _useState2[1];
-  var _useState3 = (0, _react.useState)({}),
+    filter = _useState2[0],
+    setFilter = _useState2[1];
+  var _useState3 = (0, _react.useState)(propSelected),
     _useState4 = _slicedToArray(_useState3, 2),
-    sort = _useState4[0],
-    setSort = _useState4[1];
+    selected = _useState4[0],
+    setSelected = _useState4[1];
+  var _useState5 = (0, _react.useState)({}),
+    _useState6 = _slicedToArray(_useState5, 2),
+    sort = _useState6[0],
+    setSort = _useState6[1];
+  (0, _react.useEffect)(function () {
+    if (JSON.stringify(filter) !== JSON.stringify(propFilter)) setFilter(propFilter);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [propFilter]);
+  var handleAddFilter = function handleAddFilter(item) {
+    setFilter([].concat(_toConsumableArray(filter), [item]));
+  };
+  var handleRemoveFilter = function handleRemoveFilter(index) {
+    filter.splice(index, 1);
+    setFilter(_toConsumableArray(filter));
+  };
+  var handleHeadSelect = function handleHeadSelect(row, event) {
+    setSelected(function () {
+      var next = selected.length !== dataSource.length ? dataSource : [];
+      onSelect(next, event);
+      return next;
+    });
+  };
   var handleSelect = function handleSelect(row, event) {
     setSelected(function () {
       var exists = selected.includes(row);
@@ -62,13 +91,6 @@ var Table = function Table(_ref) {
       return next;
     });
   };
-  var handleHeadSelect = function handleHeadSelect(row, event) {
-    setSelected(function () {
-      var next = selected.length !== dataSource.length ? dataSource : [];
-      onSelect(next, event);
-      return next;
-    });
-  };
   var handleSort = function handleSort(field) {
     setSort(sort[field] === undefined ? _defineProperty({}, field, true) : sort[field] ? _defineProperty({}, field, false) : {});
   };
@@ -76,24 +98,33 @@ var Table = function Table(_ref) {
   return /*#__PURE__*/_react.default.createElement(onScroll ? _primitives.ScrollView : !inline ? _primitives.View : _react.Fragment, onScroll || !inline ? _objectSpread(_objectSpread({}, others), {}, {
     onScroll: onScroll,
     className: (0, _helpers.styles)(!inline && _TableModule.default.outlined, others.className)
-  }) : undefined, /*#__PURE__*/_react.default.createElement("table", _extends({}, !onScroll ? others : undefined, {
+  }) : undefined, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, filter.length > 0 && /*#__PURE__*/_react.default.createElement(_Table.Filter, {
+    filter: filter,
+    onRemove: function onRemove(index) {
+      return handleRemoveFilter(index);
+    }
+  }), /*#__PURE__*/_react.default.createElement("table", _extends({}, !onScroll ? others : undefined, {
     className: (0, _helpers.styles)(_TableModule.default.table, !onScroll && !inline && others.className)
-  }), /*#__PURE__*/_react.default.createElement("thead", null, /*#__PURE__*/_react.default.createElement(_Table.TableRow, {
+  }), /*#__PURE__*/_react.default.createElement("thead", null, /*#__PURE__*/_react.default.createElement(_Table2.Row, {
     checked: selected.length === dataSource.length,
     indeterminate: selected.length > 0,
     schema: schema,
     sort: sort,
+    onFilter: handleAddFilter,
     onSelect: onSelect ? handleHeadSelect : undefined,
     onSort: handleSort,
     "data-testid": testId ? "".concat(testId, "-head") : undefined
   })), /*#__PURE__*/_react.default.createElement("tbody", null, (0, _react.useMemo)(function () {
     return (0, _helpers2.select)(dataSource, {
+      filter: filter,
       search: search,
       sort: sort
     });
-  }, [dataSource, search, sort]).map(function (row, index) {
-    return /*#__PURE__*/_react.default.createElement(_Table.TableRow, {
-      checked: selected.includes(row),
+  }, [dataSource, filter, search, sort]).map(function (row, index) {
+    return /*#__PURE__*/_react.default.createElement(_Table2.Row, {
+      checked: !!selected.find(function (item) {
+        return JSON.stringify(item) === JSON.stringify(row);
+      }),
       dataSource: row,
       key: index,
       schema: schema,
@@ -101,11 +132,13 @@ var Table = function Table(_ref) {
       onSelect: onSelect ? handleSelect : undefined,
       "data-testid": testId ? "".concat(testId, "-").concat(index) : undefined
     });
-  }))));
+  })))));
 };
 exports.Table = Table;
+Table.displayName = 'Component:Table';
 Table.propTypes = {
   dataSource: _propTypes.default.arrayOf(_propTypes.default.shape({})),
+  filter: _propTypes.default.arrayOf(_propTypes.default.shape({})),
   inline: _propTypes.default.bool,
   schema: _propTypes.default.shape({}).isRequired,
   search: _propTypes.default.string,

package/build/components/Table/Table.js.map

@@ -1 +1 @@
-{"version":3,"file":"Table.js","names":["Table","dataSource","inline","schema","search","selected","propSelected","onPress","onScroll","onSelect","others","useState","setSelected","sort","setSort","handleSelect","row","event","exists","includes","next","filter","item","push","handleHeadSelect","length","handleSort","field","undefined","testId","React","createElement","ScrollView","View","Fragment","className","styles","style","outlined","table","useMemo","select","map","index","propTypes","PropTypes","arrayOf","shape","bool","isRequired","string","func"],"sources":["../../../src/components/Table/Table.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { Fragment, useMemo, useState } from 'react';\n\nimport { styles } from '../../helpers';\nimport { ScrollView, View } from '../../primitives';\nimport { select } from './helpers';\nimport style from './Table.module.css';\nimport { TableRow } from './Table.Row';\n\nexport const Table = ({\n  dataSource = [],\n  inline = true,\n  schema,\n  search,\n  selected: propSelected = [],\n  onPress,\n  onScroll,\n  onSelect,\n  ...others\n}) => {\n  const [selected, setSelected] = useState(propSelected);\n  const [sort, setSort] = useState({});\n\n  const handleSelect = (row, event) => {\n    setSelected(() => {\n      const exists = selected.includes(row);\n      const next = selected.filter((item) => item !== row);\n      if (!exists) next.push(row);\n\n      onSelect(next, event);\n\n      return next;\n    });\n  };\n\n  const handleHeadSelect = (row, event) => {\n    setSelected(() => {\n      const next = selected.length !== dataSource.length ? dataSource : [];\n      onSelect(next, event);\n\n      return next;\n    });\n  };\n\n  const handleSort = (field) => {\n    setSort(sort[field] === undefined ? { [field]: true } : sort[field] ? { [field]: false } : {});\n  };\n\n  const { ['data-testid']: testId } = others;\n\n  return React.createElement(\n    onScroll ? ScrollView : !inline ? View : Fragment,\n    onScroll || !inline\n      ? { ...others, onScroll, className: styles(!inline && style.outlined, others.className) }\n      : undefined,\n    <table\n      {...(!onScroll ? others : undefined)}\n      className={styles(style.table, !onScroll && !inline && others.className)}\n    >\n      <thead>\n        <TableRow\n          checked={selected.length === dataSource.length}\n          indeterminate={selected.length > 0}\n          schema={schema}\n          sort={sort}\n          onSelect={onSelect ? handleHeadSelect : undefined}\n          onSort={handleSort}\n          data-testid={testId ? `${testId}-head` : undefined}\n        />\n      </thead>\n      <tbody>\n        {useMemo(() => select(dataSource, { search, sort }), [dataSource, search, sort]).map((row, index) => (\n          <TableRow\n            checked={selected.includes(row)}\n            dataSource={row}\n            key={index}\n            schema={schema}\n            onPress={onPress}\n            onSelect={onSelect ? handleSelect : undefined}\n            data-testid={testId ? `${testId}-${index}` : undefined}\n          />\n        ))}\n      </tbody>\n    </table>,\n  );\n};\n\nTable.propTypes = {\n  dataSource: PropTypes.arrayOf(PropTypes.shape({})),\n  inline: PropTypes.bool,\n  schema: PropTypes.shape({}).isRequired,\n  search: PropTypes.string,\n  selected: PropTypes.arrayOf(PropTypes.shape()),\n  onPress: PropTypes.func,\n  onScroll: PropTypes.func,\n  onSelect: PropTypes.func,\n};\n"],"mappings":"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"}
+{"version":3,"file":"Table.js","names":["Table","dataSource","filter","propFilter","inline","schema","search","selected","propSelected","onPress","onScroll","onSelect","others","useState","setFilter","setSelected","sort","setSort","useEffect","JSON","stringify","handleAddFilter","item","handleRemoveFilter","index","splice","handleHeadSelect","row","event","next","length","handleSelect","exists","includes","push","handleSort","field","undefined","testId","React","createElement","ScrollView","View","Fragment","className","styles","style","outlined","table","useMemo","select","map","find","displayName","propTypes","PropTypes","arrayOf","shape","bool","isRequired","string","func"],"sources":["../../../src/components/Table/Table.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { Fragment, useEffect, useMemo, useState } from 'react';\n\nimport { styles } from '../../helpers';\nimport { ScrollView, View } from '../../primitives';\nimport { select } from './helpers';\nimport { Filter } from './Table.Filter';\nimport style from './Table.module.css';\nimport { Row } from './Table.Row';\n\nexport const Table = ({\n  dataSource = [],\n  filter: propFilter = [],\n  inline = true,\n  schema,\n  search,\n  selected: propSelected = [],\n  onPress,\n  onScroll,\n  onSelect,\n  ...others\n}) => {\n  const [filter, setFilter] = useState(propFilter);\n  const [selected, setSelected] = useState(propSelected);\n  const [sort, setSort] = useState({});\n\n  useEffect(() => {\n    if (JSON.stringify(filter) !== JSON.stringify(propFilter)) setFilter(propFilter);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [propFilter]);\n\n  const handleAddFilter = (item) => {\n    setFilter([...filter, item]);\n  };\n\n  const handleRemoveFilter = (index) => {\n    filter.splice(index, 1);\n    setFilter([...filter]);\n  };\n\n  const handleHeadSelect = (row, event) => {\n    setSelected(() => {\n      const next = selected.length !== dataSource.length ? dataSource : [];\n      onSelect(next, event);\n\n      return next;\n    });\n  };\n\n  const handleSelect = (row, event) => {\n    setSelected(() => {\n      const exists = selected.includes(row);\n      const next = selected.filter((item) => item !== row);\n      if (!exists) next.push(row);\n      onSelect(next, event);\n\n      return next;\n    });\n  };\n\n  const handleSort = (field) => {\n    setSort(sort[field] === undefined ? { [field]: true } : sort[field] ? { [field]: false } : {});\n  };\n\n  const { ['data-testid']: testId } = others;\n\n  return React.createElement(\n    onScroll ? ScrollView : !inline ? View : Fragment,\n    onScroll || !inline\n      ? { ...others, onScroll, className: styles(!inline && style.outlined, others.className) }\n      : undefined,\n    <>\n      {filter.length > 0 && <Filter filter={filter} onRemove={(index) => handleRemoveFilter(index)} />}\n      <table\n        {...(!onScroll ? others : undefined)}\n        className={styles(style.table, !onScroll && !inline && others.className)}\n      >\n        <thead>\n          <Row\n            checked={selected.length === dataSource.length}\n            indeterminate={selected.length > 0}\n            schema={schema}\n            sort={sort}\n            onFilter={handleAddFilter}\n            onSelect={onSelect ? handleHeadSelect : undefined}\n            onSort={handleSort}\n            data-testid={testId ? `${testId}-head` : undefined}\n          />\n        </thead>\n        <tbody>\n          {useMemo(() => select(dataSource, { filter, search, sort }), [dataSource, filter, search, sort]).map(\n            (row, index) => (\n              <Row\n                checked={!!selected.find((item) => JSON.stringify(item) === JSON.stringify(row))}\n                dataSource={row}\n                key={index}\n                schema={schema}\n                onPress={onPress}\n                onSelect={onSelect ? handleSelect : undefined}\n                data-testid={testId ? `${testId}-${index}` : undefined}\n              />\n            ),\n          )}\n        </tbody>\n      </table>\n    </>,\n  );\n};\n\nTable.displayName = 'Component:Table';\n\nTable.propTypes = {\n  dataSource: PropTypes.arrayOf(PropTypes.shape({})),\n  filter: PropTypes.arrayOf(PropTypes.shape({})),\n  inline: PropTypes.bool,\n  schema: PropTypes.shape({}).isRequired,\n  search: PropTypes.string,\n  selected: PropTypes.arrayOf(PropTypes.shape()),\n  onPress: PropTypes.func,\n  onScroll: PropTypes.func,\n  onSelect: PropTypes.func,\n};\n"],"mappings":";;;;;;;AAAA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AAAkC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAE3B,IAAMA,KAAK,GAAG,SAARA,KAAK,OAWZ;EAAA,2BAVJC,UAAU;IAAVA,UAAU,gCAAG,EAAE;IAAA,mBACfC,MAAM;IAAEC,UAAU,4BAAG,EAAE;IAAA,mBACvBC,MAAM;IAANA,MAAM,4BAAG,IAAI;IACbC,MAAM,QAANA,MAAM;IACNC,MAAM,QAANA,MAAM;IAAA,qBACNC,QAAQ;IAAEC,YAAY,8BAAG,EAAE;IAC3BC,OAAO,QAAPA,OAAO;IACPC,QAAQ,QAARA,QAAQ;IACRC,QAAQ,QAARA,QAAQ;IACLC,MAAM;EAET,gBAA4B,IAAAC,eAAQ,EAACV,UAAU,CAAC;IAAA;IAAzCD,MAAM;IAAEY,SAAS;EACxB,iBAAgC,IAAAD,eAAQ,EAACL,YAAY,CAAC;IAAA;IAA/CD,QAAQ;IAAEQ,WAAW;EAC5B,iBAAwB,IAAAF,eAAQ,EAAC,CAAC,CAAC,CAAC;IAAA;IAA7BG,IAAI;IAAEC,OAAO;EAEpB,IAAAC,gBAAS,EAAC,YAAM;IACd,IAAIC,IAAI,CAACC,SAAS,CAAClB,MAAM,CAAC,KAAKiB,IAAI,CAACC,SAAS,CAACjB,UAAU,CAAC,EAAEW,SAAS,CAACX,UAAU,CAAC;IAChF;EACF,CAAC,EAAE,CAACA,UAAU,CAAC,CAAC;EAEhB,IAAMkB,eAAe,GAAG,SAAlBA,eAAe,CAAIC,IAAI,EAAK;IAChCR,SAAS,8BAAKZ,MAAM,IAAEoB,IAAI,GAAE;EAC9B,CAAC;EAED,IAAMC,kBAAkB,GAAG,SAArBA,kBAAkB,CAAIC,KAAK,EAAK;IACpCtB,MAAM,CAACuB,MAAM,CAACD,KAAK,EAAE,CAAC,CAAC;IACvBV,SAAS,oBAAKZ,MAAM,EAAE;EACxB,CAAC;EAED,IAAMwB,gBAAgB,GAAG,SAAnBA,gBAAgB,CAAIC,GAAG,EAAEC,KAAK,EAAK;IACvCb,WAAW,CAAC,YAAM;MAChB,IAAMc,IAAI,GAAGtB,QAAQ,CAACuB,MAAM,KAAK7B,UAAU,CAAC6B,MAAM,GAAG7B,UAAU,GAAG,EAAE;MACpEU,QAAQ,CAACkB,IAAI,EAAED,KAAK,CAAC;MAErB,OAAOC,IAAI;IACb,CAAC,CAAC;EACJ,CAAC;EAED,IAAME,YAAY,GAAG,SAAfA,YAAY,CAAIJ,GAAG,EAAEC,KAAK,EAAK;IACnCb,WAAW,CAAC,YAAM;MAChB,IAAMiB,MAAM,GAAGzB,QAAQ,CAAC0B,QAAQ,CAACN,GAAG,CAAC;MACrC,IAAME,IAAI,GAAGtB,QAAQ,CAACL,MAAM,CAAC,UAACoB,IAAI;QAAA,OAAKA,IAAI,KAAKK,GAAG;MAAA,EAAC;MACpD,IAAI,CAACK,MAAM,EAAEH,IAAI,CAACK,IAAI,CAACP,GAAG,CAAC;MAC3BhB,QAAQ,CAACkB,IAAI,EAAED,KAAK,CAAC;MAErB,OAAOC,IAAI;IACb,CAAC,CAAC;EACJ,CAAC;EAED,IAAMM,UAAU,GAAG,SAAbA,UAAU,CAAIC,KAAK,EAAK;IAC5BnB,OAAO,CAACD,IAAI,CAACoB,KAAK,CAAC,KAAKC,SAAS,uBAAMD,KAAK,EAAG,IAAI,IAAKpB,IAAI,CAACoB,KAAK,CAAC,uBAAMA,KAAK,EAAG,KAAK,IAAK,CAAC,CAAC,CAAC;EAChG,CAAC;EAED,IAAyBE,MAAM,GAAK1B,MAAM,CAAjC,aAAa;EAEtB,oBAAO2B,cAAK,CAACC,aAAa,CACxB9B,QAAQ,GAAG+B,sBAAU,GAAG,CAACrC,MAAM,GAAGsC,gBAAI,GAAGC,eAAQ,EACjDjC,QAAQ,IAAI,CAACN,MAAM,mCACVQ,MAAM;IAAEF,QAAQ,EAARA,QAAQ;IAAEkC,SAAS,EAAE,IAAAC,eAAM,EAAC,CAACzC,MAAM,IAAI0C,oBAAK,CAACC,QAAQ,EAAEnC,MAAM,CAACgC,SAAS;EAAC,KACrFP,SAAS,eACb,4DACGnC,MAAM,CAAC4B,MAAM,GAAG,CAAC,iBAAI,6BAAC,aAAM;IAAC,MAAM,EAAE5B,MAAO;IAAC,QAAQ,EAAE,kBAACsB,KAAK;MAAA,OAAKD,kBAAkB,CAACC,KAAK,CAAC;IAAA;EAAC,EAAG,eAChG,mDACO,CAACd,QAAQ,GAAGE,MAAM,GAAGyB,SAAS;IACnC,SAAS,EAAE,IAAAQ,eAAM,EAACC,oBAAK,CAACE,KAAK,EAAE,CAACtC,QAAQ,IAAI,CAACN,MAAM,IAAIQ,MAAM,CAACgC,SAAS;EAAE,iBAEzE,yDACE,6BAAC,WAAG;IACF,OAAO,EAAErC,QAAQ,CAACuB,MAAM,KAAK7B,UAAU,CAAC6B,MAAO;IAC/C,aAAa,EAAEvB,QAAQ,CAACuB,MAAM,GAAG,CAAE;IACnC,MAAM,EAAEzB,MAAO;IACf,IAAI,EAAEW,IAAK;IACX,QAAQ,EAAEK,eAAgB;IAC1B,QAAQ,EAAEV,QAAQ,GAAGe,gBAAgB,GAAGW,SAAU;IAClD,MAAM,EAAEF,UAAW;IACnB,eAAaG,MAAM,aAAMA,MAAM,aAAUD;EAAU,EACnD,CACI,eACR,4CACG,IAAAY,cAAO,EAAC;IAAA,OAAM,IAAAC,gBAAM,EAACjD,UAAU,EAAE;MAAEC,MAAM,EAANA,MAAM;MAAEI,MAAM,EAANA,MAAM;MAAEU,IAAI,EAAJA;IAAK,CAAC,CAAC;EAAA,GAAE,CAACf,UAAU,EAAEC,MAAM,EAAEI,MAAM,EAAEU,IAAI,CAAC,CAAC,CAACmC,GAAG,CAClG,UAACxB,GAAG,EAAEH,KAAK;IAAA,oBACT,6BAAC,WAAG;MACF,OAAO,EAAE,CAAC,CAACjB,QAAQ,CAAC6C,IAAI,CAAC,UAAC9B,IAAI;QAAA,OAAKH,IAAI,CAACC,SAAS,CAACE,IAAI,CAAC,KAAKH,IAAI,CAACC,SAAS,CAACO,GAAG,CAAC;MAAA,EAAE;MACjF,UAAU,EAAEA,GAAI;MAChB,GAAG,EAAEH,KAAM;MACX,MAAM,EAAEnB,MAAO;MACf,OAAO,EAAEI,OAAQ;MACjB,QAAQ,EAAEE,QAAQ,GAAGoB,YAAY,GAAGM,SAAU;MAC9C,eAAaC,MAAM,aAAMA,MAAM,cAAId,KAAK,IAAKa;IAAU,EACvD;EAAA,CACH,CACF,CACK,CACF,CACP,CACJ;AACH,CAAC;AAAC;AAEFrC,KAAK,CAACqD,WAAW,GAAG,iBAAiB;AAErCrD,KAAK,CAACsD,SAAS,GAAG;EAChBrD,UAAU,EAAEsD,kBAAS,CAACC,OAAO,CAACD,kBAAS,CAACE,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;EAClDvD,MAAM,EAAEqD,kBAAS,CAACC,OAAO,CAACD,kBAAS,CAACE,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;EAC9CrD,MAAM,EAAEmD,kBAAS,CAACG,IAAI;EACtBrD,MAAM,EAAEkD,kBAAS,CAACE,KAAK,CAAC,CAAC,CAAC,CAAC,CAACE,UAAU;EACtCrD,MAAM,EAAEiD,kBAAS,CAACK,MAAM;EACxBrD,QAAQ,EAAEgD,kBAAS,CAACC,OAAO,CAACD,kBAAS,CAACE,KAAK,EAAE,CAAC;EAC9ChD,OAAO,EAAE8C,kBAAS,CAACM,IAAI;EACvBnD,QAAQ,EAAE6C,kBAAS,CAACM,IAAI;EACxBlD,QAAQ,EAAE4C,kBAAS,CAACM;AACtB,CAAC"}

package/build/components/Table/Table.module.css

@@ -67,9 +67,9 @@
   padding-right: var(--mirai-ui-table-padding-x);
 }
 
-.table th .icon {
-  /* ? TODO: Ask design */
-  /* margin-left: auto; */
+.table th .icons {
+  gap: calc(var(--mirai-ui-space-XS) / 2);
+  margin-left: auto;
 }
 
 .table th .icon.disabled {
@@ -104,7 +104,44 @@
   overflow-y: hidden;
 }
 
-@media only screen and (min-width: 430px) {
+/* <ColumnFilter> */
+.table .menuFilter .items {
+  gap: var(--mirai-ui-space-M);
+}
+
+.table .menuFilter .input {
+  margin-bottom: 0;
+}
+
+/*  */
+.filters {
+  background-color: var(--mirai-ui-table-background);
+  box-shadow: inset 0 calc(var(--mirai-ui-border-width) * -1) var(--mirai-ui-table-border-color);
+  flex-wrap: wrap;
+  gap: var(--mirai-ui-space-XS);
+  left: 0;
+  padding: var(--mirai-ui-table-padding-y) var(--mirai-ui-table-padding-x);
+  position: sticky;
+  width: 100%;
+}
+
+.filters .filter {
+  background-color: var(--mirai-ui-table-color);
+  background-color: var(--mirai-ui-table-selected-background);
+  border-radius: var(--mirai-ui-table-border-radius);
+  gap: calc(var(--mirai-ui-space-XS) / 2);
+  padding: calc(var(--mirai-ui-space-XS) / 2) var(--mirai-ui-space-XS);
+  user-select: none;
+}
+
+.filters .filter * {
+  color: var(--mirai-ui-table-selected-color);
+}
+
+@media only screen and (max-width: 430px) {
+}
+
+@media only screen and (min-width: 431px) {
   .table thead tr th:hover {
     color: var(--mirai-ui-table-color);
     cursor: pointer;
@@ -118,4 +155,9 @@
   .table tbody tr:hover.onPress:not(.selected) td:first-child {
     background-color: var(--mirai-ui-table-selected-background);
   }
+
+  .table .menuFilter {
+    margin: var(--mirai-ui-space-M) 0;
+    width: calc(var(--mirai-ui-breakpoint-S) * 0.8);
+  }
 }