@telefonica/mistica 16.4.0 → 16.5.0

package/dist/navigation-bar.css-mistica.js

@@ -9,89 +9,148 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    burgerIconContainer: function() {
+    BURGER_MENU_ANIMATION_DURATION_MS: function() {
+        return _;
+    },
+    DESKTOP_MENU_ANIMATION_DURATION_MS: function() {
         return y;
     },
+    DESKTOP_SMALL_MENU_WIDTH: function() {
+        return e;
+    },
+    burgerIconContainer: function() {
+        return r;
+    },
     burgerMenu: function() {
-        return _;
+        return a;
     },
     burgerMenuButton: function() {
-        return r;
+        return f;
+    },
+    burgerMenuContainer: function() {
+        return i;
+    },
+    burgerMenuContentContainer: function() {
+        return t;
     },
     burgerMenuTransition: function() {
-        return e;
+        return o;
+    },
+    desktopMenu: function() {
+        return d;
+    },
+    desktopMenuBackgroundContainer: function() {
+        return c;
+    },
+    desktopMenuColumnItem: function() {
+        return z;
+    },
+    desktopMenuContainer: function() {
+        return h;
+    },
+    desktopMenuContentFadeIn: function() {
+        return p;
+    },
+    desktopMenuFirstSection: function() {
+        return u;
+    },
+    desktopMenuLastSection: function() {
+        return s;
+    },
+    desktopMenuSectionArrow: function() {
+        return k;
+    },
+    desktopMenuSectionArrowContainer: function() {
+        return M;
+    },
+    desktopMenuSectionContainer: function() {
+        return l;
+    },
+    desktopMenuSectionWithArrowWrapper: function() {
+        return g;
+    },
+    desktopMenuWrapper: function() {
+        return b;
     },
     desktopOnly: function() {
-        return a;
+        return C;
+    },
+    desktopSmallMenuContainer: function() {
+        return S;
     },
     iconCloseHidden: function() {
-        return d;
+        return A;
     },
     iconCloseOpen: function() {
-        return c;
+        return j;
     },
     iconMenuHidden: function() {
-        return i;
+        return B;
     },
     iconMenuOpen: function() {
-        return f;
+        return N;
     },
     lineHeightFix: function() {
-        return o;
+        return m;
     },
     logoContainer: function() {
-        return t;
+        return x;
     },
-    mainNavbarContent: function() {
-        return z;
+    mainNavBarSectionsContainer: function() {
+        return I;
+    },
+    mainNavigationBarContentWrapper: function() {
+        return O;
     },
     navbarBorderColorVariants: function() {
-        return h;
+        return T;
     },
     navigationBarAction: function() {
-        return u;
+        return E;
     },
     navigationBarContent: function() {
-        return g;
+        return R;
     },
     navigationBarContentRight: function() {
-        return l;
+        return U;
+    },
+    navigationBarContentRightExpanded: function() {
+        return W;
     },
     section: function() {
-        return p;
+        return D;
     },
     selectedSectionVariantes: function() {
-        return b;
+        return q;
     },
     spacer: function() {
-        return s;
+        return F;
     },
     spacerLarge: function() {
-        return j;
+        return H;
     },
     textWrapperVariants: function() {
-        return k;
+        return L;
     },
     topFixed: function() {
-        return x;
+        return w;
     }
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./navigation-bar.css.ts.vanilla.css-mistica.js");
-var y = "_1vcy5dz1 _1y2v1nfhi _1y2v1nfik _1y2v1nfj0", _ = "_1vcy5dz13 _1y2v1nfhk _1y2v1nfl6 _1y2v1nfla _1y2v1nflp _1y2v1nf3r", r = "_1vcy5dz11", e = {
-    entering: "_1vcy5dzt",
-    entered: "_1vcy5dzu",
-    exiting: "_1vcy5dzv",
-    exited: "_1vcy5dzw",
-    unmounted: "_1vcy5dzx"
-}, a = "_1vcy5dzn", d = "_1vcy5dz5 _1vcy5dz3 _1y2v1nfhj", c = "_1vcy5dz4 _1vcy5dz3 _1y2v1nfhj", i = "_1vcy5dz7 _1vcy5dz3 _1y2v1nfhj", f = "_1vcy5dz6 _1vcy5dz3 _1y2v1nfhj", o = "_1vcy5dz18", t = "_1vcy5dz10 _1y2v1nfho _1y2v1nfhx", z = "_1vcy5dzy", h = {
+var _ = 300, y = 400, e = 184, r = "_1vcy5dz1 _1y2v1nfhi _1y2v1nfik _1y2v1nfj0", a = "_1y2v1nfhk _1y2v1nfl6 _1y2v1nfla _1y2v1nflp _1y2v1nfm4 _1y2v1nf3r", f = "_1vcy5dz1f", i = "_1y2v1nfis _1y2v1nfhi", t = "_1vcy5dz1j _1y2v1nfku _1y2v1nfib _1y2v1nfis _1y2v1nfhj _1y2v1nfkv", o = {
+    enter: "_1vcy5dz16",
+    enterActive: "_1vcy5dz17",
+    exit: "_1vcy5dz18",
+    exitActive: "_1vcy5dz19"
+}, d = "_1vcy5dz1z _1y2v1nf88 _1y2v1nf9h _1y2v1nfhi", c = "_1vcy5dz1v _1y2v1nf3s _1y2v1nfhj _1y2v1nfla _1y2v1nflp", z = "_1vcy5dz21", h = "_1vcy5dz1t _1y2v1nfhk _1y2v1nfla _1y2v1nflp", p = "_1vcy5dz20", u = "_1vcy5dzf", s = "_1vcy5dzg", k = "_1vcy5dzn _1y2v1nf7h _1y2v1nf8q _1y2v1nf9z _1y2v1nfb8 _1y2v1nfk6 _1y2v1nf7g", M = "_1vcy5dzl _1y2v1nfhj _1y2v1nfkv _1y2v1nfm4 _1y2v1nfho _1y2v1nfi3", l = "_1vcy5dzi _1y2v1nfhi _1y2v1nfho", g = "_1y2v1nfhi", b = "_1y2v1nfhj _1y2v1nfla _1y2v1nflp", C = "_1vcy5dzx", S = "_1vcy5dz1x _1y2v1nfak _1y2v1nfbt _1y2v1nf88 _1y2v1nf9h _1y2v1nf3s _1y2v1nfhk _1y2v1nfku", A = "_1vcy5dz5 _1vcy5dz3 _1y2v1nfhj", j = "_1vcy5dz4 _1vcy5dz3 _1y2v1nfhj", B = "_1vcy5dz7 _1vcy5dz3 _1y2v1nfhj", N = "_1vcy5dz6 _1vcy5dz3 _1y2v1nfhj", m = "_1vcy5dz1o", x = "_1vcy5dz1e _1y2v1nfho _1y2v1nfhx", I = "_1vcy5dz1c _1y2v1nfho _1y2v1nfia", O = "_1vcy5dz1q _1y2v1nfib", T = {
     default: "_1vcy5dzc _1vcy5dzb _1y2v1nfho _1y2v1nfi3 _1y2v1nfib",
     noBorder: "_1vcy5dzd _1vcy5dzb _1y2v1nfho _1y2v1nfi3 _1y2v1nfib",
     menuOpen: "_1vcy5dze _1vcy5dzb _1y2v1nfho _1y2v1nfi3 _1y2v1nfib"
-}, u = "_1y2v1nf7h _1y2v1nf8q _1y2v1nf9z _1y2v1nfb8 _1y2v1nfk6 _1y2v1nf7g", g = "_1vcy5dzl", l = "_1vcy5dzo", p = "_1vcy5dzg _1y2v1nfa8 _1y2v1nfbh _1y2v1nfj7 _1y2v1nfho _1y2v1nfi3 _1y2v1nfk6 _1y2v1nf7g", b = {
-    default: "_1vcy5dzh",
-    inverse: "_1vcy5dzi"
-}, s = "_1y2v1nfj7 _1vcy5dzp", j = "_1vcy5dzs _1vcy5dzp", k = {
-    default: "_1vcy5dzj",
-    inverse: "_1vcy5dzk"
-}, x = "_1vcy5dz9 _1y2v1nfhk _1y2v1nfkv _1y2v1nfla _1y2v1nflp";
+}, E = "_1y2v1nf7h _1y2v1nf8q _1y2v1nf9z _1y2v1nfb8 _1y2v1nfk6 _1y2v1nf7g", R = "_1vcy5dzv _1y2v1nfi3 _1y2v1nfib _1y2v1nfho", U = "_1vcy5dzz _1y2v1nfho _1y2v1nfi3 _1y2v1nfhy", W = "_1vcy5dz11 _1vcy5dzz _1y2v1nfho _1y2v1nfi3 _1y2v1nfhy _1y2v1nfia", D = "_1vcy5dzp _1y2v1nfa8 _1y2v1nfbh _1y2v1nfj7 _1y2v1nfho _1y2v1nfi3 _1y2v1nfk6 _1y2v1nf7g _1y2v1nfhi", q = {
+    default: "_1vcy5dzq",
+    inverse: "_1vcy5dzr"
+}, F = "_1y2v1nfj7 _1vcy5dz12", H = "_1vcy5dz15 _1vcy5dz12", L = {
+    default: "_1vcy5dzs",
+    inverse: "_1vcy5dzt"
+}, w = "_1vcy5dz9 _1y2v1nfhk _1y2v1nfkv _1y2v1nfla _1y2v1nflp";

package/dist/navigation-bar.css.d.ts

@@ -1,3 +1,6 @@
+export declare const DESKTOP_SMALL_MENU_WIDTH = 184;
+export declare const BURGER_MENU_ANIMATION_DURATION_MS = 300;
+export declare const DESKTOP_MENU_ANIMATION_DURATION_MS = 400;
 export declare const burgerIconContainer: string;
 export declare const iconCloseOpen: string;
 export declare const iconCloseHidden: string;
@@ -5,6 +8,12 @@ export declare const iconMenuOpen: string;
 export declare const iconMenuHidden: string;
 export declare const topFixed: string;
 export declare const navbarBorderColorVariants: Record<"default" | "noBorder" | "menuOpen", string>;
+export declare const desktopMenuFirstSection: string;
+export declare const desktopMenuLastSection: string;
+export declare const desktopMenuSectionContainer: string;
+export declare const desktopMenuSectionWithArrowWrapper: string;
+export declare const desktopMenuSectionArrowContainer: string;
+export declare const desktopMenuSectionArrow: string;
 export declare const section: string;
 export declare const selectedSectionVariantes: Record<"inverse" | "default", string>;
 export declare const textWrapperVariants: Record<"inverse" | "default", string>;
@@ -12,12 +21,29 @@ export declare const navigationBarContent: string;
 export declare const navigationBarAction: string;
 export declare const desktopOnly: string;
 export declare const navigationBarContentRight: string;
+export declare const navigationBarContentRightExpanded: string;
 export declare const spacer: string;
 export declare const spacerLarge: string;
-export declare const burgerMenuTransition: Record<"entering" | "entered" | "exiting" | "exited" | "unmounted", string>;
+export declare const burgerMenuTransition: {
+    enter: string;
+    enterActive: string;
+    exit: string;
+    exitActive: string;
+};
 export declare const mainNavbarContent: string;
+export declare const mainNavBarSectionsContainer: string;
 export declare const logoContainer: string;
 export declare const burgerMenuButton: string;
 export declare const burgerMenu: string;
+export declare const burgerMenuContainer: string;
+export declare const burgerMenuContentContainer: string;
 export declare const iconButtonVariants: Record<"inverse" | "default", string>;
 export declare const lineHeightFix: string;
+export declare const mainNavigationBarContentWrapper: string;
+export declare const desktopMenuWrapper: string;
+export declare const desktopMenuContainer: string;
+export declare const desktopMenuBackgroundContainer: string;
+export declare const desktopSmallMenuContainer: string;
+export declare const desktopMenu: string;
+export declare const desktopMenuContentFadeIn: string;
+export declare const desktopMenuColumnItem: string;

package/dist/navigation-bar.d.ts

@@ -1,37 +1,8 @@
 import * as React from 'react';
+import type { ExclusifyUnion } from './utils/utility-types';
 import type { Variant } from './theme-variant-context';
 import type { TouchableProps } from './touchable';
 import type { HeadingType } from './utils/types';
-type MainNavigationBarSection = {
-    href: string;
-    to?: undefined;
-    onPress?: undefined;
-    title: string;
-} | {
-    to: string;
-    href?: undefined;
-    onPress?: undefined;
-    title: string;
-} | {
-    onPress: () => void;
-    to?: undefined;
-    href?: undefined;
-    title: string;
-};
-type MainNavigationBarPropsBase = {
-    sections?: ReadonlyArray<MainNavigationBarSection>;
-    selectedIndex?: number;
-    right?: React.ReactElement;
-    logo?: React.ReactElement;
-    variant?: Variant;
-    children?: undefined;
-    topFixed?: boolean;
-    withBorder?: boolean;
-    burgerMenuExtra?: React.ReactNode;
-    large?: boolean;
-};
-type MainNavigationBarProps = MainNavigationBarPropsBase;
-export declare const MainNavigationBar: ({ sections, selectedIndex, right, variant, topFixed, withBorder, burgerMenuExtra, logo, large, }: MainNavigationBarProps) => JSX.Element;
 interface NavigationBarCommonProps {
     variant?: Variant;
     onBack?: () => void;
@@ -51,6 +22,70 @@ interface NavigationBarNotFixedProps extends NavigationBarCommonProps {
 }
 type NavigationBarProps = NavigationBarTopFixedProps | NavigationBarNotFixedProps;
 export declare const NavigationBar: ({ onBack, title, titleAs, right, variant, topFixed, paddingX, withBorder, }: NavigationBarProps) => JSX.Element;
+type InteractiveProps = ExclusifyUnion<{
+    href: string;
+} | {
+    to: string;
+} | {
+    onPress: () => void;
+}>;
+type MaybeInteractiveProps = ExclusifyUnion<{
+    href?: string;
+} | {
+    to?: string;
+} | {
+    onPress?: () => void;
+}>;
+type SectionItem = {
+    title: string;
+} & InteractiveProps;
+type SectionColumn = {
+    title: string;
+    items: ReadonlyArray<SectionItem>;
+};
+type SectionMenu = ExclusifyUnion<{
+    columns: ReadonlyArray<SectionColumn>;
+} | {
+    content?: React.ReactElement | ((props: {
+        closeMenu: () => void;
+    }) => React.ReactElement);
+}>;
+type MainNavigationBarSection = {
+    title: string;
+    menu?: SectionMenu;
+} & MaybeInteractiveProps;
+type MainNavigationBarProps = {
+    sections?: ReadonlyArray<MainNavigationBarSection>;
+    selectedIndex?: number;
+    right?: React.ReactElement;
+    logo?: React.ReactElement;
+    variant?: Variant;
+    children?: undefined;
+    topFixed?: boolean;
+    withBorder?: boolean;
+    burgerMenuExtra?: React.ReactNode;
+    large?: boolean;
+    desktopLargeMenu?: boolean;
+};
+type MainNavigationBarMenuStatus = 'opening' | 'opened' | 'closing' | 'closed';
+type MainNavigationBarDesktopMenuState = {
+    isMenuOpen: boolean;
+    openedSection: number;
+    menuHeight: string;
+    menuStatus: MainNavigationBarMenuStatus;
+    openSectionMenu: (index: number) => void;
+    closeMenu: () => void;
+    setMenuHeight: (height: string) => void;
+    setIsMenuHovered: (value: boolean) => void;
+    setFocusedItem: (item?: {
+        column: number;
+        index: number;
+    }) => void;
+    debouncedOpenSectionMenu: (index: number) => void;
+    cancelDebouncedOpenSectionMenu: (index: number) => void;
+};
+export declare const useMainNavigationBarDesktopMenuState: () => MainNavigationBarDesktopMenuState;
+export declare const MainNavigationBar: ({ sections, selectedIndex, right, variant, topFixed, withBorder, burgerMenuExtra, logo, large, desktopLargeMenu, }: MainNavigationBarProps) => JSX.Element;
 type FunnelNavigationBarProps = {
     variant?: Variant;
     logo?: React.ReactElement;