@mirai/ui 2.0.6 → 2.0.8

package/build/components/InputSelect/InputSelect.js

@@ -74,7 +74,8 @@ var InputSelect = function InputSelect(_ref) {
   };
   var id = label ? others.id || others.name : others.id;
   return /*#__PURE__*/_react.default.createElement(_primitives.View, {
-    role: others.role || 'input-select',
+    role: others.role,
+    tag: "input-select",
     className: (0, _helpers.styles)(_InputTextModule.default.inputContainer, others.className),
     style: others.style
   }, /*#__PURE__*/_react.default.createElement(_primitives.View, {
@@ -103,7 +104,8 @@ var InputSelect = function InputSelect(_ref) {
     className: (0, _helpers.styles)(_InputTextModule.default.input, has.label && _InputTextModule.default.withLabel, !!label && !(focus || error || has.value) && _InputTextModule.default.empty),
     onChange: handleChange,
     onEnter: handleEnter,
-    onLeave: handleLeave
+    onLeave: handleLeave,
+    "aria-label": label
   }))), !disabled && /*#__PURE__*/_react.default.createElement(_partials2.Expand, null), has.stateIcon && /*#__PURE__*/_react.default.createElement(_partials.IconState, {
     error: error,
     success: success,

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","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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"}
+{"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}\n      tag=\"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            aria-label={label}\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>
-  <ui_view
+  <ui-input-select
     class="view inputContainer mirai"
   >
-    <ui_view
+    <ui-view
       class="view row inputBorder"
     >
-      <ui_view
+      <ui-view
         class="view wide content"
       >
         <select
@@ -41,8 +41,8 @@ exports[`component:<InputSelect> inherit:className 1`] = `
             five
           </option>
         </select>
-      </ui_view>
-      <ui_icon
+      </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>
-      </ui_icon>
-    </ui_view>
-  </ui_view>
+      </ui-icon>
+    </ui-view>
+  </ui-input-select>
 </DocumentFragment>
 `;
 
 exports[`component:<InputSelect> prop:caption 1`] = `
 <DocumentFragment>
-  <ui_view
+  <ui-input-select
     class="view inputContainer"
   >
-    <ui_view
+    <ui-view
       class="view row inputBorder"
     >
-      <ui_text
+      <ui-text
         class="text light action caption"
       >
         caption
-      </ui_text>
-      <ui_view
+      </ui-text>
+      <ui-view
         class="view wide content"
       >
         <select
@@ -115,8 +115,8 @@ exports[`component:<InputSelect> prop:caption 1`] = `
             five
           </option>
         </select>
-      </ui_view>
-      <ui_icon
+      </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>
-      </ui_icon>
-    </ui_view>
-  </ui_view>
+      </ui-icon>
+    </ui-view>
+  </ui-input-select>
 </DocumentFragment>
 `;
 
 exports[`component:<InputSelect> prop:disabled 1`] = `
 <DocumentFragment>
-  <ui_view
+  <ui-input-select
     class="view inputContainer"
   >
-    <ui_view
+    <ui-view
       class="view row inputBorder disabled"
     >
-      <ui_view
+      <ui-view
         class="view wide content"
       >
         <select
@@ -185,21 +185,21 @@ exports[`component:<InputSelect> prop:disabled 1`] = `
             five
           </option>
         </select>
-      </ui_view>
-    </ui_view>
-  </ui_view>
+      </ui-view>
+    </ui-view>
+  </ui-input-select>
 </DocumentFragment>
 `;
 
 exports[`component:<InputSelect> prop:error 1`] = `
 <DocumentFragment>
-  <ui_view
+  <ui-input-select
     class="view inputContainer"
   >
-    <ui_view
+    <ui-view
       class="view row inputBorder"
     >
-      <ui_view
+      <ui-view
         class="view wide content"
       >
         <select
@@ -232,8 +232,8 @@ exports[`component:<InputSelect> prop:error 1`] = `
             five
           </option>
         </select>
-      </ui_view>
-      <ui_icon
+      </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>
-      </ui_icon>
-    </ui_view>
-  </ui_view>
+      </ui-icon>
+    </ui-view>
+  </ui-input-select>
 </DocumentFragment>
 `;
 
 exports[`component:<InputSelect> prop:hint 1`] = `
 <DocumentFragment>
-  <ui_view
+  <ui-input-select
     class="view inputContainer"
   >
-    <ui_view
+    <ui-view
       class="view row inputBorder"
     >
-      <ui_view
+      <ui-view
         class="view wide content"
       >
         <select
@@ -301,8 +301,8 @@ exports[`component:<InputSelect> prop:hint 1`] = `
             five
           </option>
         </select>
-      </ui_view>
-      <ui_icon
+      </ui-view>
+      <ui-icon
         class="icon headline-3 icon expand"
       >
         <svg
@@ -323,34 +323,34 @@ 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>
-      </ui_icon>
-    </ui_view>
-    <ui_text
+      </ui-icon>
+    </ui-view>
+    <ui-text
       class="text small text hint"
     >
       hint
-    </ui_text>
-  </ui_view>
+    </ui-text>
+  </ui-input-select>
 </DocumentFragment>
 `;
 
 exports[`component:<InputSelect> prop:label 1`] = `
 <DocumentFragment>
-  <ui_view
+  <ui-input-select
     class="view inputContainer"
   >
-    <ui_view
+    <ui-view
       class="view row inputBorder"
     >
-      <ui_view
+      <ui-view
         class="view wide content"
       >
-        <label
+        <ui-label
           class="text paragraph text label"
-          for="name"
+          htmlfor="name"
         >
           label
-        </label>
+        </ui-label>
         <select
           class="select empty input withLabel empty"
           id="name"
@@ -382,8 +382,8 @@ exports[`component:<InputSelect> prop:label 1`] = `
             five
           </option>
         </select>
-      </ui_view>
-      <ui_icon
+      </ui-view>
+      <ui-icon
         class="icon headline-3 icon expand"
       >
         <svg
@@ -404,26 +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>
-      </ui_icon>
-    </ui_view>
-  </ui_view>
+      </ui-icon>
+    </ui-view>
+  </ui-input-select>
 </DocumentFragment>
 `;
 
 exports[`component:<InputSelect> prop:required & prop:showRequired (true) 1`] = `
 <DocumentFragment>
-  <ui_view
+  <ui-input-select
     class="view inputContainer"
   >
-    <ui_view
+    <ui-view
       class="view row inputBorder"
     >
-      <ui_view
+      <ui-view
         class="view wide content"
       >
-        <label
+        <ui-label
           class="text paragraph text label"
-          for="name"
+          htmlfor="name"
         >
           label
           <span
@@ -431,7 +431,7 @@ exports[`component:<InputSelect> prop:required & prop:showRequired (true) 1`] =
           >
              *
           </span>
-        </label>
+        </ui-label>
         <select
           class="select empty input withLabel empty"
           id="name"
@@ -464,8 +464,8 @@ exports[`component:<InputSelect> prop:required & prop:showRequired (true) 1`] =
             five
           </option>
         </select>
-      </ui_view>
-      <ui_icon
+      </ui-view>
+      <ui-icon
         class="icon headline-3 icon expand"
       >
         <svg
@@ -486,29 +486,29 @@ 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>
-      </ui_icon>
-    </ui_view>
-  </ui_view>
+      </ui-icon>
+    </ui-view>
+  </ui-input-select>
 </DocumentFragment>
 `;
 
 exports[`component:<InputSelect> prop:required 1`] = `
 <DocumentFragment>
-  <ui_view
+  <ui-input-select
     class="view inputContainer"
   >
-    <ui_view
+    <ui-view
       class="view row inputBorder"
     >
-      <ui_view
+      <ui-view
         class="view wide content"
       >
-        <label
+        <ui-label
           class="text paragraph text label"
-          for="name"
+          htmlfor="name"
         >
           label
-        </label>
+        </ui-label>
         <select
           class="select empty input withLabel empty"
           id="name"
@@ -541,8 +541,8 @@ exports[`component:<InputSelect> prop:required 1`] = `
             five
           </option>
         </select>
-      </ui_view>
-      <ui_icon
+      </ui-view>
+      <ui-icon
         class="icon headline-3 icon expand"
       >
         <svg
@@ -563,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>
-      </ui_icon>
-    </ui_view>
-  </ui_view>
+      </ui-icon>
+    </ui-view>
+  </ui-input-select>
 </DocumentFragment>
 `;
 
 exports[`component:<InputSelect> prop:success 1`] = `
 <DocumentFragment>
-  <ui_view
+  <ui-input-select
     class="view inputContainer"
   >
-    <ui_view
+    <ui-view
       class="view row inputBorder disabled"
     >
-      <ui_view
+      <ui-view
         class="view wide content"
       >
         <select
@@ -611,21 +611,21 @@ exports[`component:<InputSelect> prop:success 1`] = `
             five
           </option>
         </select>
-      </ui_view>
-    </ui_view>
-  </ui_view>
+      </ui-view>
+    </ui-view>
+  </ui-input-select>
 </DocumentFragment>
 `;
 
 exports[`component:<InputSelect> prop:value 1`] = `
 <DocumentFragment>
-  <ui_view
+  <ui-input-select
     class="view inputContainer"
   >
-    <ui_view
+    <ui-view
       class="view row inputBorder"
     >
-      <ui_view
+      <ui-view
         class="view wide content"
       >
         <select
@@ -658,8 +658,8 @@ exports[`component:<InputSelect> prop:value 1`] = `
             five
           </option>
         </select>
-      </ui_view>
-      <ui_icon
+      </ui-view>
+      <ui-icon
         class="icon headline-3 icon expand"
       >
         <svg
@@ -680,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>
-      </ui_icon>
-    </ui_view>
-  </ui_view>
+      </ui-icon>
+    </ui-view>
+  </ui-input-select>
 </DocumentFragment>
 `;
 
 exports[`component:<InputSelect> prop:warning 1`] = `
 <DocumentFragment>
-  <ui_view
+  <ui-input-select
     class="view inputContainer"
   >
-    <ui_view
+    <ui-view
       class="view row inputBorder"
     >
-      <ui_view
+      <ui-view
         class="view wide content"
       >
         <select
@@ -727,8 +727,8 @@ exports[`component:<InputSelect> prop:warning 1`] = `
             five
           </option>
         </select>
-      </ui_view>
-      <ui_icon
+      </ui-view>
+      <ui-icon
         class="icon headline-3 icon expand"
       >
         <svg
@@ -749,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>
-      </ui_icon>
-      <ui_icon
+      </ui-icon>
+      <ui-icon
         class="icon headline-3 icon warning"
       >
         <svg
@@ -766,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>
-      </ui_icon>
-    </ui_view>
-  </ui_view>
+      </ui-icon>
+    </ui-view>
+  </ui-input-select>
 </DocumentFragment>
 `;
 
 exports[`component:<InputSelect> renders 1`] = `
 <DocumentFragment>
-  <ui_view
+  <ui-input-select
     class="view inputContainer"
   >
-    <ui_view
+    <ui-view
       class="view row inputBorder"
     >
-      <ui_view
+      <ui-view
         class="view wide content"
       >
         <select
@@ -813,8 +813,8 @@ exports[`component:<InputSelect> renders 1`] = `
             five
           </option>
         </select>
-      </ui_view>
-      <ui_icon
+      </ui-view>
+      <ui-icon
         class="icon headline-3 icon expand"
       >
         <svg
@@ -835,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>
-      </ui_icon>
-    </ui_view>
-  </ui_view>
+      </ui-icon>
+    </ui-view>
+  </ui-input-select>
 </DocumentFragment>
 `;
 
 exports[`component:<InputSelect> testId 1`] = `
 <DocumentFragment>
-  <ui_view
+  <ui-input-select
     class="view inputContainer"
   >
-    <ui_view
+    <ui-view
       class="view row inputBorder"
     >
-      <ui_view
+      <ui-view
         class="view wide content"
       >
         <select
@@ -883,8 +883,8 @@ exports[`component:<InputSelect> testId 1`] = `
             five
           </option>
         </select>
-      </ui_view>
-      <ui_icon
+      </ui-view>
+      <ui-icon
         class="icon headline-3 icon expand"
       >
         <svg
@@ -905,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>
-      </ui_icon>
-    </ui_view>
-  </ui_view>
+      </ui-icon>
+    </ui-view>
+  </ui-input-select>
 </DocumentFragment>
 `;

package/build/components/InputText/InputText.js

@@ -92,8 +92,8 @@ var InputText = function InputText(_ref) {
   };
   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',
+    role: others.role,
+    tag: "input-text",
     className: (0, _helpers.styles)(_InputTextModule.default.inputContainer, others.className),
     style: others.style
   }, /*#__PURE__*/_react.default.createElement(_primitives.View, {
@@ -127,7 +127,8 @@ var InputText = function InputText(_ref) {
     className: (0, _helpers.styles)(_InputTextModule.default.input, has.label && _InputTextModule.default.withLabel, multiLine && _InputTextModule.default.multiLine),
     onChange: handleChange,
     onEnter: handleEnter,
-    onLeave: handleLeave
+    onLeave: handleLeave,
+    "aria-label": label
   })), markdown && !inputMode && /*#__PURE__*/_react.default.createElement(_primitives.Text, {
     markdown: true,
     onClick: function onClick() {