@telefonica/mistica 12.4.0 → 12.6.0

package/dist/tooltip.d.ts

@@ -2,12 +2,14 @@ import * as React from 'react';
 declare type Position = 'top' | 'bottom' | 'left' | 'right';
 declare type Props = {
     children?: React.ReactNode;
+    extra?: React.ReactNode;
     description?: string;
     target: React.ReactNode;
     title?: string;
     position?: Position;
     width?: number;
     targetLabel: string;
+    delay?: boolean;
 };
 declare const Tooltip: React.FC<Props>;
 export default Tooltip;

package/dist/tooltip.js

@@ -6,11 +6,14 @@ exports.default = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var React = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
+var _reactTransitionGroup = require("react-transition-group");
 var _hooks = require("./hooks");
 var _portal = require("./portal");
 var _overlay = _interopRequireDefault(require("./overlay"));
+var _text = require("./text");
 var key = _interopRequireWildcard(require("./utils/key-codes"));
 var _jss = require("./jss");
+var _stack = _interopRequireDefault(require("./stack"));
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -142,11 +145,16 @@ function _unsupportedIterableToArray(o, minLen) {
 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 noOp() {};
 var useStyles = (0, _jss).createUseStyles(function(theme) {
     var shadowAlpha = theme.isDarkMode ? 1 : 0.2;
     return {
@@ -158,7 +166,7 @@ var useStyles = (0, _jss).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: {
@@ -207,42 +215,142 @@ var useStyles = (0, _jss).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 = (0, _jss).createUseStyles(function() {
+    return {
+        enter: {
+            transform: function transform(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 animationName(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 transform(param) {
+                var position = param.position;
+                if (position === "top") return "translateY(-100%)";
+                if (position === "bottom") return "translateY(0)";
+                return "translateY(-50%)";
+            }
         },
-        title: {
-            margin: 0,
-            marginBottom: 12,
-            color: theme.colors.textPrimary,
-            lineHeight: 1.42857142,
-            fontSize: 14
+        exit: {
+            transform: function transform(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")
         },
-        description: {
-            margin: 0,
-            color: theme.colors.textPrimary,
-            lineHeight: 1.42857142,
-            fontSize: 14
+        "@keyframes fadeInBottom": {
+            from: {
+                opacity: 0
+            },
+            "40%": {
+                opacity: 1
+            },
+            to: {
+                opacity: 1,
+                transform: "translateY(0)"
+            }
+        },
+        "@keyframes fadeInTop": {
+            from: {
+                opacity: 0
+            },
+            "40%": {
+                opacity: 1
+            },
+            to: {
+                opacity: 1,
+                transform: "translateY(-100%)"
+            }
+        },
+        "@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 getWidthDesktop(customWidth) {
     return customWidth ? customWidth : defaultWidthDesktop;
 };
-var EVENT_THROTTLE_TIME = process.env.NODE_ENV === "test" ? 0 : 200;
 var Tooltip = function Tooltip(_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 = (0, _hooks).useScreenSize().isTabletOrSmaller;
     var ariaId = (0, _hooks).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,
@@ -251,10 +359,16 @@ var Tooltip = function Tooltip(_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 getPosition() {
+        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 closeTooltip() {
         if (isVisible) {
             setIsVisible(false);
@@ -267,23 +381,16 @@ var Tooltip = function Tooltip(_param) {
         };
     });
     var handleClickOutside = function handleClickOutside() {
-        if (Date.now() - lastChangeTime.current < EVENT_THROTTLE_TIME) {
-            return;
-        }
-        lastChangeTime.current = Date.now();
         setIsVisible(false);
     };
-    var toggleVisibility = function toggleVisibility(e) {
-        if (Date.now() - lastChangeTime.current < EVENT_THROTTLE_TIME) {
-            return;
-        }
-        lastChangeTime.current = Date.now();
-        targetBoundingClientRect.current = e.currentTarget.getBoundingClientRect();
+    var toggleVisibility = function toggleVisibility() {
+        if (!targetRef.current) return;
+        targetBoundingClientRect.current = targetRef.current.getBoundingClientRect();
         setIsVisible(!isVisible);
     };
-    var handleFocus = function handleFocus(e) {
+    var handleFocus = function handleFocus() {
         if (!isVisible) {
-            toggleVisibility(e);
+            toggleVisibility();
         }
     };
     var handleKeyDown = function handleKeyDown(event) {
@@ -292,22 +399,19 @@ var Tooltip = function Tooltip(_param) {
         }
     };
     var getContainerPosition = function getContainerPosition(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
             },
@@ -318,10 +422,6 @@ var Tooltip = function Tooltip(_param) {
         };
         return containerPos[position];
     };
-    var getPosition = function getPosition() {
-        var position = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : defaultPositionDesktop;
-        return isTabletOrSmaller && (position === "left" || position === "right") ? defaultPositionMobile : position;
-    };
     var getCustomStylesForMobile = function getCustomStylesForMobile() {
         return isTabletOrSmaller ? {
             left: targetBoundingClientRect.current.left + targetBoundingClientRect.current.width / 2 - marginLeftRightMobile
@@ -330,7 +430,6 @@ var Tooltip = function Tooltip(_param) {
     var getWidth = function getWidth() {
         return isTabletOrSmaller ? window.innerWidth - marginLeftRightMobile * 2 : getWidthDesktop(rest.width);
     };
-    var position1 = getPosition(rest.position);
     var width1 = getWidth();
     var classNameByPosition = {
         top: classes.arrowTop,
@@ -341,8 +440,38 @@ var Tooltip = function Tooltip(_param) {
     return /*#__PURE__*/ (0, _jsxRuntime).jsxs(_jsxRuntime.Fragment, {
         children: [
             /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
+                ref: targetRef,
                 className: classes.wrapper,
-                onPointerDown: toggleVisibility,
+                onPointerOver: function onPointerOver() {
+                    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
@@ -354,40 +483,67 @@ var Tooltip = function Tooltip(_param) {
                 "aria-label": targetLabel,
                 children: target
             }),
-            isVisible && /*#__PURE__*/ (0, _jsxRuntime).jsxs(_portal.Portal, {
+            /*#__PURE__*/ (0, _jsxRuntime).jsxs(_portal.Portal, {
                 children: [
-                    /*#__PURE__*/ (0, _jsxRuntime).jsx(_overlay.default, {
+                    isVisible && isTouchableDevice && /*#__PURE__*/ (0, _jsxRuntime).jsx(_overlay.default, {
                         onPress: handleClickOutside
                     }),
-                    /*#__PURE__*/ (0, _jsxRuntime).jsxs("div", {
-                        role: "tooltip",
-                        id: ariaId,
-                        className: classes.container,
-                        style: _objectSpread({
-                            width: width1
-                        }, getContainerPosition(position1, width1)),
-                        children: [
-                            /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
-                                className: (0, _classnames).default(classes.arrowWrapper, classNameByPosition[position1]),
-                                style: getCustomStylesForMobile(),
-                                children: /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
-                                    className: classes.arrow
-                                })
-                            }),
-                            (title || description) && /*#__PURE__*/ (0, _jsxRuntime).jsxs(_jsxRuntime.Fragment, {
-                                children: [
-                                    title && /*#__PURE__*/ (0, _jsxRuntime).jsx("p", {
-                                        className: classes.title,
-                                        children: title
-                                    }),
-                                    description && /*#__PURE__*/ (0, _jsxRuntime).jsx("p", {
-                                        className: classes.description,
-                                        children: description
+                    /*#__PURE__*/ (0, _jsxRuntime).jsx(_reactTransitionGroup.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__*/ (0, _jsxRuntime).jsxs("div", {
+                            role: "tooltip",
+                            id: ariaId,
+                            className: classes.container,
+                            style: _objectSpread({
+                                width: width1
+                            }, getContainerPosition(position1, width1)),
+                            onPointerOver: function onPointerOver() {
+                                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__*/ (0, _jsxRuntime).jsx("div", {
+                                    className: (0, _classnames).default(classes.arrowWrapper, classNameByPosition[position1]),
+                                    style: getCustomStylesForMobile(),
+                                    children: /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
+                                        className: classes.arrow
                                     })
-                                ]
-                            }),
-                            children
-                        ]
+                                }),
+                                (title || description) && /*#__PURE__*/ (0, _jsxRuntime).jsxs(_stack.default, {
+                                    space: 4,
+                                    children: [
+                                        title && /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text2, {
+                                            medium: true,
+                                            children: title
+                                        }),
+                                        description && /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text2, {
+                                            regular: true,
+                                            children: description
+                                        })
+                                    ]
+                                }),
+                                extra || children
+                            ]
+                        })
                     })
                 ]
             })

package/dist/tooltip.js.flow

@@ -4,12 +4,14 @@ import * as React from "react";
 declare type Position = "top" | "bottom" | "left" | "right";
 declare type Props = {
   children?: React.Node,
+  extra?: React.Node,
   description?: string,
   target: React.Node,
   title?: string,
   position?: Position,
   width?: number,
   targetLabel: string,
+  delay?: boolean,
 };
 declare var Tooltip: React.ComponentType<Props>;
 declare export default typeof Tooltip;

package/dist/touchable.d.ts

@@ -21,6 +21,7 @@ interface CommonProps {
     role?: string;
     type?: 'button' | 'submit';
     tabIndex?: number;
+    as?: 'a';
 }
 export interface PropsHref extends CommonProps {
     href: string;
@@ -66,5 +67,6 @@ export interface PropsMaybeOnPress extends CommonProps {
     formId?: string;
 }
 export declare type Props = PropsHref | PropsTo | PropsOnPress | PropsMaybeHref | PropsMaybeTo | PropsMaybeOnPress;
-declare const Touchable: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLAnchorElement | HTMLDivElement | HTMLButtonElement>>;
+export declare type TouchableElement = HTMLDivElement | HTMLAnchorElement | HTMLButtonElement;
+declare const Touchable: React.ForwardRefExoticComponent<Props & React.RefAttributes<TouchableElement>>;
 export default Touchable;

package/dist/touchable.js

@@ -237,7 +237,12 @@ var Touchable = /*#__PURE__*/ React.forwardRef(function(props, ref) {
         }));
     }
     if (props.onPress) {
-        return /*#__PURE__*/ (0, _jsxRuntime).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/dist/touchable.js.flow

@@ -26,6 +26,7 @@ declare type CommonProps = {
   role?: string,
   type?: "button" | "submit",
   tabIndex?: number,
+  as?: "a",
 };
 export type PropsHref = {
   ...$Exact<CommonProps>,
@@ -71,7 +72,11 @@ export type Props =
   | PropsMaybeHref
   | PropsMaybeTo
   | PropsMaybeOnPress;
-declare var Touchable: React.AbstractComponent<Props, HTMLAnchorElement | HTMLDivElement | HTMLButtonElement>;
+export type TouchableElement =
+  | HTMLDivElement
+  | HTMLAnchorElement
+  | HTMLButtonElement;
+declare var Touchable: React.AbstractComponent<Props, TouchableElement>;
 declare export default typeof Touchable;
 
 import { type CssStyle } from "./__css_types__.js.flow";

package/dist-es/button.js

@@ -313,9 +313,9 @@ var renderButtonContent = function(param) {
     });
     return resultChildrenArr;
 };
-var Button = function(props) {
+var Button = /*#__PURE__*/ React.forwardRef(function(props, ref) {
     var eventFormat = useTrackingConfig().eventFormat;
-    var ref = useForm(), formStatus = ref.formStatus, formId = ref.formId;
+    var _$ref = useForm(), formStatus = _$ref.formStatus, formId = _$ref.formId;
     var isInverse = useIsInverseVariant();
     var classes = props.classes, loadingText = props.loadingText;
     var isSubmitButton = !!props.submit;
@@ -325,7 +325,7 @@ var Button = function(props) {
     // specially in iPhone). But we want the spinner to be visible during the show/hide animation.
     // * When showSpinner prop is true, state is changed immediately.
     // * When the transition ends this state is updated again if needed
-    var ref1 = _slicedToArray(React.useState(!!showSpinner), 2), shouldRenderSpinner = ref1[0], setShouldRenderSpinner = ref1[1];
+    var _$ref1 = _slicedToArray(React.useState(!!showSpinner), 2), shouldRenderSpinner = _$ref1[0], setShouldRenderSpinner = _$ref1[1];
     React.useEffect(function() {
         if (showSpinner && !shouldRenderSpinner) {
             setShouldRenderSpinner(true);
@@ -372,6 +372,7 @@ var Button = function(props) {
     var _trackingEvent;
     var _obj;
     var commonProps = {
+        ref: ref,
         className: classnames(classes.button, props.className, (_obj = {}, _defineProperty(_obj, classes.small, props.small), _defineProperty(_obj, classes.inverse, isInverse), _defineProperty(_obj, classes.light, !isInverse), _defineProperty(_obj, classes.isLoading, showSpinner), _obj)),
         style: _objectSpread({
             cursor: props.fake ? "pointer" : undefined
@@ -485,7 +486,7 @@ var Button = function(props) {
         throw Error("Bad button props");
     }
     return null;
-};
+});
 var useButtonLinkStyles = createUseStyles(function(theme) {
     var paddingY = 6;
     var paddingX = 12;
@@ -611,24 +612,27 @@ export var ButtonLink = /*#__PURE__*/ React.forwardRef(function(props, ref) {
     }
     return null;
 });
-export var ButtonPrimary = function(props) {
+export var ButtonPrimary = /*#__PURE__*/ React.forwardRef(function(props, ref) {
     var classes = usePrimaryButtonStyles();
     return /*#__PURE__*/ _jsx(Button, _objectSpread({}, props, {
+        ref: ref,
         classes: classes,
         type: "primary"
     }));
-};
-export var ButtonSecondary = function(props) {
+});
+export var ButtonSecondary = /*#__PURE__*/ React.forwardRef(function(props, ref) {
     var classes = useSecondaryButtonStyles();
     return /*#__PURE__*/ _jsx(Button, _objectSpread({}, props, {
+        ref: ref,
         classes: classes,
         type: "secondary"
     }));
-};
-export var ButtonDanger = function(props) {
+});
+export var ButtonDanger = /*#__PURE__*/ React.forwardRef(function(props, ref) {
     var classes = useDangerButtonStyles();
     return /*#__PURE__*/ _jsx(Button, _objectSpread({}, props, {
+        ref: ref,
         classes: classes,
         type: "danger"
     }));
-};
+});