@telefonica/mistica 18.0.0-beta.2 → 18.0.0-beta.3

package/src/hooks.tsx

@@ -6,6 +6,7 @@ import ScreenSizeContext from './screen-size-context';
 import {listenResize} from './utils/dom';
 import {isClientSide} from './utils/environment';
 import {isEqual} from './utils/helpers';
+import {isFirefox} from './utils/platform';
 
 import type {Theme} from './theme';
 import type {ScreenSizeContextType} from './screen-size-context';
@@ -43,16 +44,19 @@ export const useDisableBodyScroll = (disable: boolean): void => {
                     // if the scrollbar is visible, we don't want to hide it because content will be resized
                     const overflowY = hasScrollbar ? 'scroll' : 'hidden';
 
+                    // Firefox correctly respects overflow:hidden on body without needing position:fixed.
+                    // Using position:fixed in Firefox breaks position:sticky elements (e.g. Sidenavbar).
+                    const fixedPositionStyles = isFirefox()
+                        ? []
+                        : ['position: fixed;', `top: ${-bodyScrollTop}px;`, 'left: 0px;', 'right: 0px;'];
+
                     document.body.style.cssText =
                         bodyStyles +
                         (bodyStyles.endsWith(';') ? '' : ';') +
                         [
                             'overflow: hidden;',
                             `overflow-y: ${overflowY};`,
-                            'position: fixed;',
-                            `top: ${-bodyScrollTop}px;`,
-                            'left: 0px;',
-                            'right: 0px;',
+                            ...fixedPositionStyles,
                             'overscroll-behavior-y: contain;', // disable overscroll
                         ].join('');
                 }

package/src/package-version.tsx

@@ -1,2 +1,2 @@
 // DO NOT EDIT THIS FILE. It's autogenerated by set-version.js
-export const PACKAGE_VERSION = '18.0.0-beta.2' as string;
+export const PACKAGE_VERSION = '18.0.0-beta.3' as string;

package/src/skins/blau.tsx

@@ -699,8 +699,13 @@ export const getBlauSkin: GetKnownSkin = () => {
             cardTitleDefault: {lineHeight: {desktop: 28, mobile: 24}, size: {desktop: 20, mobile: 18}},
             cardTitleSnap: {lineHeight: {desktop: 24, mobile: 20}, size: {desktop: 16, mobile: 14}},
             chipLabel: {
-                lineHeight: {desktop: 24, mobile: 20},
-                size: {desktop: 16, mobile: 14},
+                lineHeight: {desktop: 24, mobile: 24},
+                size: {desktop: 16, mobile: 16},
+                weight: 'medium',
+            },
+            chipLabelSmall: {
+                lineHeight: {desktop: 20, mobile: 20},
+                size: {desktop: 14, mobile: 14},
                 weight: 'medium',
             },
             drawerTitle: {

package/src/skins/defaults.tsx

@@ -56,7 +56,12 @@ export const defaultTextPresetsConfig: TextPresetsConfig = {
     tabsLabel: {weight: 'medium', size: {mobile: 16, desktop: 18}, lineHeight: {mobile: 24, desktop: 24}},
     chipLabel: {
         lineHeight: {desktop: 24, mobile: 20},
-        size: {desktop: 16, mobile: 14},
+        size: {desktop: 16, mobile: 16},
+        weight: 'medium',
+    },
+    chipLabelSmall: {
+        lineHeight: {desktop: 24, mobile: 20},
+        size: {desktop: 14, mobile: 14},
         weight: 'medium',
     },
     inputHelperText: {lineHeight: {desktop: 20, mobile: 16}, size: {desktop: 14, mobile: 12}},

package/src/skins/esimflag.tsx

@@ -703,8 +703,13 @@ export const getEsimflagSkin: GetKnownSkin = () => {
             cardTitleDefault: {lineHeight: {desktop: 28, mobile: 24}, size: {desktop: 20, mobile: 18}},
             cardTitleSnap: {lineHeight: {desktop: 24, mobile: 20}, size: {desktop: 16, mobile: 14}},
             chipLabel: {
-                lineHeight: {desktop: 24, mobile: 20},
-                size: {desktop: 16, mobile: 14},
+                lineHeight: {desktop: 24, mobile: 24},
+                size: {desktop: 16, mobile: 16},
+                weight: 'medium',
+            },
+            chipLabelSmall: {
+                lineHeight: {desktop: 20, mobile: 20},
+                size: {desktop: 14, mobile: 14},
                 weight: 'medium',
             },
             drawerTitle: {

package/src/skins/movistar.tsx

@@ -714,6 +714,11 @@ export const getMovistarSkin: GetKnownSkin = () => {
                 size: {desktop: 18, mobile: 14},
                 weight: 'medium',
             },
+            chipLabelSmall: {
+                lineHeight: {desktop: 22, mobile: 20},
+                size: {desktop: 16, mobile: 14},
+                weight: 'medium',
+            },
             drawerTitle: {
                 lineHeight: {desktop: 26, mobile: 26},
                 size: {desktop: 20, mobile: 20},

package/src/skins/o2.tsx

@@ -706,8 +706,13 @@ export const getO2Skin: GetKnownSkin = () => {
             cardTitleDefault: {lineHeight: {desktop: 28, mobile: 24}, size: {desktop: 20, mobile: 18}},
             cardTitleSnap: {lineHeight: {desktop: 24, mobile: 20}, size: {desktop: 16, mobile: 14}},
             chipLabel: {
-                lineHeight: {desktop: 24, mobile: 20},
-                size: {desktop: 16, mobile: 14},
+                lineHeight: {desktop: 24, mobile: 24},
+                size: {desktop: 16, mobile: 16},
+                weight: 'medium',
+            },
+            chipLabelSmall: {
+                lineHeight: {desktop: 20, mobile: 20},
+                size: {desktop: 14, mobile: 14},
                 weight: 'medium',
             },
             drawerTitle: {

package/src/skins/skin-contract.css.ts

@@ -357,6 +357,7 @@ const textPresets: ToThemeTokens<TextPresetsConfig> = {
     text9: {weight: '', size: '', lineHeight: ''},
     text10: {weight: '', size: '', lineHeight: ''},
     chipLabel: {weight: '', size: '', lineHeight: ''},
+    chipLabelSmall: {weight: '', size: '', lineHeight: ''},
     inputHelperText: {size: '', lineHeight: ''},
     inputLabel: {size: '', lineHeight: ''},
     inputValue: {size: '', lineHeight: ''},

package/src/skins/telefonica.tsx

@@ -707,8 +707,13 @@ export const getTelefonicaSkin: GetKnownSkin = () => {
             cardTitleDefault: {lineHeight: {desktop: 28, mobile: 24}, size: {desktop: 20, mobile: 18}},
             cardTitleSnap: {lineHeight: {desktop: 24, mobile: 20}, size: {desktop: 16, mobile: 14}},
             chipLabel: {
-                lineHeight: {desktop: 24, mobile: 20},
-                size: {desktop: 16, mobile: 14},
+                lineHeight: {desktop: 24, mobile: 24},
+                size: {desktop: 16, mobile: 16},
+                weight: 'medium',
+            },
+            chipLabelSmall: {
+                lineHeight: {desktop: 20, mobile: 20},
+                size: {desktop: 14, mobile: 14},
                 weight: 'medium',
             },
             drawerTitle: {

package/src/skins/types/index.tsx

@@ -67,6 +67,7 @@ export type TextPresetsConfig = {
     cardTitleSnap: TextSizeTokenConfig;
     drawerTitle: TextTokenConfig;
     chipLabel: TextTokenConfig;
+    chipLabelSmall: TextTokenConfig;
     link: TextWeightTokenConfig<'regular' | 'medium'>;
     loadingScreenTitle: TextSizeTokenConfig;
     title1: TextTokenConfig<'regular' | 'medium'>;

package/src/skins/vivo-evolution.tsx

@@ -744,6 +744,11 @@ export const getVivoEvolutionSkin: GetKnownSkin = () => {
                 size: {desktop: 16, mobile: 14},
                 weight: 'medium',
             },
+            chipLabelSmall: {
+                lineHeight: {desktop: 24, mobile: 20},
+                size: {desktop: 16, mobile: 14},
+                weight: 'medium',
+            },
             drawerTitle: {
                 lineHeight: {desktop: 32, mobile: 24},
                 size: {desktop: 28, mobile: 20},

package/src/skins/vivo.tsx

@@ -700,6 +700,11 @@ export const getVivoSkin: GetKnownSkin = () => {
                 size: {desktop: 16, mobile: 14},
                 weight: 'medium',
             },
+            chipLabelSmall: {
+                lineHeight: {desktop: 24, mobile: 20},
+                size: {desktop: 16, mobile: 14},
+                weight: 'medium',
+            },
             drawerTitle: {
                 lineHeight: {desktop: 32, mobile: 24},
                 size: {desktop: 28, mobile: 20},

package/src/theme-context.tsx

@@ -1,8 +1,8 @@
 'use client';
-import * as React from 'react';
+import {getSharedContext} from './utils/shared-context';
 
 import type {Theme} from './theme';
 
-const ThemeContext = React.createContext<Theme | null>(null);
+const ThemeContext = getSharedContext<Theme | null>('theme', null);
 
 export default ThemeContext;

package/src/theme-variant-context.tsx

@@ -1,5 +1,6 @@
 'use client';
 import * as React from 'react';
+import {getSharedContext} from './utils/shared-context';
 
 export type NonDeprecatedVariant = 'default' | 'brand' | 'negative' | 'alternative' | 'media';
 
@@ -19,7 +20,7 @@ export const normalizeVariant = <T extends Variant>(variant: T): T extends 'inve
     return variant as T extends 'inverse' ? 'brand' : T;
 };
 
-const ThemeVariantContext = React.createContext<Variant>('default');
+const ThemeVariantContext = getSharedContext<Variant>('theme-variant', 'default');
 
 type ThemeVariantProps = {
     variant?: Variant;

package/src/utils/__tests__/shared-context-test.tsx

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import {render, screen} from '@testing-library/react';
+
+/**
+ * A federated remote that does not share @telefonica/mistica/icon-runtime evaluates the context
+ * modules a second time, but it shares react. Each isolated registry below plays one of those copies.
+ */
+const loadIsolatedCopy = <T,>(modulePath: string): T => {
+    let loadedModule: T | undefined;
+    jest.isolateModules(() => {
+        jest.doMock('react', () => React);
+        loadedModule = require(modulePath);
+    });
+    return loadedModule as T;
+};
+
+test('two copies of the theme context module share one context', () => {
+    const first = loadIsolatedCopy<typeof import('../../theme-context')>('../../theme-context');
+    const second = loadIsolatedCopy<typeof import('../../theme-context')>('../../theme-context');
+
+    expect(second.default).toBe(first.default);
+});
+
+test('two copies of the theme variant module read one provider', () => {
+    const first = loadIsolatedCopy<typeof import('../../theme-variant-context')>(
+        '../../theme-variant-context'
+    );
+    const second = loadIsolatedCopy<typeof import('../../theme-variant-context')>(
+        '../../theme-variant-context'
+    );
+
+    const VariantName = () => <span>{second.useThemeVariant()}</span>;
+
+    render(
+        <first.ThemeVariant variant="brand">
+            <VariantName />
+        </first.ThemeVariant>
+    );
+
+    expect(screen.getByText('brand')).toBeInTheDocument();
+});
+
+test('different contexts keep their own identity', () => {
+    const themeContext = loadIsolatedCopy<typeof import('../../theme-context')>('../../theme-context');
+    const {getSharedContext} = loadIsolatedCopy<typeof import('../shared-context')>('../shared-context');
+
+    expect(getSharedContext('another-context', null)).not.toBe(themeContext.default);
+});

package/src/utils/shared-context.tsx

@@ -0,0 +1,29 @@
+'use client';
+import * as React from 'react';
+import {PACKAGE_VERSION} from '../package-version';
+
+type ContextRegistry = Record<symbol, React.Context<any> | undefined>;
+
+/**
+ * A module federation remote, or a page that mixes the CommonJS and the ES builds, can evaluate a
+ * module of this package twice. Each evaluation would create its own context, and a consumer of one
+ * copy would never see the provider of the other one. The icons of @telefonica/mistica-icons read
+ * the theme through @telefonica/mistica/icon-runtime, so they hit this case unless the application
+ * shares that entry point.
+ *
+ * React is always a singleton on the page, so the context lives on it. Apollo Client applies the
+ * same pattern. The key holds the version, because the CSS variables of each version have different
+ * names, and two versions must not share a theme.
+ */
+export const getSharedContext = <T,>(name: string, defaultValue: T): React.Context<T> => {
+    const key = Symbol.for(`@telefonica/mistica/${name}@${PACKAGE_VERSION}`);
+    const registry = React.createContext as unknown as ContextRegistry;
+    const existingContext = registry[key];
+    if (existingContext) {
+        return existingContext;
+    }
+
+    const context = React.createContext<T>(defaultValue);
+    Object.defineProperty(registry, key, {value: context, enumerable: false});
+    return context;
+};