@telefonica/mistica 10.20.0 → 10.22.2

package/CHANGELOG.md

@@ -1,3 +1,37 @@
+## [10.22.2](https://github.com/Telefonica/mistica-web/compare/v10.22.1...v10.22.2) (2022-02-07)
+
+
+### Bug Fixes
+
+* **Select:** set rawValue on init ([#409](https://github.com/Telefonica/mistica-web/issues/409)) ([d72cbd1](https://github.com/Telefonica/mistica-web/commit/d72cbd179e930712ef54c5e483e08c922a857059))
+
+## [10.22.1](https://github.com/Telefonica/mistica-web/compare/v10.22.0...v10.22.1) (2022-02-03)
+
+
+### Bug Fixes
+
+* **Form fields:** use rawValue to check if a form field is empty ([#408](https://github.com/Telefonica/mistica-web/issues/408)) ([50a5d37](https://github.com/Telefonica/mistica-web/commit/50a5d37179903ed69f1aa33ac6b7e5d6b1f10a6f))
+
+# [10.22.0](https://github.com/Telefonica/mistica-web/compare/v10.21.0...v10.22.0) (2022-02-02)
+
+
+### Features
+
+* **Chip:** new component ([#395](https://github.com/Telefonica/mistica-web/issues/395)) ([37f1be2](https://github.com/Telefonica/mistica-web/commit/37f1be2322ad3913b3084fb6a14539629a9a81b4))
+
+# [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,20 @@ 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
+            });
+        }, 5, {
+            maxWait: 50
+        });
     }, []);
     useOnChildrenChangeEffect(wrapperElRef.current, calcLayout);
     useOnFontsReadyEffect(calcLayout);

package/dist/chip.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import type { IconProps } from './utils/types';
+declare type ChipProps = {
+    children: string;
+    Icon?: React.FC<IconProps>;
+    onClose?: () => void;
+};
+declare const Chip: React.FC<ChipProps>;
+export default Chip;

package/dist/chip.js

@@ -0,0 +1,111 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+exports.default = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var _jss = require("./jss");
+var _hooks = require("./hooks");
+var _box = _interopRequireDefault(require("./box"));
+var _text = require("./text");
+var _iconButton = _interopRequireDefault(require("./icon-button"));
+var _iconCloseRegular = _interopRequireDefault(require("./generated/mistica-icons/icon-close-regular"));
+var _css = require("./utils/css");
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _defineProperty(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+var useStyles = (0, _jss).createUseStyles(function(param) {
+    var colors = param.colors, mq = param.mq;
+    return {
+        container: _defineProperty({
+            display: 'inline-flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            border: "1px solid ".concat(colors.border),
+            borderRadius: 20,
+            backgroundColor: colors.backgroundContainer,
+            minHeight: 32,
+            minWidth: 56,
+            cursor: 'default',
+            color: colors.neutralMedium,
+            '& > span': {
+                color: colors.textPrimary
+            }
+        }, mq.supportsHover, {
+            '&:hover': {
+                borderColor: function borderColor(param) {
+                    var isDarkMode = param.isDarkMode;
+                    return isDarkMode ? colors.background : colors.tagBackgroundActive;
+                },
+                color: colors.controlActivated,
+                backgroundColor: colors.tagBackgroundActive
+            },
+            '&:hover > span': {
+                color: colors.textLink
+            }
+        })
+    };
+});
+var Chip = function Chip(param) {
+    var children = param.children, Icon = param.Icon, onClose = param.onClose;
+    var ref = (0, _hooks).useTheme(), texts = ref.texts, isDarkMode = ref.isDarkMode;
+    var classes = useStyles({
+        isDarkMode: isDarkMode
+    });
+    return(/*#__PURE__*/ (0, _jsxRuntime).jsxs(_box.default, {
+        className: classes.container,
+        paddingLeft: Icon ? 8 : 12,
+        paddingRight: onClose ? 0 : 12,
+        children: [
+            Icon && /*#__PURE__*/ (0, _jsxRuntime).jsx(_box.default, {
+                paddingRight: 4,
+                children: /*#__PURE__*/ (0, _jsxRuntime).jsx(Icon, {
+                    color: "currentColor",
+                    size: (0, _css).pxToRem(16)
+                })
+            }),
+            /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text2, {
+                medium: true,
+                truncate: 1,
+                color: "currentColor",
+                children: children
+            }),
+            onClose ? /*#__PURE__*/ (0, _jsxRuntime).jsx(_box.default, {
+                paddingLeft: 4,
+                children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_iconButton.default, {
+                    size: 24,
+                    style: {
+                        display: 'flex',
+                        justifyContent: 'center',
+                        alignItems: 'center'
+                    },
+                    "aria-label": texts.closeButtonLabel,
+                    onPress: function onPress() {
+                        return onClose();
+                    },
+                    children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_iconCloseRegular.default, {
+                        size: 16,
+                        color: "currentColor"
+                    })
+                })
+            }) : null
+        ]
+    }));
+};
+var _default = Chip;
+exports.default = _default;

package/dist/chip.js.flow

@@ -0,0 +1,11 @@
+// @flow
+
+import * as React from "react";
+import type { IconProps } from "./utils/types";
+declare type ChipProps = {
+  children: string,
+  Icon?: React.ComponentType<IconProps>,
+  onClose?: () => void,
+};
+declare var Chip: React.ComponentType<ChipProps>;
+declare export default typeof Chip;

package/dist/form.js

@@ -182,7 +182,7 @@ var Form = function Form(param) {
                     if (input.disabled) {
                         continue;
                     }
-                    if (input.required && !input.value.trim()) {
+                    if (input.required && !rawValues[name].trim()) {
                         errors[name] = texts.formFieldErrorIsMandatory;
                     } else {
                         var error = validator === null || validator === void 0 ? void 0 : validator(values[name], rawValues[name]);

package/dist/index.d.ts

@@ -56,6 +56,7 @@ export { default as Callout } from './callout';
 export { useModalState } from './modal-context-provider';
 export { NavigationBar, MainNavigationBar, FunnelNavigationBar, NavigationBarActionGroup, NavigationBarAction, NavigationBarLogo, } from './navigation-bar';
 export { default as Image } from './image';
+export { default as Chip } from './chip';
 export { default as Video } from './video';
 export { default as Form } from './form';
 export { default as Select } from './select';

package/dist/index.js

@@ -566,6 +566,12 @@ Object.defineProperty(exports, "Image", {
         return _image.default;
     }
 });
+Object.defineProperty(exports, "Chip", {
+    enumerable: true,
+    get: function() {
+        return _chip.default;
+    }
+});
 Object.defineProperty(exports, "Video", {
     enumerable: true,
     get: function() {
@@ -8304,6 +8310,7 @@ var _callout = _interopRequireDefault(require("./callout"));
 var _modalContextProvider = require("./modal-context-provider");
 var _navigationBar = require("./navigation-bar");
 var _image = _interopRequireDefault(require("./image"));
+var _chip = _interopRequireDefault(require("./chip"));
 var _video = _interopRequireDefault(require("./video"));
 var _form = _interopRequireDefault(require("./form"));
 var _select = _interopRequireDefault(require("./select"));

package/dist/index.js.flow

@@ -99,6 +99,7 @@ declare export {
   NavigationBarLogo,
 } from "./navigation-bar";
 declare export { default as Image } from "./image";
+declare export { default as Chip } from "./chip";
 declare export { default as Video } from "./video";
 declare export { default as Form } from "./form";
 declare export { default as Select } from "./select";

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.22.2';
 exports.PACKAGE_VERSION = PACKAGE_VERSION;

package/dist/select.js

@@ -354,6 +354,21 @@ var Select = function Select(param) {
     };
     var focusableElement = focusableRef.current;
     var inputElement = inputRef.current;
+    React.useEffect(function() {
+        setRawValue({
+            name: name,
+            value: value
+        });
+        formSetValue({
+            name: name,
+            value: value
+        });
+    }, [
+        name,
+        setRawValue,
+        formSetValue,
+        value
+    ]);
     React.useEffect(function() {
         register(name, {
             input: inputRef.current,

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,20 @@ 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
+            });
+        }, 5, {
+            maxWait: 50
+        });
     }, []);
     useOnChildrenChangeEffect(wrapperElRef.current, calcLayout);
     useOnFontsReadyEffect(calcLayout);

package/dist-es/chip.js

@@ -0,0 +1,100 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createUseStyles } from './jss';
+import { useTheme } from './hooks';
+import Box from './box';
+import { Text2 } from './text';
+import IconButton from './icon-button';
+import IconCloseRegular from './generated/mistica-icons/icon-close-regular';
+import { pxToRem } from './utils/css';
+function _defineProperty(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+var useStyles = createUseStyles(function(param) {
+    var colors = param.colors, mq = param.mq;
+    return {
+        container: _defineProperty({
+            display: 'inline-flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            border: "1px solid ".concat(colors.border),
+            borderRadius: 20,
+            backgroundColor: colors.backgroundContainer,
+            minHeight: 32,
+            minWidth: 56,
+            cursor: 'default',
+            color: colors.neutralMedium,
+            '& > span': {
+                color: colors.textPrimary
+            }
+        }, mq.supportsHover, {
+            '&:hover': {
+                borderColor: function(param) {
+                    var isDarkMode = param.isDarkMode;
+                    return isDarkMode ? colors.background : colors.tagBackgroundActive;
+                },
+                color: colors.controlActivated,
+                backgroundColor: colors.tagBackgroundActive
+            },
+            '&:hover > span': {
+                color: colors.textLink
+            }
+        })
+    };
+});
+var Chip = function(param) {
+    var children = param.children, Icon = param.Icon, onClose = param.onClose;
+    var ref = useTheme(), texts = ref.texts, isDarkMode = ref.isDarkMode;
+    var classes = useStyles({
+        isDarkMode: isDarkMode
+    });
+    return(/*#__PURE__*/ _jsxs(Box, {
+        className: classes.container,
+        paddingLeft: Icon ? 8 : 12,
+        paddingRight: onClose ? 0 : 12,
+        children: [
+            Icon && /*#__PURE__*/ _jsx(Box, {
+                paddingRight: 4,
+                children: /*#__PURE__*/ _jsx(Icon, {
+                    color: "currentColor",
+                    size: pxToRem(16)
+                })
+            }),
+            /*#__PURE__*/ _jsx(Text2, {
+                medium: true,
+                truncate: 1,
+                color: "currentColor",
+                children: children
+            }),
+            onClose ? /*#__PURE__*/ _jsx(Box, {
+                paddingLeft: 4,
+                children: /*#__PURE__*/ _jsx(IconButton, {
+                    size: 24,
+                    style: {
+                        display: 'flex',
+                        justifyContent: 'center',
+                        alignItems: 'center'
+                    },
+                    "aria-label": texts.closeButtonLabel,
+                    onPress: function() {
+                        return onClose();
+                    },
+                    children: /*#__PURE__*/ _jsx(IconCloseRegular, {
+                        size: 16,
+                        color: "currentColor"
+                    })
+                })
+            }) : null
+        ]
+    }));
+};
+export default Chip;

package/dist-es/form.js

@@ -146,7 +146,7 @@ var Form = function(param) {
                     if (input.disabled) {
                         continue;
                     }
-                    if (input.required && !input.value.trim()) {
+                    if (input.required && !rawValues[name].trim()) {
                         errors[name] = texts.formFieldErrorIsMandatory;
                     } else {
                         var error = validator === null || validator === void 0 ? void 0 : validator(values[name], rawValues[name]);

package/dist-es/index.js

@@ -56,6 +56,7 @@ export { default as Callout } from './callout';
 export { useModalState } from './modal-context-provider';
 export { NavigationBar, MainNavigationBar, FunnelNavigationBar, NavigationBarActionGroup, NavigationBarAction, NavigationBarLogo } from './navigation-bar';
 export { default as Image } from './image';
+export { default as Chip } from './chip';
 export { default as Video } from './video';
 // Forms
 export { default as Form } from './form';

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.22.2';

package/dist-es/select.js

@@ -320,6 +320,21 @@ var Select = function(param) {
     };
     var focusableElement = focusableRef.current;
     var inputElement = inputRef.current;
+    React.useEffect(function() {
+        setRawValue({
+            name: name,
+            value: value
+        });
+        formSetValue({
+            name: name,
+            value: value
+        });
+    }, [
+        name,
+        setRawValue,
+        formSetValue,
+        value
+    ]);
     React.useEffect(function() {
         register(name, {
             input: inputRef.current,

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.22.2",
     "license": "MIT",
     "repository": {
         "type": "git",