@lifesg/react-design-system 2.1.0-canary.3 → 2.1.0-canary.4

package/cjs/index.js

@@ -3827,7 +3827,7 @@ object-assign
         padding: 0;
     }
 `,Masthead=()=>{React.useEffect((()=>{e()||t()}),[]);const e=()=>document.getElementById(SCRIPT_ID),t=()=>{if(!document.getElementById(SCRIPT_ID)){const e=document.createElement("script");e.id=SCRIPT_ID,e.type="module",e.src=SCRIPT_SRC,document.head.appendChild(e)}};return jsxRuntime.jsx(Wrapper$e,{dangerouslySetInnerHTML:{__html:"<sgds-masthead></sgds-masthead>"}})},SCRIPT_ID="lifesg-ds-masthead-script",SCRIPT_SRC="https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component/Masthead/index.js",Modal=Object.assign(Modal$1,{Box:ModalBox}),NAVBAR_HEIGHT={notCompress:6,compress:4},NAVBAR_MOBILE_HEIGHT=3.5,Wrapper$d=styled__default.default.div`
-    position: ${e=>e.$fixed?"fixed":"relative"};
+    position: ${e=>e.$fixed?"sticky":"relative"};
     background-color: white;
     z-index: 30;
     top: 0;
@@ -3871,36 +3871,37 @@ object-assign
     color: ${Color.Neutral[1]};
 `,NavBrandContainer=styled__default.default.div`
     display: flex;
-    height: 100%;
     flex-direction: row;
     align-items: center;
     flex-shrink: 0;
+
+    height: ${e=>e.$compress?1.5:2}rem;
+
+    ${MediaQuery.MaxWidth.tablet} {
+        height: 1.5rem;
+    }
 `,NavSeparator=styled__default.default.div`
     display: flex;
     background-color: ${Color.Neutral[5]};
-    height: ${e=>e.$compress?2:2.5}rem;
+    height: 100%;
     width: 1px;
-    margin: 0 ${e=>e.$compress?1.125:1.5}rem;
+    margin: 0 ${e=>e.$compress?1:1.5}rem;
 
     ${MediaQuery.MaxWidth.tablet} {
-        height: 1.5rem;
         margin: 0 1rem;
     }
 `,Clickable=styled__default.default.a`
     display: flex;
     justify-content: center;
+    height: 100%;
 
     img {
         width: auto;
-        height: ${e=>"primary"===e.$type?e.$compress?1.25:1.625:e.$compress?2:2.5}rem;
+        height: 100%;
         transition: ${Transition.Base};
         object-fit: contain;
-
-        ${MediaQuery.MaxWidth.tablet} {
-            height: ${e=>"primary"===e.$type?1:1.5}rem;
-        }
     }
-`,Brand=({resources:e,compress:t,onClick:r,"data-testid":n="navbar-brand",type:i})=>jsxRuntime.jsx(Clickable,Object.assign({role:"link","aria-label":e.brandName+"-app-home-page",onClick:e=>{r&&r(e,i)},$compress:t,tabIndex:0,"data-testid":n,$type:i},{children:jsxRuntime.jsx(ImageWithFallback,{src:e.logoSrc,alt:e.brandName+"-app-logo"})})),VISIBILITY_STYLE=e=>e?styled.css`
+`,Brand=({resources:e,onClick:t,"data-id":r,"data-testid":n="navbar-brand",type:i})=>jsxRuntime.jsx(Clickable,Object.assign({role:"link","aria-label":e.brandName+"-app-home-page",onClick:e=>{t&&t(e,i)},tabIndex:0,"data-id":r,"data-testid":n,$type:i},{children:jsxRuntime.jsx(ImageWithFallback,{src:e.logoSrc,alt:e.brandName+"-app-logo"})})),VISIBILITY_STYLE=e=>e?styled.css`
             right: 0;
             transition: all 300ms cubic-bezier(0.21, 0.79, 0.53, 1);
             transition-delay: 200ms;
@@ -4235,7 +4236,7 @@ object-assign
     :hover {
         color: ${Color.Neutral[1]};
     }
-`,NavbarItems=({items:e,selectedId:t,mobile:r=!1,onItemClick:n})=>{const[i,a]=React.useState(-1),[o,s]=React.useState(!1),l=React.useRef(null);React.useEffect((()=>{const e=e=>{l.current&&!l.current.contains(e.target)&&c()};return document.addEventListener("click",e,!0),()=>{document.removeEventListener("click",e,!0)}}),[]);const c=()=>{s(!1)},d=(e,t)=>r=>{r.stopPropagation(),a(t),s(!0),n(r,e)},u=(e,t)=>{e.stopPropagation(),n(e,t),s(!1)},p=()=>e.map(((e,n)=>{if("component"===e.itemType){const t=e&&e.children||null;return jsxRuntime.jsx("li",{children:t},n)}{const a=(e=>{if(e.id===t)return!0;if((null==e?void 0:e.subMenu)&&e.subMenu.length>=1)return!!e.subMenu.find((e=>e.id===t));return!1})(e),{children:s,options:l}=e,c=__rest$1(e,["children","options"]),p=a?r?"bold":"semibold":"regular",h=r?`link__mobile-${n+1}`:`link__${n+1}`,f=i>=0&&i===n&&o;return jsxRuntime.jsxs(LinkItem,{children:[jsxRuntime.jsxs(Link,Object.assign({"data-testid":h,weight:p,$selected:a},c,{onClick:d(e,n)},l,{children:[jsxRuntime.jsx(LinkLabel,{children:s}),a&&jsxRuntime.jsx(LinkIndicator,{}),r&&e.subMenu&&jsxRuntime.jsx(LinkIconContainer,{children:jsxRuntime.jsx(ExpandCollapseButton,Object.assign({"data-testid":`${h}-expand-collapse-button`,$selected:f,focusHighlight:!1,focusOutline:"browser","aria-label":f?"Collapse":"Expand"},{children:jsxRuntime.jsx(ChevronIcon$1,{})}))})]})),f&&jsxRuntime.jsx(Menu,{items:e.subMenu,mobile:r,onItemClick:u})]},n)}}));if(e&&e.length>0){const e=r?MobileWrapper:Wrapper$9;return jsxRuntime.jsx(e,Object.assign({ref:l},{children:p()}))}return jsxRuntime.jsx(jsxRuntime.Fragment,{})},Component$1=(e,t)=>{var{items:r,id:n,selectedId:i,compress:a=!1,fixed:o=!0,resources:s=DEFAULT_RESOURCES,hideNavElements:l=!1,drawerDismissalExclusions:c=[],actionButtons:d,onItemClick:u,onActionButtonClick:p,onBrandClick:h,masthead:f=!0,layout:m="default"}=e,y=__rest$1(e,["items","id","selectedId","compress","fixed","resources","hideNavElements","drawerDismissalExclusions","actionButtons","onItemClick","onActionButtonClick","onBrandClick","masthead","layout"]);const[g,_]=React.useState(!1),[x,b]=React.useState(!1),v="stretch"===m,S=React.useRef(),{primary:C=DEFAULT_RESOURCES.primary,secondary:$}=s;React.useImperativeHandle(t,(()=>Object.assign(S.current,{dismissDrawer:()=>{w()}})),[g]),React.useEffect((()=>(R(),window.addEventListener("resize",R),()=>{window.removeEventListener("resize",R)})),[]);const w=()=>{_(!1),setTimeout((()=>{b(!1)}),550)},T=e=>g&&-1===c.indexOf(e),R=()=>{window.innerWidth<=MediaWidths$1.tablet&&g&&w()},j=(e,t)=>{h&&(e.preventDefault(),h(t)),T("brand-click")&&w()},k=(e,t)=>{t.onClick?t.onClick(e):u&&(e.preventDefault(),u(t)),!(null==t?void 0:t.subMenu)&&T("item-click")&&w()},E=(e,t)=>{t.args&&t.args.onClick?t.args.onClick(e):p&&(e.preventDefault(),p(t)),T("item-click")&&w()},A=()=>{_(!0),b(!0)},D=()=>{T("close-button-click")&&w()};return jsxRuntime.jsxs(Wrapper$d,Object.assign({ref:S,$fixed:o,id:n||"navbar-wrapper","data-testid":y["data-testid"]||"navbar-wrapper"},{children:[f&&jsxRuntime.jsx(Masthead,{}),jsxRuntime.jsxs(Layout.Content,Object.assign({stretch:v},{children:[jsxRuntime.jsxs(Nav,Object.assign({$compress:a},{children:[jsxRuntime.jsxs(NavBrandContainer,{children:[jsxRuntime.jsx(Brand,{resources:C,compress:a,onClick:j,"data-testid":"main__brand",type:"primary"}),$&&jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx(NavSeparator,{$compress:a}),jsxRuntime.jsx(Brand,{resources:$,compress:a,onClick:j,"data-testid":"main__brand-secondary",type:"secondary"})]})]}),!l&&jsxRuntime.jsxs(NavElementsContainer,{children:[jsxRuntime.jsx(NavbarItems,{items:r.desktop,onItemClick:k,selectedId:i}),jsxRuntime.jsx(NavbarActionButtons,{actionButtons:d,onActionButtonClick:E}),jsxRuntime.jsx(MobileMenuButton,Object.assign({"aria-label":"Open nav menu","data-testid":"button__mobile-menu",onClick:A,focusHighlight:!1},{children:jsxRuntime.jsx(MobileMenuIcon,{})}))]})]})),!l&&jsxRuntime.jsx(Overlay,Object.assign({show:x,enableOverlayClick:!0,onOverlayClick:D},{children:jsxRuntime.jsxs(Drawer,Object.assign({show:g,resources:{primary:C,secondary:$},onClose:D,onBrandClick:j,actionButtons:d},{children:[jsxRuntime.jsx(NavbarItems,{items:r.mobile||r.desktop,onItemClick:k,selectedId:i,mobile:!0}),jsxRuntime.jsx(NavbarActionButtons,{actionButtons:d,onActionButtonClick:E,mobile:!0})]}))}))]}))]}))},Navbar=React.forwardRef(Component$1),DEFAULT_RESOURCES={primary:{brandName:"LifeSG",logoSrc:"https://assets.life.gov.sg/lifesg/logo-lifesg.svg"}},NavbarHeight=NAVBAR_HEIGHT,NavbarMobileHeight=NAVBAR_MOBILE_HEIGHT,commonLinkStyle=styled.css`
+`,NavbarItems=({items:e,selectedId:t,mobile:r=!1,onItemClick:n})=>{const[i,a]=React.useState(-1),[o,s]=React.useState(!1),l=React.useRef(null);React.useEffect((()=>{const e=e=>{l.current&&!l.current.contains(e.target)&&c()};return document.addEventListener("click",e,!0),()=>{document.removeEventListener("click",e,!0)}}),[]);const c=()=>{s(!1)},d=(e,t)=>r=>{r.stopPropagation(),a(t),s(!0),n(r,e)},u=(e,t)=>{e.stopPropagation(),n(e,t),s(!1)},p=()=>e.map(((e,n)=>{if("component"===e.itemType){const t=e&&e.children||null;return jsxRuntime.jsx("li",{children:t},n)}{const a=(e=>{if(e.id===t)return!0;if((null==e?void 0:e.subMenu)&&e.subMenu.length>=1)return!!e.subMenu.find((e=>e.id===t));return!1})(e),{children:s,options:l}=e,c=__rest$1(e,["children","options"]),p=a?r?"bold":"semibold":"regular",h=r?`link__mobile-${n+1}`:`link__${n+1}`,f=i>=0&&i===n&&o;return jsxRuntime.jsxs(LinkItem,{children:[jsxRuntime.jsxs(Link,Object.assign({"data-testid":h,weight:p,$selected:a},c,{onClick:d(e,n)},l,{children:[jsxRuntime.jsx(LinkLabel,{children:s}),a&&jsxRuntime.jsx(LinkIndicator,{}),r&&e.subMenu&&jsxRuntime.jsx(LinkIconContainer,{children:jsxRuntime.jsx(ExpandCollapseButton,Object.assign({"data-testid":`${h}-expand-collapse-button`,$selected:f,focusHighlight:!1,focusOutline:"browser","aria-label":f?"Collapse":"Expand"},{children:jsxRuntime.jsx(ChevronIcon$1,{})}))})]})),f&&jsxRuntime.jsx(Menu,{items:e.subMenu,mobile:r,onItemClick:u})]},n)}}));if(e&&e.length>0){const e=r?MobileWrapper:Wrapper$9;return jsxRuntime.jsx(e,Object.assign({ref:l},{children:p()}))}return jsxRuntime.jsx(jsxRuntime.Fragment,{})},Component$1=(e,t)=>{var{items:r,className:n,id:i,selectedId:a,compress:o=!1,fixed:s=!0,resources:l=DEFAULT_RESOURCES,hideNavElements:c=!1,drawerDismissalExclusions:d=[],actionButtons:u,onItemClick:p,onActionButtonClick:h,onBrandClick:f,masthead:m=!0,layout:y="default"}=e,g=__rest$1(e,["items","className","id","selectedId","compress","fixed","resources","hideNavElements","drawerDismissalExclusions","actionButtons","onItemClick","onActionButtonClick","onBrandClick","masthead","layout"]);const[_,x]=React.useState(!1),[b,v]=React.useState(!1),S="stretch"===y,C=React.useRef(),{primary:$=DEFAULT_RESOURCES.primary,secondary:w}=l;React.useImperativeHandle(t,(()=>Object.assign(C.current,{dismissDrawer:()=>{T()}})),[_]),React.useEffect((()=>(j(),window.addEventListener("resize",j),()=>{window.removeEventListener("resize",j)})),[]);const T=()=>{x(!1),setTimeout((()=>{v(!1)}),550)},R=e=>_&&-1===d.indexOf(e),j=()=>{window.innerWidth<=MediaWidths$1.tablet&&_&&T()},k=(e,t)=>{f&&(e.preventDefault(),f(t)),R("brand-click")&&T()},E=(e,t)=>{t.onClick?t.onClick(e):p&&(e.preventDefault(),p(t)),!(null==t?void 0:t.subMenu)&&R("item-click")&&T()},A=(e,t)=>{t.args&&t.args.onClick?t.args.onClick(e):h&&(e.preventDefault(),h(t)),R("item-click")&&T()},D=()=>{x(!0),v(!0)},I=()=>{R("close-button-click")&&T()};return jsxRuntime.jsxs(Wrapper$d,Object.assign({ref:C,$fixed:s,className:n,id:i||"navbar-wrapper","data-testid":g["data-testid"]||"navbar-wrapper"},{children:[m&&jsxRuntime.jsx(Masthead,{}),jsxRuntime.jsxs(Layout.Content,Object.assign({stretch:S},{children:[jsxRuntime.jsxs(Nav,Object.assign({$compress:o},{children:[jsxRuntime.jsxs(NavBrandContainer,Object.assign({$compress:o,"data-id":"brand-container"},{children:[jsxRuntime.jsx(Brand,{resources:$,onClick:k,"data-id":"brand-primary","data-testid":"main__brand",type:"primary"}),w&&jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx(NavSeparator,{$compress:o}),jsxRuntime.jsx(Brand,{resources:w,onClick:k,"data-id":"brand-secondary","data-testid":"main__brand-secondary",type:"secondary"})]})]})),!c&&jsxRuntime.jsxs(NavElementsContainer,{children:[jsxRuntime.jsx(NavbarItems,{items:r.desktop,onItemClick:E,selectedId:a}),jsxRuntime.jsx(NavbarActionButtons,{actionButtons:u,onActionButtonClick:A}),jsxRuntime.jsx(MobileMenuButton,Object.assign({"aria-label":"Open nav menu","data-testid":"button__mobile-menu",onClick:D,focusHighlight:!1},{children:jsxRuntime.jsx(MobileMenuIcon,{})}))]})]})),!c&&jsxRuntime.jsx(Overlay,Object.assign({show:b,enableOverlayClick:!0,onOverlayClick:I},{children:jsxRuntime.jsxs(Drawer,Object.assign({show:_,resources:{primary:$,secondary:w},onClose:I,onBrandClick:k,actionButtons:u},{children:[jsxRuntime.jsx(NavbarItems,{items:r.mobile||r.desktop,onItemClick:E,selectedId:a,mobile:!0}),jsxRuntime.jsx(NavbarActionButtons,{actionButtons:u,onActionButtonClick:A,mobile:!0})]}))}))]}))]}))},Navbar=React.forwardRef(Component$1),DEFAULT_RESOURCES={primary:{brandName:"LifeSG",logoSrc:"https://assets.life.gov.sg/lifesg/logo-lifesg.svg"}},NavbarHeight=NAVBAR_HEIGHT,NavbarMobileHeight=NAVBAR_MOBILE_HEIGHT,commonLinkStyle=styled.css`
     color: ${Color.Validation.Orange.Icon};
 
     svg {