@dnanpm/styleguide 3.2.0 → 3.3.1

package/build/es/components/MainHeaderNavigation/ChildComponents/MainNavTooltipMenu.d.ts

@@ -1,193 +1,193 @@
-import type { ReactNode } from 'react';
-import React from 'react';
-export interface MainNavTooltipMenuProps {
-    /** Aria-label for screen readers in mobile */
-    ariaLabel?: string;
-    /** Tooltip menu content */
-    children?: ReactNode;
-    /** Overlap other elements */
-    zIndex?: number;
-    /** Tooltip position from right. Default: 1.25rem */
-    tooltipRight?: string;
-    /** Mandatory Component provided as login content */
-    contentComponent?: ReactNode | boolean;
-    /** Array of tags (lowercase) that will close menu if they are inside the dropdown tooltip menu. default []. THIS CAN BE OVERRIDEN WITH data-no-close="true" in element */
-    closeWhenTagClicked?: string[];
-    /** Width of the opened menu content. default 20rem. */
-    contentWidth?: string;
-    /** This will define the global state object string. mandatory */
-    globalStateString: string;
-    /** Adjust menu margin so that it will not overflow if fullWidth. optional. default false. */
-    fullWidthDesktop?: boolean;
-    /** Adjust menu to be full width after this number. default xs (480). */
-    fullWidthBreakpoint?: number;
-}
-export declare const IconContainer: import("styled-components").StyledComponent<"div", {
-    base: {
-        baseHeight: {
-            value: number;
-            unit: string;
-        };
-        baseWidth: {
-            value: number;
-            unit: string;
-        };
-    };
-    breakpoints: import("../../../themes/themeComponents/breakpoints").ViewBreakpoints;
-    color: {
-        default: {
-            pink: string;
-            plum: string;
-            white: string;
-            black: string;
-        };
-        accent: {
-            lemon: string;
-            sky: string;
-            orange: string;
-        };
-        hover: {
-            pink: string;
-        };
-        text: {
-            gray: string;
-            pink: string;
-            plum: string;
-            white: string;
-            black: string;
-        };
-        line: {
-            L01: string;
-            L02: string;
-            L03: string;
-            L04: string;
-        };
-        notification: {
-            info: string;
-            success: string;
-            warning: string;
-            error: string;
-        };
-        background: {
-            sand: {
-                default: string;
-                E01: string;
-                E02: string;
-            };
-            pink: {
-                default: string;
-                E01: string;
-                E02: string;
-            };
-            plum: {
-                default: string;
-                E01: string;
-                E02: string;
-            };
-            lemon: {
-                default: string;
-                E01: string;
-                E02: string;
-            };
-            sky: {
-                default: string;
-                E01: string;
-                E02: string;
-            };
-            orange: {
-                default: string;
-                E01: string;
-                E02: string;
-            };
-            white: {
-                default: string;
-            };
-        };
-        /** This will define the global state object string. mandatory */
-        focus: {
-            dark: string;
-            light: string;
-        };
-        transparency: {
-            T0: string;
-            T10: string;
-            T20: string;
-            T30: string;
-            T40: string;
-            T50: string;
-            T60: string;
-            T70: string;
-            T80: string;
-            T90: string;
-            T100: string;
-        };
-    };
-    fontFamily: {
-        default: string;
-        heading: string;
-        numerals: string;
-    };
-    fontSize: {
-        default: string;
-        xl: string;
-        l: string;
-        s: string;
-        xs: string;
-        h1XL: string;
-        h1L: string;
-        h1M: string;
-        h1S: string;
-        h2M: string;
-        h2S: string;
-        h3: string;
-        h4: string;
-        h5: string;
-        h1: string;
-        h2: string;
-    };
-    fontWeight: {
-        book: number;
-        medium: number;
-        bold: number;
-        black: number;
-    };
-    form: {
-        smallSelectWidth: string;
-        smallSelectHeight: string;
-    };
-    grid: {
-        gutter: string;
-    };
-    lineHeight: {
-        default: string;
-        xl: string;
-        s: string;
-        xs: string;
-        xxs: string;
-        auto: string;
-        h1XL: string;
-        h1L: string;
-        h1M: string;
-        h1S: string;
-        h2M: string;
-        h2S: string;
-        h3: string;
-        h4: string;
-        h5: string;
-        h1: string;
-        h2: string;
-    };
-    media: Record<string | number, (l: TemplateStringsArray, ...p: (string | number)[]) => string>;
-    radius: {
-        default: string;
-        s: string;
-        xs: string;
-        circle: string;
-        pill: string;
-    };
-}, {
-    isActive?: boolean | undefined;
-    collapseSize: number;
-}, never>;
-declare const MainNavTooltipMenu: ({ ariaLabel, children, closeWhenTagClicked, contentComponent, contentWidth, fullWidthBreakpoint, fullWidthDesktop, globalStateString, tooltipRight, zIndex, }: MainNavTooltipMenuProps) => React.JSX.Element;
-export default MainNavTooltipMenu;
+import type { ReactNode } from 'react';
+import React from 'react';
+export interface MainNavTooltipMenuProps {
+    /** Aria-label for screen readers in mobile */
+    ariaLabel?: string;
+    /** Tooltip menu content */
+    children?: ReactNode;
+    /** Overlap other elements */
+    zIndex?: number;
+    /** Tooltip position from right. Default: 1.25rem */
+    tooltipRight?: string;
+    /** Mandatory Component provided as login content */
+    contentComponent?: ReactNode | boolean;
+    /** Array of tags (lowercase) that will close menu if they are inside the dropdown tooltip menu. default []. THIS CAN BE OVERRIDEN WITH data-no-close="true" in element */
+    closeWhenTagClicked?: string[];
+    /** Width of the opened menu content. default 20rem. */
+    contentWidth?: string;
+    /** This will define the global state object string. mandatory */
+    globalStateString: string;
+    /** Adjust menu margin so that it will not overflow if fullWidth. optional. default false. */
+    fullWidthDesktop?: boolean;
+    /** Adjust menu to be full width after this number. default xs (480). */
+    fullWidthBreakpoint?: number;
+}
+export declare const IconContainer: import("styled-components").StyledComponent<"div", {
+    base: {
+        baseHeight: {
+            value: number;
+            unit: string;
+        };
+        baseWidth: {
+            value: number;
+            unit: string;
+        };
+    };
+    breakpoints: import("../../../themes/themeComponents/breakpoints").ViewBreakpoints;
+    color: {
+        default: {
+            pink: string;
+            plum: string;
+            white: string;
+            black: string;
+        };
+        accent: {
+            lemon: string;
+            sky: string;
+            orange: string;
+        };
+        hover: {
+            pink: string;
+        };
+        text: {
+            gray: string;
+            pink: string;
+            plum: string;
+            white: string;
+            black: string;
+        };
+        line: {
+            L01: string;
+            L02: string;
+            L03: string;
+            L04: string;
+        };
+        notification: {
+            info: string;
+            success: string;
+            warning: string;
+            error: string;
+        };
+        background: {
+            sand: {
+                default: string;
+                E01: string;
+                E02: string;
+            };
+            pink: {
+                default: string;
+                E01: string;
+                E02: string;
+            };
+            plum: {
+                default: string;
+                E01: string;
+                E02: string;
+            };
+            lemon: {
+                default: string;
+                E01: string;
+                E02: string;
+            };
+            sky: {
+                default: string;
+                E01: string;
+                E02: string;
+            };
+            orange: {
+                default: string;
+                E01: string;
+                E02: string;
+            };
+            white: {
+                default: string;
+            };
+        };
+        /** This will define the global state object string. mandatory */
+        focus: {
+            dark: string;
+            light: string;
+        };
+        transparency: {
+            T0: string;
+            T10: string;
+            T20: string;
+            T30: string;
+            T40: string;
+            T50: string;
+            T60: string;
+            T70: string;
+            T80: string;
+            T90: string;
+            T100: string;
+        };
+    };
+    fontFamily: {
+        default: string;
+        heading: string;
+        numerals: string;
+    };
+    fontSize: {
+        default: string;
+        xl: string;
+        l: string;
+        s: string;
+        xs: string;
+        h1XL: string;
+        h1L: string;
+        h1M: string;
+        h1S: string;
+        h2M: string;
+        h2S: string;
+        h3: string;
+        h4: string;
+        h5: string;
+        h1: string;
+        h2: string;
+    };
+    fontWeight: {
+        book: number;
+        medium: number;
+        bold: number;
+        black: number;
+    };
+    form: {
+        smallSelectWidth: string;
+        smallSelectHeight: string;
+    };
+    grid: {
+        gutter: string;
+    };
+    lineHeight: {
+        default: string;
+        xl: string;
+        s: string;
+        xs: string;
+        xxs: string;
+        auto: string;
+        h1XL: string;
+        h1L: string;
+        h1M: string;
+        h1S: string;
+        h2M: string;
+        h2S: string;
+        h3: string;
+        h4: string;
+        h5: string;
+        h1: string;
+        h2: string;
+    };
+    media: Record<string | number, (l: TemplateStringsArray, ...p: (string | number)[]) => string>;
+    radius: {
+        default: string;
+        s: string;
+        xs: string;
+        circle: string;
+        pill: string;
+    };
+}, {
+    isActive?: boolean | undefined;
+    collapseSize: number;
+}, never>;
+declare const MainNavTooltipMenu: ({ ariaLabel, children, closeWhenTagClicked, contentComponent, contentWidth, fullWidthBreakpoint, fullWidthDesktop, globalStateString, tooltipRight, zIndex, }: MainNavTooltipMenuProps) => React.JSX.Element;
+export default MainNavTooltipMenu;

package/build/es/components/MainHeaderNavigation/ChildComponents/MainNavTooltipMenu.js

@@ -35,10 +35,11 @@ const IconContainer = styled.div `
             display: block;
         }
     }
-`;
+`;
 const Tooltip = styled.div `
     min-height: ${getMultipliedSize(theme.base.baseHeight, 5)};
-    max-height: calc(var(--vh100, 100vh) - ${navMaxHeight});
+    // Ensure that the tooltip's content is always visible within the viewport. So, the max-height is the viewport height minus the header's height + some margin.
+    max-height: calc(var(--vh100, 100vh) - ${getMultipliedSize(theme.base.baseHeight, 12)});
     width: 100%;
     position: absolute;
     right: 0;
@@ -51,13 +52,13 @@ const Tooltip = styled.div `
         width: ${p => p.contentWidth};
         right: ${p => (p.fullWidthDesktop ? 0 : p.tooltipRight)};
     }
-`;
+`;
 const TooltipBox = styled(Box) `
     border-top-left-radius: 0 !important;
     border-top-right-radius: 0 !important;
     min-height: inherit;
     max-height: inherit;
-`;
+`;
 const Caret = styled.div `
     position: absolute;
     z-index: ${p => p.zIndex + 1};
@@ -73,39 +74,39 @@ const Caret = styled.div `
     @media (min-width: ${p => p.collapseSize + 1}px) {
         max-height: calc(var(--vh100, 100vh) - ${navMaxHeight});
     }
-`;
-const MainNavTooltipMenu = ({ ariaLabel, children, closeWhenTagClicked = [], contentComponent, contentWidth = '20rem', fullWidthBreakpoint = theme.breakpoints.xs, fullWidthDesktop = false, globalStateString, tooltipRight = '-1rem', zIndex = 1, }) => {
-    const { collapseSize, isMobileMenu, isLoggedIn, resetMenuEvents, setTooltipItems, showLoginTooltip, showMinicart, tooltipItems, } = useContext(NavContext);
-    const ref = useRef(null);
-    const globalStateKey = globalStateString;
-    const isLoginItemAndLoggedIn = globalStateKey === 'login' && isLoggedIn;
-    const ContentComponent = contentComponent;
-    useDocHeight();
-    useEffect(() => {
-        setTooltipItems({
-            minicart: showMinicart,
-            login: showLoginTooltip,
-            search: false,
-        });
-    }, [showMinicart, showLoginTooltip, setTooltipItems]);
-    const toggleState = () => {
-        resetMenuEvents();
-        setTimeout(() => {
-            setTooltipItems(prevItems => (Object.assign(Object.assign({}, prevItems), { [globalStateKey]: !tooltipItems[globalStateKey] })));
-        });
-    };
-    useCloseOutsideOrElementClicked({ ref, closeWhenTagClicked }, () => {
-        if (tooltipItems[globalStateKey]) {
-            setTooltipItems(prevItems => (Object.assign(Object.assign({}, prevItems), { [globalStateKey]: false })));
-        }
-    });
-    return (React__default.createElement(IconContainer, { "data-testid": `header-${globalStateKey}-container`, collapseSize: collapseSize, ref: ref },
-        globalStateKey === 'login' && !isLoggedIn ? (React__default.createElement(ButtonPrimary, { onClick: ContentComponent ? toggleState : undefined, small: true }, children)) : (React__default.createElement(TooltipWrapper, { "aria-label": ariaLabel, isLoggedIn: isLoginItemAndLoggedIn, collapseSize: collapseSize, isHighlighted: tooltipItems[globalStateKey] || isLoginItemAndLoggedIn, onClick: ContentComponent ? toggleState : undefined }, children)),
-        tooltipItems[globalStateKey] && ContentComponent && (React__default.createElement(React__default.Fragment, null,
-            React__default.createElement(Caret, { zIndex: zIndex, collapseSize: collapseSize }),
-            React__default.createElement(Tooltip, { zIndex: zIndex, tooltipRight: tooltipRight, contentWidth: contentWidth, collapseSize: collapseSize, fullWidthDesktop: fullWidthDesktop, fullWidthBreakpoint: fullWidthBreakpoint },
-                React__default.createElement(TooltipBox, { elevation: "high", padding: "0", width: "100%" },
-                    React__default.createElement(ContentComponent, { mobileView: isMobileMenu })))))));
+`;
+const MainNavTooltipMenu = ({ ariaLabel, children, closeWhenTagClicked = [], contentComponent, contentWidth = '20rem', fullWidthBreakpoint = theme.breakpoints.xs, fullWidthDesktop = false, globalStateString, tooltipRight = '-1rem', zIndex = 1, }) => {
+    const { collapseSize, isMobileMenu, isLoggedIn, resetMenuEvents, setTooltipItems, showLoginTooltip, showMinicart, tooltipItems, } = useContext(NavContext);
+    const ref = useRef(null);
+    const globalStateKey = globalStateString;
+    const isLoginItemAndLoggedIn = globalStateKey === 'login' && isLoggedIn;
+    const ContentComponent = contentComponent;
+    useDocHeight();
+    useEffect(() => {
+        setTooltipItems({
+            minicart: showMinicart,
+            login: showLoginTooltip,
+            search: false,
+        });
+    }, [showMinicart, showLoginTooltip, setTooltipItems]);
+    const toggleState = () => {
+        resetMenuEvents();
+        setTimeout(() => {
+            setTooltipItems(prevItems => (Object.assign(Object.assign({}, prevItems), { [globalStateKey]: !tooltipItems[globalStateKey] })));
+        });
+    };
+    useCloseOutsideOrElementClicked({ ref, closeWhenTagClicked }, () => {
+        if (tooltipItems[globalStateKey]) {
+            setTooltipItems(prevItems => (Object.assign(Object.assign({}, prevItems), { [globalStateKey]: false })));
+        }
+    });
+    return (React__default.createElement(IconContainer, { "data-testid": `header-${globalStateKey}-container`, collapseSize: collapseSize, ref: ref },
+        globalStateKey === 'login' && !isLoggedIn ? (React__default.createElement(ButtonPrimary, { onClick: ContentComponent ? toggleState : undefined, small: true }, children)) : (React__default.createElement(TooltipWrapper, { "aria-label": ariaLabel, isLoggedIn: isLoginItemAndLoggedIn, collapseSize: collapseSize, isHighlighted: tooltipItems[globalStateKey] || isLoginItemAndLoggedIn, onClick: ContentComponent ? toggleState : undefined }, children)),
+        tooltipItems[globalStateKey] && ContentComponent && (React__default.createElement(React__default.Fragment, null,
+            React__default.createElement(Caret, { zIndex: zIndex, collapseSize: collapseSize }),
+            React__default.createElement(Tooltip, { zIndex: zIndex, tooltipRight: tooltipRight, contentWidth: contentWidth, collapseSize: collapseSize, fullWidthDesktop: fullWidthDesktop, fullWidthBreakpoint: fullWidthBreakpoint },
+                React__default.createElement(TooltipBox, { elevation: "high", padding: "0", width: "100%" },
+                    React__default.createElement(ContentComponent, { mobileView: isMobileMenu })))))));
 };
 
 export { IconContainer, MainNavTooltipMenu as default };