@mirai/ui 1.0.78 → 1.0.79

package/README.md

@@ -322,6 +322,7 @@ A hyperlink component that receives the following props:
 
 - `children:node|string`
 - `disabled:boolean` applying 'disabled' attribute
+- `inline:boolean` modifying the button padding size
 - `large:boolean` modifying the button size
 - `small:boolean` modifying the button size
 - `tag:string` html tag of resulting element ('button' by default)
@@ -676,8 +677,9 @@ A modal component receiving the following props:
 - `portal:bool` if you want use _portal feature_ of React API
 - `title:string` shows a title for the modal
 - `visible:boolean` if true modal is shown
-- `onBack:function` executed once back button is clicked
-- `onClose:function` executed once close button is clicked
+- `onBack:function` executed once back button is touched
+- `onClose:function` executed once close button is touched
+- `onOverflow:function` executed once overflow is touched
 
 ```jsx
 import { Modal, View } from '@mirai/ui';

package/build/components/Action/Action.js

@@ -10,7 +10,7 @@ var _react = _interopRequireDefault(require("react"));
 var _helpers = require("../../helpers");
 var _primitives = require("../../primitives");
 var _ActionModule = _interopRequireDefault(require("./Action.module.css"));
-var _excluded = ["children", "disabled", "large", "small", "tag", "wide", "onPress"];
+var _excluded = ["children", "disabled", "inline", "large", "small", "tag", "wide", "onPress"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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; }
@@ -22,6 +22,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 var Action = function Action(_ref) {
   var children = _ref.children,
     disabled = _ref.disabled,
+    inline = _ref.inline,
     large = _ref.large,
     small = _ref.small,
     _ref$tag = _ref.tag,
@@ -32,8 +33,8 @@ var Action = function Action(_ref) {
   return /*#__PURE__*/_react.default.createElement(_primitives.Pressable, _objectSpread(_objectSpread({}, others), {}, {
     disabled: disabled,
     tag: tag,
-    className: (0, _helpers.styles)(_ActionModule.default.action, large && _ActionModule.default.large, small && _ActionModule.default.small, wide && _ActionModule.default.wide, others.className),
-    onPress: !disabled ? onPress : undefined
+    className: (0, _helpers.styles)(_ActionModule.default.action, inline && _ActionModule.default.inline, large && _ActionModule.default.large, small && _ActionModule.default.small, wide && _ActionModule.default.wide, others.className),
+    onPress: onPress
   }), children);
 };
 exports.Action = Action;
@@ -41,6 +42,7 @@ Action.displayName = 'Component:Action';
 Action.propTypes = {
   children: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
   disabled: _propTypes.default.bool,
+  inline: _propTypes.default.bool,
   large: _propTypes.default.bool,
   small: _propTypes.default.bool,
   tag: _propTypes.default.string,

package/build/components/Action/Action.js.map

@@ -1 +1 @@
-{"version":3,"file":"Action.js","names":["Action","children","disabled","large","small","tag","wide","onPress","others","React","createElement","Pressable","className","styles","style","action","undefined","displayName","propTypes","PropTypes","oneOfType","string","node","bool","onEnter","func","onLeave"],"sources":["../../../src/components/Action/Action.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { Pressable } from '../../primitives';\nimport style from './Action.module.css';\n\nconst Action = ({ children, disabled, large, small, tag = 'button', wide, onPress, ...others }) =>\n  React.createElement(\n    Pressable,\n    {\n      ...others,\n      disabled,\n      tag,\n      className: styles(style.action, large && style.large, small && style.small, wide && style.wide, others.className),\n      onPress: !disabled ? onPress : undefined,\n    },\n    children,\n  );\n\nAction.displayName = 'Component:Action';\n\nAction.propTypes = {\n  children: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n  disabled: PropTypes.bool,\n  large: PropTypes.bool,\n  small: PropTypes.bool,\n  tag: PropTypes.string,\n  wide: PropTypes.bool,\n  onEnter: PropTypes.func,\n  onLeave: PropTypes.func,\n  onPress: PropTypes.func,\n};\n\nexport { Action };\n"],"mappings":";;;;;;;AAAA;AACA;AAEA;AACA;AACA;AAAwC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAExC,IAAMA,MAAM,GAAG,SAATA,MAAM;EAAA,IAAMC,QAAQ,QAARA,QAAQ;IAAEC,QAAQ,QAARA,QAAQ;IAAEC,KAAK,QAALA,KAAK;IAAEC,KAAK,QAALA,KAAK;IAAA,gBAAEC,GAAG;IAAHA,GAAG,yBAAG,QAAQ;IAAEC,IAAI,QAAJA,IAAI;IAAEC,OAAO,QAAPA,OAAO;IAAKC,MAAM;EAAA,oBAC1FC,cAAK,CAACC,aAAa,CACjBC,qBAAS,kCAEJH,MAAM;IACTN,QAAQ,EAARA,QAAQ;IACRG,GAAG,EAAHA,GAAG;IACHO,SAAS,EAAE,IAAAC,eAAM,EAACC,qBAAK,CAACC,MAAM,EAAEZ,KAAK,IAAIW,qBAAK,CAACX,KAAK,EAAEC,KAAK,IAAIU,qBAAK,CAACV,KAAK,EAAEE,IAAI,IAAIQ,qBAAK,CAACR,IAAI,EAAEE,MAAM,CAACI,SAAS,CAAC;IACjHL,OAAO,EAAE,CAACL,QAAQ,GAAGK,OAAO,GAAGS;EAAS,IAE1Cf,QAAQ,CACT;AAAA;AAAC;AAEJD,MAAM,CAACiB,WAAW,GAAG,kBAAkB;AAEvCjB,MAAM,CAACkB,SAAS,GAAG;EACjBjB,QAAQ,EAAEkB,kBAAS,CAACC,SAAS,CAAC,CAACD,kBAAS,CAACE,MAAM,EAAEF,kBAAS,CAACG,IAAI,CAAC,CAAC;EACjEpB,QAAQ,EAAEiB,kBAAS,CAACI,IAAI;EACxBpB,KAAK,EAAEgB,kBAAS,CAACI,IAAI;EACrBnB,KAAK,EAAEe,kBAAS,CAACI,IAAI;EACrBlB,GAAG,EAAEc,kBAAS,CAACE,MAAM;EACrBf,IAAI,EAAEa,kBAAS,CAACI,IAAI;EACpBC,OAAO,EAAEL,kBAAS,CAACM,IAAI;EACvBC,OAAO,EAAEP,kBAAS,CAACM,IAAI;EACvBlB,OAAO,EAAEY,kBAAS,CAACM;AACrB,CAAC"}
+{"version":3,"file":"Action.js","names":["Action","children","disabled","inline","large","small","tag","wide","onPress","others","React","createElement","Pressable","className","styles","style","action","displayName","propTypes","PropTypes","oneOfType","string","node","bool","onEnter","func","onLeave"],"sources":["../../../src/components/Action/Action.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { Pressable } from '../../primitives';\nimport style from './Action.module.css';\n\nconst Action = ({ children, disabled, inline, large, small, tag = 'button', wide, onPress, ...others }) =>\n  React.createElement(\n    Pressable,\n    {\n      ...others,\n      disabled,\n      tag,\n      className: styles(\n        style.action,\n        inline && style.inline,\n        large && style.large,\n        small && style.small,\n        wide && style.wide,\n        others.className,\n      ),\n      onPress,\n    },\n    children,\n  );\n\nAction.displayName = 'Component:Action';\n\nAction.propTypes = {\n  children: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n  disabled: PropTypes.bool,\n  inline: PropTypes.bool,\n  large: PropTypes.bool,\n  small: PropTypes.bool,\n  tag: PropTypes.string,\n  wide: PropTypes.bool,\n  onEnter: PropTypes.func,\n  onLeave: PropTypes.func,\n  onPress: PropTypes.func,\n};\n\nexport { Action };\n"],"mappings":";;;;;;;AAAA;AACA;AAEA;AACA;AACA;AAAwC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAExC,IAAMA,MAAM,GAAG,SAATA,MAAM;EAAA,IAAMC,QAAQ,QAARA,QAAQ;IAAEC,QAAQ,QAARA,QAAQ;IAAEC,MAAM,QAANA,MAAM;IAAEC,KAAK,QAALA,KAAK;IAAEC,KAAK,QAALA,KAAK;IAAA,gBAAEC,GAAG;IAAHA,GAAG,yBAAG,QAAQ;IAAEC,IAAI,QAAJA,IAAI;IAAEC,OAAO,QAAPA,OAAO;IAAKC,MAAM;EAAA,oBAClGC,cAAK,CAACC,aAAa,CACjBC,qBAAS,kCAEJH,MAAM;IACTP,QAAQ,EAARA,QAAQ;IACRI,GAAG,EAAHA,GAAG;IACHO,SAAS,EAAE,IAAAC,eAAM,EACfC,qBAAK,CAACC,MAAM,EACZb,MAAM,IAAIY,qBAAK,CAACZ,MAAM,EACtBC,KAAK,IAAIW,qBAAK,CAACX,KAAK,EACpBC,KAAK,IAAIU,qBAAK,CAACV,KAAK,EACpBE,IAAI,IAAIQ,qBAAK,CAACR,IAAI,EAClBE,MAAM,CAACI,SAAS,CACjB;IACDL,OAAO,EAAPA;EAAO,IAETP,QAAQ,CACT;AAAA;AAAC;AAEJD,MAAM,CAACiB,WAAW,GAAG,kBAAkB;AAEvCjB,MAAM,CAACkB,SAAS,GAAG;EACjBjB,QAAQ,EAAEkB,kBAAS,CAACC,SAAS,CAAC,CAACD,kBAAS,CAACE,MAAM,EAAEF,kBAAS,CAACG,IAAI,CAAC,CAAC;EACjEpB,QAAQ,EAAEiB,kBAAS,CAACI,IAAI;EACxBpB,MAAM,EAAEgB,kBAAS,CAACI,IAAI;EACtBnB,KAAK,EAAEe,kBAAS,CAACI,IAAI;EACrBlB,KAAK,EAAEc,kBAAS,CAACI,IAAI;EACrBjB,GAAG,EAAEa,kBAAS,CAACE,MAAM;EACrBd,IAAI,EAAEY,kBAAS,CAACI,IAAI;EACpBC,OAAO,EAAEL,kBAAS,CAACM,IAAI;EACvBC,OAAO,EAAEP,kBAAS,CAACM,IAAI;EACvBjB,OAAO,EAAEW,kBAAS,CAACM;AACrB,CAAC"}

package/build/components/Action/Action.module.css

@@ -6,7 +6,6 @@
   font-size: var(--mirai-ui-font-size-action);
   font-weight: var(--mirai-ui-action-font-weight);
   justify-content: center;
-  padding: var(--mirai-ui-button-padding-y) 0;
   position: relative;
   width: fit-content;
 }
@@ -19,13 +18,23 @@
   color: var(--mirai-ui-action-color-active);
 }
 
+.action:not(.inline):not(.large):not(.small) {
+  padding: var(--mirai-ui-button-padding-y) 0;
+}
+
 .large {
   font-size: var(--mirai-ui-font-size-paragraph);
+}
+
+.large:not(.inline) {
   padding: var(--mirai-ui-button-padding-y) 0;
 }
 
 .small {
   font-size: var(--mirai-ui-font-size-small);
+}
+
+.small:not(.inline) {
   padding: var(--mirai-ui-button-padding-y) 0;
 }
 

package/build/components/Action/Action.stories.js

@@ -24,6 +24,8 @@ Story.storyName = 'Action';
 Story.args = _defineProperty({
   children: 'children',
   disabled: false,
+  href: undefined,
+  inline: false,
   large: false,
   small: false,
   tag: 'button',

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

@@ -1 +1 @@
-{"version":3,"file":"Action.stories.js","names":["title","Story","props","storyName","args","children","disabled","large","small","tag","wide","argTypes","onEnter","action","onLeave","onPress"],"sources":["../../../src/components/Action/Action.stories.jsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Action } from './Action';\n\nexport default { title: 'Components' };\n\nexport const Story = (props) => <Action {...props} />;\n\nStory.storyName = 'Action';\n\nStory.args = {\n  children: 'children',\n  disabled: false,\n  large: false,\n  small: false,\n  tag: 'button',\n  wide: false,\n  ['data-testid']: 'test-story',\n};\n\nStory.argTypes = {\n  onEnter: { action: 'onEnter' },\n  onLeave: { action: 'onLeave' },\n  onPress: { action: 'onPress' },\n};\n"],"mappings":";;;;;;AAAA;AAEA;AAAkC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAEnB;EAAEA,KAAK,EAAE;AAAa,CAAC;AAAA;AAE/B,IAAMC,KAAK,GAAG,SAARA,KAAK,CAAIC,KAAK;EAAA,oBAAK,oBAAC,cAAM,EAAKA,KAAK,CAAI;AAAA;AAAC;AAEtDD,KAAK,CAACE,SAAS,GAAG,QAAQ;AAE1BF,KAAK,CAACG,IAAI;EACRC,QAAQ,EAAE,UAAU;EACpBC,QAAQ,EAAE,KAAK;EACfC,KAAK,EAAE,KAAK;EACZC,KAAK,EAAE,KAAK;EACZC,GAAG,EAAE,QAAQ;EACbC,IAAI,EAAE;AAAK,GACV,aAAa,EAAG,YAAY,CAC9B;AAEDT,KAAK,CAACU,QAAQ,GAAG;EACfC,OAAO,EAAE;IAAEC,MAAM,EAAE;EAAU,CAAC;EAC9BC,OAAO,EAAE;IAAED,MAAM,EAAE;EAAU,CAAC;EAC9BE,OAAO,EAAE;IAAEF,MAAM,EAAE;EAAU;AAC/B,CAAC"}
+{"version":3,"file":"Action.stories.js","names":["title","Story","props","storyName","args","children","disabled","href","undefined","inline","large","small","tag","wide","argTypes","onEnter","action","onLeave","onPress"],"sources":["../../../src/components/Action/Action.stories.jsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Action } from './Action';\n\nexport default { title: 'Components' };\n\nexport const Story = (props) => <Action {...props} />;\n\nStory.storyName = 'Action';\n\nStory.args = {\n  children: 'children',\n  disabled: false,\n  href: undefined,\n  inline: false,\n  large: false,\n  small: false,\n  tag: 'button',\n  wide: false,\n  ['data-testid']: 'test-story',\n};\n\nStory.argTypes = {\n  onEnter: { action: 'onEnter' },\n  onLeave: { action: 'onLeave' },\n  onPress: { action: 'onPress' },\n};\n"],"mappings":";;;;;;AAAA;AAEA;AAAkC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAEnB;EAAEA,KAAK,EAAE;AAAa,CAAC;AAAA;AAE/B,IAAMC,KAAK,GAAG,SAARA,KAAK,CAAIC,KAAK;EAAA,oBAAK,oBAAC,cAAM,EAAKA,KAAK,CAAI;AAAA;AAAC;AAEtDD,KAAK,CAACE,SAAS,GAAG,QAAQ;AAE1BF,KAAK,CAACG,IAAI;EACRC,QAAQ,EAAE,UAAU;EACpBC,QAAQ,EAAE,KAAK;EACfC,IAAI,EAAEC,SAAS;EACfC,MAAM,EAAE,KAAK;EACbC,KAAK,EAAE,KAAK;EACZC,KAAK,EAAE,KAAK;EACZC,GAAG,EAAE,QAAQ;EACbC,IAAI,EAAE;AAAK,GACV,aAAa,EAAG,YAAY,CAC9B;AAEDZ,KAAK,CAACa,QAAQ,GAAG;EACfC,OAAO,EAAE;IAAEC,MAAM,EAAE;EAAU,CAAC;EAC9BC,OAAO,EAAE;IAAED,MAAM,EAAE;EAAU,CAAC;EAC9BE,OAAO,EAAE;IAAEF,MAAM,EAAE;EAAU;AAC/B,CAAC"}

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

@@ -21,6 +21,36 @@ exports[`component:<Action> prop:disabled 1`] = `
 </DocumentFragment>
 `;
 
+exports[`component:<Action> prop:inline & prop:large 1`] = `
+<DocumentFragment>
+  <button
+    class="pressable action inline large"
+  >
+    children
+  </button>
+</DocumentFragment>
+`;
+
+exports[`component:<Action> prop:inline & prop:small 1`] = `
+<DocumentFragment>
+  <button
+    class="pressable action inline small"
+  >
+    children
+  </button>
+</DocumentFragment>
+`;
+
+exports[`component:<Action> prop:inline default 1`] = `
+<DocumentFragment>
+  <button
+    class="pressable action inline"
+  >
+    children
+  </button>
+</DocumentFragment>
+`;
+
 exports[`component:<Action> prop:large 1`] = `
 <DocumentFragment>
   <button

package/build/components/Menu/Menu.js

@@ -31,7 +31,9 @@ var Menu = function Menu(_ref) {
   var _useDevice = (0, _hooks.useDevice)(),
     isDesktop = _useDevice.isDesktop;
   var renderOptions = function renderOptions() {
-    return options.map(function () {
+    return options.filter(function (option) {
+      return !!option;
+    }).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({
@@ -47,7 +49,7 @@ var Menu = function Menu(_ref) {
   return isDesktop ? /*#__PURE__*/_react.default.createElement(_primitives.Layer, _extends({
     forceRender: false
   }, others, {
-    className: (0, _helpers.styles)(_MenuModule.default.menu, _MenuModule.default.desktop, visible && _MenuModule.default.visible, others.className),
+    className: (0, _helpers.styles)(_MenuModule.default.menu, visible && _MenuModule.default.visible, others.className),
     visible: visible
   }), 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,
@@ -55,6 +57,9 @@ var Menu = function Menu(_ref) {
     onClose: function onClose(event) {
       return _onPress(undefined, event);
     },
+    onOverflow: function onOverflow(event) {
+      return _onPress(undefined, event);
+    },
     className: (0, _helpers.styles)(_MenuModule.default.menu, others.className)
   }, renderOptions()));
 };

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

@@ -1 +1 @@
-{"version":3,"file":"Menu.js","names":["Menu","children","options","Template","Option","title","visible","onPress","others","useDevice","isDesktop","renderOptions","map","option","index","undefined","event","value","styles","style","menu","desktop","className","displayName","propTypes","PropTypes","node","arrayOf","shape","disabled","bool","divider","icon","func","label","string","oneOfType","number","any","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.any,\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;AAAuC;AAAA;AAAA;AAAA;AAAA;AAEvC,IAAMA,IAAI,GAAG,SAAPA,IAAI,OAAqG;EAAA,IAA/FC,QAAQ,QAARA,QAAQ;IAAA,oBAAEC,OAAO;IAAPA,OAAO,6BAAG,EAAE;IAAA,qBAAEC,QAAQ;IAARA,QAAQ,8BAAGC,YAAM;IAAEC,KAAK,QAALA,KAAK;IAAEC,OAAO,QAAPA,OAAO;IAAA,oBAAEC,OAAO;IAAPA,QAAO,6BAAG,YAAM,CAAC,CAAC;IAAKC,MAAM;EACtG,iBAAsB,IAAAC,gBAAS,GAAE;IAAzBC,SAAS,cAATA,SAAS;EAEjB,IAAMC,aAAa,GAAG,SAAhBA,aAAa;IAAA,OACjBT,OAAO,CAACU,GAAG,CAAC;MAAA,IAACC,MAAM,uEAAG,CAAC,CAAC;MAAA,IAAEC,KAAK;MAAA,oBAC7B,6BAAC,QAAQ;QACP,eAAaN,MAAM,CAAC,aAAa,CAAC,aAAMA,MAAM,CAAC,aAAa,CAAC,cAAIM,KAAK,IAAKC;MAAU,GACjFF,MAAM;QACV,GAAG,EAAEC,KAAM;QACX,OAAO,EAAE,iBAACE,KAAK;UAAA,OAAKT,QAAO,CAACM,MAAM,CAACI,KAAK,EAAED,KAAK,CAAC;QAAA;MAAC,GACjD;IAAA,CACH,CAAC;EAAA;EAEJ,OAAON,SAAS,gBACd,6BAAC,iBAAK;IACJ,WAAW,EAAE;EAAM,GACfF,MAAM;IACV,SAAS,EAAE,IAAAU,eAAM,EAACC,mBAAK,CAACC,IAAI,EAAED,mBAAK,CAACE,OAAO,EAAEf,OAAO,IAAIa,mBAAK,CAACb,OAAO,EAAEE,MAAM,CAACc,SAAS,CAAE;IACzF,OAAO,EAAEhB;EAAQ,IAEhBL,QAAQ,eACT,6BAAC,wBAAY,QAAEU,aAAa,EAAE,CAAgB,CACxC,gBAER,4DACGV,QAAQ,eACT,6BAAC,YAAK;IACJ,KAAK,EAAEI,KAAM;IACb,OAAO,EAAEC,OAAQ;IACjB,OAAO,EAAE,iBAACU,KAAK;MAAA,OAAKT,QAAO,CAACQ,SAAS,EAAEC,KAAK,CAAC;IAAA,CAAC;IAC9C,SAAS,EAAE,IAAAE,eAAM,EAACC,mBAAK,CAACC,IAAI,EAAEZ,MAAM,CAACc,SAAS;EAAE,GAE/CX,aAAa,EAAE,CACV,CAEX;AACH,CAAC;AAAC;AAEFX,IAAI,CAACuB,WAAW,GAAG,gBAAgB;AAEnCvB,IAAI,CAACwB,SAAS,GAAG;EACfvB,QAAQ,EAAEwB,kBAAS,CAACC,IAAI;EACxBxB,OAAO,EAAEuB,kBAAS,CAACE,OAAO,CACxBF,kBAAS,CAACG,KAAK,CAAC;IACd3B,QAAQ,EAAEwB,kBAAS,CAACC,IAAI;IACxBG,QAAQ,EAAEJ,kBAAS,CAACK,IAAI;IACxBC,OAAO,EAAEN,kBAAS,CAACK,IAAI;IACvBE,IAAI,EAAEP,kBAAS,CAACQ,IAAI;IACpBC,KAAK,EAAET,kBAAS,CAACU,MAAM;IACvBlB,KAAK,EAAEQ,kBAAS,CAACW,SAAS,CAAC,CAACX,kBAAS,CAACU,MAAM,EAAEV,kBAAS,CAACY,MAAM,CAAC;EACjE,CAAC,CAAC,CACH;EACDlC,QAAQ,EAAEsB,kBAAS,CAACa,GAAG;EACvBjC,KAAK,EAAEoB,kBAAS,CAACU,MAAM;EACvB7B,OAAO,EAAEmB,kBAAS,CAACK,IAAI;EACvBvB,OAAO,EAAEkB,kBAAS,CAACQ,IAAI;EACvBM,OAAO,EAAEd,kBAAS,CAACQ;AACrB,CAAC"}
+{"version":3,"file":"Menu.js","names":["Menu","children","options","Template","Option","title","visible","onPress","others","useDevice","isDesktop","renderOptions","filter","option","map","index","undefined","event","value","styles","style","menu","className","displayName","propTypes","PropTypes","node","arrayOf","shape","disabled","bool","divider","icon","func","label","string","oneOfType","number","any","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\n      .filter((option) => !!option)\n      .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, 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        onOverflow={(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.any,\n  title: PropTypes.string,\n  visible: PropTypes.bool,\n  onPress: PropTypes.func,\n  onClose: PropTypes.func,\n};\n\nexport { Menu };\n"],"mappings":"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"}

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

@@ -52,3 +52,20 @@
   color: var(--mirai-ui-menu-option-disabled);
   cursor: default;
 }
+
+/* S */
+@media only screen and (max-width: 430px) {
+  .menu {
+    padding-bottom: var(--mirai-ui-space-XS);
+  }
+}
+
+@media only screen and (min-width: 430px) {
+  .menu {
+    background-color: var(--mirai-ui-menu-base);
+    border-radius: var(--mirai-ui-menu-border-radius);
+    box-shadow: var(--mirai-ui-menu-shadow);
+    min-width: var(--mirai-ui-menu-min-width);
+    overflow: hidden;
+  }
+}

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

@@ -31,10 +31,10 @@ Story.args = _defineProperty({
       bold: true
     }, "Lorem"), /*#__PURE__*/React.createElement(_primitives.Text, null, "Ipsum is simply dummy text...")),
     divider: true
-  }, {
+  }, undefined, {
     label: 'Lorem Ipsum is simply dummy text...',
     divider: true
-  }, _defineProperty({
+  }, undefined, undefined, _defineProperty({
     icon: _primitives.ICON.ADD,
     label: 'Item 1',
     value: 'one'

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  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;AAA8B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAEf;EAAEA,KAAK,EAAE;AAAa,CAAC;AAAA;AAE/B,IAAMC,KAAK,GAAG,SAARA,KAAK,CAAIC,KAAK;EAAA,oBACzB,oBAAC,UAAI,EAAKA,KAAK,eACb;IAAM,SAAS,EAAC;EAAU,cAAgB,CACrC;AAAA,CACR;AAAC;AAEFD,KAAK,CAACE,SAAS,GAAG,MAAM;AAExBF,KAAK,CAACG,IAAI;EACRC,OAAO,EAAE,CACP;IACEC,QAAQ,eACN,uDACE,oBAAC,gBAAI;MAAC,IAAI;IAAA,WAAa,eACvB,oBAAC,gBAAI,wCAAqC,CAE7C;IACDC,OAAO,EAAE;EACX,CAAC,EACD;IAAEC,KAAK,EAAE,qCAAqC;IAAED,OAAO,EAAE;EAAK,CAAC;IAC7DE,IAAI,EAAEC,gBAAI,CAACC,GAAG;IAAEH,KAAK,EAAE,QAAQ;IAAEI,KAAK,EAAE;EAAK,GAAG,aAAa,EAAG,aAAa,GAC/E;IAAEH,IAAI,EAAEC,gBAAI,CAACC,GAAG;IAAEH,KAAK,EAAE,QAAQ;IAAEK,QAAQ,EAAE,IAAI;IAAED,KAAK,EAAE;EAAM,CAAC,EACjE;IAAEJ,KAAK,EAAE,QAAQ;IAAED,OAAO,EAAE,IAAI;IAAEK,KAAK,EAAE;EAAQ,CAAC,EAClD;IAAEJ,KAAK,EAAE,QAAQ;IAAEF,QAAQ,eAAE,oBAAC,QAAM;MAAC,KAAK;IAAA,SAAa;IAAEM,KAAK,EAAE;EAAO,CAAC,EACxE;IACEN,QAAQ,eACN,oBAAC,QAAM;MAAC,SAAS;MAAC,IAAI;IAAA;EAI1B,CAAC,CACF;EACDN,KAAK,EAAE,OAAO;EACdc,OAAO,EAAE;AAAI,GACZ,aAAa,EAAG,YAAY,CAC9B;AAEDb,KAAK,CAACc,QAAQ,GAAG;EACfC,OAAO,EAAE;IAAEC,MAAM,EAAE;EAAU;AAC/B,CAAC"}
+{"version":3,"file":"Menu.stories.js","names":["title","Story","props","storyName","args","options","children","divider","undefined","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    undefined,\n    { label: 'Lorem Ipsum is simply dummy text...', divider: true },\n    undefined,\n    undefined,\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;AAA8B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAEf;EAAEA,KAAK,EAAE;AAAa,CAAC;AAAA;AAE/B,IAAMC,KAAK,GAAG,SAARA,KAAK,CAAIC,KAAK;EAAA,oBACzB,oBAAC,UAAI,EAAKA,KAAK,eACb;IAAM,SAAS,EAAC;EAAU,cAAgB,CACrC;AAAA,CACR;AAAC;AAEFD,KAAK,CAACE,SAAS,GAAG,MAAM;AAExBF,KAAK,CAACG,IAAI;EACRC,OAAO,EAAE,CACP;IACEC,QAAQ,eACN,uDACE,oBAAC,gBAAI;MAAC,IAAI;IAAA,WAAa,eACvB,oBAAC,gBAAI,wCAAqC,CAE7C;IACDC,OAAO,EAAE;EACX,CAAC,EACDC,SAAS,EACT;IAAEC,KAAK,EAAE,qCAAqC;IAAEF,OAAO,EAAE;EAAK,CAAC,EAC/DC,SAAS,EACTA,SAAS;IACPE,IAAI,EAAEC,gBAAI,CAACC,GAAG;IAAEH,KAAK,EAAE,QAAQ;IAAEI,KAAK,EAAE;EAAK,GAAG,aAAa,EAAG,aAAa,GAC/E;IAAEH,IAAI,EAAEC,gBAAI,CAACC,GAAG;IAAEH,KAAK,EAAE,QAAQ;IAAEK,QAAQ,EAAE,IAAI;IAAED,KAAK,EAAE;EAAM,CAAC,EACjE;IAAEJ,KAAK,EAAE,QAAQ;IAAEF,OAAO,EAAE,IAAI;IAAEM,KAAK,EAAE;EAAQ,CAAC,EAClD;IAAEJ,KAAK,EAAE,QAAQ;IAAEH,QAAQ,eAAE,oBAAC,QAAM;MAAC,KAAK;IAAA,SAAa;IAAEO,KAAK,EAAE;EAAO,CAAC,EACxE;IACEP,QAAQ,eACN,oBAAC,QAAM;MAAC,SAAS;MAAC,IAAI;IAAA;EAI1B,CAAC,CACF;EACDN,KAAK,EAAE,OAAO;EACde,OAAO,EAAE;AAAI,GACZ,aAAa,EAAG,YAAY,CAC9B;AAEDd,KAAK,CAACe,QAAQ,GAAG;EACfC,OAAO,EAAE;IAAEC,MAAM,EAAE;EAAU;AAC/B,CAAC"}

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

@@ -40,7 +40,7 @@ exports[`component:<Menu> prop:options & visible 1`] = `
     </button>
   </span>
   <div
-    class="layer menu desktop visible"
+    class="layer menu visible"
     style="left: 0px; top: 0px;"
   >
     <div
@@ -171,7 +171,7 @@ exports[`component:<Menu> prop:title 1`] = `
     </button>
   </span>
   <div
-    class="layer menu desktop visible"
+    class="layer menu visible"
     style="left: 0px; top: 0px;"
   />
 </DocumentFragment>

package/build/components/Modal/Modal.js

@@ -12,11 +12,17 @@ var _helpers = require("../../helpers");
 var _hooks = require("../../hooks");
 var _primitives = require("../../primitives");
 var _ModalModule = _interopRequireDefault(require("./Modal.module.css"));
-var _excluded = ["blur", "children", "fit", "overflow", "portal", "title", "visible", "onBack", "onClose"];
+var _excluded = ["blur", "children", "fit", "overflow", "portal", "title", "visible", "onBack", "onClose", "onOverflow"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 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 _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); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0) { ; } } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 var Modal = function Modal(_ref) {
@@ -33,19 +39,35 @@ var Modal = function Modal(_ref) {
     visible = _ref.visible,
     onBack = _ref.onBack,
     onClose = _ref.onClose,
+    onOverflow = _ref.onOverflow,
     others = _objectWithoutProperties(_ref, _excluded);
   var _useDevice = (0, _hooks.useDevice)(),
     isDesktop = _useDevice.isDesktop;
+  var _useState = (0, _react.useState)(),
+    _useState2 = _slicedToArray(_useState, 2),
+    dataset = _useState2[0],
+    setDataset = _useState2[1];
   (0, _react.useEffect)(function () {
-    document.body.style.overflow = visible ? 'hidden' : 'inherit';
-  }, [visible]);
+    if (visible && !dataset) {
+      setDataset(true);
+      document.body.dataset.miraiModal = true;
+    }
+    return function () {
+      if (visible && dataset) {
+        setDataset(undefined);
+        delete document.body.dataset.miraiModal;
+      }
+    };
+  }, [dataset, visible]);
   var renderer = _helpers.IS_JEST || !portal ? function (jsx) {
     return jsx;
   } : _reactDom.default.createPortal;
   var testId = others['data-testid'];
-  return renderer( /*#__PURE__*/_react.default.createElement(_primitives.View, {
-    row: true,
-    className: (0, _helpers.styles)(_ModalModule.default.container, overflow && _ModalModule.default.overflow, overflow && blur && _ModalModule.default.blur, visible && _ModalModule.default.visible)
+  return renderer( /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
+    className: (0, _helpers.styles)(_ModalModule.default.container, overflow && _ModalModule.default.overflow, overflow && blur && _ModalModule.default.blur, visible && _ModalModule.default.visible),
+    preventDefault: true,
+    onPress: visible && overflow ? onOverflow : undefined,
+    "data-testid": testId ? "".concat(testId, "-overflow") : undefined
   }, /*#__PURE__*/_react.default.createElement(_primitives.View, _extends({}, others, {
     fit: true,
     className: (0, _helpers.styles)(_ModalModule.default.modal, !fit && _ModalModule.default.calcWidth, visible && _ModalModule.default.visible, others.className)
@@ -53,6 +75,7 @@ var Modal = function Modal(_ref) {
     row: true,
     className: _ModalModule.default.header
   }, onBack && /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
+    preventDefault: true,
     onPress: onBack,
     "data-testid": testId ? "".concat(testId, "-button-back") : undefined
   }, /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
@@ -62,6 +85,7 @@ var Modal = function Modal(_ref) {
     headline: true,
     className: (0, _helpers.styles)(_ModalModule.default.title, !onBack && _ModalModule.default.left, !onClose && _ModalModule.default.right)
   }, title), onClose && /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
+    preventDefault: true,
     onPress: onClose,
     "data-testid": testId ? "".concat(testId, "-button-close") : undefined
   }, /*#__PURE__*/_react.default.createElement(_primitives.Icon, {

package/build/components/Modal/Modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","names":["Modal","blur","children","fit","overflow","portal","title","visible","onBack","onClose","others","useDevice","isDesktop","useEffect","document","body","style","renderer","IS_JEST","jsx","ReactDOM","createPortal","testId","styles","container","modal","calcWidth","className","header","undefined","ICON","LEFT","icon","left","right","CLOSE","EXPAND_MORE","propTypes","PropTypes","bool","node","string","func"],"sources":["../../../src/components/Modal/Modal.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useEffect } from 'react';\nimport ReactDOM from 'react-dom';\n\nimport { IS_JEST, styles } from '../../helpers';\nimport { useDevice } from '../../hooks';\nimport { Icon, ICON, Pressable, Text, View } from '../../primitives';\nimport style from './Modal.module.css';\n\nconst Modal = ({\n  blur = false,\n  children,\n  fit = false,\n  overflow = true,\n  portal = false,\n  title,\n  visible,\n  onBack,\n  onClose,\n  ...others\n}) => {\n  const { isDesktop } = useDevice();\n\n  useEffect(() => {\n    document.body.style.overflow = visible ? 'hidden' : 'inherit';\n  }, [visible]);\n\n  const renderer = IS_JEST || !portal ? (jsx) => jsx : ReactDOM.createPortal;\n\n  const { ['data-testid']: testId } = others;\n\n  return renderer(\n    <View\n      row\n      className={styles(\n        style.container,\n        overflow && style.overflow,\n        overflow && blur && style.blur,\n        visible && style.visible,\n      )}\n    >\n      <View\n        {...others}\n        fit\n        className={styles(style.modal, !fit && style.calcWidth, visible && style.visible, others.className)}\n      >\n        {(title || onBack || onClose) && (\n          <View row className={style.header}>\n            {onBack && (\n              <Pressable onPress={onBack} data-testid={testId ? `${testId}-button-back` : undefined}>\n                <Icon value={ICON.LEFT} className={style.icon} />\n              </Pressable>\n            )}\n            {title && (\n              <Text headline className={styles(style.title, !onBack && style.left, !onClose && style.right)}>\n                {title}\n              </Text>\n            )}\n            {onClose && (\n              <Pressable onPress={onClose} data-testid={testId ? `${testId}-button-close` : undefined}>\n                <Icon value={isDesktop || title !== undefined ? ICON.CLOSE : ICON.EXPAND_MORE} className={style.icon} />\n              </Pressable>\n            )}\n          </View>\n        )}\n        {children}\n      </View>\n    </View>,\n    document.body,\n  );\n};\n\nModal.propTypes = {\n  blur: PropTypes.bool,\n  children: PropTypes.node,\n  fit: PropTypes.bool,\n  overflow: PropTypes.bool,\n  portal: PropTypes.bool,\n  title: PropTypes.string,\n  visible: PropTypes.bool,\n  onBack: PropTypes.func,\n  onClose: PropTypes.func,\n};\n\nexport { Modal };\n"],"mappings":"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"}
+{"version":3,"file":"Modal.js","names":["Modal","blur","children","fit","overflow","portal","title","visible","onBack","onClose","onOverflow","others","useDevice","isDesktop","useState","dataset","setDataset","useEffect","document","body","miraiModal","undefined","renderer","IS_JEST","jsx","ReactDOM","createPortal","testId","styles","style","container","modal","calcWidth","className","header","ICON","LEFT","icon","left","right","CLOSE","EXPAND_MORE","propTypes","PropTypes","bool","node","string","func"],"sources":["../../../src/components/Modal/Modal.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useEffect, useState } from 'react';\nimport ReactDOM from 'react-dom';\n\nimport { IS_JEST, styles } from '../../helpers';\nimport { useDevice } from '../../hooks';\nimport { Icon, ICON, Pressable, Text, View } from '../../primitives';\nimport style from './Modal.module.css';\n\nconst Modal = ({\n  blur = false,\n  children,\n  fit = false,\n  overflow = true,\n  portal = false,\n  title,\n  visible,\n  onBack,\n  onClose,\n  onOverflow,\n  ...others\n}) => {\n  const { isDesktop } = useDevice();\n\n  const [dataset, setDataset] = useState();\n\n  useEffect(() => {\n    if (visible && !dataset) {\n      setDataset(true);\n      document.body.dataset.miraiModal = true;\n    }\n\n    return () => {\n      if (visible && dataset) {\n        setDataset(undefined);\n        delete document.body.dataset.miraiModal;\n      }\n    };\n  }, [dataset, visible]);\n\n  const renderer = IS_JEST || !portal ? (jsx) => jsx : ReactDOM.createPortal;\n\n  const { ['data-testid']: testId } = others;\n\n  return renderer(\n    <Pressable\n      className={styles(\n        style.container,\n        overflow && style.overflow,\n        overflow && blur && style.blur,\n        visible && style.visible,\n      )}\n      preventDefault\n      onPress={visible && overflow ? onOverflow : undefined}\n      data-testid={testId ? `${testId}-overflow` : undefined}\n    >\n      <View\n        {...others}\n        fit\n        className={styles(style.modal, !fit && style.calcWidth, visible && style.visible, others.className)}\n      >\n        {(title || onBack || onClose) && (\n          <View row className={style.header}>\n            {onBack && (\n              <Pressable preventDefault onPress={onBack} data-testid={testId ? `${testId}-button-back` : undefined}>\n                <Icon value={ICON.LEFT} className={style.icon} />\n              </Pressable>\n            )}\n            {title && (\n              <Text headline className={styles(style.title, !onBack && style.left, !onClose && style.right)}>\n                {title}\n              </Text>\n            )}\n            {onClose && (\n              <Pressable preventDefault onPress={onClose} data-testid={testId ? `${testId}-button-close` : undefined}>\n                <Icon value={isDesktop || title !== undefined ? ICON.CLOSE : ICON.EXPAND_MORE} className={style.icon} />\n              </Pressable>\n            )}\n          </View>\n        )}\n        {children}\n      </View>\n    </Pressable>,\n    document.body,\n  );\n};\n\nModal.propTypes = {\n  blur: PropTypes.bool,\n  children: PropTypes.node,\n  fit: PropTypes.bool,\n  overflow: PropTypes.bool,\n  portal: PropTypes.bool,\n  title: PropTypes.string,\n  visible: PropTypes.bool,\n  onBack: PropTypes.func,\n  onClose: PropTypes.func,\n};\n\nexport { Modal };\n"],"mappings":"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"}

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

@@ -1,4 +1,9 @@
+[data-mirai-modal] {
+  overflow: hidden;
+}
+
 .container {
+  display: flex;
   height: 100vh;
   justify-content: center;
   left: 0;

package/build/components/Modal/Modal.stories.js

@@ -37,6 +37,9 @@ Story.argTypes = {
   },
   onClose: {
     action: 'onClose'
+  },
+  onOverflow: {
+    action: 'onOverflow'
   }
 };
 //# sourceMappingURL=Modal.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Modal.stories.js","names":["title","Story","props","storyName","args","blur","fit","overflow","portal","visible","argTypes","onBack","action","onClose"],"sources":["../../../src/components/Modal/Modal.stories.jsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Modal } from './Modal';\n\nexport default { title: 'Components' };\n\nexport const Story = (props) => (\n  <Modal {...props}>\n    <span className=\"children\">children</span>\n  </Modal>\n);\n\nStory.storyName = 'Modal';\n\nStory.args = {\n  blur: false,\n  fit: false,\n  overflow: true,\n  portal: false,\n  title: 'title',\n  visible: true,\n  ['data-testid']: 'test-story',\n};\n\nStory.argTypes = {\n  onBack: { action: 'onBack' },\n  onClose: { action: 'onClose' },\n};\n"],"mappings":";;;;;;AAAA;AAEA;AAAgC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAEjB;EAAEA,KAAK,EAAE;AAAa,CAAC;AAAA;AAE/B,IAAMC,KAAK,GAAG,SAARA,KAAK,CAAIC,KAAK;EAAA,oBACzB,oBAAC,YAAK,EAAKA,KAAK,eACd;IAAM,SAAS,EAAC;EAAU,cAAgB,CACpC;AAAA,CACT;AAAC;AAEFD,KAAK,CAACE,SAAS,GAAG,OAAO;AAEzBF,KAAK,CAACG,IAAI;EACRC,IAAI,EAAE,KAAK;EACXC,GAAG,EAAE,KAAK;EACVC,QAAQ,EAAE,IAAI;EACdC,MAAM,EAAE,KAAK;EACbR,KAAK,EAAE,OAAO;EACdS,OAAO,EAAE;AAAI,GACZ,aAAa,EAAG,YAAY,CAC9B;AAEDR,KAAK,CAACS,QAAQ,GAAG;EACfC,MAAM,EAAE;IAAEC,MAAM,EAAE;EAAS,CAAC;EAC5BC,OAAO,EAAE;IAAED,MAAM,EAAE;EAAU;AAC/B,CAAC"}
+{"version":3,"file":"Modal.stories.js","names":["title","Story","props","storyName","args","blur","fit","overflow","portal","visible","argTypes","onBack","action","onClose","onOverflow"],"sources":["../../../src/components/Modal/Modal.stories.jsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Modal } from './Modal';\n\nexport default { title: 'Components' };\n\nexport const Story = (props) => (\n  <Modal {...props}>\n    <span className=\"children\">children</span>\n  </Modal>\n);\n\nStory.storyName = 'Modal';\n\nStory.args = {\n  blur: false,\n  fit: false,\n  overflow: true,\n  portal: false,\n  title: 'title',\n  visible: true,\n  ['data-testid']: 'test-story',\n};\n\nStory.argTypes = {\n  onBack: { action: 'onBack' },\n  onClose: { action: 'onClose' },\n  onOverflow: { action: 'onOverflow' },\n};\n"],"mappings":";;;;;;AAAA;AAEA;AAAgC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAEjB;EAAEA,KAAK,EAAE;AAAa,CAAC;AAAA;AAE/B,IAAMC,KAAK,GAAG,SAARA,KAAK,CAAIC,KAAK;EAAA,oBACzB,oBAAC,YAAK,EAAKA,KAAK,eACd;IAAM,SAAS,EAAC;EAAU,cAAgB,CACpC;AAAA,CACT;AAAC;AAEFD,KAAK,CAACE,SAAS,GAAG,OAAO;AAEzBF,KAAK,CAACG,IAAI;EACRC,IAAI,EAAE,KAAK;EACXC,GAAG,EAAE,KAAK;EACVC,QAAQ,EAAE,IAAI;EACdC,MAAM,EAAE,KAAK;EACbR,KAAK,EAAE,OAAO;EACdS,OAAO,EAAE;AAAI,GACZ,aAAa,EAAG,YAAY,CAC9B;AAEDR,KAAK,CAACS,QAAQ,GAAG;EACfC,MAAM,EAAE;IAAEC,MAAM,EAAE;EAAS,CAAC;EAC5BC,OAAO,EAAE;IAAED,MAAM,EAAE;EAAU,CAAC;EAC9BE,UAAU,EAAE;IAAEF,MAAM,EAAE;EAAa;AACrC,CAAC"}

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

@@ -2,8 +2,9 @@
 
 exports[`component:<Modal> Mobile environment prop:onClose 1`] = `
 <DocumentFragment>
-  <div
-    class="view row container overflow visible"
+  <button
+    class="pressable container overflow visible"
+    data-testid="mirai-onClose-overflow"
   >
     <div
       class="view fit modal calcWidth visible"
@@ -11,68 +12,67 @@ exports[`component:<Modal> Mobile environment prop:onClose 1`] = `
     >
       <div
         class="view row header"
-      >
-        <button
-          class="pressable"
-          data-testid="mirai-onClose-button-close"
-        >
-          <span
-            class="icon headline-3 icon"
-          >
-            <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="M24 24H0V0h24v24z"
-                fill="none"
-                opacity=".87"
-              />
-              <path
-                d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
-              />
-            </svg>
-          </span>
-        </button>
-      </div>
+      />
     </div>
-  </div>
+  </button>
+  <button
+    class="pressable"
+    data-testid="mirai-onClose-button-close"
+  >
+    <span
+      class="icon headline-3 icon"
+    >
+      <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="M24 24H0V0h24v24z"
+          fill="none"
+          opacity=".87"
+        />
+        <path
+          d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
+        />
+      </svg>
+    </span>
+  </button>
 </DocumentFragment>
 `;
 
 exports[`component:<Modal> Mobile environment prop:visible 1`] = `
 <DocumentFragment>
-  <div
-    class="view row container overflow visible"
+  <button
+    class="pressable container overflow visible"
   >
     <div
       class="view fit modal calcWidth visible"
     />
-  </div>
+  </button>
 </DocumentFragment>
 `;
 
 exports[`component:<Modal> inherit:className 1`] = `
 <DocumentFragment>
-  <div
-    class="view row container overflow"
+  <button
+    class="pressable container overflow"
   >
     <div
       class="view fit modal calcWidth mirai"
     />
-  </div>
+  </button>
 </DocumentFragment>
 `;
 
 exports[`component:<Modal> prop:children 1`] = `
 <DocumentFragment>
-  <div
-    class="view row container overflow"
+  <button
+    class="pressable container overflow"
   >
     <div
       class="view fit modal calcWidth"
@@ -81,26 +81,27 @@ exports[`component:<Modal> prop:children 1`] = `
         children
       </span>
     </div>
-  </div>
+  </button>
 </DocumentFragment>
 `;
 
 exports[`component:<Modal> prop:fit 1`] = `
 <DocumentFragment>
-  <div
-    class="view row container overflow"
+  <button
+    class="pressable container overflow"
   >
     <div
       class="view fit modal"
     />
-  </div>
+  </button>
 </DocumentFragment>
 `;
 
 exports[`component:<Modal> prop:onBack 1`] = `
 <DocumentFragment>
-  <div
-    class="view row container overflow visible"
+  <button
+    class="pressable container overflow visible"
+    data-testid="mirai-onBack-overflow"
   >
     <div
       class="view fit modal calcWidth visible"
@@ -108,43 +109,43 @@ exports[`component:<Modal> prop:onBack 1`] = `
     >
       <div
         class="view row header"
-      >
-        <button
-          class="pressable"
-          data-testid="mirai-onBack-button-back"
-        >
-          <span
-            class="icon headline-3 icon"
-          >
-            <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="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
-              />
-            </svg>
-          </span>
-        </button>
-      </div>
+      />
     </div>
-  </div>
+  </button>
+  <button
+    class="pressable"
+    data-testid="mirai-onBack-button-back"
+  >
+    <span
+      class="icon headline-3 icon"
+    >
+      <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="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
+        />
+      </svg>
+    </span>
+  </button>
 </DocumentFragment>
 `;
 
 exports[`component:<Modal> prop:onClose 1`] = `
 <DocumentFragment>
-  <div
-    class="view row container overflow visible"
+  <button
+    class="pressable container overflow visible"
+    data-testid="mirai-onClose-overflow"
   >
     <div
       class="view fit modal calcWidth visible"
@@ -152,56 +153,69 @@ exports[`component:<Modal> prop:onClose 1`] = `
     >
       <div
         class="view row header"
-      >
-        <button
-          class="pressable"
-          data-testid="mirai-onClose-button-close"
-        >
-          <span
-            class="icon headline-3 icon"
-          >
-            <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="M24 24H0V0h24v24z"
-                fill="none"
-                opacity=".87"
-              />
-              <path
-                d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
-              />
-            </svg>
-          </span>
-        </button>
-      </div>
+      />
     </div>
-  </div>
+  </button>
+  <button
+    class="pressable"
+    data-testid="mirai-onClose-button-close"
+  >
+    <span
+      class="icon headline-3 icon"
+    >
+      <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="M24 24H0V0h24v24z"
+          fill="none"
+          opacity=".87"
+        />
+        <path
+          d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
+        />
+      </svg>
+    </span>
+  </button>
+</DocumentFragment>
+`;
+
+exports[`component:<Modal> prop:onOverflow 1`] = `
+<DocumentFragment>
+  <button
+    class="pressable container overflow visible"
+    data-testid="mirai-onOverflow-overflow"
+  >
+    <div
+      class="view fit modal calcWidth visible"
+      data-testid="mirai-onOverflow"
+    />
+  </button>
 </DocumentFragment>
 `;
 
 exports[`component:<Modal> prop:portal 1`] = `
 <DocumentFragment>
-  <div
-    class="view row container overflow"
+  <button
+    class="pressable container overflow"
   >
     <div
       class="view fit modal calcWidth"
     />
-  </div>
+  </button>
 </DocumentFragment>
 `;
 
 exports[`component:<Modal> prop:title 1`] = `
 <DocumentFragment>
-  <div
-    class="view row container overflow"
+  <button
+    class="pressable container overflow"
   >
     <div
       class="view fit modal calcWidth"
@@ -216,67 +230,68 @@ exports[`component:<Modal> prop:title 1`] = `
         </h3>
       </div>
     </div>
-  </div>
+  </button>
 </DocumentFragment>
 `;
 
 exports[`component:<Modal> prop:visible & prop:blur 1`] = `
 <DocumentFragment>
-  <div
-    class="view row container overflow blur visible"
+  <button
+    class="pressable container overflow blur visible"
   >
     <div
       class="view fit modal calcWidth visible"
     />
-  </div>
+  </button>
 </DocumentFragment>
 `;
 
 exports[`component:<Modal> prop:visible & prop:overflow (false) 1`] = `
 <DocumentFragment>
-  <div
-    class="view row container visible"
+  <button
+    class="pressable container visible"
   >
     <div
       class="view fit modal calcWidth visible"
     />
-  </div>
+  </button>
 </DocumentFragment>
 `;
 
 exports[`component:<Modal> prop:visible renders 1`] = `
 <DocumentFragment>
-  <div
-    class="view row container overflow visible"
+  <button
+    class="pressable container overflow visible"
   >
     <div
       class="view fit modal calcWidth visible"
     />
-  </div>
+  </button>
 </DocumentFragment>
 `;
 
 exports[`component:<Modal> renders 1`] = `
 <DocumentFragment>
-  <div
-    class="view row container overflow"
+  <button
+    class="pressable container overflow"
   >
     <div
       class="view fit modal calcWidth"
     />
-  </div>
+  </button>
 </DocumentFragment>
 `;
 
 exports[`component:<Modal> testID 1`] = `
 <DocumentFragment>
-  <div
-    class="view row container overflow"
+  <button
+    class="pressable container overflow"
+    data-testid="mirai-overflow"
   >
     <div
       class="view fit modal calcWidth"
       data-testid="mirai"
     />
-  </div>
+  </button>
 </DocumentFragment>
 `;

package/build/components/Tooltip/Tooltip.js

@@ -10,7 +10,8 @@ var _react = _interopRequireWildcard(require("react"));
 var _helpers = require("../../helpers");
 var _primitives = require("../../primitives");
 var _TooltipModule = _interopRequireDefault(require("./Tooltip.module.css"));
-var _excluded = ["children", "Template", "text"];
+var _excluded = ["children", "Template", "text"],
+  _excluded2 = ["data-testid"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 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 }; }
@@ -37,26 +38,28 @@ var Tooltip = function Tooltip(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     visible = _useState2[0],
     setVisible = _useState2[1];
-  return /*#__PURE__*/_react.default.createElement(_primitives.Layer, _extends({
-    forceRender: false
-  }, others, {
+  var testId = others['data-testid'],
+    rest = _objectWithoutProperties(others, _excluded2);
+  return /*#__PURE__*/_react.default.createElement(_primitives.Layer, {
     centered: true,
-    visible: visible
-  }), _react.default.Children.map(children, function (child, index) {
+    forceRender: false,
+    visible: visible,
+    "data-testid": testId
+  }, _react.default.Children.map(children, function (child, index) {
     return /*#__PURE__*/_react.default.cloneElement(child, _objectSpread(_objectSpread({}, child.props), {}, {
       key: index,
-      'data-testid': others['data-testid'] ? "".concat(others['data-testid'], "-dispatcher") : undefined,
-      className: (0, _helpers.styles)(_TooltipModule.default.dispatcher, child.props.className),
       onMouseEnter: function onMouseEnter() {
         return setVisible(true);
       },
       onMouseLeave: function onMouseLeave() {
         return setVisible(false);
-      }
+      },
+      className: (0, _helpers.styles)(_TooltipModule.default.dispatcher, child.props.className),
+      'data-testid': testId ? "".concat(testId, "-dispatcher") : undefined
     }));
-  }), /*#__PURE__*/_react.default.createElement(_primitives.LayerContent, null, /*#__PURE__*/_react.default.createElement(_primitives.View, {
-    className: _TooltipModule.default.tooltip
-  }, Template ? /*#__PURE__*/_react.default.createElement(Template, null) : /*#__PURE__*/_react.default.createElement(_primitives.Text, {
+  }), /*#__PURE__*/_react.default.createElement(_primitives.LayerContent, null, /*#__PURE__*/_react.default.createElement(_primitives.View, _extends({}, rest, {
+    className: (0, _helpers.styles)(_TooltipModule.default.tooltip, rest.className)
+  }), Template ? /*#__PURE__*/_react.default.createElement(Template, null) : /*#__PURE__*/_react.default.createElement(_primitives.Text, {
     bold: true,
     small: true,
     className: _TooltipModule.default.text

package/build/components/Tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","names":["Tooltip","children","Template","text","others","useState","visible","setVisible","React","Children","map","child","index","cloneElement","props","key","undefined","className","styles","style","dispatcher","onMouseEnter","onMouseLeave","tooltip","displayName","propTypes","PropTypes","node","oneOfType","func","string","bool"],"sources":["../../../src/components/Tooltip/Tooltip.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useState } from 'react';\n\nimport { styles } from '../../helpers';\nimport { Layer, LayerContent, Text, View } from '../../primitives';\nimport style from './Tooltip.module.css';\n\nconst Tooltip = ({ children, Template, text, ...others }) => {\n  const [visible, setVisible] = useState(others.visible || false);\n\n  return (\n    <Layer forceRender={false} {...others} centered visible={visible}>\n      {React.Children.map(children, (child, index) =>\n        React.cloneElement(child, {\n          ...child.props,\n          key: index,\n          'data-testid': others['data-testid'] ? `${others['data-testid']}-dispatcher` : undefined,\n          className: styles(style.dispatcher, child.props.className),\n          onMouseEnter: () => setVisible(true),\n          onMouseLeave: () => setVisible(false),\n        }),\n      )}\n\n      <LayerContent>\n        <View className={style.tooltip}>\n          {Template ? (\n            <Template />\n          ) : (\n            <Text bold small className={style.text}>\n              {text}\n            </Text>\n          )}\n        </View>\n      </LayerContent>\n    </Layer>\n  );\n};\n\nTooltip.displayName = 'Component:Tooltip';\n\nTooltip.propTypes = {\n  children: PropTypes.node,\n  Template: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),\n  text: PropTypes.string,\n  visible: PropTypes.bool,\n};\n\nexport { Tooltip };\n"],"mappings":";;;;;;;AAAA;AACA;AAEA;AACA;AACA;AAAyC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEzC,IAAMA,OAAO,GAAG,SAAVA,OAAO,OAAgD;EAAA,IAA1CC,QAAQ,QAARA,QAAQ;IAAEC,QAAQ,QAARA,QAAQ;IAAEC,IAAI,QAAJA,IAAI;IAAKC,MAAM;EACpD,gBAA8B,IAAAC,eAAQ,EAACD,MAAM,CAACE,OAAO,IAAI,KAAK,CAAC;IAAA;IAAxDA,OAAO;IAAEC,UAAU;EAE1B,oBACE,6BAAC,iBAAK;IAAC,WAAW,EAAE;EAAM,GAAKH,MAAM;IAAE,QAAQ;IAAC,OAAO,EAAEE;EAAQ,IAC9DE,cAAK,CAACC,QAAQ,CAACC,GAAG,CAACT,QAAQ,EAAE,UAACU,KAAK,EAAEC,KAAK;IAAA,oBACzCJ,cAAK,CAACK,YAAY,CAACF,KAAK,kCACnBA,KAAK,CAACG,KAAK;MACdC,GAAG,EAAEH,KAAK;MACV,aAAa,EAAER,MAAM,CAAC,aAAa,CAAC,aAAMA,MAAM,CAAC,aAAa,CAAC,mBAAgBY,SAAS;MACxFC,SAAS,EAAE,IAAAC,eAAM,EAACC,sBAAK,CAACC,UAAU,EAAET,KAAK,CAACG,KAAK,CAACG,SAAS,CAAC;MAC1DI,YAAY,EAAE;QAAA,OAAMd,UAAU,CAAC,IAAI,CAAC;MAAA;MACpCe,YAAY,EAAE;QAAA,OAAMf,UAAU,CAAC,KAAK,CAAC;MAAA;IAAA,GACrC;EAAA,EACH,eAED,6BAAC,wBAAY,qBACX,6BAAC,gBAAI;IAAC,SAAS,EAAEY,sBAAK,CAACI;EAAQ,GAC5BrB,QAAQ,gBACP,6BAAC,QAAQ,OAAG,gBAEZ,6BAAC,gBAAI;IAAC,IAAI;IAAC,KAAK;IAAC,SAAS,EAAEiB,sBAAK,CAAChB;EAAK,GACpCA,IAAI,CAER,CACI,CACM,CACT;AAEZ,CAAC;AAAC;AAEFH,OAAO,CAACwB,WAAW,GAAG,mBAAmB;AAEzCxB,OAAO,CAACyB,SAAS,GAAG;EAClBxB,QAAQ,EAAEyB,kBAAS,CAACC,IAAI;EACxBzB,QAAQ,EAAEwB,kBAAS,CAACE,SAAS,CAAC,CAACF,kBAAS,CAACC,IAAI,EAAED,kBAAS,CAACG,IAAI,CAAC,CAAC;EAC/D1B,IAAI,EAAEuB,kBAAS,CAACI,MAAM;EACtBxB,OAAO,EAAEoB,kBAAS,CAACK;AACrB,CAAC"}
+{"version":3,"file":"Tooltip.js","names":["Tooltip","children","Template","text","others","useState","visible","setVisible","testId","rest","React","Children","map","child","index","cloneElement","props","key","onMouseEnter","onMouseLeave","className","styles","style","dispatcher","undefined","tooltip","displayName","propTypes","PropTypes","node","oneOfType","func","string","bool"],"sources":["../../../src/components/Tooltip/Tooltip.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useState } from 'react';\n\nimport { styles } from '../../helpers';\nimport { Layer, LayerContent, Text, View } from '../../primitives';\nimport style from './Tooltip.module.css';\n\nconst Tooltip = ({ children, Template, text, ...others }) => {\n  const [visible, setVisible] = useState(others.visible || false);\n\n  const { ['data-testid']: testId, ...rest } = others;\n\n  return (\n    <Layer centered forceRender={false} visible={visible} data-testid={testId}>\n      {React.Children.map(children, (child, index) =>\n        React.cloneElement(child, {\n          ...child.props,\n          key: index,\n          onMouseEnter: () => setVisible(true),\n          onMouseLeave: () => setVisible(false),\n          className: styles(style.dispatcher, child.props.className),\n          'data-testid': testId ? `${testId}-dispatcher` : undefined,\n        }),\n      )}\n\n      <LayerContent>\n        <View {...rest} className={styles(style.tooltip, rest.className)}>\n          {Template ? (\n            <Template />\n          ) : (\n            <Text bold small className={style.text}>\n              {text}\n            </Text>\n          )}\n        </View>\n      </LayerContent>\n    </Layer>\n  );\n};\n\nTooltip.displayName = 'Component:Tooltip';\n\nTooltip.propTypes = {\n  children: PropTypes.node,\n  Template: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),\n  text: PropTypes.string,\n  visible: PropTypes.bool,\n};\n\nexport { Tooltip };\n"],"mappings":";;;;;;;AAAA;AACA;AAEA;AACA;AACA;AAAyC;EAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEzC,IAAMA,OAAO,GAAG,SAAVA,OAAO,OAAgD;EAAA,IAA1CC,QAAQ,QAARA,QAAQ;IAAEC,QAAQ,QAARA,QAAQ;IAAEC,IAAI,QAAJA,IAAI;IAAKC,MAAM;EACpD,gBAA8B,IAAAC,eAAQ,EAACD,MAAM,CAACE,OAAO,IAAI,KAAK,CAAC;IAAA;IAAxDA,OAAO;IAAEC,UAAU;EAE1B,IAAyBC,MAAM,GAAcJ,MAAM,CAA1C,aAAa;IAAcK,IAAI,4BAAKL,MAAM;EAEnD,oBACE,6BAAC,iBAAK;IAAC,QAAQ;IAAC,WAAW,EAAE,KAAM;IAAC,OAAO,EAAEE,OAAQ;IAAC,eAAaE;EAAO,GACvEE,cAAK,CAACC,QAAQ,CAACC,GAAG,CAACX,QAAQ,EAAE,UAACY,KAAK,EAAEC,KAAK;IAAA,oBACzCJ,cAAK,CAACK,YAAY,CAACF,KAAK,kCACnBA,KAAK,CAACG,KAAK;MACdC,GAAG,EAAEH,KAAK;MACVI,YAAY,EAAE;QAAA,OAAMX,UAAU,CAAC,IAAI,CAAC;MAAA;MACpCY,YAAY,EAAE;QAAA,OAAMZ,UAAU,CAAC,KAAK,CAAC;MAAA;MACrCa,SAAS,EAAE,IAAAC,eAAM,EAACC,sBAAK,CAACC,UAAU,EAAEV,KAAK,CAACG,KAAK,CAACI,SAAS,CAAC;MAC1D,aAAa,EAAEZ,MAAM,aAAMA,MAAM,mBAAgBgB;IAAS,GAC1D;EAAA,EACH,eAED,6BAAC,wBAAY,qBACX,6BAAC,gBAAI,eAAKf,IAAI;IAAE,SAAS,EAAE,IAAAY,eAAM,EAACC,sBAAK,CAACG,OAAO,EAAEhB,IAAI,CAACW,SAAS;EAAE,IAC9DlB,QAAQ,gBACP,6BAAC,QAAQ,OAAG,gBAEZ,6BAAC,gBAAI;IAAC,IAAI;IAAC,KAAK;IAAC,SAAS,EAAEoB,sBAAK,CAACnB;EAAK,GACpCA,IAAI,CAER,CACI,CACM,CACT;AAEZ,CAAC;AAAC;AAEFH,OAAO,CAAC0B,WAAW,GAAG,mBAAmB;AAEzC1B,OAAO,CAAC2B,SAAS,GAAG;EAClB1B,QAAQ,EAAE2B,kBAAS,CAACC,IAAI;EACxB3B,QAAQ,EAAE0B,kBAAS,CAACE,SAAS,CAAC,CAACF,kBAAS,CAACC,IAAI,EAAED,kBAAS,CAACG,IAAI,CAAC,CAAC;EAC/D5B,IAAI,EAAEyB,kBAAS,CAACI,MAAM;EACtB1B,OAAO,EAAEsB,kBAAS,CAACK;AACrB,CAAC"}

package/build/components/Tooltip/Tooltip.module.css

@@ -14,5 +14,4 @@
 
 .tooltip .text {
   color: var(--mirai-ui-tooltip-color);
-  text-align: center;
 }

package/build/primitives/Pressable/Pressable.js

@@ -36,12 +36,18 @@ var Pressable = function Pressable(_ref) {
     className: (0, _helpers.styles)(_PressableModule.default.pressable, others.className)
   }, !disabled ? {
     onClick: function onClick(event) {
-      if (preventDefault) event.preventDefault();
+      if (preventDefault) {
+        event.preventDefault();
+        event.stopPropagation();
+      }
       onPress(event);
     },
     onKeyPress: function onKeyPress(event) {
       if (event.keyCode === _Pressable.KEY_ENTER) {
-        if (preventDefault) event.preventDefault();
+        if (preventDefault) {
+          event.preventDefault();
+          event.stopPropagation();
+        }
         onPress(event);
       }
     },

package/build/primitives/Pressable/Pressable.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pressable.js","names":["Pressable","children","disabled","preventDefault","tag","onEnter","onLeave","onPress","others","React","createElement","className","styles","style","pressable","onClick","event","onKeyPress","keyCode","KEY_ENTER","onMouseEnter","onMouseLeave","displayName","propTypes","PropTypes","oneOfType","string","node","bool","func"],"sources":["../../../src/primitives/Pressable/Pressable.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { KEY_ENTER } from './Pressable.constants';\nimport style from './Pressable.module.css';\n\nconst Pressable = ({\n  children,\n  disabled,\n  preventDefault = false,\n  tag = 'button',\n  onEnter,\n  onLeave,\n  onPress = () => {},\n  ...others\n}) =>\n  React.createElement(\n    tag,\n    {\n      ...others,\n      disabled,\n      className: styles(style.pressable, others.className),\n      ...(!disabled\n        ? {\n            onClick: (event) => {\n              if (preventDefault) event.preventDefault();\n              onPress(event);\n            },\n            onKeyPress: (event) => {\n              if (event.keyCode === KEY_ENTER) {\n                if (preventDefault) event.preventDefault();\n                onPress(event);\n              }\n            },\n            onMouseEnter: onEnter,\n            onMouseLeave: onLeave,\n          }\n        : {}),\n    },\n    children,\n  );\n\nPressable.displayName = 'Primitive:Pressable';\n\nPressable.propTypes = {\n  children: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n  disabled: PropTypes.bool,\n  preventDefault: PropTypes.bool,\n  tag: PropTypes.string,\n  onEnter: PropTypes.func,\n  onLeave: PropTypes.func,\n  onPress: PropTypes.func,\n};\n\nexport { Pressable };\n"],"mappings":";;;;;;;AAAA;AACA;AAEA;AACA;AACA;AAA2C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAE3C,IAAMA,SAAS,GAAG,SAAZA,SAAS;EAAA,IACbC,QAAQ,QAARA,QAAQ;IACRC,QAAQ,QAARA,QAAQ;IAAA,2BACRC,cAAc;IAAdA,cAAc,oCAAG,KAAK;IAAA,gBACtBC,GAAG;IAAHA,GAAG,yBAAG,QAAQ;IACdC,OAAO,QAAPA,OAAO;IACPC,OAAO,QAAPA,OAAO;IAAA,oBACPC,OAAO;IAAPA,OAAO,6BAAG,YAAM,CAAC,CAAC;IACfC,MAAM;EAAA,oBAETC,cAAK,CAACC,aAAa,CACjBN,GAAG,kCAEEI,MAAM;IACTN,QAAQ,EAARA,QAAQ;IACRS,SAAS,EAAE,IAAAC,eAAM,EAACC,wBAAK,CAACC,SAAS,EAAEN,MAAM,CAACG,SAAS;EAAC,GAChD,CAACT,QAAQ,GACT;IACEa,OAAO,EAAE,iBAACC,KAAK,EAAK;MAClB,IAAIb,cAAc,EAAEa,KAAK,CAACb,cAAc,EAAE;MAC1CI,OAAO,CAACS,KAAK,CAAC;IAChB,CAAC;IACDC,UAAU,EAAE,oBAACD,KAAK,EAAK;MACrB,IAAIA,KAAK,CAACE,OAAO,KAAKC,oBAAS,EAAE;QAC/B,IAAIhB,cAAc,EAAEa,KAAK,CAACb,cAAc,EAAE;QAC1CI,OAAO,CAACS,KAAK,CAAC;MAChB;IACF,CAAC;IACDI,YAAY,EAAEf,OAAO;IACrBgB,YAAY,EAAEf;EAChB,CAAC,GACD,CAAC,CAAC,GAERL,QAAQ,CACT;AAAA;AAAC;AAEJD,SAAS,CAACsB,WAAW,GAAG,qBAAqB;AAE7CtB,SAAS,CAACuB,SAAS,GAAG;EACpBtB,QAAQ,EAAEuB,kBAAS,CAACC,SAAS,CAAC,CAACD,kBAAS,CAACE,MAAM,EAAEF,kBAAS,CAACG,IAAI,CAAC,CAAC;EACjEzB,QAAQ,EAAEsB,kBAAS,CAACI,IAAI;EACxBzB,cAAc,EAAEqB,kBAAS,CAACI,IAAI;EAC9BxB,GAAG,EAAEoB,kBAAS,CAACE,MAAM;EACrBrB,OAAO,EAAEmB,kBAAS,CAACK,IAAI;EACvBvB,OAAO,EAAEkB,kBAAS,CAACK,IAAI;EACvBtB,OAAO,EAAEiB,kBAAS,CAACK;AACrB,CAAC"}
+{"version":3,"file":"Pressable.js","names":["Pressable","children","disabled","preventDefault","tag","onEnter","onLeave","onPress","others","React","createElement","className","styles","style","pressable","onClick","event","stopPropagation","onKeyPress","keyCode","KEY_ENTER","onMouseEnter","onMouseLeave","displayName","propTypes","PropTypes","oneOfType","string","node","bool","func"],"sources":["../../../src/primitives/Pressable/Pressable.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { KEY_ENTER } from './Pressable.constants';\nimport style from './Pressable.module.css';\n\nconst Pressable = ({\n  children,\n  disabled,\n  preventDefault = false,\n  tag = 'button',\n  onEnter,\n  onLeave,\n  onPress = () => {},\n  ...others\n}) =>\n  React.createElement(\n    tag,\n    {\n      ...others,\n      disabled,\n      className: styles(style.pressable, others.className),\n      ...(!disabled\n        ? {\n            onClick: (event) => {\n              if (preventDefault) {\n                event.preventDefault();\n                event.stopPropagation();\n              }\n              onPress(event);\n            },\n            onKeyPress: (event) => {\n              if (event.keyCode === KEY_ENTER) {\n                if (preventDefault) {\n                  event.preventDefault();\n                  event.stopPropagation();\n                }\n                onPress(event);\n              }\n            },\n            onMouseEnter: onEnter,\n            onMouseLeave: onLeave,\n          }\n        : {}),\n    },\n    children,\n  );\n\nPressable.displayName = 'Primitive:Pressable';\n\nPressable.propTypes = {\n  children: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n  disabled: PropTypes.bool,\n  preventDefault: PropTypes.bool,\n  tag: PropTypes.string,\n  onEnter: PropTypes.func,\n  onLeave: PropTypes.func,\n  onPress: PropTypes.func,\n};\n\nexport { Pressable };\n"],"mappings":";;;;;;;AAAA;AACA;AAEA;AACA;AACA;AAA2C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAE3C,IAAMA,SAAS,GAAG,SAAZA,SAAS;EAAA,IACbC,QAAQ,QAARA,QAAQ;IACRC,QAAQ,QAARA,QAAQ;IAAA,2BACRC,cAAc;IAAdA,cAAc,oCAAG,KAAK;IAAA,gBACtBC,GAAG;IAAHA,GAAG,yBAAG,QAAQ;IACdC,OAAO,QAAPA,OAAO;IACPC,OAAO,QAAPA,OAAO;IAAA,oBACPC,OAAO;IAAPA,OAAO,6BAAG,YAAM,CAAC,CAAC;IACfC,MAAM;EAAA,oBAETC,cAAK,CAACC,aAAa,CACjBN,GAAG,kCAEEI,MAAM;IACTN,QAAQ,EAARA,QAAQ;IACRS,SAAS,EAAE,IAAAC,eAAM,EAACC,wBAAK,CAACC,SAAS,EAAEN,MAAM,CAACG,SAAS;EAAC,GAChD,CAACT,QAAQ,GACT;IACEa,OAAO,EAAE,iBAACC,KAAK,EAAK;MAClB,IAAIb,cAAc,EAAE;QAClBa,KAAK,CAACb,cAAc,EAAE;QACtBa,KAAK,CAACC,eAAe,EAAE;MACzB;MACAV,OAAO,CAACS,KAAK,CAAC;IAChB,CAAC;IACDE,UAAU,EAAE,oBAACF,KAAK,EAAK;MACrB,IAAIA,KAAK,CAACG,OAAO,KAAKC,oBAAS,EAAE;QAC/B,IAAIjB,cAAc,EAAE;UAClBa,KAAK,CAACb,cAAc,EAAE;UACtBa,KAAK,CAACC,eAAe,EAAE;QACzB;QACAV,OAAO,CAACS,KAAK,CAAC;MAChB;IACF,CAAC;IACDK,YAAY,EAAEhB,OAAO;IACrBiB,YAAY,EAAEhB;EAChB,CAAC,GACD,CAAC,CAAC,GAERL,QAAQ,CACT;AAAA;AAAC;AAEJD,SAAS,CAACuB,WAAW,GAAG,qBAAqB;AAE7CvB,SAAS,CAACwB,SAAS,GAAG;EACpBvB,QAAQ,EAAEwB,kBAAS,CAACC,SAAS,CAAC,CAACD,kBAAS,CAACE,MAAM,EAAEF,kBAAS,CAACG,IAAI,CAAC,CAAC;EACjE1B,QAAQ,EAAEuB,kBAAS,CAACI,IAAI;EACxB1B,cAAc,EAAEsB,kBAAS,CAACI,IAAI;EAC9BzB,GAAG,EAAEqB,kBAAS,CAACE,MAAM;EACrBtB,OAAO,EAAEoB,kBAAS,CAACK,IAAI;EACvBxB,OAAO,EAAEmB,kBAAS,CAACK,IAAI;EACvBvB,OAAO,EAAEkB,kBAAS,CAACK;AACrB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mirai/ui",
-  "version": "1.0.78",
+  "version": "1.0.79",
   "repository": "git@gitlab.com:miraicorp/dev/frontend/ui.git",
   "author": "JΛVI <hello@soyjavi.com>",
   "license": "MIT",