@arconnect/components - npm Package Compare versions

Comparing version 0.1.24 to 0.1.25

dist/commonjs/Tooltip/index.js

@@ -56,3 +56,3 @@ "use strict";
 var TooltipWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  display: inline-flex;\n  ", "\n  ", "\n"], ["\n  position: relative;\n  display: inline-flex;\n  ", "\n  ", "\n"])), function (props) { return props.underline ? "border-bottom: 1px dotted rgb(" + props.theme.cardBorder + ");" : ""; }, function (props) { return props.underline ? "cursor: pointer;" : ""; });
-var TooltipElement = (0, styled_components_1.default)(framer_motion_1.motion.div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  padding: .37rem .58rem;\n  border-radius: 7px;\n  font-size: .86rem;\n  font-weight: 600;\n  color: #eaeaea;\n  background-color: #18191C;\n  z-index: 100;\n  width: max-content;\n\n  &::after {\n    position: absolute;\n    content: \"\";\n    border: 4px solid;\n    border-color: ", " ", " ", " ", ";\n    ", "\n  }\n"], ["\n  position: absolute;\n  padding: .37rem .58rem;\n  border-radius: 7px;\n  font-size: .86rem;\n  font-weight: 600;\n  color: #eaeaea;\n  background-color: #18191C;\n  z-index: 100;\n  width: max-content;\n\n  &::after {\n    position: absolute;\n    content: \"\";\n    border: 4px solid;\n    border-color: ", " ", " ", " ", ";\n    ", "\n  }\n"])), function (props) { return props.position.startsWith("top") ? "#18191C" : "transparent"; }, function (props) { return props.position.startsWith("right") ? "#18191C" : "transparent"; }, function (props) { return props.position.startsWith("bottom") ? "#18191C" : "transparent"; }, function (props) { return props.position.startsWith("left") ? "#18191C" : "transparent"; }, function (props) { return (0, position_1.getArrowPosition)(props.position); });
+var TooltipElement = (0, styled_components_1.default)(framer_motion_1.motion.div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  padding: .37rem .58rem;\n  border-radius: 7px;\n  font-size: .86rem;\n  font-weight: 600;\n  color: #eaeaea;\n  background-color: #18191C;\n  z-index: 100;\n  width: max-content;\n  box-shadow: 0 8px 16px rgba(0, 0, 0, .14);\n\n  &::after {\n    position: absolute;\n    content: \"\";\n    border: 4px solid;\n    border-color: ", " ", " ", " ", ";\n    ", "\n  }\n"], ["\n  position: absolute;\n  padding: .37rem .58rem;\n  border-radius: 7px;\n  font-size: .86rem;\n  font-weight: 600;\n  color: #eaeaea;\n  background-color: #18191C;\n  z-index: 100;\n  width: max-content;\n  box-shadow: 0 8px 16px rgba(0, 0, 0, .14);\n\n  &::after {\n    position: absolute;\n    content: \"\";\n    border: 4px solid;\n    border-color: ", " ", " ", " ", ";\n    ", "\n  }\n"])), function (props) { return props.position.startsWith("top") ? "#18191C" : "transparent"; }, function (props) { return props.position.startsWith("right") ? "#18191C" : "transparent"; }, function (props) { return props.position.startsWith("bottom") ? "#18191C" : "transparent"; }, function (props) { return props.position.startsWith("left") ? "#18191C" : "transparent"; }, function (props) { return (0, position_1.getArrowPosition)(props.position); });
 var templateObject_1, templateObject_2;

dist/commonjs/Tooltip/position.js

@@ -78,8 +78,24 @@ "use strict";
     if (position.startsWith("top") || position.startsWith("bottom")) {
-        style += "left: 50%;\n";
-        style += "transform: translate(-50%, 0);";
+        if (position.includes("Start")) {
+            style += "left: 8px;";
+        }
+        else if (position.includes("End")) {
+            style += "right: 8px;";
+        }
+        else {
+            style += "left: 50%;\n";
+            style += "transform: translate(-50%, 0);";
+        }
     }
     else {
-        style += "top: 50%;\n";
-        style += "transform: translate(0, -50%);";
+        if (position.includes("Start")) {
+            style += "top: 8px;";
+        }
+        else if (position.includes("End")) {
+            style += "bottom: 8px;";
+        }
+        else {
+            style += "top: 50%;\n";
+            style += "transform: translate(0, -50%);";
+        }
     }
@@ -86,0 +102,0 @@ return style;

dist/module/Tooltip/index.js

@@ -49,3 +49,3 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
 var TooltipWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  display: inline-flex;\n  ", "\n  ", "\n"], ["\n  position: relative;\n  display: inline-flex;\n  ", "\n  ", "\n"])), function (props) { return props.underline ? "border-bottom: 1px dotted rgb(" + props.theme.cardBorder + ");" : ""; }, function (props) { return props.underline ? "cursor: pointer;" : ""; });
-var TooltipElement = styled(motion.div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  padding: .37rem .58rem;\n  border-radius: 7px;\n  font-size: .86rem;\n  font-weight: 600;\n  color: #eaeaea;\n  background-color: #18191C;\n  z-index: 100;\n  width: max-content;\n\n  &::after {\n    position: absolute;\n    content: \"\";\n    border: 4px solid;\n    border-color: ", " ", " ", " ", ";\n    ", "\n  }\n"], ["\n  position: absolute;\n  padding: .37rem .58rem;\n  border-radius: 7px;\n  font-size: .86rem;\n  font-weight: 600;\n  color: #eaeaea;\n  background-color: #18191C;\n  z-index: 100;\n  width: max-content;\n\n  &::after {\n    position: absolute;\n    content: \"\";\n    border: 4px solid;\n    border-color: ", " ", " ", " ", ";\n    ", "\n  }\n"])), function (props) { return props.position.startsWith("top") ? "#18191C" : "transparent"; }, function (props) { return props.position.startsWith("right") ? "#18191C" : "transparent"; }, function (props) { return props.position.startsWith("bottom") ? "#18191C" : "transparent"; }, function (props) { return props.position.startsWith("left") ? "#18191C" : "transparent"; }, function (props) { return getArrowPosition(props.position); });
+var TooltipElement = styled(motion.div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  padding: .37rem .58rem;\n  border-radius: 7px;\n  font-size: .86rem;\n  font-weight: 600;\n  color: #eaeaea;\n  background-color: #18191C;\n  z-index: 100;\n  width: max-content;\n  box-shadow: 0 8px 16px rgba(0, 0, 0, .14);\n\n  &::after {\n    position: absolute;\n    content: \"\";\n    border: 4px solid;\n    border-color: ", " ", " ", " ", ";\n    ", "\n  }\n"], ["\n  position: absolute;\n  padding: .37rem .58rem;\n  border-radius: 7px;\n  font-size: .86rem;\n  font-weight: 600;\n  color: #eaeaea;\n  background-color: #18191C;\n  z-index: 100;\n  width: max-content;\n  box-shadow: 0 8px 16px rgba(0, 0, 0, .14);\n\n  &::after {\n    position: absolute;\n    content: \"\";\n    border: 4px solid;\n    border-color: ", " ", " ", " ", ";\n    ", "\n  }\n"])), function (props) { return props.position.startsWith("top") ? "#18191C" : "transparent"; }, function (props) { return props.position.startsWith("right") ? "#18191C" : "transparent"; }, function (props) { return props.position.startsWith("bottom") ? "#18191C" : "transparent"; }, function (props) { return props.position.startsWith("left") ? "#18191C" : "transparent"; }, function (props) { return getArrowPosition(props.position); });
 var templateObject_1, templateObject_2;

dist/module/Tooltip/position.js

@@ -74,10 +74,26 @@ export function getPosition(position) {
     if (position.startsWith("top") || position.startsWith("bottom")) {
-        style += "left: 50%;\n";
-        style += "transform: translate(-50%, 0);";
+        if (position.includes("Start")) {
+            style += "left: 8px;";
+        }
+        else if (position.includes("End")) {
+            style += "right: 8px;";
+        }
+        else {
+            style += "left: 50%;\n";
+            style += "transform: translate(-50%, 0);";
+        }
     }
     else {
-        style += "top: 50%;\n";
-        style += "transform: translate(0, -50%);";
+        if (position.includes("Start")) {
+            style += "top: 8px;";
+        }
+        else if (position.includes("End")) {
+            style += "bottom: 8px;";
+        }
+        else {
+            style += "top: 50%;\n";
+            style += "transform: translate(0, -50%);";
+        }
     }
     return style;
 }

package.json

 {
   "name": "@arconnect/components",
-  "version": "0.1.24",
+  "version": "0.1.25",
   "private": false,
@@ -5,0 +5,0 @@ "publishConfig": {

No alert changes

Improved metrics

Total package byte prevSize

1080245

increased by0.1%

Lines of code

11812

increased by0.27%

No dependency changes