@mirai/ui 1.0.24 → 1.0.27

package/build/components/Modal/Modal.js

@@ -17,7 +17,7 @@ var _primitives = require("../../primitives");
 
 var _ModalModule = _interopRequireDefault(require("./Modal.module.css"));
 
-var _excluded = ["children", "visible", "onClose"];
+var _excluded = ["children", "overflow", "title", "visible", "onBack", "onClose"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -29,7 +29,11 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 var Modal = function Modal(_ref) {
   var children = _ref.children,
+      _ref$overflow = _ref.overflow,
+      overflow = _ref$overflow === void 0 ? true : _ref$overflow,
+      title = _ref.title,
       visible = _ref.visible,
+      onBack = _ref.onBack,
       onClose = _ref.onClose,
       others = _objectWithoutProperties(_ref, _excluded);
 
@@ -38,24 +42,36 @@ var Modal = function Modal(_ref) {
 
   return /*#__PURE__*/_react.default.createElement(_primitives.View, {
     row: true,
-    className: (0, _helpers.styles)(_ModalModule.default.overflow, visible && _ModalModule.default.visible)
+    className: (0, _helpers.styles)(_ModalModule.default.container, overflow && _ModalModule.default.overflow, visible && _ModalModule.default.visible)
   }, /*#__PURE__*/_react.default.createElement(_primitives.View, _extends({}, others, {
     fit: true,
     className: (0, _helpers.styles)(_ModalModule.default.modal, visible && _ModalModule.default.visible, others.className)
-  }), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, onClose && /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
-    className: _ModalModule.default.pressable,
+  }), (title || onBack || onClose) && /*#__PURE__*/_react.default.createElement(_primitives.View, {
+    row: true,
+    className: _ModalModule.default.header
+  }, onBack && /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
+    onPress: onBack
+  }, /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
+    name: "Left",
+    className: _ModalModule.default.icon
+  })), title && /*#__PURE__*/_react.default.createElement(_primitives.Text, {
+    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, {
     onPress: onClose
   }, /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
-    name: isDesktop ? 'Close' : 'CloseArrow',
+    name: isDesktop || title !== undefined ? 'Close' : 'CloseArrow',
     className: _ModalModule.default.icon
-  })), children)));
+  }))), children));
 };
 
 exports.Modal = Modal;
-Modal.displayName = 'Component:Modal';
 Modal.propTypes = {
   children: _propTypes.default.node,
+  overflow: _propTypes.default.bool,
+  title: _propTypes.default.string,
   visible: _propTypes.default.bool,
+  onBack: _propTypes.default.func,
   onClose: _propTypes.default.func
 };
 //# sourceMappingURL=Modal.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","names":["Modal","children","visible","onClose","others","isDesktop","style","overflow","modal","className","pressable","icon","displayName","propTypes","PropTypes","node","bool","func"],"sources":["../../../src/components/Modal/Modal.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { useDevice } from '../../hooks';\nimport { Icon, Pressable, View } from '../../primitives';\nimport style from './Modal.module.css';\n\nconst Modal = ({ children, visible, onClose, ...others }) => {\n  const { isDesktop } = useDevice();\n\n  return (\n    <View row className={styles(style.overflow, visible && style.visible)}>\n      <View {...others} fit className={styles(style.modal, visible && style.visible, others.className)}>\n        <>\n          {onClose && (\n            <Pressable className={style.pressable} onPress={onClose}>\n              <Icon name={isDesktop ? 'Close' : 'CloseArrow'} className={style.icon} />\n            </Pressable>\n          )}\n          {children}\n        </>\n      </View>\n    </View>\n  );\n};\n\nModal.displayName = 'Component:Modal';\n\nModal.propTypes = {\n  children: PropTypes.node,\n  visible: PropTypes.bool,\n  onClose: PropTypes.func,\n};\n\nexport { Modal };\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;;;;;;;;;AAEA,IAAMA,KAAK,GAAG,SAARA,KAAQ,OAA+C;EAAA,IAA5CC,QAA4C,QAA5CA,QAA4C;EAAA,IAAlCC,OAAkC,QAAlCA,OAAkC;EAAA,IAAzBC,OAAyB,QAAzBA,OAAyB;EAAA,IAAbC,MAAa;;EAC3D,iBAAsB,uBAAtB;EAAA,IAAQC,SAAR,cAAQA,SAAR;;EAEA,oBACE,6BAAC,gBAAD;IAAM,GAAG,MAAT;IAAU,SAAS,EAAE,qBAAOC,qBAAMC,QAAb,EAAuBL,OAAO,IAAII,qBAAMJ,OAAxC;EAArB,gBACE,6BAAC,gBAAD,eAAUE,MAAV;IAAkB,GAAG,MAArB;IAAsB,SAAS,EAAE,qBAAOE,qBAAME,KAAb,EAAoBN,OAAO,IAAII,qBAAMJ,OAArC,EAA8CE,MAAM,CAACK,SAArD;EAAjC,iBACE,4DACGN,OAAO,iBACN,6BAAC,qBAAD;IAAW,SAAS,EAAEG,qBAAMI,SAA5B;IAAuC,OAAO,EAAEP;EAAhD,gBACE,6BAAC,gBAAD;IAAM,IAAI,EAAEE,SAAS,GAAG,OAAH,GAAa,YAAlC;IAAgD,SAAS,EAAEC,qBAAMK;EAAjE,EADF,CAFJ,EAMGV,QANH,CADF,CADF,CADF;AAcD,CAjBD;;;AAmBAD,KAAK,CAACY,WAAN,GAAoB,iBAApB;AAEAZ,KAAK,CAACa,SAAN,GAAkB;EAChBZ,QAAQ,EAAEa,mBAAUC,IADJ;EAEhBb,OAAO,EAAEY,mBAAUE,IAFH;EAGhBb,OAAO,EAAEW,mBAAUG;AAHH,CAAlB"}
+{"version":3,"file":"Modal.js","names":["Modal","children","overflow","title","visible","onBack","onClose","others","isDesktop","style","container","modal","className","header","icon","left","right","undefined","propTypes","PropTypes","node","bool","string","func"],"sources":["../../../src/components/Modal/Modal.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { useDevice } from '../../hooks';\nimport { Icon, Pressable, Text, View } from '../../primitives';\nimport style from './Modal.module.css';\n\nconst Modal = ({ children, overflow = true, title, visible, onBack, onClose, ...others }) => {\n  const { isDesktop } = useDevice();\n\n  return (\n    <View row className={styles(style.container, overflow && style.overflow, visible && style.visible)}>\n      <View {...others} fit className={styles(style.modal, visible && style.visible, others.className)}>\n        {(title || onBack || onClose) && (\n          <View row className={style.header}>\n            {onBack && (\n              <Pressable onPress={onBack}>\n                <Icon name=\"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}>\n                <Icon name={isDesktop || title !== undefined ? 'Close' : 'CloseArrow'} className={style.icon} />\n              </Pressable>\n            )}\n          </View>\n        )}\n        {children}\n      </View>\n    </View>\n  );\n};\n\nModal.propTypes = {\n  children: PropTypes.node,\n  overflow: PropTypes.bool,\n  title: PropTypes.string,\n  visible: PropTypes.bool,\n  onBack: PropTypes.func,\n  onClose: PropTypes.func,\n};\n\nexport { Modal };\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;;;;;;;;;AAEA,IAAMA,KAAK,GAAG,SAARA,KAAQ,OAA+E;EAAA,IAA5EC,QAA4E,QAA5EA,QAA4E;EAAA,yBAAlEC,QAAkE;EAAA,IAAlEA,QAAkE,8BAAvD,IAAuD;EAAA,IAAjDC,KAAiD,QAAjDA,KAAiD;EAAA,IAA1CC,OAA0C,QAA1CA,OAA0C;EAAA,IAAjCC,MAAiC,QAAjCA,MAAiC;EAAA,IAAzBC,OAAyB,QAAzBA,OAAyB;EAAA,IAAbC,MAAa;;EAC3F,iBAAsB,uBAAtB;EAAA,IAAQC,SAAR,cAAQA,SAAR;;EAEA,oBACE,6BAAC,gBAAD;IAAM,GAAG,MAAT;IAAU,SAAS,EAAE,qBAAOC,qBAAMC,SAAb,EAAwBR,QAAQ,IAAIO,qBAAMP,QAA1C,EAAoDE,OAAO,IAAIK,qBAAML,OAArE;EAArB,gBACE,6BAAC,gBAAD,eAAUG,MAAV;IAAkB,GAAG,MAArB;IAAsB,SAAS,EAAE,qBAAOE,qBAAME,KAAb,EAAoBP,OAAO,IAAIK,qBAAML,OAArC,EAA8CG,MAAM,CAACK,SAArD;EAAjC,IACG,CAACT,KAAK,IAAIE,MAAT,IAAmBC,OAApB,kBACC,6BAAC,gBAAD;IAAM,GAAG,MAAT;IAAU,SAAS,EAAEG,qBAAMI;EAA3B,GACGR,MAAM,iBACL,6BAAC,qBAAD;IAAW,OAAO,EAAEA;EAApB,gBACE,6BAAC,gBAAD;IAAM,IAAI,EAAC,MAAX;IAAkB,SAAS,EAAEI,qBAAMK;EAAnC,EADF,CAFJ,EAMGX,KAAK,iBACJ,6BAAC,gBAAD;IAAM,QAAQ,MAAd;IAAe,SAAS,EAAE,qBAAOM,qBAAMN,KAAb,EAAoB,CAACE,MAAD,IAAWI,qBAAMM,IAArC,EAA2C,CAACT,OAAD,IAAYG,qBAAMO,KAA7D;EAA1B,GACGb,KADH,CAPJ,EAWGG,OAAO,iBACN,6BAAC,qBAAD;IAAW,OAAO,EAAEA;EAApB,gBACE,6BAAC,gBAAD;IAAM,IAAI,EAAEE,SAAS,IAAIL,KAAK,KAAKc,SAAvB,GAAmC,OAAnC,GAA6C,YAAzD;IAAuE,SAAS,EAAER,qBAAMK;EAAxF,EADF,CAZJ,CAFJ,EAoBGb,QApBH,CADF,CADF;AA0BD,CA7BD;;;AA+BAD,KAAK,CAACkB,SAAN,GAAkB;EAChBjB,QAAQ,EAAEkB,mBAAUC,IADJ;EAEhBlB,QAAQ,EAAEiB,mBAAUE,IAFJ;EAGhBlB,KAAK,EAAEgB,mBAAUG,MAHD;EAIhBlB,OAAO,EAAEe,mBAAUE,IAJH;EAKhBhB,MAAM,EAAEc,mBAAUI,IALF;EAMhBjB,OAAO,EAAEa,mBAAUI;AANH,CAAlB"}

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

@@ -1,72 +1,122 @@
 :root {
   --mirai-ui-modal-background: var(--mirai-ui-base);
-  --mirai-ui-modal-overflow: rgba(0, 0, 0, 0.2);
+  --mirai-ui-modal-overflow: rgba(0, 0, 0, 0.1);
+  --mirai-ui-modal-header-padding: var(--mirai-ui-space-M);
   --mirai-ui-modal-icon: var(--mirai-ui-space-L);
   --mirai-ui-modal-layer: var(--mirai-ui-layer-L);
 }
 
+.container {
+  height: 100vh;
+  justify-content: center;
+  left: 0;
+  pointer-events: none;
+  position: fixed;
+  top: 0;
+  width: 100vw;
+  z-index: var(--mirai-ui-modal-layer);
+}
+
+.header {
+  align-items: center;
+  border-bottom: solid 1px var(--mirai-ui-content-border);
+  padding: var(--mirai-ui-modal-header-padding);
+  width: 100%;
+}
+
+.header .title {
+  flex: 1;
+  padding: 0 var(--mirai-ui-modal-header-padding);
+  text-align: center;
+}
+
+.header .title.left {
+  margin-left: var(--mirai-ui-modal-icon);
+}
+
+.header .title.right {
+  margin-right: var(--mirai-ui-modal-icon);
+}
+
+.header .icon {
+  font-size: var(--mirai-ui-modal-icon);
+  line-height: var(--mirai-ui-modal-icon);
+  height: var(--mirai-ui-modal-icon);
+  width: var(--mirai-ui-modal-icon);
+}
+
 .modal {
   background-color: var(--mirai-ui-modal-background);
-  opacity: 0;
   pointer-events: none;
-  transform: scale(1.1);
   transition: opacity var(--mirai-ui-motion-expand) var(--mirai-ui-motion-easing),
-    transform var(--mirai-ui-motion-expand) var(--mirai-ui-motion-easing);
+    transform var(--mirai-ui-motion-expand) var(--mirai-ui-motion-easing),
+    box-shadow var(--mirai-ui-motion-expand) var(--mirai-ui-motion-easing);
 }
 
 .modal.visible {
-  opacity: 1;
+  box-shadow: var(--mirai-ui-shadow);
   pointer-events: all;
-  transform: scale(1);
 }
 
 .overflow {
-  align-items: center;
   background-color: var(--mirai-ui-modal-overflow);
-  height: 100vh;
-  justify-content: center;
-  left: 0;
   opacity: 0;
   pointer-events: none;
-  position: absolute;
   transition: opacity var(--mirai-ui-motion-expand) var(--mirai-ui-motion-easing);
-  top: 0;
-  width: 100vw;
-  z-index: var(--mirai-ui-modal-layer);
 }
 
-.overflow.visible {
+.container.visible {
   opacity: 1;
 }
 
-.pressable {
-  align-self: flex-end;
-  padding: var(--mirai-ui-space-XS);
-}
-
-.icon {
-  font-size: var(--mirai-ui-modal-icon);
-  line-height: var(--mirai-ui-modal-icon);
-  height: var(--mirai-ui-modal-icon);
-  width: var(--mirai-ui-modal-icon);
-}
-
 @media only screen and (max-width: 600px) {
-  .overflow {
+  .container {
     align-items: flex-end;
     align-content: flex-end;
   }
 
+  .header {
+    justify-content: center;
+  }
+
   .modal {
-    opacity: 1;
-    transform: translateY(110%);
+    transform: translateY(100%);
+    width: 100%;
   }
 
   .modal.visible {
     transform: translateY(0%);
   }
 
+  .overflow {
+    transition-delay: calc(var(--mirai-ui-motion-expand) / 2);
+  }
+
+  .overflow.visible {
+    transition-delay: 0s;
+  }
+}
+
+@media only screen and (min-width: 600px) {
+  .container {
+    align-items: center;
+  }
+
+  .header {
+    justify-content: flex-end;
+  }
+
+  .modal {
+    opacity: 0;
+    transform: scale(1.1);
+  }
+
+  .modal.visible {
+    opacity: 1;
+    transform: scale(1);
+  }
+
   .pressable {
-    align-self: center;
+    align-self: flex-end;
   }
 }

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

@@ -3,34 +3,38 @@
 exports[`component:<Modal> Mobile environment prop:onClose 1`] = `
 <DocumentFragment>
   <div
-    class="view row overflow visible"
+    class="view row container overflow visible"
   >
     <div
       class="view fit modal visible"
     >
-      <button
-        class="pressable pressable"
+      <div
+        class="view row header"
       >
-        <span
-          class="icon icon"
+        <button
+          class="pressable"
         >
-          <svg
-            fill="none"
-            height="1em"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            viewBox="0 0 24 24"
-            width="1em"
-            xmlns="http://www.w3.org/2000/svg"
+          <span
+            class="icon icon"
           >
-            <polyline
-              points="6 9 12 15 18 9"
-            />
-          </svg>
-        </span>
-      </button>
+            <svg
+              fill="none"
+              height="1em"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <polyline
+                points="6 9 12 15 18 9"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
     </div>
   </div>
 </DocumentFragment>
@@ -39,7 +43,7 @@ exports[`component:<Modal> Mobile environment prop:onClose 1`] = `
 exports[`component:<Modal> Mobile environment prop:visible 1`] = `
 <DocumentFragment>
   <div
-    class="view row overflow visible"
+    class="view row container overflow visible"
   >
     <div
       class="view fit modal visible"
@@ -51,7 +55,7 @@ exports[`component:<Modal> Mobile environment prop:visible 1`] = `
 exports[`component:<Modal> inherit:className 1`] = `
 <DocumentFragment>
   <div
-    class="view row overflow"
+    class="view row container overflow"
   >
     <div
       class="view fit modal mirai"
@@ -63,7 +67,7 @@ exports[`component:<Modal> inherit:className 1`] = `
 exports[`component:<Modal> prop:children 1`] = `
 <DocumentFragment>
   <div
-    class="view row overflow"
+    class="view row container overflow"
   >
     <div
       class="view fit modal"
@@ -76,46 +80,130 @@ exports[`component:<Modal> prop:children 1`] = `
 </DocumentFragment>
 `;
 
+exports[`component:<Modal> prop:onBack 1`] = `
+<DocumentFragment>
+  <div
+    class="view row container overflow visible"
+  >
+    <div
+      class="view fit modal visible"
+    >
+      <div
+        class="view row header"
+      >
+        <button
+          class="pressable"
+        >
+          <span
+            class="icon icon"
+          >
+            <svg
+              fill="none"
+              height="1em"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <line
+                x1="19"
+                x2="5"
+                y1="12"
+                y2="12"
+              />
+              <polyline
+                points="12 19 5 12 12 5"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`component:<Modal> prop:onClose 1`] = `
 <DocumentFragment>
   <div
-    class="view row overflow visible"
+    class="view row container overflow visible"
   >
     <div
       class="view fit modal visible"
     >
-      <button
-        class="pressable pressable"
+      <div
+        class="view row header"
       >
-        <span
-          class="icon icon"
+        <button
+          class="pressable"
         >
-          <svg
-            fill="none"
-            height="1em"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            viewBox="0 0 24 24"
-            width="1em"
-            xmlns="http://www.w3.org/2000/svg"
+          <span
+            class="icon icon"
           >
-            <polyline
-              points="6 9 12 15 18 9"
-            />
-          </svg>
+            <svg
+              fill="none"
+              height="1em"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <polyline
+                points="6 9 12 15 18 9"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`component:<Modal> prop:title 1`] = `
+<DocumentFragment>
+  <div
+    class="view row container overflow"
+  >
+    <div
+      class="view fit modal"
+    >
+      <div
+        class="view row header"
+      >
+        <span
+          class="text headline title left right"
+        >
+          Modal
         </span>
-      </button>
+      </div>
     </div>
   </div>
 </DocumentFragment>
 `;
 
+exports[`component:<Modal> prop:visible & prop:overflow (false) 1`] = `
+<DocumentFragment>
+  <div
+    class="view row container visible"
+  >
+    <div
+      class="view fit modal visible"
+    />
+  </div>
+</DocumentFragment>
+`;
+
 exports[`component:<Modal> prop:visible 1`] = `
 <DocumentFragment>
   <div
-    class="view row overflow visible"
+    class="view row container overflow visible"
   >
     <div
       class="view fit modal visible"
@@ -127,7 +215,7 @@ exports[`component:<Modal> prop:visible 1`] = `
 exports[`component:<Modal> renders 1`] = `
 <DocumentFragment>
   <div
-    class="view row overflow"
+    class="view row container overflow"
   >
     <div
       class="view fit modal"
@@ -139,7 +227,7 @@ exports[`component:<Modal> renders 1`] = `
 exports[`component:<Modal> testID 1`] = `
 <DocumentFragment>
   <div
-    class="view row overflow"
+    class="view row container overflow"
   >
     <div
       class="view fit modal"

package/build/components/Tooltip/Tooltip.js

@@ -60,7 +60,9 @@ var Tooltip = function Tooltip(_ref) {
       visible = _useState2[0],
       setVisible = _useState2[1];
 
-  return /*#__PURE__*/_react.default.createElement(_primitives.Layer, _extends({}, others, {
+  return /*#__PURE__*/_react.default.createElement(_primitives.Layer, _extends({
+    forceRender: false
+  }, others, {
     centered: true,
     visible: visible
   }), _react.default.Children.map(children, function (child, index) {

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

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","names":["Tooltip","children","Template","text","others","visible","setVisible","React","Children","map","child","index","cloneElement","props","key","undefined","className","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 {...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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,IAAMA,OAAO,GAAG,SAAVA,OAAU,OAA6C;EAAA,IAA1CC,QAA0C,QAA1CA,QAA0C;EAAA,IAAhCC,QAAgC,QAAhCA,QAAgC;EAAA,IAAtBC,IAAsB,QAAtBA,IAAsB;EAAA,IAAbC,MAAa;;EAC3D,gBAA8B,qBAASA,MAAM,CAACC,OAAP,IAAkB,KAA3B,CAA9B;EAAA;EAAA,IAAOA,OAAP;EAAA,IAAgBC,UAAhB;;EAEA,oBACE,6BAAC,iBAAD,eAAWF,MAAX;IAAmB,QAAQ,MAA3B;IAA4B,OAAO,EAAEC;EAArC,IACGE,eAAMC,QAAN,CAAeC,GAAf,CAAmBR,QAAnB,EAA6B,UAACS,KAAD,EAAQC,KAAR;IAAA,oBAC5BJ,eAAMK,YAAN,CAAmBF,KAAnB,kCACKA,KAAK,CAACG,KADX;MAEEC,GAAG,EAAEH,KAFP;MAGE,eAAeP,MAAM,CAAC,aAAD,CAAN,aAA2BA,MAAM,CAAC,aAAD,CAAjC,mBAAgEW,SAHjF;MAIEC,SAAS,EAAE,qBAAOC,uBAAMC,UAAb,EAAyBR,KAAK,CAACG,KAAN,CAAYG,SAArC,CAJb;MAKEG,YAAY,EAAE;QAAA,OAAMb,UAAU,CAAC,IAAD,CAAhB;MAAA,CALhB;MAMEc,YAAY,EAAE;QAAA,OAAMd,UAAU,CAAC,KAAD,CAAhB;MAAA;IANhB,GAD4B;EAAA,CAA7B,CADH,eAYE,6BAAC,wBAAD,qBACE,6BAAC,gBAAD;IAAM,SAAS,EAAEW,uBAAMI;EAAvB,GACGnB,QAAQ,gBACP,6BAAC,QAAD,OADO,gBAGP,6BAAC,gBAAD;IAAM,IAAI,MAAV;IAAW,KAAK,MAAhB;IAAiB,SAAS,EAAEe,uBAAMd;EAAlC,GACGA,IADH,CAJJ,CADF,CAZF,CADF;AA0BD,CA7BD;;;AA+BAH,OAAO,CAACsB,WAAR,GAAsB,mBAAtB;AAEAtB,OAAO,CAACuB,SAAR,GAAoB;EAClBtB,QAAQ,EAAEuB,mBAAUC,IADF;EAElBvB,QAAQ,EAAEsB,mBAAUE,SAAV,CAAoB,CAACF,mBAAUC,IAAX,EAAiBD,mBAAUG,IAA3B,CAApB,CAFQ;EAGlBxB,IAAI,EAAEqB,mBAAUI,MAHE;EAIlBvB,OAAO,EAAEmB,mBAAUK;AAJD,CAApB"}
+{"version":3,"file":"Tooltip.js","names":["Tooltip","children","Template","text","others","visible","setVisible","React","Children","map","child","index","cloneElement","props","key","undefined","className","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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,IAAMA,OAAO,GAAG,SAAVA,OAAU,OAA6C;EAAA,IAA1CC,QAA0C,QAA1CA,QAA0C;EAAA,IAAhCC,QAAgC,QAAhCA,QAAgC;EAAA,IAAtBC,IAAsB,QAAtBA,IAAsB;EAAA,IAAbC,MAAa;;EAC3D,gBAA8B,qBAASA,MAAM,CAACC,OAAP,IAAkB,KAA3B,CAA9B;EAAA;EAAA,IAAOA,OAAP;EAAA,IAAgBC,UAAhB;;EAEA,oBACE,6BAAC,iBAAD;IAAO,WAAW,EAAE;EAApB,GAA+BF,MAA/B;IAAuC,QAAQ,MAA/C;IAAgD,OAAO,EAAEC;EAAzD,IACGE,eAAMC,QAAN,CAAeC,GAAf,CAAmBR,QAAnB,EAA6B,UAACS,KAAD,EAAQC,KAAR;IAAA,oBAC5BJ,eAAMK,YAAN,CAAmBF,KAAnB,kCACKA,KAAK,CAACG,KADX;MAEEC,GAAG,EAAEH,KAFP;MAGE,eAAeP,MAAM,CAAC,aAAD,CAAN,aAA2BA,MAAM,CAAC,aAAD,CAAjC,mBAAgEW,SAHjF;MAIEC,SAAS,EAAE,qBAAOC,uBAAMC,UAAb,EAAyBR,KAAK,CAACG,KAAN,CAAYG,SAArC,CAJb;MAKEG,YAAY,EAAE;QAAA,OAAMb,UAAU,CAAC,IAAD,CAAhB;MAAA,CALhB;MAMEc,YAAY,EAAE;QAAA,OAAMd,UAAU,CAAC,KAAD,CAAhB;MAAA;IANhB,GAD4B;EAAA,CAA7B,CADH,eAYE,6BAAC,wBAAD,qBACE,6BAAC,gBAAD;IAAM,SAAS,EAAEW,uBAAMI;EAAvB,GACGnB,QAAQ,gBACP,6BAAC,QAAD,OADO,gBAGP,6BAAC,gBAAD;IAAM,IAAI,MAAV;IAAW,KAAK,MAAhB;IAAiB,SAAS,EAAEe,uBAAMd;EAAlC,GACGA,IADH,CAJJ,CADF,CAZF,CADF;AA0BD,CA7BD;;;AA+BAH,OAAO,CAACsB,WAAR,GAAsB,mBAAtB;AAEAtB,OAAO,CAACuB,SAAR,GAAoB;EAClBtB,QAAQ,EAAEuB,mBAAUC,IADF;EAElBvB,QAAQ,EAAEsB,mBAAUE,SAAV,CAAoB,CAACF,mBAAUC,IAAX,EAAiBD,mBAAUG,IAA3B,CAApB,CAFQ;EAGlBxB,IAAI,EAAEqB,mBAAUI,MAHE;EAIlBvB,OAAO,EAAEmB,mBAAUK;AAJD,CAApB"}

package/build/primitives/Layer/Layer.js

@@ -21,7 +21,7 @@ var _LayerModule = _interopRequireDefault(require("./Layer.module.css"));
 
 var _LayerContent = require("./LayerContent");
 
-var _excluded = ["centered", "visible"];
+var _excluded = ["centered", "forceRender", "visible"];
 
 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); }
 
@@ -53,6 +53,8 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 var Layer = function Layer(_ref) {
   var centered = _ref.centered,
+      _ref$forceRender = _ref.forceRender,
+      forceRender = _ref$forceRender === void 0 ? true : _ref$forceRender,
       visible = _ref.visible,
       others = _objectWithoutProperties(_ref, _excluded);
 
@@ -96,11 +98,11 @@ var Layer = function Layer(_ref) {
   }, children.find(function (_ref2) {
     var name = _ref2.type.name;
     return name !== _LayerContent.LayerContent.name;
-  })), visible && /*#__PURE__*/_react.default.createElement("span", {
+  })), (forceRender || visible) && /*#__PURE__*/_react.default.createElement("div", {
     ref: contentRef,
-    className: (0, _helpers.styles)(_LayerModule.default.layer, others.className),
+    className: (0, _helpers.styles)(_LayerModule.default.layer, !visible && _LayerModule.default.hidden, others.className),
     style: _objectSpread(_objectSpread({}, others.style), position)
-  }, children.find(function (_ref3) {
+  }, children === null || children === void 0 ? void 0 : children.find(function (_ref3) {
     var name = _ref3.type.name;
     return name === _LayerContent.LayerContent.name;
   })));
@@ -108,6 +110,7 @@ var Layer = function Layer(_ref) {
 
 exports.Layer = Layer;
 Layer.propTypes = {
+  forceRender: _propTypes.default.bool,
   children: _propTypes.default.node,
   centered: _propTypes.default.bool,
   visible: _propTypes.default.bool

package/build/primitives/Layer/Layer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Layer.js","names":["Layer","centered","visible","others","device","componentRef","contentRef","position","setPosition","current","componentEl","firstChild","contentEl","componentLayout","contentLayout","left","top","children","React","Children","map","child","find","name","type","LayerContent","style","layer","className","propTypes","PropTypes","node","bool"],"sources":["../../../src/primitives/Layer/Layer.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useLayoutEffect, useRef, useState } from 'react';\n\nimport { styles } from '../../helpers';\nimport { useDevice } from '../../hooks';\nimport { getElementLayout, getLayerPosition } from './helpers';\nimport style from './Layer.module.css';\nimport { LayerContent } from './LayerContent';\n\nconst Layer = ({ centered, visible, ...others }) => {\n  const device = useDevice();\n  const componentRef = useRef();\n  const contentRef = useRef();\n\n  const [position, setPosition] = useState();\n\n  useLayoutEffect(() => {\n    const { current: { firstChild: componentEl } = {} } = componentRef;\n    const { current: contentEl } = contentRef;\n\n    if (!componentEl || !contentEl) return setPosition();\n\n    const componentLayout = getElementLayout(componentEl);\n    const contentLayout = getElementLayout(contentEl);\n    const { left = 0, top = 0 } = getLayerPosition(componentLayout, contentLayout, device, centered);\n\n    setPosition({ left: `${left}px`, top: `${top}px` });\n  }, [centered, device, visible]);\n\n  const children = React.Children.map(others.children || [], (child) => child);\n\n  return (\n    <>\n      <span data-testid={others['data-testid']} ref={componentRef}>\n        {children.find(({ type: { name } }) => name !== LayerContent.name)}\n      </span>\n\n      {visible && (\n        <span\n          ref={contentRef}\n          className={styles(style.layer, others.className)}\n          style={{ ...others.style, ...position }}\n        >\n          {children.find(({ type: { name } }) => name === LayerContent.name)}\n        </span>\n      )}\n    </>\n  );\n};\n\nLayer.propTypes = {\n  children: PropTypes.node,\n  centered: PropTypes.bool,\n  visible: PropTypes.bool,\n};\n\nexport { Layer };\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,IAAMA,KAAK,GAAG,SAARA,KAAQ,OAAsC;EAAA,IAAnCC,QAAmC,QAAnCA,QAAmC;EAAA,IAAzBC,OAAyB,QAAzBA,OAAyB;EAAA,IAAbC,MAAa;;EAClD,IAAMC,MAAM,GAAG,uBAAf;EACA,IAAMC,YAAY,GAAG,oBAArB;EACA,IAAMC,UAAU,GAAG,oBAAnB;;EAEA,gBAAgC,sBAAhC;EAAA;EAAA,IAAOC,QAAP;EAAA,IAAiBC,WAAjB;;EAEA,4BAAgB,YAAM;IACpB,4BAAsDH,YAAtD,CAAQI,OAAR;IAAA,2DAA+C,EAA/C;IAAA,IAA+BC,WAA/B,yBAAmBC,UAAnB;IACA,IAAiBC,SAAjB,GAA+BN,UAA/B,CAAQG,OAAR;IAEA,IAAI,CAACC,WAAD,IAAgB,CAACE,SAArB,EAAgC,OAAOJ,WAAW,EAAlB;IAEhC,IAAMK,eAAe,GAAG,gCAAiBH,WAAjB,CAAxB;IACA,IAAMI,aAAa,GAAG,gCAAiBF,SAAjB,CAAtB;;IACA,wBAA8B,gCAAiBC,eAAjB,EAAkCC,aAAlC,EAAiDV,MAAjD,EAAyDH,QAAzD,CAA9B;IAAA,8CAAQc,IAAR;IAAA,IAAQA,IAAR,sCAAe,CAAf;IAAA,8CAAkBC,GAAlB;IAAA,IAAkBA,GAAlB,sCAAwB,CAAxB;;IAEAR,WAAW,CAAC;MAAEO,IAAI,YAAKA,IAAL,OAAN;MAAqBC,GAAG,YAAKA,GAAL;IAAxB,CAAD,CAAX;EACD,CAXD,EAWG,CAACf,QAAD,EAAWG,MAAX,EAAmBF,OAAnB,CAXH;;EAaA,IAAMe,QAAQ,GAAGC,eAAMC,QAAN,CAAeC,GAAf,CAAmBjB,MAAM,CAACc,QAAP,IAAmB,EAAtC,EAA0C,UAACI,KAAD;IAAA,OAAWA,KAAX;EAAA,CAA1C,CAAjB;;EAEA,oBACE,yEACE;IAAM,eAAalB,MAAM,CAAC,aAAD,CAAzB;IAA0C,GAAG,EAAEE;EAA/C,GACGY,QAAQ,CAACK,IAAT,CAAc;IAAA,IAAWC,IAAX,SAAGC,IAAH,CAAWD,IAAX;IAAA,OAAwBA,IAAI,KAAKE,2BAAaF,IAA9C;EAAA,CAAd,CADH,CADF,EAKGrB,OAAO,iBACN;IACE,GAAG,EAAEI,UADP;IAEE,SAAS,EAAE,qBAAOoB,qBAAMC,KAAb,EAAoBxB,MAAM,CAACyB,SAA3B,CAFb;IAGE,KAAK,kCAAOzB,MAAM,CAACuB,KAAd,GAAwBnB,QAAxB;EAHP,GAKGU,QAAQ,CAACK,IAAT,CAAc;IAAA,IAAWC,IAAX,SAAGC,IAAH,CAAWD,IAAX;IAAA,OAAwBA,IAAI,KAAKE,2BAAaF,IAA9C;EAAA,CAAd,CALH,CANJ,CADF;AAiBD,CAvCD;;;AAyCAvB,KAAK,CAAC6B,SAAN,GAAkB;EAChBZ,QAAQ,EAAEa,mBAAUC,IADJ;EAEhB9B,QAAQ,EAAE6B,mBAAUE,IAFJ;EAGhB9B,OAAO,EAAE4B,mBAAUE;AAHH,CAAlB"}
+{"version":3,"file":"Layer.js","names":["Layer","centered","forceRender","visible","others","device","componentRef","contentRef","position","setPosition","current","componentEl","firstChild","contentEl","componentLayout","contentLayout","left","top","children","React","Children","map","child","find","name","type","LayerContent","style","layer","hidden","className","propTypes","PropTypes","bool","node"],"sources":["../../../src/primitives/Layer/Layer.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useLayoutEffect, useRef, useState } from 'react';\n\nimport { styles } from '../../helpers';\nimport { useDevice } from '../../hooks';\nimport { getElementLayout, getLayerPosition } from './helpers';\nimport style from './Layer.module.css';\nimport { LayerContent } from './LayerContent';\n\nconst Layer = ({ centered, forceRender = true, visible, ...others }) => {\n  const device = useDevice();\n  const componentRef = useRef();\n  const contentRef = useRef();\n\n  const [position, setPosition] = useState();\n\n  useLayoutEffect(() => {\n    const { current: { firstChild: componentEl } = {} } = componentRef;\n    const { current: contentEl } = contentRef;\n\n    if (!componentEl || !contentEl) return setPosition();\n\n    const componentLayout = getElementLayout(componentEl);\n    const contentLayout = getElementLayout(contentEl);\n    const { left = 0, top = 0 } = getLayerPosition(componentLayout, contentLayout, device, centered);\n\n    setPosition({ left: `${left}px`, top: `${top}px` });\n  }, [centered, device, visible]);\n\n  const children = React.Children.map(others.children || [], (child) => child);\n\n  return (\n    <>\n      <span data-testid={others['data-testid']} ref={componentRef}>\n        {children.find(({ type: { name } }) => name !== LayerContent.name)}\n      </span>\n\n      {(forceRender || visible) && (\n        <div\n          ref={contentRef}\n          className={styles(style.layer, !visible && style.hidden, others.className)}\n          style={{ ...others.style, ...position }}\n        >\n          {children?.find(({ type: { name } }) => name === LayerContent.name)}\n        </div>\n      )}\n    </>\n  );\n};\n\nLayer.propTypes = {\n  forceRender: PropTypes.bool,\n  children: PropTypes.node,\n  centered: PropTypes.bool,\n  visible: PropTypes.bool,\n};\n\nexport { Layer };\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,IAAMA,KAAK,GAAG,SAARA,KAAQ,OAA0D;EAAA,IAAvDC,QAAuD,QAAvDA,QAAuD;EAAA,4BAA7CC,WAA6C;EAAA,IAA7CA,WAA6C,iCAA/B,IAA+B;EAAA,IAAzBC,OAAyB,QAAzBA,OAAyB;EAAA,IAAbC,MAAa;;EACtE,IAAMC,MAAM,GAAG,uBAAf;EACA,IAAMC,YAAY,GAAG,oBAArB;EACA,IAAMC,UAAU,GAAG,oBAAnB;;EAEA,gBAAgC,sBAAhC;EAAA;EAAA,IAAOC,QAAP;EAAA,IAAiBC,WAAjB;;EAEA,4BAAgB,YAAM;IACpB,4BAAsDH,YAAtD,CAAQI,OAAR;IAAA,2DAA+C,EAA/C;IAAA,IAA+BC,WAA/B,yBAAmBC,UAAnB;IACA,IAAiBC,SAAjB,GAA+BN,UAA/B,CAAQG,OAAR;IAEA,IAAI,CAACC,WAAD,IAAgB,CAACE,SAArB,EAAgC,OAAOJ,WAAW,EAAlB;IAEhC,IAAMK,eAAe,GAAG,gCAAiBH,WAAjB,CAAxB;IACA,IAAMI,aAAa,GAAG,gCAAiBF,SAAjB,CAAtB;;IACA,wBAA8B,gCAAiBC,eAAjB,EAAkCC,aAAlC,EAAiDV,MAAjD,EAAyDJ,QAAzD,CAA9B;IAAA,8CAAQe,IAAR;IAAA,IAAQA,IAAR,sCAAe,CAAf;IAAA,8CAAkBC,GAAlB;IAAA,IAAkBA,GAAlB,sCAAwB,CAAxB;;IAEAR,WAAW,CAAC;MAAEO,IAAI,YAAKA,IAAL,OAAN;MAAqBC,GAAG,YAAKA,GAAL;IAAxB,CAAD,CAAX;EACD,CAXD,EAWG,CAAChB,QAAD,EAAWI,MAAX,EAAmBF,OAAnB,CAXH;;EAaA,IAAMe,QAAQ,GAAGC,eAAMC,QAAN,CAAeC,GAAf,CAAmBjB,MAAM,CAACc,QAAP,IAAmB,EAAtC,EAA0C,UAACI,KAAD;IAAA,OAAWA,KAAX;EAAA,CAA1C,CAAjB;;EAEA,oBACE,yEACE;IAAM,eAAalB,MAAM,CAAC,aAAD,CAAzB;IAA0C,GAAG,EAAEE;EAA/C,GACGY,QAAQ,CAACK,IAAT,CAAc;IAAA,IAAWC,IAAX,SAAGC,IAAH,CAAWD,IAAX;IAAA,OAAwBA,IAAI,KAAKE,2BAAaF,IAA9C;EAAA,CAAd,CADH,CADF,EAKG,CAACtB,WAAW,IAAIC,OAAhB,kBACC;IACE,GAAG,EAAEI,UADP;IAEE,SAAS,EAAE,qBAAOoB,qBAAMC,KAAb,EAAoB,CAACzB,OAAD,IAAYwB,qBAAME,MAAtC,EAA8CzB,MAAM,CAAC0B,SAArD,CAFb;IAGE,KAAK,kCAAO1B,MAAM,CAACuB,KAAd,GAAwBnB,QAAxB;EAHP,GAKGU,QALH,aAKGA,QALH,uBAKGA,QAAQ,CAAEK,IAAV,CAAe;IAAA,IAAWC,IAAX,SAAGC,IAAH,CAAWD,IAAX;IAAA,OAAwBA,IAAI,KAAKE,2BAAaF,IAA9C;EAAA,CAAf,CALH,CANJ,CADF;AAiBD,CAvCD;;;AAyCAxB,KAAK,CAAC+B,SAAN,GAAkB;EAChB7B,WAAW,EAAE8B,mBAAUC,IADP;EAEhBf,QAAQ,EAAEc,mBAAUE,IAFJ;EAGhBjC,QAAQ,EAAE+B,mBAAUC,IAHJ;EAIhB9B,OAAO,EAAE6B,mBAAUC;AAJH,CAAlB"}

package/build/primitives/Layer/Layer.module.css

@@ -4,7 +4,10 @@
 
 .layer {
   position: fixed;
-  transition: left var(--mirai-ui-motion-expand) var(--mirai-ui-motion-easing),
-    top var(--mirai-ui-motion-expand) var(--mirai-ui-motion-easing);
   z-index: var(--mirai-ui-layer-content);
 }
+
+.layer.hidden {
+  display: none;
+  visibility: hidden;
+}