@mirai/ui 1.0.69 → 1.0.70

package/README.md

@@ -703,6 +703,71 @@ const MyComponent = (props) => {
 --mirai-ui-modal-shadow: var(--mirai-ui-shadow);
 ```
 
+### Table
+
+This component helps you to create a pure html table receiving the following props:
+
+- `dataSource:arrayOf(shape)` The datasource of your model data schema
+- `schema:shape` the model data schema
+- `search:string` the query string you want use for filter the datasource
+- `selected:arrayOf(dataSource.row)` if you want pre-select some rows in 1st render
+- `onPress:function` executed once press in any row
+- `onScroll:function` executed once scroll the table
+- `onSelect:function` executed once select a determinate row
+
+```jsx
+import { InputText, Table } from '@mirai/ui';
+
+const dataSource = [
+  { username: 'jose', email: 'jose@mirai.com', year: 2012 },
+  { username: 'mario/1', email: 'mario.1@mirai.com', year: 2005 },
+  { username: 'carlos', email: 'carlos@mirai.com', year: 2012 },
+  { username: 'svet', email: 'svet@mirai.com', year: 2021, action: <Button>View</Button> },
+  { username: 'javi', email: 'hi@soyjavi.com', year: 2022, twitter: 'soyjavi' },
+  { username: 'victor', email: 'victor@mirai.com', year: 2021 },
+  { username: 'mario/2', email: 'mario.2@mirai.com', year: 2022 },
+];
+
+const schema = {
+  username: { label: 'User Name', type: 'text' },
+  email: { label: 'Email' },
+  year: { label: 'Year', type: 'number' },
+  twitter: { label: 'Twitter' },
+  action: { label: 'Action' },
+};
+
+const MyComponent = () => {
+  const [visible, setVisible] = useState(false);
+
+  <>
+    <InputText name="search" type="search" label="Search..." value={search} onChange={setSearch} />
+
+    <Table
+      {...{ dataSource, schema, search }}
+      search={search}
+      selected={[dataSource[4]]}
+      onPress={(row) => console.log('::onPress::', row)}
+      onSelect={(row) => console.log('::onSelect::', row)}
+      onScroll={(event) => console.log('::onScroll::', event)}
+      className={style.scrollview}
+    />
+  </>;
+};
+```
+
+**Theming variables**
+
+```css
+--mirai-ui-table-background: var(--mirai-ui-base);
+--mirai-ui-table-border-color: var(--mirai-ui-content-border);
+--mirai-ui-table-border-radius: var(--mirai-ui-space-XS);
+--mirai-ui-table-color: var(--mirai-ui-content);
+--mirai-ui-table-padding-x: var(--mirai-ui-space-M);
+--mirai-ui-table-padding-y: var(--mirai-ui-space-M);
+--mirai-ui-table-selected-background: var(--mirai-ui-accent-background);
+--mirai-ui-table-selected-color: var(--mirai-ui-accent);
+```
+
 ### Tooltip
 
 This component helps you to create a tooltip over a determinate component receiving the following props:

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

@@ -11,7 +11,7 @@ var _helpers = require("../../helpers");
 var _primitives = require("../../primitives");
 var _InputOption = require("../InputOption");
 var _TableModule = _interopRequireDefault(require("./Table.module.css"));
-var _excluded = ["dataSource", "schema", "selected", "sort", "onPress", "onSelect", "onSort"];
+var _excluded = ["checked", "dataSource", "indeterminate", "schema", "sort", "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; }
@@ -21,9 +21,10 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 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 dataSource = _ref.dataSource,
+  var checked = _ref.checked,
+    dataSource = _ref.dataSource,
+    indeterminate = _ref.indeterminate,
     schema = _ref.schema,
-    selected = _ref.selected,
     _ref$sort = _ref.sort,
     sort = _ref$sort === void 0 ? {} : _ref$sort,
     onPress = _ref.onPress,
@@ -43,7 +44,7 @@ var TableRow = function TableRow(_ref) {
   };
   return /*#__PURE__*/_react.default.createElement("tr", _extends({}, others, {
     role: "tr",
-    className: (0, _helpers.styles)(selected && _TableModule.default.selected, onPress && _TableModule.default.onPress)
+    className: (0, _helpers.styles)(checked && _TableModule.default.selected, onPress && _TableModule.default.onPress)
   }), fields.map(function (field, index) {
     var _React$createElement;
     return /*#__PURE__*/_react.default.createElement(tag, (_React$createElement = {}, _defineProperty(_React$createElement, 'data-testid', testId ? "".concat(testId, "-").concat(field) : undefined), _defineProperty(_React$createElement, "key", field), _defineProperty(_React$createElement, "onClick", function onClick(event) {
@@ -52,9 +53,9 @@ var TableRow = function TableRow(_ref) {
       row: true,
       tag: "span"
     }, onSelect && index === 0 && /*#__PURE__*/_react.default.createElement(_InputOption.InputOption, {
-      checked: selected,
+      checked: checked,
       "data-testid": testId ? "".concat(testId, "-checkbox") : undefined,
-      disabled: isHead,
+      indeterminate: indeterminate,
       name: "checkbox",
       className: _TableModule.default.checkbox,
       onChange: function onChange(event) {
@@ -62,16 +63,17 @@ var TableRow = function TableRow(_ref) {
       }
     }), isHead ? schema[field].label : dataSource[field], isHead && onSort && /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
       value: sort[field] ? _primitives.ICON.DOWN : _primitives.ICON.UP,
-      className: sort[field] === undefined && _TableModule.default.hideIcon
+      className: (0, _helpers.styles)(_TableModule.default.icon, sort[field] === undefined && _TableModule.default.hide)
     })));
   }));
 };
 exports.TableRow = TableRow;
 TableRow.displayName = 'Table:Row';
 TableRow.propTypes = {
+  checked: _propTypes.default.bool,
   dataSource: _propTypes.default.shape({}),
+  indeterminate: _propTypes.default.bool,
   schema: _propTypes.default.shape({}).isRequired,
-  selected: _propTypes.default.bool,
   sort: _propTypes.default.shape({}),
   onPress: _propTypes.default.func,
   onSelect: _propTypes.default.func,

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

@@ -1 +1 @@
-{"version":3,"file":"Table.Row.js","names":["CUSTOM_EVENT_TYPES","TableRow","dataSource","schema","selected","sort","onPress","onSelect","onSort","others","isHead","undefined","fields","Object","keys","tag","testId","handlePress","field","event","target","type","includes","styles","style","map","index","React","createElement","checkbox","label","ICON","DOWN","UP","hideIcon","displayName","propTypes","PropTypes","shape","isRequired","bool","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 = ({ dataSource, schema, selected, sort = {}, onPress, onSelect, onSort, ...others }) => {\n  const isHead = dataSource === undefined;\n  const fields = Object.keys(schema);\n  const tag = isHead ? 'th' : 'td';\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(selected && style.selected, onPress && style.onPress)}>\n      {fields.map((field, index) =>\n        React.createElement(\n          tag,\n          {\n            ['data-testid']: testId ? `${testId}-${field}` : undefined,\n            key: field,\n            onClick: (event) => handlePress(field, event),\n          },\n          <View row tag=\"span\">\n            {onSelect && index === 0 && (\n              <InputOption\n                checked={selected}\n                data-testid={testId ? `${testId}-checkbox` : undefined}\n                disabled={isHead}\n                name=\"checkbox\"\n                className={style.checkbox}\n                onChange={(event) => onSelect(dataSource, event)}\n              />\n            )}\n            {isHead ? schema[field].label : dataSource[field]}\n            {isHead && onSort && (\n              <Icon value={sort[field] ? ICON.DOWN : ICON.UP} className={sort[field] === undefined && style.hideIcon} />\n            )}\n          </View>,\n        ),\n      )}\n    </tr>\n  );\n};\n\nTableRow.displayName = 'Table:Row';\n\nTableRow.propTypes = {\n  dataSource: PropTypes.shape({}),\n  schema: PropTypes.shape({}).isRequired,\n  selected: PropTypes.bool,\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","TableRow","checked","dataSource","indeterminate","schema","sort","onPress","onSelect","onSort","others","isHead","undefined","fields","Object","keys","tag","testId","handlePress","field","event","target","type","includes","styles","style","selected","map","index","React","createElement","checkbox","label","ICON","DOWN","UP","icon","hide","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 fields = Object.keys(schema);\n  const tag = isHead ? 'th' : 'td';\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      {fields.map((field, index) =>\n        React.createElement(\n          tag,\n          {\n            ['data-testid']: testId ? `${testId}-${field}` : undefined,\n            key: field,\n            onClick: (event) => handlePress(field, event),\n          },\n          <View row tag=\"span\">\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            {isHead ? schema[field].label : dataSource[field]}\n            {isHead && onSort && (\n              <Icon\n                value={sort[field] ? ICON.DOWN : ICON.UP}\n                className={styles(style.icon, sort[field] === undefined && style.hide)}\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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"}

package/build/components/Table/Table.js

@@ -8,14 +8,17 @@ exports.Table = void 0;
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireWildcard(require("react"));
 var _helpers = require("../../helpers");
+var _primitives = require("../../primitives");
 var _helpers2 = require("./helpers");
 var _TableModule = _interopRequireDefault(require("./Table.module.css"));
 var _Table = require("./Table.Row");
-var _excluded = ["dataSource", "schema", "search", "onPress", "onSelect"];
+var _excluded = ["dataSource", "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 }; }
 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 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); }
@@ -30,12 +33,17 @@ 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$inline = _ref.inline,
+    inline = _ref$inline === void 0 ? true : _ref$inline,
     schema = _ref.schema,
     search = _ref.search,
+    _ref$selected = _ref.selected,
+    propSelected = _ref$selected === void 0 ? [] : _ref$selected,
     onPress = _ref.onPress,
+    onScroll = _ref.onScroll,
     onSelect = _ref.onSelect,
     others = _objectWithoutProperties(_ref, _excluded);
-  var _useState = (0, _react.useState)([]),
+  var _useState = (0, _react.useState)(propSelected),
     _useState2 = _slicedToArray(_useState, 2),
     selected = _useState2[0],
     setSelected = _useState2[1];
@@ -43,14 +51,21 @@ var Table = function Table(_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     sort = _useState4[0],
     setSort = _useState4[1];
-  var handleSelect = function handleSelect(row) {
+  var handleSelect = function handleSelect(row, event) {
     setSelected(function () {
       var exists = selected.includes(row);
       var next = selected.filter(function (item) {
         return item !== row;
       });
       if (!exists) next.push(row);
-      onSelect(next);
+      onSelect(next, event);
+      return next;
+    });
+  };
+  var handleHeadSelect = function handleHeadSelect(row, event) {
+    setSelected(function () {
+      var next = selected.length !== dataSource.length ? dataSource : [];
+      onSelect(next, event);
       return next;
     });
   };
@@ -58,13 +73,19 @@ var Table = function Table(_ref) {
     setSort(sort[field] === undefined ? _defineProperty({}, field, true) : sort[field] ? _defineProperty({}, field, false) : {});
   };
   var testId = others['data-testid'];
-  return /*#__PURE__*/_react.default.createElement("table", _extends({}, others, {
-    className: (0, _helpers.styles)(_TableModule.default.table, others.className)
+  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, {
+    className: (0, _helpers.styles)(_TableModule.default.table, !onScroll && !inline && others.className)
   }), /*#__PURE__*/_react.default.createElement("thead", null, /*#__PURE__*/_react.default.createElement(_Table.TableRow, {
+    checked: selected.length === dataSource.length,
+    indeterminate: selected.length > 0,
     schema: schema,
     sort: sort,
-    onSelect: onSelect ? function () {} : undefined,
-    onSort: handleSort
+    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, {
       search: search,
@@ -72,22 +93,25 @@ var Table = function Table(_ref) {
     });
   }, [dataSource, search, sort]).map(function (row, index) {
     return /*#__PURE__*/_react.default.createElement(_Table.TableRow, {
-      "data-testid": testId ? "".concat(testId, "-").concat(index) : undefined,
+      checked: selected.includes(row),
       dataSource: row,
       key: index,
       schema: schema,
-      selected: selected.includes(row),
       onPress: onPress,
-      onSelect: onSelect ? handleSelect : undefined
+      onSelect: onSelect ? handleSelect : undefined,
+      "data-testid": testId ? "".concat(testId, "-").concat(index) : undefined
     });
-  })));
+  }))));
 };
 exports.Table = Table;
 Table.propTypes = {
   dataSource: _propTypes.default.arrayOf(_propTypes.default.shape({})),
+  inline: _propTypes.default.bool,
   schema: _propTypes.default.shape({}).isRequired,
   search: _propTypes.default.string,
+  selected: _propTypes.default.arrayOf(_propTypes.default.shape()),
   onPress: _propTypes.default.func,
+  onScroll: _propTypes.default.func,
   onSelect: _propTypes.default.func
 };
 //# sourceMappingURL=Table.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Table.js","names":["Table","dataSource","schema","search","onPress","onSelect","others","useState","selected","setSelected","sort","setSort","handleSelect","row","exists","includes","next","filter","item","push","handleSort","field","undefined","testId","styles","style","table","className","useMemo","select","map","index","propTypes","PropTypes","arrayOf","shape","isRequired","string","func"],"sources":["../../../src/components/Table/Table.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useMemo, useState } from 'react';\n\nimport { styles } from '../../helpers';\nimport { select } from './helpers';\nimport style from './Table.module.css';\nimport { TableRow } from './Table.Row';\n\nexport const Table = ({ dataSource = [], schema, search, onPress, onSelect, ...others }) => {\n  const [selected, setSelected] = useState([]);\n  const [sort, setSort] = useState({});\n\n  const handleSelect = (row) => {\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);\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 (\n    <table {...others} className={styles(style.table, others.className)}>\n      <thead>\n        <TableRow schema={schema} sort={sort} onSelect={onSelect ? () => {} : undefined} onSort={handleSort} />\n      </thead>\n      <tbody>\n        {useMemo(() => select(dataSource, { search, sort }), [dataSource, search, sort]).map((row, index) => (\n          <TableRow\n            data-testid={testId ? `${testId}-${index}` : undefined}\n            dataSource={row}\n            key={index}\n            schema={schema}\n            selected={selected.includes(row)}\n            onPress={onPress}\n            onSelect={onSelect ? handleSelect : undefined}\n          />\n        ))}\n      </tbody>\n    </table>\n  );\n};\n\nTable.propTypes = {\n  dataSource: PropTypes.arrayOf(PropTypes.shape({})),\n  schema: PropTypes.shape({}).isRequired,\n  search: PropTypes.string,\n  onPress: PropTypes.func,\n  onSelect: PropTypes.func,\n};\n"],"mappings":";;;;;;;AAAA;AACA;AAEA;AACA;AACA;AACA;AAAuC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEhC,IAAMA,KAAK,GAAG,SAARA,KAAK,OAA0E;EAAA,2BAApEC,UAAU;IAAVA,UAAU,gCAAG,EAAE;IAAEC,MAAM,QAANA,MAAM;IAAEC,MAAM,QAANA,MAAM;IAAEC,OAAO,QAAPA,OAAO;IAAEC,QAAQ,QAARA,QAAQ;IAAKC,MAAM;EACnF,gBAAgC,IAAAC,eAAQ,EAAC,EAAE,CAAC;IAAA;IAArCC,QAAQ;IAAEC,WAAW;EAC5B,iBAAwB,IAAAF,eAAQ,EAAC,CAAC,CAAC,CAAC;IAAA;IAA7BG,IAAI;IAAEC,OAAO;EAEpB,IAAMC,YAAY,GAAG,SAAfA,YAAY,CAAIC,GAAG,EAAK;IAC5BJ,WAAW,CAAC,YAAM;MAChB,IAAMK,MAAM,GAAGN,QAAQ,CAACO,QAAQ,CAACF,GAAG,CAAC;MACrC,IAAMG,IAAI,GAAGR,QAAQ,CAACS,MAAM,CAAC,UAACC,IAAI;QAAA,OAAKA,IAAI,KAAKL,GAAG;MAAA,EAAC;MACpD,IAAI,CAACC,MAAM,EAAEE,IAAI,CAACG,IAAI,CAACN,GAAG,CAAC;MAE3BR,QAAQ,CAACW,IAAI,CAAC;MAEd,OAAOA,IAAI;IACb,CAAC,CAAC;EACJ,CAAC;EAED,IAAMI,UAAU,GAAG,SAAbA,UAAU,CAAIC,KAAK,EAAK;IAC5BV,OAAO,CAACD,IAAI,CAACW,KAAK,CAAC,KAAKC,SAAS,uBAAMD,KAAK,EAAG,IAAI,IAAKX,IAAI,CAACW,KAAK,CAAC,uBAAMA,KAAK,EAAG,KAAK,IAAK,CAAC,CAAC,CAAC;EAChG,CAAC;EAED,IAAyBE,MAAM,GAAKjB,MAAM,CAAjC,aAAa;EAEtB,oBACE,mDAAWA,MAAM;IAAE,SAAS,EAAE,IAAAkB,eAAM,EAACC,oBAAK,CAACC,KAAK,EAAEpB,MAAM,CAACqB,SAAS;EAAE,iBAClE,yDACE,6BAAC,eAAQ;IAAC,MAAM,EAAEzB,MAAO;IAAC,IAAI,EAAEQ,IAAK;IAAC,QAAQ,EAAEL,QAAQ,GAAG,YAAM,CAAC,CAAC,GAAGiB,SAAU;IAAC,MAAM,EAAEF;EAAW,EAAG,CACjG,eACR,4CACG,IAAAQ,cAAO,EAAC;IAAA,OAAM,IAAAC,gBAAM,EAAC5B,UAAU,EAAE;MAAEE,MAAM,EAANA,MAAM;MAAEO,IAAI,EAAJA;IAAK,CAAC,CAAC;EAAA,GAAE,CAACT,UAAU,EAAEE,MAAM,EAAEO,IAAI,CAAC,CAAC,CAACoB,GAAG,CAAC,UAACjB,GAAG,EAAEkB,KAAK;IAAA,oBAC9F,6BAAC,eAAQ;MACP,eAAaR,MAAM,aAAMA,MAAM,cAAIQ,KAAK,IAAKT,SAAU;MACvD,UAAU,EAAET,GAAI;MAChB,GAAG,EAAEkB,KAAM;MACX,MAAM,EAAE7B,MAAO;MACf,QAAQ,EAAEM,QAAQ,CAACO,QAAQ,CAACF,GAAG,CAAE;MACjC,OAAO,EAAET,OAAQ;MACjB,QAAQ,EAAEC,QAAQ,GAAGO,YAAY,GAAGU;IAAU,EAC9C;EAAA,CACH,CAAC,CACI,CACF;AAEZ,CAAC;AAAC;AAEFtB,KAAK,CAACgC,SAAS,GAAG;EAChB/B,UAAU,EAAEgC,kBAAS,CAACC,OAAO,CAACD,kBAAS,CAACE,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;EAClDjC,MAAM,EAAE+B,kBAAS,CAACE,KAAK,CAAC,CAAC,CAAC,CAAC,CAACC,UAAU;EACtCjC,MAAM,EAAE8B,kBAAS,CAACI,MAAM;EACxBjC,OAAO,EAAE6B,kBAAS,CAACK,IAAI;EACvBjC,QAAQ,EAAE4B,kBAAS,CAACK;AACtB,CAAC"}
+{"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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"}

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

@@ -1,6 +1,7 @@
 .table {
-  background-color: var(--mirai-ui-table-base);
+  background-color: var(--mirai-ui-table-background);
   border-collapse: collapse;
+  color: var(--mirai-ui-table-color);
   font-family: var(--mirai-ui-font);
   font-size: var(--mirai-ui-font-size-action);
   table-layout: auto;
@@ -9,14 +10,14 @@
 }
 
 .table thead {
-  background-color: var(--mirai-ui-table-base);
+  background-color: var(--mirai-ui-table-background);
   position: sticky;
   top: 0;
   z-index: var(--mirai-ui-layer-M);
 }
 
 .table thead tr {
-  color: var(--mirai-ui-table-head-color);
+  box-shadow: 0 var(--mirai-ui-border-width) var(--mirai-ui-table-border-color);
   font-family: var(--mirai-ui-font-bold);
   font-size: var(--mirai-ui-font-size-small);
   font-weight: var(--mirai-ui-font-bold-weight);
@@ -24,7 +25,10 @@
 
 .table tbody {
   font-size: var(--mirai-ui-font-size-action);
-  color: var(--mirai-ui-content);
+}
+
+.table tbody tr {
+  scroll-snap-align: start;
 }
 
 .table tbody tr.selected {
@@ -36,7 +40,7 @@
   background-color: var(--mirai-ui-table-selected-background);
 }
 
-.table tr:not(:last-child) {
+.table tbody tr:not(:last-child) {
   border-bottom: solid var(--mirai-ui-border-width) var(--mirai-ui-table-border-color);
 }
 
@@ -47,7 +51,7 @@
 
 .table th:first-child,
 .table td:first-child {
-  background-color: var(--mirai-ui-table-base);
+  background-color: var(--mirai-ui-table-background);
   left: 0;
   padding-left: var(--mirai-ui-table-padding-x);
   position: sticky;
@@ -58,8 +62,12 @@
   padding-right: var(--mirai-ui-table-padding-x);
 }
 
-.table th .hideIcon {
-  color: var(--mirai-ui-table-base);
+.table th .icon {
+  margin-left: calc(var(--mirai-ui-table-padding-x) / 4);
+}
+
+.table th .icon.hide {
+  color: var(--mirai-ui-table-background);
 }
 
 .table .checkbox {
@@ -67,18 +75,24 @@
   min-width: var(--mirai-ui-checkbox-size);
 }
 
+.outlined {
+  border: solid var(--mirai-ui-border-width) var(--mirai-ui-table-border-color);
+  border-radius: var(--mirai-ui-table-border-radius);
+  overflow-y: hidden;
+}
+
 @media only screen and (min-width: 430px) {
   .table thead tr th:hover {
-    color: var(--mirai-ui-table-content);
+    color: var(--mirai-ui-table-color);
     cursor: pointer;
   }
 
   .table tbody tr:hover.onPress {
-    background-color: var(--mirai-ui-table-hover-background);
+    background-color: var(--mirai-ui-table-selected-background);
     cursor: pointer;
   }
 
   .table tbody tr:hover.onPress:not(.selected) td:first-child {
-    background-color: var(--mirai-ui-table-hover-background);
+    background-color: var(--mirai-ui-table-selected-background);
   }
 }

package/build/components/Table/Table.stories.js

@@ -21,42 +21,44 @@ var Story = function Story(props) {
   return /*#__PURE__*/React.createElement(_Table.Table, props);
 };
 exports.Story = Story;
+var dataSource = [{
+  username: 'jose',
+  email: 'jose@mirai.com',
+  year: 2012
+}, {
+  username: 'mario/1',
+  email: 'mario.1@mirai.com',
+  year: 2005
+}, {
+  username: 'carlos',
+  email: 'carlos@mirai.com',
+  year: 2012
+}, {
+  username: 'svet',
+  email: 'svet@mirai.com',
+  year: 2021,
+  twitter: undefined,
+  action: /*#__PURE__*/React.createElement(_.Button, {
+    small: true
+  }, "Click Me")
+}, {
+  username: 'javi',
+  email: 'hi@soyjavi.com',
+  year: 2022,
+  twitter: 'soyjavi'
+}, {
+  username: 'victor',
+  email: 'victor@mirai.com',
+  year: 2021
+}, {
+  username: 'mario/2',
+  email: 'mario.2@mirai.com',
+  year: 2022
+}];
 Story.storyName = 'Table';
 Story.args = _defineProperty({
-  dataSource: [{
-    username: 'jose',
-    email: 'jose@mirai.com',
-    year: 2012
-  }, {
-    username: 'mario/1',
-    email: 'mario.1@mirai.com',
-    year: 2005
-  }, {
-    username: 'carlos',
-    email: 'carlos@mirai.com',
-    year: 2012
-  }, {
-    username: 'svet',
-    email: 'svet@mirai.com',
-    year: 2021,
-    twitter: undefined,
-    action: /*#__PURE__*/React.createElement(_.Button, {
-      small: true
-    }, "Click Me")
-  }, {
-    username: 'javi',
-    email: 'hi@soyjavi.com',
-    year: 2022,
-    twitter: 'soyjavi'
-  }, {
-    username: 'victor',
-    email: 'victor@mirai.com',
-    year: 2021
-  }, {
-    username: 'mario/2',
-    email: 'mario.2@mirai.com',
-    year: 2022
-  }],
+  dataSource: dataSource,
+  inline: true,
   schema: {
     username: {
       label: 'User Name',
@@ -76,12 +78,16 @@ Story.args = _defineProperty({
       label: 'Action'
     }
   },
-  search: ''
+  search: '',
+  selected: [dataSource[4]]
 }, 'data-testid', 'test-story');
 Story.argTypes = {
   onPress: {
     action: 'onPress'
   },
+  onScroll: {
+    action: 'onScroll'
+  },
   onSelect: {
     action: 'onSelect'
   }

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

@@ -1 +1 @@
-{"version":3,"file":"Table.stories.js","names":["title","Story","props","storyName","args","dataSource","username","email","year","twitter","undefined","action","schema","label","type","search","argTypes","onPress","onSelect"],"sources":["../../../src/components/Table/Table.stories.jsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Button } from '../';\nimport { Table } from './Table';\n\nexport default { title: 'Components' };\n\nexport const Story = (props) => <Table {...props} />;\n\nStory.storyName = 'Table';\n\nStory.args = {\n  dataSource: [\n    { username: 'jose', email: 'jose@mirai.com', year: 2012 },\n    { username: 'mario/1', email: 'mario.1@mirai.com', year: 2005 },\n    { username: 'carlos', email: 'carlos@mirai.com', year: 2012 },\n    {\n      username: 'svet',\n      email: 'svet@mirai.com',\n      year: 2021,\n      twitter: undefined,\n      action: <Button small>Click Me</Button>,\n    },\n    { username: 'javi', email: 'hi@soyjavi.com', year: 2022, twitter: 'soyjavi' },\n    { username: 'victor', email: 'victor@mirai.com', year: 2021 },\n    { username: 'mario/2', email: 'mario.2@mirai.com', year: 2022 },\n  ],\n  schema: {\n    username: { label: 'User Name', type: 'text' },\n    email: { label: 'Email' },\n    year: { label: 'Year', type: 'number' },\n    twitter: { label: 'Twitter' },\n    action: { label: 'Action' },\n  },\n  search: '',\n  ['data-testid']: 'test-story',\n};\n\nStory.argTypes = {\n  onPress: { action: 'onPress' },\n  onSelect: { action: 'onSelect' },\n};\n"],"mappings":";;;;;;AAAA;AAEA;AACA;AAAgC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAEjB;EAAEA,KAAK,EAAE;AAAa,CAAC;AAAA;AAE/B,IAAMC,KAAK,GAAG,SAARA,KAAK,CAAIC,KAAK;EAAA,oBAAK,oBAAC,YAAK,EAAKA,KAAK,CAAI;AAAA;AAAC;AAErDD,KAAK,CAACE,SAAS,GAAG,OAAO;AAEzBF,KAAK,CAACG,IAAI;EACRC,UAAU,EAAE,CACV;IAAEC,QAAQ,EAAE,MAAM;IAAEC,KAAK,EAAE,gBAAgB;IAAEC,IAAI,EAAE;EAAK,CAAC,EACzD;IAAEF,QAAQ,EAAE,SAAS;IAAEC,KAAK,EAAE,mBAAmB;IAAEC,IAAI,EAAE;EAAK,CAAC,EAC/D;IAAEF,QAAQ,EAAE,QAAQ;IAAEC,KAAK,EAAE,kBAAkB;IAAEC,IAAI,EAAE;EAAK,CAAC,EAC7D;IACEF,QAAQ,EAAE,MAAM;IAChBC,KAAK,EAAE,gBAAgB;IACvBC,IAAI,EAAE,IAAI;IACVC,OAAO,EAAEC,SAAS;IAClBC,MAAM,eAAE,oBAAC,QAAM;MAAC,KAAK;IAAA;EACvB,CAAC,EACD;IAAEL,QAAQ,EAAE,MAAM;IAAEC,KAAK,EAAE,gBAAgB;IAAEC,IAAI,EAAE,IAAI;IAAEC,OAAO,EAAE;EAAU,CAAC,EAC7E;IAAEH,QAAQ,EAAE,QAAQ;IAAEC,KAAK,EAAE,kBAAkB;IAAEC,IAAI,EAAE;EAAK,CAAC,EAC7D;IAAEF,QAAQ,EAAE,SAAS;IAAEC,KAAK,EAAE,mBAAmB;IAAEC,IAAI,EAAE;EAAK,CAAC,CAChE;EACDI,MAAM,EAAE;IACNN,QAAQ,EAAE;MAAEO,KAAK,EAAE,WAAW;MAAEC,IAAI,EAAE;IAAO,CAAC;IAC9CP,KAAK,EAAE;MAAEM,KAAK,EAAE;IAAQ,CAAC;IACzBL,IAAI,EAAE;MAAEK,KAAK,EAAE,MAAM;MAAEC,IAAI,EAAE;IAAS,CAAC;IACvCL,OAAO,EAAE;MAAEI,KAAK,EAAE;IAAU,CAAC;IAC7BF,MAAM,EAAE;MAAEE,KAAK,EAAE;IAAS;EAC5B,CAAC;EACDE,MAAM,EAAE;AAAE,GACT,aAAa,EAAG,YAAY,CAC9B;AAEDd,KAAK,CAACe,QAAQ,GAAG;EACfC,OAAO,EAAE;IAAEN,MAAM,EAAE;EAAU,CAAC;EAC9BO,QAAQ,EAAE;IAAEP,MAAM,EAAE;EAAW;AACjC,CAAC"}
+{"version":3,"file":"Table.stories.js","names":["title","Story","props","dataSource","username","email","year","twitter","undefined","action","storyName","args","inline","schema","label","type","search","selected","argTypes","onPress","onScroll","onSelect"],"sources":["../../../src/components/Table/Table.stories.jsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Button } from '../';\nimport { Table } from './Table';\n\nexport default { title: 'Components' };\n\nexport const Story = (props) => <Table {...props} />;\n\nconst dataSource = [\n  { username: 'jose', email: 'jose@mirai.com', year: 2012 },\n  { username: 'mario/1', email: 'mario.1@mirai.com', year: 2005 },\n  { username: 'carlos', email: 'carlos@mirai.com', year: 2012 },\n  {\n    username: 'svet',\n    email: 'svet@mirai.com',\n    year: 2021,\n    twitter: undefined,\n    action: <Button small>Click Me</Button>,\n  },\n  { username: 'javi', email: 'hi@soyjavi.com', year: 2022, twitter: 'soyjavi' },\n  { username: 'victor', email: 'victor@mirai.com', year: 2021 },\n  { username: 'mario/2', email: 'mario.2@mirai.com', year: 2022 },\n];\n\nStory.storyName = 'Table';\n\nStory.args = {\n  dataSource,\n  inline: true,\n  schema: {\n    username: { label: 'User Name', type: 'text' },\n    email: { label: 'Email' },\n    year: { label: 'Year', type: 'number' },\n    twitter: { label: 'Twitter' },\n    action: { label: 'Action' },\n  },\n  search: '',\n  selected: [dataSource[4]],\n  ['data-testid']: 'test-story',\n};\n\nStory.argTypes = {\n  onPress: { action: 'onPress' },\n  onScroll: { action: 'onScroll' },\n  onSelect: { action: 'onSelect' },\n};\n"],"mappings":";;;;;;AAAA;AAEA;AACA;AAAgC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAEjB;EAAEA,KAAK,EAAE;AAAa,CAAC;AAAA;AAE/B,IAAMC,KAAK,GAAG,SAARA,KAAK,CAAIC,KAAK;EAAA,oBAAK,oBAAC,YAAK,EAAKA,KAAK,CAAI;AAAA;AAAC;AAErD,IAAMC,UAAU,GAAG,CACjB;EAAEC,QAAQ,EAAE,MAAM;EAAEC,KAAK,EAAE,gBAAgB;EAAEC,IAAI,EAAE;AAAK,CAAC,EACzD;EAAEF,QAAQ,EAAE,SAAS;EAAEC,KAAK,EAAE,mBAAmB;EAAEC,IAAI,EAAE;AAAK,CAAC,EAC/D;EAAEF,QAAQ,EAAE,QAAQ;EAAEC,KAAK,EAAE,kBAAkB;EAAEC,IAAI,EAAE;AAAK,CAAC,EAC7D;EACEF,QAAQ,EAAE,MAAM;EAChBC,KAAK,EAAE,gBAAgB;EACvBC,IAAI,EAAE,IAAI;EACVC,OAAO,EAAEC,SAAS;EAClBC,MAAM,eAAE,oBAAC,QAAM;IAAC,KAAK;EAAA;AACvB,CAAC,EACD;EAAEL,QAAQ,EAAE,MAAM;EAAEC,KAAK,EAAE,gBAAgB;EAAEC,IAAI,EAAE,IAAI;EAAEC,OAAO,EAAE;AAAU,CAAC,EAC7E;EAAEH,QAAQ,EAAE,QAAQ;EAAEC,KAAK,EAAE,kBAAkB;EAAEC,IAAI,EAAE;AAAK,CAAC,EAC7D;EAAEF,QAAQ,EAAE,SAAS;EAAEC,KAAK,EAAE,mBAAmB;EAAEC,IAAI,EAAE;AAAK,CAAC,CAChE;AAEDL,KAAK,CAACS,SAAS,GAAG,OAAO;AAEzBT,KAAK,CAACU,IAAI;EACRR,UAAU,EAAVA,UAAU;EACVS,MAAM,EAAE,IAAI;EACZC,MAAM,EAAE;IACNT,QAAQ,EAAE;MAAEU,KAAK,EAAE,WAAW;MAAEC,IAAI,EAAE;IAAO,CAAC;IAC9CV,KAAK,EAAE;MAAES,KAAK,EAAE;IAAQ,CAAC;IACzBR,IAAI,EAAE;MAAEQ,KAAK,EAAE,MAAM;MAAEC,IAAI,EAAE;IAAS,CAAC;IACvCR,OAAO,EAAE;MAAEO,KAAK,EAAE;IAAU,CAAC;IAC7BL,MAAM,EAAE;MAAEK,KAAK,EAAE;IAAS;EAC5B,CAAC;EACDE,MAAM,EAAE,EAAE;EACVC,QAAQ,EAAE,CAACd,UAAU,CAAC,CAAC,CAAC;AAAC,GACxB,aAAa,EAAG,YAAY,CAC9B;AAEDF,KAAK,CAACiB,QAAQ,GAAG;EACfC,OAAO,EAAE;IAAEV,MAAM,EAAE;EAAU,CAAC;EAC9BW,QAAQ,EAAE;IAAEX,MAAM,EAAE;EAAW,CAAC;EAChCY,QAAQ,EAAE;IAAEZ,MAAM,EAAE;EAAW;AACjC,CAAC"}