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

package/src/credit-card-number-field.tsx

@@ -89,14 +89,21 @@ const getAnimationTarget = (value?: string) => {
     return null;
 };
 
-const initialState = {
+type AdornmentState = {
+    showBackface: boolean;
+    animationTarget: JSX.Element | null;
+    isAnimating: boolean;
+};
+
+// The icon module and this module load in either order, so the first element waits for the render
+const createInitialState = (): AdornmentState => ({
     showBackface: false,
     animationTarget: <IconCreditCardVisaRegular size={iconSize.small} />,
     isAnimating: false,
-};
+});
 
 const reducer = (
-    state: typeof initialState,
+    state: AdornmentState,
     {
         type,
         value,
@@ -127,7 +134,11 @@ const reducer = (
 };
 
 const CreditcardAdornment = ({value}: {value?: string}) => {
-    const [{showBackface, animationTarget, isAnimating}, dispatch] = React.useReducer(reducer, initialState);
+    const [{showBackface, animationTarget, isAnimating}, dispatch] = React.useReducer(
+        reducer,
+        undefined,
+        createInitialState
+    );
     React.useEffect(() => {
         dispatch({type: 'INPUT', value});
     }, [value]);

package/src/date-time-picker.css.ts

@@ -16,7 +16,6 @@ globalStyle(`${reactDatePicker} .rdtPicker`, {
     minWidth: 250,
     padding: 4,
     marginTop: 1,
-    zIndex: '99999 !important',
     background: '#fff',
     boxShadow: '0 1px 3px rgba(0,0,0,.1)',
     border: '1px solid #f9f9f9',

package/src/date-time-picker.tsx

@@ -162,6 +162,7 @@ const DateTimePicker = ({
                         setShowPicker(false);
                     }}
                     disableScroll
+                    style={{zIndex: 999}}
                 >
                     <div
                         ref={pickerContainerRef}

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/icon-runtime.tsx

@@ -0,0 +1,18 @@
+/**
+ * Entry point of @telefonica/mistica/icon-runtime, which @telefonica/mistica-icons consumes.
+ *
+ * A generated icon reads the theme of this package, so it needs these four values and this type. It
+ * must not reach them through src/index.tsx: that barrel exports the components that render an icon,
+ * and the import closes a dependency cycle. A module level read of an icon inside that cycle sees an
+ * incomplete module. See doc/module-federation.md for the sharing rule that this entry point needs.
+ *
+ * This entry point is the only public home of useIconGradient, because only an icon uses that hook.
+ *
+ * Every module below is a leaf, so this file adds no cycle. Keep it that way.
+ */
+export {vars as skinVars} from './skins/skin-contract.css';
+export {useTheme} from './hooks';
+export {useThemeVariant} from './theme-variant-context';
+export {useIconGradient} from './utils/icon-gradient';
+
+export type {IconProps} from './utils/types';

package/src/index.tsx

@@ -196,12 +196,6 @@ export {TrackingConfig, useTrackingConfig} from './utils/analytics';
 
 export {useDocumentVisibility} from './utils/document-visibility';
 
-/**
- * The icons of @telefonica/mistica-icons need this hook, and they reach it through this barrel,
- * because a federated host shares this package by its name. See doc/module-federation.md.
- */
-export {useIconGradient} from './utils/icon-gradient';
-
 export {ThemeVariant, useThemeVariant} from './theme-variant-context';
 
 export type {Skin, KnownSkinName, SkinName} from './skins/types';

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.1' 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;
+};