@telefonica/mistica 16.62.0 → 16.63.0

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

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.0' as string;