@telefonica/mistica 17.6.0 → 17.8.0

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/index.tsx

@@ -1908,6 +1908,7 @@ export {default as IconRecycleRegular} from './generated/mistica-icons/icon-recy
 export {default as IconRefreshFilled} from './generated/mistica-icons/icon-refresh-filled';
 export {default as IconRefreshLight} from './generated/mistica-icons/icon-refresh-light';
 export {default as IconRefreshRegular} from './generated/mistica-icons/icon-refresh-regular';
+export {default as IconReloadFilled} from './generated/mistica-icons/icon-reload-filled';
 export {default as IconReloadLight} from './generated/mistica-icons/icon-reload-light';
 export {default as IconReloadRegular} from './generated/mistica-icons/icon-reload-regular';
 export {default as IconRenovateDeviceChangeMobileFilled} from './generated/mistica-icons/icon-renovate-device-change-mobile-filled';

package/src/menu.css.ts

@@ -4,23 +4,21 @@ import {vars as skinVars} from './skins/skin-contract.css';
 import * as mq from './media-queries.css';
 
 const top = createVar();
-const bottom = createVar();
 const left = createVar();
 const width = createVar();
-const right = createVar();
 const maxHeight = createVar();
+const maxWidth = createVar();
 const transformOrigin = createVar();
 
 const MENU_MIN_WIDTH = 136;
-const MENU_MAX_WIDTH = 280;
+export const MENU_MAX_WIDTH = 280;
 
 export const vars = {
     top,
-    bottom,
     left,
-    right,
     width,
     maxHeight,
+    maxWidth,
     transformOrigin,
 };
 
@@ -35,12 +33,10 @@ export const menuContainer = style([
     }),
     {
         top,
-        bottom,
         left,
-        right,
         width,
-        minWidth: MENU_MIN_WIDTH,
-        maxWidth: MENU_MAX_WIDTH,
+        minWidth: `min(${MENU_MIN_WIDTH}px, ${maxWidth})`,
+        maxWidth: `min(${MENU_MAX_WIDTH}px, ${maxWidth})`,
         maxHeight,
         transformOrigin,
         listStyleType: 'none',

package/src/menu.tsx

@@ -270,8 +270,14 @@ export const MenuSection = ({children}: MenuSectionProps): JSX.Element => {
     );
 };
 
-const MARGIN_THRESHOLD = 12;
 const MENU_OFFSET_FROM_TARGET = 8;
+const REFLECTED_PLACEMENT = {top: 'bottom', bottom: 'top', left: 'right', right: 'left'} as const;
+const TRANSFORM_ORIGINS = {
+    top: 'center bottom',
+    bottom: 'center top',
+    left: 'right center',
+    right: 'left center',
+} as const;
 
 type MenuRenderProps = {
     ref: (element: HTMLElement | null) => void;
@@ -286,19 +292,36 @@ type TargetRenderProps = {
 };
 
 export type MenuProps = {
+    /**
+     * Width in pixels. Values are clamped to the range 136–280.
+     * The final width never exceeds the viewport width, even if that
+     * means going below the 136px minimum.
+     *
+     * Examples: 100 → 136, 200 → 200, 500 → 280.
+     */
     width?: number;
     renderTarget: (props: TargetRenderProps) => React.ReactNode;
     renderMenu: (props: MenuRenderProps) => React.ReactNode;
     children?: void;
-    position?: 'left' | 'right';
     dataAttributes?: DataAttributes;
-};
+} & ExclusifyUnion<
+    | {
+          /** @deprecated Use placement and alignment instead. */
+          position?: 'left' | 'right';
+      }
+    | {
+          placement?: 'top' | 'bottom' | 'left' | 'right';
+          alignment?: 'start' | 'middle' | 'end';
+      }
+>;
 
 export const Menu = ({
     renderTarget,
     renderMenu,
     width,
     position = 'left',
+    placement = 'bottom',
+    alignment = position === 'left' ? 'start' : 'end',
     dataAttributes,
 }: MenuProps): JSX.Element => {
     const [isMenuOpen, setIsMenuOpen] = React.useState(false);
@@ -309,11 +332,9 @@ export const Menu = ({
     const menuRef = React.useRef<HTMLDivElement | null>(null);
 
     const [itemsComputedProps, setItemsComputedProps] = React.useState<{
-        left?: number;
-        right?: number;
-        top: string;
-        bottom: string;
-        maxHeight?: number;
+        left: number;
+        top: number;
+        maxHeight: number;
         transformOrigin: string;
     } | null>(null);
 
@@ -326,44 +347,52 @@ export const Menu = ({
             return;
         }
 
-        const {top: topTarget, right: rightTarget, left: leftTarget, bottom: bottomTarget} = targetRect;
-
-        const heightMenu = menu.scrollHeight;
-
-        const leftDirection = position === 'left' ? leftTarget : undefined;
-        const rightDirection = position === 'right' ? windowSize.width - rightTarget : undefined;
-
-        const topTargetWithOffset = topTarget - MENU_OFFSET_FROM_TARGET;
-        const bottomTargetWithOffset = bottomTarget + MENU_OFFSET_FROM_TARGET;
-
-        const availableSpaceOnBottom = windowSize.height - bottomTargetWithOffset - MARGIN_THRESHOLD;
-        const availableSpaceOnTop = topTargetWithOffset - MARGIN_THRESHOLD;
-        const menuFitsOnBottom = availableSpaceOnBottom > heightMenu;
-        const menuFitsOnTop = availableSpaceOnTop > heightMenu;
-
-        const isMenuOnBottom =
-            menuFitsOnBottom || (!menuFitsOnTop && availableSpaceOnBottom > availableSpaceOnTop);
-
-        if (isMenuOnBottom) {
-            setItemsComputedProps({
-                left: leftDirection,
-                right: rightDirection,
-                top: `${bottomTargetWithOffset}px`,
-                bottom: 'auto',
-                maxHeight: menuFitsOnBottom ? undefined : availableSpaceOnBottom,
-                transformOrigin: 'center top',
-            });
-        } else {
-            setItemsComputedProps({
-                left: leftDirection,
-                right: rightDirection,
-                top: 'auto',
-                bottom: `${windowSize.height - topTargetWithOffset}px`,
-                maxHeight: menuFitsOnTop ? undefined : availableSpaceOnTop,
-                transformOrigin: 'center bottom',
-            });
+        const availableSpace = {
+            top: targetRect.top - MENU_OFFSET_FROM_TARGET,
+            bottom: windowSize.height - targetRect.bottom - MENU_OFFSET_FROM_TARGET,
+            left: targetRect.left - MENU_OFFSET_FROM_TARGET,
+            right: windowSize.width - targetRect.right - MENU_OFFSET_FROM_TARGET,
+        };
+        const menuSize = placement === 'top' || placement === 'bottom' ? menu.scrollHeight : menu.offsetWidth;
+        const candidateReflectedPlacement = REFLECTED_PLACEMENT[placement];
+        let finalPlacement =
+            availableSpace[placement] < menuSize &&
+            availableSpace[candidateReflectedPlacement] > availableSpace[placement]
+                ? candidateReflectedPlacement
+                : placement;
+        if (
+            (finalPlacement === 'left' || finalPlacement === 'right') &&
+            availableSpace[finalPlacement] < menu.offsetWidth
+        ) {
+            finalPlacement = availableSpace.bottom >= availableSpace.top ? 'bottom' : 'top';
         }
-    }, [position, isMenuOpen, menu, target, width, windowSize]);
+
+        const isVertical = finalPlacement === 'top' || finalPlacement === 'bottom';
+        const maxHeight = Math.max(0, isVertical ? availableSpace[finalPlacement] : windowSize.height);
+        const heightMenu = Math.min(menu.scrollHeight, maxHeight);
+        const widthMenu = menu.offsetWidth;
+        const targetStart = isVertical ? targetRect.left : targetRect.top;
+        const targetSize = isVertical ? targetRect.width : targetRect.height;
+        const alignmentSize = isVertical ? widthMenu : heightMenu;
+        const alignmentOffset = alignment === 'start' ? 0 : alignment === 'end' ? 1 : 0.5;
+        const alignedPosition = targetStart + (targetSize - alignmentSize) * alignmentOffset;
+        const shiftedPosition = Math.max(
+            0,
+            Math.min(alignedPosition, (isVertical ? windowSize.width : windowSize.height) - alignmentSize)
+        );
+        const positions = {
+            top: {left: shiftedPosition, top: targetRect.top - MENU_OFFSET_FROM_TARGET - heightMenu},
+            bottom: {left: shiftedPosition, top: targetRect.bottom + MENU_OFFSET_FROM_TARGET},
+            left: {left: targetRect.left - MENU_OFFSET_FROM_TARGET - widthMenu, top: shiftedPosition},
+            right: {left: targetRect.right + MENU_OFFSET_FROM_TARGET, top: shiftedPosition},
+        };
+
+        setItemsComputedProps({
+            ...positions[finalPlacement],
+            maxHeight,
+            transformOrigin: TRANSFORM_ORIGINS[finalPlacement],
+        });
+    }, [placement, alignment, isMenuOpen, menu, target, width, windowSize]);
 
     const targetProps = React.useMemo(
         () => ({
@@ -504,29 +533,18 @@ export const Menu = ({
                         <div
                             style={{
                                 ...applyCssVars({
+                                    [styles.vars.maxWidth]:
+                                        `${Math.min(styles.MENU_MAX_WIDTH, Math.max(0, windowSize.width))}px`,
+                                    ...(width && {
+                                        [styles.vars.width]: `${width}px`,
+                                    }),
                                     ...(itemsComputedProps
                                         ? {
-                                              [styles.vars.top]: itemsComputedProps.top,
-                                              [styles.vars.bottom]: itemsComputedProps.bottom,
+                                              [styles.vars.top]: `${itemsComputedProps.top}px`,
+                                              [styles.vars.left]: `${itemsComputedProps.left}px`,
+                                              [styles.vars.maxHeight]: `${itemsComputedProps.maxHeight}px`,
                                               [styles.vars.transformOrigin]:
                                                   itemsComputedProps.transformOrigin,
-
-                                              ...(itemsComputedProps.left !== undefined && {
-                                                  [styles.vars.left]: `${itemsComputedProps.left}px`,
-                                              }),
-
-                                              ...(itemsComputedProps.right !== undefined && {
-                                                  [styles.vars.right]: `${itemsComputedProps.right}px`,
-                                              }),
-
-                                              ...(itemsComputedProps.maxHeight !== undefined && {
-                                                  [styles.vars.maxHeight]:
-                                                      `${itemsComputedProps.maxHeight}px`,
-                                              }),
-
-                                              ...(width !== undefined && {
-                                                  [styles.vars.width]: width ? `${width}px` : '',
-                                              }),
                                           }
                                         : {}),
                                 }),

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 = '17.6.0' as string;
+export const PACKAGE_VERSION = '17.8.0' as string;

package/src/popover.tsx

@@ -21,6 +21,7 @@ type Props = {
     onClose?: () => void;
     closeButtonLabel?: string;
     position?: Position;
+    alignment?: 'start' | 'middle' | 'end';
     width?: number;
     trackingEvent?: TrackingEvent | ReadonlyArray<TrackingEvent>;
     open?: boolean;

package/src/sidenav-bar.tsx

@@ -446,8 +446,15 @@ const SidenavBar = ({
     const footerDividerSentinelRef = React.useRef<HTMLDivElement>(null);
     const bodyRef = React.useRef<HTMLDivElement>(null);
 
+    // The mobile treatment replaces the whole rail, so a trip to a narrow screen unmounts the body and
+    // its sentinels. Both dividers go back to their rest state, and the observers of the new body decide
+    // again: a divider earned by a scroll before the trip does not belong to the body that comes back.
     React.useEffect(() => {
-        if (!bodyRef.current) return;
+        if (!bodyRef.current) {
+            setShowHeaderDivider(false);
+            setShowFooterDivider(false);
+            return;
+        }
 
         // The sentinels have no height, and at rest they sit exactly on the edge of the scrollport. A
         // fractional layout (a boxed sidenav measures 100vh minus its margins) can leave them half a
@@ -478,7 +485,7 @@ const SidenavBar = ({
             headerObserver.disconnect();
             footerObserver.disconnect();
         };
-    }, []);
+    }, [isTabletOrSmaller]);
 
     // The rail is travelling between its two widths. See `columnsWhileMoving`.
     const isMoving = isSidenavMoving(collapseState);

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/tooltip.css.ts

@@ -53,6 +53,7 @@ export const contentContainer = style([
         overflow: 'hidden',
     }),
     {
+        overflowY: 'auto',
         minWidth: CONTENT_MIN_WIDTH - 2 * BORDER_SIZE, // border is not included in this container
     },
 ]);