@telefonica/mistica 10.24.0 → 10.24.1

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [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.24.1';
 exports.PACKAGE_VERSION = PACKAGE_VERSION;

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

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