@telefonica/mistica 12.4.0 → 12.6.0

package/dist-es/tooltip.js

@@ -102,19 +102,27 @@ function _unsupportedIterableToArray(o, minLen) {
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from "react";
 import classnames from "classnames";
+import { CSSTransition } from "react-transition-group";
 import { useAriaId, useScreenSize } from "./hooks";
 import { Portal } from "./portal";
 import Overlay from "./overlay";
+import { Text2 } from "./text";
 import * as key from "./utils/key-codes";
 import { createUseStyles } from "./jss";
+import Stack from "./stack";
 var defaultPositionDesktop = "bottom";
 var defaultPositionMobile = "top";
 var arrowSize = 12;
-var distanceToTarget = 8 + arrowSize;
+var distanceToTarget = 4 + arrowSize;
 var marginLeftRightMobile = 16;
 var defaultWidthDesktop = 340;
 var arrowWrapperWidth = arrowSize * 2;
 var arrowWrapperHeight = arrowSize;
+var transitionDurationMs = 500;
+var animationMovement = 12;
+var animationTiming = "cubic-bezier(0.215, 0.61, 0.355, 1)";
+var defaultShowTooltipDelayMs = 500;
+var noOp = function() {};
 var useStyles = createUseStyles(function(theme) {
     var shadowAlpha = theme.isDarkMode ? 1 : 0.2;
     return {
@@ -126,7 +134,7 @@ var useStyles = createUseStyles(function(theme) {
             top: 0,
             left: "50%",
             transform: "translate(-50%, -50%) rotate(45deg)",
-            border: "1px solid ".concat(theme.colors.divider),
+            border: "1px solid ".concat(theme.colors.border),
             borderRadius: 2
         },
         arrowTop: {
@@ -175,42 +183,142 @@ var useStyles = createUseStyles(function(theme) {
             left: 16,
             width: "auto",
             boxShadow: "0 2px 4px 0 rgba(0, 0, 0, ".concat(shadowAlpha, ")"),
-            padding: 16,
+            padding: 8,
             backgroundColor: theme.colors.backgroundContainer,
-            zIndex: 12,
-            border: "1px solid ".concat(theme.colors.divider),
+            zIndex: 50,
+            border: "1px solid ".concat(theme.colors.border),
             borderRadius: 8
+        }
+    };
+});
+var useAnimationStyles = createUseStyles(function() {
+    return {
+        enter: {
+            transform: function(param) {
+                var position = param.position;
+                if (position === "bottom") {
+                    return "translateY(".concat(animationMovement, "px)");
+                }
+                if (position === "top") {
+                    return "translateY(calc(-100% - ".concat(animationMovement, "px))");
+                }
+                if (position === "right") {
+                    return "translateX(".concat(animationMovement, "px) translateY(-50%)");
+                }
+                if (position === "left") {
+                    return "translateX(-".concat(animationMovement, "px) translateY(-50%)");
+                }
+                return "translateY(-".concat(animationMovement, "px)");
+            }
+        },
+        enterActive: {
+            animationName: function(param) {
+                var position = param.position;
+                if (position === "top") return "$fadeInTop";
+                if (position === "bottom") return "$fadeInBottom";
+                return "$fadeInX";
+            },
+            animationFillMode: "both",
+            animationDuration: "".concat(transitionDurationMs, "ms"),
+            animationTimingFunction: animationTiming
+        },
+        enterDone: {
+            transform: function(param) {
+                var position = param.position;
+                if (position === "top") return "translateY(-100%)";
+                if (position === "bottom") return "translateY(0)";
+                return "translateY(-50%)";
+            }
+        },
+        exit: {
+            transform: function(param) {
+                var position = param.position;
+                if (position === "bottom") {
+                    return "translateY(0)";
+                }
+                if (position === "top") {
+                    return "translateY(-100%)";
+                }
+                if (position === "right") {
+                    return "translateX(0px) translateY(-50%)";
+                }
+                if (position === "left") {
+                    return "translateX(0px) translateY(-50%)";
+                }
+                return "translateY(0px)";
+            },
+            opacity: 1,
+            transition: "opacity 0.3s ".concat(animationTiming)
+        },
+        exitActive: {
+            animation: "$fadeOut 0.3s ".concat(animationTiming, " both")
+        },
+        "@keyframes fadeInBottom": {
+            from: {
+                opacity: 0
+            },
+            "40%": {
+                opacity: 1
+            },
+            to: {
+                opacity: 1,
+                transform: "translateY(0)"
+            }
         },
-        title: {
-            margin: 0,
-            marginBottom: 12,
-            color: theme.colors.textPrimary,
-            lineHeight: 1.42857142,
-            fontSize: 14
+        "@keyframes fadeInTop": {
+            from: {
+                opacity: 0
+            },
+            "40%": {
+                opacity: 1
+            },
+            to: {
+                opacity: 1,
+                transform: "translateY(-100%)"
+            }
         },
-        description: {
-            margin: 0,
-            color: theme.colors.textPrimary,
-            lineHeight: 1.42857142,
-            fontSize: 14
+        "@keyframes fadeInX": {
+            from: {
+                opacity: 0
+            },
+            "40%": {
+                opacity: 1
+            },
+            to: {
+                opacity: 1,
+                transform: "translateX(0) translateY(-50%)"
+            }
+        },
+        "@keyframes fadeOut": {
+            from: {
+                opacity: 1
+            },
+            to: {
+                opacity: 0
+            }
         }
     };
 });
 var getWidthDesktop = function(customWidth) {
     return customWidth ? customWidth : defaultWidthDesktop;
 };
-var EVENT_THROTTLE_TIME = process.env.NODE_ENV === "test" ? 0 : 200;
 var Tooltip = function(_param) {
-    var children = _param.children, description = _param.description, target = _param.target, title = _param.title, targetLabel = _param.targetLabel, rest = _objectWithoutProperties(_param, [
+    var children = _param.children, extra = _param.extra, description = _param.description, target = _param.target, title = _param.title, targetLabel = _param.targetLabel, _delay = _param.delay, delay = _delay === void 0 ? true : _delay, rest = _objectWithoutProperties(_param, [
         "children",
+        "extra",
         "description",
         "target",
         "title",
-        "targetLabel"
+        "targetLabel",
+        "delay"
     ]);
     var ref = _slicedToArray(React.useState(false), 2), isVisible = ref[0], setIsVisible = ref[1];
     var isTabletOrSmaller = useScreenSize().isTabletOrSmaller;
     var ariaId = useAriaId();
+    var isPointerOver = React.useRef(false);
+    var closeTooltipTimeoutId = React.useRef(null);
+    var showTooltipTimeoutId = React.useRef(null);
+    var targetRef = React.useRef(null);
     var targetBoundingClientRect = React.useRef({
         top: 0,
         right: 0,
@@ -219,10 +327,16 @@ var Tooltip = function(_param) {
         width: 0,
         height: 0
     });
-    // This property is needed because safari is making a mess with the events (it has problems
-    // when the overlay layer appears and disappears). This way we ensure that events don't get handled twice
-    var lastChangeTime = React.useRef(0);
+    var getPosition = function() {
+        var position = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : defaultPositionDesktop;
+        return isTabletOrSmaller && (position === "left" || position === "right") ? defaultPositionMobile : position;
+    };
+    var position1 = getPosition(rest.position);
     var classes = useStyles();
+    var animationClasses = useAnimationStyles({
+        position: position1
+    });
+    var isTouchableDevice = typeof window !== "undefined" ? window.matchMedia("(pointer: coarse)").matches : false;
     var closeTooltip = function() {
         if (isVisible) {
             setIsVisible(false);
@@ -235,23 +349,16 @@ var Tooltip = function(_param) {
         };
     });
     var handleClickOutside = function() {
-        if (Date.now() - lastChangeTime.current < EVENT_THROTTLE_TIME) {
-            return;
-        }
-        lastChangeTime.current = Date.now();
         setIsVisible(false);
     };
-    var toggleVisibility = function(e) {
-        if (Date.now() - lastChangeTime.current < EVENT_THROTTLE_TIME) {
-            return;
-        }
-        lastChangeTime.current = Date.now();
-        targetBoundingClientRect.current = e.currentTarget.getBoundingClientRect();
+    var toggleVisibility = function() {
+        if (!targetRef.current) return;
+        targetBoundingClientRect.current = targetRef.current.getBoundingClientRect();
         setIsVisible(!isVisible);
     };
-    var handleFocus = function(e) {
+    var handleFocus = function() {
         if (!isVisible) {
-            toggleVisibility(e);
+            toggleVisibility();
         }
     };
     var handleKeyDown = function(event) {
@@ -260,22 +367,19 @@ var Tooltip = function(_param) {
         }
     };
     var getContainerPosition = function(position, width) {
+        if (typeof window === "undefined") {
+            return {};
+        }
         var containerPos = {
             right: {
                 left: targetBoundingClientRect.current.right + distanceToTarget,
-                top: window.pageYOffset + targetBoundingClientRect.current.top + targetBoundingClientRect.current.height / 2,
-                transform: "translateY(-50%)",
-                WebKitTransform: "translateY(-50%)"
+                top: window.pageYOffset + targetBoundingClientRect.current.top + targetBoundingClientRect.current.height / 2
             },
             left: {
                 left: targetBoundingClientRect.current.left - width - distanceToTarget,
-                top: window.pageYOffset + targetBoundingClientRect.current.top + targetBoundingClientRect.current.height / 2,
-                transform: "translateY(-50%)",
-                WebKitTransform: "translateY(-50%)"
+                top: window.pageYOffset + targetBoundingClientRect.current.top + targetBoundingClientRect.current.height / 2
             },
             top: {
-                transform: "translateY(-100%)",
-                WebKitTransform: "translateY(-100%)",
                 top: window.pageYOffset + targetBoundingClientRect.current.top - distanceToTarget,
                 left: isTabletOrSmaller ? marginLeftRightMobile : window.pageXOffset + targetBoundingClientRect.current.left + targetBoundingClientRect.current.width / 2 - width / 2
             },
@@ -286,10 +390,6 @@ var Tooltip = function(_param) {
         };
         return containerPos[position];
     };
-    var getPosition = function() {
-        var position = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : defaultPositionDesktop;
-        return isTabletOrSmaller && (position === "left" || position === "right") ? defaultPositionMobile : position;
-    };
     var getCustomStylesForMobile = function() {
         return isTabletOrSmaller ? {
             left: targetBoundingClientRect.current.left + targetBoundingClientRect.current.width / 2 - marginLeftRightMobile
@@ -298,7 +398,6 @@ var Tooltip = function(_param) {
     var getWidth = function() {
         return isTabletOrSmaller ? window.innerWidth - marginLeftRightMobile * 2 : getWidthDesktop(rest.width);
     };
-    var position1 = getPosition(rest.position);
     var width1 = getWidth();
     var classNameByPosition = {
         top: classes.arrowTop,
@@ -309,8 +408,38 @@ var Tooltip = function(_param) {
     return /*#__PURE__*/ _jsxs(_Fragment, {
         children: [
             /*#__PURE__*/ _jsx("div", {
+                ref: targetRef,
                 className: classes.wrapper,
-                onPointerDown: toggleVisibility,
+                onPointerOver: function() {
+                    if (closeTooltipTimeoutId.current) {
+                        clearTimeout(closeTooltipTimeoutId.current);
+                        closeTooltipTimeoutId.current = null;
+                    }
+                    if (isPointerOver.current) return;
+                    isPointerOver.current = true;
+                    if (delay) {
+                        showTooltipTimeoutId.current = setTimeout(function() {
+                            showTooltipTimeoutId.current = null;
+                            toggleVisibility();
+                        }, defaultShowTooltipDelayMs);
+                    } else {
+                        toggleVisibility();
+                    }
+                },
+                onPointerLeave: isTouchableDevice ? noOp : function() {
+                    if (showTooltipTimeoutId.current) {
+                        clearTimeout(showTooltipTimeoutId.current);
+                        showTooltipTimeoutId.current = null;
+                        isPointerOver.current = false;
+                        return;
+                    }
+                    closeTooltipTimeoutId.current = setTimeout(function() {
+                        if (!isPointerOver.current) return;
+                        closeTooltipTimeoutId.current = null;
+                        isPointerOver.current = false;
+                        toggleVisibility();
+                    }, 100);
+                },
                 onFocus: handleFocus,
                 onKeyDown: handleKeyDown,
                 "touch-action": "auto" // Prop needed for Pointer Events Polyfill to work properly
@@ -322,40 +451,67 @@ var Tooltip = function(_param) {
                 "aria-label": targetLabel,
                 children: target
             }),
-            isVisible && /*#__PURE__*/ _jsxs(Portal, {
+            /*#__PURE__*/ _jsxs(Portal, {
                 children: [
-                    /*#__PURE__*/ _jsx(Overlay, {
+                    isVisible && isTouchableDevice && /*#__PURE__*/ _jsx(Overlay, {
                         onPress: handleClickOutside
                     }),
-                    /*#__PURE__*/ _jsxs("div", {
-                        role: "tooltip",
-                        id: ariaId,
-                        className: classes.container,
-                        style: _objectSpread({
-                            width: width1
-                        }, getContainerPosition(position1, width1)),
-                        children: [
-                            /*#__PURE__*/ _jsx("div", {
-                                className: classnames(classes.arrowWrapper, classNameByPosition[position1]),
-                                style: getCustomStylesForMobile(),
-                                children: /*#__PURE__*/ _jsx("div", {
-                                    className: classes.arrow
-                                })
-                            }),
-                            (title || description) && /*#__PURE__*/ _jsxs(_Fragment, {
-                                children: [
-                                    title && /*#__PURE__*/ _jsx("p", {
-                                        className: classes.title,
-                                        children: title
-                                    }),
-                                    description && /*#__PURE__*/ _jsx("p", {
-                                        className: classes.description,
-                                        children: description
+                    /*#__PURE__*/ _jsx(CSSTransition, {
+                        in: isVisible,
+                        timeout: transitionDurationMs,
+                        classNames: {
+                            enter: animationClasses.enter,
+                            enterActive: animationClasses.enterActive,
+                            enterDone: animationClasses.enterDone,
+                            exit: animationClasses.exit,
+                            exitActive: animationClasses.exitActive
+                        },
+                        unmountOnExit: true,
+                        children: /*#__PURE__*/ _jsxs("div", {
+                            role: "tooltip",
+                            id: ariaId,
+                            className: classes.container,
+                            style: _objectSpread({
+                                width: width1
+                            }, getContainerPosition(position1, width1)),
+                            onPointerOver: function() {
+                                if (closeTooltipTimeoutId.current) {
+                                    clearTimeout(closeTooltipTimeoutId.current);
+                                    closeTooltipTimeoutId.current = null;
+                                }
+                            },
+                            onPointerLeave: isTouchableDevice ? noOp : function() {
+                                closeTooltipTimeoutId.current = setTimeout(function() {
+                                    if (!isPointerOver.current) return;
+                                    closeTooltipTimeoutId.current = null;
+                                    isPointerOver.current = false;
+                                    toggleVisibility();
+                                }, 100);
+                            },
+                            children: [
+                                /*#__PURE__*/ _jsx("div", {
+                                    className: classnames(classes.arrowWrapper, classNameByPosition[position1]),
+                                    style: getCustomStylesForMobile(),
+                                    children: /*#__PURE__*/ _jsx("div", {
+                                        className: classes.arrow
                                     })
-                                ]
-                            }),
-                            children
-                        ]
+                                }),
+                                (title || description) && /*#__PURE__*/ _jsxs(Stack, {
+                                    space: 4,
+                                    children: [
+                                        title && /*#__PURE__*/ _jsx(Text2, {
+                                            medium: true,
+                                            children: title
+                                        }),
+                                        description && /*#__PURE__*/ _jsx(Text2, {
+                                            regular: true,
+                                            children: description
+                                        })
+                                    ]
+                                }),
+                                extra || children
+                            ]
+                        })
                     })
                 ]
             })

package/dist-es/touchable.js

@@ -205,7 +205,12 @@ var Touchable = /*#__PURE__*/ React.forwardRef(function(props, ref) {
         }));
     }
     if (props.onPress) {
-        return /*#__PURE__*/ _jsx("button", _objectSpread({}, commonProps, {
+        var _as;
+        var elementType = (_as = props.as) !== null && _as !== void 0 ? _as : "button";
+        var _role;
+        var role = (_role = commonProps.role) !== null && _role !== void 0 ? _role : props.as === "a" ? "button" : undefined;
+        return /*#__PURE__*/ React.createElement(elementType, _objectSpread({}, commonProps, {
+            role: role,
             // this "form" attribute is useful when the form's submit button
             // is located outside the <form> element, for example if you use
             // a ButtonFixedFooter layout inside a form with the submit

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@telefonica/mistica",
-    "version": "12.4.0",
+    "version": "12.6.0",
     "license": "MIT",
     "repository": {
         "type": "git",
@@ -49,6 +49,7 @@
     "acceptanceTests": {
         "devServer": {
             "command": "yarn storybook-for-acceptance-tests",
+            "host": "0.0.0.0",
             "port": 6006
         },
         "ciServer": {