@mirai/ui 1.0.63 → 1.0.65

package/build/components/InputText/InputText.js

@@ -115,22 +115,25 @@ var InputText = function InputText(_ref) {
     onChange: handleChange,
     onEnter: handleEnter,
     onLeave: handleLeave
-  })), has.stateIcon && /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
-    value: (0, _helpers.getIconState)({
-      error: error,
-      success: success,
-      warning: warning
-    }),
-    className: (0, _helpers.styles)(_InputTextModule.default.icon, _InputTextModule.default.right, error ? _InputTextModule.default.error : warning ? _InputTextModule.default.warning : success ? _InputTextModule.default.success : undefined)
-  }), is.password && !disabled && !has.stateIcon && /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
+  })), (is.password && !disabled || has.stateIcon) && /*#__PURE__*/_react.default.createElement(_primitives.View, {
+    row: true,
+    className: _InputTextModule.default.icons
+  }, is.password && !disabled && /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
     tabIndex: -1,
     type: "button",
-    className: _InputTextModule.default.pressable,
     onPress: function onPress() {
       return setPassword(!password);
     }
   }, /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
-    value: password ? _primitives.ICON.EYE_CLOSE : _primitives.ICON.EYE_OPEN
+    value: password ? _primitives.ICON.EYE_CLOSE : _primitives.ICON.EYE_OPEN,
+    className: _InputTextModule.default.icon
+  })), has.stateIcon && /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
+    value: (0, _helpers.getIconState)({
+      error: error,
+      success: success,
+      warning: warning
+    }),
+    className: (0, _helpers.styles)(_InputTextModule.default.icon, error ? _InputTextModule.default.error : warning ? _InputTextModule.default.warning : success ? _InputTextModule.default.success : undefined)
   }))), hint && /*#__PURE__*/_react.default.createElement(_primitives.Text, {
     small: true,
     className: (0, _helpers.styles)(_InputTextModule.default.text, _InputTextModule.default.hint, disabled && _InputTextModule.default.disabled, error && _InputTextModule.default.error)

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","focus","setFocus","password","setPassword","handleChange","value","event","handleEnter","handleLeave","has","undefined","length","stateIcon","is","style","inputContainer","className","text","withIcon","inputBorder","left","input","iconLeft","right","pressable","ICON","EYE_CLOSE","EYE_OPEN","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 { getIconState, styles } from '../../helpers';\nimport { ICON, Icon, Input, Pressable, Text, View } from '../../primitives';\nimport style from './InputText.module.css';\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 = () => {\n    setFocus(false);\n    onLeave(event);\n  };\n\n  const has = {\n    value: others.value !== undefined && others.value?.length > 0,\n    stateIcon: showState && (error || success || warning),\n  };\n  const is = { password: type === 'password' };\n\n  return (\n    <View className={styles(style.inputContainer, others.className)} style={others.style}>\n      {label && (\n        <Text\n          className={styles(\n            style.text,\n            style.label,\n            disabled && style.disabled,\n            focus && style.focus,\n            error && style.error,\n            icon && style.withIcon,\n            (focus || error || has.value) && style.value,\n          )}\n        >\n          {label}\n        </Text>\n      )}\n\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        {icon && (\n          <Icon\n            value={icon}\n            className={styles(style.icon, style.left, disabled && style.disabled, error && style.error)}\n          />\n        )}\n        <Input\n          {...others}\n          disabled={disabled}\n          type={!is.password || password ? type : 'text'}\n          value={others.value || ''}\n          className={styles(style.input, icon && style.iconLeft)}\n          style={undefined}\n          onChange={handleChange}\n          onEnter={handleEnter}\n          onLeave={handleLeave}\n        />\n\n        {has.stateIcon && (\n          <Icon\n            value={getIconState({ error, success, warning })}\n            className={styles(\n              style.icon,\n              style.right,\n              error ? style.error : warning ? style.warning : success ? style.success : undefined,\n            )}\n          />\n        )}\n        {is.password && !disabled && !has.stateIcon && (\n          <Pressable tabIndex={-1} type=\"button\" className={style.pressable} onPress={() => setPassword(!password)}>\n            <Icon value={password ? ICON.EYE_CLOSE : ICON.EYE_OPEN} />\n          </Pressable>\n        )}\n      </View>\n\n      {hint && (\n        <Text small className={styles(style.text, style.hint, disabled && style.disabled, error && style.error)}>\n          {hint}\n        </Text>\n      )}\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":";;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,IAAMA,SAAS,GAAG,SAAZA,SAAY,OAcZ;EAAA;;EAAA,IAbJC,QAaI,QAbJA,QAaI;EAAA,IAZJC,KAYI,QAZJA,KAYI;EAAA,IAXJC,IAWI,QAXJA,IAWI;EAAA,IAVJC,IAUI,QAVJA,IAUI;EAAA,IATJC,KASI,QATJA,KASI;EAAA,0BARJC,SAQI;EAAA,IARJA,SAQI,+BARQ,IAQR;EAAA,IAPJC,OAOI,QAPJA,OAOI;EAAA,IANJC,IAMI,QANJA,IAMI;EAAA,IALJC,OAKI,QALJA,OAKI;EAAA,yBAJJC,QAII;EAAA,IAJJA,QAII,8BAJO,YAAM,CAAE,CAIf;EAAA,wBAHJC,OAGI;EAAA,IAHJA,OAGI,6BAHM,YAAM,CAAE,CAGd;EAAA,wBAFJC,OAEI;EAAA,IAFJA,OAEI,6BAFM,YAAM,CAAE,CAEd;EAAA,IADDC,MACC;;EACJ,gBAA0B,qBAAS,KAAT,CAA1B;EAAA;EAAA,IAAOC,KAAP;EAAA,IAAcC,QAAd;;EACA,iBAAgC,qBAAS,IAAT,CAAhC;EAAA;EAAA,IAAOC,QAAP;EAAA,IAAiBC,WAAjB;;EAEA,IAAMC,YAAY,GAAG,SAAfA,YAAe,CAACC,KAAD,EAAQC,KAAR,EAAkB;IACrCV,QAAQ,CAACS,KAAD,EAAQC,KAAR,CAAR;EACD,CAFD;;EAIA,IAAMC,WAAW,GAAG,SAAdA,WAAc,CAACD,KAAD,EAAW;IAC7BL,QAAQ,CAAC,IAAD,CAAR;IACAJ,OAAO,CAACS,KAAD,CAAP;EACD,CAHD;;EAKA,IAAME,WAAW,GAAG,SAAdA,WAAc,GAAM;IACxBP,QAAQ,CAAC,KAAD,CAAR;IACAH,OAAO,CAACQ,KAAD,CAAP;EACD,CAHD;;EAKA,IAAMG,GAAG,GAAG;IACVJ,KAAK,EAAEN,MAAM,CAACM,KAAP,KAAiBK,SAAjB,IAA8B,kBAAAX,MAAM,CAACM,KAAP,gEAAcM,MAAd,IAAuB,CADlD;IAEVC,SAAS,EAAEpB,SAAS,KAAKJ,KAAK,IAAIK,OAAT,IAAoBE,OAAzB;EAFV,CAAZ;EAIA,IAAMkB,EAAE,GAAG;IAAEX,QAAQ,EAAER,IAAI,KAAK;EAArB,CAAX;EAEA,oBACE,6BAAC,gBAAD;IAAM,SAAS,EAAE,qBAAOoB,yBAAMC,cAAb,EAA6BhB,MAAM,CAACiB,SAApC,CAAjB;IAAiE,KAAK,EAAEjB,MAAM,CAACe;EAA/E,GACGvB,KAAK,iBACJ,6BAAC,gBAAD;IACE,SAAS,EAAE,qBACTuB,yBAAMG,IADG,EAETH,yBAAMvB,KAFG,EAGTJ,QAAQ,IAAI2B,yBAAM3B,QAHT,EAITa,KAAK,IAAIc,yBAAMd,KAJN,EAKTZ,KAAK,IAAI0B,yBAAM1B,KALN,EAMTE,IAAI,IAAIwB,yBAAMI,QANL,EAOT,CAAClB,KAAK,IAAIZ,KAAT,IAAkBqB,GAAG,CAACJ,KAAvB,KAAiCS,yBAAMT,KAP9B;EADb,GAWGd,KAXH,CAFJ,eAiBE,6BAAC,gBAAD;IACE,GAAG,MADL;IAEE,SAAS,EAAE,qBACTuB,yBAAMK,WADG,EAEThC,QAAQ,IAAI2B,yBAAM3B,QAFT,EAGTC,KAAK,IAAI0B,yBAAM1B,KAHN,EAITY,KAAK,IAAI,CAACZ,KAAV,IAAmB0B,yBAAMd,KAJhB;EAFb,GASGV,IAAI,iBACH,6BAAC,gBAAD;IACE,KAAK,EAAEA,IADT;IAEE,SAAS,EAAE,qBAAOwB,yBAAMxB,IAAb,EAAmBwB,yBAAMM,IAAzB,EAA+BjC,QAAQ,IAAI2B,yBAAM3B,QAAjD,EAA2DC,KAAK,IAAI0B,yBAAM1B,KAA1E;EAFb,EAVJ,eAeE,6BAAC,iBAAD,eACMW,MADN;IAEE,QAAQ,EAAEZ,QAFZ;IAGE,IAAI,EAAE,CAAC0B,EAAE,CAACX,QAAJ,IAAgBA,QAAhB,GAA2BR,IAA3B,GAAkC,MAH1C;IAIE,KAAK,EAAEK,MAAM,CAACM,KAAP,IAAgB,EAJzB;IAKE,SAAS,EAAE,qBAAOS,yBAAMO,KAAb,EAAoB/B,IAAI,IAAIwB,yBAAMQ,QAAlC,CALb;IAME,KAAK,EAAEZ,SANT;IAOE,QAAQ,EAAEN,YAPZ;IAQE,OAAO,EAAEG,WARX;IASE,OAAO,EAAEC;EATX,GAfF,EA2BGC,GAAG,CAACG,SAAJ,iBACC,6BAAC,gBAAD;IACE,KAAK,EAAE,2BAAa;MAAExB,KAAK,EAALA,KAAF;MAASK,OAAO,EAAPA,OAAT;MAAkBE,OAAO,EAAPA;IAAlB,CAAb,CADT;IAEE,SAAS,EAAE,qBACTmB,yBAAMxB,IADG,EAETwB,yBAAMS,KAFG,EAGTnC,KAAK,GAAG0B,yBAAM1B,KAAT,GAAiBO,OAAO,GAAGmB,yBAAMnB,OAAT,GAAmBF,OAAO,GAAGqB,yBAAMrB,OAAT,GAAmBiB,SAHjE;EAFb,EA5BJ,EAqCGG,EAAE,CAACX,QAAH,IAAe,CAACf,QAAhB,IAA4B,CAACsB,GAAG,CAACG,SAAjC,iBACC,6BAAC,qBAAD;IAAW,QAAQ,EAAE,CAAC,CAAtB;IAAyB,IAAI,EAAC,QAA9B;IAAuC,SAAS,EAAEE,yBAAMU,SAAxD;IAAmE,OAAO,EAAE;MAAA,OAAMrB,WAAW,CAAC,CAACD,QAAF,CAAjB;IAAA;EAA5E,gBACE,6BAAC,gBAAD;IAAM,KAAK,EAAEA,QAAQ,GAAGuB,iBAAKC,SAAR,GAAoBD,iBAAKE;EAA9C,EADF,CAtCJ,CAjBF,EA6DGtC,IAAI,iBACH,6BAAC,gBAAD;IAAM,KAAK,MAAX;IAAY,SAAS,EAAE,qBAAOyB,yBAAMG,IAAb,EAAmBH,yBAAMzB,IAAzB,EAA+BF,QAAQ,IAAI2B,yBAAM3B,QAAjD,EAA2DC,KAAK,IAAI0B,yBAAM1B,KAA1E;EAAvB,GACGC,IADH,CA9DJ,CADF;AAqED,CA3GD;;;AA6GAH,SAAS,CAAC0C,WAAV,GAAwB,qBAAxB;AAEA1C,SAAS,CAAC2C,SAAV,GAAsB;EACpB1C,QAAQ,EAAE2C,mBAAUC,IADA;EAEpB3C,KAAK,EAAE0C,mBAAUC,IAFG;EAGpB1C,IAAI,EAAEyC,mBAAUE,MAHI;EAIpB1C,IAAI,EAAEwC,mBAAUG,IAJI;EAKpB1C,KAAK,EAAEuC,mBAAUE,MALG;EAMpBE,SAAS,EAAEJ,mBAAUC,IAND;EAOpBI,IAAI,EAAEL,mBAAUE,MAAV,CAAiBI,UAPH;EAQpB5C,SAAS,EAAEsC,mBAAUC,IARD;EASpBtC,OAAO,EAAEqC,mBAAUC,IATC;EAUpBrC,IAAI,EAAEoC,mBAAUE,MAVI;EAWpBrC,OAAO,EAAEmC,mBAAUC,IAXC;EAYpBnC,QAAQ,EAAEkC,mBAAUG,IAZA;EAapBpC,OAAO,EAAEiC,mBAAUG,IAbC;EAcpBnC,OAAO,EAAEgC,mBAAUG;AAdC,CAAtB"}
+{"version":3,"file":"InputText.js","names":["InputText","disabled","error","hint","icon","label","showState","success","type","warning","onChange","onEnter","onLeave","others","focus","setFocus","password","setPassword","handleChange","value","event","handleEnter","handleLeave","has","undefined","length","stateIcon","is","style","inputContainer","className","text","withIcon","inputBorder","left","input","iconLeft","icons","ICON","EYE_CLOSE","EYE_OPEN","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 { getIconState, styles } from '../../helpers';\nimport { ICON, Icon, Input, Pressable, Text, View } from '../../primitives';\nimport style from './InputText.module.css';\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 = () => {\n    setFocus(false);\n    onLeave(event);\n  };\n\n  const has = {\n    value: others.value !== undefined && others.value?.length > 0,\n    stateIcon: showState && (error || success || warning),\n  };\n  const is = { password: type === 'password' };\n\n  return (\n    <View className={styles(style.inputContainer, others.className)} style={others.style}>\n      {label && (\n        <Text\n          className={styles(\n            style.text,\n            style.label,\n            disabled && style.disabled,\n            focus && style.focus,\n            error && style.error,\n            icon && style.withIcon,\n            (focus || error || has.value) && style.value,\n          )}\n        >\n          {label}\n        </Text>\n      )}\n\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        {icon && (\n          <Icon\n            value={icon}\n            className={styles(style.icon, style.left, disabled && style.disabled, error && style.error)}\n          />\n        )}\n        <Input\n          {...others}\n          disabled={disabled}\n          type={!is.password || password ? type : 'text'}\n          value={others.value || ''}\n          className={styles(style.input, icon && style.iconLeft)}\n          style={undefined}\n          onChange={handleChange}\n          onEnter={handleEnter}\n          onLeave={handleLeave}\n        />\n\n        {((is.password && !disabled) || has.stateIcon) && (\n          <View row className={style.icons}>\n            {is.password && !disabled && (\n              <Pressable tabIndex={-1} type=\"button\" onPress={() => setPassword(!password)}>\n                <Icon value={password ? ICON.EYE_CLOSE : ICON.EYE_OPEN} className={style.icon} />\n              </Pressable>\n            )}\n\n            {has.stateIcon && (\n              <Icon\n                value={getIconState({ error, success, warning })}\n                className={styles(\n                  style.icon,\n                  error ? style.error : warning ? style.warning : success ? style.success : undefined,\n                )}\n              />\n            )}\n          </View>\n        )}\n      </View>\n\n      {hint && (\n        <Text small className={styles(style.text, style.hint, disabled && style.disabled, error && style.error)}>\n          {hint}\n        </Text>\n      )}\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/InputText/InputText.module.css

@@ -23,21 +23,17 @@
 }
 
 .icon {
-  color: var(--mirai-ui-input-disabled);
   font-size: var(--mirai-ui-input-text-icon);
   height: var(--mirai-ui-input-text-icon);
   line-height: var(--mirai-ui-input-text-icon);
-  pointer-events: none;
-  position: absolute;
   width: var(--mirai-ui-input-text-icon);
 }
 
 .icon.left {
+  color: var(--mirai-ui-input-disabled);
   left: var(--mirai-ui-input-text-padding-x);
-}
-
-.icon.right {
-  right: var(--mirai-ui-input-text-padding-x);
+  pointer-events: none;
+  position: absolute;
 }
 
 .input {
@@ -54,20 +50,24 @@
   padding-right: calc(var(--mirai-ui-input-text-padding-x) * 3);
 }
 
-.input.empty:not(:focus),
-.input::placeholder {
+.input.empty:not(:focus) {
   color: var(--mirai-ui-base);
 }
 
 .hint {
-  margin: calc(var(--mirai-ui-input-text-padding-x) / 4) var(--mirai-ui-input-text-padding-x);
+  margin: calc(var(--mirai-ui-input-text-padding-y) / 4) var(--mirai-ui-input-text-padding-x);
 }
 
-.pressable {
+.icons {
   position: absolute;
   right: var(--mirai-ui-input-text-padding-x);
 }
 
+.icons > .icon {
+  margin-left: calc(var(--mirai-ui-input-text-icon) / 2);
+  position: relative;
+}
+
 .label {
   background-color: var(--mirai-ui-input-background);
   font-size: var(--mirai-ui-input-font-size);

package/build/components/InputText/InputText.stories.js

@@ -54,6 +54,7 @@ Story.args = _defineProperty({
   label: 'label',
   multiLine: false,
   name: 'name',
+  placeholder: '',
   showState: true,
   success: false,
   type: 'text',

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

@@ -1 +1 @@
-{"version":3,"file":"InputText.stories.js","names":["title","Story","props","ICON","icon","storyName","args","disabled","error","hint","undefined","label","multiLine","name","showState","success","type","value","warning","onChange","console","log","onEnter","onLeave","argTypes","options","Object","keys","control","defaultValue"],"sources":["../../../src/components/InputText/InputText.stories.jsx"],"sourcesContent":["/* eslint-disable react/prop-types */\nimport * as React from 'react';\n\nimport { ICON } from '../../primitives';\nimport { InputText } from './InputText';\n\nexport default { title: 'Components' };\n\nexport const Story = (props) => <InputText {...props} icon={ICON[props.icon]} />;\n\nStory.storyName = 'InputText';\n\nStory.args = {\n  disabled: false,\n  error: false,\n  hint: 'hint',\n  icon: undefined,\n  label: 'label',\n  multiLine: false,\n  name: 'name',\n  showState: true,\n  success: false,\n  type: 'text',\n  value: 'value',\n  warning: false,\n  onChange: (...props) => console.log('<InputText>::onChange', ...props),\n  onEnter: (...props) => console.log('<InputText>::onEnter', ...props),\n  onLeave: (...props) => console.log('<InputText>::onLeave', ...props),\n  ['data-testid']: 'test-story',\n};\n\nStory.argTypes = {\n  icon: {\n    options: [undefined, ...Object.keys(ICON)],\n    control: { type: 'select' },\n    defaultValue: undefined,\n  },\n  type: {\n    options: ['text', 'password', 'number', 'email', 'date'],\n    control: { type: 'select' },\n    defaultValue: 'text',\n  },\n};\n"],"mappings":";;;;;;;;;AACA;;AAEA;;AACA;;;;;;;;;;;;;;;;;;;;;;eAEe;EAAEA,KAAK,EAAE;AAAT,C;;;AAER,IAAMC,KAAK,GAAG,SAARA,KAAQ,CAACC,KAAD;EAAA,oBAAW,oBAAC,oBAAD,eAAeA,KAAf;IAAsB,IAAI,EAAEC,iBAAKD,KAAK,CAACE,IAAX;EAA5B,GAAX;AAAA,CAAd;;;AAEPH,KAAK,CAACI,SAAN,GAAkB,WAAlB;AAEAJ,KAAK,CAACK,IAAN;EACEC,QAAQ,EAAE,KADZ;EAEEC,KAAK,EAAE,KAFT;EAGEC,IAAI,EAAE,MAHR;EAIEL,IAAI,EAAEM,SAJR;EAKEC,KAAK,EAAE,OALT;EAMEC,SAAS,EAAE,KANb;EAOEC,IAAI,EAAE,MAPR;EAQEC,SAAS,EAAE,IARb;EASEC,OAAO,EAAE,KATX;EAUEC,IAAI,EAAE,MAVR;EAWEC,KAAK,EAAE,OAXT;EAYEC,OAAO,EAAE,KAZX;EAaEC,QAAQ,EAAE;IAAA;;IAAA,kCAAIjB,KAAJ;MAAIA,KAAJ;IAAA;;IAAA,OAAc,YAAAkB,OAAO,EAACC,GAAR,kBAAY,uBAAZ,SAAwCnB,KAAxC,EAAd;EAAA,CAbZ;EAcEoB,OAAO,EAAE;IAAA;;IAAA,mCAAIpB,KAAJ;MAAIA,KAAJ;IAAA;;IAAA,OAAc,aAAAkB,OAAO,EAACC,GAAR,mBAAY,sBAAZ,SAAuCnB,KAAvC,EAAd;EAAA,CAdX;EAeEqB,OAAO,EAAE;IAAA;;IAAA,mCAAIrB,KAAJ;MAAIA,KAAJ;IAAA;;IAAA,OAAc,aAAAkB,OAAO,EAACC,GAAR,mBAAY,sBAAZ,SAAuCnB,KAAvC,EAAd;EAAA;AAfX,GAgBG,aAhBH,EAgBmB,YAhBnB;AAmBAD,KAAK,CAACuB,QAAN,GAAiB;EACfpB,IAAI,EAAE;IACJqB,OAAO,GAAGf,SAAH,4BAAiBgB,MAAM,CAACC,IAAP,CAAYxB,gBAAZ,CAAjB,EADH;IAEJyB,OAAO,EAAE;MAAEZ,IAAI,EAAE;IAAR,CAFL;IAGJa,YAAY,EAAEnB;EAHV,CADS;EAMfM,IAAI,EAAE;IACJS,OAAO,EAAE,CAAC,MAAD,EAAS,UAAT,EAAqB,QAArB,EAA+B,OAA/B,EAAwC,MAAxC,CADL;IAEJG,OAAO,EAAE;MAAEZ,IAAI,EAAE;IAAR,CAFL;IAGJa,YAAY,EAAE;EAHV;AANS,CAAjB"}
+{"version":3,"file":"InputText.stories.js","names":["title","Story","props","ICON","icon","storyName","args","disabled","error","hint","undefined","label","multiLine","name","placeholder","showState","success","type","value","warning","onChange","console","log","onEnter","onLeave","argTypes","options","Object","keys","control","defaultValue"],"sources":["../../../src/components/InputText/InputText.stories.jsx"],"sourcesContent":["/* eslint-disable react/prop-types */\nimport * as React from 'react';\n\nimport { ICON } from '../../primitives';\nimport { InputText } from './InputText';\n\nexport default { title: 'Components' };\n\nexport const Story = (props) => <InputText {...props} icon={ICON[props.icon]} />;\n\nStory.storyName = 'InputText';\n\nStory.args = {\n  disabled: false,\n  error: false,\n  hint: 'hint',\n  icon: undefined,\n  label: 'label',\n  multiLine: false,\n  name: 'name',\n  placeholder: '',\n  showState: true,\n  success: false,\n  type: 'text',\n  value: 'value',\n  warning: false,\n  onChange: (...props) => console.log('<InputText>::onChange', ...props),\n  onEnter: (...props) => console.log('<InputText>::onEnter', ...props),\n  onLeave: (...props) => console.log('<InputText>::onLeave', ...props),\n  ['data-testid']: 'test-story',\n};\n\nStory.argTypes = {\n  icon: {\n    options: [undefined, ...Object.keys(ICON)],\n    control: { type: 'select' },\n    defaultValue: undefined,\n  },\n  type: {\n    options: ['text', 'password', 'number', 'email', 'date'],\n    control: { type: 'select' },\n    defaultValue: 'text',\n  },\n};\n"],"mappings":";;;;;;;;;AACA;;AAEA;;AACA;;;;;;;;;;;;;;;;;;;;;;eAEe;EAAEA,KAAK,EAAE;AAAT,C;;;AAER,IAAMC,KAAK,GAAG,SAARA,KAAQ,CAACC,KAAD;EAAA,oBAAW,oBAAC,oBAAD,eAAeA,KAAf;IAAsB,IAAI,EAAEC,iBAAKD,KAAK,CAACE,IAAX;EAA5B,GAAX;AAAA,CAAd;;;AAEPH,KAAK,CAACI,SAAN,GAAkB,WAAlB;AAEAJ,KAAK,CAACK,IAAN;EACEC,QAAQ,EAAE,KADZ;EAEEC,KAAK,EAAE,KAFT;EAGEC,IAAI,EAAE,MAHR;EAIEL,IAAI,EAAEM,SAJR;EAKEC,KAAK,EAAE,OALT;EAMEC,SAAS,EAAE,KANb;EAOEC,IAAI,EAAE,MAPR;EAQEC,WAAW,EAAE,EARf;EASEC,SAAS,EAAE,IATb;EAUEC,OAAO,EAAE,KAVX;EAWEC,IAAI,EAAE,MAXR;EAYEC,KAAK,EAAE,OAZT;EAaEC,OAAO,EAAE,KAbX;EAcEC,QAAQ,EAAE;IAAA;;IAAA,kCAAIlB,KAAJ;MAAIA,KAAJ;IAAA;;IAAA,OAAc,YAAAmB,OAAO,EAACC,GAAR,kBAAY,uBAAZ,SAAwCpB,KAAxC,EAAd;EAAA,CAdZ;EAeEqB,OAAO,EAAE;IAAA;;IAAA,mCAAIrB,KAAJ;MAAIA,KAAJ;IAAA;;IAAA,OAAc,aAAAmB,OAAO,EAACC,GAAR,mBAAY,sBAAZ,SAAuCpB,KAAvC,EAAd;EAAA,CAfX;EAgBEsB,OAAO,EAAE;IAAA;;IAAA,mCAAItB,KAAJ;MAAIA,KAAJ;IAAA;;IAAA,OAAc,aAAAmB,OAAO,EAACC,GAAR,mBAAY,sBAAZ,SAAuCpB,KAAvC,EAAd;EAAA;AAhBX,GAiBG,aAjBH,EAiBmB,YAjBnB;AAoBAD,KAAK,CAACwB,QAAN,GAAiB;EACfrB,IAAI,EAAE;IACJsB,OAAO,GAAGhB,SAAH,4BAAiBiB,MAAM,CAACC,IAAP,CAAYzB,gBAAZ,CAAjB,EADH;IAEJ0B,OAAO,EAAE;MAAEZ,IAAI,EAAE;IAAR,CAFL;IAGJa,YAAY,EAAEpB;EAHV,CADS;EAMfO,IAAI,EAAE;IACJS,OAAO,EAAE,CAAC,MAAD,EAAS,UAAT,EAAqB,QAArB,EAA+B,OAA/B,EAAwC,MAAxC,CADL;IAEJG,OAAO,EAAE;MAAEZ,IAAI,EAAE;IAAR,CAFL;IAGJa,YAAY,EAAE;EAHV;AANS,CAAjB"}

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

@@ -53,23 +53,31 @@ exports[`component:<InputText> prop:error 1`] = `
         type="text"
         value=""
       />
-      <span
-        class="icon headline-3 icon right error"
+      <div
+        class="view row icons"
       >
-        <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 error"
         >
-          <path
-            d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"
-          />
-        </svg>
-      </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="M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
+            />
+          </svg>
+        </span>
+      </div>
     </div>
   </div>
 </DocumentFragment>
@@ -195,23 +203,31 @@ exports[`component:<InputText> prop:showState (false) 1`] = `
         type="text"
         value=""
       />
-      <span
-        class="icon headline-3 icon right error"
+      <div
+        class="view row icons"
       >
-        <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 error"
         >
-          <path
-            d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"
-          />
-        </svg>
-      </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="M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
+            />
+          </svg>
+        </span>
+      </div>
     </div>
   </div>
 </DocumentFragment>
@@ -231,27 +247,31 @@ exports[`component:<InputText> prop:success 1`] = `
         type="text"
         value=""
       />
-      <span
-        class="icon headline-3 icon right success"
+      <div
+        class="view row icons"
       >
-        <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 success"
         >
-          <path
-            d="M0 0h24v24H0V0z"
-            fill="none"
-          />
-          <path
-            d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm4.59-12.42L10 14.17l-2.59-2.58L6 13l4 4 8-8z"
-          />
-        </svg>
-      </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="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm4.59-12.42L10 14.17l-2.59-2.58L6 13l4 4 8-8z"
+            />
+          </svg>
+        </span>
+      </div>
     </div>
   </div>
 </DocumentFragment>
@@ -271,33 +291,37 @@ exports[`component:<InputText> prop:type 1`] = `
         type="password"
         value=""
       />
-      <button
-        class="pressable pressable"
-        tabindex="-1"
-        type="button"
+      <div
+        class="view row icons"
       >
-        <span
-          class="icon headline-3"
+        <button
+          class="pressable"
+          tabindex="-1"
+          type="button"
         >
-          <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 0h24v24H0V0zm0 0h24v24H0V0zm0 0h24v24H0V0zm0 0h24v24H0V0z"
-              fill="none"
-            />
-            <path
-              d="M12 6a9.77 9.77 0 018.82 5.5 9.647 9.647 0 01-2.41 3.12l1.41 1.41c1.39-1.23 2.49-2.77 3.18-4.53C21.27 7.11 17 4 12 4c-1.27 0-2.49.2-3.64.57l1.65 1.65C10.66 6.09 11.32 6 12 6zm-1.07 1.14L13 9.21c.57.25 1.03.71 1.28 1.28l2.07 2.07c.08-.34.14-.7.14-1.07C16.5 9.01 14.48 7 12 7c-.37 0-.72.05-1.07.14zM2.01 3.87l2.68 2.68A11.738 11.738 0 001 11.5C2.73 15.89 7 19 12 19c1.52 0 2.98-.29 4.32-.82l3.42 3.42 1.41-1.41L3.42 2.45 2.01 3.87zm7.5 7.5l2.61 2.61c-.04.01-.08.02-.12.02a2.5 2.5 0 01-2.5-2.5c0-.05.01-.08.01-.13zm-3.4-3.4l1.75 1.75a4.6 4.6 0 00-.36 1.78 4.507 4.507 0 006.27 4.14l.98.98c-.88.24-1.8.38-2.75.38a9.77 9.77 0 01-8.82-5.5c.7-1.43 1.72-2.61 2.93-3.53z"
-            />
-          </svg>
-        </span>
-      </button>
+            <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 0h24v24H0V0zm0 0h24v24H0V0zm0 0h24v24H0V0zm0 0h24v24H0V0z"
+                fill="none"
+              />
+              <path
+                d="M12 6a9.77 9.77 0 018.82 5.5 9.647 9.647 0 01-2.41 3.12l1.41 1.41c1.39-1.23 2.49-2.77 3.18-4.53C21.27 7.11 17 4 12 4c-1.27 0-2.49.2-3.64.57l1.65 1.65C10.66 6.09 11.32 6 12 6zm-1.07 1.14L13 9.21c.57.25 1.03.71 1.28 1.28l2.07 2.07c.08-.34.14-.7.14-1.07C16.5 9.01 14.48 7 12 7c-.37 0-.72.05-1.07.14zM2.01 3.87l2.68 2.68A11.738 11.738 0 001 11.5C2.73 15.89 7 19 12 19c1.52 0 2.98-.29 4.32-.82l3.42 3.42 1.41-1.41L3.42 2.45 2.01 3.87zm7.5 7.5l2.61 2.61c-.04.01-.08.02-.12.02a2.5 2.5 0 01-2.5-2.5c0-.05.01-.08.01-.13zm-3.4-3.4l1.75 1.75a4.6 4.6 0 00-.36 1.78 4.507 4.507 0 006.27 4.14l.98.98c-.88.24-1.8.38-2.75.38a9.77 9.77 0 01-8.82-5.5c.7-1.43 1.72-2.61 2.93-3.53z"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
     </div>
   </div>
 </DocumentFragment>
@@ -317,23 +341,27 @@ exports[`component:<InputText> prop:warning 1`] = `
         type="text"
         value=""
       />
-      <span
-        class="icon headline-3 icon right warning"
+      <div
+        class="view row icons"
       >
-        <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 warning"
         >
-          <path
-            d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"
-          />
-        </svg>
-      </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="M12 5.99L19.53 19H4.47L12 5.99M12 2L1 21h22L12 2zm1 14h-2v2h2v-2zm0-6h-2v4h2v-4z"
+            />
+          </svg>
+        </span>
+      </div>
     </div>
   </div>
 </DocumentFragment>

package/build/components/Menu/Menu.js

@@ -11,13 +11,17 @@ var _react = _interopRequireDefault(require("react"));
 
 var _helpers = require("../../helpers");
 
+var _hooks = require("../../hooks");
+
 var _primitives = require("../../primitives");
 
+var _Modal = require("../Modal");
+
 var _MenuModule = _interopRequireDefault(require("./Menu.module.css"));
 
 var _Menu = require("./Menu.Option");
 
-var _excluded = ["children", "options", "Template", "visible", "onPress"];
+var _excluded = ["children", "options", "Template", "title", "visible", "onPress"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -33,28 +37,43 @@ var Menu = function Menu(_ref) {
       options = _ref$options === void 0 ? [] : _ref$options,
       _ref$Template = _ref.Template,
       Template = _ref$Template === void 0 ? _Menu.Option : _ref$Template,
+      title = _ref.title,
       visible = _ref.visible,
       _ref$onPress = _ref.onPress,
       _onPress = _ref$onPress === void 0 ? function () {} : _ref$onPress,
       others = _objectWithoutProperties(_ref, _excluded);
 
-  return /*#__PURE__*/_react.default.createElement(_primitives.Layer, _extends({
+  var _useDevice = (0, _hooks.useDevice)(),
+      isDesktop = _useDevice.isDesktop;
+
+  var renderOptions = function renderOptions() {
+    return options.map(function () {
+      var option = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+      var index = arguments.length > 1 ? arguments[1] : undefined;
+      return /*#__PURE__*/_react.default.createElement(Template, _extends({
+        "data-testid": others['data-testid'] ? "".concat(others['data-testid'], "-").concat(index) : undefined
+      }, option, {
+        key: index,
+        onPress: function onPress(event) {
+          return _onPress(option.value, event);
+        }
+      }));
+    });
+  };
+
+  return isDesktop ? /*#__PURE__*/_react.default.createElement(_primitives.Layer, _extends({
     forceRender: false
   }, others, {
-    className: (0, _helpers.styles)(_MenuModule.default.menu, visible && _MenuModule.default.visible, others.className),
+    className: (0, _helpers.styles)(_MenuModule.default.menu, _MenuModule.default.desktop, visible && _MenuModule.default.visible, others.className),
     visible: visible
-  }), children, /*#__PURE__*/_react.default.createElement(_primitives.LayerContent, null, options.map(function () {
-    var option = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    var index = arguments.length > 1 ? arguments[1] : undefined;
-    return /*#__PURE__*/_react.default.createElement(Template, _extends({
-      "data-testid": others['data-testid'] ? "".concat(others['data-testid'], "-").concat(index) : undefined
-    }, option, {
-      key: index,
-      onPress: function onPress(event) {
-        return _onPress(option.value, event);
-      }
-    }));
-  })));
+  }), children, /*#__PURE__*/_react.default.createElement(_primitives.LayerContent, null, renderOptions())) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children, /*#__PURE__*/_react.default.createElement(_Modal.Modal, {
+    title: title,
+    visible: visible,
+    onClose: function onClose(event) {
+      return _onPress(undefined, event);
+    },
+    className: (0, _helpers.styles)(_MenuModule.default.menu, others.className)
+  }, renderOptions()));
 };
 
 exports.Menu = Menu;
@@ -70,7 +89,9 @@ Menu.propTypes = {
     value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])
   })),
   Template: _propTypes.default.node,
+  title: _propTypes.default.string,
   visible: _propTypes.default.bool,
-  onPress: _propTypes.default.func
+  onPress: _propTypes.default.func,
+  onClose: _propTypes.default.func
 };
 //# sourceMappingURL=Menu.js.map

package/build/components/Menu/Menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"Menu.js","names":["Menu","children","options","Template","Option","visible","onPress","others","style","menu","className","map","option","index","undefined","event","value","displayName","propTypes","PropTypes","node","arrayOf","shape","disabled","bool","divider","icon","func","label","string","oneOfType","number"],"sources":["../../../src/components/Menu/Menu.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { Layer, LayerContent } from '../../primitives';\nimport style from './Menu.module.css';\nimport { Option } from './Menu.Option';\n\nconst Menu = ({ children, options = [], Template = Option, visible, onPress = () => {}, ...others }) => {\n  return (\n    <Layer\n      forceRender={false}\n      {...others}\n      className={styles(style.menu, visible && style.visible, others.className)}\n      visible={visible}\n    >\n      {children}\n      <LayerContent>\n        {options.map((option = {}, index) => (\n          <Template\n            data-testid={others['data-testid'] ? `${others['data-testid']}-${index}` : undefined}\n            {...option}\n            key={index}\n            onPress={(event) => onPress(option.value, event)}\n          />\n        ))}\n      </LayerContent>\n    </Layer>\n  );\n};\n\nMenu.displayName = 'Component:Menu';\n\nMenu.propTypes = {\n  children: PropTypes.node,\n  options: PropTypes.arrayOf(\n    PropTypes.shape({\n      children: PropTypes.node,\n      disabled: PropTypes.bool,\n      divider: PropTypes.bool,\n      icon: PropTypes.func,\n      label: PropTypes.string,\n      value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n    }),\n  ),\n  Template: PropTypes.node,\n  visible: PropTypes.bool,\n  onPress: PropTypes.func,\n};\n\nexport { Menu };\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;;;;;;;;;AAEA,IAAMA,IAAI,GAAG,SAAPA,IAAO,OAA2F;EAAA,IAAxFC,QAAwF,QAAxFA,QAAwF;EAAA,wBAA9EC,OAA8E;EAAA,IAA9EA,OAA8E,6BAApE,EAAoE;EAAA,yBAAhEC,QAAgE;EAAA,IAAhEA,QAAgE,8BAArDC,YAAqD;EAAA,IAA7CC,OAA6C,QAA7CA,OAA6C;EAAA,wBAApCC,OAAoC;EAAA,IAApCA,QAAoC,6BAA1B,YAAM,CAAE,CAAkB;EAAA,IAAbC,MAAa;;EACtG,oBACE,6BAAC,iBAAD;IACE,WAAW,EAAE;EADf,GAEMA,MAFN;IAGE,SAAS,EAAE,qBAAOC,oBAAMC,IAAb,EAAmBJ,OAAO,IAAIG,oBAAMH,OAApC,EAA6CE,MAAM,CAACG,SAApD,CAHb;IAIE,OAAO,EAAEL;EAJX,IAMGJ,QANH,eAOE,6BAAC,wBAAD,QACGC,OAAO,CAACS,GAAR,CAAY;IAAA,IAACC,MAAD,uEAAU,EAAV;IAAA,IAAcC,KAAd;IAAA,oBACX,6BAAC,QAAD;MACE,eAAaN,MAAM,CAAC,aAAD,CAAN,aAA2BA,MAAM,CAAC,aAAD,CAAjC,cAAoDM,KAApD,IAA8DC;IAD7E,GAEMF,MAFN;MAGE,GAAG,EAAEC,KAHP;MAIE,OAAO,EAAE,iBAACE,KAAD;QAAA,OAAWT,QAAO,CAACM,MAAM,CAACI,KAAR,EAAeD,KAAf,CAAlB;MAAA;IAJX,GADW;EAAA,CAAZ,CADH,CAPF,CADF;AAoBD,CArBD;;;AAuBAf,IAAI,CAACiB,WAAL,GAAmB,gBAAnB;AAEAjB,IAAI,CAACkB,SAAL,GAAiB;EACfjB,QAAQ,EAAEkB,mBAAUC,IADL;EAEflB,OAAO,EAAEiB,mBAAUE,OAAV,CACPF,mBAAUG,KAAV,CAAgB;IACdrB,QAAQ,EAAEkB,mBAAUC,IADN;IAEdG,QAAQ,EAAEJ,mBAAUK,IAFN;IAGdC,OAAO,EAAEN,mBAAUK,IAHL;IAIdE,IAAI,EAAEP,mBAAUQ,IAJF;IAKdC,KAAK,EAAET,mBAAUU,MALH;IAMdb,KAAK,EAAEG,mBAAUW,SAAV,CAAoB,CAACX,mBAAUU,MAAX,EAAmBV,mBAAUY,MAA7B,CAApB;EANO,CAAhB,CADO,CAFM;EAYf5B,QAAQ,EAAEgB,mBAAUC,IAZL;EAaff,OAAO,EAAEc,mBAAUK,IAbJ;EAcflB,OAAO,EAAEa,mBAAUQ;AAdJ,CAAjB"}
+{"version":3,"file":"Menu.js","names":["Menu","children","options","Template","Option","title","visible","onPress","others","isDesktop","renderOptions","map","option","index","undefined","event","value","style","menu","desktop","className","displayName","propTypes","PropTypes","node","arrayOf","shape","disabled","bool","divider","icon","func","label","string","oneOfType","number","onClose"],"sources":["../../../src/components/Menu/Menu.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { useDevice } from '../../hooks';\nimport { Layer, LayerContent } from '../../primitives';\nimport { Modal } from '../Modal';\nimport style from './Menu.module.css';\nimport { Option } from './Menu.Option';\n\nconst Menu = ({ children, options = [], Template = Option, title, visible, onPress = () => {}, ...others }) => {\n  const { isDesktop } = useDevice();\n\n  const renderOptions = () =>\n    options.map((option = {}, index) => (\n      <Template\n        data-testid={others['data-testid'] ? `${others['data-testid']}-${index}` : undefined}\n        {...option}\n        key={index}\n        onPress={(event) => onPress(option.value, event)}\n      />\n    ));\n\n  return isDesktop ? (\n    <Layer\n      forceRender={false}\n      {...others}\n      className={styles(style.menu, style.desktop, visible && style.visible, others.className)}\n      visible={visible}\n    >\n      {children}\n      <LayerContent>{renderOptions()}</LayerContent>\n    </Layer>\n  ) : (\n    <>\n      {children}\n      <Modal\n        title={title}\n        visible={visible}\n        onClose={(event) => onPress(undefined, event)}\n        className={styles(style.menu, others.className)}\n      >\n        {renderOptions()}\n      </Modal>\n    </>\n  );\n};\n\nMenu.displayName = 'Component:Menu';\n\nMenu.propTypes = {\n  children: PropTypes.node,\n  options: PropTypes.arrayOf(\n    PropTypes.shape({\n      children: PropTypes.node,\n      disabled: PropTypes.bool,\n      divider: PropTypes.bool,\n      icon: PropTypes.func,\n      label: PropTypes.string,\n      value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n    }),\n  ),\n  Template: PropTypes.node,\n  title: PropTypes.string,\n  visible: PropTypes.bool,\n  onPress: PropTypes.func,\n  onClose: PropTypes.func,\n};\n\nexport { Menu };\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;AAEA,IAAMA,IAAI,GAAG,SAAPA,IAAO,OAAkG;EAAA,IAA/FC,QAA+F,QAA/FA,QAA+F;EAAA,wBAArFC,OAAqF;EAAA,IAArFA,OAAqF,6BAA3E,EAA2E;EAAA,yBAAvEC,QAAuE;EAAA,IAAvEA,QAAuE,8BAA5DC,YAA4D;EAAA,IAApDC,KAAoD,QAApDA,KAAoD;EAAA,IAA7CC,OAA6C,QAA7CA,OAA6C;EAAA,wBAApCC,OAAoC;EAAA,IAApCA,QAAoC,6BAA1B,YAAM,CAAE,CAAkB;EAAA,IAAbC,MAAa;;EAC7G,iBAAsB,uBAAtB;EAAA,IAAQC,SAAR,cAAQA,SAAR;;EAEA,IAAMC,aAAa,GAAG,SAAhBA,aAAgB;IAAA,OACpBR,OAAO,CAACS,GAAR,CAAY;MAAA,IAACC,MAAD,uEAAU,EAAV;MAAA,IAAcC,KAAd;MAAA,oBACV,6BAAC,QAAD;QACE,eAAaL,MAAM,CAAC,aAAD,CAAN,aAA2BA,MAAM,CAAC,aAAD,CAAjC,cAAoDK,KAApD,IAA8DC;MAD7E,GAEMF,MAFN;QAGE,GAAG,EAAEC,KAHP;QAIE,OAAO,EAAE,iBAACE,KAAD;UAAA,OAAWR,QAAO,CAACK,MAAM,CAACI,KAAR,EAAeD,KAAf,CAAlB;QAAA;MAJX,GADU;IAAA,CAAZ,CADoB;EAAA,CAAtB;;EAUA,OAAON,SAAS,gBACd,6BAAC,iBAAD;IACE,WAAW,EAAE;EADf,GAEMD,MAFN;IAGE,SAAS,EAAE,qBAAOS,oBAAMC,IAAb,EAAmBD,oBAAME,OAAzB,EAAkCb,OAAO,IAAIW,oBAAMX,OAAnD,EAA4DE,MAAM,CAACY,SAAnE,CAHb;IAIE,OAAO,EAAEd;EAJX,IAMGL,QANH,eAOE,6BAAC,wBAAD,QAAeS,aAAa,EAA5B,CAPF,CADc,gBAWd,4DACGT,QADH,eAEE,6BAAC,YAAD;IACE,KAAK,EAAEI,KADT;IAEE,OAAO,EAAEC,OAFX;IAGE,OAAO,EAAE,iBAACS,KAAD;MAAA,OAAWR,QAAO,CAACO,SAAD,EAAYC,KAAZ,CAAlB;IAAA,CAHX;IAIE,SAAS,EAAE,qBAAOE,oBAAMC,IAAb,EAAmBV,MAAM,CAACY,SAA1B;EAJb,GAMGV,aAAa,EANhB,CAFF,CAXF;AAuBD,CApCD;;;AAsCAV,IAAI,CAACqB,WAAL,GAAmB,gBAAnB;AAEArB,IAAI,CAACsB,SAAL,GAAiB;EACfrB,QAAQ,EAAEsB,mBAAUC,IADL;EAEftB,OAAO,EAAEqB,mBAAUE,OAAV,CACPF,mBAAUG,KAAV,CAAgB;IACdzB,QAAQ,EAAEsB,mBAAUC,IADN;IAEdG,QAAQ,EAAEJ,mBAAUK,IAFN;IAGdC,OAAO,EAAEN,mBAAUK,IAHL;IAIdE,IAAI,EAAEP,mBAAUQ,IAJF;IAKdC,KAAK,EAAET,mBAAUU,MALH;IAMdjB,KAAK,EAAEO,mBAAUW,SAAV,CAAoB,CAACX,mBAAUU,MAAX,EAAmBV,mBAAUY,MAA7B,CAApB;EANO,CAAhB,CADO,CAFM;EAYfhC,QAAQ,EAAEoB,mBAAUC,IAZL;EAafnB,KAAK,EAAEkB,mBAAUU,MAbF;EAcf3B,OAAO,EAAEiB,mBAAUK,IAdJ;EAefrB,OAAO,EAAEgB,mBAAUQ,IAfJ;EAgBfK,OAAO,EAAEb,mBAAUQ;AAhBJ,CAAjB"}

package/build/components/Menu/Menu.module.css

@@ -1,4 +1,7 @@
 .menu {
+}
+
+.menu.desktop {
   background-color: var(--mirai-ui-menu-base);
   border-radius: var(--mirai-ui-menu-border-radius);
   box-shadow: var(--mirai-ui-menu-shadow);

package/build/components/Menu/Menu.stories.js

@@ -68,6 +68,7 @@ Story.args = _defineProperty({
       wide: true
     }, "Logout")
   }],
+  title: 'title',
   visible: true
 }, 'data-testid', 'test-story');
 Story.argTypes = {

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

@@ -1 +1 @@
-{"version":3,"file":"Menu.stories.js","names":["title","Story","props","storyName","args","options","children","divider","label","icon","ICON","ADD","value","disabled","visible","argTypes","onPress","action"],"sources":["../../../src/components/Menu/Menu.stories.jsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Button } from '../';\nimport { ICON, Text } from '../../primitives';\nimport { Menu } from './Menu';\n\nexport default { title: 'Components' };\n\nexport const Story = (props) => (\n  <Menu {...props}>\n    <span className=\"children\">children</span>\n  </Menu>\n);\n\nStory.storyName = 'Menu';\n\nStory.args = {\n  options: [\n    {\n      children: (\n        <>\n          <Text bold>Lorem</Text>\n          <Text>Ipsum is simply dummy text...</Text>\n        </>\n      ),\n      divider: true,\n    },\n    { label: 'Lorem Ipsum is simply dummy text...', divider: true },\n    { icon: ICON.ADD, label: 'Item 1', value: 'one', ['data-testid']: 'custom-test' },\n    { icon: ICON.ADD, label: 'Item 2', disabled: true, value: 'two' },\n    { label: 'Item 3', divider: true, value: 'three' },\n    { label: 'Item 4', children: <Button small>Add</Button>, value: 'four' },\n    {\n      children: (\n        <Button secondary wide>\n          Logout\n        </Button>\n      ),\n    },\n  ],\n  visible: true,\n  ['data-testid']: 'test-story',\n};\n\nStory.argTypes = {\n  onPress: { action: 'onPress' },\n};\n"],"mappings":";;;;;;;;;AAAA;;AAEA;;AACA;;AACA;;;;;;;;eAEe;EAAEA,KAAK,EAAE;AAAT,C;;;AAER,IAAMC,KAAK,GAAG,SAARA,KAAQ,CAACC,KAAD;EAAA,oBACnB,oBAAC,UAAD,EAAUA,KAAV,eACE;IAAM,SAAS,EAAC;EAAhB,cADF,CADmB;AAAA,CAAd;;;AAMPD,KAAK,CAACE,SAAN,GAAkB,MAAlB;AAEAF,KAAK,CAACG,IAAN;EACEC,OAAO,EAAE,CACP;IACEC,QAAQ,eACN,uDACE,oBAAC,gBAAD;MAAM,IAAI;IAAV,WADF,eAEE,oBAAC,gBAAD,wCAFF,CAFJ;IAOEC,OAAO,EAAE;EAPX,CADO,EAUP;IAAEC,KAAK,EAAE,qCAAT;IAAgDD,OAAO,EAAE;EAAzD,CAVO;IAWLE,IAAI,EAAEC,iBAAKC,GAXN;IAWWH,KAAK,EAAE,QAXlB;IAW4BI,KAAK,EAAE;EAXnC,GAW2C,aAX3C,EAW2D,aAX3D,GAYP;IAAEH,IAAI,EAAEC,iBAAKC,GAAb;IAAkBH,KAAK,EAAE,QAAzB;IAAmCK,QAAQ,EAAE,IAA7C;IAAmDD,KAAK,EAAE;EAA1D,CAZO,EAaP;IAAEJ,KAAK,EAAE,QAAT;IAAmBD,OAAO,EAAE,IAA5B;IAAkCK,KAAK,EAAE;EAAzC,CAbO,EAcP;IAAEJ,KAAK,EAAE,QAAT;IAAmBF,QAAQ,eAAE,oBAAC,QAAD;MAAQ,KAAK;IAAb,SAA7B;IAAyDM,KAAK,EAAE;EAAhE,CAdO,EAeP;IACEN,QAAQ,eACN,oBAAC,QAAD;MAAQ,SAAS,MAAjB;MAAkB,IAAI;IAAtB;EAFJ,CAfO,CADX;EAwBEQ,OAAO,EAAE;AAxBX,GAyBG,aAzBH,EAyBmB,YAzBnB;AA4BAb,KAAK,CAACc,QAAN,GAAiB;EACfC,OAAO,EAAE;IAAEC,MAAM,EAAE;EAAV;AADM,CAAjB"}
+{"version":3,"file":"Menu.stories.js","names":["title","Story","props","storyName","args","options","children","divider","label","icon","ICON","ADD","value","disabled","visible","argTypes","onPress","action"],"sources":["../../../src/components/Menu/Menu.stories.jsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Button } from '../';\nimport { ICON, Text } from '../../primitives';\nimport { Menu } from './Menu';\n\nexport default { title: 'Components' };\n\nexport const Story = (props) => (\n  <Menu {...props}>\n    <span className=\"children\">children</span>\n  </Menu>\n);\n\nStory.storyName = 'Menu';\n\nStory.args = {\n  options: [\n    {\n      children: (\n        <>\n          <Text bold>Lorem</Text>\n          <Text>Ipsum is simply dummy text...</Text>\n        </>\n      ),\n      divider: true,\n    },\n    { label: 'Lorem Ipsum is simply dummy text...', divider: true },\n    { icon: ICON.ADD, label: 'Item 1', value: 'one', ['data-testid']: 'custom-test' },\n    { icon: ICON.ADD, label: 'Item 2', disabled: true, value: 'two' },\n    { label: 'Item 3', divider: true, value: 'three' },\n    { label: 'Item 4', children: <Button small>Add</Button>, value: 'four' },\n    {\n      children: (\n        <Button secondary wide>\n          Logout\n        </Button>\n      ),\n    },\n  ],\n  title: 'title',\n  visible: true,\n  ['data-testid']: 'test-story',\n};\n\nStory.argTypes = {\n  onPress: { action: 'onPress' },\n};\n"],"mappings":";;;;;;;;;AAAA;;AAEA;;AACA;;AACA;;;;;;;;eAEe;EAAEA,KAAK,EAAE;AAAT,C;;;AAER,IAAMC,KAAK,GAAG,SAARA,KAAQ,CAACC,KAAD;EAAA,oBACnB,oBAAC,UAAD,EAAUA,KAAV,eACE;IAAM,SAAS,EAAC;EAAhB,cADF,CADmB;AAAA,CAAd;;;AAMPD,KAAK,CAACE,SAAN,GAAkB,MAAlB;AAEAF,KAAK,CAACG,IAAN;EACEC,OAAO,EAAE,CACP;IACEC,QAAQ,eACN,uDACE,oBAAC,gBAAD;MAAM,IAAI;IAAV,WADF,eAEE,oBAAC,gBAAD,wCAFF,CAFJ;IAOEC,OAAO,EAAE;EAPX,CADO,EAUP;IAAEC,KAAK,EAAE,qCAAT;IAAgDD,OAAO,EAAE;EAAzD,CAVO;IAWLE,IAAI,EAAEC,iBAAKC,GAXN;IAWWH,KAAK,EAAE,QAXlB;IAW4BI,KAAK,EAAE;EAXnC,GAW2C,aAX3C,EAW2D,aAX3D,GAYP;IAAEH,IAAI,EAAEC,iBAAKC,GAAb;IAAkBH,KAAK,EAAE,QAAzB;IAAmCK,QAAQ,EAAE,IAA7C;IAAmDD,KAAK,EAAE;EAA1D,CAZO,EAaP;IAAEJ,KAAK,EAAE,QAAT;IAAmBD,OAAO,EAAE,IAA5B;IAAkCK,KAAK,EAAE;EAAzC,CAbO,EAcP;IAAEJ,KAAK,EAAE,QAAT;IAAmBF,QAAQ,eAAE,oBAAC,QAAD;MAAQ,KAAK;IAAb,SAA7B;IAAyDM,KAAK,EAAE;EAAhE,CAdO,EAeP;IACEN,QAAQ,eACN,oBAAC,QAAD;MAAQ,SAAS,MAAjB;MAAkB,IAAI;IAAtB;EAFJ,CAfO,CADX;EAwBEN,KAAK,EAAE,OAxBT;EAyBEc,OAAO,EAAE;AAzBX,GA0BG,aA1BH,EA0BmB,YA1BnB;AA6BAb,KAAK,CAACc,QAAN,GAAiB;EACfC,OAAO,EAAE;IAAEC,MAAM,EAAE;EAAV;AADM,CAAjB"}