@mirai/ui 1.0.24 → 1.0.25

package/build/components/Menu/Menu.js

@@ -38,7 +38,9 @@ var Menu = function Menu(_ref) {
       onPress = _ref$onPress === void 0 ? function () {} : _ref$onPress,
       others = _objectWithoutProperties(_ref, _excluded);
 
-  return /*#__PURE__*/_react.default.createElement(_primitives.Layer, _extends({}, others, {
+  return /*#__PURE__*/_react.default.createElement(_primitives.Layer, _extends({
+    forceRender: false
+  }, others, {
     className: (0, _helpers.styles)(_MenuModule.default.menu, visible && _MenuModule.default.visible, others.className),
     visible: visible
   }), children, /*#__PURE__*/_react.default.createElement(_primitives.LayerContent, null, options.map(function () {

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

@@ -1 +1 @@
-{"version":3,"file":"Menu.js","names":["Menu","children","options","Template","Option","visible","onPress","others","style","menu","className","map","option","index","undefined","disabled","event","value","displayName","propTypes","PropTypes","node","arrayOf","shape","bool","divider","icon","string","label","oneOfType","number","isRequired","func"],"sources":["../../../src/components/Menu/Menu.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { Layer, LayerContent } from '../../primitives';\nimport style from './Menu.module.css';\nimport { Option } from './Menu.Option';\n\nconst Menu = ({ children, options = [], Template = Option, visible, onPress = () => {}, ...others }) => {\n  return (\n    <Layer {...others} className={styles(style.menu, visible && style.visible, others.className)} visible={visible}>\n      {children}\n      <LayerContent>\n        {options.map((option = {}, index) => (\n          <Template\n            {...option}\n            data-testid={others['data-testid'] ? `${others['data-testid']}-${index}` : undefined}\n            key={index}\n            onPress={!option.disabled ? (event) => onPress(option.value, event) : undefined}\n          />\n        ))}\n      </LayerContent>\n    </Layer>\n  );\n};\n\nMenu.displayName = 'Component:Menu';\n\nMenu.propTypes = {\n  children: PropTypes.node,\n  options: PropTypes.arrayOf(\n    PropTypes.shape({\n      children: PropTypes.node,\n      disabled: PropTypes.bool,\n      divider: PropTypes.bool,\n      icon: PropTypes.string,\n      label: PropTypes.string,\n      value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,\n    }),\n  ),\n  Template: PropTypes.node,\n  visible: PropTypes.bool,\n  onPress: PropTypes.func,\n};\n\nexport { Menu };\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;;;;;;;;;AAEA,IAAMA,IAAI,GAAG,SAAPA,IAAO,OAA2F;EAAA,IAAxFC,QAAwF,QAAxFA,QAAwF;EAAA,wBAA9EC,OAA8E;EAAA,IAA9EA,OAA8E,6BAApE,EAAoE;EAAA,yBAAhEC,QAAgE;EAAA,IAAhEA,QAAgE,8BAArDC,YAAqD;EAAA,IAA7CC,OAA6C,QAA7CA,OAA6C;EAAA,wBAApCC,OAAoC;EAAA,IAApCA,OAAoC,6BAA1B,YAAM,CAAE,CAAkB;EAAA,IAAbC,MAAa;;EACtG,oBACE,6BAAC,iBAAD,eAAWA,MAAX;IAAmB,SAAS,EAAE,qBAAOC,oBAAMC,IAAb,EAAmBJ,OAAO,IAAIG,oBAAMH,OAApC,EAA6CE,MAAM,CAACG,SAApD,CAA9B;IAA8F,OAAO,EAAEL;EAAvG,IACGJ,QADH,eAEE,6BAAC,wBAAD,QACGC,OAAO,CAACS,GAAR,CAAY;IAAA,IAACC,MAAD,uEAAU,EAAV;IAAA,IAAcC,KAAd;IAAA,oBACX,6BAAC,QAAD,eACMD,MADN;MAEE,eAAaL,MAAM,CAAC,aAAD,CAAN,aAA2BA,MAAM,CAAC,aAAD,CAAjC,cAAoDM,KAApD,IAA8DC,SAF7E;MAGE,GAAG,EAAED,KAHP;MAIE,OAAO,EAAE,CAACD,MAAM,CAACG,QAAR,GAAmB,UAACC,KAAD;QAAA,OAAWV,OAAO,CAACM,MAAM,CAACK,KAAR,EAAeD,KAAf,CAAlB;MAAA,CAAnB,GAA6DF;IAJxE,GADW;EAAA,CAAZ,CADH,CAFF,CADF;AAeD,CAhBD;;;AAkBAd,IAAI,CAACkB,WAAL,GAAmB,gBAAnB;AAEAlB,IAAI,CAACmB,SAAL,GAAiB;EACflB,QAAQ,EAAEmB,mBAAUC,IADL;EAEfnB,OAAO,EAAEkB,mBAAUE,OAAV,CACPF,mBAAUG,KAAV,CAAgB;IACdtB,QAAQ,EAAEmB,mBAAUC,IADN;IAEdN,QAAQ,EAAEK,mBAAUI,IAFN;IAGdC,OAAO,EAAEL,mBAAUI,IAHL;IAIdE,IAAI,EAAEN,mBAAUO,MAJF;IAKdC,KAAK,EAAER,mBAAUO,MALH;IAMdV,KAAK,EAAEG,mBAAUS,SAAV,CAAoB,CAACT,mBAAUO,MAAX,EAAmBP,mBAAUU,MAA7B,CAApB,EAA0DC;EANnD,CAAhB,CADO,CAFM;EAYf5B,QAAQ,EAAEiB,mBAAUC,IAZL;EAafhB,OAAO,EAAEe,mBAAUI,IAbJ;EAcflB,OAAO,EAAEc,mBAAUY;AAdJ,CAAjB"}
+{"version":3,"file":"Menu.js","names":["Menu","children","options","Template","Option","visible","onPress","others","style","menu","className","map","option","index","undefined","disabled","event","value","displayName","propTypes","PropTypes","node","arrayOf","shape","bool","divider","icon","string","label","oneOfType","number","isRequired","func"],"sources":["../../../src/components/Menu/Menu.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { Layer, LayerContent } from '../../primitives';\nimport style from './Menu.module.css';\nimport { Option } from './Menu.Option';\n\nconst Menu = ({ children, options = [], Template = Option, visible, onPress = () => {}, ...others }) => {\n  return (\n    <Layer\n      forceRender={false}\n      {...others}\n      className={styles(style.menu, visible && style.visible, others.className)}\n      visible={visible}\n    >\n      {children}\n      <LayerContent>\n        {options.map((option = {}, index) => (\n          <Template\n            {...option}\n            data-testid={others['data-testid'] ? `${others['data-testid']}-${index}` : undefined}\n            key={index}\n            onPress={!option.disabled ? (event) => onPress(option.value, event) : undefined}\n          />\n        ))}\n      </LayerContent>\n    </Layer>\n  );\n};\n\nMenu.displayName = 'Component:Menu';\n\nMenu.propTypes = {\n  children: PropTypes.node,\n  options: PropTypes.arrayOf(\n    PropTypes.shape({\n      children: PropTypes.node,\n      disabled: PropTypes.bool,\n      divider: PropTypes.bool,\n      icon: PropTypes.string,\n      label: PropTypes.string,\n      value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,\n    }),\n  ),\n  Template: PropTypes.node,\n  visible: PropTypes.bool,\n  onPress: PropTypes.func,\n};\n\nexport { Menu };\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;;;;;;;;;AAEA,IAAMA,IAAI,GAAG,SAAPA,IAAO,OAA2F;EAAA,IAAxFC,QAAwF,QAAxFA,QAAwF;EAAA,wBAA9EC,OAA8E;EAAA,IAA9EA,OAA8E,6BAApE,EAAoE;EAAA,yBAAhEC,QAAgE;EAAA,IAAhEA,QAAgE,8BAArDC,YAAqD;EAAA,IAA7CC,OAA6C,QAA7CA,OAA6C;EAAA,wBAApCC,OAAoC;EAAA,IAApCA,OAAoC,6BAA1B,YAAM,CAAE,CAAkB;EAAA,IAAbC,MAAa;;EACtG,oBACE,6BAAC,iBAAD;IACE,WAAW,EAAE;EADf,GAEMA,MAFN;IAGE,SAAS,EAAE,qBAAOC,oBAAMC,IAAb,EAAmBJ,OAAO,IAAIG,oBAAMH,OAApC,EAA6CE,MAAM,CAACG,SAApD,CAHb;IAIE,OAAO,EAAEL;EAJX,IAMGJ,QANH,eAOE,6BAAC,wBAAD,QACGC,OAAO,CAACS,GAAR,CAAY;IAAA,IAACC,MAAD,uEAAU,EAAV;IAAA,IAAcC,KAAd;IAAA,oBACX,6BAAC,QAAD,eACMD,MADN;MAEE,eAAaL,MAAM,CAAC,aAAD,CAAN,aAA2BA,MAAM,CAAC,aAAD,CAAjC,cAAoDM,KAApD,IAA8DC,SAF7E;MAGE,GAAG,EAAED,KAHP;MAIE,OAAO,EAAE,CAACD,MAAM,CAACG,QAAR,GAAmB,UAACC,KAAD;QAAA,OAAWV,OAAO,CAACM,MAAM,CAACK,KAAR,EAAeD,KAAf,CAAlB;MAAA,CAAnB,GAA6DF;IAJxE,GADW;EAAA,CAAZ,CADH,CAPF,CADF;AAoBD,CArBD;;;AAuBAd,IAAI,CAACkB,WAAL,GAAmB,gBAAnB;AAEAlB,IAAI,CAACmB,SAAL,GAAiB;EACflB,QAAQ,EAAEmB,mBAAUC,IADL;EAEfnB,OAAO,EAAEkB,mBAAUE,OAAV,CACPF,mBAAUG,KAAV,CAAgB;IACdtB,QAAQ,EAAEmB,mBAAUC,IADN;IAEdN,QAAQ,EAAEK,mBAAUI,IAFN;IAGdC,OAAO,EAAEL,mBAAUI,IAHL;IAIdE,IAAI,EAAEN,mBAAUO,MAJF;IAKdC,KAAK,EAAER,mBAAUO,MALH;IAMdV,KAAK,EAAEG,mBAAUS,SAAV,CAAoB,CAACT,mBAAUO,MAAX,EAAmBP,mBAAUU,MAA7B,CAApB,EAA0DC;EANnD,CAAhB,CADO,CAFM;EAYf5B,QAAQ,EAAEiB,mBAAUC,IAZL;EAafhB,OAAO,EAAEe,mBAAUI,IAbJ;EAcflB,OAAO,EAAEc,mBAAUY;AAdJ,CAAjB"}

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

@@ -53,7 +53,7 @@ exports[`component:<Menu> w/ options & visible 1`] = `
       Action
     </button>
   </span>
-  <span
+  <div
     class="layer menu visible"
     style="left: 0px; top: 0px;"
   >
@@ -161,7 +161,7 @@ exports[`component:<Menu> w/ options & visible 1`] = `
         Add
       </button>
     </div>
-  </span>
+  </div>
 </DocumentFragment>
 `;
 

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

@@ -8,3 +8,8 @@
     top var(--mirai-ui-motion-expand) var(--mirai-ui-motion-easing);
   z-index: var(--mirai-ui-layer-content);
 }
+
+.layer.hidden {
+  display: none;
+  visibility: hidden;
+}

package/build/primitives/Layer/__tests__/__snapshots__/Layer.test.js.snap

@@ -3,12 +3,18 @@
 exports[`primitive:<Layer> inherit:className 1`] = `
 <DocumentFragment>
   <span />
+  <div
+    class="layer hidden mirai"
+  />
 </DocumentFragment>
 `;
 
 exports[`primitive:<Layer> renders 1`] = `
 <DocumentFragment>
   <span />
+  <div
+    class="layer hidden"
+  />
 </DocumentFragment>
 `;
 
@@ -17,6 +23,9 @@ exports[`primitive:<Layer> testID 1`] = `
   <span
     data-testid="mirai"
   />
+  <div
+    class="layer hidden"
+  />
 </DocumentFragment>
 `;
 
@@ -29,7 +38,7 @@ exports[`primitive:<Layer> w/ centered && visible 1`] = `
       Action
     </button>
   </span>
-  <span
+  <div
     class="layer"
     style="left: 0px; top: 0px;"
   >
@@ -38,7 +47,7 @@ exports[`primitive:<Layer> w/ centered && visible 1`] = `
     >
       Mirai
     </span>
-  </span>
+  </div>
 </DocumentFragment>
 `;
 
@@ -51,10 +60,36 @@ exports[`primitive:<Layer> w/ component & <LayerContent> 1`] = `
       Action
     </button>
   </span>
+  <div
+    class="layer hidden"
+    style="left: 0px; top: 0px;"
+  >
+    <span
+      class="text paragraph"
+    >
+      Mirai
+    </span>
+  </div>
 </DocumentFragment>
 `;
 
 exports[`primitive:<Layer> w/ component 1`] = `
+<DocumentFragment>
+  <span>
+    <button
+      class="pressable button"
+    >
+      Action
+    </button>
+  </span>
+  <div
+    class="layer hidden"
+    style="left: 0px; top: 0px;"
+  />
+</DocumentFragment>
+`;
+
+exports[`primitive:<Layer> w/ forceRender={false} & <LayerContent> 1`] = `
 <DocumentFragment>
   <span>
     <button
@@ -75,7 +110,7 @@ exports[`primitive:<Layer> w/ visible 1`] = `
       Action
     </button>
   </span>
-  <span
+  <div
     class="layer"
     style="left: 0px; top: 0px;"
   >
@@ -84,6 +119,6 @@ exports[`primitive:<Layer> w/ visible 1`] = `
     >
       Mirai
     </span>
-  </span>
+  </div>
 </DocumentFragment>
 `;

package/package.json

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