bianic-ui 1.0.0-beta.24 → 1.0.0-beta.25

package/dist/cjs/index.js

@@ -1545,9 +1545,9 @@ function TextInput(_a) {
         descColor = 'text-bia-red';
     var bottomBorderColor = 'hover:border-b-bia-blue focus:border-b-bia-blue';
     if (!disabled && isExistValidation && isValid)
-        bottomBorderColor = 'hover:border-b-bia-green';
+        bottomBorderColor = 'border-b-bia-green';
     if (!disabled && isExistValidation && !isValid)
-        bottomBorderColor = 'hover:border-b-bia-red focus:border-b-bia-red';
+        bottomBorderColor = 'border-b-bia-red';
     var iconElement = null;
     if (!disabled && isExistValidation)
         iconElement = React.createElement(ValidationIcon, { isValid: isValid, iconSize: iconSize });
@@ -2593,31 +2593,51 @@ TagLabel.defaultProps = {
 
 var classConfig = {
     top: {
-        tooltipContainer: 'bottom-[110%]  left-1/2  -translate-x-1/2',
+        tooltipContainer: 'bottom-[calc(100%+5px)]  left-1/2  -translate-x-1/2',
         triangleContainer: 'left-0 -bottom-[4px] flex justify-center w-full h-auto',
         triangleShape: 'border-l-[8px] border-l-transparent border-t-[5px] border-t-primary-black border-r-[8px] border-r-transparent',
     },
     right: {
-        tooltipContainer: 'left-[105%] top-1/2 -translate-y-1/2',
+        tooltipContainer: 'left-[calc(100%+5px)] top-1/2 -translate-y-1/2',
         triangleContainer: '-left-[4px] bottom-0 flex items-center w-auto h-full',
         triangleShape: 'border-t-[8px] border-t-transparent border-r-[5px] border-r-primary-black border-b-[8px] border-b-transparent',
     },
     bottom: {
-        tooltipContainer: 'top-[110%]  left-1/2  -translate-x-1/2',
+        tooltipContainer: 'top-[calc(100%+5px)]  left-1/2  -translate-x-1/2',
         triangleContainer: 'left-0 -top-[4px] flex justify-center w-full h-auto',
         triangleShape: 'border-l-[8px] border-l-transparent border-b-[5px] border-b-primary-black border-r-[8px] border-r-transparent',
     },
     left: {
-        tooltipContainer: 'right-[105%] top-1/2 -translate-y-1/2',
+        tooltipContainer: 'right-[calc(100%+5px)] top-1/2 -translate-y-1/2',
         triangleContainer: '-right-[4px] bottom-0 flex items-center w-auto h-full',
         triangleShape: 'border-t-[8px] border-t-transparent border-l-[5px] border-l-primary-black border-b-[8px] border-b-transparent',
     },
+    'top-right': {
+        tooltipContainer: 'bottom-[calc(100%+5px)] right-0',
+        triangleContainer: 'left-0 -bottom-[4px] flex justify-center w-full h-auto',
+        triangleShape: 'border-l-[8px] border-l-transparent border-t-[5px] border-t-primary-black border-r-[8px] border-r-transparent',
+    },
+    'top-left': {
+        tooltipContainer: 'bottom-[calc(100%+5px)] left-0',
+        triangleContainer: 'left-0 -bottom-[4px] flex justify-center w-full h-auto',
+        triangleShape: 'border-l-[8px] border-l-transparent border-t-[5px] border-t-primary-black border-r-[8px] border-r-transparent',
+    },
+    'bottom-right': {
+        tooltipContainer: 'top-[calc(100%+5px)]  right-0',
+        triangleContainer: 'left-0 -top-[4px] flex justify-center w-full h-auto',
+        triangleShape: 'border-l-[8px] border-l-transparent border-b-[5px] border-b-primary-black border-r-[8px] border-r-transparent',
+    },
+    'bottom-left': {
+        tooltipContainer: 'top-[calc(100%+5px)]  left-0',
+        triangleContainer: 'left-0 -top-[4px] flex justify-center w-full h-auto',
+        triangleShape: 'border-l-[8px] border-l-transparent border-b-[5px] border-b-primary-black border-r-[8px] border-r-transparent',
+    },
 };
 
 function Tooltip(props) {
-    var children = props.children, content = props.content, delay = props.delay, _a = props.direction, direction = _a === void 0 ? 'top' : _a;
+    var children = props.children, content = props.content, delay = props.delay, _a = props.direction, direction = _a === void 0 ? 'top' : _a, _b = props.maxWidth, maxWidth = _b === void 0 ? '300px' : _b;
     var timeout;
-    var _b = React.useState(false), active = _b[0], setActive = _b[1];
+    var _c = React.useState(false), active = _c[0], setActive = _c[1];
     var showTip = function () {
         timeout = setTimeout(function () {
             setActive(true);
@@ -2627,17 +2647,16 @@ function Tooltip(props) {
         clearInterval(timeout);
         setActive(false);
     };
-    var _c = classConfig[direction], tooltipContainer = _c.tooltipContainer, triangleContainer = _c.triangleContainer, triangleShape = _c.triangleShape;
-    return (React.createElement("div", { className: "Tooltip-Wrapper relative block w-fit h-fit", onMouseEnter: showTip, onMouseLeave: hideTip },
+    var _d = classConfig[direction], tooltipContainer = _d.tooltipContainer; _d.triangleContainer; _d.triangleShape;
+    return (React.createElement("div", { className: "Tooltip-Wrapper relative flex flex-col w-full h-fit", onMouseEnter: showTip, onMouseLeave: hideTip },
         children,
-        active && (React.createElement("div", { className: "Tooltip-Tip absolute px-[7px] py-[4px] text-bia-sm bg-primary-black text-primary-white z-50 whitespace-nowrap rounded-[4px] ".concat(tooltipContainer) },
-            content,
-            React.createElement("div", { className: "absolute ".concat(triangleContainer) },
-                React.createElement("div", { className: "w-0 h-0 ".concat(triangleShape) }))))));
+        active && (React.createElement("div", { className: "Tooltip absolute px-[7px] py-[4px] text-size-sm bg-primary-black text-primary-white z-50 whitespace-nowrap rounded-[4px] ".concat(tooltipContainer), style: { maxWidth: maxWidth } },
+            React.createElement("p", { className: " whitespace-pre-wrap break-words" }, content)))));
 }
 Tooltip.defaultProps = {
     delay: 400,
     direction: 'top',
+    maxWidth: '300px',
 };
 Tooltip.defaultProps = {};