@mirai/ui 1.1.15 → 2.0.1

package/build/components/InputSelect/InputSelect.js

@@ -17,6 +17,11 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 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); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
@@ -67,6 +72,7 @@ var InputSelect = function InputSelect(_ref) {
     value: others.value !== undefined && ((_others$value = others.value) === null || _others$value === void 0 ? void 0 : _others$value.length) > 0,
     stateIcon: showState && (error || success || warning)
   };
+  var id = label ? others.id || others.name : others.id;
   return /*#__PURE__*/_react.default.createElement(_primitives.View, {
     role: others.role || 'input-select',
     className: (0, _helpers.styles)(_InputTextModule.default.inputContainer, others.className),
@@ -85,11 +91,14 @@ var InputSelect = function InputSelect(_ref) {
     disabled: disabled,
     error: error,
     focus: focus,
+    for: id,
     label: label,
     required: showRequired && others.required,
     value: others.value
-  }), /*#__PURE__*/_react.default.createElement(_primitives.Select, _extends({}, others, {
+  }), /*#__PURE__*/_react.default.createElement(_primitives.Select, _extends({}, _objectSpread({
     disabled: disabled,
+    id: id
+  }, others), {
     value: others.value || '',
     className: (0, _helpers.styles)(_InputTextModule.default.input, has.label && _InputTextModule.default.withLabel, !!label && !(focus || error || has.value) && _InputTextModule.default.empty),
     onChange: handleChange,

package/build/components/InputSelect/InputSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputSelect.js","names":["InputSelect","caption","disabled","error","hint","label","showRequired","showState","success","warning","onChange","onEnter","onLeave","others","useState","focus","setFocus","handleChange","value","event","target","blur","handleEnter","handleLeave","has","undefined","length","stateIcon","role","styles","style","inputContainer","className","inputBorder","content","required","input","withLabel","empty","displayName","propTypes","PropTypes","string","bool","name","isRequired","func"],"sources":["../../../src/components/InputSelect/InputSelect.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useState } from 'react';\n\nimport { styles } from '../../helpers';\nimport { Select, Text, View } from '../../primitives';\nimport style from '../InputText/InputText.module.css';\nimport { Hint, IconState, Label } from '../InputText/partials';\nimport { Expand } from './partials';\n\nconst InputSelect = ({\n  caption,\n  disabled,\n  error,\n  hint,\n  label,\n  showRequired = false,\n  showState = true,\n  success,\n  warning,\n  onChange = () => {},\n  onEnter = () => {},\n  onLeave = () => {},\n  ...others\n}) => {\n  const [focus, setFocus] = useState(false);\n\n  const handleChange = (value, event) => {\n    onChange(value, event);\n    event.target?.blur();\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 has = {\n    label: !!label,\n    value: others.value !== undefined && others.value?.length > 0,\n    stateIcon: showState && (error || success || warning),\n  };\n\n  return (\n    <View\n      role={others.role || 'input-select'}\n      className={styles(style.inputContainer, others.className)}\n      style={others.style}\n    >\n      <View\n        row\n        className={styles(style.inputBorder, disabled && style.disabled, focus && style.focus, error && style.error)}\n      >\n        {caption && (\n          <Text action light className={style.caption}>\n            {caption}\n          </Text>\n        )}\n\n        <View wide className={style.content}>\n          {label && (\n            <Label\n              {...{\n                disabled,\n                error,\n                focus,\n                label,\n                required: showRequired && others.required,\n                value: others.value,\n              }}\n            />\n          )}\n\n          <Select\n            {...others}\n            disabled={disabled}\n            value={others.value || ''}\n            className={styles(\n              style.input,\n              has.label && style.withLabel,\n              !!label && !(focus || error || has.value) && style.empty,\n            )}\n            onChange={handleChange}\n            onEnter={handleEnter}\n            onLeave={handleLeave}\n          />\n        </View>\n\n        {!disabled && <Expand />}\n        {has.stateIcon && <IconState {...{ error, success, warning }} />}\n      </View>\n\n      {hint && <Hint {...{ disabled, error, hint }} />}\n    </View>\n  );\n};\n\nInputSelect.displayName = 'Component:InputSelect';\n\nInputSelect.propTypes = {\n  caption: PropTypes.string,\n  disabled: PropTypes.bool,\n  error: PropTypes.bool,\n  hint: PropTypes.string,\n  label: PropTypes.string,\n  name: PropTypes.string.isRequired,\n  showRequired: PropTypes.bool,\n  showState: PropTypes.bool,\n  success: PropTypes.bool,\n  warning: PropTypes.bool,\n  onChange: PropTypes.func,\n  onEnter: PropTypes.func,\n  onLeave: PropTypes.func,\n};\n\nexport { InputSelect };\n"],"mappings":"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"}
+{"version":3,"file":"InputSelect.js","names":["InputSelect","caption","disabled","error","hint","label","showRequired","showState","success","warning","onChange","onEnter","onLeave","others","useState","focus","setFocus","handleChange","value","event","target","blur","handleEnter","handleLeave","has","undefined","length","stateIcon","id","name","role","styles","style","inputContainer","className","inputBorder","content","for","required","input","withLabel","empty","displayName","propTypes","PropTypes","string","bool","isRequired","func"],"sources":["../../../src/components/InputSelect/InputSelect.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useState } from 'react';\n\nimport { styles } from '../../helpers';\nimport { Select, Text, View } from '../../primitives';\nimport style from '../InputText/InputText.module.css';\nimport { Hint, IconState, Label } from '../InputText/partials';\nimport { Expand } from './partials';\n\nconst InputSelect = ({\n  caption,\n  disabled,\n  error,\n  hint,\n  label,\n  showRequired = false,\n  showState = true,\n  success,\n  warning,\n  onChange = () => {},\n  onEnter = () => {},\n  onLeave = () => {},\n  ...others\n}) => {\n  const [focus, setFocus] = useState(false);\n\n  const handleChange = (value, event) => {\n    onChange(value, event);\n    event.target?.blur();\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 has = {\n    label: !!label,\n    value: others.value !== undefined && others.value?.length > 0,\n    stateIcon: showState && (error || success || warning),\n  };\n\n  const id = label ? others.id || others.name : others.id;\n\n  return (\n    <View\n      role={others.role || 'input-select'}\n      className={styles(style.inputContainer, others.className)}\n      style={others.style}\n    >\n      <View\n        row\n        className={styles(style.inputBorder, disabled && style.disabled, focus && style.focus, error && style.error)}\n      >\n        {caption && (\n          <Text action light className={style.caption}>\n            {caption}\n          </Text>\n        )}\n\n        <View wide className={style.content}>\n          {label && (\n            <Label\n              {...{\n                disabled,\n                error,\n                focus,\n                for: id,\n                label,\n                required: showRequired && others.required,\n                value: others.value,\n              }}\n            />\n          )}\n\n          <Select\n            {...{ disabled, id, ...others }}\n            value={others.value || ''}\n            className={styles(\n              style.input,\n              has.label && style.withLabel,\n              !!label && !(focus || error || has.value) && style.empty,\n            )}\n            onChange={handleChange}\n            onEnter={handleEnter}\n            onLeave={handleLeave}\n          />\n        </View>\n\n        {!disabled && <Expand />}\n        {has.stateIcon && <IconState {...{ error, success, warning }} />}\n      </View>\n\n      {hint && <Hint {...{ disabled, error, hint }} />}\n    </View>\n  );\n};\n\nInputSelect.displayName = 'Component:InputSelect';\n\nInputSelect.propTypes = {\n  caption: PropTypes.string,\n  disabled: PropTypes.bool,\n  error: PropTypes.bool,\n  hint: PropTypes.string,\n  label: PropTypes.string,\n  name: PropTypes.string.isRequired,\n  showRequired: PropTypes.bool,\n  showState: PropTypes.bool,\n  success: PropTypes.bool,\n  warning: PropTypes.bool,\n  onChange: PropTypes.func,\n  onEnter: PropTypes.func,\n  onLeave: PropTypes.func,\n};\n\nexport { InputSelect };\n"],"mappings":"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"}

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

@@ -2,13 +2,13 @@
 
 exports[`component:<InputSelect> inherit:className 1`] = `
 <DocumentFragment>
-  <div
+  <ui_view
     class="view inputContainer mirai"
   >
-    <div
+    <ui_view
       class="view row inputBorder"
     >
-      <div
+      <ui_view
         class="view wide content"
       >
         <select
@@ -41,8 +41,8 @@ exports[`component:<InputSelect> inherit:className 1`] = `
             five
           </option>
         </select>
-      </div>
-      <span
+      </ui_view>
+      <ui_icon
         class="icon headline-3 icon expand"
       >
         <svg
@@ -63,26 +63,26 @@ exports[`component:<InputSelect> inherit:className 1`] = `
             d="M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
           />
         </svg>
-      </span>
-    </div>
-  </div>
+      </ui_icon>
+    </ui_view>
+  </ui_view>
 </DocumentFragment>
 `;
 
 exports[`component:<InputSelect> prop:caption 1`] = `
 <DocumentFragment>
-  <div
+  <ui_view
     class="view inputContainer"
   >
-    <div
+    <ui_view
       class="view row inputBorder"
     >
-      <span
+      <ui_text
         class="text light action caption"
       >
         caption
-      </span>
-      <div
+      </ui_text>
+      <ui_view
         class="view wide content"
       >
         <select
@@ -115,8 +115,8 @@ exports[`component:<InputSelect> prop:caption 1`] = `
             five
           </option>
         </select>
-      </div>
-      <span
+      </ui_view>
+      <ui_icon
         class="icon headline-3 icon expand"
       >
         <svg
@@ -137,21 +137,21 @@ exports[`component:<InputSelect> prop:caption 1`] = `
             d="M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
           />
         </svg>
-      </span>
-    </div>
-  </div>
+      </ui_icon>
+    </ui_view>
+  </ui_view>
 </DocumentFragment>
 `;
 
 exports[`component:<InputSelect> prop:disabled 1`] = `
 <DocumentFragment>
-  <div
+  <ui_view
     class="view inputContainer"
   >
-    <div
+    <ui_view
       class="view row inputBorder disabled"
     >
-      <div
+      <ui_view
         class="view wide content"
       >
         <select
@@ -185,21 +185,21 @@ exports[`component:<InputSelect> prop:disabled 1`] = `
             five
           </option>
         </select>
-      </div>
-    </div>
-  </div>
+      </ui_view>
+    </ui_view>
+  </ui_view>
 </DocumentFragment>
 `;
 
 exports[`component:<InputSelect> prop:error 1`] = `
 <DocumentFragment>
-  <div
+  <ui_view
     class="view inputContainer"
   >
-    <div
+    <ui_view
       class="view row inputBorder"
     >
-      <div
+      <ui_view
         class="view wide content"
       >
         <select
@@ -232,8 +232,8 @@ exports[`component:<InputSelect> prop:error 1`] = `
             five
           </option>
         </select>
-      </div>
-      <span
+      </ui_view>
+      <ui_icon
         class="icon headline-3 icon expand"
       >
         <svg
@@ -254,21 +254,21 @@ exports[`component:<InputSelect> prop:error 1`] = `
             d="M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
           />
         </svg>
-      </span>
-    </div>
-  </div>
+      </ui_icon>
+    </ui_view>
+  </ui_view>
 </DocumentFragment>
 `;
 
 exports[`component:<InputSelect> prop:hint 1`] = `
 <DocumentFragment>
-  <div
+  <ui_view
     class="view inputContainer"
   >
-    <div
+    <ui_view
       class="view row inputBorder"
     >
-      <div
+      <ui_view
         class="view wide content"
       >
         <select
@@ -301,8 +301,8 @@ exports[`component:<InputSelect> prop:hint 1`] = `
             five
           </option>
         </select>
-      </div>
-      <span
+      </ui_view>
+      <ui_icon
         class="icon headline-3 icon expand"
       >
         <svg
@@ -323,35 +323,37 @@ exports[`component:<InputSelect> prop:hint 1`] = `
             d="M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
           />
         </svg>
-      </span>
-    </div>
-    <span
+      </ui_icon>
+    </ui_view>
+    <ui_text
       class="text small text hint"
     >
       hint
-    </span>
-  </div>
+    </ui_text>
+  </ui_view>
 </DocumentFragment>
 `;
 
 exports[`component:<InputSelect> prop:label 1`] = `
 <DocumentFragment>
-  <div
+  <ui_view
     class="view inputContainer"
   >
-    <div
+    <ui_view
       class="view row inputBorder"
     >
-      <div
+      <ui_view
         class="view wide content"
       >
-        <span
+        <label
           class="text paragraph text label"
+          for="name"
         >
           label
-        </span>
+        </label>
         <select
           class="select empty input withLabel empty"
+          id="name"
           name="name"
         >
           <option
@@ -380,8 +382,8 @@ exports[`component:<InputSelect> prop:label 1`] = `
             five
           </option>
         </select>
-      </div>
-      <span
+      </ui_view>
+      <ui_icon
         class="icon headline-3 icon expand"
       >
         <svg
@@ -402,25 +404,26 @@ exports[`component:<InputSelect> prop:label 1`] = `
             d="M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
           />
         </svg>
-      </span>
-    </div>
-  </div>
+      </ui_icon>
+    </ui_view>
+  </ui_view>
 </DocumentFragment>
 `;
 
 exports[`component:<InputSelect> prop:required & prop:showRequired (true) 1`] = `
 <DocumentFragment>
-  <div
+  <ui_view
     class="view inputContainer"
   >
-    <div
+    <ui_view
       class="view row inputBorder"
     >
-      <div
+      <ui_view
         class="view wide content"
       >
-        <span
+        <label
           class="text paragraph text label"
+          for="name"
         >
           label
           <span
@@ -428,9 +431,10 @@ exports[`component:<InputSelect> prop:required & prop:showRequired (true) 1`] =
           >
              *
           </span>
-        </span>
+        </label>
         <select
           class="select empty input withLabel empty"
+          id="name"
           name="name"
           required=""
         >
@@ -460,8 +464,8 @@ exports[`component:<InputSelect> prop:required & prop:showRequired (true) 1`] =
             five
           </option>
         </select>
-      </div>
-      <span
+      </ui_view>
+      <ui_icon
         class="icon headline-3 icon expand"
       >
         <svg
@@ -482,30 +486,32 @@ exports[`component:<InputSelect> prop:required & prop:showRequired (true) 1`] =
             d="M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
           />
         </svg>
-      </span>
-    </div>
-  </div>
+      </ui_icon>
+    </ui_view>
+  </ui_view>
 </DocumentFragment>
 `;
 
 exports[`component:<InputSelect> prop:required 1`] = `
 <DocumentFragment>
-  <div
+  <ui_view
     class="view inputContainer"
   >
-    <div
+    <ui_view
       class="view row inputBorder"
     >
-      <div
+      <ui_view
         class="view wide content"
       >
-        <span
+        <label
           class="text paragraph text label"
+          for="name"
         >
           label
-        </span>
+        </label>
         <select
           class="select empty input withLabel empty"
+          id="name"
           name="name"
           required=""
         >
@@ -535,8 +541,8 @@ exports[`component:<InputSelect> prop:required 1`] = `
             five
           </option>
         </select>
-      </div>
-      <span
+      </ui_view>
+      <ui_icon
         class="icon headline-3 icon expand"
       >
         <svg
@@ -557,21 +563,21 @@ exports[`component:<InputSelect> prop:required 1`] = `
             d="M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
           />
         </svg>
-      </span>
-    </div>
-  </div>
+      </ui_icon>
+    </ui_view>
+  </ui_view>
 </DocumentFragment>
 `;
 
 exports[`component:<InputSelect> prop:success 1`] = `
 <DocumentFragment>
-  <div
+  <ui_view
     class="view inputContainer"
   >
-    <div
+    <ui_view
       class="view row inputBorder disabled"
     >
-      <div
+      <ui_view
         class="view wide content"
       >
         <select
@@ -605,21 +611,21 @@ exports[`component:<InputSelect> prop:success 1`] = `
             five
           </option>
         </select>
-      </div>
-    </div>
-  </div>
+      </ui_view>
+    </ui_view>
+  </ui_view>
 </DocumentFragment>
 `;
 
 exports[`component:<InputSelect> prop:value 1`] = `
 <DocumentFragment>
-  <div
+  <ui_view
     class="view inputContainer"
   >
-    <div
+    <ui_view
       class="view row inputBorder"
     >
-      <div
+      <ui_view
         class="view wide content"
       >
         <select
@@ -652,8 +658,8 @@ exports[`component:<InputSelect> prop:value 1`] = `
             five
           </option>
         </select>
-      </div>
-      <span
+      </ui_view>
+      <ui_icon
         class="icon headline-3 icon expand"
       >
         <svg
@@ -674,21 +680,21 @@ exports[`component:<InputSelect> prop:value 1`] = `
             d="M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
           />
         </svg>
-      </span>
-    </div>
-  </div>
+      </ui_icon>
+    </ui_view>
+  </ui_view>
 </DocumentFragment>
 `;
 
 exports[`component:<InputSelect> prop:warning 1`] = `
 <DocumentFragment>
-  <div
+  <ui_view
     class="view inputContainer"
   >
-    <div
+    <ui_view
       class="view row inputBorder"
     >
-      <div
+      <ui_view
         class="view wide content"
       >
         <select
@@ -721,8 +727,8 @@ exports[`component:<InputSelect> prop:warning 1`] = `
             five
           </option>
         </select>
-      </div>
-      <span
+      </ui_view>
+      <ui_icon
         class="icon headline-3 icon expand"
       >
         <svg
@@ -743,8 +749,8 @@ exports[`component:<InputSelect> prop:warning 1`] = `
             d="M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
           />
         </svg>
-      </span>
-      <span
+      </ui_icon>
+      <ui_icon
         class="icon headline-3 icon warning"
       >
         <svg
@@ -760,21 +766,21 @@ exports[`component:<InputSelect> prop:warning 1`] = `
             d="M12 5.99 19.53 19H4.47L12 5.99M12 2 1 21h22L12 2zm1 14h-2v2h2v-2zm0-6h-2v4h2v-4z"
           />
         </svg>
-      </span>
-    </div>
-  </div>
+      </ui_icon>
+    </ui_view>
+  </ui_view>
 </DocumentFragment>
 `;
 
 exports[`component:<InputSelect> renders 1`] = `
 <DocumentFragment>
-  <div
+  <ui_view
     class="view inputContainer"
   >
-    <div
+    <ui_view
       class="view row inputBorder"
     >
-      <div
+      <ui_view
         class="view wide content"
       >
         <select
@@ -807,8 +813,8 @@ exports[`component:<InputSelect> renders 1`] = `
             five
           </option>
         </select>
-      </div>
-      <span
+      </ui_view>
+      <ui_icon
         class="icon headline-3 icon expand"
       >
         <svg
@@ -829,21 +835,21 @@ exports[`component:<InputSelect> renders 1`] = `
             d="M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
           />
         </svg>
-      </span>
-    </div>
-  </div>
+      </ui_icon>
+    </ui_view>
+  </ui_view>
 </DocumentFragment>
 `;
 
 exports[`component:<InputSelect> testId 1`] = `
 <DocumentFragment>
-  <div
+  <ui_view
     class="view inputContainer"
   >
-    <div
+    <ui_view
       class="view row inputBorder"
     >
-      <div
+      <ui_view
         class="view wide content"
       >
         <select
@@ -877,8 +883,8 @@ exports[`component:<InputSelect> testId 1`] = `
             five
           </option>
         </select>
-      </div>
-      <span
+      </ui_view>
+      <ui_icon
         class="icon headline-3 icon expand"
       >
         <svg
@@ -899,8 +905,8 @@ exports[`component:<InputSelect> testId 1`] = `
             d="M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
           />
         </svg>
-      </span>
-    </div>
-  </div>
+      </ui_icon>
+    </ui_view>
+  </ui_view>
 </DocumentFragment>
 `;

package/build/components/InputText/InputText.js

@@ -90,8 +90,10 @@ var InputText = function InputText(_ref) {
     value: others.value !== undefined && (((_others$value = others.value) === null || _others$value === void 0 ? void 0 : _others$value.length) > 0 || typeof others.value === 'number'),
     stateIcon: showState && (error || success || warning)
   };
+  var id = label ? "input.".concat(others.id || others.name) : others.id;
   return /*#__PURE__*/_react.default.createElement(_primitives.View, {
     role: others.role || 'input-text',
+    tag: others.tag || 'input_text',
     className: (0, _helpers.styles)(_InputTextModule.default.inputContainer, others.className),
     style: others.style
   }, /*#__PURE__*/_react.default.createElement(_primitives.View, {
@@ -111,13 +113,15 @@ var InputText = function InputText(_ref) {
     disabled: disabled,
     error: error,
     focus: focus,
+    for: id,
     label: label,
     required: showRequired && others.required,
     value: others.value
-  }), inputMode && /*#__PURE__*/_react.default.createElement(_primitives.Input, _extends({}, _objectSpread({
+  }), inputMode && /*#__PURE__*/_react.default.createElement(_primitives.Input, _extends({}, _objectSpread(_objectSpread({}, others), {}, {
     disabled: disabled,
+    id: id,
     multiLine: multiLine
-  }, others), {
+  }), {
     type: !is.password || password ? type : 'text',
     value: others.value !== undefined ? others.value : '',
     className: (0, _helpers.styles)(_InputTextModule.default.input, has.label && _InputTextModule.default.withLabel, multiLine && _InputTextModule.default.multiLine),