@telefonica/mistica 10.0.1 → 10.3.1

package/dist/navigation-bar.js

@@ -17,6 +17,8 @@ var _responsiveLayout = _interopRequireDefault(require("./responsive-layout"));
 
 var _inline = _interopRequireDefault(require("./inline"));
 
+var _box = _interopRequireDefault(require("./box"));
+
 var _touchable = _interopRequireDefault(require("./touchable"));
 
 var _text = require("./text");
@@ -398,54 +400,60 @@ var useStyles = (0, _jss.createUseStyles)(function (theme) {
       right: 0,
       zIndex: NAVBAR_ZINDEX
     },
+    notFixedPadding: {
+      width: '100%',
+      padding: function padding(_ref7) {
+        var paddingX = _ref7.paddingX;
+        return "0 ".concat(paddingX, "px");
+      }
+    },
     navbar: _defineProperty({
       width: '100%',
       display: 'flex',
       alignItems: 'center',
-      background: function background(_ref7) {
-        var isInverse = _ref7.isInverse;
+      background: function background(_ref8) {
+        var isInverse = _ref8.isInverse;
         return isInverse ? theme.colors.navigationBarBackground : theme.colors.background;
       },
       height: DESKTOP_NAVBAR_HEIGHT,
       padding: '16px 0',
-      transition: 'border 300ms',
-      borderBottom: "1px solid ".concat(theme.colors.divider),
-      borderColor: function borderColor(_ref8) {
-        var isInverse = _ref8.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(_ref9) {
-        var isMenuOpen = _ref9.isMenuOpen,
-            isInverse = _ref9.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(_ref10) {
-            var isInverse = _ref10.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(_ref11) {
-        var isInverse = _ref11.isInverse;
+      borderColor: function borderColor(_ref13) {
+        var isInverse = _ref13.isInverse;
         return isInverse ? theme.colors.inverse : theme.colors.controlActivated;
       }
     },
@@ -463,8 +471,8 @@ var useStyles = (0, _jss.createUseStyles)(function (theme) {
       height: "calc(100vh - ".concat(MOBILE_NAVBAR_HEIGHT, "px)"),
       overflowY: 'auto',
       background: theme.colors.background,
-      boxShadow: function boxShadow(_ref12) {
-        var menuTransitionState = _ref12.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")
@@ -480,21 +488,34 @@ var useStyles = (0, _jss.createUseStyles)(function (theme) {
     },
     burgerMenuExitActive: {
       transform: 'translate(-100vw)'
-    }
+    },
+    iconButton: _defineProperty({
+      color: function color(_ref15) {
+        var isInverse = _ref15.isInverse;
+        return isInverse ? theme.colors.inverse : theme.colors.neutralHigh;
+      }
+    }, theme.mq.supportsHover, {
+      '&:hover': {
+        color: function color(_ref16) {
+          var isInverse = _ref16.isInverse;
+          return isInverse ? theme.colors.inverse : theme.colors.neutralMedium;
+        }
+      }
+    })
   };
 });
 
-var MainNavigationBar = function MainNavigationBar(_ref13) {
+var MainNavigationBar = function MainNavigationBar(_ref17) {
   var _logo;
 
-  var sections = _ref13.sections,
-      selectedIndex = _ref13.selectedIndex,
-      right = _ref13.right,
-      logo = _ref13.logo,
-      _ref13$isInverse = _ref13.isInverse,
-      isInverse = _ref13$isInverse === void 0 ? false : _ref13$isInverse,
-      _ref13$topFixed = _ref13.topFixed,
-      topFixed = _ref13$topFixed === void 0 ? true : _ref13$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 = (0, _hooks.useTheme)(),
       texts = _useTheme6.texts;
@@ -513,7 +534,8 @@ var MainNavigationBar = function MainNavigationBar(_ref13) {
   var classes = useStyles({
     isMenuOpen: isMenuOpen,
     isInverse: isInverse,
-    menuTransitionState: menuTransitionState
+    menuTransitionState: menuTransitionState,
+    withBorder: true
   });
 
   var _useScreenSize2 = (0, _hooks.useScreenSize)(),
@@ -612,9 +634,9 @@ var MainNavigationBar = function MainNavigationBar(_ref13) {
     alignItems: "center"
   }, logo, /*#__PURE__*/React.createElement("nav", null, /*#__PURE__*/React.createElement(_inline.default, {
     space: 32
-  }, sections.map(function (_ref14, idx) {
-    var title = _ref14.title,
-        touchableProps = _objectWithoutProperties(_ref14, _excluded);
+  }, sections.map(function (_ref18, idx) {
+    var title = _ref18.title,
+        touchableProps = _objectWithoutProperties(_ref18, _excluded);
 
     return /*#__PURE__*/React.createElement(_touchable.default, _extends({}, touchableProps, {
       key: idx,
@@ -629,16 +651,25 @@ var MainNavigationBar = function MainNavigationBar(_ref13) {
 
 exports.MainNavigationBar = MainNavigationBar;
 
-var NavigationBar = function NavigationBar(_ref15) {
-  var onBack = _ref15.onBack,
-      title = _ref15.title,
-      right = _ref15.right,
-      _ref15$isInverse = _ref15.isInverse,
-      isInverse = _ref15$isInverse === void 0 ? false : _ref15$isInverse,
-      _ref15$topFixed = _ref15.topFixed,
-      topFixed = _ref15$topFixed === void 0 ? true : _ref15$topFixed;
+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 = (0, _hooks.useTheme)(),
+      texts = _useTheme7.texts;
+
   var classes = useStyles({
-    isInverse: isInverse
+    isInverse: isInverse,
+    paddingX: paddingX !== null && paddingX !== void 0 ? paddingX : 0,
+    withBorder: withBorder
   });
   var content = /*#__PURE__*/React.createElement(_inline.default, {
     space: "between",
@@ -647,31 +678,40 @@ var NavigationBar = function NavigationBar(_ref15) {
     space: 24,
     alignItems: "center"
   }, onBack && /*#__PURE__*/React.createElement(_iconButton.default, {
-    "aria-label": "back",
-    onPress: onBack
-  }, /*#__PURE__*/React.createElement(_iconChevronLeftRegular.default, null)), /*#__PURE__*/React.createElement(_text.Text3, {
-    regular: true
-  }, title)), right);
+    "aria-label": texts.backNavigationBar,
+    onPress: onBack,
+    className: classes.iconButton
+  }, /*#__PURE__*/React.createElement(_iconChevronLeftRegular.default, {
+    color: "currentColor"
+  })), /*#__PURE__*/React.createElement(_text.Text3, {
+    regular: true,
+    truncate: true
+  }, title)), /*#__PURE__*/React.createElement(_box.default, {
+    paddingLeft: 24
+  }, right));
   return /*#__PURE__*/React.createElement(_themeVariantContext.ThemeVariant, {
     isInverse: isInverse
   }, /*#__PURE__*/React.createElement("header", {
     className: (0, _classnames.default)(classes.navbar, _defineProperty({}, classes.topFixed, topFixed))
-  }, topFixed ? /*#__PURE__*/React.createElement(_responsiveLayout.default, null, content) : content), topFixed && /*#__PURE__*/React.createElement("div", {
+  }, topFixed ? /*#__PURE__*/React.createElement(_responsiveLayout.default, null, content) : /*#__PURE__*/React.createElement("div", {
+    className: classes.notFixedPadding
+  }, content)), topFixed && /*#__PURE__*/React.createElement("div", {
     className: classes.spacer
   }));
 };
 
 exports.NavigationBar = NavigationBar;
 
-var FunnelNavigationBar = function FunnelNavigationBar(_ref16) {
-  var logo = _ref16.logo,
-      right = _ref16.right,
-      _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 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(_themeVariantContext.ThemeVariant, {
     isInverse: isInverse
@@ -698,8 +738,8 @@ var useNavigationBarActionGroupStyles = (0, _jss.createUseStyles)(function () {
   };
 });
 
-var NavigationBarActionGroup = function NavigationBarActionGroup(_ref17) {
-  var children = _ref17.children;
+var NavigationBarActionGroup = function NavigationBarActionGroup(_ref21) {
+  var children = _ref21.children;
   var classes = useNavigationBarActionGroupStyles();
   return /*#__PURE__*/React.createElement("div", {
     className: classes.lineHeightFix
@@ -712,39 +752,34 @@ var NavigationBarActionGroup = function NavigationBarActionGroup(_ref17) {
 exports.NavigationBarActionGroup = NavigationBarActionGroup;
 var useNavigationBarActionStyles = (0, _jss.createUseStyles)(function (theme) {
   return {
-    touchable: {
+    touchable: _defineProperty({
       lineHeight: 0,
       '& svg': {
-        color: function color(_ref18) {
-          var isInverse = _ref18.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(_ref19) {
-            var isInverse = _ref19.isInverse;
-            return isInverse ? theme.colors.textSecondaryInverse : theme.colors.textSecondary;
-          }
-        },
-        '&:hover svg': {
-          color: function color(_ref20) {
-            var isInverse = _ref20.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;
         }
       }
-    }
+    })
   };
 });
 
-var NavigationBarAction = function NavigationBarAction(_ref21) {
-  var children = _ref21.children,
-      touchableProps = _objectWithoutProperties(_ref21, _excluded2);
+var NavigationBarAction = function NavigationBarAction(_ref25) {
+  var children = _ref25.children,
+      touchableProps = _objectWithoutProperties(_ref25, _excluded2);
 
   var isInverse = (0, _themeVariantContext.useIsInverseVariant)();
   var classes = useNavigationBarActionStyles({

package/dist/navigation-bar.js.flow

@@ -26,13 +26,26 @@ declare type MainNavigationBarProps = {
   topFixed?: boolean,
 };
 declare export var MainNavigationBar: React.ComponentType<MainNavigationBarProps>;
-declare type NavigationBarProps = {
+declare type NavigationBarCommonProps = {|
   isInverse?: boolean,
   onBack?: () => void,
   title?: string,
   right?: React.Element<any>,
-  topFixed?: boolean,
-};
+  withBorder?: boolean,
+|};
+declare type NavigationBarTopFixedProps = {|
+  ...$Exact<NavigationBarCommonProps>,
+  topFixed?: true,
+|};
+declare type NavigationBarNotFixedProps = {|
+  ...$Exact<NavigationBarCommonProps>,
+
+  topFixed: false,
+  paddingX?: number,
+|};
+declare type NavigationBarProps =
+  | NavigationBarTopFixedProps
+  | NavigationBarNotFixedProps;
 declare export var NavigationBar: React.ComponentType<NavigationBarProps>;
 declare type FunnelNavigationBarProps = {
   isInverse?: boolean,
@@ -41,7 +54,10 @@ declare type FunnelNavigationBarProps = {
   topFixed?: boolean,
 };
 declare export var FunnelNavigationBar: React.ComponentType<FunnelNavigationBarProps>;
-declare export var NavigationBarActionGroup: React.ComponentType<{}>;
+declare type NavigationBarActionGroupProps = {
+  children: React.Node,
+};
+declare export var NavigationBarActionGroup: React.ComponentType<NavigationBarActionGroupProps>;
 declare type NavigationBarActionProps = TouchableProps;
 declare export var NavigationBarAction: React.ComponentType<NavigationBarActionProps>;
 declare export {};

package/dist/navigation-breadcrumbs.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-declare type NavigationBreadcrumbsProps = {
+export declare type NavigationBreadcrumbsProps = {
     title: string;
     breadcrumbs: ReadonlyArray<{
         readonly title: string;

package/dist/navigation-breadcrumbs.js.flow

@@ -1,7 +1,7 @@
 // @flow
 
 import * as React from "react";
-declare type NavigationBreadcrumbsProps = {
+export type NavigationBreadcrumbsProps = {
   title: string,
   breadcrumbs: $ReadOnlyArray<{
     +title: string,

package/dist/password-field.js

@@ -161,9 +161,9 @@ function _defineProperty(obj, key, value) {
   return obj;
 }
 
-var usePasswordAdornmentStyles = (0, _jss.createUseStyles)(function () {
+var usePasswordAdornmentStyles = (0, _jss.createUseStyles)(function (theme) {
   return {
-    shadow: _defineProperty({}, '@media (hover: hover)', {
+    shadow: _defineProperty({}, theme.mq.supportsHover, {
       '&:hover': {
         backgroundColor: 'rgba(0, 0, 0, 0.08)'
       }
@@ -220,6 +220,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) {
@@ -230,16 +232,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 = (0, _formContext.useFieldProps)({
     name: name,
     value: value,

package/dist/radio-button.d.ts

@@ -12,7 +12,7 @@ export declare const useRadioContext: () => RadioContextType;
 declare type PropsRender = {
     value: string;
     id?: string;
-    render: (radioElement: React.ReactElement<any>, disabled?: boolean) => React.ReactNode;
+    render: (radioElement: React.ReactElement, disabled?: boolean) => React.ReactNode;
     children?: undefined;
     dataAttributes?: DataAttributes;
 };

package/dist/section-title.d.ts

@@ -1,9 +1,10 @@
 import * as React from 'react';
 import TextLink from './text-link';
+import type { TextLinkProps } from './text-link';
 declare type Props = {
     children: React.ReactNode;
     id?: string;
-    right?: React.ReactElement<typeof TextLink>;
+    right?: React.ReactElement<TextLinkProps, typeof TextLink>;
     as?: 'h1' | 'h2' | 'h3' | 'h4';
 };
 declare const SectionTitle: React.FC<Props>;