@mirai/ui 1.0.129 → 1.0.131

package/README.md

@@ -779,6 +779,7 @@ const MyComponent = () => {
 --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-color-disabled: var(--mirai-ui-content-border);
 --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);

package/build/components/InputText/InputText.js

@@ -102,7 +102,7 @@ var InputText = function InputText(_ref) {
     onChange: handleChange,
     onEnter: handleEnter,
     onLeave: handleLeave
-  }))), (is.password || is.search) && !disabled && /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
+  }))), (is.password || is.search && has.value) && !disabled && /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
     tabIndex: -1,
     onPress: handlePress
   }, /*#__PURE__*/_react.default.createElement(_primitives.Icon, {

package/build/components/InputText/InputText.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputText.js","names":["InputText","disabled","error","hint","icon","label","showState","success","type","warning","onChange","onEnter","onLeave","others","useState","focus","setFocus","password","setPassword","handleChange","value","event","handleEnter","handleLeave","handlePress","is","search","undefined","has","length","stateIcon","styles","style","inputContainer","className","inputBorder","ICON","SEARCH","left","content","required","input","withLabel","EYE_CLOSE","EYE_OPEN","CLOSE","displayName","propTypes","PropTypes","bool","string","func","multiLine","name","isRequired"],"sources":["../../../src/components/InputText/InputText.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useState } from 'react';\n\nimport { styles } from '../../helpers';\nimport { ICON, Icon, Input, Pressable, View } from '../../primitives';\nimport style from './InputText.module.css';\nimport { Hint, IconState, Label } from './partials';\n\nconst InputText = ({\n  disabled,\n  error,\n  hint,\n  icon,\n  label,\n  showState = true,\n  success,\n  type,\n  warning,\n  onChange = () => {},\n  onEnter = () => {},\n  onLeave = () => {},\n  ...others\n}) => {\n  const [focus, setFocus] = useState(false);\n  const [password, setPassword] = useState(true);\n\n  const handleChange = (value, event) => {\n    onChange(value, event);\n  };\n\n  const handleEnter = (event) => {\n    setFocus(true);\n    onEnter(event);\n  };\n\n  const handleLeave = (event) => {\n    setFocus(false);\n    onLeave(event);\n  };\n\n  const handlePress = (event) => {\n    if (is.password) setPassword(!password);\n    else if (is.search) onChange(undefined, event);\n  };\n\n  const is = {\n    password: type === 'password',\n    search: type === 'search',\n  };\n\n  const has = {\n    icon: !!icon || is.search,\n    label: !!label,\n    value: others.value !== undefined && others.value?.length > 0,\n    stateIcon: showState && (error || success || warning),\n  };\n\n  return (\n    <View className={styles(style.inputContainer, others.className)} style={others.style}>\n      <View\n        row\n        className={styles(\n          style.inputBorder,\n          disabled && style.disabled,\n          error && style.error,\n          focus && !error && style.focus,\n        )}\n      >\n        {has.icon && (\n          <Icon\n            value={icon || ICON.SEARCH}\n            className={styles(style.icon, style.left, disabled && style.disabled, error && style.error)}\n          />\n        )}\n        <View wide className={style.content}>\n          {label && <Label {...{ disabled, error, focus, label, required: others.required, value: others.value }} />}\n\n          <Input\n            {...others}\n            disabled={disabled}\n            type={!is.password || password ? type : 'text'}\n            value={others.value || ''}\n            className={styles(style.input, has.label && style.withLabel)}\n            onChange={handleChange}\n            onEnter={handleEnter}\n            onLeave={handleLeave}\n          />\n        </View>\n\n        {(is.password || is.search) && !disabled && (\n          <Pressable tabIndex={-1} onPress={handlePress}>\n            <Icon\n              value={is.password ? (password ? ICON.EYE_CLOSE : ICON.EYE_OPEN) : ICON.CLOSE}\n              className={style.icon}\n            />\n          </Pressable>\n        )}\n\n        {has.stateIcon && <IconState {...{ error, success, warning }} />}\n      </View>\n\n      {hint && <Hint {...{ disabled, error, hint }} />}\n    </View>\n  );\n};\n\nInputText.displayName = 'Component:InputText';\n\nInputText.propTypes = {\n  disabled: PropTypes.bool,\n  error: PropTypes.bool,\n  hint: PropTypes.string,\n  icon: PropTypes.func,\n  label: PropTypes.string,\n  multiLine: PropTypes.bool,\n  name: PropTypes.string.isRequired,\n  showState: PropTypes.bool,\n  success: PropTypes.bool,\n  type: PropTypes.string,\n  warning: PropTypes.bool,\n  onChange: PropTypes.func,\n  onEnter: PropTypes.func,\n  onLeave: PropTypes.func,\n};\n\nexport { InputText };\n"],"mappings":"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"}
+{"version":3,"file":"InputText.js","names":["InputText","disabled","error","hint","icon","label","showState","success","type","warning","onChange","onEnter","onLeave","others","useState","focus","setFocus","password","setPassword","handleChange","value","event","handleEnter","handleLeave","handlePress","is","search","undefined","has","length","stateIcon","styles","style","inputContainer","className","inputBorder","ICON","SEARCH","left","content","required","input","withLabel","EYE_CLOSE","EYE_OPEN","CLOSE","displayName","propTypes","PropTypes","bool","string","func","multiLine","name","isRequired"],"sources":["../../../src/components/InputText/InputText.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useState } from 'react';\n\nimport { styles } from '../../helpers';\nimport { ICON, Icon, Input, Pressable, View } from '../../primitives';\nimport style from './InputText.module.css';\nimport { Hint, IconState, Label } from './partials';\n\nconst InputText = ({\n  disabled,\n  error,\n  hint,\n  icon,\n  label,\n  showState = true,\n  success,\n  type,\n  warning,\n  onChange = () => {},\n  onEnter = () => {},\n  onLeave = () => {},\n  ...others\n}) => {\n  const [focus, setFocus] = useState(false);\n  const [password, setPassword] = useState(true);\n\n  const handleChange = (value, event) => {\n    onChange(value, event);\n  };\n\n  const handleEnter = (event) => {\n    setFocus(true);\n    onEnter(event);\n  };\n\n  const handleLeave = (event) => {\n    setFocus(false);\n    onLeave(event);\n  };\n\n  const handlePress = (event) => {\n    if (is.password) setPassword(!password);\n    else if (is.search) onChange(undefined, event);\n  };\n\n  const is = {\n    password: type === 'password',\n    search: type === 'search',\n  };\n\n  const has = {\n    icon: !!icon || is.search,\n    label: !!label,\n    value: others.value !== undefined && others.value?.length > 0,\n    stateIcon: showState && (error || success || warning),\n  };\n\n  return (\n    <View className={styles(style.inputContainer, others.className)} style={others.style}>\n      <View\n        row\n        className={styles(\n          style.inputBorder,\n          disabled && style.disabled,\n          error && style.error,\n          focus && !error && style.focus,\n        )}\n      >\n        {has.icon && (\n          <Icon\n            value={icon || ICON.SEARCH}\n            className={styles(style.icon, style.left, disabled && style.disabled, error && style.error)}\n          />\n        )}\n        <View wide className={style.content}>\n          {label && <Label {...{ disabled, error, focus, label, required: others.required, value: others.value }} />}\n\n          <Input\n            {...others}\n            disabled={disabled}\n            type={!is.password || password ? type : 'text'}\n            value={others.value || ''}\n            className={styles(style.input, has.label && style.withLabel)}\n            onChange={handleChange}\n            onEnter={handleEnter}\n            onLeave={handleLeave}\n          />\n        </View>\n\n        {(is.password || (is.search && has.value)) && !disabled && (\n          <Pressable tabIndex={-1} onPress={handlePress}>\n            <Icon\n              value={is.password ? (password ? ICON.EYE_CLOSE : ICON.EYE_OPEN) : ICON.CLOSE}\n              className={style.icon}\n            />\n          </Pressable>\n        )}\n\n        {has.stateIcon && <IconState {...{ error, success, warning }} />}\n      </View>\n\n      {hint && <Hint {...{ disabled, error, hint }} />}\n    </View>\n  );\n};\n\nInputText.displayName = 'Component:InputText';\n\nInputText.propTypes = {\n  disabled: PropTypes.bool,\n  error: PropTypes.bool,\n  hint: PropTypes.string,\n  icon: PropTypes.func,\n  label: PropTypes.string,\n  multiLine: PropTypes.bool,\n  name: PropTypes.string.isRequired,\n  showState: PropTypes.bool,\n  success: PropTypes.bool,\n  type: PropTypes.string,\n  warning: PropTypes.bool,\n  onChange: PropTypes.func,\n  onEnter: PropTypes.func,\n  onLeave: PropTypes.func,\n};\n\nexport { InputText };\n"],"mappings":"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"}

package/build/components/Menu/__tests__/__snapshots__/Menu.test.jsx.snap

@@ -40,133 +40,137 @@ exports[`component:<Menu> prop:options & visible 1`] = `
     </button>
   </span>
   <div
-    class="layer menu visible"
+    class="layer"
     style="left: 0px; top: 0px;"
   >
     <div
-      class="pressable option divider"
+      class="menu visible"
     >
       <div
-        class="view row wide content"
+        class="pressable option divider"
       >
-        <span
-          class="text paragraph label"
+        <div
+          class="view row wide content"
         >
-          Lorem Ipsum...
-        </span>
+          <span
+            class="text paragraph label"
+          >
+            Lorem Ipsum...
+          </span>
+        </div>
       </div>
-    </div>
-    <div
-      class="pressable option value"
-    >
       <div
-        class="view row wide content"
+        class="pressable option value"
       >
-        <span
-          class="icon headline-3 icon"
+        <div
+          class="view row wide content"
         >
-          <svg
-            fill="currentColor"
-            height="1em"
-            stroke="currentColor"
-            stroke-width="0"
-            viewBox="0 0 24 24"
-            width="1em"
-            xmlns="http://www.w3.org/2000/svg"
+          <span
+            class="icon headline-3 icon"
           >
-            <path
-              d="M0 0h24v24H0V0z"
-              fill="none"
-            />
-            <path
-              d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
-            />
-          </svg>
-        </span>
-        <span
-          class="text paragraph label"
-        >
-          Item 1
-        </span>
+            <svg
+              fill="currentColor"
+              height="1em"
+              stroke="currentColor"
+              stroke-width="0"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M0 0h24v24H0V0z"
+                fill="none"
+              />
+              <path
+                d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
+              />
+            </svg>
+          </span>
+          <span
+            class="text paragraph label"
+          >
+            Item 1
+          </span>
+        </div>
       </div>
-    </div>
-    <div
-      class="pressable option value disabled"
-      data-testid="two"
-    >
       <div
-        class="view row wide content"
+        class="pressable option value disabled"
+        data-testid="two"
       >
-        <span
-          class="icon headline-3 icon"
+        <div
+          class="view row wide content"
         >
-          <svg
-            fill="currentColor"
-            height="1em"
-            stroke="currentColor"
-            stroke-width="0"
-            viewBox="0 0 24 24"
-            width="1em"
-            xmlns="http://www.w3.org/2000/svg"
+          <span
+            class="icon headline-3 icon"
           >
-            <path
-              d="M0 0h24v24H0V0z"
-              fill="none"
-            />
-            <path
-              d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
-            />
-          </svg>
-        </span>
-        <span
-          class="text paragraph label"
-        >
-          Item 2
-        </span>
+            <svg
+              fill="currentColor"
+              height="1em"
+              stroke="currentColor"
+              stroke-width="0"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M0 0h24v24H0V0z"
+                fill="none"
+              />
+              <path
+                d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
+              />
+            </svg>
+          </span>
+          <span
+            class="text paragraph label"
+          >
+            Item 2
+          </span>
+        </div>
       </div>
-    </div>
-    <div
-      class="pressable option value divider"
-    >
       <div
-        class="view row wide content"
+        class="pressable option value divider"
       >
-        <span
-          class="text paragraph label"
+        <div
+          class="view row wide content"
         >
-          Item 3
-        </span>
+          <span
+            class="text paragraph label"
+          >
+            Item 3
+          </span>
+        </div>
       </div>
-    </div>
-    <div
-      class="pressable option value"
-    >
       <div
-        class="view row wide content"
+        class="pressable option value"
       >
-        <span
-          class="text paragraph label"
-        >
-          Item 4
-        </span>
-        <button
-          class="pressable button small"
+        <div
+          class="view row wide content"
         >
-          Add
-        </button>
+          <span
+            class="text paragraph label"
+          >
+            Item 4
+          </span>
+          <button
+            class="pressable button small"
+          >
+            Add
+          </button>
+        </div>
       </div>
-    </div>
-    <div
-      class="pressable option"
-    >
       <div
-        class="view row wide content"
+        class="pressable option"
       >
-        <button
-          class="pressable button"
+        <div
+          class="view row wide content"
         >
-          Add
-        </button>
+          <button
+            class="pressable button"
+          >
+            Add
+          </button>
+        </div>
       </div>
     </div>
   </div>
@@ -195,9 +199,13 @@ exports[`component:<Menu> prop:title 1`] = `
     </button>
   </span>
   <div
-    class="layer menu visible"
+    class="layer"
     style="left: 0px; top: 0px;"
-  />
+  >
+    <div
+      class="menu visible"
+    />
+  </div>
 </DocumentFragment>
 `;
 

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

@@ -32,8 +32,6 @@ var TableRow = function TableRow(_ref) {
     onSort = _ref.onSort,
     others = _objectWithoutProperties(_ref, _excluded);
   var isHead = dataSource === undefined;
-  var fields = Object.keys(schema);
-  var tag = isHead ? 'th' : 'td';
   var testId = others['data-testid'];
   var handlePress = function handlePress(field, event) {
     var _event$target = event.target;
@@ -45,16 +43,16 @@ var TableRow = function TableRow(_ref) {
   return /*#__PURE__*/_react.default.createElement("tr", _extends({}, others, {
     role: "tr",
     className: (0, _helpers.styles)(checked && _TableModule.default.selected, onPress && _TableModule.default.onPress)
-  }), fields.map(function (field, index) {
+  }), Object.keys(schema).filter(function (field) {
+    return schema[field].type !== 'hidden';
+  }).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) {
+    return /*#__PURE__*/_react.default.createElement(isHead ? 'th' : 'td', (_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) {
       return handlePress(field, event);
     }), _React$createElement), /*#__PURE__*/_react.default.createElement(_primitives.View, {
       forceRow: true,
-      tag: "span"
-    }, /*#__PURE__*/_react.default.createElement(_primitives.View, {
-      forceRow: true,
-      className: _TableModule.default.checkboxColumn
+      tag: "span",
+      className: (0, _helpers.styles)(_TableModule.default.column, onSelect && index === 0 && _TableModule.default.selectable, !isHead && !(onSelect && index === 0) && _TableModule.default[schema[field].type || 'text'])
     }, onSelect && index === 0 && /*#__PURE__*/_react.default.createElement(_InputOption.InputOption, {
       checked: checked,
       "data-testid": testId ? "".concat(testId, "-checkbox") : undefined,
@@ -64,9 +62,9 @@ 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, {
-      value: sort[field] ? _primitives.ICON.DOWN : _primitives.ICON.UP,
-      className: (0, _helpers.styles)(_TableModule.default.icon, sort[field] === undefined && _TableModule.default.hide)
+    }), isHead ? schema[field].label : dataSource[field], isHead && 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)
     })));
   }));
 };

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","fields","Object","keys","tag","testId","handlePress","field","event","target","type","includes","styles","style","selected","map","index","React","createElement","checkboxColumn","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 forceRow tag=\"span\">\n            <View forceRow className={style.checkboxColumn}>\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            </View>\n\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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"}
+{"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":";;;;;;;AAAA;AACA;AAEA;AACA;AACA;AACA;AAAuC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEvC,IAAMA,kBAAkB,GAAG,CAAC,QAAQ,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,CAAC;AAE7E,IAAMC,QAAQ,GAAG,SAAXA,QAAQ,OAAwG;EAAA,IAAlGC,OAAO,QAAPA,OAAO;IAAEC,UAAU,QAAVA,UAAU;IAAEC,aAAa,QAAbA,aAAa;IAAEC,MAAM,QAANA,MAAM;IAAA,iBAAEC,IAAI;IAAJA,IAAI,0BAAG,CAAC,CAAC;IAAEC,OAAO,QAAPA,OAAO;IAAEC,QAAQ,QAARA,QAAQ;IAAEC,MAAM,QAANA,MAAM;IAAKC,MAAM;EAC7G,IAAMC,MAAM,GAAGR,UAAU,KAAKS,SAAS;EACvC,IAAyBC,MAAM,GAAKH,MAAM,CAAjC,aAAa;EAEtB,IAAMI,WAAW,GAAG,SAAdA,WAAW,CAAIC,KAAK,EAAEC,KAAK,EAAK;IACpC,oBAAkCA,KAAK,CAA/BC,MAAM;IAAd,2CAA2B,CAAC,CAAC;IAA7B,IAAkBC,IAAI,iBAAJA,IAAI;IACtB,IAAIlB,kBAAkB,CAACmB,QAAQ,CAACD,IAAI,CAAC,EAAE;IAEvCP,MAAM,GAAGF,MAAM,CAACM,KAAK,CAAC,GAAGR,OAAO,IAAIA,OAAO,CAACJ,UAAU,EAAEa,KAAK,CAAC;EAChE,CAAC;EAED,oBACE,gDAAQN,MAAM;IAAE,IAAI,EAAC,IAAI;IAAC,SAAS,EAAE,IAAAU,eAAM,EAAClB,OAAO,IAAImB,oBAAK,CAACC,QAAQ,EAAEf,OAAO,IAAIc,oBAAK,CAACd,OAAO;EAAE,IAC9FgB,MAAM,CAACC,IAAI,CAACnB,MAAM,CAAC,CACjBoB,MAAM,CAAC,UAACV,KAAK;IAAA,OAAKV,MAAM,CAACU,KAAK,CAAC,CAACG,IAAI,KAAK,QAAQ;EAAA,EAAC,CAClDQ,GAAG,CAAC,UAACX,KAAK,EAAEY,KAAK;IAAA;IAAA,oBAChBC,cAAK,CAACC,aAAa,CACjBlB,MAAM,GAAG,IAAI,GAAG,IAAI,oEAEjB,aAAa,EAAGE,MAAM,aAAMA,MAAM,cAAIE,KAAK,IAAKH,SAAS,gDACrDG,KAAK,oDACD,iBAACC,KAAK;MAAA,OAAKF,WAAW,CAACC,KAAK,EAAEC,KAAK,CAAC;IAAA,wCAE/C,6BAAC,gBAAI;MACH,QAAQ;MACR,GAAG,EAAC,MAAM;MACV,SAAS,EAAE,IAAAI,eAAM,EACfC,oBAAK,CAACS,MAAM,EACZtB,QAAQ,IAAImB,KAAK,KAAK,CAAC,IAAIN,oBAAK,CAACU,UAAU,EAC3C,CAACpB,MAAM,IAAI,EAAEH,QAAQ,IAAImB,KAAK,KAAK,CAAC,CAAC,IAAIN,oBAAK,CAAChB,MAAM,CAACU,KAAK,CAAC,CAACG,IAAI,IAAI,MAAM,CAAC;IAC5E,GAEDV,QAAQ,IAAImB,KAAK,KAAK,CAAC,iBACtB,6BAAC,wBAAW;MACV,OAAO,EAAEzB,OAAQ;MACjB,eAAaW,MAAM,aAAMA,MAAM,iBAAcD,SAAU;MACvD,aAAa,EAAER,aAAc;MAC7B,IAAI,EAAC,UAAU;MACf,SAAS,EAAEiB,oBAAK,CAACW,QAAS;MAC1B,QAAQ,EAAE,kBAAChB,KAAK;QAAA,OAAKR,QAAQ,CAACL,UAAU,EAAEa,KAAK,CAAC;MAAA;IAAC,EAEpD,EAEAL,MAAM,GAAGN,MAAM,CAACU,KAAK,CAAC,CAACkB,KAAK,GAAG9B,UAAU,CAACY,KAAK,CAAC,EAEhDJ,MAAM,IAAIF,MAAM,iBACf,6BAAC,gBAAI;MACH,KAAK,EAAEH,IAAI,CAACS,KAAK,CAAC,KAAK,KAAK,GAAGmB,gBAAI,CAACC,EAAE,GAAGD,gBAAI,CAACE,IAAK;MACnD,SAAS,EAAE,IAAAhB,eAAM,EAACC,oBAAK,CAACgB,IAAI,EAAE/B,IAAI,CAACS,KAAK,CAAC,KAAKH,SAAS,IAAIS,oBAAK,CAACiB,QAAQ;IAAE,EAE9E,CACI,CACR;EAAA,EACF,CACA;AAET,CAAC;AAAC;AAEFrC,QAAQ,CAACsC,WAAW,GAAG,WAAW;AAElCtC,QAAQ,CAACuC,SAAS,GAAG;EACnBtC,OAAO,EAAEuC,kBAAS,CAACC,IAAI;EACvBvC,UAAU,EAAEsC,kBAAS,CAACE,KAAK,CAAC,CAAC,CAAC,CAAC;EAC/BvC,aAAa,EAAEqC,kBAAS,CAACC,IAAI;EAC7BrC,MAAM,EAAEoC,kBAAS,CAACE,KAAK,CAAC,CAAC,CAAC,CAAC,CAACC,UAAU;EACtCtC,IAAI,EAAEmC,kBAAS,CAACE,KAAK,CAAC,CAAC,CAAC,CAAC;EACzBpC,OAAO,EAAEkC,kBAAS,CAACI,IAAI;EACvBrC,QAAQ,EAAEiC,kBAAS,CAACI,IAAI;EACxBpC,MAAM,EAAEgC,kBAAS,CAACI;AACpB,CAAC"}

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

@@ -45,6 +45,10 @@
   border-bottom: solid var(--mirai-ui-border-width) var(--mirai-ui-table-border-color);
 }
 
+.table th {
+  user-select: none;
+}
+
 .table th,
 .table td {
   padding: var(--mirai-ui-table-padding-y) var(--mirai-ui-table-padding-x) var(--mirai-ui-table-padding-y) 0;
@@ -64,15 +68,29 @@
 }
 
 .table th .icon {
-  margin: 0 calc(var(--mirai-ui-table-padding-x) / 4);
+  /* ? TODO: Ask design */
+  /* margin-left: auto; */
+}
+
+.table th .icon.disabled {
+  color: var(--mirai-ui-table-color-disabled);
+}
+
+.table th .column,
+.table .column.selectable {
+  gap: calc(var(--mirai-ui-table-padding-x) / 2);
 }
 
-.table th .icon.hide {
-  color: var(--mirai-ui-table-background);
+.table .column.text {
+  display: block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-.table .checkboxColumn {
-  gap: var(--mirai-ui-space-S);
+.table .column.number {
+  float: right;
+  width: fit-content;
 }
 
 .table .checkbox {

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

@@ -32,6 +32,13 @@ var Story = function Story(props) {
     _useState2 = _slicedToArray(_useState, 2),
     selected = _useState2[0],
     setSelected = _useState2[1];
+  var _useState3 = (0, _react.useState)(),
+    _useState4 = _slicedToArray(_useState3, 2),
+    search = _useState4[0],
+    setSearch = _useState4[1];
+  (0, _react.useEffect)(function () {
+    setSearch(props.search);
+  }, [props.search]);
   var handleScroll = function handleScroll() {
     var _console;
     for (var _len = arguments.length, others = new Array(_len), _key = 0; _key < _len; _key++) {
@@ -54,19 +61,26 @@ var Story = function Story(props) {
     (_console3 = console).log.apply(_console3, ['<Table>::onSelect'].concat(others));
     setSelected.apply(void 0, others);
   };
-  return /*#__PURE__*/_react.default.createElement(_Table.Table, _extends({}, props, {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_.InputText, {
+    name: "search",
+    placeholder: "search...",
+    type: "search",
+    value: search,
+    onChange: setSearch
+  }), /*#__PURE__*/_react.default.createElement(_Table.Table, _extends({}, props, {
+    search: search,
     selected: selected,
     onPress: handlePress,
     onScroll: handleScroll,
     onSelect: handleSelect,
-    className: _TableStoriesModule.default.scrollview
-  }));
+    className: _TableStoriesModule.default.table
+  })));
 };
 exports.Story = Story;
 var dataSource = [{
   username: 'jose',
   email: 'jose@mirai.com',
-  year: 2012,
+  year: 1,
   tags: ['es', 'en', 'ja'].map(function (language) {
     return /*#__PURE__*/_react.default.createElement(_.Text, {
       key: language,
@@ -75,6 +89,7 @@ var dataSource = [{
       className: _TableStoriesModule.default.tag
     }, language);
   }),
+  languages: ['spanish', 'english', 'japanese'],
   action: null
 }, {
   username: 'mario/1',
@@ -97,6 +112,7 @@ var dataSource = [{
       className: _TableStoriesModule.default.tag
     }, language);
   }),
+  languages: ['english'],
   year: 2021,
   twitter: undefined,
   action: /*#__PURE__*/_react.default.createElement(_.Button, {
@@ -107,7 +123,8 @@ var dataSource = [{
   email: 'hi@soyjavi.com',
   tags: null,
   year: 2022,
-  twitter: 'soyjavi'
+  twitter: 'soyjavi',
+  bio: "Hi, I'm Javi. For as long as I can remember, I have always loved build software and helping people through it. I strive to design simple, clean, and beautiful products in the hope that they will make a difference in the world."
 }, {
   username: 'victor',
   email: 'victor@mirai.com',
@@ -133,7 +150,11 @@ Story.args = (_Story$args = {
     },
     tags: {
       label: 'Tags',
-      component: 'true'
+      type: 'component'
+    },
+    languages: {
+      label: 'Languages (hidden)',
+      type: 'hidden'
     },
     year: {
       label: 'Year',
@@ -142,8 +163,12 @@ Story.args = (_Story$args = {
     twitter: {
       label: 'Twitter'
     },
+    bio: {
+      label: 'Biography'
+    },
     action: {
-      label: 'Action'
+      label: 'Action',
+      type: 'component'
     }
   },
   search: ''

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

@@ -1 +1 @@
-{"version":3,"file":"Table.stories.js","names":["title","Story","props","useState","selected","setSelected","handleScroll","others","console","log","handlePress","handleSelect","style","scrollview","dataSource","username","email","year","tags","map","language","tag","action","twitter","undefined","storyName","args","inline","schema","label","type","component","search","height","width","background","argTypes"],"sources":["../../../src/components/Table/Table.stories.jsx"],"sourcesContent":["import React, { useState } from 'react';\n\nimport { Button, Text } from '../../';\nimport { Table } from './Table';\nimport style from './Table.stories.module.css';\n\nexport default { title: 'Components' };\n\nexport const Story = (props) => {\n  const [selected, setSelected] = useState();\n\n  const handleScroll = (...others) => console.log('<Table>::onScroll', ...others);\n\n  const handlePress = (...others) => console.log('<Table>::onPress', ...others);\n\n  const handleSelect = (...others) => {\n    console.log('<Table>::onSelect', ...others);\n    setSelected(...others);\n  };\n\n  return (\n    <Table\n      {...props}\n      selected={selected}\n      onPress={handlePress}\n      onScroll={handleScroll}\n      onSelect={handleSelect}\n      className={style.scrollview}\n    />\n  );\n};\n\nconst dataSource = [\n  {\n    username: 'jose',\n    email: 'jose@mirai.com',\n    year: 2012,\n    tags: ['es', 'en', 'ja'].map((language) => (\n      <Text key={language} bold small className={style.tag}>\n        {language}\n      </Text>\n    )),\n    action: null,\n  },\n  { username: 'mario/1', email: 'mario.1@mirai.com', tags: null, year: 2005 },\n  { username: 'carlos', email: 'carlos@mirai.com', tags: null, year: 2012 },\n  {\n    username: 'svet',\n    email: 'svet@mirai.com',\n    tags: ['en'].map((language) => (\n      <Text key={language} bold small className={style.tag}>\n        {language}\n      </Text>\n    )),\n    year: 2021,\n    twitter: undefined,\n    action: <Button small>Click Me</Button>,\n  },\n  { username: 'javi', email: 'hi@soyjavi.com', tags: null, year: 2022, twitter: 'soyjavi' },\n  { username: 'victor', email: 'victor@mirai.com', tags: null, year: 2021 },\n  { username: 'mario/2', email: 'mario.2@mirai.com', tags: null, 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    tags: { label: 'Tags', component: 'true' },\n    year: { label: 'Year', type: 'number' },\n    twitter: { label: 'Twitter' },\n    action: { label: 'Action' },\n  },\n  search: '',\n  // inherited properties\n  ['data-testid']: 'test-story',\n  style: { height: '128px !important;', width: 128, background: 'red' },\n};\n\nStory.argTypes = {};\n"],"mappings":"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"}
+{"version":3,"file":"Table.stories.js","names":["title","Story","props","useState","selected","setSelected","search","setSearch","useEffect","handleScroll","others","console","log","handlePress","handleSelect","style","table","dataSource","username","email","year","tags","map","language","tag","languages","action","twitter","undefined","bio","storyName","args","inline","schema","label","type","height","width","background","argTypes"],"sources":["../../../src/components/Table/Table.stories.jsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\n\nimport { Button, InputText, Text } from '../../';\nimport { Table } from './Table';\nimport style from './Table.stories.module.css';\n\nexport default { title: 'Components' };\n\nexport const Story = (props) => {\n  const [selected, setSelected] = useState();\n  const [search, setSearch] = useState();\n\n  useEffect(() => {\n    setSearch(props.search);\n  }, [props.search]);\n\n  const handleScroll = (...others) => console.log('<Table>::onScroll', ...others);\n\n  const handlePress = (...others) => console.log('<Table>::onPress', ...others);\n\n  const handleSelect = (...others) => {\n    console.log('<Table>::onSelect', ...others);\n    setSelected(...others);\n  };\n\n  return (\n    <>\n      <InputText name=\"search\" placeholder=\"search...\" type=\"search\" value={search} onChange={setSearch} />\n\n      <Table\n        {...props}\n        search={search}\n        selected={selected}\n        onPress={handlePress}\n        onScroll={handleScroll}\n        onSelect={handleSelect}\n        className={style.table}\n      />\n    </>\n  );\n};\n\nconst dataSource = [\n  {\n    username: 'jose',\n    email: 'jose@mirai.com',\n    year: 1,\n    tags: ['es', 'en', 'ja'].map((language) => (\n      <Text key={language} bold small className={style.tag}>\n        {language}\n      </Text>\n    )),\n    languages: ['spanish', 'english', 'japanese'],\n    action: null,\n  },\n  { username: 'mario/1', email: 'mario.1@mirai.com', tags: null, year: 2005 },\n  { username: 'carlos', email: 'carlos@mirai.com', tags: null, year: 2012 },\n  {\n    username: 'svet',\n    email: 'svet@mirai.com',\n    tags: ['en'].map((language) => (\n      <Text key={language} bold small className={style.tag}>\n        {language}\n      </Text>\n    )),\n    languages: ['english'],\n    year: 2021,\n    twitter: undefined,\n    action: <Button small>Click Me</Button>,\n  },\n  {\n    username: 'javi',\n    email: 'hi@soyjavi.com',\n    tags: null,\n    year: 2022,\n    twitter: 'soyjavi',\n    bio: \"Hi, I'm Javi. For as long as I can remember, I have always loved build software and helping people through it. I strive to design simple, clean, and beautiful products in the hope that they will make a difference in the world.\",\n  },\n  { username: 'victor', email: 'victor@mirai.com', tags: null, year: 2021 },\n  { username: 'mario/2', email: 'mario.2@mirai.com', tags: null, 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    tags: { label: 'Tags', type: 'component' },\n    languages: { label: 'Languages (hidden)', type: 'hidden' },\n    year: { label: 'Year', type: 'number' },\n    twitter: { label: 'Twitter' },\n    bio: { label: 'Biography' },\n    action: { label: 'Action', type: 'component' },\n  },\n  search: '',\n  // inherited properties\n  ['data-testid']: 'test-story',\n  style: { height: '128px !important;', width: 128, background: 'red' },\n};\n\nStory.argTypes = {};\n"],"mappings":"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"}

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

@@ -1,19 +1,23 @@
-.tag {
+.table td:nth-child(6) {
+  max-width: 20vw;
+}
+
+.table .tag {
   background-color: var(--mirai-ui-accent-light);
   color: var(--mirai-ui-base);
-  padding: calc(var(--mirai-ui-space-XS) / 2) var(--mirai-ui-space-XS);
+  padding: calc(var(--mirai-ui-space-XS) / 4) calc(var(--mirai-ui-space-XS) / 2);
   border-radius: var(--mirai-ui-border-radius);
   margin: 0 var(--mirai-ui-border-radius);
 }
 
 @media only screen and (max-width: 430px) {
-  .scrollview {
+  .table {
     width: 100%;
   }
 }
 
 @media only screen and (min-width: 430px) {
-  .scrollview {
+  .table {
     height: 50vh;
     width: 50vw;
   }