@mirai/ui 1.0.10 → 1.0.11

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

@@ -0,0 +1,50 @@
+:root {
+  --mirai-ui-menu-base: var(--mirai-ui-base);
+  --mirai-ui-menu-border-radius: var(--mirai-ui-border-radius);
+  --mirai-ui-menu-min-width: 200px;
+  --mirai-ui-menu-shadow: 0 1px calc(var(--mirai-ui-space-XS) / 2) var(--mirai-ui-lighten);
+  --mirai-ui-menu-option-padding: var(--mirai-ui-space-M);
+  --mirai-ui-menu-option-disabled: var(--mirai-ui-disabled);
+  --mirai-ui-menu-option-hover: var(--mirai-ui-accent-lighten);
+}
+
+.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;
+}
+
+.menu .option {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: row;
+  padding: var(--mirai-ui-menu-option-padding);
+  align-items: center;
+  flex: 1;
+  width: 100%;
+}
+
+.menu .option:hover:not(.disabled) {
+  background-color: var(--mirai-ui-menu-option-hover);
+}
+
+.menu .icon {
+  margin-right: var(--mirai-ui-menu-option-padding);
+}
+
+.menu .label {
+  flex: 1;
+  text-align: left;
+  padding-right: var(--mirai-ui-menu-option-padding);
+}
+
+.menu .divider {
+  box-shadow: inset 0 -1px var(--mirai-ui-menu-option-disabled);
+}
+
+.menu .disabled {
+  color: var(--mirai-ui-menu-option-disabled);
+  cursor: default;
+}

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

@@ -0,0 +1,178 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`component:<Menu> inherit:className 1`] = `
+<DocumentFragment>
+  <span />
+</DocumentFragment>
+`;
+
+exports[`component:<Menu> renders 1`] = `
+<DocumentFragment>
+  <span />
+</DocumentFragment>
+`;
+
+exports[`component:<Menu> testID 1`] = `
+<DocumentFragment>
+  <span
+    data-testid="mirai"
+  />
+</DocumentFragment>
+`;
+
+exports[`component:<Menu> w/ Template 1`] = `
+<DocumentFragment>
+  <span>
+    <button
+      class="pressable button"
+    >
+      Action
+    </button>
+  </span>
+</DocumentFragment>
+`;
+
+exports[`component:<Menu> w/ children 1`] = `
+<DocumentFragment>
+  <span>
+    <button
+      class="pressable button"
+    >
+      Action
+    </button>
+  </span>
+</DocumentFragment>
+`;
+
+exports[`component:<Menu> w/ options & visible 1`] = `
+<DocumentFragment>
+  <span>
+    <button
+      class="pressable button"
+    >
+      Action
+    </button>
+  </span>
+  <span
+    class="layer menu visible"
+    style="left: 0px; top: 0px;"
+  >
+    <div
+      class="pressable option"
+      value="one"
+    >
+      <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="12"
+            x2="12"
+            y1="5"
+            y2="19"
+          />
+          <line
+            x1="5"
+            x2="19"
+            y1="12"
+            y2="12"
+          />
+        </svg>
+      </span>
+      <span
+        class="text paragraph label"
+      >
+        Item 1
+      </span>
+    </div>
+    <div
+      class="pressable option disabled"
+      value="two"
+    >
+      <span
+        class="icon icon disabled"
+      >
+        <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="12"
+            x2="12"
+            y1="5"
+            y2="19"
+          />
+          <line
+            x1="5"
+            x2="19"
+            y1="12"
+            y2="12"
+          />
+        </svg>
+      </span>
+      <span
+        class="text paragraph label disabled"
+      >
+        Item 2
+      </span>
+    </div>
+    <div
+      class="pressable option divider"
+      value="three"
+    >
+      <span
+        class="icon icon"
+      />
+      <span
+        class="text paragraph label"
+      >
+        Item 3
+      </span>
+    </div>
+    <div
+      class="pressable option"
+      value="four"
+    >
+      <span
+        class="text paragraph label"
+      >
+        Item 4
+      </span>
+      <button
+        class="pressable button small"
+      >
+        Add
+      </button>
+    </div>
+  </span>
+</DocumentFragment>
+`;
+
+exports[`component:<Menu> w/ options 1`] = `
+<DocumentFragment>
+  <span>
+    <button
+      class="pressable button"
+    >
+      Action
+    </button>
+  </span>
+</DocumentFragment>
+`;

package/build/components/Menu/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _Menu = require("./Menu");
+
+Object.keys(_Menu).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Menu[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Menu[key];
+    }
+  });
+});
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/Menu/index.js"],"sourcesContent":["export * from './Menu';\n"],"mappings":";;;;;;AAAA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}

package/build/components/Tooltip/Tooltip.js

@@ -0,0 +1,65 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Tooltip = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
+
+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 Tooltip = function Tooltip(_ref) {
+  var children = _ref.children,
+      Template = _ref.Template,
+      text = _ref.text,
+      others = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+
+  var _useState = (0, _react.useState)(others.visible || false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      visible = _useState2[0],
+      setVisible = _useState2[1];
+
+  return /*#__PURE__*/_react.default.createElement(_primitives.Layer, Object.assign({}, others, {
+    centered: true,
+    visible: visible
+  }), _react.default.Children.map(children, function (child, index) {
+    return /*#__PURE__*/_react.default.cloneElement(child, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, 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);
+      }
+    }));
+  }), /*#__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, {
+    bold: true,
+    small: true,
+    className: _TooltipModule.default.text
+  }, text))));
+};
+
+exports.Tooltip = Tooltip;
+Tooltip.displayName = 'Component:Tooltip';
+//# sourceMappingURL=Tooltip.js.map

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

@@ -0,0 +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"],"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":";;;;;;;;;;;;;;;;;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,oBAAWF,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,8DACKA,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"}

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

@@ -0,0 +1,26 @@
+:root {
+  --mirai-ui-tooltip-background: rgba(0, 0, 0, 0.8);
+  --mirai-ui-tooltip-border-radius: var(--mirai-ui-border-radius);
+  --mirai-ui-tooltip-color: var(--mirai-ui-base);
+  --mirai-ui-tooltip-space: var(--mirai-ui-space-XS);
+  --mirai-ui-tooltip-max-width: calc(var(--mirai-ui-space-XXL) * 4);
+}
+
+.dispatcher {
+  cursor: pointer;
+}
+
+.tooltip {
+  background-color: var(--mirai-ui-tooltip-background);
+  border-radius: var(--mirai-ui-tooltip-border-radius);
+  margin-bottom: calc(var(--mirai-ui-tooltip-space) / 2);
+  margin-top: calc(var(--mirai-ui-tooltip-space) / 2);
+  max-width: var(--mirai-ui-tooltip-max-width);
+  padding: var(--mirai-ui-tooltip-space);
+  pointer-events: none;
+}
+
+.tooltip .text {
+  color: var(--mirai-ui-tooltip-color);
+  text-align: center;
+}

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

@@ -0,0 +1,117 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[` 1`] = `
+<DocumentFragment>
+  <span
+    data-testid="onEnter"
+  >
+    <button
+      class="pressable button dispatcher"
+      data-testid="onEnter-dispatcher"
+    >
+      Action
+    </button>
+  </span>
+</DocumentFragment>
+`;
+
+exports[` 2`] = `
+<DocumentFragment>
+  <span
+    data-testid="onEnter"
+  >
+    <button
+      class="pressable button dispatcher"
+      data-testid="onEnter-dispatcher"
+    >
+      Action
+    </button>
+  </span>
+</DocumentFragment>
+`;
+
+exports[`component:<Tooltip> inherit:className 1`] = `
+<DocumentFragment>
+  <span />
+</DocumentFragment>
+`;
+
+exports[`component:<Tooltip> renders 1`] = `
+<DocumentFragment>
+  <span />
+</DocumentFragment>
+`;
+
+exports[`component:<Tooltip> simulate behavior: onEnter & onLeave w/ Template 1`] = `
+<DocumentFragment>
+  <span
+    data-testid="onEnter"
+  >
+    <button
+      class="pressable button dispatcher"
+      data-testid="onEnter-dispatcher"
+    >
+      Action
+    </button>
+  </span>
+</DocumentFragment>
+`;
+
+exports[`component:<Tooltip> simulate behavior: onEnter & onLeave w/ Template 2`] = `
+<DocumentFragment>
+  <span
+    data-testid="onEnter"
+  >
+    <button
+      class="pressable button dispatcher"
+      data-testid="onEnter-dispatcher"
+    >
+      Action
+    </button>
+  </span>
+</DocumentFragment>
+`;
+
+exports[`component:<Tooltip> testID 1`] = `
+<DocumentFragment>
+  <span
+    data-testid="mirai"
+  />
+</DocumentFragment>
+`;
+
+exports[`component:<Tooltip> w/ children + Template 1`] = `
+<DocumentFragment>
+  <span>
+    <button
+      class="pressable button dispatcher"
+    >
+      Action
+    </button>
+  </span>
+</DocumentFragment>
+`;
+
+exports[`component:<Tooltip> w/ children + text 1`] = `
+<DocumentFragment>
+  <span>
+    <button
+      class="pressable button dispatcher"
+    >
+      Action
+    </button>
+  </span>
+</DocumentFragment>
+`;
+
+exports[`component:<Tooltip> w/ children 1`] = `
+<DocumentFragment>
+  <span>
+    <button
+      class="pressable button dispatcher"
+    >
+      Action
+    </button>
+  </span>
+</DocumentFragment>
+`;

package/build/components/Tooltip/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _Tooltip = require("./Tooltip");
+
+Object.keys(_Tooltip).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Tooltip[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Tooltip[key];
+    }
+  });
+});
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/Tooltip/index.js"],"sourcesContent":["export * from './Tooltip';\n"],"mappings":";;;;;;AAAA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}

package/build/components/index.js

@@ -95,6 +95,19 @@ Object.keys(_InputText).forEach(function (key) {
   });
 });
 
+var _Menu = require("./Menu");
+
+Object.keys(_Menu).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Menu[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Menu[key];
+    }
+  });
+});
+
 var _Modal = require("./Modal");
 
 Object.keys(_Modal).forEach(function (key) {
@@ -120,4 +133,17 @@ Object.keys(_Table).forEach(function (key) {
     }
   });
 });
+
+var _Tooltip = require("./Tooltip");
+
+Object.keys(_Tooltip).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Tooltip[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Tooltip[key];
+    }
+  });
+});
 //# sourceMappingURL=index.js.map

package/build/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/components/index.js"],"sourcesContent":["export * from './Button';\nexport * from './Calendar';\nexport * from './Form';\nexport * from './InputNumber';\nexport * from './InputOption';\nexport * from './InputSelect';\nexport * from './InputText';\nexport * from './Modal';\nexport * from './Table';\n"],"mappings":";;;;;;AAAA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/components/index.js"],"sourcesContent":["export * from './Button';\nexport * from './Calendar';\nexport * from './Form';\nexport * from './InputNumber';\nexport * from './InputOption';\nexport * from './InputSelect';\nexport * from './InputText';\nexport * from './Menu';\nexport * from './Modal';\nexport * from './Table';\nexport * from './Tooltip';\n"],"mappings":";;;;;;AAAA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}

package/build/primitives/Icon/Icon.constants.js

@@ -8,6 +8,7 @@ exports.ICONS = void 0;
 var _fi = require("react-icons/fi");
 
 var ICONS = {
+  Empty: undefined,
   // directions
   Left: _fi.FiArrowLeft,
   Right: _fi.FiArrowRight,

package/build/primitives/Icon/Icon.constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.constants.js","names":["ICONS","Left","Right","Up","Down","Close","CloseArrow","Plus","Minus","EyeOpen","EyeClose","Check"],"sources":["../../../src/primitives/Icon/Icon.constants.js"],"sourcesContent":["import {\n  FiArrowUp as Up,\n  FiArrowDown as Down,\n  FiArrowLeft as Left,\n  FiArrowRight as Right,\n  FiChevronDown as CloseArrow,\n  FiX as Close,\n  FiEye as EyeOpen,\n  FiEyeOff as EyeClose,\n  FiPlus as Plus,\n  FiMinus as Minus,\n  FiCheck as Check,\n} from 'react-icons/fi';\n\nconst ICONS = {\n  // directions\n  Left,\n  Right,\n  Up,\n  Down,\n  // Close\n  Close,\n  CloseArrow,\n  // Calc\n  Plus,\n  Minus,\n  // Eye\n  EyeOpen,\n  EyeClose,\n  // Check\n  Check,\n};\n\nexport { ICONS };\n"],"mappings":";;;;;;;AAAA;;AAcA,IAAMA,KAAK,GAAG;EACZ;EACAC,IAAI,EAAJA,eAFY;EAGZC,KAAK,EAALA,gBAHY;EAIZC,EAAE,EAAFA,aAJY;EAKZC,IAAI,EAAJA,eALY;EAMZ;EACAC,KAAK,EAALA,OAPY;EAQZC,UAAU,EAAVA,iBARY;EASZ;EACAC,IAAI,EAAJA,UAVY;EAWZC,KAAK,EAALA,WAXY;EAYZ;EACAC,OAAO,EAAPA,SAbY;EAcZC,QAAQ,EAARA,YAdY;EAeZ;EACAC,KAAK,EAALA;AAhBY,CAAd"}
+{"version":3,"file":"Icon.constants.js","names":["ICONS","Empty","undefined","Left","Right","Up","Down","Close","CloseArrow","Plus","Minus","EyeOpen","EyeClose","Check"],"sources":["../../../src/primitives/Icon/Icon.constants.js"],"sourcesContent":["import {\n  FiArrowUp as Up,\n  FiArrowDown as Down,\n  FiArrowLeft as Left,\n  FiArrowRight as Right,\n  FiChevronDown as CloseArrow,\n  FiX as Close,\n  FiEye as EyeOpen,\n  FiEyeOff as EyeClose,\n  FiPlus as Plus,\n  FiMinus as Minus,\n  FiCheck as Check,\n} from 'react-icons/fi';\n\nconst ICONS = {\n  Empty: undefined,\n  // directions\n  Left,\n  Right,\n  Up,\n  Down,\n  // Close\n  Close,\n  CloseArrow,\n  // Calc\n  Plus,\n  Minus,\n  // Eye\n  EyeOpen,\n  EyeClose,\n  // Check\n  Check,\n};\n\nexport { ICONS };\n"],"mappings":";;;;;;;AAAA;;AAcA,IAAMA,KAAK,GAAG;EACZC,KAAK,EAAEC,SADK;EAEZ;EACAC,IAAI,EAAJA,eAHY;EAIZC,KAAK,EAALA,gBAJY;EAKZC,EAAE,EAAFA,aALY;EAMZC,IAAI,EAAJA,eANY;EAOZ;EACAC,KAAK,EAALA,OARY;EASZC,UAAU,EAAVA,iBATY;EAUZ;EACAC,IAAI,EAAJA,UAXY;EAYZC,KAAK,EAALA,WAZY;EAaZ;EACAC,OAAO,EAAPA,SAdY;EAeZC,QAAQ,EAARA,YAfY;EAgBZ;EACAC,KAAK,EAALA;AAjBY,CAAd"}

package/build/primitives/Layer/Layer.js

@@ -27,63 +27,61 @@ var _LayerModule = _interopRequireDefault(require("./Layer.module.css"));
 
 var _LayerContent = require("./LayerContent");
 
-var _excluded = ["visible"];
+var _excluded = ["centered", "visible"];
 
 var Layer = function Layer(_ref) {
-  var visible = _ref.visible,
+  var centered = _ref.centered,
+      visible = _ref.visible,
       others = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var device = (0, _hooks.useDevice)();
-  var componentRef = (0, _react.useRef)(null);
-  var contentRef = (0, _react.useRef)(null);
+  var componentRef = (0, _react.useRef)();
+  var contentRef = (0, _react.useRef)();
 
-  var _useState = (0, _react.useState)({}),
+  var _useState = (0, _react.useState)(),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
       position = _useState2[0],
       setPosition = _useState2[1];
 
-  (0, _react.useEffect)(function () {
-    if (visible) {
-      var _componentRef$current = componentRef.current;
-      _componentRef$current = _componentRef$current === void 0 ? {} : _componentRef$current;
-      var componentEl = _componentRef$current.firstChild;
-      var _contentRef$current = contentRef.current;
-      _contentRef$current = _contentRef$current === void 0 ? {} : _contentRef$current;
-      var contentEl = _contentRef$current.firstChild;
-      if (!componentEl || !contentEl) return;
-
-      var _getLayerPosition = (0, _helpers2.getLayerPosition)((0, _helpers2.getElementLayout)(componentEl), (0, _helpers2.getElementLayout)(contentEl), device),
-          _getLayerPosition$lef = _getLayerPosition.left,
-          left = _getLayerPosition$lef === void 0 ? 0 : _getLayerPosition$lef,
-          _getLayerPosition$top = _getLayerPosition.top,
-          top = _getLayerPosition$top === void 0 ? 0 : _getLayerPosition$top;
-
-      setPosition({
-        left: "".concat(left, "px"),
-        top: "".concat(top, "px")
-      });
-    }
-  }, [device, visible]);
+  (0, _react.useLayoutEffect)(function () {
+    var _componentRef$current = componentRef.current;
+    _componentRef$current = _componentRef$current === void 0 ? {} : _componentRef$current;
+    var componentEl = _componentRef$current.firstChild;
+    var contentEl = contentRef.current;
+    if (!componentEl || !contentEl) return setPosition();
+    var componentLayout = (0, _helpers2.getElementLayout)(componentEl);
+    var contentLayout = (0, _helpers2.getElementLayout)(contentEl);
+
+    var _getLayerPosition = (0, _helpers2.getLayerPosition)(componentLayout, contentLayout, device, centered),
+        _getLayerPosition$lef = _getLayerPosition.left,
+        left = _getLayerPosition$lef === void 0 ? 0 : _getLayerPosition$lef,
+        _getLayerPosition$top = _getLayerPosition.top,
+        top = _getLayerPosition$top === void 0 ? 0 : _getLayerPosition$top;
+
+    setPosition({
+      left: "".concat(left, "px"),
+      top: "".concat(top, "px")
+    });
+  }, [centered, device, visible]);
 
   var children = _react.default.Children.map(others.children || [], function (child) {
     return child;
   });
 
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
+    "data-testid": others['data-testid'],
     ref: componentRef
   }, children.find(function (_ref2) {
     var name = _ref2.type.name;
     return name !== _LayerContent.LayerContent.name;
-  })), visible && /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _helpers.styles)(_LayerModule.default.layerContent, others.className),
+  })), visible && /*#__PURE__*/_react.default.createElement("span", {
+    ref: contentRef,
+    className: (0, _helpers.styles)(_LayerModule.default.layer, others.className),
     style: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, others.style), position)
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    ref: contentRef
   }, children.find(function (_ref3) {
     var name = _ref3.type.name;
     return name === _LayerContent.LayerContent.name;
-  }))));
+  })));
 };
 
 exports.Layer = Layer;
-Layer.displayName = 'Primitive:Layer';
 //# sourceMappingURL=Layer.js.map