@mirai/ui 1.0.5 → 1.0.6

package/README.md

@@ -12,6 +12,30 @@ yarn add @mirai/ui
 
 ## Primitives
 
+### Checkbox
+
+This primitive returns a checkbox button based on the following properties:
+
+- `checked:boolean` if true, the checkbox button is checked
+- `disabled:boolean` applying 'disabled' attribute
+- `name:string` input name
+- `onChange:function` executed when input value changes
+
+```js
+import { Checkbox, View } from '@mirai/ui';
+
+const MyComponent = () => (
+  <View>
+    <Checkbox
+      name="checkbox"
+      checked={false}
+      disabled={false}
+      value={primitive}
+      onChange={() => console.log('change')
+    />
+  </View>
+```
+
 ### Icon
 
 This primitive returns a span with an icon based on a mandatory string prop `name` with one of the following possible values: Left, Right, Up, Down, Close, CloseArrow, Plus, Minus, EyeOpen, EyeClose.
@@ -57,6 +81,34 @@ const MyComponent = () => (
 );
 ```
 
+### Layer
+
+This primitive returns an element that displays with relative position to other element based on the following props:
+
+- `children:node` two children elements are accepted, the first one is the element to be displayed and the second one is the LayerContent that wraps the element to be displayed if the visible prop is true
+- `visible:boolean` showing or hiding the layer
+
+The position of the layer is based on the position of the element to be displayed. If the layer can show on right or left because have a gap in this direction, the layer will be shown on the right or left of the element to be displayed. If the layer can open on top or bottom because have a gap in this direction, the layer will be shown on the top or bottom of the element to be displayed
+
+```js
+import { Button, Calendar, Layer, LayerContent } from '@mirai/ui';
+
+const MyComponent = () => {
+  const [visible, setVisible] = useState(false);
+
+  return (
+    <Layer visible={visible}>
+      <Button style={{ position: 'absolute', left: '500px', top: '100px' }} onPress={() => setVisible(!visible)}>
+        {visible ? 'close' : 'open'}
+      </Button>
+      <LayerContent>
+        <Calendar months={2} range />
+      </LayerContent>
+    </Layer>
+  );
+};
+```
+
 ### Pressable
 
 This primitive returns pressable elements based on the following properties:
@@ -80,6 +132,30 @@ const MyComponent = () => (
 );
 ```
 
+### Radio
+
+This primitive returns a radio button based on the following properties:
+
+- `checked:boolean` if true, the radio button is checked
+- `disabled:boolean` applying 'disabled' attribute
+- `name:string` input name
+- `onChange:function` executed when input value changes
+
+```js
+import { Radio, View } from '@mirai/ui';
+
+const MyComponent = () => (
+  <View>
+    <Radio
+      name="radio"
+      checked={false}
+      disabled={false}
+      value={primitive}
+      onChange={() => console.log('change')
+    />
+  </View>
+```
+
 ### ScrollView
 
 This primitive is used to make vertically scrollable views and receives the following props:
@@ -234,7 +310,7 @@ const MyComponent = props => {
 
 ### InputNumber
 
-Input number component controling the value with 2 buttons. Receives the following props:
+Input number component controlling the value with 2 buttons. Receives the following props:
 
 - `hint:string` brief message
 - `label:string` input label
@@ -255,6 +331,60 @@ const MyComponent = (props) => {
 };
 ```
 
+### InputOption
+
+This component is used to display a radio button or checkbox base on a mandatory string prop `type`. It receives the following props:
+
+- `reverse:boolean` if true the label is placed on the left side of the input element (false by default)
+- `checked:boolean` if true, the input is checked
+- `disabled:boolean` applying 'disabled' attribute
+- `label:string` input label
+- `name:string` input name
+- `type:string` type of input (radio or checkbox)
+- `value:number` input value
+- `onChange:function` executed when input value changes
+
+```js
+import { InputOption, View } from '@mirai/ui';
+
+const MyComponent = () => {
+  const [value, setValue] = useState('');
+  const [checked, setChecked] = useState(false);
+  return (
+    <View>
+      <InputOption
+        type="radio"
+        label="Option 1"
+        name="option"
+        checked={value === 'radio1'}
+        disabled={false}
+        value="radio1"
+        onChange={() => useState('radio1')}
+      />
+      <InputOption
+        type="radio"
+        label="Option 2"
+        name="option"
+        checked={value === 'radio2'}
+        disabled={false}
+        value="radio2"
+        onChange={() => useState('radio2')}
+      />
+    </View>
+    <View>
+      <InputOption
+        type="checkbox"
+        label="Option 3"
+        name="optionCheckbox"
+        checked={checked}
+        disabled={false}
+        onChange={() => useChecked(!checked)}
+      />
+    </View>
+  );
+};
+```
+
 ### InputText
 
 Text input component receiving the following props:

package/build/components/InputNumber/__tests__/__snapshots__/InputNumber.test.js.snap

@@ -9,7 +9,7 @@ exports[`component:<InputNumber> inherit:className 1`] = `
       class="view texts"
     />
     <button
-      class="pressable disabled button squared disabled"
+      class="pressable button squared"
       disabled=""
     >
       <span
@@ -91,7 +91,7 @@ exports[`component:<InputNumber> prop:hint 1`] = `
       </span>
     </div>
     <button
-      class="pressable disabled button squared disabled"
+      class="pressable button squared"
       disabled=""
     >
       <span
@@ -173,7 +173,7 @@ exports[`component:<InputNumber> prop:label 1`] = `
       </span>
     </div>
     <button
-      class="pressable disabled button squared disabled"
+      class="pressable button squared"
       disabled=""
     >
       <span
@@ -476,7 +476,7 @@ exports[`component:<InputNumber> renders 1`] = `
       class="view texts"
     />
     <button
-      class="pressable disabled button squared disabled"
+      class="pressable button squared"
       disabled=""
     >
       <span
@@ -553,7 +553,7 @@ exports[`component:<InputNumber> testID 1`] = `
       class="view texts"
     />
     <button
-      class="pressable disabled button squared disabled"
+      class="pressable button squared"
       disabled=""
     >
       <span

package/build/components/InputOption/InputOption.constants.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SWITCH = exports.RADIO = exports.CHECKBOX = void 0;
+var CHECKBOX = 'checkbox';
+exports.CHECKBOX = CHECKBOX;
+var RADIO = 'radio';
+exports.RADIO = RADIO;
+var SWITCH = 'switch';
+exports.SWITCH = SWITCH;
+//# sourceMappingURL=InputOption.constants.js.map

package/build/components/InputOption/InputOption.constants.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/InputOption/InputOption.constants.js"],"names":["CHECKBOX","RADIO","SWITCH"],"mappings":";;;;;;AAAA,IAAMA,QAAQ,GAAG,UAAjB;;AACA,IAAMC,KAAK,GAAG,OAAd;;AACA,IAAMC,MAAM,GAAG,QAAf","sourcesContent":["const CHECKBOX = 'checkbox';\nconst RADIO = 'radio';\nconst SWITCH = 'switch';\n\nexport { CHECKBOX, RADIO, SWITCH };\n"],"file":"InputOption.constants.js"}

package/build/components/InputOption/InputOption.js

@@ -0,0 +1,63 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InputOption = void 0;
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _helpers = require("../../helpers");
+
+var _primitives = require("../../primitives");
+
+var _InputOption = require("./InputOption.constants");
+
+var _InputOptionModule = _interopRequireDefault(require("./InputOption.module.css"));
+
+var _excluded = ["checked", "disabled", "label", "name", "reverse", "type", "value", "onChange"];
+
+var InputOption = function InputOption(_ref) {
+  var checked = _ref.checked,
+      disabled = _ref.disabled,
+      label = _ref.label,
+      name = _ref.name,
+      reverse = _ref.reverse,
+      _ref$type = _ref.type,
+      type = _ref$type === void 0 ? _InputOption.CHECKBOX : _ref$type,
+      _ref$value = _ref.value,
+      value = _ref$value === void 0 ? '' : _ref$value,
+      _ref$onChange = _ref.onChange,
+      onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
+      others = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var Primitive = type === _InputOption.CHECKBOX ? _primitives.Checkbox : _primitives.Radio;
+
+  var handleChange = function handleChange(event) {
+    onChange(type === _InputOption.CHECKBOX ? !checked : value, event);
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_primitives.Pressable, Object.assign({}, others, {
+    style: others.style,
+    className: (0, _helpers.styles)(_InputOptionModule.default.inputOption, reverse && _InputOptionModule.default.reverse, others.className),
+    onPress: handleChange
+  }), /*#__PURE__*/_react.default.createElement(Primitive, {
+    checked: checked,
+    disabled: disabled,
+    name: name,
+    type: type,
+    value: value
+  }, type === _InputOption.CHECKBOX && checked ? /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
+    name: "Check",
+    className: (0, _helpers.styles)(_InputOptionModule.default.icon)
+  }) : undefined), label && /*#__PURE__*/_react.default.createElement(_primitives.Text, {
+    className: (0, _helpers.styles)(_InputOptionModule.default.label, disabled && _InputOptionModule.default.disabled)
+  }, label));
+};
+
+exports.InputOption = InputOption;
+InputOption.displayName = 'Component:InputOption';
+//# sourceMappingURL=InputOption.js.map

package/build/components/InputOption/InputOption.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/InputOption/InputOption.jsx"],"names":["InputOption","checked","disabled","label","name","reverse","type","CHECKBOX","value","onChange","others","Primitive","Checkbox","Radio","handleChange","event","style","inputOption","className","icon","undefined","displayName"],"mappings":";;;;;;;;;;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;AAEA,IAAMA,WAAW,GAAG,SAAdA,WAAc,OAUd;AAAA,MATJC,OASI,QATJA,OASI;AAAA,MARJC,QAQI,QARJA,QAQI;AAAA,MAPJC,KAOI,QAPJA,KAOI;AAAA,MANJC,IAMI,QANJA,IAMI;AAAA,MALJC,OAKI,QALJA,OAKI;AAAA,uBAJJC,IAII;AAAA,MAJJA,IAII,0BAJGC,qBAIH;AAAA,wBAHJC,KAGI;AAAA,MAHJA,KAGI,2BAHI,EAGJ;AAAA,2BAFJC,QAEI;AAAA,MAFJA,QAEI,8BAFO,YAAM,CAAE,CAEf;AAAA,MADDC,MACC;AACJ,MAAMC,SAAS,GAAGL,IAAI,KAAKC,qBAAT,GAAoBK,oBAApB,GAA+BC,iBAAjD;;AAEA,MAAMC,YAAY,GAAG,SAAfA,YAAe,CAACC,KAAD,EAAW;AAC9BN,IAAAA,QAAQ,CAACH,IAAI,KAAKC,qBAAT,GAAoB,CAACN,OAArB,GAA+BO,KAAhC,EAAuCO,KAAvC,CAAR;AACD,GAFD;;AAIA,sBACE,6BAAC,qBAAD,oBACML,MADN;AAEE,IAAA,KAAK,EAAEA,MAAM,CAACM,KAFhB;AAGE,IAAA,SAAS,EAAE,qBAAOA,2BAAMC,WAAb,EAA0BZ,OAAO,IAAIW,2BAAMX,OAA3C,EAAoDK,MAAM,CAACQ,SAA3D,CAHb;AAIE,IAAA,OAAO,EAAEJ;AAJX,mBAME,6BAAC,SAAD;AAAW,IAAA,OAAO,EAAEb,OAApB;AAA6B,IAAA,QAAQ,EAAEC,QAAvC;AAAiD,IAAA,IAAI,EAAEE,IAAvD;AAA6D,IAAA,IAAI,EAAEE,IAAnE;AAAyE,IAAA,KAAK,EAAEE;AAAhF,KACGF,IAAI,KAAKC,qBAAT,IAAqBN,OAArB,gBAA+B,6BAAC,gBAAD;AAAM,IAAA,IAAI,EAAC,OAAX;AAAmB,IAAA,SAAS,EAAE,qBAAOe,2BAAMG,IAAb;AAA9B,IAA/B,GAAsFC,SADzF,CANF,EASGjB,KAAK,iBAAI,6BAAC,gBAAD;AAAM,IAAA,SAAS,EAAE,qBAAOa,2BAAMb,KAAb,EAAoBD,QAAQ,IAAIc,2BAAMd,QAAtC;AAAjB,KAAmEC,KAAnE,CATZ,CADF;AAaD,CA9BD;;;AAgCAH,WAAW,CAACqB,WAAZ,GAA0B,uBAA1B","sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { Radio, Checkbox, Icon, Pressable, Text } from '../../primitives';\nimport { CHECKBOX, RADIO, SWITCH } from './InputOption.constants';\nimport style from './InputOption.module.css';\n\nconst InputOption = ({\n  checked,\n  disabled,\n  label,\n  name,\n  reverse,\n  type = CHECKBOX,\n  value = '',\n  onChange = () => {},\n  ...others\n}) => {\n  const Primitive = type === CHECKBOX ? Checkbox : Radio;\n\n  const handleChange = (event) => {\n    onChange(type === CHECKBOX ? !checked : value, event);\n  };\n\n  return (\n    <Pressable\n      {...others}\n      style={others.style}\n      className={styles(style.inputOption, reverse && style.reverse, others.className)}\n      onPress={handleChange}\n    >\n      <Primitive checked={checked} disabled={disabled} name={name} type={type} value={value}>\n        {type === CHECKBOX && checked ? <Icon name=\"Check\" className={styles(style.icon)} /> : undefined}\n      </Primitive>\n      {label && <Text className={styles(style.label, disabled && style.disabled)}>{label}</Text>}\n    </Pressable>\n  );\n};\n\nInputOption.displayName = 'Component:InputOption';\n\nInputOption.propTypes = {\n  checked: PropTypes.bool,\n  disabled: PropTypes.bool,\n  label: PropTypes.string,\n  name: PropTypes.string.isRequired,\n  reverse: PropTypes.bool,\n  type: PropTypes.oneOf([CHECKBOX, RADIO, SWITCH]),\n  value: PropTypes.string,\n  onChange: PropTypes.func,\n};\n\nexport { InputOption };\n"],"file":"InputOption.js"}

package/build/components/InputOption/InputOption.module.css

@@ -0,0 +1,38 @@
+:root {
+  --mirai-ui-input-option-disabled: var(--mirai-ui-disabled);
+  --mirai-ui-input-option-label-margin: var(--mirai-ui-space-S);
+  --mirai-ui-input-option-padding-y: var(--mirai-ui-space-S);
+}
+
+.inputOption {
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  margin-bottom: var(--mirai-ui-input-option-padding-y);
+  position: relative;
+}
+
+.icon {
+  color: var(--mirai-ui-base);
+  left: 0;
+  margin: calc(calc(var(--mirai-ui-checkbox-size) - var(--mirai-ui-font-size-paragraph)) / 2);
+  position: absolute;
+  top: 0;
+}
+
+.label {
+  margin-left: var(--mirai-ui-input-option-label-margin);
+}
+
+.label.disabled {
+  color: var(--mirai-ui-input-option-disabled);
+}
+
+.reverse {
+  flex-direction: row-reverse;
+}
+
+.reverse .label {
+  margin-left: 0;
+  margin-right: var(--mirai-ui-input-option-label-margin);
+}

package/build/components/InputOption/__tests__/__snapshots__/InputOption.test.js.snap

@@ -0,0 +1,232 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`primitive:<InputOption> inherit:className 1`] = `
+<DocumentFragment>
+  <button
+    class="pressable inputOption mirai"
+  >
+    <div
+      class="checkbox"
+    >
+      <input
+        class=""
+        name="name"
+        type="checkbox"
+        value=""
+      />
+    </div>
+  </button>
+</DocumentFragment>
+`;
+
+exports[`primitive:<InputOption> prop:checked && disabled 1`] = `
+<DocumentFragment>
+  <button
+    class="pressable inputOption"
+  >
+    <div
+      class="checkbox"
+    >
+      <input
+        checked=""
+        class="checked"
+        disabled=""
+        name="name"
+        type="checkbox"
+        value=""
+      />
+      <span
+        class="icon icon"
+      >
+        <svg
+          fill="none"
+          height="1em"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <polyline
+            points="20 6 9 17 4 12"
+          />
+        </svg>
+      </span>
+    </div>
+  </button>
+</DocumentFragment>
+`;
+
+exports[`primitive:<InputOption> prop:checked 1`] = `
+<DocumentFragment>
+  <button
+    class="pressable inputOption"
+  >
+    <div
+      class="checkbox"
+    >
+      <input
+        checked=""
+        class="checked"
+        name="name"
+        type="checkbox"
+        value=""
+      />
+      <span
+        class="icon icon"
+      >
+        <svg
+          fill="none"
+          height="1em"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <polyline
+            points="20 6 9 17 4 12"
+          />
+        </svg>
+      </span>
+    </div>
+  </button>
+</DocumentFragment>
+`;
+
+exports[`primitive:<InputOption> prop:disabled 1`] = `
+<DocumentFragment>
+  <button
+    class="pressable inputOption"
+  >
+    <div
+      class="checkbox"
+    >
+      <input
+        class=""
+        disabled=""
+        name="name"
+        type="checkbox"
+        value=""
+      />
+    </div>
+  </button>
+</DocumentFragment>
+`;
+
+exports[`primitive:<InputOption> prop:label 1`] = `
+<DocumentFragment>
+  <button
+    class="pressable inputOption"
+  >
+    <div
+      class="checkbox"
+    >
+      <input
+        class=""
+        name="name"
+        type="checkbox"
+        value=""
+      />
+    </div>
+    <span
+      class="text paragraph label"
+    >
+      label
+    </span>
+  </button>
+</DocumentFragment>
+`;
+
+exports[`primitive:<InputOption> prop:reverse + label 1`] = `
+<DocumentFragment>
+  <button
+    class="pressable inputOption reverse"
+  >
+    <div
+      class="checkbox"
+    >
+      <input
+        class=""
+        name="name"
+        type="checkbox"
+        value=""
+      />
+    </div>
+    <span
+      class="text paragraph label"
+    >
+      label
+    </span>
+  </button>
+</DocumentFragment>
+`;
+
+exports[`primitive:<InputOption> prop:type 1`] = `
+<DocumentFragment>
+  <button
+    class="pressable inputOption"
+  >
+    <div
+      class="radio"
+    >
+      <input
+        name="name"
+        type="radio"
+        value=""
+      />
+      <span
+        class="checkmark"
+      />
+    </div>
+    <span
+      class="text paragraph label"
+    >
+      label
+    </span>
+  </button>
+</DocumentFragment>
+`;
+
+exports[`primitive:<InputOption> renders 1`] = `
+<DocumentFragment>
+  <button
+    class="pressable inputOption"
+  >
+    <div
+      class="checkbox"
+    >
+      <input
+        class=""
+        name="name"
+        type="checkbox"
+        value=""
+      />
+    </div>
+  </button>
+</DocumentFragment>
+`;
+
+exports[`primitive:<InputOption> testID 1`] = `
+<DocumentFragment>
+  <button
+    class="pressable inputOption"
+    data-testid="mirai"
+  >
+    <div
+      class="checkbox"
+    >
+      <input
+        class=""
+        name="name"
+        type="checkbox"
+        value=""
+      />
+    </div>
+  </button>
+</DocumentFragment>
+`;

package/build/components/InputOption/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _InputOption = require("./InputOption");
+
+Object.keys(_InputOption).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _InputOption[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _InputOption[key];
+    }
+  });
+});
+//# sourceMappingURL=index.js.map

package/build/components/InputOption/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/InputOption/index.js"],"names":[],"mappings":";;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export * from './InputOption';\n"],"file":"index.js"}

package/build/components/Modal/Modal.module.css

@@ -2,6 +2,7 @@
   --mirai-ui-modal-background: var(--mirai-ui-base);
   --mirai-ui-modal-overflow: rgba(0, 0, 0, 0.2);
   --mirai-ui-modal-icon: var(--mirai-ui-space-L);
+  --mirai-ui-modal-layer: var(--mirai-ui-layer-L);
 }
 
 .modal {
@@ -30,7 +31,7 @@
   transition: opacity var(--mirai-ui-motion-expand) var(--mirai-ui-motion-easing);
   top: 0;
   width: 100vw;
-  z-index: 1000;
+  z-index: var(--mirai-ui-modal-layer);
 }
 
 .overflow.visible {

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

@@ -0,0 +1,76 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TableRow = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+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 TableRow = function TableRow(_ref) {
+  var dataSource = _ref.dataSource,
+      schema = _ref.schema,
+      selected = _ref.selected,
+      _ref$sort = _ref.sort,
+      sort = _ref$sort === void 0 ? {} : _ref$sort,
+      onPress = _ref.onPress,
+      onSelect = _ref.onSelect,
+      onSort = _ref.onSort,
+      others = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var isHead = dataSource === undefined;
+  var fields = Object.keys(schema);
+  var tag = isHead ? 'th' : 'td';
+  var testId = others['data-testid'];
+  return /*#__PURE__*/_react.default.createElement("tr", Object.assign({}, others, {
+    role: "tr",
+    className: (0, _helpers.styles)(selected && _TableModule.default.selected, onPress && _TableModule.default.onPress, others.className)
+  }), onSelect && /*#__PURE__*/_react.default.createElement(tag, {
+    className: _TableModule.default.select
+  }, /*#__PURE__*/_react.default.createElement(_primitives.View, {
+    row: true
+  }, !isHead && /*#__PURE__*/_react.default.createElement(_InputOption.InputOption, {
+    checked: selected,
+    "data-testid": testId ? "".concat(testId, "-checkbox") : undefined,
+    name: "checkbox",
+    className: _TableModule.default.checkbox,
+    onChange: function onChange() {
+      return onSelect(dataSource);
+    }
+  }))), fields.map(function (field) {
+    var _React$createElement;
+
+    return /*#__PURE__*/_react.default.createElement(tag, (_React$createElement = {}, (0, _defineProperty2.default)(_React$createElement, 'data-testid', testId ? "".concat(testId, "-").concat(field) : undefined), (0, _defineProperty2.default)(_React$createElement, "key", field), (0, _defineProperty2.default)(_React$createElement, "onClick", !isHead && onPress ? function () {
+      return onPress(dataSource);
+    } : undefined), _React$createElement), /*#__PURE__*/_react.default.createElement(_primitives.View, {
+      row: true,
+      tag: "span",
+      className: isHead && _TableModule.default.head,
+      onClick: isHead ? function () {
+        return onSort(field);
+      } : undefined
+    }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isHead ? schema[field].label : dataSource[field], isHead && onSort && /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
+      name: sort[field] ? 'Down' : 'Up',
+      className: sort[field] === undefined && _TableModule.default.hideIcon
+    }))));
+  }));
+};
+
+exports.TableRow = TableRow;
+TableRow.displayName = 'Table:Row';
+//# sourceMappingURL=Table.Row.js.map