@telefonica/mistica 16.62.0 → 16.63.1

package/doc/patterns.md

@@ -2,19 +2,8 @@
 
 ## Critical rules
 
-1. **NEVER hardcode colors in app/component UI code.** Always use `skinVars.colors.*` from
-   `@telefonica/mistica`. For skins and theme-level customization, see [theme-config.md](./theme-config.md).
-2. **NEVER use raw `<div>` for layout.** Use `Box`, `Stack`, `Inline`, `ResponsiveLayout`, `GridLayout`,
-   `Grid`.
-3. **NEVER set font sizes manually.** Use text components (`Text1`-`Text10`, `Title1`-`Title4`). If those
-   don't cover your necessities you can set custom sizes with `Text` component.
-4. **NEVER set border radius manually.** Use `skinVars.borderRadii.*` or components that handle it (`Boxed`,
-   cards, etc.). For theme-level visual customization without a dedicated component prop, use a custom skin.
-5. **Always wrap your app** with `ThemeContextProvider` and import `@telefonica/mistica/css/mistica.css`.
-6. **Always namespace React hooks**: `React.useState`, `React.useEffect`, `React.useRef`, etc.
-7. **Add `'use client';`** directive to client components when using Next.js app router.
-8. **Set `font-family` and `body` background color.** See [llms.md](./llms.md) rules 9–10 and
-   [fonts.md](./fonts.md) for the per-skin font table, `@font-face` setup, and the `GlobalStyles` pattern.
+See [Critical Rules in `llms.md`](./llms.md#critical-rules) — the single source of truth. These rules apply
+throughout this document.
 
 ## Page layout composition
 
@@ -501,10 +490,10 @@ return (
   <ResponsiveLayout>
     <Stack space={24}>
       <Stepper currentIndex={currentStep} steps={['Personal', 'Address', 'Payment', 'Confirm']} />
-        {currentStep === 0 && <PersonalInfoForm />}
-        {currentStep === 1 && <AddressForm />}
-        {currentStep === 2 && <PaymentForm />}
-        {currentStep === 3 && <ConfirmationScreen />}
+      {currentStep === 0 && <PersonalInfoForm />}
+      {currentStep === 1 && <AddressForm />}
+      {currentStep === 2 && <PaymentForm />}
+      {currentStep === 3 && <ConfirmationScreen />}
     </Stack>
   </ResponsiveLayout>
 </Stack>

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@telefonica/mistica",
-    "version": "16.62.0",
+    "version": "16.63.1",
     "license": "MIT",
     "repository": {
         "type": "git",

package/src/inline.css.ts

@@ -98,6 +98,15 @@ export const stringSpaceWithWrap = style({
     justifyContent: space,
 });
 
+export const expand = style({
+    width: '100%',
+    display: 'flex',
+});
+
+export const expandItem = style({
+    flex: 1,
+});
+
 globalStyle(`${marginInline} > div`, {
     marginLeft: space,
     marginTop: fallbackVar(verticalSpace, space),

package/src/inline.tsx

@@ -79,6 +79,23 @@ type Props = {
     fullWidth?: boolean;
     dataAttributes?: DataAttributes;
     wrap?: boolean;
+    /**
+     * Index or indexes of the children that should grow to fill the available space.
+     * Indexes refer to entries in `React.Children.toArray(children)`, so empty nodes
+     * (`null`, `undefined` and booleans) are ignored, but React elements still count
+     * even if they ultimately render no content.
+     *
+     * This prop has no effect when `wrap` is enabled.
+     */
+    expand?: number | ReadonlyArray<number>;
+};
+
+const shouldExpandItem = (expand: Props['expand'], index: number): boolean => {
+    if (expand === undefined) {
+        return false;
+    }
+
+    return Array.isArray(expand) ? expand.includes(index) : expand === index;
 };
 
 const Inline = ({
@@ -93,17 +110,26 @@ const Inline = ({
     fullWidth,
     wrap,
     dataAttributes,
+    expand,
 }: Props): JSX.Element => {
     const {platformOverrides} = useTheme();
     const isStringSpace = typeof space === 'string';
+    const childrenArray = React.Children.toArray(children).filter(Boolean);
 
+    const hasExpandItem = childrenArray.some((_, index) => shouldExpandItem(expand, index));
+    const shouldExpand = hasExpandItem && !wrap;
     return (
         <div
             className={classnames(
                 className,
                 styles.inline,
-                wrap ? styles.wrap : fullWidth ? styles.fullWidth : styles.noFullWidth,
-                isStringSpace ? (wrap ? styles.stringSpaceWithWrap : styles.stringSpace) : styles.marginInline
+                wrap ? styles.wrap : fullWidth || shouldExpand ? styles.fullWidth : styles.noFullWidth,
+                isStringSpace
+                    ? wrap
+                        ? styles.stringSpaceWithWrap
+                        : styles.stringSpace
+                    : styles.marginInline,
+                shouldExpand && styles.expand
             )}
             style={{...applyCssVars(calcInlineVars(space, verticalSpace)), alignItems}}
             role={role}
@@ -111,10 +137,11 @@ const Inline = ({
             aria-labelledby={ariaLabel ? undefined : ariaLabelledBy}
             {...getPrefixedDataAttributes(dataAttributes, 'Inline')}
         >
-            {React.Children.map(children, (child) =>
-                !!child || child === 0 ? (
+            {React.Children.map(childrenArray, (child, index) => {
+                return (
                     <div
                         role={role === 'list' ? 'listitem' : undefined}
+                        className={classnames(shouldExpandItem(expand, index) && styles.expandItem)}
                         style={{
                             // Hack to fix https://jira.tid.es/browse/WEB-1683
                             // In iOS the inline component sometimes cuts the last line of the content
@@ -126,8 +153,8 @@ const Inline = ({
                     >
                         {child}
                     </div>
-                ) : null
-            )}
+                );
+            })}
         </div>
     );
 };

package/src/menu.tsx

@@ -57,21 +57,40 @@ interface MenuItemBaseProps {
     Icon?: (props: IconProps) => JSX.Element;
     destructive?: boolean;
     disabled?: boolean;
-    onPress: (item: number) => void;
     dataAttributes?: DataAttributes;
 }
 
-interface MenuItemWithoutControlProps extends MenuItemBaseProps {
+interface MenuItemOnPressProps extends MenuItemBaseProps {
+    onPress: (item: number) => void;
+    controlType?: 'checkbox';
+    checked?: boolean;
+    href?: undefined;
+    to?: undefined;
+}
+
+interface MenuItemHrefProps extends MenuItemBaseProps {
+    href: string;
+    newTab?: boolean;
+    loadOnTop?: boolean;
+    onNavigate?: () => void | Promise<void>;
+    onPress?: undefined;
+    to?: undefined;
     controlType?: undefined;
     checked?: undefined;
 }
 
-interface MenuItemWithControlProps extends MenuItemBaseProps {
-    controlType?: 'checkbox';
-    checked?: boolean;
+interface MenuItemToProps extends MenuItemBaseProps {
+    to: string;
+    newTab?: boolean;
+    fullPageOnWebView?: boolean;
+    onNavigate?: () => void | Promise<void>;
+    onPress?: undefined;
+    href?: undefined;
+    controlType?: undefined;
+    checked?: undefined;
 }
 
-type MenuItemProps = ExclusifyUnion<MenuItemWithControlProps | MenuItemWithoutControlProps>;
+type MenuItemProps = ExclusifyUnion<MenuItemOnPressProps | MenuItemHrefProps | MenuItemToProps>;
 
 export const MenuItem = ({
     label,
@@ -79,6 +98,12 @@ export const MenuItem = ({
     destructive,
     disabled,
     onPress,
+    href,
+    to,
+    newTab,
+    loadOnTop,
+    fullPageOnWebView,
+    onNavigate,
     controlType,
     checked,
     description,
@@ -108,6 +133,17 @@ export const MenuItem = ({
         </div>
     );
 
+    const renderItemContent = (labelId?: string) => (
+        <div className={styles.itemContent}>
+            {Icon && (
+                <div className={styles.iconContainer}>
+                    <Icon size={24} color={contentColor} />
+                </div>
+            )}
+            {renderTextContent(labelId)}
+        </div>
+    );
+
     const renderContent = () =>
         controlType === 'checkbox' ? (
             <Checkbox
@@ -116,7 +152,7 @@ export const MenuItem = ({
                 checked={checked}
                 onChange={() => {
                     if (isMenuOpen && itemIndex !== null) {
-                        onPress(itemIndex);
+                        onPress?.(itemIndex);
                         closeMenu();
                     }
                 }}
@@ -126,25 +162,54 @@ export const MenuItem = ({
                 render={({controlElement, labelId}) => (
                     <Box paddingX={8} paddingY={12}>
                         <Inline space="between" alignItems="center">
-                            <div className={styles.itemContent}>
-                                {Icon && (
-                                    <div className={styles.iconContainer}>
-                                        <Icon size={24} color={contentColor} />
-                                    </div>
-                                )}
-                                {renderTextContent(labelId)}
-                            </div>
+                            {renderItemContent(labelId)}
                             <Box paddingLeft={16}>{controlElement}</Box>
                         </Inline>
                     </Box>
                 )}
             />
+        ) : href ? (
+            <Touchable
+                ref={itemRef}
+                href={href}
+                newTab={newTab}
+                loadOnTop={loadOnTop}
+                onNavigate={() => {
+                    closeMenu();
+                    onNavigate?.();
+                }}
+                disabled={disabled}
+                role="menuitem"
+                dataAttributes={menuItemDataAttributes}
+            >
+                <Box paddingX={8} paddingY={12}>
+                    {renderItemContent()}
+                </Box>
+            </Touchable>
+        ) : to ? (
+            <Touchable
+                ref={itemRef}
+                to={to}
+                newTab={newTab}
+                fullPageOnWebView={fullPageOnWebView}
+                onNavigate={() => {
+                    closeMenu();
+                    onNavigate?.();
+                }}
+                disabled={disabled}
+                role="menuitem"
+                dataAttributes={menuItemDataAttributes}
+            >
+                <Box paddingX={8} paddingY={12}>
+                    {renderItemContent()}
+                </Box>
+            </Touchable>
         ) : (
             <Touchable
                 ref={itemRef}
                 onPress={() => {
                     if (isMenuOpen && itemIndex !== null) {
-                        onPress(itemIndex);
+                        onPress?.(itemIndex);
                         closeMenu();
                     }
                 }}
@@ -153,14 +218,7 @@ export const MenuItem = ({
                 dataAttributes={menuItemDataAttributes}
             >
                 <Box paddingX={8} paddingY={12}>
-                    <div className={styles.itemContent}>
-                        {Icon && (
-                            <div className={styles.iconContainer}>
-                                <Icon size={24} color={contentColor} />
-                            </div>
-                        )}
-                        {renderTextContent()}
-                    </div>
+                    {renderItemContent()}
                 </Box>
             </Touchable>
         );

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

package/src/sheet-common.tsx

@@ -247,7 +247,6 @@ const Sheet = React.forwardRef<HTMLDivElement, SheetProps>(({onClose, children,
                              * the content in order to be able to drag the sheet
                              */}
                             <div className={styles.sheetTopDraggingArea} />
-
                             <section
                                 role="dialog"
                                 aria-modal="true"
@@ -264,15 +263,15 @@ const Sheet = React.forwardRef<HTMLDivElement, SheetProps>(({onClose, children,
                                 <div className={styles.handleContainer}>
                                     <div className={styles.handleBar} />
                                 </div>
-                                <div className={styles.dismissButton}>
-                                    <IconButton
-                                        small={isTabletOrSmaller}
-                                        onPress={closeModal}
-                                        aria-label={texts.modalClose || t(tokens.modalClose)}
-                                        Icon={IconCloseRegular}
-                                    />
-                                </div>
                             </section>
+                            <div className={styles.dismissButton}>
+                                <IconButton
+                                    small={isTabletOrSmaller}
+                                    onPress={closeModal}
+                                    aria-label={texts.modalClose || t(tokens.modalClose)}
+                                    Icon={IconCloseRegular}
+                                />
+                            </div>
                         </div>
                     </div>
                 </div>