@paubox/ui 0.20.0 → 0.21.0

package/index.esm.js

@@ -34592,9 +34592,10 @@ function _templateObject() {
         "\n  background-color: ",
         ";\n  border-radius: 0.25rem;\n  padding: 0.25rem 0.5rem;\n  font-size: ",
         ";\n  color: ",
-        ";\n  z-index: 50;\n  white-space: 'wrap';\n  word-wrap: break-word;\n  display: ",
-        ";\n  width: ",
-        ";\n  position: fixed;\n  align-items: center;\n  height: min-content;\n"
+        ";\n  white-space: 'wrap';\n  word-wrap: break-word;\n  display: ",
+        ";\n  min-height: 100%;\n  width: ",
+        ";\n  height: fit-content;\n  position: absolute;\n  display: flex;\n  align-items: center;\n\n  ",
+        "\n  margin-top: auto;\n  margin-bottom: auto;\n"
     ]);
     _templateObject = function _templateObject() {
         return data;
@@ -34613,7 +34614,7 @@ function _templateObject1() {
 }
 function _templateObject2() {
     var data = _tagged_template_literal([
-        "\n  position: absolute;\n  ",
+        "\n  margin: auto;\n  position: absolute;\n  inset: 0;\n\n  ",
         "\n"
     ]);
     _templateObject2 = function _templateObject() {
@@ -34623,10 +34624,13 @@ function _templateObject2() {
 }
 var TooltipWrapper = styled.div(_templateObject(), neutral900, $paragraph300Regular, textPrimaryWhite, function(param) {
     var hover = param.hover;
-    return hover ? 'flex' : 'none';
+    return hover ? 'block' : 'none';
 }, function(param) {
     var size = param.size;
     return size === 'small' ? 'min-content' : 'max-content';
+}, function(param) {
+    var _param_x = param.x, x = _param_x === void 0 ? 'bottom' : _param_x, _param_y = param.y, y = _param_y === void 0 ? 'left' : _param_y;
+    return "\n  margin-right: ".concat(x === 'left' ? '100%' : 'auto', ";\n  margin-left: ").concat(x === 'right' ? '100%' : 'auto', ";\n  z-index: 50;\n  top: ").concat(y === 'bottom' ? '150%' : y === 'center' ? '0rem' : 'auto', ";\n  bottom: ").concat(y === 'top' ? '150%' : y === 'center' ? '0rem' : 'auto', ";\n  left: ").concat(y === 'center' ? x === 'right' ? '1rem' : 'auto' : x === 'right' ? '-1.5rem' : x === 'center' ? '0' : 'auto', ";\n  right: ").concat(y === 'center' ? x === 'left' ? '1rem' : 'auto' : x === 'left' ? '-1.5rem' : x === 'center' ? '0' : 'auto', ";\n  ");
 });
 var TooltipContainer = styled.div(_templateObject1(), function(param) {
     var hover = param.hover;
@@ -34648,110 +34652,34 @@ var Triangle = function(param) {
     });
 };
 var ToolTipTriangle = styled(Triangle)(_templateObject2(), function(param) {
-    var _param_placement = param.placement, placement = _param_placement === void 0 ? 'bottom' : _param_placement;
-    if (placement === 'top') {
-        return "\n        bottom: -0.375rem;\n        left: 50%;\n        transform: translateX(-50%) rotate(180deg);\n        display: block;\n      ";
-    }
-    if (placement === 'bottom') {
-        return "\n        top: -0.375rem;\n        left: 50%;\n        transform: translateX(-50%) rotate(0deg);\n        display: block;\n      ";
-    }
-    if (placement === 'left') {
-        return "\n        right: -0.375rem;\n        top: 50%;\n        transform: translateY(-50%) rotate(90deg);\n        display: block;\n      ";
-    }
-    if (placement === 'right') {
-        return "\n        left: -0.375rem;\n        top: 50%;\n        transform: translateY(-50%) rotate(-90deg);\n        display: block;\n      ";
-    }
-    return '';
+    var _param_x = param.x, x = _param_x === void 0 ? 'bottom' : _param_x, _param_y = param.y, y = _param_y === void 0 ? 'left' : _param_y;
+    return "\n\n  top: ".concat(y === 'bottom' ? '-0.375rem' : y === 'center' ? '0' : 'auto', ";\n  bottom: ").concat(y === 'top' ? '-0.375rem' : y === 'center' ? '0' : 'auto', ";\n  left: ").concat(y === 'center' ? x === 'right' ? '-0.4rem' : 'auto' : x === 'right' ? '0.5rem' : x === 'center' ? '50%' : 'auto', ";\n  right: ").concat(y === 'center' ? x === 'left' ? '-0.4rem' : 'auto' : x === 'left' ? '0.5rem' : x === 'center' ? '50%' : 'auto', ";\n\n  display: ").concat(y === 'center' && x === 'center' ? 'none' : 'block', ";\n  transform: ").concat(y === 'top' ? 'rotate(180deg)' : y === 'bottom' ? 'rotate(0deg)' : x === 'left' ? 'rotate(90deg)' : x === 'right' ? 'rotate(-90deg)' : 'rotate(0deg)', ";\n  ");
 });
 var Tooltip = function(_param) {
-    var children = _param.children, content = _param.content, className = _param.className, placement = _param.placement, rest = _object_without_properties(_param, [
+    var children = _param.children, content = _param.content, rest = _object_without_properties(_param, [
         "children",
-        "content",
-        "className",
-        "placement"
+        "content"
     ]);
-    var tooltipRef = useRef(null);
-    var childRef = useRef(null);
-    var _useState = _sliced_to_array(useState({
-        top: 0,
-        left: 0
-    }), 2), position = _useState[0], setPosition = _useState[1];
-    var _useState1 = _sliced_to_array(useState(false), 2), hover = _useState1[0], setHover = _useState1[1];
+    var _useState = _sliced_to_array(useState(false), 2), hover = _useState[0], setHover = _useState[1];
     var handleMouseEnter = function() {
         setHover(true);
     };
     var handleMouseLeave = function() {
         setHover(false);
     };
-    useEffect(function() {
-        var updatePosition = function() {
-            if (!childRef.current || !tooltipRef.current) return;
-            var childRect = childRef.current.getBoundingClientRect();
-            var tooltipRect = tooltipRef.current.getBoundingClientRect();
-            var scrollX = window.scrollX || window.pageXOffset;
-            var scrollY = window.scrollY || window.pageYOffset;
-            var top = 0, left = 0;
-            switch(placement || 'bottom'){
-                case 'top':
-                    top = childRect.top + scrollY - tooltipRect.height - 5;
-                    left = childRect.left + scrollX + (childRect.width - tooltipRect.width) / 2;
-                    break;
-                case 'bottom':
-                    top = childRect.bottom + scrollY + 5;
-                    left = childRect.left + scrollX + (childRect.width - tooltipRect.width) / 2;
-                    break;
-                case 'left':
-                    top = childRect.top + scrollY + (childRect.height - tooltipRect.height) / 2;
-                    left = childRect.left + scrollX - tooltipRect.width - 5;
-                    break;
-                case 'right':
-                    top = childRect.top + scrollY + (childRect.height - tooltipRect.height) / 2;
-                    left = childRect.right + scrollX + 5;
-                    break;
-            }
-            setPosition({
-                top: top,
-                left: left
-            });
-        };
-        if (hover) {
-            updatePosition();
-            window.addEventListener('resize', updatePosition);
-            window.addEventListener('scroll', updatePosition);
-        }
-        return function() {
-            window.removeEventListener('resize', updatePosition);
-            window.removeEventListener('scroll', updatePosition);
-        };
-    }, [
-        hover,
-        placement
-    ]);
     return /*#__PURE__*/ jsxs(TooltipContainer, {
         onMouseEnter: handleMouseEnter,
         onMouseLeave: handleMouseLeave,
         hover: hover,
         children: [
             /*#__PURE__*/ jsx("div", {
-                ref: childRef,
                 children: children
             }),
-            /*#__PURE__*/ jsxs(TooltipWrapper, _object_spread_props(_object_spread({
-                className: className,
-                ref: tooltipRef,
-                style: {
-                    top: position.top,
-                    left: position.left
-                }
-            }, rest), {
+            /*#__PURE__*/ jsxs(TooltipWrapper, _object_spread_props(_object_spread({}, rest), {
                 hover: hover,
                 children: [
-                    /*#__PURE__*/ jsx("div", {
-                        children: content
-                    }),
-                    /*#__PURE__*/ jsx(ToolTipTriangle, _object_spread({
-                        placement: placement
-                    }, rest))
+                    content,
+                    /*#__PURE__*/ jsx(ToolTipTriangle, _object_spread({}, rest))
                 ]
             }))
         ]

package/package.json

@@ -2,7 +2,7 @@
   "name": "@paubox/ui",
   "author": "Paubox, Inc.",
   "description": "Paubox Component Library",
-  "version": "0.20.0",
+  "version": "0.21.0",
   "type": "module",
   "private": false,
   "publishConfig": {

package/src/lib/Tooltip/Tooltip.d.ts

@@ -1,7 +1,7 @@
 export interface TooltipProps extends React.HTMLAttributes<HTMLDivElement> {
-    placement?: 'top' | 'bottom' | 'left' | 'right';
+    y?: 'top' | 'bottom' | 'center';
+    x?: 'left' | 'right' | 'center';
     size?: 'small' | 'large';
-    className?: string;
     children: React.ReactNode;
     content: string;
 }