@lifesg/react-design-system 4.0.0-alpha.1 → 4.0.0-alpha.3

package/navbar/navbar-items.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"../_virtual/_tslib.js";import{jsx as n,Fragment as i,jsxs as t}from"react/jsx-runtime";import{useState as r,useRef as l,useEffect as o}from"react";import{Menu as d}from"../menu/menu.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{SimpleIdGenerator as a}from"../util/simple-id-generator.js";import"../util/string-helper.js";import{Menu as s}from"./menu.js";import{MobileWrapper as c,Wrapper as u,LinkItem as m,Link as p,LinkLabel as h,LinkButton as g,LinkIndicator as b,LinkIconContainer as v,ExpandCollapseButton as f,ChevronIcon as $}from"./navbar-items.styles.js";const j=({items:j,selectedId:k,mobile:x=!1,hideNavBranding:y,hideLinkIndicator:C=!1,onItemClick:M})=>{const[I,O]=r(-1),[_,w]=r(!1),[L,P]=r(null),E=l(null),[S]=r((()=>a.generate()));o((()=>{const e=e=>{E.current&&!E.current.contains(e.target)&&(w(!1),O(-1),P(null))};return document.addEventListener("click",e,!0),()=>{document.removeEventListener("click",e,!0)}}),[]);const B=(e,n)=>i=>{var t;if(i.stopPropagation(),x&&(null===(t=e.subMenu)||void 0===t?void 0:t.length)){const e=!(I===n&&_);O(n),w(e)}M(i,e)},D=(e,n)=>{e.stopPropagation(),M(e,n),w(!1),O(-1)},A=(e,i)=>n(d.Content,{id:i,children:n(d.Section,{showDivider:!1,children:e.map(((e,i)=>n(d.Link,{href:e.href,children:e.children},`${e.id}-${i}`)))})}),F=e=>n(s,{items:e,onItemClick:D}),H=(r,l)=>{const{children:o,options:a,subMenu:s}=r,c=e(r,["children","options","subMenu"]),u=!!(null==s?void 0:s.length),j=(e=>{var n;return e.id===k||!!(null===(n=e.subMenu)||void 0===n?void 0:n.length)&&!!e.subMenu.find((e=>e.id===k))})(r),M=x&&u&&I===l&&_,O=!x&&u&&L===l||M,w=null!==L?L===l:j,E=!C&&w,D=w?x?"bold":"semibold":"regular",H=x?`link__mobile-${l+1}`:`link__${l+1}`,N=()=>E?n(b,{"data-testid":`${H}-indicator`,$selected:w}):null;return n(m,{$hiddenBranding:y,children:u?(()=>{const e=`navbar-submenu-${S}-${r.id}`;return x?t(i,{children:[t(p,Object.assign({"data-testid":H,weight:D,$selected:w,underlineStyle:"none"},c,{"aria-current":j?"page":void 0,"aria-haspopup":"menu","aria-expanded":O,onClick:B(r,l)},a,{children:[n(h,{children:o}),N(),x&&u?n(v,{children:n(f,{"data-testid":`${H}-expand-collapse-button`,$selected:M,focusHighlight:!1,focusOutline:"browser","aria-label":M?"Collapse":"Expand",children:n($,{$selected:w})})}):null]})),M&&F(s)]}):n(d,{position:"bottom",customOffset:0,menuContent:A(s,e),triggerOnFocus:!0,isModal:!1,onPopoverAppear:()=>P(l),onPopoverDismiss:()=>{P((e=>e===l?null:e))},children:t(g,Object.assign({type:"button",tabIndex:0,"data-testid":H,weight:D,$selected:w,"aria-haspopup":"menu","aria-expanded":O},a,{children:[n(h,{children:o}),N()]}))})})():t(p,Object.assign({tabIndex:0,"data-testid":H,weight:D,$selected:w,underlineStyle:"none"},c,{"aria-current":j?"page":void 0,onClick:B(r,l)},a,{children:[n(h,{children:o}),N()]}))},l)},N=()=>j.map(((e,i)=>{var t;return"component"===e.itemType?n("li",{children:null!==(t=e.children)&&void 0!==t?t:null},i):H(e,i)}));return j&&j.length>0?x?n(c,{ref:E,children:N()}):n(u,{ref:E,$alignLeft:y,children:N()}):n(i,{})};export{j as NavbarItems};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsx as i,Fragment as n,jsxs as r}from"react/jsx-runtime";import{ChevronUpIcon as t}from"@lifesg/react-icons/chevron-up";import a from"clsx";import{useState as l,useRef as s,useEffect as o}from"react";import{Menu as c}from"../menu/menu.js";import{ClickableIcon as d}from"../shared/clickable-icon/clickable-icon.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{useId as m}from"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{Menu as u}from"./menu.js";import{mobileWrapper as p,wrapper as h,wrapperAlignLeft as b,link as v,linkSelected as f,linkItem as g,linkItemHiddenBranding as j,linkWeightRegular as N,linkWeightSemibold as k,linkWeightBold as x,linkLabel as $,linkButton as C,linkIndicator as M,linkIndicatorSelected as I,linkIconContainer as O,chevronIcon as _,chevronIconSelected as y,expandCollapseButton as L,expandCollapseButtonExpanded as P}from"./navbar-items.styles.js";const w=({items:w,selectedId:E,mobile:D=!1,hideNavBranding:A,hideLinkIndicator:B=!1,onItemClick:F})=>{const[H,S]=l(-1),[T,q]=l(!1),[z,G]=l(null),J=s(null),K=m();o((()=>{const e=e=>{J.current&&!J.current.contains(e.target)&&(q(!1),S(-1),G(null))};return document.addEventListener("click",e,!0),()=>{document.removeEventListener("click",e,!0)}}),[]);const Q=(e,i)=>n=>{var r;if(n.stopPropagation(),D&&(null===(r=e.subMenu)||void 0===r?void 0:r.length)){const e=!(H===i&&T);S(i),q(e)}F(n,e)},R=(e,i)=>{e.stopPropagation(),F(e,i),q(!1),S(-1)},U=(e,n)=>i(c.Content,{id:n,children:i(c.Section,{showDivider:!1,children:e.map(((e,n)=>i(c.Link,{href:e.href,children:e.children},`${e.id}-${n}`)))})}),V=e=>i(u,{items:e,onItemClick:R}),W=(l,s)=>{const{children:o,options:m,subMenu:u}=l,p=e(l,["children","options","subMenu"]),h=!!(null==u?void 0:u.length),b=(e=>{var i;return e.id===E||!!(null===(i=e.subMenu)||void 0===i?void 0:i.length)&&!!e.subMenu.find((e=>e.id===E))})(l),w=D&&h&&H===s&&T,F=!D&&h&&z===s||w,S=null!==z?z===s:b,q=!B&&S,J=D?`link__mobile-${s+1}`:`link__${s+1}`,R=()=>q?i("div",{"data-testid":`${J}-indicator`,className:a(M,S&&I)}):null,W=a(v,(e=>{switch(e){case"bold":return x;case"semibold":return k;default:return N}})(S?D?"bold":"semibold":"regular"),S&&f);return i("li",{className:a(g,A&&j),children:h?(()=>{const e=`navbar-submenu-${K}-${l.id}`;return D?r(n,{children:[r("a",Object.assign({"data-testid":J,className:W},p,{"aria-current":b?"page":void 0,"aria-haspopup":"menu","aria-expanded":F,onClick:Q(l,s)},m,{children:[i("div",{className:$,children:o}),R(),D&&h?i("div",{className:O,children:i(d,{"data-testid":`${J}-expand-collapse-button`,className:a(L,w&&P),focusHighlight:!1,focusOutline:"browser","aria-label":w?"Collapse":"Expand",children:i(t,{className:a(_,S&&y)})})}):null]})),w&&V(u)]}):i(c,{position:"bottom",customOffset:0,menuContent:U(u,e),triggerOnFocus:!0,isModal:!1,onPopoverAppear:()=>G(s),onPopoverDismiss:()=>{G((e=>e===s?null:e))},children:r("button",Object.assign({type:"button",tabIndex:0,"data-testid":J,className:a(W,C),"aria-haspopup":"menu","aria-expanded":F},m,{children:[i("div",{className:$,children:o}),R()]}))})})():r("a",Object.assign({tabIndex:0,"data-testid":J,className:W},p,{"aria-current":b?"page":void 0,onClick:Q(l,s)},m,{children:[i("div",{className:$,children:o}),R()]}))},s)},X=()=>w.map(((e,n)=>{var r;return"component"===e.itemType?i("li",{children:null!==(r=e.children)&&void 0!==r?r:null},n):W(e,n)}));return w&&w.length>0?i("ul",D?{ref:J,className:p,children:X()}:{ref:J,className:a(h,A&&b),children:X()}):i(n,{})};export{w as NavbarItems};
 //# sourceMappingURL=navbar-items.js.map

package/navbar/navbar-items.js.map

@@ -1 +1 @@
-{"version":3,"file":"navbar-items.js","sources":["../../src/navbar/navbar-items.tsx"],"sourcesContent":["import type React from \"react\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport { Menu as DesktopMenu } from \"../menu\";\nimport type { TypographyWeight } from \"../typography\";\nimport { SimpleIdGenerator } from \"../util\";\nimport { Menu as MobileMenu } from \"./menu\";\nimport {\n    ChevronIcon,\n    ExpandCollapseButton,\n    Link,\n    LinkButton,\n    LinkIconContainer,\n    LinkIndicator,\n    LinkItem,\n    LinkLabel,\n    MobileWrapper,\n    Wrapper,\n} from \"./navbar-items.styles\";\nimport type {\n    NavItemCommonProps,\n    NavItemLinkProps,\n    NavItemProps,\n} from \"./types\";\n\ninterface Props<T> {\n    items: NavItemProps<T>[];\n    selectedId?: string | undefined;\n    /** toggle for mobile or desktop view */\n    mobile?: boolean | undefined;\n    hideNavBranding?: boolean | undefined;\n    /** hide the selected LinkIndicator */\n    hideLinkIndicator?: boolean | undefined;\n    onItemClick: (\n        event: React.MouseEvent<HTMLAnchorElement>,\n        item: NavItemProps<T> | NavItemCommonProps<T>\n    ) => void;\n}\n\nexport const NavbarItems = <T,>({\n    items,\n    selectedId,\n    mobile = false,\n    hideNavBranding,\n    hideLinkIndicator = false,\n    onItemClick,\n}: Props<T>): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE, REFS\n    // =============================================================================\n    const [selectedIndex, setSelectedIndex] = useState<number>(-1);\n    const [showSubMenu, setShowSubMenu] = useState<boolean>(false);\n    const [openSubMenuIndex, setOpenSubMenuIndex] = useState<number | null>(\n        null\n    );\n    const listRef = useRef<HTMLUListElement>(null);\n    const [instanceId] = useState(() => SimpleIdGenerator.generate());\n\n    // =============================================================================\n    // HELPERS\n    // =============================================================================\n    const resetAll = () => {\n        setShowSubMenu(false);\n        setSelectedIndex(-1);\n        setOpenSubMenuIndex(null);\n    };\n\n    const closeMobileSubMenu = () => {\n        setShowSubMenu(false);\n        setSelectedIndex(-1);\n    };\n\n    const checkSelected = (item: NavItemLinkProps<T>): boolean => {\n        if (item.id === selectedId) return true;\n        if (item.subMenu?.length) {\n            return !!item.subMenu.find((s) => s.id === selectedId);\n        }\n        return false;\n    };\n\n    useEffect(() => {\n        const handleClickOutside = (event: MouseEvent) => {\n            if (\n                listRef.current &&\n                !listRef.current.contains(event.target as Node)\n            ) {\n                resetAll();\n            }\n        };\n        document.addEventListener(\"click\", handleClickOutside, true);\n        return () => {\n            document.removeEventListener(\"click\", handleClickOutside, true);\n        };\n    }, []);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleLinkClick = (item: NavItemLinkProps<T>, index: number) => {\n        return (event: React.MouseEvent<HTMLAnchorElement>) => {\n            event.stopPropagation();\n\n            // mobile expands inline when link has submenu\n            if (mobile && item.subMenu?.length) {\n                const nextExpanded = !(selectedIndex === index && showSubMenu);\n                setSelectedIndex(index);\n                setShowSubMenu(nextExpanded);\n            }\n\n            onItemClick(event, item);\n        };\n    };\n\n    const handleMobileSubLinkClick = (\n        event: React.MouseEvent<HTMLAnchorElement>,\n        item: NavItemCommonProps<T>\n    ) => {\n        event.stopPropagation();\n        onItemClick(event, item);\n        closeMobileSubMenu();\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderDesktopSubMenu = (\n        subMenu: NavItemCommonProps<T>[],\n        subMenuId: string\n    ) => (\n        <DesktopMenu.Content id={subMenuId}>\n            <DesktopMenu.Section showDivider={false}>\n                {subMenu.map((item, subIndex) => (\n                    <DesktopMenu.Link\n                        key={`${item.id}-${subIndex}`}\n                        href={item.href}\n                    >\n                        {item.children}\n                    </DesktopMenu.Link>\n                ))}\n            </DesktopMenu.Section>\n        </DesktopMenu.Content>\n    );\n\n    const renderMobileSubMenu = (subMenu: NavItemCommonProps<T>[]) => (\n        <MobileMenu items={subMenu} onItemClick={handleMobileSubLinkClick} />\n    );\n\n    const renderLinkItem = (item: NavItemLinkProps<T>, index: number) => {\n        const { children, options, subMenu, ...otherItemAttrs } = item;\n\n        const hasSubMenu = !!subMenu?.length;\n\n        const isRouteSelected = checkSelected(item);\n\n        // desktop popover open state\n        const isDesktopExpanded =\n            !mobile && hasSubMenu && openSubMenuIndex === index;\n\n        // mobile inline expanded state\n        const isMobileExpanded =\n            mobile && hasSubMenu && selectedIndex === index && showSubMenu;\n\n        const isExpanded = isDesktopExpanded || isMobileExpanded;\n\n        const selected =\n            openSubMenuIndex !== null\n                ? openSubMenuIndex === index\n                : isRouteSelected;\n\n        const showIndicator = !hideLinkIndicator && selected;\n\n        const textWeight: TypographyWeight = selected\n            ? mobile\n                ? \"bold\"\n                : \"semibold\"\n            : \"regular\";\n\n        const testId = mobile\n            ? `link__mobile-${index + 1}`\n            : `link__${index + 1}`;\n\n        const renderIndicator = () =>\n            showIndicator ? (\n                <LinkIndicator\n                    data-testid={`${testId}-indicator`}\n                    $selected={selected}\n                />\n            ) : null;\n\n        const renderMobileChevron = () =>\n            mobile && hasSubMenu ? (\n                <LinkIconContainer>\n                    <ExpandCollapseButton\n                        data-testid={`${testId}-expand-collapse-button`}\n                        $selected={isMobileExpanded}\n                        focusHighlight={false}\n                        focusOutline=\"browser\"\n                        aria-label={isMobileExpanded ? \"Collapse\" : \"Expand\"}\n                    >\n                        <ChevronIcon $selected={selected} />\n                    </ExpandCollapseButton>\n                </LinkIconContainer>\n            ) : null;\n\n        const renderLink = () => (\n            <Link\n                tabIndex={0}\n                data-testid={testId}\n                weight={textWeight}\n                $selected={selected}\n                underlineStyle=\"none\"\n                {...otherItemAttrs}\n                aria-current={isRouteSelected ? \"page\" : undefined}\n                onClick={handleLinkClick(item, index)}\n                {...options}\n            >\n                <LinkLabel>{children}</LinkLabel>\n                {renderIndicator()}\n            </Link>\n        );\n\n        const renderLinkWithSubmenu = () => {\n            const subMenuId = `navbar-submenu-${instanceId}-${item.id}`;\n\n            if (mobile) {\n                return (\n                    <>\n                        <Link\n                            data-testid={testId}\n                            weight={textWeight}\n                            $selected={selected}\n                            underlineStyle=\"none\"\n                            {...otherItemAttrs}\n                            aria-current={isRouteSelected ? \"page\" : undefined}\n                            aria-haspopup=\"menu\"\n                            aria-expanded={isExpanded}\n                            onClick={handleLinkClick(item, index)}\n                            {...options}\n                        >\n                            <LinkLabel>{children}</LinkLabel>\n                            {renderIndicator()}\n                            {renderMobileChevron()}\n                        </Link>\n\n                        {isMobileExpanded && renderMobileSubMenu(subMenu!)}\n                    </>\n                );\n            }\n\n            return (\n                <DesktopMenu\n                    position=\"bottom\"\n                    customOffset={0}\n                    menuContent={renderDesktopSubMenu(subMenu!, subMenuId)}\n                    triggerOnFocus\n                    isModal={false}\n                    onPopoverAppear={() => setOpenSubMenuIndex(index)}\n                    onPopoverDismiss={() => {\n                        setOpenSubMenuIndex((prev) =>\n                            prev === index ? null : prev\n                        );\n                    }}\n                >\n                    <LinkButton\n                        type=\"button\"\n                        tabIndex={0}\n                        data-testid={testId}\n                        weight={textWeight}\n                        $selected={selected}\n                        aria-haspopup=\"menu\"\n                        aria-expanded={isExpanded}\n                        {...options}\n                    >\n                        <LinkLabel>{children}</LinkLabel>\n                        {renderIndicator()}\n                    </LinkButton>\n                </DesktopMenu>\n            );\n        };\n\n        return (\n            <LinkItem key={index} $hiddenBranding={hideNavBranding}>\n                {hasSubMenu ? renderLinkWithSubmenu() : renderLink()}\n            </LinkItem>\n        );\n    };\n\n    const renderItems = () =>\n        items.map((item, index) => {\n            switch (item.itemType) {\n                case \"component\": {\n                    return <li key={index}>{item.children ?? null}</li>;\n                }\n                case \"link\":\n                default: {\n                    return renderLinkItem(item as NavItemLinkProps<T>, index);\n                }\n            }\n        });\n\n    if (items && items.length > 0) {\n        return mobile ? (\n            <MobileWrapper ref={listRef}>{renderItems()}</MobileWrapper>\n        ) : (\n            <Wrapper ref={listRef} $alignLeft={hideNavBranding}>\n                {renderItems()}\n            </Wrapper>\n        );\n    }\n\n    return <></>;\n};\n"],"names":["NavbarItems","items","selectedId","mobile","hideNavBranding","hideLinkIndicator","onItemClick","selectedIndex","setSelectedIndex","useState","showSubMenu","setShowSubMenu","openSubMenuIndex","setOpenSubMenuIndex","listRef","useRef","instanceId","SimpleIdGenerator","generate","useEffect","handleClickOutside","event","current","contains","target","document","addEventListener","removeEventListener","handleLinkClick","item","index","stopPropagation","_a","subMenu","length","nextExpanded","handleMobileSubLinkClick","renderDesktopSubMenu","subMenuId","_jsx","DesktopMenu","Content","id","children","Section","showDivider","map","subIndex","Link","href","renderMobileSubMenu","MobileMenu","renderLinkItem","options","otherItemAttrs","__rest","hasSubMenu","isRouteSelected","find","s","checkSelected","isMobileExpanded","isExpanded","selected","showIndicator","textWeight","testId","renderIndicator","LinkIndicator","$selected","LinkItem","$hiddenBranding","_jsxs","_Fragment","Object","assign","weight","underlineStyle","undefined","onClick","LinkLabel","LinkIconContainer","ExpandCollapseButton","focusHighlight","focusOutline","ChevronIcon","position","customOffset","menuContent","triggerOnFocus","isModal","onPopoverAppear","onPopoverDismiss","prev","LinkButton","type","tabIndex","renderLinkWithSubmenu","renderItems","itemType","MobileWrapper","ref","Wrapper","$alignLeft"],"mappings":"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"}
+{"version":3,"file":"navbar-items.js","sources":["../../src/navbar/navbar-items.tsx"],"sourcesContent":["import { ChevronUpIcon } from \"@lifesg/react-icons/chevron-up\";\nimport clsx from \"clsx\";\nimport type React from \"react\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport { Menu as DesktopMenu } from \"../menu\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport type { TypographyWeight } from \"../typography\";\nimport { useId } from \"../util\";\nimport { Menu as MobileMenu } from \"./menu\";\nimport * as styles from \"./navbar-items.styles\";\nimport type {\n    NavItemCommonProps,\n    NavItemLinkProps,\n    NavItemProps,\n} from \"./types\";\n\nconst getLinkWeightClass = (weight: TypographyWeight) => {\n    switch (weight) {\n        case \"bold\":\n            return styles.linkWeightBold;\n        case \"semibold\":\n            return styles.linkWeightSemibold;\n        case \"regular\":\n        default:\n            return styles.linkWeightRegular;\n    }\n};\n\ninterface Props<T> {\n    items: NavItemProps<T>[];\n    selectedId?: string | undefined;\n    /** toggle for mobile or desktop view */\n    mobile?: boolean | undefined;\n    hideNavBranding?: boolean | undefined;\n    /** hide the selected LinkIndicator */\n    hideLinkIndicator?: boolean | undefined;\n    onItemClick: (\n        event: React.MouseEvent<HTMLAnchorElement>,\n        item: NavItemProps<T> | NavItemCommonProps<T>\n    ) => void;\n}\n\nexport const NavbarItems = <T,>({\n    items,\n    selectedId,\n    mobile = false,\n    hideNavBranding,\n    hideLinkIndicator = false,\n    onItemClick,\n}: Props<T>): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE, REFS\n    // =============================================================================\n    const [selectedIndex, setSelectedIndex] = useState<number>(-1);\n    const [showSubMenu, setShowSubMenu] = useState<boolean>(false);\n    const [openSubMenuIndex, setOpenSubMenuIndex] = useState<number | null>(\n        null\n    );\n    const listRef = useRef<HTMLUListElement>(null);\n    const instanceId = useId();\n\n    // =============================================================================\n    // HELPERS\n    // =============================================================================\n    const resetAll = () => {\n        setShowSubMenu(false);\n        setSelectedIndex(-1);\n        setOpenSubMenuIndex(null);\n    };\n\n    const closeMobileSubMenu = () => {\n        setShowSubMenu(false);\n        setSelectedIndex(-1);\n    };\n\n    const checkSelected = (item: NavItemLinkProps<T>): boolean => {\n        if (item.id === selectedId) return true;\n        if (item.subMenu?.length) {\n            return !!item.subMenu.find((s) => s.id === selectedId);\n        }\n        return false;\n    };\n\n    useEffect(() => {\n        const handleClickOutside = (event: MouseEvent) => {\n            if (\n                listRef.current &&\n                !listRef.current.contains(event.target as Node)\n            ) {\n                resetAll();\n            }\n        };\n        document.addEventListener(\"click\", handleClickOutside, true);\n        return () => {\n            document.removeEventListener(\"click\", handleClickOutside, true);\n        };\n    }, []);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleLinkClick = (item: NavItemLinkProps<T>, index: number) => {\n        return (event: React.MouseEvent<HTMLAnchorElement>) => {\n            event.stopPropagation();\n\n            // mobile expands inline when link has submenu\n            if (mobile && item.subMenu?.length) {\n                const nextExpanded = !(selectedIndex === index && showSubMenu);\n                setSelectedIndex(index);\n                setShowSubMenu(nextExpanded);\n            }\n\n            onItemClick(event, item);\n        };\n    };\n\n    const handleMobileSubLinkClick = (\n        event: React.MouseEvent<HTMLAnchorElement>,\n        item: NavItemCommonProps<T>\n    ) => {\n        event.stopPropagation();\n        onItemClick(event, item);\n        closeMobileSubMenu();\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderDesktopSubMenu = (\n        subMenu: NavItemCommonProps<T>[],\n        subMenuId: string\n    ) => (\n        <DesktopMenu.Content id={subMenuId}>\n            <DesktopMenu.Section showDivider={false}>\n                {subMenu.map((item, subIndex) => (\n                    <DesktopMenu.Link\n                        key={`${item.id}-${subIndex}`}\n                        href={item.href}\n                    >\n                        {item.children}\n                    </DesktopMenu.Link>\n                ))}\n            </DesktopMenu.Section>\n        </DesktopMenu.Content>\n    );\n\n    const renderMobileSubMenu = (subMenu: NavItemCommonProps<T>[]) => (\n        <MobileMenu items={subMenu} onItemClick={handleMobileSubLinkClick} />\n    );\n\n    const renderLinkItem = (item: NavItemLinkProps<T>, index: number) => {\n        const { children, options, subMenu, ...otherItemAttrs } = item;\n\n        const hasSubMenu = !!subMenu?.length;\n\n        const isRouteSelected = checkSelected(item);\n\n        // desktop popover open state\n        const isDesktopExpanded =\n            !mobile && hasSubMenu && openSubMenuIndex === index;\n\n        // mobile inline expanded state\n        const isMobileExpanded =\n            mobile && hasSubMenu && selectedIndex === index && showSubMenu;\n\n        const isExpanded = isDesktopExpanded || isMobileExpanded;\n\n        const selected =\n            openSubMenuIndex !== null\n                ? openSubMenuIndex === index\n                : isRouteSelected;\n\n        const showIndicator = !hideLinkIndicator && selected;\n\n        const textWeight: TypographyWeight = selected\n            ? mobile\n                ? \"bold\"\n                : \"semibold\"\n            : \"regular\";\n\n        const testId = mobile\n            ? `link__mobile-${index + 1}`\n            : `link__${index + 1}`;\n\n        const renderIndicator = () =>\n            showIndicator ? (\n                <div\n                    data-testid={`${testId}-indicator`}\n                    className={clsx(\n                        styles.linkIndicator,\n                        selected && styles.linkIndicatorSelected\n                    )}\n                />\n            ) : null;\n\n        const renderMobileChevron = () =>\n            mobile && hasSubMenu ? (\n                <div className={styles.linkIconContainer}>\n                    <ClickableIcon\n                        data-testid={`${testId}-expand-collapse-button`}\n                        className={clsx(\n                            styles.expandCollapseButton,\n                            isMobileExpanded &&\n                                styles.expandCollapseButtonExpanded\n                        )}\n                        focusHighlight={false}\n                        focusOutline=\"browser\"\n                        aria-label={isMobileExpanded ? \"Collapse\" : \"Expand\"}\n                    >\n                        <ChevronUpIcon\n                            className={clsx(\n                                styles.chevronIcon,\n                                selected && styles.chevronIconSelected\n                            )}\n                        />\n                    </ClickableIcon>\n                </div>\n            ) : null;\n\n        const linkClassName = clsx(\n            styles.link,\n            getLinkWeightClass(textWeight),\n            selected && styles.linkSelected\n        );\n\n        const renderLink = () => (\n            <a\n                tabIndex={0}\n                data-testid={testId}\n                className={linkClassName}\n                {...otherItemAttrs}\n                aria-current={isRouteSelected ? \"page\" : undefined}\n                onClick={handleLinkClick(item, index)}\n                {...options}\n            >\n                <div className={styles.linkLabel}>{children}</div>\n                {renderIndicator()}\n            </a>\n        );\n\n        const renderLinkWithSubmenu = () => {\n            const subMenuId = `navbar-submenu-${instanceId}-${item.id}`;\n\n            if (mobile) {\n                return (\n                    <>\n                        <a\n                            data-testid={testId}\n                            className={linkClassName}\n                            {...otherItemAttrs}\n                            aria-current={isRouteSelected ? \"page\" : undefined}\n                            aria-haspopup=\"menu\"\n                            aria-expanded={isExpanded}\n                            onClick={handleLinkClick(item, index)}\n                            {...options}\n                        >\n                            <div className={styles.linkLabel}>{children}</div>\n                            {renderIndicator()}\n                            {renderMobileChevron()}\n                        </a>\n\n                        {isMobileExpanded && renderMobileSubMenu(subMenu!)}\n                    </>\n                );\n            }\n\n            return (\n                <DesktopMenu\n                    position=\"bottom\"\n                    customOffset={0}\n                    menuContent={renderDesktopSubMenu(subMenu!, subMenuId)}\n                    triggerOnFocus\n                    isModal={false}\n                    onPopoverAppear={() => setOpenSubMenuIndex(index)}\n                    onPopoverDismiss={() => {\n                        setOpenSubMenuIndex((prev) =>\n                            prev === index ? null : prev\n                        );\n                    }}\n                >\n                    <button\n                        type=\"button\"\n                        tabIndex={0}\n                        data-testid={testId}\n                        className={clsx(linkClassName, styles.linkButton)}\n                        aria-haspopup=\"menu\"\n                        aria-expanded={isExpanded}\n                        {...options}\n                    >\n                        <div className={styles.linkLabel}>{children}</div>\n                        {renderIndicator()}\n                    </button>\n                </DesktopMenu>\n            );\n        };\n\n        return (\n            <li\n                key={index}\n                className={clsx(\n                    styles.linkItem,\n                    hideNavBranding && styles.linkItemHiddenBranding\n                )}\n            >\n                {hasSubMenu ? renderLinkWithSubmenu() : renderLink()}\n            </li>\n        );\n    };\n\n    const renderItems = () =>\n        items.map((item, index) => {\n            switch (item.itemType) {\n                case \"component\": {\n                    return <li key={index}>{item.children ?? null}</li>;\n                }\n                case \"link\":\n                default: {\n                    return renderLinkItem(item as NavItemLinkProps<T>, index);\n                }\n            }\n        });\n\n    if (items && items.length > 0) {\n        return mobile ? (\n            <ul ref={listRef} className={styles.mobileWrapper}>\n                {renderItems()}\n            </ul>\n        ) : (\n            <ul\n                ref={listRef}\n                className={clsx(\n                    styles.wrapper,\n                    hideNavBranding && styles.wrapperAlignLeft\n                )}\n            >\n                {renderItems()}\n            </ul>\n        );\n    }\n\n    return <></>;\n};\n"],"names":["NavbarItems","items","selectedId","mobile","hideNavBranding","hideLinkIndicator","onItemClick","selectedIndex","setSelectedIndex","useState","showSubMenu","setShowSubMenu","openSubMenuIndex","setOpenSubMenuIndex","listRef","useRef","instanceId","useId","useEffect","handleClickOutside","event","current","contains","target","document","addEventListener","removeEventListener","handleLinkClick","item","index","stopPropagation","_a","subMenu","length","nextExpanded","handleMobileSubLinkClick","renderDesktopSubMenu","subMenuId","_jsx","DesktopMenu","Content","id","children","Section","showDivider","map","subIndex","Link","href","renderMobileSubMenu","MobileMenu","renderLinkItem","options","otherItemAttrs","__rest","hasSubMenu","isRouteSelected","find","s","checkSelected","isMobileExpanded","isExpanded","selected","showIndicator","testId","renderIndicator","className","clsx","styles.linkIndicator","styles.linkIndicatorSelected","linkClassName","styles.link","weight","styles.linkWeightBold","styles.linkWeightSemibold","styles.linkWeightRegular","getLinkWeightClass","styles.linkSelected","styles.linkItem","styles.linkItemHiddenBranding","_jsxs","_Fragment","Object","assign","undefined","onClick","styles.linkLabel","styles.linkIconContainer","ClickableIcon","styles.expandCollapseButton","styles.expandCollapseButtonExpanded","focusHighlight","focusOutline","ChevronUpIcon","styles.chevronIcon","styles.chevronIconSelected","position","customOffset","menuContent","triggerOnFocus","isModal","onPopoverAppear","onPopoverDismiss","prev","type","tabIndex","styles.linkButton","renderLinkWithSubmenu","renderItems","itemType","ref","styles.mobileWrapper","styles.wrapper","styles.wrapperAlignLeft"],"mappings":"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"}

package/navbar/navbar-items.styles.d.ts

@@ -1,32 +1,19 @@
-import type { TypographyWeight } from "../typography";
-interface StyleProps {
-    $selected: boolean;
-}
-interface WrapperStyleProps {
-    $alignLeft: boolean | undefined;
-}
-interface ItemStyleProps {
-    $hiddenBranding: boolean | undefined;
-}
-export declare const Wrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, WrapperStyleProps>> & string;
-export declare const MobileWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, never>> & string;
-export declare const LinkItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, ItemStyleProps>> & string;
-export declare const Link: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, {
-    $selected: boolean;
-    weight: TypographyWeight;
-}>> & string;
-export declare const LinkButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
-    $selected: boolean;
-    weight: TypographyWeight;
-}>> & string;
-export declare const LinkLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const LinkIndicator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyleProps>> & string;
-export declare const LinkIconContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const ExpandCollapseButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("../shared/clickable-icon").ClickableIconProps & import("react").RefAttributes<HTMLButtonElement>, StyleProps>> & string & Omit<(props: import("../shared/clickable-icon").ClickableIconProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
-export declare const ChevronIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
-    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
-}, StyleProps>> & string & Omit<{
-    (props: import("react").SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-}, keyof import("react").Component<any, {}, any>>;
-export {};
+export declare const wrapper: import("@linaria/core").LinariaClassName;
+export declare const wrapperAlignLeft: import("@linaria/core").LinariaClassName;
+export declare const mobileWrapper: import("@linaria/core").LinariaClassName;
+export declare const linkItem: import("@linaria/core").LinariaClassName;
+export declare const linkItemHiddenBranding: import("@linaria/core").LinariaClassName;
+export declare const link: import("@linaria/core").LinariaClassName;
+export declare const linkSelected: import("@linaria/core").LinariaClassName;
+export declare const linkWeightRegular: import("@linaria/core").LinariaClassName;
+export declare const linkWeightSemibold: import("@linaria/core").LinariaClassName;
+export declare const linkWeightBold: import("@linaria/core").LinariaClassName;
+export declare const linkButton: import("@linaria/core").LinariaClassName;
+export declare const linkLabel: import("@linaria/core").LinariaClassName;
+export declare const linkIndicator: import("@linaria/core").LinariaClassName;
+export declare const linkIndicatorSelected: import("@linaria/core").LinariaClassName;
+export declare const linkIconContainer: import("@linaria/core").LinariaClassName;
+export declare const expandCollapseButton: import("@linaria/core").LinariaClassName;
+export declare const expandCollapseButtonExpanded: import("@linaria/core").LinariaClassName;
+export declare const chevronIcon: import("@linaria/core").LinariaClassName;
+export declare const chevronIconSelected: import("@linaria/core").LinariaClassName;

package/navbar/navbar-items.styles.js

@@ -1,115 +1,2 @@
-import{ChevronUpIcon as e}from"@lifesg/react-icons/chevron-up";import t,{css as i}from"styled-components";import{ClickableIcon as o}from"../shared/clickable-icon/clickable-icon.js";import{V3_MediaQuery as r,V3_Font as n,V3_Colour as l}from"../v3_theme/index.js";import{V3_ThemeNavbar as a}from"../v3_theme/components/theme-helper.js";const d=t.ul`
-    display: flex;
-    list-style: none;
-    position: relative;
-
-    ${e=>e.$alignLeft&&"margin-right: auto;"}
-
-    ${r.MaxWidth.lg} {
-        display: none;
-    }
-`,m=t.ul`
-    display: none;
-    list-style: none;
-
-    ${r.MaxWidth.lg} {
-        display: flex;
-        flex-direction: column;
-        overflow: hidden;
-    }
-`,s=t.li`
-    display: flex;
-    margin: 0 1rem;
-
-    &:first-child {
-        // negative margin to preserve touch target size for link
-        margin-left: ${e=>e.$hiddenBranding?"-0.5rem":"0"};
-    }
-
-    ${r.MaxWidth.lg} {
-        flex-direction: column;
-        padding: 0.125rem 0;
-        width: 100%;
-        margin-left: 0rem;
-    }
-`,c=i`
-    ${e=>n[`body-md-${e.weight}`]}
-
-    display: flex;
-    position: relative;
-    align-items: center;
-    text-align: center;
-    color: ${a["navbar-link-colour-text"]};
-    height: 100%;
-
-    &:active,
-    &:hover,
-    &:focus {
-        color: ${e=>e.$selected?a["navbar-link-colour-text-selected-hover"]:a["navbar-link-colour-text-hover"]};
-    }
-
-    ${r.MaxWidth.lg} {
-        width: 100%;
-        padding: 0.5rem 1rem;
-        text-align: left;
-        align-items: flex-start;
-    }
-`,h=t.a`
-    ${c}
-`,g=t.button`
-    ${c}
-    background: none;
-    border: 0;
-    padding: 0;
-    cursor: pointer;
-    text-align: left;
-    margin: 0;
-    box-shadow: none;
-    font: inherit;
-    color: inherit;
-`,p=t.div`
-    flex: 1;
-    margin-top: 0.25rem;
-
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 3;
-    white-space: pre-wrap;
-`,f=t.div`
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    height: 0.25rem;
-    background-color: ${l["border-selected"]};
-
-    &:hover {
-        ${e=>e.$selected&&l["border-selected-hover"]};
-    }
-
-    ${r.MaxWidth.lg} {
-        left: 0;
-        right: unset;
-        top: 0;
-        bottom: 0;
-        height: 100%;
-        width: 0.25rem;
-    }
-`,v=t.div`
-    padding-left: 0.5rem;
-    margin-right: -0.5rem;
-`,x=t(o)`
-    padding: 0.5rem;
-    transform: rotate(${e=>e.$selected?0:180}deg);
-    transition: transform 300ms ease-in-out;
-    margin: auto 0.25rem auto 0;
-`,$=t(e)`
-    height: 1.25rem;
-    width: 1.25rem;
-    color: ${l.icon};
-    &:hover {
-        ${e=>e.$selected?l["icon-selected-hover"]:l["icon-hover"]};
-    }
-`;export{$ as ChevronIcon,x as ExpandCollapseButton,h as Link,g as LinkButton,v as LinkIconContainer,f as LinkIndicator,s as LinkItem,p as LinkLabel,m as MobileWrapper,d as Wrapper};
+import"./navbar-items.styles_i9cunu.css";const l="w1ndf2sj",s="w177nfye",n="mw9gug8",c="l18t6f3m",e="lsn8o0d",o="l1o3p4yu",r="lkwvsmx",t="l1kp5n19",u="lqgrg2a",a="l1p7dxu8",f="l1xfqf3s",m="lsc0hr8",p="lnocj2s",w="l5qfat1",x="l1p9u80z",d="ej7h5do",g="e160mxwv",k="c1s8ur0k",v="c178e7hk";export{k as chevronIcon,v as chevronIconSelected,d as expandCollapseButton,g as expandCollapseButtonExpanded,o as link,f as linkButton,x as linkIconContainer,p as linkIndicator,w as linkIndicatorSelected,c as linkItem,e as linkItemHiddenBranding,m as linkLabel,r as linkSelected,a as linkWeightBold,t as linkWeightRegular,u as linkWeightSemibold,n as mobileWrapper,l as wrapper,s as wrapperAlignLeft};
 //# sourceMappingURL=navbar-items.styles.js.map

package/navbar/navbar-items.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"navbar-items.styles.js","sources":["../../src/navbar/navbar-items.styles.tsx"],"sourcesContent":["import { ChevronUpIcon } from \"@lifesg/react-icons/chevron-up\";\nimport styled, { css } from \"styled-components\";\n\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport type { TypographyWeight } from \"../typography\";\nimport { V3_Colour, V3_Font, V3_MediaQuery } from \"../v3_theme\";\nimport { V3_ThemeNavbar } from \"../v3_theme/components/theme-helper\";\n\n// =============================================================================\n// STYLE INTERFACE, transient props are denoted with $\n// See more https://styled-components.com/docs/api#transient-props\n// =============================================================================\ninterface StyleProps {\n    $selected: boolean;\n}\n\ninterface WrapperStyleProps {\n    $alignLeft: boolean | undefined;\n}\n\ninterface ItemStyleProps {\n    $hiddenBranding: boolean | undefined;\n}\n\n// =============================================================================\n// WRAPPER\n// =============================================================================\n\nexport const Wrapper = styled.ul<WrapperStyleProps>`\n    display: flex;\n    list-style: none;\n    position: relative;\n\n    ${(props) => props.$alignLeft && \"margin-right: auto;\"}\n\n    ${V3_MediaQuery.MaxWidth.lg} {\n        display: none;\n    }\n`;\n\nexport const MobileWrapper = styled.ul`\n    display: none;\n    list-style: none;\n\n    ${V3_MediaQuery.MaxWidth.lg} {\n        display: flex;\n        flex-direction: column;\n        overflow: hidden;\n    }\n`;\n\n// =============================================================================\n// LINK ITEMS\n// =============================================================================\nexport const LinkItem = styled.li<ItemStyleProps>`\n    display: flex;\n    margin: 0 1rem;\n\n    &:first-child {\n        // negative margin to preserve touch target size for link\n        margin-left: ${(props) => (props.$hiddenBranding ? \"-0.5rem\" : \"0\")};\n    }\n\n    ${V3_MediaQuery.MaxWidth.lg} {\n        flex-direction: column;\n        padding: 0.125rem 0;\n        width: 100%;\n        margin-left: 0rem;\n    }\n`;\n\nconst linkCss = css<{ $selected: boolean; weight: TypographyWeight }>`\n    ${(props) => V3_Font[`body-md-${props.weight}`]}\n\n    display: flex;\n    position: relative;\n    align-items: center;\n    text-align: center;\n    color: ${V3_ThemeNavbar[\"navbar-link-colour-text\"]};\n    height: 100%;\n\n    &:active,\n    &:hover,\n    &:focus {\n        color: ${(props) =>\n            props.$selected\n                ? V3_ThemeNavbar[\"navbar-link-colour-text-selected-hover\"]\n                : V3_ThemeNavbar[\"navbar-link-colour-text-hover\"]};\n    }\n\n    ${V3_MediaQuery.MaxWidth.lg} {\n        width: 100%;\n        padding: 0.5rem 1rem;\n        text-align: left;\n        align-items: flex-start;\n    }\n`;\nexport const Link = styled.a<{ $selected: boolean; weight: TypographyWeight }>`\n    ${linkCss}\n`;\n\nexport const LinkButton = styled.button<{\n    $selected: boolean;\n    weight: TypographyWeight;\n}>`\n    ${linkCss}\n    background: none;\n    border: 0;\n    padding: 0;\n    cursor: pointer;\n    text-align: left;\n    margin: 0;\n    box-shadow: none;\n    font: inherit;\n    color: inherit;\n`;\n\nexport const LinkLabel = styled.div`\n    flex: 1;\n    margin-top: 0.25rem;\n\n    overflow: hidden;\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: 3;\n    white-space: pre-wrap;\n`;\n\nexport const LinkIndicator = styled.div<StyleProps>`\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    height: 0.25rem;\n    background-color: ${V3_Colour[\"border-selected\"]};\n\n    &:hover {\n        ${(props) => props.$selected && V3_Colour[\"border-selected-hover\"]};\n    }\n\n    ${V3_MediaQuery.MaxWidth.lg} {\n        left: 0;\n        right: unset;\n        top: 0;\n        bottom: 0;\n        height: 100%;\n        width: 0.25rem;\n    }\n`;\n\nexport const LinkIconContainer = styled.div`\n    padding-left: 0.5rem;\n    margin-right: -0.5rem;\n`;\n\nexport const ExpandCollapseButton = styled(ClickableIcon)<StyleProps>`\n    padding: 0.5rem;\n    transform: rotate(${(props) => (props.$selected ? 0 : 180)}deg);\n    transition: transform 300ms ease-in-out;\n    margin: auto 0.25rem auto 0;\n`;\n\nexport const ChevronIcon = styled(ChevronUpIcon)<StyleProps>`\n    height: 1.25rem;\n    width: 1.25rem;\n    color: ${V3_Colour.icon};\n    &:hover {\n        ${(props) =>\n            props.$selected\n                ? V3_Colour[\"icon-selected-hover\"]\n                : V3_Colour[\"icon-hover\"]};\n    }\n`;\n"],"names":["Wrapper","styled","ul","props","$alignLeft","V3_MediaQuery","MaxWidth","lg","MobileWrapper","LinkItem","li","$hiddenBranding","linkCss","css","V3_Font","weight","V3_ThemeNavbar","$selected","Link","a","LinkButton","button","LinkLabel","div","LinkIndicator","V3_Colour","LinkIconContainer","ExpandCollapseButton","ClickableIcon","ChevronIcon","ChevronUpIcon","icon"],"mappings":"8UA4BO,MAAMA,EAAUC,EAAOC,EAAqB;;;;;MAK5CC,GAAUA,EAAMC,YAAc;;MAE/BC,EAAcC,SAASC;;;EAKhBC,EAAgBP,EAAOC,EAAE;;;;MAIhCG,EAAcC,SAASC;;;;;EAUhBE,EAAWR,EAAOS,EAAkB;;;;;;uBAMzBP,GAAWA,EAAMQ,gBAAkB,UAAY;;;MAGjEN,EAAcC,SAASC;;;;;;EAQvBK,EAAUC,CAAqD;MAC9DV,GAAUW,EAAQ,WAAWX,EAAMY;;;;;;aAM7BC,EAAe;;;;;;iBAMVb,GACNA,EAAMc,UACAD,EAAe,0CACfA,EAAe;;;MAG3BX,EAAcC,SAASC;;;;;;EAOhBW,EAAOjB,EAAOkB,CAAmD;MACxEP;EAGOQ,EAAanB,EAAOoB,MAG/B;MACIT;;;;;;;;;;EAYOU,EAAYrB,EAAOsB,GAAG;;;;;;;;;EAWtBC,EAAgBvB,EAAOsB,GAAe;;;;;;wBAM3BE,EAAU;;;UAGvBtB,GAAUA,EAAMc,WAAaQ,EAAU;;;MAG5CpB,EAAcC,SAASC;;;;;;;;EAUhBmB,EAAoBzB,EAAOsB,GAAG;;;EAK9BI,EAAuB1B,EAAO2B,EAA0B;;wBAE5CzB,GAAWA,EAAMc,UAAY,EAAI;;;EAK7CY,EAAc5B,EAAO6B,EAA0B;;;aAG/CL,EAAUM;;UAEZ5B,GACCA,EAAMc,UACAQ,EAAU,uBACVA,EAAU;;"}
+{"version":3,"file":"navbar-items.styles.js","sources":["../../src/navbar/navbar-items.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, ComponentToken, Font, MediaQuery } from \"../theme\";\n\n// =============================================================================\n// WRAPPER\n// =============================================================================\n\nexport const wrapper = css`\n    display: flex;\n    list-style: none;\n    position: relative;\n\n    ${MediaQuery.MaxWidth.lg} {\n        display: none;\n    }\n`;\n\nexport const wrapperAlignLeft = css`\n    margin-right: auto;\n`;\n\nexport const mobileWrapper = css`\n    display: none;\n    list-style: none;\n\n    ${MediaQuery.MaxWidth.lg} {\n        display: flex;\n        flex-direction: column;\n        overflow: hidden;\n    }\n`;\n\n// =============================================================================\n// LINK ITEMS\n// =============================================================================\nexport const linkItem = css`\n    display: flex;\n    margin: 0 1rem;\n    &:first-child {\n        margin-left: 0;\n    }\n\n    ${MediaQuery.MaxWidth.lg} {\n        flex-direction: column;\n        padding: 0.125rem 0;\n        width: 100%;\n        margin-left: 0rem;\n    }\n`;\n\nexport const linkItemHiddenBranding = css`\n    // negative margin to preserve touch target size for link\n    &:first-child {\n        margin-left: -0.5rem;\n    }\n\n    ${MediaQuery.MaxWidth.lg} {\n        &:first-child {\n            margin-left: 0rem;\n        }\n    }\n`;\n\nexport const link = css`\n    display: flex;\n    position: relative;\n    align-items: center;\n    text-align: center;\n    color: ${ComponentToken.Navbar[\"link-colour-text\"]};\n    height: 100%;\n\n    &:active,\n    &:hover,\n    &:focus {\n        color: ${ComponentToken.Navbar[\"link-colour-text-hover\"]};\n    }\n\n    ${MediaQuery.MaxWidth.lg} {\n        width: 100%;\n        padding: 0.5rem 1rem;\n        text-align: left;\n        align-items: flex-start;\n    }\n`;\n\nexport const linkSelected = css`\n    &:active,\n    &:hover,\n    &:focus {\n        color: ${ComponentToken.Navbar[\"link-colour-text-selected-hover\"]};\n    }\n`;\n\nexport const linkWeightRegular = css`\n    ${Font[\"body-md-regular\"]}\n`;\n\nexport const linkWeightSemibold = css`\n    ${Font[\"body-md-semibold\"]}\n`;\n\nexport const linkWeightBold = css`\n    ${Font[\"body-md-bold\"]}\n`;\n\nexport const linkButton = css`\n    background: none;\n    border: 0;\n    padding: 0;\n    cursor: pointer;\n    text-align: left;\n    margin: 0;\n    box-shadow: none;\n    font: inherit;\n    color: inherit;\n`;\n\nexport const linkLabel = css`\n    flex: 1;\n    margin-top: 0.25rem;\n\n    overflow: hidden;\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: 3;\n    white-space: pre-wrap;\n`;\n\nexport const linkIndicator = css`\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    height: 0.25rem;\n    background-color: ${Colour[\"border-selected\"]};\n\n    ${MediaQuery.MaxWidth.lg} {\n        left: 0;\n        right: unset;\n        top: 0;\n        bottom: 0;\n        height: 100%;\n        width: 0.25rem;\n    }\n`;\n\nexport const linkIndicatorSelected = css`\n    &:hover {\n        background-color: ${Colour[\"border-selected-hover\"]};\n    }\n`;\n\nexport const linkIconContainer = css`\n    padding-left: 0.5rem;\n    margin-right: -0.5rem;\n`;\n\nexport const expandCollapseButton = css`\n    padding: 0.5rem;\n    transform: rotate(180deg);\n    transition: transform 300ms ease-in-out;\n    margin: auto 0.25rem auto 0;\n`;\n\nexport const expandCollapseButtonExpanded = css`\n    transform: rotate(0deg);\n`;\n\nexport const chevronIcon = css`\n    height: 1.25rem;\n    width: 1.25rem;\n    color: ${Colour.icon};\n\n    &:hover {\n        color: ${Colour[\"icon-hover\"]};\n    }\n`;\n\nexport const chevronIconSelected = css`\n    &:hover {\n        color: ${Colour[\"icon-selected-hover\"]};\n    }\n`;\n"],"names":["wrapper","wrapperAlignLeft","mobileWrapper","linkItem","linkItemHiddenBranding","link","linkSelected","linkWeightRegular","linkWeightSemibold","linkWeightBold","linkButton","linkLabel","linkIndicator","linkIndicatorSelected","linkIconContainer","expandCollapseButton","expandCollapseButtonExpanded","chevronIcon","chevronIconSelected"],"mappings":"+DAQO,MAAMA,EAAO,WAUPC,EAAgB,WAIhBC,EAAa,UAcbC,EAAQ,WAeRC,EAAsB,UAatBC,EAAI,WAsBJC,EAAY,UAQZC,EAAiB,WAIjBC,EAAkB,UAIlBC,EAAc,WAIdC,EAAU,WAYVC,EAAS,UAWTC,EAAa,UAkBbC,EAAqB,UAMrBC,EAAiB,WAKjBC,EAAoB,UAOpBC,EAA4B,WAI5BC,EAAW,WAUXC,EAAmB"}

package/navbar/navbar-items.styles_i9cunu.css

@@ -0,0 +1,19 @@
+.w1ndf2sj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;list-style:none;position:relative;}:where(body.fds-breakpoint-lg-max) .w1ndf2sj{display:none;}
+.w177nfye{margin-right:auto;}
+.mw9gug8{display:none;list-style:none;}:where(body.fds-breakpoint-lg-max) .mw9gug8{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;overflow:hidden;}
+.l18t6f3m{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0 1rem;}.l18t6f3m:first-child{margin-left:0;}:where(body.fds-breakpoint-lg-max) .l18t6f3m{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;padding:0.125rem 0;width:100%;margin-left:0rem;}
+.lsn8o0d:first-child{margin-left:-0.5rem;}:where(body.fds-breakpoint-lg-max) .lsn8o0d:first-child{margin-left:0rem;}
+.l1o3p4yu{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;text-align:center;color:var(--fds-navbar-link-colour-text);height:100%;}.l1o3p4yu:active,.l1o3p4yu:hover,.l1o3p4yu:focus{color:var(--fds-navbar-link-colour-text-hover);}:where(body.fds-breakpoint-lg-max) .l1o3p4yu{width:100%;padding:0.5rem 1rem;text-align:left;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}
+.lkwvsmx:active,.lkwvsmx:hover,.lkwvsmx:focus{color:var(--fds-navbar-link-colour-text-selected-hover);}
+.l1kp5n19{font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);}
+.lqgrg2a{font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);}
+.l1p7dxu8{font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-bold);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);}
+.l1xfqf3s{background:none;border:0;padding:0;cursor:pointer;text-align:left;margin:0;box-shadow:none;font:inherit;color:inherit;}
+.lsc0hr8{-webkit-flex:1;-ms-flex:1;flex:1;margin-top:0.25rem;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;white-space:pre-wrap;}
+.lnocj2s{position:absolute;bottom:0;left:0;right:0;height:0.25rem;background-color:var(--fds-colour-border-selected);}:where(body.fds-breakpoint-lg-max) .lnocj2s{left:0;right:unset;top:0;bottom:0;height:100%;width:0.25rem;}
+.l5qfat1:hover{background-color:var(--fds-colour-border-selected-hover);}
+.l1p9u80z{padding-left:0.5rem;margin-right:-0.5rem;}
+.ej7h5do{padding:0.5rem;-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);-webkit-transition:-webkit-transform 300ms ease-in-out;transition:transform 300ms ease-in-out;margin:auto 0.25rem auto 0;}
+.e160mxwv{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}
+.c1s8ur0k{height:1.25rem;width:1.25rem;color:var(--fds-colour-icon);}.c1s8ur0k:hover{color:var(--fds-colour-icon-hover);}
+.c178e7hk:hover{color:var(--fds-colour-icon-selected-hover);}

package/navbar/navbar-logo-data.d.ts

@@ -1,3 +1,3 @@
-import type { V3_ResourceScheme } from "../v3_theme/types";
+import type { ThemeType } from "../theme/types";
 import type { NavbarResourcesProps } from "./types";
-export declare const getDefaultResourceLogo: (resourceScheme?: V3_ResourceScheme) => NavbarResourcesProps;
+export declare const getDefaultResourceLogo: (resourceScheme?: ThemeType) => NavbarResourcesProps;

package/navbar/navbar-logo-data.js

@@ -1,2 +1,2 @@
-const s={primary:{brandName:"LifeSG",logoSrc:"https://assets.life.gov.sg/lifesg/logo-lifesg.svg"}},e={primary:{brandName:"BookingSG",logoSrc:"https://www.booking.gov.sg/logo.svg"}},g={primary:{brandName:"CCube",logoSrc:"https://assets.life.gov.sg/ccube/logo-ccube.svg"}},o={primary:{brandName:"IMDA",logoSrc:"https://assets.life.gov.sg/react-design-system/img/logo/imda-logo.svg"}},r={primary:{brandName:"MyLegacy",logoSrc:"https://mylegacy.life.gov.sg/images/site-logo.png"}},a={primary:{brandName:"SPF",logoSrc:"https://assets.life.gov.sg/react-design-system/img/logo/spf-logo.png"}},t={primary:{brandName:"SupportGoWhere",logoSrc:"https://assets.life.gov.sg/react-design-system/img/logo/sgw-logo.png"}},i=i=>{switch(i){case"bookingsg":return e;case"mylegacy":return r;case"ccube":return g;case"spf":return a;case"supportgowhere":return t;case"imda":return o;default:return s}};export{i as getDefaultResourceLogo};
+const s={primary:{brandName:"LifeSG",logoSrc:"https://assets.life.gov.sg/lifesg/logo-lifesg.svg"}},e={primary:{brandName:"BookingSG",logoSrc:"https://www.booking.gov.sg/logo.svg"}},g={primary:{brandName:"CCube",logoSrc:"https://assets.life.gov.sg/ccube/logo-ccube.svg"}},o={primary:{brandName:"IMDA",logoSrc:"https://assets.life.gov.sg/react-design-system/img/logo/imda-logo.svg"}},r={primary:{brandName:"MyLegacy",logoSrc:"https://mylegacy.life.gov.sg/images/site-logo.png"}},a={primary:{brandName:"SPF",logoSrc:"https://assets.life.gov.sg/react-design-system/img/logo/spf-logo.png"}},t={primary:{brandName:"SupportGoWhere",logoSrc:"https://assets.life.gov.sg/react-design-system/img/logo/sgw-logo.png"}},i=i=>{switch(i){case"bookingsg":return e;case"mylegacy":return r;case"ccube":return g;case"spf":return a;case"supportgowhere":case"sgw-digital-lobby":return t;case"imda":return o;default:return s}};export{i as getDefaultResourceLogo};
 //# sourceMappingURL=navbar-logo-data.js.map

package/navbar/navbar-logo-data.js.map

@@ -1 +1 @@
-{"version":3,"file":"navbar-logo-data.js","sources":["../../src/navbar/navbar-logo-data.ts"],"sourcesContent":["import type { V3_ResourceScheme } from \"../v3_theme/types\";\nimport type { NavbarResourcesProps } from \"./types\";\n\nconst DEFAULT_RESOURCES_LOGO: NavbarResourcesProps = {\n    primary: {\n        brandName: \"LifeSG\",\n        logoSrc: \"https://assets.life.gov.sg/lifesg/logo-lifesg.svg\",\n    },\n};\n\nconst BOOKINGSG_RESOURCES_LOGO: NavbarResourcesProps = {\n    primary: {\n        brandName: \"BookingSG\",\n        logoSrc: \"https://www.booking.gov.sg/logo.svg\",\n    },\n};\n\nconst CCUBE_RESOURCES_LOGO: NavbarResourcesProps = {\n    primary: {\n        brandName: \"CCube\",\n        logoSrc: \"https://assets.life.gov.sg/ccube/logo-ccube.svg\",\n    },\n};\n\nconst IMDA_RESOURCE_LOGO: NavbarResourcesProps = {\n    primary: {\n        brandName: \"IMDA\",\n        logoSrc:\n            \"https://assets.life.gov.sg/react-design-system/img/logo/imda-logo.svg\",\n    },\n};\n\nconst MYLEGACY_RESOURCES_LOGO: NavbarResourcesProps = {\n    primary: {\n        brandName: \"MyLegacy\",\n        logoSrc: \"https://mylegacy.life.gov.sg/images/site-logo.png\",\n    },\n};\n\nconst SPF_RESOURCE_LOGO: NavbarResourcesProps = {\n    primary: {\n        brandName: \"SPF\",\n        logoSrc:\n            \"https://assets.life.gov.sg/react-design-system/img/logo/spf-logo.png\",\n    },\n};\n\nconst SUPPORTGOWHERE_RESOURCE_LOGO: NavbarResourcesProps = {\n    primary: {\n        brandName: \"SupportGoWhere\",\n        logoSrc:\n            \"https://assets.life.gov.sg/react-design-system/img/logo/sgw-logo.png\",\n    },\n};\n\nexport const getDefaultResourceLogo = (resourceScheme?: V3_ResourceScheme) => {\n    switch (resourceScheme) {\n        case \"bookingsg\":\n            return BOOKINGSG_RESOURCES_LOGO;\n        case \"mylegacy\":\n            return MYLEGACY_RESOURCES_LOGO;\n        case \"ccube\":\n            return CCUBE_RESOURCES_LOGO;\n        case \"spf\":\n            return SPF_RESOURCE_LOGO;\n        case \"supportgowhere\":\n            return SUPPORTGOWHERE_RESOURCE_LOGO;\n        case \"imda\":\n            return IMDA_RESOURCE_LOGO;\n        default:\n            return DEFAULT_RESOURCES_LOGO;\n    }\n};\n"],"names":["DEFAULT_RESOURCES_LOGO","primary","brandName","logoSrc","BOOKINGSG_RESOURCES_LOGO","CCUBE_RESOURCES_LOGO","IMDA_RESOURCE_LOGO","MYLEGACY_RESOURCES_LOGO","SPF_RESOURCE_LOGO","SUPPORTGOWHERE_RESOURCE_LOGO","getDefaultResourceLogo","resourceScheme"],"mappings":"AAGA,MAAMA,EAA+C,CACjDC,QAAS,CACLC,UAAW,SACXC,QAAS,sDAIXC,EAAiD,CACnDH,QAAS,CACLC,UAAW,YACXC,QAAS,wCAIXE,EAA6C,CAC/CJ,QAAS,CACLC,UAAW,QACXC,QAAS,oDAIXG,EAA2C,CAC7CL,QAAS,CACLC,UAAW,OACXC,QACI,0EAINI,EAAgD,CAClDN,QAAS,CACLC,UAAW,WACXC,QAAS,sDAIXK,EAA0C,CAC5CP,QAAS,CACLC,UAAW,MACXC,QACI,yEAINM,EAAqD,CACvDR,QAAS,CACLC,UAAW,iBACXC,QACI,yEAICO,EAA0BC,IACnC,OAAQA,GACJ,IAAK,YACD,OAAOP,EACX,IAAK,WACD,OAAOG,EACX,IAAK,QACD,OAAOF,EACX,IAAK,MACD,OAAOG,EACX,IAAK,iBACD,OAAOC,EACX,IAAK,OACD,OAAOH,EACX,QACI,OAAON"}
+{"version":3,"file":"navbar-logo-data.js","sources":["../../src/navbar/navbar-logo-data.ts"],"sourcesContent":["import type { ThemeType } from \"../theme/types\";\nimport type { NavbarResourcesProps } from \"./types\";\n\nconst DEFAULT_RESOURCES_LOGO: NavbarResourcesProps = {\n    primary: {\n        brandName: \"LifeSG\",\n        logoSrc: \"https://assets.life.gov.sg/lifesg/logo-lifesg.svg\",\n    },\n};\n\nconst BOOKINGSG_RESOURCES_LOGO: NavbarResourcesProps = {\n    primary: {\n        brandName: \"BookingSG\",\n        logoSrc: \"https://www.booking.gov.sg/logo.svg\",\n    },\n};\n\nconst CCUBE_RESOURCES_LOGO: NavbarResourcesProps = {\n    primary: {\n        brandName: \"CCube\",\n        logoSrc: \"https://assets.life.gov.sg/ccube/logo-ccube.svg\",\n    },\n};\n\nconst IMDA_RESOURCE_LOGO: NavbarResourcesProps = {\n    primary: {\n        brandName: \"IMDA\",\n        logoSrc:\n            \"https://assets.life.gov.sg/react-design-system/img/logo/imda-logo.svg\",\n    },\n};\n\nconst MYLEGACY_RESOURCES_LOGO: NavbarResourcesProps = {\n    primary: {\n        brandName: \"MyLegacy\",\n        logoSrc: \"https://mylegacy.life.gov.sg/images/site-logo.png\",\n    },\n};\n\nconst SPF_RESOURCE_LOGO: NavbarResourcesProps = {\n    primary: {\n        brandName: \"SPF\",\n        logoSrc:\n            \"https://assets.life.gov.sg/react-design-system/img/logo/spf-logo.png\",\n    },\n};\n\nconst SUPPORTGOWHERE_RESOURCE_LOGO: NavbarResourcesProps = {\n    primary: {\n        brandName: \"SupportGoWhere\",\n        logoSrc:\n            \"https://assets.life.gov.sg/react-design-system/img/logo/sgw-logo.png\",\n    },\n};\n\nexport const getDefaultResourceLogo = (resourceScheme?: ThemeType) => {\n    switch (resourceScheme) {\n        case \"bookingsg\":\n            return BOOKINGSG_RESOURCES_LOGO;\n        case \"mylegacy\":\n            return MYLEGACY_RESOURCES_LOGO;\n        case \"ccube\":\n            return CCUBE_RESOURCES_LOGO;\n        case \"spf\":\n            return SPF_RESOURCE_LOGO;\n        case \"supportgowhere\":\n        case \"sgw-digital-lobby\":\n            return SUPPORTGOWHERE_RESOURCE_LOGO;\n        case \"imda\":\n            return IMDA_RESOURCE_LOGO;\n        default:\n            return DEFAULT_RESOURCES_LOGO;\n    }\n};\n"],"names":["DEFAULT_RESOURCES_LOGO","primary","brandName","logoSrc","BOOKINGSG_RESOURCES_LOGO","CCUBE_RESOURCES_LOGO","IMDA_RESOURCE_LOGO","MYLEGACY_RESOURCES_LOGO","SPF_RESOURCE_LOGO","SUPPORTGOWHERE_RESOURCE_LOGO","getDefaultResourceLogo","resourceScheme"],"mappings":"AAGA,MAAMA,EAA+C,CACjDC,QAAS,CACLC,UAAW,SACXC,QAAS,sDAIXC,EAAiD,CACnDH,QAAS,CACLC,UAAW,YACXC,QAAS,wCAIXE,EAA6C,CAC/CJ,QAAS,CACLC,UAAW,QACXC,QAAS,oDAIXG,EAA2C,CAC7CL,QAAS,CACLC,UAAW,OACXC,QACI,0EAINI,EAAgD,CAClDN,QAAS,CACLC,UAAW,WACXC,QAAS,sDAIXK,EAA0C,CAC5CP,QAAS,CACLC,UAAW,MACXC,QACI,yEAINM,EAAqD,CACvDR,QAAS,CACLC,UAAW,iBACXC,QACI,yEAICO,EAA0BC,IACnC,OAAQA,GACJ,IAAK,YACD,OAAOP,EACX,IAAK,WACD,OAAOG,EACX,IAAK,QACD,OAAOF,EACX,IAAK,MACD,OAAOG,EACX,IAAK,iBACL,IAAK,oBACD,OAAOC,EACX,IAAK,OACD,OAAOH,EACX,QACI,OAAON"}

package/navbar/navbar.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as i,jsx as n,Fragment as r}from"react/jsx-runtime";import{forwardRef as t,useState as a,useRef as o,useContext as s,useImperativeHandle as d,useEffect as l}from"react";import{ThemeContext as c}from"styled-components";import{Layout as m}from"../layout/index.js";import{Masthead as u}from"../masthead/masthead.js";import{Overlay as p}from"../overlay/overlay.js";import{V3_Breakpoint as h}from"../v3_theme/index.js";import{Brand as b}from"./brand.js";import{Drawer as v}from"./drawer.js";import{Wrapper as k,Nav as f,NavElementsContainer as C,NavBrandContainer as y,NavSeparator as w,MobileMenuButton as B,MobileMenuIcon as g}from"./navbar.styles.js";import{NavbarActionButtons as j}from"./navbar-action-buttons.js";import{NavbarHelper as I}from"./navbar-helper.js";import{NavbarItems as x}from"./navbar-items.js";import{getDefaultResourceLogo as L}from"./navbar-logo-data.js";const N=t(((t,N)=>{var{items:_,className:E,id:D,selectedId:O,compress:$=!1,fixed:A=!0,resources:M,hideNavElements:z=!1,hideNavBranding:H=!1,hideLinkIndicator:R=!1,drawerDismissalExclusions:S=[],actionButtons:T,onItemClick:W,onActionButtonClick:q,onBrandClick:F,masthead:G=!0,layout:J="default",headerLabel:K="Main navigation menu",drawerLabel:P}=t,Q=e(t,["items","className","id","selectedId","compress","fixed","resources","hideNavElements","hideNavBranding","hideLinkIndicator","drawerDismissalExclusions","actionButtons","onItemClick","onActionButtonClick","onBrandClick","masthead","layout","headerLabel","drawerLabel"]);const[U,V]=a(!1),[X,Y]=a(!1),Z=o(null),ee="stretch"===J,ie=o(null),ne=s(c),re=L(null==ne?void 0:ne.resourceScheme),te=h["lg-max"]({theme:ne}),ae=(null==M?void 0:M.primary)||re.primary,oe=null==M?void 0:M.secondary;d(N,(()=>Object.assign(ie.current,{dismissDrawer:()=>{se()}})),[U]),l((()=>(le(),window.addEventListener("resize",le),()=>{window.removeEventListener("resize",le)})),[]);const se=()=>{V(!1),setTimeout((()=>{Y(!1)}),550)},de=e=>U&&-1===S.indexOf(e),le=()=>{window.innerWidth<=te&&U&&se()},ce=(e,i)=>{F&&F(i),de("brand-click")&&se()},me=(e,i)=>{I.isNavItemCommon(i)&&i.onClick?i.onClick(e):W&&(e.preventDefault(),W(i)),I.isNavItemLink(i)&&!i.subMenu&&de("item-click")&&se()},ue=(e,i)=>{var n;"button"!==i.type&&"download"!==i.type||!(null===(n=i.args)||void 0===n?void 0:n.onClick)?q&&(e.preventDefault(),q(i)):i.args.onClick(e),de("item-click")&&se()},pe=()=>{V(!0),Y(!0)},he=()=>{de("close-button-click")&&se()},be=()=>{const e=_.mobile||_.desktop;return e&&e.length>0||T&&(e=>{const i=e.mobile||e.desktop;return!!i&&i.length&&i.some((e=>!e.uncollapsible))})(T)?n(B,{ref:Z,"aria-label":U?"Close nav menu":"Open nav menu","aria-expanded":U,"data-testid":"button__mobile-menu",onClick:pe,focusHighlight:!1,children:n(g,{})}):null};return i(k,{ref:ie,$fixed:A,className:E,id:D||"navbar-wrapper","data-testid":Q["data-testid"]||"navbar-wrapper",children:[G&&n(u,{stretch:ee}),i(m.Content,{stretch:ee,children:[i(f,{$compress:$,"aria-label":K,children:[!H&&i(y,{$compress:$,"data-id":"brand-container",children:[ae&&n(b,{resources:ae,onClick:ce,"data-id":"brand-primary","data-testid":"main__brand",type:"primary"}),oe&&i(r,{children:[n(w,{$compress:$}),n(b,{resources:oe,onClick:ce,"data-id":"brand-secondary","data-testid":"main__brand-secondary",type:"secondary"})]})]}),!z&&i(C,{$hideNavBranding:H,children:[n(x,{items:_.desktop,onItemClick:me,selectedId:O,hideNavBranding:H,hideLinkIndicator:R}),n(j,{actionButtons:T,onActionButtonClick:ue}),be()]})]}),!z&&n(p,{show:X,enableOverlayClick:!0,onOverlayClick:he,children:i(v,{show:U,resources:{primary:ae,secondary:oe},onClose:he,onBrandClick:ce,actionButtons:T,hideNavBranding:H,mobileMenuRef:Z,drawerLabel:P,children:[n(x,{items:_.mobile||_.desktop,onItemClick:me,selectedId:O,mobile:!0,hideLinkIndicator:R}),n(j,{actionButtons:T,onActionButtonClick:ue,mobile:!0})]})})]})]})}));export{N as Navbar};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as i,jsx as t,Fragment as r}from"react/jsx-runtime";import{MenuIcon as o}from"@lifesg/react-icons/menu";import a from"clsx";import{forwardRef as n,useState as s,useRef as l,useContext as d,useImperativeHandle as m,useEffect as c}from"react";import{Layout as p}from"../layout/index.js";import{Masthead as u}from"../masthead/masthead.js";import{Overlay as h}from"../overlay/overlay.js";import{ClickableIcon as v}from"../shared/clickable-icon/clickable-icon.js";import"../theme/theme-provider/index.js";import{parsePxOrRemValue as k}from"../theme/utils/css-variable.js";import{ThemeContext as b}from"../theme/theme-provider/context.js";import"../theme/tokens/border.js";import{Breakpoint as f}from"../theme/tokens/breakpoint.js";import"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{useDesignToken as j}from"../theme/utils/use-design-token.js";import"../theme/utils/use-media-query.js";import{Brand as y}from"./brand.js";import{Drawer as C}from"./drawer.js";import{wrapper as g,wrapperFixed as w,wrapperRelative as N,wrapperDark as B,wrapperLight as x,navElementsContainer as I,navElementsContainerWithBranding as L,nav as _,navCompressed as E,navDark as D,navSeparator as O,navSeparatorCompressed as A,navSeparatorFull as M,navSeparatorResponsive as q,navBrandContainer as z,navBrandContainerCompressed as H,navBrandContainerFull as R,navBrandContainerResponsive as T,mobileMenuButton as W,mobileMenuIcon as F}from"./navbar.styles.js";import{NavbarActionButtons as G}from"./navbar-action-buttons.js";import{NavbarHelper as J}from"./navbar-helper.js";import{NavbarItems as K}from"./navbar-items.js";import{getDefaultResourceLogo as P}from"./navbar-logo-data.js";const Q=n(((n,Q)=>{var{items:S,className:U,id:V,selectedId:X,compress:Y=!1,fixed:Z=!0,resources:$,hideNavElements:ee=!1,hideNavBranding:ie=!1,hideLinkIndicator:te=!1,drawerDismissalExclusions:re=[],actionButtons:oe,onItemClick:ae,onActionButtonClick:ne,onBrandClick:se,masthead:le=!0,layout:de="default",headerLabel:me="Main navigation menu",drawerLabel:ce}=n,pe=e(n,["items","className","id","selectedId","compress","fixed","resources","hideNavElements","hideNavBranding","hideLinkIndicator","drawerDismissalExclusions","actionButtons","onItemClick","onActionButtonClick","onBrandClick","masthead","layout","headerLabel","drawerLabel"]);const[ue,he]=s(!1),[ve,ke]=s(!1),be=l(null),fe="stretch"===de,je=l(null),ye=d(b),Ce=P(null==ye?void 0:ye.theme),ge=j(f["lg-max"]),we=k(ge||"1200px"),Ne=(null==$?void 0:$.primary)||Ce.primary,Be=null==$?void 0:$.secondary;m(Q,(()=>Object.assign(je.current,{dismissDrawer:()=>{xe()}})),[ue]),c((()=>(Le(),window.addEventListener("resize",Le),()=>{window.removeEventListener("resize",Le)})),[]);const xe=()=>{he(!1),setTimeout((()=>{ke(!1)}),550)},Ie=e=>ue&&-1===re.indexOf(e),Le=()=>{window.innerWidth<=we&&ue&&xe()},_e=(e,i)=>{se&&se(i),Ie("brand-click")&&xe()},Ee=(e,i)=>{J.isNavItemCommon(i)&&i.onClick?i.onClick(e):ae&&(e.preventDefault(),ae(i)),J.isNavItemLink(i)&&!i.subMenu&&Ie("item-click")&&xe()},De=(e,i)=>{var t;"button"!==i.type&&"download"!==i.type||!(null===(t=i.args)||void 0===t?void 0:t.onClick)?ne&&(e.preventDefault(),ne(i)):i.args.onClick(e),Ie("item-click")&&xe()},Oe=()=>{he(!0),ke(!0)},Ae=()=>{Ie("close-button-click")&&xe()},Me=()=>{const e=S.mobile||S.desktop;return e&&e.length>0||oe&&(e=>{const i=e.mobile||e.desktop;return!!i&&i.length&&i.some((e=>!e.uncollapsible))})(oe)?t(v,{ref:be,className:W,"aria-label":ue?"Close nav menu":"Open nav menu","aria-expanded":ue,"data-testid":"button__mobile-menu",onClick:Oe,focusHighlight:!1,children:t(o,{className:F})}):null};return i("div",{ref:je,className:a(g,Z?w:N,"dark"===(null==ye?void 0:ye.mode)?B:x,U),id:V||"navbar-wrapper","data-testid":pe["data-testid"]||"navbar-wrapper",children:[le&&t(u,{stretch:fe}),i(p.Content,{stretch:fe,children:[i("nav",{className:a(_,Y&&E,"dark"===(null==ye?void 0:ye.mode)&&D),"aria-label":me,children:[!ie&&i("div",{className:a(z,Y?H:R,T),"data-id":"brand-container",children:[Ne&&t(y,{resources:Ne,onClick:_e,"data-id":"brand-primary","data-testid":"main__brand",type:"primary"}),Be&&i(r,{children:[t("div",{className:a(O,Y?A:M,q)}),t(y,{resources:Be,onClick:_e,"data-id":"brand-secondary","data-testid":"main__brand-secondary",type:"secondary"})]})]}),!ee&&i("div",{className:a(I,!ie&&L),children:[t(K,{items:S.desktop,onItemClick:Ee,selectedId:X,hideNavBranding:ie,hideLinkIndicator:te}),t(G,{actionButtons:oe,onActionButtonClick:De}),Me()]})]}),!ee&&t(h,{show:ve,enableOverlayClick:!0,onOverlayClick:Ae,children:i(C,{show:ue,resources:{primary:Ne,secondary:Be},onClose:Ae,onBrandClick:_e,actionButtons:oe,hideNavBranding:ie,mobileMenuRef:be,drawerLabel:ce,children:[t(K,{items:S.mobile||S.desktop,onItemClick:Ee,selectedId:X,mobile:!0,hideLinkIndicator:te}),t(G,{actionButtons:oe,onActionButtonClick:De,mobile:!0})]})})]})]})}));export{Q as Navbar};
 //# sourceMappingURL=navbar.js.map

package/navbar/navbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"navbar.js","sources":["../../src/navbar/navbar.tsx"],"sourcesContent":["import type React from \"react\";\nimport {\n    forwardRef,\n    useContext,\n    useEffect,\n    useImperativeHandle,\n    useRef,\n    useState,\n} from \"react\";\nimport { ThemeContext } from \"styled-components\";\n\nimport { Layout } from \"../layout\";\nimport { Masthead } from \"../masthead/masthead\";\nimport { Overlay } from \"../overlay/overlay\";\nimport { V3_Breakpoint } from \"../v3_theme\";\nimport { Brand } from \"./brand\";\nimport { Drawer } from \"./drawer\";\nimport {\n    MobileMenuButton,\n    MobileMenuIcon,\n    Nav,\n    NavBrandContainer,\n    NavElementsContainer,\n    NavSeparator,\n    Wrapper,\n} from \"./navbar.styles\";\nimport { NavbarActionButtons } from \"./navbar-action-buttons\";\nimport { NavbarHelper } from \"./navbar-helper\";\nimport { NavbarItems } from \"./navbar-items\";\nimport { getDefaultResourceLogo } from \"./navbar-logo-data\";\nimport type {\n    BrandType,\n    DrawerDismissalMethod,\n    NavbarActionButtonsProps,\n    NavbarButtonProps,\n    NavbarDrawerApi,\n    NavbarDrawerHandle,\n    NavbarProps,\n    NavItemCommonProps,\n    NavItemProps,\n} from \"./types\";\n\nconst Component = <T,>(\n    {\n        items,\n        className,\n        id,\n        selectedId,\n        compress = false,\n        fixed = true,\n        resources,\n        hideNavElements = false,\n        hideNavBranding = false,\n        hideLinkIndicator = false,\n        drawerDismissalExclusions: blockDrawerDismissalMethods = [],\n        actionButtons,\n        onItemClick,\n        onActionButtonClick,\n        onBrandClick,\n        masthead = true,\n        layout = \"default\",\n        headerLabel = \"Main navigation menu\",\n        drawerLabel,\n        ...otherProps\n    }: NavbarProps<T>,\n    ref: React.Ref<NavbarDrawerHandle>\n) => {\n    // =============================================================================\n    // CONST, STATE, REFS\n    // =============================================================================\n    const [showDrawer, setShowDrawer] = useState<boolean>(false);\n    const [showOverlay, setShowOverlay] = useState<boolean>(false);\n    const mobileMenuRef = useRef<HTMLButtonElement>(null);\n    const isStretch = layout === \"stretch\";\n    const elementRef = useRef<HTMLDivElement>(null);\n    const theme = useContext(ThemeContext);\n    const defaultResource = getDefaultResourceLogo(theme?.resourceScheme);\n    const tabletWidth = V3_Breakpoint[\"lg-max\"]({ theme });\n\n    const primary = resources?.primary || defaultResource.primary;\n    const secondary = resources?.secondary;\n\n    useImperativeHandle(\n        ref,\n        () =>\n            Object.assign<HTMLDivElement, NavbarDrawerApi>(\n                elementRef.current!,\n                {\n                    dismissDrawer: () => {\n                        dismissDrawer();\n                    },\n                }\n            ),\n        [showDrawer]\n    );\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        handleResize();\n        window.addEventListener(\"resize\", handleResize);\n\n        return () => {\n            window.removeEventListener(\"resize\", handleResize);\n        };\n    }, []);\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const dismissDrawer = () => {\n        setShowDrawer(false);\n        setTimeout(() => {\n            setShowOverlay(false);\n        }, 550); // For drawer animation to complete + buffer\n    };\n\n    const shouldDismissDrawer = (dismissalMethod: DrawerDismissalMethod) => {\n        return (\n            showDrawer &&\n            blockDrawerDismissalMethods.indexOf(dismissalMethod) === -1\n        );\n    };\n\n    const hasCollapsibleActionButtons = (\n        actionButtons: NavbarActionButtonsProps\n    ) => {\n        const drawerActionButtons =\n            actionButtons.mobile || actionButtons.desktop;\n        if (drawerActionButtons) {\n            return (\n                drawerActionButtons.length &&\n                drawerActionButtons.some(\n                    (actionButton) => !actionButton.uncollapsible\n                )\n            );\n        }\n\n        return false;\n    };\n\n    // =============================================================================\n    // EVENT HANDLER\n    // =============================================================================\n    const handleResize = () => {\n        if (window.innerWidth <= tabletWidth && showDrawer) {\n            dismissDrawer();\n        }\n    };\n\n    const handleBrandClick = (\n        event: React.MouseEvent<HTMLAnchorElement>,\n        type: BrandType\n    ) => {\n        if (onBrandClick) {\n            onBrandClick(type);\n        }\n\n        if (shouldDismissDrawer(\"brand-click\")) {\n            dismissDrawer();\n        }\n    };\n\n    const handleNavItemClick = <K extends T>(\n        event: React.MouseEvent<HTMLAnchorElement>,\n        item: NavItemProps<K> | NavItemCommonProps<K>\n    ) => {\n        if (NavbarHelper.isNavItemCommon(item) && item.onClick) {\n            item.onClick(event);\n        } else if (onItemClick) {\n            event.preventDefault();\n            onItemClick(item);\n        }\n\n        if (\n            NavbarHelper.isNavItemLink(item) &&\n            !item.subMenu &&\n            shouldDismissDrawer(\"item-click\")\n        ) {\n            dismissDrawer();\n        }\n    };\n\n    const handleActionButtonClick = (\n        event: React.MouseEvent<HTMLButtonElement> | React.MouseEvent<Element>,\n        actionButton: NavbarButtonProps\n    ) => {\n        if (\n            (actionButton.type === \"button\" ||\n                actionButton.type === \"download\") &&\n            actionButton.args?.onClick\n        ) {\n            actionButton.args.onClick(\n                event as React.MouseEvent<HTMLButtonElement>\n            );\n        } else if (onActionButtonClick) {\n            event.preventDefault();\n            onActionButtonClick(actionButton);\n        }\n\n        if (shouldDismissDrawer(\"item-click\")) {\n            dismissDrawer();\n        }\n    };\n\n    const handleMobileMenuButtonClick = () => {\n        setShowDrawer(true);\n        setShowOverlay(true);\n    };\n\n    const handleDrawerClose = () => {\n        if (shouldDismissDrawer(\"close-button-click\")) {\n            dismissDrawer();\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n\n    const renderDrawer = () => (\n        <Overlay\n            show={showOverlay}\n            enableOverlayClick\n            onOverlayClick={handleDrawerClose}\n        >\n            <Drawer\n                show={showDrawer}\n                resources={{ primary, secondary }}\n                onClose={handleDrawerClose}\n                onBrandClick={handleBrandClick}\n                actionButtons={actionButtons}\n                hideNavBranding={hideNavBranding}\n                mobileMenuRef={mobileMenuRef}\n                drawerLabel={drawerLabel}\n            >\n                <NavbarItems\n                    items={items.mobile || items.desktop}\n                    onItemClick={handleNavItemClick}\n                    selectedId={selectedId}\n                    mobile\n                    hideLinkIndicator={hideLinkIndicator}\n                />\n                <NavbarActionButtons\n                    actionButtons={actionButtons}\n                    onActionButtonClick={handleActionButtonClick}\n                    mobile\n                />\n            </Drawer>\n        </Overlay>\n    );\n\n    const renderBrand = () => (\n        <NavBrandContainer $compress={compress} data-id=\"brand-container\">\n            {primary && (\n                <Brand\n                    resources={primary}\n                    onClick={handleBrandClick}\n                    data-id=\"brand-primary\"\n                    data-testid=\"main__brand\"\n                    type=\"primary\"\n                />\n            )}\n            {secondary && (\n                <>\n                    <NavSeparator $compress={compress} />\n                    <Brand\n                        resources={secondary}\n                        onClick={handleBrandClick}\n                        data-id=\"brand-secondary\"\n                        data-testid=\"main__brand-secondary\"\n                        type=\"secondary\"\n                    />\n                </>\n            )}\n        </NavBrandContainer>\n    );\n\n    const renderMobileMenuButton = () => {\n        const drawerItems = items.mobile || items.desktop;\n        if (\n            (drawerItems && drawerItems.length > 0) ||\n            (actionButtons && hasCollapsibleActionButtons(actionButtons))\n        ) {\n            return (\n                <MobileMenuButton\n                    ref={mobileMenuRef}\n                    aria-label={showDrawer ? \"Close nav menu\" : \"Open nav menu\"}\n                    aria-expanded={showDrawer}\n                    data-testid=\"button__mobile-menu\"\n                    onClick={handleMobileMenuButtonClick}\n                    focusHighlight={false}\n                >\n                    <MobileMenuIcon />\n                </MobileMenuButton>\n            );\n        }\n\n        return null;\n    };\n\n    const renderNavbar = () => {\n        return (\n            <Layout.Content stretch={isStretch}>\n                <Nav $compress={compress} aria-label={headerLabel}>\n                    {!hideNavBranding && renderBrand()}\n                    {!hideNavElements && (\n                        <NavElementsContainer\n                            $hideNavBranding={hideNavBranding}\n                        >\n                            <NavbarItems\n                                items={items.desktop}\n                                onItemClick={handleNavItemClick}\n                                selectedId={selectedId}\n                                hideNavBranding={hideNavBranding}\n                                hideLinkIndicator={hideLinkIndicator}\n                            />\n                            <NavbarActionButtons\n                                actionButtons={actionButtons}\n                                onActionButtonClick={handleActionButtonClick}\n                            />\n                            {renderMobileMenuButton()}\n                        </NavElementsContainer>\n                    )}\n                </Nav>\n\n                {!hideNavElements && renderDrawer()}\n            </Layout.Content>\n        );\n    };\n\n    return (\n        <Wrapper\n            ref={elementRef}\n            $fixed={fixed}\n            className={className}\n            id={id || \"navbar-wrapper\"}\n            data-testid={otherProps[\"data-testid\"] || \"navbar-wrapper\"}\n        >\n            {masthead && <Masthead stretch={isStretch} />}\n            {renderNavbar()}\n        </Wrapper>\n    );\n};\n\nexport const Navbar = forwardRef(Component);\n"],"names":["Navbar","forwardRef","_a","ref","items","className","id","selectedId","compress","fixed","resources","hideNavElements","hideNavBranding","hideLinkIndicator","drawerDismissalExclusions","blockDrawerDismissalMethods","actionButtons","onItemClick","onActionButtonClick","onBrandClick","masthead","layout","headerLabel","drawerLabel","otherProps","__rest","showDrawer","setShowDrawer","useState","showOverlay","setShowOverlay","mobileMenuRef","useRef","isStretch","elementRef","theme","useContext","ThemeContext","defaultResource","getDefaultResourceLogo","resourceScheme","tabletWidth","V3_Breakpoint","primary","secondary","useImperativeHandle","Object","assign","current","dismissDrawer","useEffect","handleResize","window","addEventListener","removeEventListener","setTimeout","shouldDismissDrawer","dismissalMethod","indexOf","innerWidth","handleBrandClick","event","type","handleNavItemClick","item","NavbarHelper","isNavItemCommon","onClick","preventDefault","isNavItemLink","subMenu","handleActionButtonClick","actionButton","args","handleMobileMenuButtonClick","handleDrawerClose","renderMobileMenuButton","drawerItems","mobile","desktop","length","drawerActionButtons","some","uncollapsible","hasCollapsibleActionButtons","_jsx","MobileMenuButton","focusHighlight","MobileMenuIcon","_jsxs","Wrapper","$fixed","children","Masthead","stretch","Layout","Content","Nav","$compress","NavBrandContainer","Brand","_Fragment","NavSeparator","NavElementsContainer","$hideNavBranding","NavbarItems","NavbarActionButtons","Overlay","show","enableOverlayClick","onOverlayClick","Drawer","onClose"],"mappings":"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"}
+{"version":3,"file":"navbar.js","sources":["../../src/navbar/navbar.tsx"],"sourcesContent":["import { MenuIcon } from \"@lifesg/react-icons/menu\";\nimport clsx from \"clsx\";\nimport type React from \"react\";\nimport {\n    forwardRef,\n    useContext,\n    useEffect,\n    useImperativeHandle,\n    useRef,\n    useState,\n} from \"react\";\n\nimport { Layout } from \"../layout\";\nimport { Masthead } from \"../masthead/masthead\";\nimport { Overlay } from \"../overlay/overlay\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { Breakpoint, parsePxOrRemValue, useDesignToken } from \"../theme\";\nimport { ThemeContext } from \"../theme/theme-provider/context\";\nimport { Brand } from \"./brand\";\nimport { Drawer } from \"./drawer\";\nimport * as styles from \"./navbar.styles\";\nimport { NavbarActionButtons } from \"./navbar-action-buttons\";\nimport { NavbarHelper } from \"./navbar-helper\";\nimport { NavbarItems } from \"./navbar-items\";\nimport { getDefaultResourceLogo } from \"./navbar-logo-data\";\nimport type {\n    BrandType,\n    DrawerDismissalMethod,\n    NavbarActionButtonsProps,\n    NavbarButtonProps,\n    NavbarDrawerApi,\n    NavbarDrawerHandle,\n    NavbarProps,\n    NavItemCommonProps,\n    NavItemProps,\n} from \"./types\";\n\nconst Component = <T,>(\n    {\n        items,\n        className,\n        id,\n        selectedId,\n        compress = false,\n        fixed = true,\n        resources,\n        hideNavElements = false,\n        hideNavBranding = false,\n        hideLinkIndicator = false,\n        drawerDismissalExclusions: blockDrawerDismissalMethods = [],\n        actionButtons,\n        onItemClick,\n        onActionButtonClick,\n        onBrandClick,\n        masthead = true,\n        layout = \"default\",\n        headerLabel = \"Main navigation menu\",\n        drawerLabel,\n        ...otherProps\n    }: NavbarProps<T>,\n    ref: React.Ref<NavbarDrawerHandle>\n) => {\n    // =============================================================================\n    // CONST, STATE, REFS\n    // =============================================================================\n    const [showDrawer, setShowDrawer] = useState<boolean>(false);\n    const [showOverlay, setShowOverlay] = useState<boolean>(false);\n    const mobileMenuRef = useRef<HTMLButtonElement>(null);\n    const isStretch = layout === \"stretch\";\n    const elementRef = useRef<HTMLDivElement>(null);\n    const theme = useContext(ThemeContext);\n    const defaultResource = getDefaultResourceLogo(theme?.theme);\n    const tabletWidthToken = useDesignToken(Breakpoint[\"lg-max\"]);\n    const tabletWidth = parsePxOrRemValue(tabletWidthToken || \"1200px\");\n\n    const primary = resources?.primary || defaultResource.primary;\n    const secondary = resources?.secondary;\n\n    useImperativeHandle(\n        ref,\n        () =>\n            Object.assign<HTMLDivElement, NavbarDrawerApi>(\n                elementRef.current!,\n                {\n                    dismissDrawer: () => {\n                        dismissDrawer();\n                    },\n                }\n            ),\n        [showDrawer]\n    );\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        handleResize();\n        window.addEventListener(\"resize\", handleResize);\n\n        return () => {\n            window.removeEventListener(\"resize\", handleResize);\n        };\n    }, []);\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const dismissDrawer = () => {\n        setShowDrawer(false);\n        setTimeout(() => {\n            setShowOverlay(false);\n        }, 550); // For drawer animation to complete + buffer\n    };\n\n    const shouldDismissDrawer = (dismissalMethod: DrawerDismissalMethod) => {\n        return (\n            showDrawer &&\n            blockDrawerDismissalMethods.indexOf(dismissalMethod) === -1\n        );\n    };\n\n    const hasCollapsibleActionButtons = (\n        actionButtons: NavbarActionButtonsProps\n    ) => {\n        const drawerActionButtons =\n            actionButtons.mobile || actionButtons.desktop;\n        if (drawerActionButtons) {\n            return (\n                drawerActionButtons.length &&\n                drawerActionButtons.some(\n                    (actionButton) => !actionButton.uncollapsible\n                )\n            );\n        }\n\n        return false;\n    };\n\n    // =============================================================================\n    // EVENT HANDLER\n    // =============================================================================\n    const handleResize = () => {\n        if (window.innerWidth <= tabletWidth && showDrawer) {\n            dismissDrawer();\n        }\n    };\n\n    const handleBrandClick = (\n        _event: React.MouseEvent<HTMLAnchorElement>,\n        type: BrandType\n    ) => {\n        if (onBrandClick) {\n            onBrandClick(type);\n        }\n\n        if (shouldDismissDrawer(\"brand-click\")) {\n            dismissDrawer();\n        }\n    };\n\n    const handleNavItemClick = <K extends T>(\n        event: React.MouseEvent<HTMLAnchorElement>,\n        item: NavItemProps<K> | NavItemCommonProps<K>\n    ) => {\n        if (NavbarHelper.isNavItemCommon(item) && item.onClick) {\n            item.onClick(event);\n        } else if (onItemClick) {\n            event.preventDefault();\n            onItemClick(item);\n        }\n\n        if (\n            NavbarHelper.isNavItemLink(item) &&\n            !item.subMenu &&\n            shouldDismissDrawer(\"item-click\")\n        ) {\n            dismissDrawer();\n        }\n    };\n\n    const handleActionButtonClick = (\n        event: React.MouseEvent<HTMLButtonElement> | React.MouseEvent<Element>,\n        actionButton: NavbarButtonProps\n    ) => {\n        if (\n            (actionButton.type === \"button\" ||\n                actionButton.type === \"download\") &&\n            actionButton.args?.onClick\n        ) {\n            actionButton.args.onClick(\n                event as React.MouseEvent<HTMLButtonElement>\n            );\n        } else if (onActionButtonClick) {\n            event.preventDefault();\n            onActionButtonClick(actionButton);\n        }\n\n        if (shouldDismissDrawer(\"item-click\")) {\n            dismissDrawer();\n        }\n    };\n\n    const handleMobileMenuButtonClick = () => {\n        setShowDrawer(true);\n        setShowOverlay(true);\n    };\n\n    const handleDrawerClose = () => {\n        if (shouldDismissDrawer(\"close-button-click\")) {\n            dismissDrawer();\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n\n    const renderDrawer = () => (\n        <Overlay\n            show={showOverlay}\n            enableOverlayClick\n            onOverlayClick={handleDrawerClose}\n        >\n            <Drawer\n                show={showDrawer}\n                resources={{ primary, secondary }}\n                onClose={handleDrawerClose}\n                onBrandClick={handleBrandClick}\n                actionButtons={actionButtons}\n                hideNavBranding={hideNavBranding}\n                mobileMenuRef={mobileMenuRef}\n                drawerLabel={drawerLabel}\n            >\n                <NavbarItems\n                    items={items.mobile || items.desktop}\n                    onItemClick={handleNavItemClick}\n                    selectedId={selectedId}\n                    mobile\n                    hideLinkIndicator={hideLinkIndicator}\n                />\n                <NavbarActionButtons\n                    actionButtons={actionButtons}\n                    onActionButtonClick={handleActionButtonClick}\n                    mobile\n                />\n            </Drawer>\n        </Overlay>\n    );\n\n    const renderBrand = () => (\n        <div\n            className={clsx(\n                styles.navBrandContainer,\n                compress\n                    ? styles.navBrandContainerCompressed\n                    : styles.navBrandContainerFull,\n                styles.navBrandContainerResponsive\n            )}\n            data-id=\"brand-container\"\n        >\n            {primary && (\n                <Brand\n                    resources={primary}\n                    onClick={handleBrandClick}\n                    data-id=\"brand-primary\"\n                    data-testid=\"main__brand\"\n                    type=\"primary\"\n                />\n            )}\n            {secondary && (\n                <>\n                    <div\n                        className={clsx(\n                            styles.navSeparator,\n                            compress\n                                ? styles.navSeparatorCompressed\n                                : styles.navSeparatorFull,\n                            styles.navSeparatorResponsive\n                        )}\n                    />\n                    <Brand\n                        resources={secondary}\n                        onClick={handleBrandClick}\n                        data-id=\"brand-secondary\"\n                        data-testid=\"main__brand-secondary\"\n                        type=\"secondary\"\n                    />\n                </>\n            )}\n        </div>\n    );\n\n    const renderMobileMenuButton = () => {\n        const drawerItems = items.mobile || items.desktop;\n        if (\n            (drawerItems && drawerItems.length > 0) ||\n            (actionButtons && hasCollapsibleActionButtons(actionButtons))\n        ) {\n            return (\n                <ClickableIcon\n                    ref={mobileMenuRef}\n                    className={styles.mobileMenuButton}\n                    aria-label={showDrawer ? \"Close nav menu\" : \"Open nav menu\"}\n                    aria-expanded={showDrawer}\n                    data-testid=\"button__mobile-menu\"\n                    onClick={handleMobileMenuButtonClick}\n                    focusHighlight={false}\n                >\n                    <MenuIcon className={styles.mobileMenuIcon} />\n                </ClickableIcon>\n            );\n        }\n\n        return null;\n    };\n\n    const renderNavbar = () => {\n        return (\n            <Layout.Content stretch={isStretch}>\n                <nav\n                    className={clsx(\n                        styles.nav,\n                        compress && styles.navCompressed,\n                        theme?.mode === \"dark\" && styles.navDark\n                    )}\n                    aria-label={headerLabel}\n                >\n                    {!hideNavBranding && renderBrand()}\n                    {!hideNavElements && (\n                        <div\n                            className={clsx(\n                                styles.navElementsContainer,\n                                !hideNavBranding &&\n                                    styles.navElementsContainerWithBranding\n                            )}\n                        >\n                            <NavbarItems\n                                items={items.desktop}\n                                onItemClick={handleNavItemClick}\n                                selectedId={selectedId}\n                                hideNavBranding={hideNavBranding}\n                                hideLinkIndicator={hideLinkIndicator}\n                            />\n                            <NavbarActionButtons\n                                actionButtons={actionButtons}\n                                onActionButtonClick={handleActionButtonClick}\n                            />\n                            {renderMobileMenuButton()}\n                        </div>\n                    )}\n                </nav>\n\n                {!hideNavElements && renderDrawer()}\n            </Layout.Content>\n        );\n    };\n\n    return (\n        <div\n            ref={elementRef}\n            className={clsx(\n                styles.wrapper,\n                fixed ? styles.wrapperFixed : styles.wrapperRelative,\n                theme?.mode === \"dark\"\n                    ? styles.wrapperDark\n                    : styles.wrapperLight,\n                className\n            )}\n            id={id || \"navbar-wrapper\"}\n            data-testid={otherProps[\"data-testid\"] || \"navbar-wrapper\"}\n        >\n            {masthead && <Masthead stretch={isStretch} />}\n            {renderNavbar()}\n        </div>\n    );\n};\n\nexport const Navbar = forwardRef(Component);\n"],"names":["Navbar","forwardRef","_a","ref","items","className","id","selectedId","compress","fixed","resources","hideNavElements","hideNavBranding","hideLinkIndicator","drawerDismissalExclusions","blockDrawerDismissalMethods","actionButtons","onItemClick","onActionButtonClick","onBrandClick","masthead","layout","headerLabel","drawerLabel","otherProps","__rest","showDrawer","setShowDrawer","useState","showOverlay","setShowOverlay","mobileMenuRef","useRef","isStretch","elementRef","theme","useContext","ThemeContext","defaultResource","getDefaultResourceLogo","tabletWidthToken","useDesignToken","Breakpoint","tabletWidth","parsePxOrRemValue","primary","secondary","useImperativeHandle","Object","assign","current","dismissDrawer","useEffect","handleResize","window","addEventListener","removeEventListener","setTimeout","shouldDismissDrawer","dismissalMethod","indexOf","innerWidth","handleBrandClick","_event","type","handleNavItemClick","event","item","NavbarHelper","isNavItemCommon","onClick","preventDefault","isNavItemLink","subMenu","handleActionButtonClick","actionButton","args","handleMobileMenuButtonClick","handleDrawerClose","renderMobileMenuButton","drawerItems","mobile","desktop","length","drawerActionButtons","some","uncollapsible","hasCollapsibleActionButtons","_jsx","ClickableIcon","styles.mobileMenuButton","focusHighlight","children","MenuIcon","styles.mobileMenuIcon","_jsxs","clsx","styles.wrapper","styles.wrapperFixed","styles.wrapperRelative","mode","styles.wrapperDark","styles.wrapperLight","Masthead","stretch","Layout","Content","styles.nav","styles.navCompressed","styles.navDark","styles.navBrandContainer","styles.navBrandContainerCompressed","styles.navBrandContainerFull","styles.navBrandContainerResponsive","Brand","_Fragment","styles.navSeparator","styles.navSeparatorCompressed","styles.navSeparatorFull","styles.navSeparatorResponsive","styles.navElementsContainer","styles.navElementsContainerWithBranding","NavbarItems","NavbarActionButtons","Overlay","show","enableOverlayClick","onOverlayClick","Drawer","onClose"],"mappings":"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"}

package/navbar/navbar.styles.d.ts

@@ -1,18 +1,25 @@
-interface StyleProps {
-    $compress?: boolean;
-    $fixed?: boolean;
-    $hideNavBranding?: boolean;
-}
-export declare const Wrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyleProps>> & string;
-export declare const Nav: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, StyleProps>> & string;
-export declare const NavElementsContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyleProps>> & string;
-export declare const MobileMenuButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../shared/clickable-icon").ClickableIconProps & import("react").RefAttributes<HTMLButtonElement>, never>> & string & Omit<(props: import("../shared/clickable-icon").ClickableIconProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
-export declare const MobileMenuIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
-    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
-}, never>> & string & Omit<{
-    (props: import("react").SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-}, keyof import("react").Component<any, {}, any>>;
-export declare const NavBrandContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyleProps>> & string;
-export declare const NavSeparator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyleProps>> & string;
-export {};
+export declare const tokens: {
+    nav: {
+        height: string;
+    };
+};
+export declare const wrapper: import("@linaria/core").LinariaClassName;
+export declare const wrapperFixed: import("@linaria/core").LinariaClassName;
+export declare const wrapperRelative: import("@linaria/core").LinariaClassName;
+export declare const wrapperDark: import("@linaria/core").LinariaClassName;
+export declare const wrapperLight: import("@linaria/core").LinariaClassName;
+export declare const nav: import("@linaria/core").LinariaClassName;
+export declare const navCompressed: import("@linaria/core").LinariaClassName;
+export declare const navDark: import("@linaria/core").LinariaClassName;
+export declare const navElementsContainer: import("@linaria/core").LinariaClassName;
+export declare const navElementsContainerWithBranding: import("@linaria/core").LinariaClassName;
+export declare const mobileMenuButton: import("@linaria/core").LinariaClassName;
+export declare const mobileMenuIcon: import("@linaria/core").LinariaClassName;
+export declare const navBrandContainer: import("@linaria/core").LinariaClassName;
+export declare const navBrandContainerCompressed: import("@linaria/core").LinariaClassName;
+export declare const navBrandContainerFull: import("@linaria/core").LinariaClassName;
+export declare const navBrandContainerResponsive: import("@linaria/core").LinariaClassName;
+export declare const navSeparator: import("@linaria/core").LinariaClassName;
+export declare const navSeparatorCompressed: import("@linaria/core").LinariaClassName;
+export declare const navSeparatorFull: import("@linaria/core").LinariaClassName;
+export declare const navSeparatorResponsive: import("@linaria/core").LinariaClassName;