@telefonica/mistica 10.20.0 → 10.21.0

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+# [10.21.0](https://github.com/Telefonica/mistica-web/compare/v10.20.0...v10.21.0) (2022-01-27)
+
+
+### Bug Fixes
+
+* **ButtonLayout:** missed button press in button layout when gaining focus ([#396](https://github.com/Telefonica/mistica-web/issues/396)) ([9f3bba5](https://github.com/Telefonica/mistica-web/commit/9f3bba57affeac7b89c7dc831d00ce4ef33cdb5f))
+* **ButtonLayout:** unstable in acceptance tests ([#404](https://github.com/Telefonica/mistica-web/issues/404)) ([11d4772](https://github.com/Telefonica/mistica-web/commit/11d4772c49d5f35bfcfa4ead6826782eccde5a18))
+
+
+### Features
+
+* **Touchable:** WEB-435 add hrefDecorator to theme ([#401](https://github.com/Telefonica/mistica-web/issues/401)) ([21a45ee](https://github.com/Telefonica/mistica-web/commit/21a45ee84259af4ccca2a5adf2a7242b442d2874))
+
 # [10.20.0](https://github.com/Telefonica/mistica-web/compare/v10.19.0...v10.20.0) (2022-01-24)
 
 

package/dist/button-layout.js

@@ -9,6 +9,7 @@ var _jss = require("./jss");
 var _hooks = require("./hooks");
 var _button = require("./button");
 var _classnames = _interopRequireDefault(require("classnames"));
+var _debounce = _interopRequireDefault(require("lodash/debounce"));
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -207,28 +208,29 @@ var buttonsRange = [
 var ButtonLayout = function ButtonLayout(param) {
     var children = param.children, _align = param.align, align = _align === void 0 ? 'full-width' : _align, link = param.link, _withMargins = param.withMargins, withMargins = _withMargins === void 0 ? false : _withMargins;
     var ref = (0, _hooks).useScreenSize(), isTabletOrSmaller = ref.isTabletOrSmaller;
-    var ref1 = _slicedToArray(React.useState(true), 2), isMeasuring = ref1[0], setIsMeasuring = ref1[1];
     var childrenCount = React.Children.count(children);
-    var ref2 = _slicedToArray(React.useState(0), 2), buttonWidth = ref2[0], setButtonWidth = ref2[1];
-    var updateButtonWidth = function updateButtonWidth(buttonWidth) {
+    var ref1 = _slicedToArray(React.useState({
+        isMeasuring: true,
+        buttonWidth: 0
+    }), 2), buttonStatus = ref1[0], setButtonStatus = ref1[1];
+    var updateButtonStatus = function updateButtonStatus(param) {
+        var isMeasuring = param.isMeasuring, buttonWidth = param.buttonWidth;
         if (process.env.NODE_ENV !== 'test') {
-            setButtonWidth(buttonWidth);
-        }
-    };
-    var updateIsMeasuring = function updateIsMeasuring(isMeasuring) {
-        if (process.env.NODE_ENV !== 'test') {
-            setIsMeasuring(isMeasuring);
+            setButtonStatus({
+                isMeasuring: isMeasuring,
+                buttonWidth: buttonWidth
+            });
         }
     };
     var classes = useStyles({
-        buttonWidth: buttonWidth,
+        buttonWidth: buttonStatus.buttonWidth,
         isTabletOrSmaller: isTabletOrSmaller,
         align: align,
         childrenCount: childrenCount
     });
     var wrapperElRef = React.useRef(null);
     (0, _hooks).useIsomorphicLayoutEffect(function() {
-        if (isMeasuring) {
+        if (buttonStatus.isMeasuring) {
             var req = window.requestAnimationFrame(function() {
                 if (wrapperElRef.current) {
                     var childrenWidths = Array.from(wrapperElRef.current.children).map(function(el) {
@@ -243,8 +245,10 @@ var ButtonLayout = function ButtonLayout(param) {
                     var maxChildWidth = Math.ceil((_Math = Math).max.apply(_Math, _toConsumableArray(childrenWidths).concat([
                         _button.BUTTON_MIN_WIDTH
                     ])));
-                    updateButtonWidth(maxChildWidth);
-                    updateIsMeasuring(false);
+                    updateButtonStatus({
+                        isMeasuring: false,
+                        buttonWidth: maxChildWidth
+                    });
                 }
             });
             return function() {
@@ -255,11 +259,18 @@ var ButtonLayout = function ButtonLayout(param) {
         };
     }, [
         classes.link,
-        isMeasuring
+        buttonStatus
     ]);
-    var calcLayout = React.useCallback(function() {
-        updateButtonWidth(0);
-        updateIsMeasuring(true);
+    /**
+     * Multiple calls to calcLayout are debounced to workaround an issue that can be reproduced in chrome when pressing
+     * the button during a focus/visibility change. For example, pressing the button having the focus on the devTools.
+     */ var calcLayout = React.useMemo(function() {
+        return (0, _debounce).default(function() {
+            updateButtonStatus({
+                isMeasuring: true,
+                buttonWidth: 0
+            });
+        }, 50);
     }, []);
     useOnChildrenChangeEffect(wrapperElRef.current, calcLayout);
     useOnFontsReadyEffect(calcLayout);

package/dist/package-version.js

@@ -3,5 +3,5 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
 exports.PACKAGE_VERSION = void 0;
-var PACKAGE_VERSION = '10.20.0';
+var PACKAGE_VERSION = '10.21.0';
 exports.PACKAGE_VERSION = PACKAGE_VERSION;

package/dist/theme-context-provider.js

@@ -148,6 +148,11 @@ var generateId = function() {
     // in frontend, use the same generator for all JssProvider renders, this way we avoid classname collisions
     return (0, _jss).createGenerateId();
 }();
+var useDefaultHrefDecorator = function useDefaultHrefDecorator() {
+    return function(href) {
+        return href;
+    };
+};
 var ThemeContextProvider = function ThemeContextProvider(param) {
     var theme = param.theme, children = param.children;
     var classNamePrefix = React.useMemo(// we'll have missmatches when rendering client side. The disadvantage of this is that we can only have one instance of
@@ -173,7 +178,7 @@ var ThemeContextProvider = function ThemeContextProvider(param) {
             platform: (0, _platform).getPlatform(),
             insideNovumNativeApp: (0, _platform).isInsideNovumNativeApp()
         }, theme.platformOverrides);
-        var _mediaQueries1, _Link;
+        var _mediaQueries1, _Link, _useHrefDecorator;
         return {
             skinName: theme.skin.name,
             i18n: theme.i18n,
@@ -191,7 +196,8 @@ var ThemeContextProvider = function ThemeContextProvider(param) {
             colors: colors,
             Link: (_Link = theme.Link) !== null && _Link !== void 0 ? _Link : _theme.AnchorLink,
             isDarkMode: isDarkModeEnabled,
-            isIos: (0, _platform).getPlatform(platformOverrides) === 'ios'
+            isIos: (0, _platform).getPlatform(platformOverrides) === 'ios',
+            useHrefDecorator: (_useHrefDecorator = theme.useHrefDecorator) !== null && _useHrefDecorator !== void 0 ? _useHrefDecorator : useDefaultHrefDecorator
         };
     }, [
         theme,

package/dist/theme.d.ts

@@ -98,6 +98,7 @@ export declare type ThemeConfig = {
         desktopOrTabletMinHeight: number;
     };
     Link?: LinkComponent;
+    useHrefDecorator?: () => (href: string) => string;
     enableTabFocus?: boolean;
 };
 export declare type Theme = {
@@ -132,5 +133,6 @@ export declare type Theme = {
     Link: LinkComponent;
     isDarkMode: boolean;
     isIos: boolean;
+    useHrefDecorator: () => (href: string) => string;
 };
 export {};

package/dist/theme.js.flow

@@ -102,6 +102,7 @@ export type ThemeConfig = {
     desktopOrTabletMinHeight: number,
   },
   Link?: LinkComponent,
+  useHrefDecorator?: () => (href: string) => string,
   enableTabFocus?: boolean,
 };
 export type Theme = {
@@ -136,6 +137,7 @@ export type Theme = {
   Link: LinkComponent,
   isDarkMode: boolean,
   isIos: boolean,
+  useHrefDecorator: () => (href: string) => string,
 };
 declare export {};
 

package/dist/touchable.js

@@ -114,7 +114,8 @@ var useStyles = (0, _jss).createUseStyles(function() {
     };
 });
 var Touchable = /*#__PURE__*/ React.forwardRef(function(props, ref) {
-    var ref1 = (0, _hooks).useTheme(), texts = ref1.texts, analytics = ref1.analytics, platformOverrides = ref1.platformOverrides, Link = ref1.Link;
+    var ref1 = (0, _hooks).useTheme(), texts = ref1.texts, analytics = ref1.analytics, platformOverrides = ref1.platformOverrides, Link = ref1.Link, useHrefDecorator = ref1.useHrefDecorator;
+    var hrefDecorator = useHrefDecorator();
     var classes = useStyles();
     var isClicked = React.useRef(false);
     var trackingEvents = [];
@@ -150,7 +151,7 @@ var Touchable = /*#__PURE__*/ React.forwardRef(function(props, ref) {
     };
     var getHref = function getHref() {
         if (props.href) {
-            return props.href;
+            return hrefDecorator(props.href);
         }
         if (props.to && props.fullPageOnWebView) {
             if (typeof props.to === 'string') {

package/dist-es/button-layout.js

@@ -4,6 +4,7 @@ import { createUseStyles } from './jss';
 import { useScreenSize, useIsomorphicLayoutEffect } from './hooks';
 import { BUTTON_MIN_WIDTH, ButtonPrimary, ButtonSecondary, ButtonDanger } from './button';
 import classNames from 'classnames';
+import debounce from 'lodash/debounce';
 function _arrayWithHoles(arr) {
     if (Array.isArray(arr)) return arr;
 }
@@ -174,28 +175,29 @@ var buttonsRange = [
 var ButtonLayout = function(param) {
     var children = param.children, _align = param.align, align = _align === void 0 ? 'full-width' : _align, link = param.link, _withMargins = param.withMargins, withMargins = _withMargins === void 0 ? false : _withMargins;
     var ref = useScreenSize(), isTabletOrSmaller = ref.isTabletOrSmaller;
-    var ref1 = _slicedToArray(React.useState(true), 2), isMeasuring = ref1[0], setIsMeasuring = ref1[1];
     var childrenCount = React.Children.count(children);
-    var ref2 = _slicedToArray(React.useState(0), 2), buttonWidth = ref2[0], setButtonWidth = ref2[1];
-    var updateButtonWidth = function(buttonWidth) {
+    var ref1 = _slicedToArray(React.useState({
+        isMeasuring: true,
+        buttonWidth: 0
+    }), 2), buttonStatus = ref1[0], setButtonStatus = ref1[1];
+    var updateButtonStatus = function(param) {
+        var isMeasuring = param.isMeasuring, buttonWidth = param.buttonWidth;
         if (process.env.NODE_ENV !== 'test') {
-            setButtonWidth(buttonWidth);
-        }
-    };
-    var updateIsMeasuring = function(isMeasuring) {
-        if (process.env.NODE_ENV !== 'test') {
-            setIsMeasuring(isMeasuring);
+            setButtonStatus({
+                isMeasuring: isMeasuring,
+                buttonWidth: buttonWidth
+            });
         }
     };
     var classes = useStyles({
-        buttonWidth: buttonWidth,
+        buttonWidth: buttonStatus.buttonWidth,
         isTabletOrSmaller: isTabletOrSmaller,
         align: align,
         childrenCount: childrenCount
     });
     var wrapperElRef = React.useRef(null);
     useIsomorphicLayoutEffect(function() {
-        if (isMeasuring) {
+        if (buttonStatus.isMeasuring) {
             var req = window.requestAnimationFrame(function() {
                 if (wrapperElRef.current) {
                     var childrenWidths = Array.from(wrapperElRef.current.children).map(function(el) {
@@ -210,8 +212,10 @@ var ButtonLayout = function(param) {
                     var maxChildWidth = Math.ceil((_Math = Math).max.apply(_Math, _toConsumableArray(childrenWidths).concat([
                         BUTTON_MIN_WIDTH
                     ])));
-                    updateButtonWidth(maxChildWidth);
-                    updateIsMeasuring(false);
+                    updateButtonStatus({
+                        isMeasuring: false,
+                        buttonWidth: maxChildWidth
+                    });
                 }
             });
             return function() {
@@ -222,11 +226,18 @@ var ButtonLayout = function(param) {
         };
     }, [
         classes.link,
-        isMeasuring
+        buttonStatus
     ]);
-    var calcLayout = React.useCallback(function() {
-        updateButtonWidth(0);
-        updateIsMeasuring(true);
+    /**
+     * Multiple calls to calcLayout are debounced to workaround an issue that can be reproduced in chrome when pressing
+     * the button during a focus/visibility change. For example, pressing the button having the focus on the devTools.
+     */ var calcLayout = React.useMemo(function() {
+        return debounce(function() {
+            updateButtonStatus({
+                isMeasuring: true,
+                buttonWidth: 0
+            });
+        }, 50);
     }, []);
     useOnChildrenChangeEffect(wrapperElRef.current, calcLayout);
     useOnFontsReadyEffect(calcLayout);

package/dist-es/package-version.js

@@ -1,2 +1,2 @@
 // DO NOT EDIT THIS FILE. It's autogenerated by set-version.js
-export var PACKAGE_VERSION = '10.20.0';
+export var PACKAGE_VERSION = '10.21.0';

package/dist-es/theme-context-provider.js

@@ -113,6 +113,11 @@ var generateId = function() {
     // in frontend, use the same generator for all JssProvider renders, this way we avoid classname collisions
     return createGenerateId();
 }();
+var useDefaultHrefDecorator = function() {
+    return function(href) {
+        return href;
+    };
+};
 var ThemeContextProvider = function(param) {
     var theme = param.theme, children = param.children;
     var classNamePrefix = React.useMemo(// Always start the counter in 0 in server side, otherwise every new request to the server will inclrement the counter and
@@ -139,7 +144,7 @@ var ThemeContextProvider = function(param) {
             platform: getPlatform(),
             insideNovumNativeApp: isInsideNovumNativeApp()
         }, theme.platformOverrides);
-        var _mediaQueries, _Link;
+        var _mediaQueries, _Link, _useHrefDecorator;
         return {
             skinName: theme.skin.name,
             i18n: theme.i18n,
@@ -157,7 +162,8 @@ var ThemeContextProvider = function(param) {
             colors: colors,
             Link: (_Link = theme.Link) !== null && _Link !== void 0 ? _Link : AnchorLink,
             isDarkMode: isDarkModeEnabled,
-            isIos: getPlatform(platformOverrides) === 'ios'
+            isIos: getPlatform(platformOverrides) === 'ios',
+            useHrefDecorator: (_useHrefDecorator = theme.useHrefDecorator) !== null && _useHrefDecorator !== void 0 ? _useHrefDecorator : useDefaultHrefDecorator
         };
     }, [
         theme,

package/dist-es/touchable.js

@@ -80,7 +80,8 @@ var useStyles = createUseStyles(function() {
     };
 });
 var Touchable = /*#__PURE__*/ React.forwardRef(function(props, ref) {
-    var ref1 = useTheme(), texts = ref1.texts, analytics = ref1.analytics, platformOverrides = ref1.platformOverrides, Link = ref1.Link;
+    var ref1 = useTheme(), texts = ref1.texts, analytics = ref1.analytics, platformOverrides = ref1.platformOverrides, Link = ref1.Link, useHrefDecorator = ref1.useHrefDecorator;
+    var hrefDecorator = useHrefDecorator();
     var classes = useStyles();
     var isClicked = React.useRef(false);
     var trackingEvents = [];
@@ -116,7 +117,7 @@ var Touchable = /*#__PURE__*/ React.forwardRef(function(props, ref) {
     };
     var getHref = function() {
         if (props.href) {
-            return props.href;
+            return hrefDecorator(props.href);
         }
         if (props.to && props.fullPageOnWebView) {
             if (typeof props.to === 'string') {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@telefonica/mistica",
-    "version": "10.20.0",
+    "version": "10.21.0",
     "license": "MIT",
     "repository": {
         "type": "git",