@telefonica/mistica 10.1.0 → 10.4.0

package/dist/text-link.js

@@ -43,21 +43,6 @@ function _extends() {
   return _extends.apply(this, arguments);
 }
 
-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;
-}
-
 function _objectWithoutProperties(source, excluded) {
   if (source == null) return {};
 
@@ -94,22 +79,34 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
+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 (theme) {
   return {
-    textLink: {
+    textLink: _defineProperty({
       width: 'auto',
       lineHeight: 'inherit',
       display: 'inline-block',
       color: theme.colors.textLink,
-      wordBreak: 'break-word',
+      wordBreak: 'break-word'
+    }, theme.mq.supportsHover, {
       '&:hover': {
-        textDecoration: 'underline',
-        // Revert hover effect in touch devices
-        '@media (pointer: coarse)': {
-          textDecoration: 'initial'
-        }
+        textDecoration: 'underline'
       }
-    },
+    }),
     inverse: {
       color: theme.colors.textLinkInverse
     },

package/dist/theme-context-provider.js

@@ -227,7 +227,7 @@ var ThemeContextProvider = function ThemeContextProvider(_ref) {
   }, []);
   var isOsDarkModeEnabled = useIsOsDarkModeEnabled();
   var contextTheme = React.useMemo(function () {
-    var _theme$colorScheme, _theme$Link; // TODO: In next major version we could change this to "auto" by default
+    var _theme$colorScheme, _theme$mediaQueries, _theme$Link; // TODO: In next major version we could change this to "auto" by default
 
 
     var colorScheme = (_theme$colorScheme = theme.colorScheme) !== null && _theme$colorScheme !== void 0 ? _theme$colorScheme : 'light';
@@ -254,7 +254,7 @@ var ThemeContextProvider = function ThemeContextProvider(_ref) {
         }
       }, theme.analytics),
       dimensions: _objectSpread(_objectSpread({}, _theme.dimensions), theme.dimensions),
-      mq: theme.mediaQueries ? (0, _mediaQueries.createMediaQueries)(theme.mediaQueries) : (0, _mediaQueries.createMediaQueries)(_theme.mediaQueriesConfig),
+      mq: (0, _mediaQueries.createMediaQueries)((_theme$mediaQueries = theme.mediaQueries) !== null && _theme$mediaQueries !== void 0 ? _theme$mediaQueries : _theme.mediaQueriesConfig),
       colors: colors,
       Link: (_theme$Link = theme.Link) !== null && _theme$Link !== void 0 ? _theme$Link : _theme.AnchorLink,
       isDarkMode: isDarkModeEnabled,

package/dist/theme.d.ts

@@ -125,6 +125,7 @@ export declare type Theme = {
         tabletOrBigger: string;
         tabletOrSmaller: string;
         desktopOrBigger: string;
+        supportsHover: string;
     };
     colors: Colors;
     Link: LinkComponent;

package/dist/theme.js.flow

@@ -129,6 +129,7 @@ export type Theme = {
     tabletOrBigger: string,
     tabletOrSmaller: string,
     desktopOrBigger: string,
+    supportsHover: string,
   },
   colors: Colors,
   Link: LinkComponent,

package/dist/utils/media-queries.d.ts

@@ -11,4 +11,5 @@ export declare const createMediaQueries: ({ desktopOrTabletMinHeight, tabletMinW
     tabletOrBigger: string;
     tabletOrSmaller: string;
     desktopOrBigger: string;
+    supportsHover: string;
 };

package/dist/utils/media-queries.js

@@ -17,7 +17,12 @@ var createMediaQueries = function createMediaQueries(_ref) {
     largeDesktop: "@media only screen " + "and (min-height: ".concat(desktopOrTabletMinHeight, "px) ") + "and (min-width: ".concat(largeDesktopMinWidth, "px)"),
     tabletOrBigger: "@media only screen " + "and (min-height: ".concat(desktopOrTabletMinHeight, "px) ") + "and (min-width: ".concat(tabletMinWidth, "px)"),
     tabletOrSmaller: "@media only screen and (max-width: ".concat(desktopMinWidth - 1, "px), ") + "(max-height: ".concat(desktopOrTabletMinHeight - 1, "px)"),
-    desktopOrBigger: "@media only screen " + "and (min-height: ".concat(desktopOrTabletMinHeight, "px) ") + "and (min-width: ".concat(desktopMinWidth, "px)")
+    desktopOrBigger: "@media only screen " + "and (min-height: ".concat(desktopOrTabletMinHeight, "px) ") + "and (min-width: ".concat(desktopMinWidth, "px)"),
+    // Only apply hover effect to user agents using fine pointer devices (a mouse, for example)
+    // Also enabled for (pointer: none) for acceptance tests, where (pointer: fine) doesn't match.
+    // WARNING: you may be tempted to use @media (hover: hover) instead, but that doesn't work as expected in some android browsers.
+    // See: https://hover-pointer-media-query.glitch.me/ and https://github.com/mui-org/material-ui/issues/15736
+    supportsHover: '@media (pointer: fine), (pointer: none)'
   };
 };
 

package/dist/utils/media-queries.js.flow

@@ -13,4 +13,5 @@ declare export var createMediaQueries: (x: {
   tabletOrBigger: string,
   tabletOrSmaller: string,
   desktopOrBigger: string,
+  supportsHover: string,
 };

package/dist-es/card.js

@@ -67,7 +67,7 @@ var CardContent = function CardContent(_ref2) {
     regular: true
   }, title), /*#__PURE__*/React.createElement(Text2, {
     regular: true
-  }, subtitle))), /*#__PURE__*/React.createElement(Text2, {
+  }, subtitle))), description && /*#__PURE__*/React.createElement(Text2, {
     as: "p",
     regular: true,
     color: theme.colors.textSecondary

package/dist-es/icon-button.js

@@ -8,7 +8,6 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
 import * as React from 'react';
 import Touchable from './touchable';
-import { getPrefixedDataAttributes } from './utils/dom';
 var ICON_SIZE_1 = 24;
 
 var getButtonStyle = function getButtonStyle(backgroundUrl, size, backgroundColor, iconSize, disabled) {
@@ -51,14 +50,14 @@ var IconButton = function IconButton(props) {
       iconSize = props.iconSize,
       _props$size = props.size,
       size = _props$size === void 0 ? ICON_SIZE_1 : _props$size;
-
-  var commonProps = _objectSpread({
+  var commonProps = {
     className: props.className || '',
     disabled: props.disabled,
     style: _objectSpread(_objectSpread({}, getButtonStyle(icon, size, backgroundColor, iconSize, props.disabled)), props.style),
     trackingEvent: props.trackingEvent,
-    'aria-live': props['aria-live']
-  }, getPrefixedDataAttributes(props.dataAttributes));
+    'aria-live': props['aria-live'],
+    dataAttributes: props.dataAttributes
+  };
 
   if (props.href) {
     return /*#__PURE__*/React.createElement(Touchable, _extends({}, commonProps, {

package/dist-es/list.js

@@ -38,22 +38,17 @@ import { Boxed } from './boxed';
 import Divider from './divider';
 import { getPrefixedDataAttributes } from './utils/dom';
 var useStyles = createUseStyles(function (_ref) {
-  var colors = _ref.colors;
+  var colors = _ref.colors,
+      mq = _ref.mq;
   return {
-    hover: {
-      // Only apply hover effect to user agents using fine pointer devices (a mouse, for example)
-      // Also enabled for (pointer: none) for acceptance tests, where (pointer: fine) doesn't match.
-      // WARNING: you may be tempted to use @media (hover: hover) instead, but that doesn't work as expected in some android browsers.
-      // See: https://hover-pointer-media-query.glitch.me/ and https://github.com/mui-org/material-ui/issues/15736
-      '@media (pointer: fine), (pointer: none)': {
-        '&:hover': {
-          background: function background(_ref2) {
-            var isInverse = _ref2.isInverse;
-            return isInverse ? 'initial' : colors.backgroundAlternative;
-          }
+    hover: _defineProperty({}, mq.supportsHover, {
+      '&:hover': {
+        background: function background(_ref2) {
+          var isInverse = _ref2.isInverse;
+          return isInverse ? 'initial' : colors.backgroundAlternative;
         }
       }
-    },
+    }),
     rowContent: {
       width: '100%',
       cursor: 'pointer'
@@ -415,7 +410,7 @@ var RowContent = function RowContent(props) {
 
   return /*#__PURE__*/React.createElement(Box, {
     paddingX: 16,
-    className: classNames(classNames(classes.rowContent, classes.hover), classes.hoverDisabled),
+    className: classNames(classes.rowContent, classes.hover, classes.hoverDisabled),
     role: role
   }, props.right ? renderContent({
     type: 'custom',

package/dist-es/navigation-bar.js

@@ -270,44 +270,43 @@ var useStyles = createUseStyles(function (theme) {
       },
       height: DESKTOP_NAVBAR_HEIGHT,
       padding: '16px 0',
-      transition: 'border 300ms',
-      borderBottom: "1px solid ".concat(theme.colors.divider),
-      borderColor: function borderColor(_ref9) {
-        var isInverse = _ref9.isInverse;
+      borderBottomStyle: 'solid',
+      borderBottomWidth: function borderBottomWidth(_ref9) {
+        var withBorder = _ref9.withBorder;
+        return withBorder ? 1 : 0;
+      },
+      borderColor: function borderColor(_ref10) {
+        var isInverse = _ref10.isInverse;
         return isInverse && !theme.isDarkMode ? 'transparent' : theme.colors.divider;
       }
     }, theme.mq.tabletOrSmaller, {
-      borderColor: function borderColor(_ref10) {
-        var isMenuOpen = _ref10.isMenuOpen,
-            isInverse = _ref10.isInverse;
+      transition: 'border-color 300ms',
+      borderColor: function borderColor(_ref11) {
+        var isMenuOpen = _ref11.isMenuOpen,
+            isInverse = _ref11.isInverse;
         return isMenuOpen || isInverse && !theme.isDarkMode ? 'transparent' : theme.colors.divider;
       },
       height: MOBILE_NAVBAR_HEIGHT,
       padding: '8px 0'
     }),
-    section: {
+    section: _defineProperty({
       height: DESKTOP_NAVBAR_HEIGHT,
       display: 'flex',
       alignItems: 'center',
       padding: '0 8px',
       borderBottom: "2px solid transparent",
-      transition: 'border-color 300ms ease-in-out',
-      // Only apply hover effect to user agents using fine pointer devices (a mouse, for example)
-      // Also enabled for (pointer: none) for acceptance tests, where (pointer: fine) doesn't match.
-      // WARNING: you may be tempted to use @media (hover: hover) instead, but that doesn't work as expected in some android browsers.
-      // See: https://hover-pointer-media-query.glitch.me/ and https://github.com/mui-org/material-ui/issues/15736
-      '@media (pointer: fine), (pointer: none)': {
-        '&:hover span': {
-          color: function color(_ref11) {
-            var isInverse = _ref11.isInverse;
-            return isInverse ? theme.colors.textSecondaryInverse : theme.colors.textSecondary;
-          }
+      transition: 'border-color 300ms ease-in-out'
+    }, theme.mq.supportsHover, {
+      '&:hover span': {
+        color: function color(_ref12) {
+          var isInverse = _ref12.isInverse;
+          return isInverse ? theme.colors.textSecondaryInverse : theme.colors.textSecondary;
         }
       }
-    },
+    }),
     selectedSection: {
-      borderColor: function borderColor(_ref12) {
-        var isInverse = _ref12.isInverse;
+      borderColor: function borderColor(_ref13) {
+        var isInverse = _ref13.isInverse;
         return isInverse ? theme.colors.inverse : theme.colors.controlActivated;
       }
     },
@@ -325,8 +324,8 @@ var useStyles = createUseStyles(function (theme) {
       height: "calc(100vh - ".concat(MOBILE_NAVBAR_HEIGHT, "px)"),
       overflowY: 'auto',
       background: theme.colors.background,
-      boxShadow: function boxShadow(_ref13) {
-        var menuTransitionState = _ref13.menuTransitionState;
+      boxShadow: function boxShadow(_ref14) {
+        var menuTransitionState = _ref14.menuTransitionState;
         return menuTransitionState !== 'closed' ? "6px 0 4px -4px rgba(0, 0, 0, ".concat(shadowAlpha, ")") : 'none';
       },
       transition: "transform ".concat(BURGER_MENU_ANIMATION_DURATION_MS, "ms ease-out")
@@ -343,37 +342,32 @@ var useStyles = createUseStyles(function (theme) {
     burgerMenuExitActive: {
       transform: 'translate(-100vw)'
     },
-    iconButton: {
-      color: function color(_ref14) {
-        var isInverse = _ref14.isInverse;
+    iconButton: _defineProperty({
+      color: function color(_ref15) {
+        var isInverse = _ref15.isInverse;
         return isInverse ? theme.colors.inverse : theme.colors.neutralHigh;
-      },
-      // Only apply hover effect to user agents using fine pointer devices (a mouse, for example)
-      // Also enabled for (pointer: none) for acceptance tests, where (pointer: fine) doesn't match.
-      // WARNING: you may be tempted to use @media (hover: hover) instead, but that doesn't work as expected in some android browsers.
-      // See: https://hover-pointer-media-query.glitch.me/ and https://github.com/mui-org/material-ui/issues/15736
-      '@media (pointer: fine), (pointer: none)': {
-        '&:hover': {
-          color: function color(_ref15) {
-            var isInverse = _ref15.isInverse;
-            return isInverse ? theme.colors.inverse : theme.colors.neutralMedium;
-          }
+      }
+    }, theme.mq.supportsHover, {
+      '&:hover': {
+        color: function color(_ref16) {
+          var isInverse = _ref16.isInverse;
+          return isInverse ? theme.colors.inverse : theme.colors.neutralMedium;
         }
       }
-    }
+    })
   };
 });
-export var MainNavigationBar = function MainNavigationBar(_ref16) {
+export var MainNavigationBar = function MainNavigationBar(_ref17) {
   var _logo;
 
-  var sections = _ref16.sections,
-      selectedIndex = _ref16.selectedIndex,
-      right = _ref16.right,
-      logo = _ref16.logo,
-      _ref16$isInverse = _ref16.isInverse,
-      isInverse = _ref16$isInverse === void 0 ? false : _ref16$isInverse,
-      _ref16$topFixed = _ref16.topFixed,
-      topFixed = _ref16$topFixed === void 0 ? true : _ref16$topFixed;
+  var sections = _ref17.sections,
+      selectedIndex = _ref17.selectedIndex,
+      right = _ref17.right,
+      logo = _ref17.logo,
+      _ref17$isInverse = _ref17.isInverse,
+      isInverse = _ref17$isInverse === void 0 ? false : _ref17$isInverse,
+      _ref17$topFixed = _ref17.topFixed,
+      topFixed = _ref17$topFixed === void 0 ? true : _ref17$topFixed;
 
   var _useTheme6 = useTheme(),
       texts = _useTheme6.texts;
@@ -392,7 +386,8 @@ export var MainNavigationBar = function MainNavigationBar(_ref16) {
   var classes = useStyles({
     isMenuOpen: isMenuOpen,
     isInverse: isInverse,
-    menuTransitionState: menuTransitionState
+    menuTransitionState: menuTransitionState,
+    withBorder: true
   });
 
   var _useScreenSize2 = useScreenSize(),
@@ -491,9 +486,9 @@ export var MainNavigationBar = function MainNavigationBar(_ref16) {
     alignItems: "center"
   }, logo, /*#__PURE__*/React.createElement("nav", null, /*#__PURE__*/React.createElement(Inline, {
     space: 32
-  }, sections.map(function (_ref17, idx) {
-    var title = _ref17.title,
-        touchableProps = _objectWithoutProperties(_ref17, _excluded);
+  }, sections.map(function (_ref18, idx) {
+    var title = _ref18.title,
+        touchableProps = _objectWithoutProperties(_ref18, _excluded);
 
     return /*#__PURE__*/React.createElement(Touchable, _extends({}, touchableProps, {
       key: idx,
@@ -505,22 +500,25 @@ export var MainNavigationBar = function MainNavigationBar(_ref16) {
     className: classes.spacer
   }));
 };
-export var NavigationBar = function NavigationBar(_ref18) {
-  var onBack = _ref18.onBack,
-      title = _ref18.title,
-      right = _ref18.right,
-      _ref18$isInverse = _ref18.isInverse,
-      isInverse = _ref18$isInverse === void 0 ? false : _ref18$isInverse,
-      _ref18$topFixed = _ref18.topFixed,
-      topFixed = _ref18$topFixed === void 0 ? true : _ref18$topFixed,
-      paddingX = _ref18.paddingX;
+export var NavigationBar = function NavigationBar(_ref19) {
+  var onBack = _ref19.onBack,
+      title = _ref19.title,
+      right = _ref19.right,
+      _ref19$isInverse = _ref19.isInverse,
+      isInverse = _ref19$isInverse === void 0 ? false : _ref19$isInverse,
+      _ref19$topFixed = _ref19.topFixed,
+      topFixed = _ref19$topFixed === void 0 ? true : _ref19$topFixed,
+      paddingX = _ref19.paddingX,
+      _ref19$withBorder = _ref19.withBorder,
+      withBorder = _ref19$withBorder === void 0 ? true : _ref19$withBorder;
 
   var _useTheme7 = useTheme(),
       texts = _useTheme7.texts;
 
   var classes = useStyles({
     isInverse: isInverse,
-    paddingX: paddingX !== null && paddingX !== void 0 ? paddingX : 0
+    paddingX: paddingX !== null && paddingX !== void 0 ? paddingX : 0,
+    withBorder: withBorder
   });
   var content = /*#__PURE__*/React.createElement(Inline, {
     space: "between",
@@ -550,15 +548,16 @@ export var NavigationBar = function NavigationBar(_ref18) {
     className: classes.spacer
   }));
 };
-export var FunnelNavigationBar = function FunnelNavigationBar(_ref19) {
-  var logo = _ref19.logo,
-      right = _ref19.right,
-      _ref19$isInverse = _ref19.isInverse,
-      isInverse = _ref19$isInverse === void 0 ? false : _ref19$isInverse,
-      _ref19$topFixed = _ref19.topFixed,
-      topFixed = _ref19$topFixed === void 0 ? true : _ref19$topFixed;
+export var FunnelNavigationBar = function FunnelNavigationBar(_ref20) {
+  var logo = _ref20.logo,
+      right = _ref20.right,
+      _ref20$isInverse = _ref20.isInverse,
+      isInverse = _ref20$isInverse === void 0 ? false : _ref20$isInverse,
+      _ref20$topFixed = _ref20.topFixed,
+      topFixed = _ref20$topFixed === void 0 ? true : _ref20$topFixed;
   var classes = useStyles({
-    isInverse: isInverse
+    isInverse: isInverse,
+    withBorder: true
   });
   return /*#__PURE__*/React.createElement(ThemeVariant, {
     isInverse: isInverse
@@ -582,8 +581,8 @@ var useNavigationBarActionGroupStyles = createUseStyles(function () {
     }
   };
 });
-export var NavigationBarActionGroup = function NavigationBarActionGroup(_ref20) {
-  var children = _ref20.children;
+export var NavigationBarActionGroup = function NavigationBarActionGroup(_ref21) {
+  var children = _ref21.children;
   var classes = useNavigationBarActionGroupStyles();
   return /*#__PURE__*/React.createElement("div", {
     className: classes.lineHeightFix
@@ -594,38 +593,33 @@ export var NavigationBarActionGroup = function NavigationBarActionGroup(_ref20)
 };
 var useNavigationBarActionStyles = createUseStyles(function (theme) {
   return {
-    touchable: {
+    touchable: _defineProperty({
       lineHeight: 0,
       '& svg': {
-        color: function color(_ref21) {
-          var isInverse = _ref21.isInverse;
+        color: function color(_ref22) {
+          var isInverse = _ref22.isInverse;
           return isInverse ? theme.colors.inverse : theme.colors.neutralHigh;
         }
+      }
+    }, theme.mq.supportsHover, {
+      '&:hover span': {
+        color: function color(_ref23) {
+          var isInverse = _ref23.isInverse;
+          return isInverse ? theme.colors.textSecondaryInverse : theme.colors.textSecondary;
+        }
       },
-      // Only apply hover effect to user agents using fine pointer devices (a mouse, for example)
-      // Also enabled for (pointer: none) for acceptance tests, where (pointer: fine) doesn't match.
-      // WARNING: you may be tempted to use @media (hover: hover) instead, but that doesn't work as expected in some android browsers.
-      // See: https://hover-pointer-media-query.glitch.me/ and https://github.com/mui-org/material-ui/issues/15736
-      '@media (pointer: fine), (pointer: none)': {
-        '&:hover span': {
-          color: function color(_ref22) {
-            var isInverse = _ref22.isInverse;
-            return isInverse ? theme.colors.textSecondaryInverse : theme.colors.textSecondary;
-          }
-        },
-        '&:hover svg': {
-          color: function color(_ref23) {
-            var isInverse = _ref23.isInverse;
-            return isInverse ? theme.colors.inverse : theme.colors.neutralMedium;
-          }
+      '&:hover svg': {
+        color: function color(_ref24) {
+          var isInverse = _ref24.isInverse;
+          return isInverse ? theme.colors.inverse : theme.colors.neutralMedium;
         }
       }
-    }
+    })
   };
 });
-export var NavigationBarAction = function NavigationBarAction(_ref24) {
-  var children = _ref24.children,
-      touchableProps = _objectWithoutProperties(_ref24, _excluded2);
+export var NavigationBarAction = function NavigationBarAction(_ref25) {
+  var children = _ref25.children,
+      touchableProps = _objectWithoutProperties(_ref25, _excluded2);
 
   var isInverse = useIsInverseVariant();
   var classes = useNavigationBarActionStyles({

package/dist-es/password-field.js

@@ -28,9 +28,9 @@ import IconButton from './icon-button';
 import Visibility from './icons/icon-visibility';
 import VisibilityOff from './icons/icon-visibility-off';
 import { createUseStyles } from './jss';
-var usePasswordAdornmentStyles = createUseStyles(function () {
+var usePasswordAdornmentStyles = createUseStyles(function (theme) {
   return {
-    shadow: _defineProperty({}, '@media (hover: hover)', {
+    shadow: _defineProperty({}, theme.mq.supportsHover, {
       '&:hover': {
         backgroundColor: 'rgba(0, 0, 0, 0.08)'
       }
@@ -87,6 +87,8 @@ var PasswordField = function PasswordField(_ref2) {
       isVisible = _React$useState2[0],
       setIsVisible = _React$useState2[1];
 
+  var caretPositionRef = React.useRef(0);
+
   var _inputRef = React.useRef(null);
 
   var processValue = function processValue(value) {
@@ -97,16 +99,22 @@ var PasswordField = function PasswordField(_ref2) {
     var input = _inputRef.current;
 
     if (input) {
-      input.focus(); // neeeded to place the caret at the end
+      if (input.selectionStart !== null) {
+        caretPositionRef.current = input.selectionStart;
+      }
 
-      setTimeout(function () {
-        var v = input.value;
-        input.value = '';
-        input.value = v;
-      }, 0);
+      input.focus();
     }
   };
 
+  React.useEffect(function () {
+    var input = _inputRef.current;
+
+    if (input) {
+      input.selectionStart = caretPositionRef.current;
+      input.selectionEnd = caretPositionRef.current;
+    }
+  }, [isVisible, caretPositionRef, _inputRef]);
   var fieldProps = useFieldProps({
     name: name,
     value: value,