@telefonica/mistica 10.24.0 → 10.25.0

package/CHANGELOG.md

@@ -1,3 +1,24 @@
+# [10.25.0](https://github.com/Telefonica/mistica-web/compare/v10.24.2...v10.25.0) (2022-02-23)
+
+
+### Features
+
+* **webview-bridge:** upgrade webview-bridge dependency ([#420](https://github.com/Telefonica/mistica-web/issues/420)) ([0b01b6e](https://github.com/Telefonica/mistica-web/commit/0b01b6ed67bb0bcb10927ffb44812095abacc233))
+
+## [10.24.2](https://github.com/Telefonica/mistica-web/compare/v10.24.1...v10.24.2) (2022-02-22)
+
+
+### Bug Fixes
+
+* **Popover:** bug with close event propagation ([#421](https://github.com/Telefonica/mistica-web/issues/421)) ([0b439b6](https://github.com/Telefonica/mistica-web/commit/0b439b6cdb9ea6404d0ec2c6b50b61d99937cbc6))
+
+## [10.24.1](https://github.com/Telefonica/mistica-web/compare/v10.24.0...v10.24.1) (2022-02-16)
+
+
+### Bug Fixes
+
+* **ThemeContextProvider:** Support SSR + Strict Mode ([#419](https://github.com/Telefonica/mistica-web/issues/419)) ([05b701d](https://github.com/Telefonica/mistica-web/commit/05b701d868d3b49a280c32365244771bd9c94416))
+
 # [10.24.0](https://github.com/Telefonica/mistica-web/compare/v10.23.0...v10.24.0) (2022-02-15)
 
 

package/dist/package-version.js

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

package/dist/popover.js

@@ -302,11 +302,6 @@ var Popover = function Popover(param) {
     }, [
         isVisible
     ]);
-    var handleClose = function handleClose() {
-        if (onClose) {
-            onClose();
-        }
-    };
     var popoverContainer = null;
     if (isVisible && targetPosition) {
         var ref2 = getPositionStyles(position, innerWidth, targetPosition, isTabletOrSmaller), containerStyles = ref2.containerStyles, arrowStyles = ref2.arrowStyles;
@@ -346,7 +341,10 @@ var Popover = function Popover(param) {
                         /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
                             className: classes.closeButtonIcon,
                             children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_iconButton.default, {
-                                onPress: handleClose,
+                                onPress: function onPress(e) {
+                                    onClose === null || onClose === void 0 ? void 0 : onClose();
+                                    e.stopPropagation();
+                                },
                                 trackingEvent: trackingEvent,
                                 "aria-label": texts.modalClose,
                                 children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_iconCloseRegular.default, {

package/dist/theme-context-provider.d.ts

@@ -3,6 +3,16 @@ import type { ThemeConfig } from './theme';
 export declare const useIsOsDarkModeEnabled: () => boolean;
 declare type Props = {
     theme: ThemeConfig;
+    /**
+     * You should use this prop if you use Strict Mode and Server Side Rendering together.
+     * This identifier will be used to generate unique class names for each instance of ThemeContextProvider.
+     * If no identifier is provided, this will fallback to an auto-incremented id, which will cause
+     * problems in SSR + Strict Mode because the class names from client and server won't match.
+     * More info: https://reactjs.org/docs/strict-mode.html#detecting-unexpected-side-effects
+     *
+     * Once we migrate to React18, we could remove this prop and use the useId hook instead.
+     */
+    providerId?: string;
     children?: React.ReactNode;
 };
 declare const ThemeContextProvider: React.FC<Props>;

package/dist/theme-context-provider.js

@@ -145,7 +145,7 @@ exports.useIsOsDarkModeEnabled = useIsOsDarkModeEnabled;
 // This counter will increment with every new instance of ThemeContextProvider in the app. In a typical app we don't need more than
 // one instance of ThemeContextProvider. But some apps may depend on libs that use Mistica too, so there may be more than one instance
 // in those cases. We use this counter to avoid class name collisions in those cases.
-var jssInstanceId = 0;
+var nextJssInstanceId = 0;
 var generateId = function() {
     if (process.env.NODE_ENV === 'test') {
         // in tests classnames are just the classame, whithout ids
@@ -166,12 +166,19 @@ var useDefaultHrefDecorator = function useDefaultHrefDecorator() {
     };
 };
 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
-    // ThemeContextProvider in apps with ssr.
-    function() {
-        return process.env.NODE_ENV === 'test' ? '' : "mistica-".concat(_packageVersion.PACKAGE_VERSION.replace(/\./g, '-'), "-").concat((0, _environment).isServerSide() ? 0 : jssInstanceId++, "-");
-    }, []);
+    var theme = param.theme, children = param.children, providerId = param.providerId;
+    var ref = _slicedToArray(React.useState(function() {
+        if (providerId) {
+            return providerId;
+        } else {
+            return (0, _environment).isServerSide() ? 0 : nextJssInstanceId++;
+        }
+    }), 1), instanceId = ref[0];
+    var classNamePrefix = React.useMemo(function() {
+        return process.env.NODE_ENV === 'test' ? '' : "mistica-".concat(_packageVersion.PACKAGE_VERSION.replace(/\./g, '-'), "_").concat(instanceId, "_");
+    }, [
+        instanceId
+    ]);
     var nextAriaId = React.useRef(1);
     var getAriaId = React.useCallback(function() {
         return "aria-id-hook-".concat(nextAriaId.current++);

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

@@ -5,6 +5,17 @@ import type { ThemeConfig } from "./theme";
 declare export var useIsOsDarkModeEnabled: () => boolean;
 declare type Props = {
   theme: ThemeConfig,
+
+  /**
+   * You should use this prop if you use Strict Mode and Server Side Rendering together.
+   * This identifier will be used to generate unique class names for each instance of ThemeContextProvider.
+   * If no identifier is provided, this will fallback to an auto-incremented id, which will cause
+   * problems in SSR + Strict Mode because the class names from client and server won't match.
+   * More info: https://reactjs.org/docs/strict-mode.html#detecting-unexpected-side-effects
+   *
+   * Once we migrate to React18, we could remove this prop and use the useId hook instead.
+   */
+  providerId?: string,
   children?: React.Node,
 };
 declare var ThemeContextProvider: React.ComponentType<Props>;

package/dist/utils/types.d.ts

@@ -1,12 +1,6 @@
 /// <reference types="react" />
 export type { RendersElement, RendersNullableElement } from './renders-element';
-export declare type TrackingEvent = {
-    readonly [key: string]: unknown;
-    readonly category: string;
-    readonly action: string;
-    readonly label?: string;
-    readonly value?: number;
-};
+export type { TrackingEvent } from '@tef-novum/webview-bridge';
 export declare type DataAttributes = {
     [name: string]: string | number | boolean | undefined;
 };

package/dist/utils/types.js.flow

@@ -1,13 +1,7 @@
 // @flow
 
 export type { RendersElement, RendersNullableElement } from "./renders-element";
-export type TrackingEvent = {
-  [key: string]: mixed,
-  +category: string,
-  +action: string,
-  +label?: string,
-  +value?: number,
-};
+export type { TrackingEvent } from "@tef-novum/webview-bridge";
 export type DataAttributes = {
   [name: string]: string | number | boolean | void,
 };

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.24.0';
+export var PACKAGE_VERSION = '10.25.0';

package/dist-es/popover.js

@@ -270,11 +270,6 @@ var Popover = function(param) {
     }, [
         isVisible
     ]);
-    var handleClose = function() {
-        if (onClose) {
-            onClose();
-        }
-    };
     var popoverContainer = null;
     if (isVisible && targetPosition) {
         var ref2 = getPositionStyles(position, innerWidth, targetPosition, isTabletOrSmaller), containerStyles = ref2.containerStyles, arrowStyles = ref2.arrowStyles;
@@ -314,7 +309,10 @@ var Popover = function(param) {
                         /*#__PURE__*/ _jsx("div", {
                             className: classes.closeButtonIcon,
                             children: /*#__PURE__*/ _jsx(IconButton, {
-                                onPress: handleClose,
+                                onPress: function(e) {
+                                    onClose === null || onClose === void 0 ? void 0 : onClose();
+                                    e.stopPropagation();
+                                },
                                 trackingEvent: trackingEvent,
                                 "aria-label": texts.modalClose,
                                 children: /*#__PURE__*/ _jsx(IcnCloseRegular, {

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

@@ -112,7 +112,7 @@ export var useIsOsDarkModeEnabled = function() {
 // This counter will increment with every new instance of ThemeContextProvider in the app. In a typical app we don't need more than
 // one instance of ThemeContextProvider. But some apps may depend on libs that use Mistica too, so there may be more than one instance
 // in those cases. We use this counter to avoid class name collisions in those cases.
-var jssInstanceId = 0;
+var nextJssInstanceId = 0;
 var generateId = function() {
     if (process.env.NODE_ENV === 'test') {
         // in tests classnames are just the classame, whithout ids
@@ -133,13 +133,19 @@ var useDefaultHrefDecorator = function() {
     };
 };
 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
-    // we'll have missmatches when rendering client side. The disadvantage of this is that we can only have one instance of
-    // ThemeContextProvider in apps with ssr.
-    function() {
-        return process.env.NODE_ENV === 'test' ? '' : "mistica-".concat(PACKAGE_VERSION.replace(/\./g, '-'), "-").concat(isServerSide() ? 0 : jssInstanceId++, "-");
-    }, []);
+    var theme = param.theme, children = param.children, providerId = param.providerId;
+    var ref = _slicedToArray(React.useState(function() {
+        if (providerId) {
+            return providerId;
+        } else {
+            return isServerSide() ? 0 : nextJssInstanceId++;
+        }
+    }), 1), instanceId = ref[0];
+    var classNamePrefix = React.useMemo(function() {
+        return process.env.NODE_ENV === 'test' ? '' : "mistica-".concat(PACKAGE_VERSION.replace(/\./g, '-'), "_").concat(instanceId, "_");
+    }, [
+        instanceId
+    ]);
     var nextAriaId = React.useRef(1);
     var getAriaId = React.useCallback(function() {
         return "aria-id-hook-".concat(nextAriaId.current++);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@telefonica/mistica",
-    "version": "10.24.0",
+    "version": "10.25.0",
     "license": "MIT",
     "repository": {
         "type": "git",
@@ -122,7 +122,7 @@
     },
     "dependencies": {
         "@juggle/resize-observer": "^3.3.1",
-        "@tef-novum/webview-bridge": "^3.0.0",
+        "@tef-novum/webview-bridge": "^3.2.1",
         "@telefonica/libphonenumber": "^2.8.0",
         "classnames": "^2.3.1",
         "jss": "^10.6.0",