npm - @lifesg/react-design-system - Versions diffs - 4.0.0-alpha.1 → 4.0.0-alpha.2 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2348) hide show

package/cjs/link-list/components/link-list-lazy.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var e=require("../../_virtual/_tslib.js"),t=require("react/jsx-runtime"),r=require("@react-spring/web"),i=require("react"),s=require("../../external/react-resize-detector/build/index.esm.js"),n=require("../../shared/component-loading-spinner/component-loading-spinner.js");require("../../theme/theme-provider/index.js"),require("../../theme/theme-provider/context.js"),require("../../theme/tokens/border.js");var o=require("../../theme/tokens/colour.js");require("../../theme/tokens/font.js"),require("../../theme/tokens/media-query.js"),require("../../util/calendar-helper.js"),require("../../external/dayjs/dayjs.min.js"),require("../../util/string-helper.js");var a=require("../link-list.styles.js"),l=require("./common.js");exports.LazyLinkList=({items:d,style:u,onItemClick:c,loadMore:m,onLoadMore:h,customLabels:j})=>{const[g,p]=i.useState(!1),q=s.useResizeDetector(),x=q.ref,b=()=>e.__awaiter(void 0,void 0,void 0,(function*(){if(!g){p(!0);try{yield h()}catch(e){}p(!1)}})),k=r.useSpring({height:q.height});return t.jsxs(t.Fragment,{children:[t.jsx(a.Expandable,{style:k,"data-testid":"content",children:t.jsx(a.ExpandableChild,{ref:x,children:t.jsx(l.LinkListItems,{"data-testid":"link-list-items",items:d,handleItemClick:(e,t)=>{t.onClick?(e.preventDefault(),t.onClick(e)):c&&(e.preventDefault(),c(t,e))},style:u})})}),m&&(()=>{const e=g?"Loading...":(null==j?void 0:j.viewMore)||"View more";return t.jsxs(a.ToggleButton,{type:"button",onClick:b,"data-testid":"toggle-button","aria-disabled":g,$loading:g,children:[t.jsx(a.ToggleButtonLabel,{forwardedAs:"span",weight:"semibold","data-testid":"toggle-button-label","aria-busy":g,children:e}),g?t.jsx(n.ComponentLoadingSpinner,{color:o.Colour["text-disabled"]}):t.jsx(a.ViewMoreIcon,{"aria-hidden":!0})]})})()]})};
+"use strict";var e=require("../../_virtual/_tslib.js"),r=require("react/jsx-runtime"),t=require("@react-spring/web"),i=require("react"),n=require("../../external/react-resize-detector/build/index.esm.js"),s=require("../../shared/component-loading-spinner/component-loading-spinner.js");require("../../theme/theme-provider/index.js"),require("../../theme/theme-provider/context.js"),require("../../theme/tokens/border.js");var o=require("../../theme/tokens/colour.js");require("../../theme/tokens/font.js"),require("../../theme/tokens/media-query.js"),require("../../util/calendar-helper.js"),require("../../external/dayjs/dayjs.min.js"),require("../../util/simple-id-generator.js"),require("../../util/string-helper.js"),require("@react-aria/live-announcer");var a=require("../link-list.styles.js"),l=require("./common.js");exports.LazyLinkList=({items:d,style:u,onItemClick:c,loadMore:m,onLoadMore:j,customLabels:h})=>{const[g,p]=i.useState(!1),q=n.useResizeDetector(),x=q.ref,b=()=>e.__awaiter(void 0,void 0,void 0,(function*(){if(!g){p(!0);try{yield j()}catch(e){}p(!1)}})),v=t.useSpring({height:q.height});return r.jsxs(r.Fragment,{children:[r.jsx(a.Expandable,{style:v,"data-testid":"content",children:r.jsx(a.ExpandableChild,{ref:x,children:r.jsx(l.LinkListItems,{"data-testid":"link-list-items",items:d,handleItemClick:(e,r)=>{r.onClick?(e.preventDefault(),r.onClick(e)):c&&(e.preventDefault(),c(r,e))},style:u})})}),m&&(()=>{const e=g?"Loading...":(null==h?void 0:h.viewMore)||"View more";return r.jsxs(a.ToggleButton,{type:"button",onClick:b,"data-testid":"toggle-button","aria-disabled":g,$loading:g,children:[r.jsx(a.ToggleButtonLabel,{forwardedAs:"span",weight:"semibold","data-testid":"toggle-button-label","aria-busy":g,children:e}),g?r.jsx(s.ComponentLoadingSpinner,{color:o.Colour["text-disabled"]}):r.jsx(a.ViewMoreIcon,{"aria-hidden":!0})]})})()]})};
 //# sourceMappingURL=link-list-lazy.js.map

package/cjs/link-list/components/link-list-lazy.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"link-list-lazy.js","sources":["../../../../src/link-list/components/link-list-lazy.tsx"],"sourcesContent":["import { useSpring } from \"@react-spring/web\";\nimport type React from \"react\";\nimport { useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { ComponentLoadingSpinner } from \"../../shared/component-loading-spinner\";\nimport { Colour } from \"../../theme\";\nimport type {\n BaseProps,\n LinkListItemProps,\n LinkListLazyProps,\n} from \"../internal-types\";\nimport {\n Expandable,\n ExpandableChild,\n ToggleButton,\n ToggleButtonLabel,\n ViewMoreIcon,\n} from \"../link-list.styles\";\nimport { LinkListItems } from \"./common\";\n\ntype Props<T> = Omit<BaseProps<T>, \"className\" \| \"data-testid\"> &\n Omit<LinkListLazyProps, \"loadMode\">;\nexport const LazyLinkList = <T,>({\n items,\n style,\n onItemClick,\n loadMore,\n onLoadMore,\n customLabels,\n}: Props<T>) => {\n // =============================================================================\n // CONST, STATE, REFS\n // =============================================================================\n const [isLoading, setIsLoading] = useState(false);\n\n const resizeDetector = useResizeDetector();\n const childRef = resizeDetector.ref;\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleListItemClick = (\n event: React.MouseEvent<HTMLAnchorElement>,\n item: LinkListItemProps<T>\n ) => {\n /*\n Individual item's onClick will override\n * the onItemClick callback\n */\n if (item.onClick) {\n event.preventDefault();\n item.onClick(event);\n } else if (onItemClick) {\n event.preventDefault();\n onItemClick(item, event);\n }\n\n // Do nothing and let default event happen\n };\n\n const handleClickViewMore = async () => {\n if (isLoading) return;\n\n setIsLoading(true);\n try {\n await onLoadMore();\n } catch {\n // do nothing\n }\n setIsLoading(false);\n };\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n const renderToggle = () => {\n const label = isLoading\n ? \"Loading...\"\n : customLabels?.viewMore \|\| \"View more\";\n\n return (\n <ToggleButton\n type=\"button\"\n onClick={handleClickViewMore}\n data-testid=\"toggle-button\"\n aria-disabled={isLoading}\n $loading={isLoading}\n >\n <ToggleButtonLabel\n forwardedAs=\"span\"\n weight=\"semibold\"\n data-testid=\"toggle-button-label\"\n aria-busy={isLoading}\n >\n {label}\n </ToggleButtonLabel>\n\n {isLoading ? (\n <ComponentLoadingSpinner color={Colour[\"text-disabled\"]} />\n ) : (\n <ViewMoreIcon aria-hidden />\n )}\n </ToggleButton>\n );\n };\n\n // React spring animation configuration\n const expandableStyles = useSpring({\n height: resizeDetector.height,\n });\n\n return (\n <>\n <Expandable style={expandableStyles} data-testid=\"content\">\n <ExpandableChild ref={childRef}>\n <LinkListItems\n data-testid=\"link-list-items\"\n items={items}\n handleItemClick={handleListItemClick}\n style={style}\n />\n </ExpandableChild>\n </Expandable>\n {loadMore && renderToggle()}\n </>\n );\n};\n"],"names":["items","style","onItemClick","loadMore","onLoadMore","customLabels","isLoading","setIsLoading","useState","resizeDetector","useResizeDetector","childRef","ref","handleClickViewMore","__awaiter","_a","expandableStyles","useSpring","height","_jsxs","_jsx","Expandable","ExpandableChild","children","LinkListItems","handleItemClick","event","item","onClick","preventDefault","label","viewMore","ToggleButton","type","$loading","ToggleButtonLabel","forwardedAs","weight","ComponentLoadingSpinner","color","Colour","ViewMoreIcon","renderToggle"],"mappings":"~~0vBAuB4B~~,EACxBA,QACAC,QACAC,cACAC,WACAC,aACAC,mBAKA,MAAOC,EAAWC,GAAgBC,EAAAA,UAAS,GAErCC,EAAiBC,EAAAA,oBACjBC,EAAWF,EAAeG,IAwB1BC,EAAsB,IAAWC,EAAAA,eAAA,OAAA,OAAA,GAAA,YACnC,IAAIR,EAAJ,CAEAC,GAAa,GACb,UACUH,GACV,CAAE,MAAAW,GAEF,CACAR,GAAa,EARE,CASnB,IAqCMS,EAAmBC,EAAAA,UAAU,CAC/BC,OAAQT,EAAeS,SAG3B,OACIC,EAAAA,2BACIC,EAAAA,IAACC,EAAAA,YAAWpB,MAAOe,EAAgB,cAAc,mBAC7CI,EAAAA,IAACE,EAAAA,iBAAgBV,IAAKD,EAAQY,SAC1BH,EAAAA,IAACI,EAAAA,cAAa,CAAA,cACE,kBACZxB,MAAOA,EACPyB,gBA7EQ,CACxBC,EACAC,KAMIA,EAAKC,SACLF,EAAMG,iBACNF,EAAKC,QAAQF,IACNxB,IACPwB,EAAMG,iBACN3B,EAAYyB,EAAMD,GACtB,EAgEgBzB,MAAOA,QAIlBE,GAhDY,MACjB,MAAM2B,EAAQxB,EACR,cACAD,aAAY,EAAZA,EAAc0B,WAAY,YAEhC,OACIZ,EAAAA,KAACa,eAAY,CACTC,KAAK,SACLL,QAASf,EAAmB,cAChB,gBAAe,gBACZP,EAAS4B,SACd5B,EAASiB,SAAA,CAEnBH,EAAAA,IAACe,EAAAA,kBAAiB,CACdC,YAAY,OACZC,OAAO,yBACK,sBAAqB,YACtB/B,EAASiB,SAEnBO,IAGJxB,EACGc,MAACkB,EAAAA,wBAAuB,CAACC,MAAOC,EAAAA,OAAO,mBAEvCpB,MAACqB,EAAAA,aAAY,CAAA,eAAA,MAEN,EAqBFC,KACd"}
1	+ {"version":3,"file":"link-list-lazy.js","sources":["../../../../src/link-list/components/link-list-lazy.tsx"],"sourcesContent":["import { useSpring } from \"@react-spring/web\";\nimport type React from \"react\";\nimport { useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { ComponentLoadingSpinner } from \"../../shared/component-loading-spinner\";\nimport { Colour } from \"../../theme\";\nimport type {\n BaseProps,\n LinkListItemProps,\n LinkListLazyProps,\n} from \"../internal-types\";\nimport {\n Expandable,\n ExpandableChild,\n ToggleButton,\n ToggleButtonLabel,\n ViewMoreIcon,\n} from \"../link-list.styles\";\nimport { LinkListItems } from \"./common\";\n\ntype Props<T> = Omit<BaseProps<T>, \"className\" \| \"data-testid\"> &\n Omit<LinkListLazyProps, \"loadMode\">;\nexport const LazyLinkList = <T,>({\n items,\n style,\n onItemClick,\n loadMore,\n onLoadMore,\n customLabels,\n}: Props<T>) => {\n // =============================================================================\n // CONST, STATE, REFS\n // =============================================================================\n const [isLoading, setIsLoading] = useState(false);\n\n const resizeDetector = useResizeDetector();\n const childRef = resizeDetector.ref;\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleListItemClick = (\n event: React.MouseEvent<HTMLAnchorElement>,\n item: LinkListItemProps<T>\n ) => {\n /*\n Individual item's onClick will override\n * the onItemClick callback\n */\n if (item.onClick) {\n event.preventDefault();\n item.onClick(event);\n } else if (onItemClick) {\n event.preventDefault();\n onItemClick(item, event);\n }\n\n // Do nothing and let default event happen\n };\n\n const handleClickViewMore = async () => {\n if (isLoading) return;\n\n setIsLoading(true);\n try {\n await onLoadMore();\n } catch {\n // do nothing\n }\n setIsLoading(false);\n };\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n const renderToggle = () => {\n const label = isLoading\n ? \"Loading...\"\n : customLabels?.viewMore \|\| \"View more\";\n\n return (\n <ToggleButton\n type=\"button\"\n onClick={handleClickViewMore}\n data-testid=\"toggle-button\"\n aria-disabled={isLoading}\n $loading={isLoading}\n >\n <ToggleButtonLabel\n forwardedAs=\"span\"\n weight=\"semibold\"\n data-testid=\"toggle-button-label\"\n aria-busy={isLoading}\n >\n {label}\n </ToggleButtonLabel>\n\n {isLoading ? (\n <ComponentLoadingSpinner color={Colour[\"text-disabled\"]} />\n ) : (\n <ViewMoreIcon aria-hidden />\n )}\n </ToggleButton>\n );\n };\n\n // React spring animation configuration\n const expandableStyles = useSpring({\n height: resizeDetector.height,\n });\n\n return (\n <>\n <Expandable style={expandableStyles} data-testid=\"content\">\n <ExpandableChild ref={childRef}>\n <LinkListItems\n data-testid=\"link-list-items\"\n items={items}\n handleItemClick={handleListItemClick}\n style={style}\n />\n </ExpandableChild>\n </Expandable>\n {loadMore && renderToggle()}\n </>\n );\n};\n"],"names":["items","style","onItemClick","loadMore","onLoadMore","customLabels","isLoading","setIsLoading","useState","resizeDetector","useResizeDetector","childRef","ref","handleClickViewMore","__awaiter","_a","expandableStyles","useSpring","height","_jsxs","_jsx","Expandable","ExpandableChild","children","LinkListItems","handleItemClick","event","item","onClick","preventDefault","label","viewMore","ToggleButton","type","$loading","ToggleButtonLabel","forwardedAs","weight","ComponentLoadingSpinner","color","Colour","ViewMoreIcon","renderToggle"],"mappings":"60BAuB4B,EACxBA,QACAC,QACAC,cACAC,WACAC,aACAC,mBAKA,MAAOC,EAAWC,GAAgBC,EAAAA,UAAS,GAErCC,EAAiBC,EAAAA,oBACjBC,EAAWF,EAAeG,IAwB1BC,EAAsB,IAAWC,EAAAA,eAAA,OAAA,OAAA,GAAA,YACnC,IAAIR,EAAJ,CAEAC,GAAa,GACb,UACUH,GACV,CAAE,MAAAW,GAEF,CACAR,GAAa,EARE,CASnB,IAqCMS,EAAmBC,EAAAA,UAAU,CAC/BC,OAAQT,EAAeS,SAG3B,OACIC,EAAAA,2BACIC,EAAAA,IAACC,EAAAA,YAAWpB,MAAOe,EAAgB,cAAc,mBAC7CI,EAAAA,IAACE,EAAAA,iBAAgBV,IAAKD,EAAQY,SAC1BH,EAAAA,IAACI,EAAAA,cAAa,CAAA,cACE,kBACZxB,MAAOA,EACPyB,gBA7EQ,CACxBC,EACAC,KAMIA,EAAKC,SACLF,EAAMG,iBACNF,EAAKC,QAAQF,IACNxB,IACPwB,EAAMG,iBACN3B,EAAYyB,EAAMD,GACtB,EAgEgBzB,MAAOA,QAIlBE,GAhDY,MACjB,MAAM2B,EAAQxB,EACR,cACAD,aAAY,EAAZA,EAAc0B,WAAY,YAEhC,OACIZ,EAAAA,KAACa,eAAY,CACTC,KAAK,SACLL,QAASf,EAAmB,cAChB,gBAAe,gBACZP,EAAS4B,SACd5B,EAASiB,SAAA,CAEnBH,EAAAA,IAACe,EAAAA,kBAAiB,CACdC,YAAY,OACZC,OAAO,yBACK,sBAAqB,YACtB/B,EAASiB,SAEnBO,IAGJxB,EACGc,MAACkB,EAAAA,wBAAuB,CAACC,MAAOC,EAAAA,OAAO,mBAEvCpB,MAACqB,EAAAA,aAAY,CAAA,eAAA,MAEN,EAqBFC,KACd"}

package/cjs/local-nav/local-nav-dropdown/local-nav-dropdown.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),t=require("react"),n=require("../../typography/index.js");require("../../util/calendar-helper.js"),require("../../external/dayjs/dayjs.min.js");var r=require("../../util/simple-id-generator.js");require("../../util/string-helper.js");var i=require("./local-nav-dropdown.styles.js");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const o=s(t).default.forwardRef((({defaultLabel:s,stickyOffset:o=0,onNavItemSelect:l,items:c,selectedItemIndex:u,id:f,"data-testid":p,className:m,renderItem:v},w)=>{const h=t.useRef(null),x=t.useRef(null),y=t.useRef(null),g=t.useRef([]),[b,j]=t.useState(!1),[E,I]=t.useState(!1),[k,S]=t.useState(0),[D,$]=t.useState(0),[L,N]=t.useState(0),[C,q]=t.useState(0),R=p||"local-nav-dropdown",[B]=t.useState((()=>r.SimpleIdGenerator.generate()));t.useImperativeHandle(w,(()=>y.current));const H="number"==typeof u&&u>=0&&b?c[u].title:s;t.useEffect((()=>{if(x.current){const e=x.current.getBoundingClientRect().height;$(e)}}),[]),t.useEffect((()=>(T(),()=>{z("remove")})),[]),t.useEffect((()=>{z(E&&b?"add":"remove")}),[E,b]),t.useEffect((()=>{S(window.innerHeight);const e=()=>{S(window.innerHeight)};return window.addEventListener("resize",e),()=>window.removeEventListener("resize",e)}),[]),t.useEffect((()=>{const e=new IntersectionObserver((e=>{const[t]=e;j(!t.isIntersecting)}),{threshold:1,rootMargin:`-${o}px 0px 0px 0px`});return h.current&&e.observe(h.current),()=>e.disconnect()}),[o]),t.useEffect((()=>{const e=()=>{const e=null==y?void 0:y.current;if(e){const t=e.getBoundingClientRect(),n=document.body.clientWidth-t.right,r=t.left,i=Math.max(n,r);N(i)}};return e(),window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}}),[]),t.useEffect((()=>{var e;E&&(null===(e=g.current[C])||void 0===e||e.focus())}),[E,C]);const T=()=>{if(!document.getElementById(d)){const e=document.createElement("style");e.id=d;const t=document.documentElement.clientWidth,n=window.innerWidth-t;e.innerHTML=`\n\t\t\t\t.${a} {\n\t\t\t\t\toverflow: hidden;\n\t\t\t\t\tpadding-right: ${n}px !important;\n\t\t\t\t\t-ms-overflow-style: none;\n\t\t\t\t\tscrollbar-width: none;\n\t\t\t\t}\n\n\t\t\t\t.${a}::-webkit-scrollbar {\n\t\t\t\t\tdisplay: none;\n\t\t\t\t}\n\t\t\t`,document.body.appendChild(e)}},z=e=>{const t=document.body.classList.contains(a);"add"!==e||t?"remove"===e&&t&&document.body.classList.remove(a):document.body.classList.add(a)},A=(e,t)=>{const{key:n}=e;"Enter"!==n&&" "!==n||(e.preventDefault(),t(e))};return e.jsxs(e.Fragment,{children:[e.jsx("span",{ref:h,"data-testid":"sticky-ref"}),e.jsxs(i.NavWrapper,{$isStickied:b,$sideMargin:L,$stickyOffset:o,ref:y,id:f,"data-testid":R,className:m,children:[e.jsxs(i.NavSelect,{ref:x,role:"button",onClick:()=>{I((e=>!e))},onKeyDown:e=>{const{key:t}=e;"ArrowDown"===t?(e.preventDefault(),E||I(!0),q(0)):"ArrowUp"===t?(e.preventDefault(),E||I(!0),q(c.length-1)):"Enter"===t||" "===t?(e.preventDefault(),I(!0),q(0)):("Tab"===t||"Escape"===t)&&I(!1)},"data-testid":`${R}-label`,$isDropdownExpanded:E,"aria-haspopup":"true","aria-expanded":E,"aria-controls":B,tabIndex:0,children:[e.jsx(n.Typography.BodyBL,{weight:"semibold",children:H}),e.jsx(i.NavSelectIcon,{$isDropdownExpanded:E})]}),E&&e.jsx(i.NavItemList,{id:B,role:"menu",onKeyDown:e=>{var t;const{key:n}=e;if("ArrowDown"===n){e.preventDefault();const t=(C+1)%c.length;q(t)}else if("ArrowUp"===n){e.preventDefault();const t=C>0?C-1:c.length-1;q(t)}else"Tab"===n?I(!1):"Escape"===n&&(I(!1),null===(t=x.current)||void 0===t||t.focus())},"data-testid":`${R}-dropdown-list`,$viewportHeight:k-D-o,children:c.map(((t,n)=>(({handleClick:t,isSelected:n,item:r,renderItem:s,index:o})=>{const{id:d,title:a}=r;return s?e.jsx("li",{id:d,role:"menuitem",onClick:t,onKeyDown:e=>A(e,t),"aria-current":!!n||void 0,tabIndex:-1,ref:e=>{g.current[o]=e},children:s(r,{selected:n,stickied:b})},o):e.jsxs(i.NavItem,{id:d,role:"menuitem",$isSelected:n&&b,onClick:t,onKeyDown:e=>A(e,t),"aria-current":!!n||void 0,tabIndex:-1,ref:e=>{g.current[o]=e},children:[n&&e.jsx(i.StyledTickIcon,{}),e.jsx(i.NavItemLabel,{$isSelected:n,children:a})]},o)})({handleClick:e=>((e,t,n)=>{l&&l(e,t,n),I(!1)})(e,t,n),isSelected:n===u,item:t,renderItem:v,index:n})))}),E&&b&&e.jsx(i.Backdrop,{onClick:()=>{I(!1)}})]})]})})),d="lifesg-ds-local-nav-dropdown-stylesheet",a="lifesg-ds-local-nav-dropdown-open";exports.LocalNavDropdown=o;
+"use strict";var e=require("react/jsx-runtime"),t=require("react"),n=require("../../typography/index.js");require("../../util/calendar-helper.js"),require("../../external/dayjs/dayjs.min.js");var r=require("../../util/simple-id-generator.js");require("../../util/string-helper.js"),require("@react-aria/live-announcer");var i=require("./local-nav-dropdown.styles.js");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const o=s(t).default.forwardRef((({defaultLabel:s,stickyOffset:o=0,onNavItemSelect:c,items:l,selectedItemIndex:u,id:f,"data-testid":p,className:m,renderItem:v},w)=>{const h=t.useRef(null),x=t.useRef(null),y=t.useRef(null),g=t.useRef([]),[b,j]=t.useState(!1),[E,I]=t.useState(!1),[k,D]=t.useState(0),[S,$]=t.useState(0),[L,N]=t.useState(0),[q,C]=t.useState(0),R=p||"local-nav-dropdown",B=r.useId();t.useImperativeHandle(w,(()=>y.current));const H="number"==typeof u&&u>=0&&b?l[u].title:s;t.useEffect((()=>{if(x.current){const e=x.current.getBoundingClientRect().height;$(e)}}),[]),t.useEffect((()=>(T(),()=>{z("remove")})),[]),t.useEffect((()=>{z(E&&b?"add":"remove")}),[E,b]),t.useEffect((()=>{D(window.innerHeight);const e=()=>{D(window.innerHeight)};return window.addEventListener("resize",e),()=>window.removeEventListener("resize",e)}),[]),t.useEffect((()=>{const e=new IntersectionObserver((e=>{const[t]=e;j(!t.isIntersecting)}),{threshold:1,rootMargin:`-${o}px 0px 0px 0px`});return h.current&&e.observe(h.current),()=>e.disconnect()}),[o]),t.useEffect((()=>{const e=()=>{const e=null==y?void 0:y.current;if(e){const t=e.getBoundingClientRect(),n=document.body.clientWidth-t.right,r=t.left,i=Math.max(n,r);N(i)}};return e(),window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}}),[]),t.useEffect((()=>{var e;E&&(null===(e=g.current[q])||void 0===e||e.focus())}),[E,q]);const T=()=>{if(!document.getElementById(d)){const e=document.createElement("style");e.id=d;const t=document.documentElement.clientWidth,n=window.innerWidth-t;e.innerHTML=`\n\t\t\t\t.${a} {\n\t\t\t\t\toverflow: hidden;\n\t\t\t\t\tpadding-right: ${n}px !important;\n\t\t\t\t\t-ms-overflow-style: none;\n\t\t\t\t\tscrollbar-width: none;\n\t\t\t\t}\n\n\t\t\t\t.${a}::-webkit-scrollbar {\n\t\t\t\t\tdisplay: none;\n\t\t\t\t}\n\t\t\t`,document.body.appendChild(e)}},z=e=>{const t=document.body.classList.contains(a);"add"!==e||t?"remove"===e&&t&&document.body.classList.remove(a):document.body.classList.add(a)},A=(e,t)=>{const{key:n}=e;"Enter"!==n&&" "!==n||(e.preventDefault(),t(e))};return e.jsxs(e.Fragment,{children:[e.jsx("span",{ref:h,"data-testid":"sticky-ref"}),e.jsxs(i.NavWrapper,{$isStickied:b,$sideMargin:L,$stickyOffset:o,ref:y,id:f,"data-testid":R,className:m,children:[e.jsxs(i.NavSelect,{ref:x,role:"button",onClick:()=>{I((e=>!e))},onKeyDown:e=>{const{key:t}=e;"ArrowDown"===t?(e.preventDefault(),E||I(!0),C(0)):"ArrowUp"===t?(e.preventDefault(),E||I(!0),C(l.length-1)):"Enter"===t||" "===t?(e.preventDefault(),I(!0),C(0)):("Tab"===t||"Escape"===t)&&I(!1)},"data-testid":`${R}-label`,$isDropdownExpanded:E,"aria-haspopup":"true","aria-expanded":E,"aria-controls":B,tabIndex:0,children:[e.jsx(n.Typography.BodyBL,{weight:"semibold",children:H}),e.jsx(i.NavSelectIcon,{$isDropdownExpanded:E})]}),E&&e.jsx(i.NavItemList,{id:B,role:"menu",onKeyDown:e=>{var t;const{key:n}=e;if("ArrowDown"===n){e.preventDefault();const t=(q+1)%l.length;C(t)}else if("ArrowUp"===n){e.preventDefault();const t=q>0?q-1:l.length-1;C(t)}else"Tab"===n?I(!1):"Escape"===n&&(I(!1),null===(t=x.current)||void 0===t||t.focus())},"data-testid":`${R}-dropdown-list`,$viewportHeight:k-S-o,children:l.map(((t,n)=>(({handleClick:t,isSelected:n,item:r,renderItem:s,index:o})=>{const{id:d,title:a}=r;return s?e.jsx("li",{id:d,role:"menuitem",onClick:t,onKeyDown:e=>A(e,t),"aria-current":!!n||void 0,tabIndex:-1,ref:e=>{g.current[o]=e},children:s(r,{selected:n,stickied:b})},o):e.jsxs(i.NavItem,{id:d,role:"menuitem",$isSelected:n&&b,onClick:t,onKeyDown:e=>A(e,t),"aria-current":!!n||void 0,tabIndex:-1,ref:e=>{g.current[o]=e},children:[n&&e.jsx(i.StyledTickIcon,{}),e.jsx(i.NavItemLabel,{$isSelected:n,children:a})]},o)})({handleClick:e=>((e,t,n)=>{c&&c(e,t,n),I(!1)})(e,t,n),isSelected:n===u,item:t,renderItem:v,index:n})))}),E&&b&&e.jsx(i.Backdrop,{onClick:()=>{I(!1)}})]})]})})),d="lifesg-ds-local-nav-dropdown-stylesheet",a="lifesg-ds-local-nav-dropdown-open";exports.LocalNavDropdown=o;
 //# sourceMappingURL=local-nav-dropdown.js.map

package/cjs/local-nav/local-nav-dropdown/local-nav-dropdown.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"local-nav-dropdown.js","sources":["../../../../src/local-nav/local-nav-dropdown/local-nav-dropdown.tsx"],"sourcesContent":["import React, { useEffect, useImperativeHandle, useRef, useState } from \"react\";\n\nimport { Typography } from \"../../typography\";\nimport { SimpleIdGenerator } from \"../../util\";\nimport type { LocalNavDropdownItemComponentProps } from \"../internal-types\";\nimport type { LocalNavDropdownProps, LocalNavItemProps } from \"../types\";\nimport {\n Backdrop,\n NavItem,\n NavItemLabel,\n NavItemList,\n NavSelect,\n NavSelectIcon,\n NavWrapper,\n StyledTickIcon,\n} from \"./local-nav-dropdown.styles\";\n\nconst Component = (\n {\n defaultLabel,\n stickyOffset = 0,\n onNavItemSelect,\n items,\n selectedItemIndex,\n id,\n \"data-testid\": testId,\n className,\n renderItem,\n }: LocalNavDropdownProps,\n ref: React.Ref<HTMLElement>\n): JSX.Element => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const detectStickyRef = useRef<HTMLSpanElement>(null);\n const dropdownRef = useRef<HTMLDivElement>(null);\n const navWrapperRef = useRef<HTMLElement>(null);\n const listItemRefs = useRef<(HTMLLIElement \| null)[]>([]);\n const [isStickied, setIsStickied] = useState<boolean>(false);\n const [isDropdownExpanded, setIsDropdownExpanded] =\n useState<boolean>(false);\n const [viewportHeight, setViewportHeight] = useState(0);\n const [dropdowntHeight, setDropdownHeight] = useState(0);\n const [dynamicMargin, setDynamicMargin] = useState(0);\n const [focusedIndex, setFocusedIndex] = useState(0);\n const navTestId = testId \|\| \"local-nav-dropdown\";\n const [dropdownListId] = useState(() => SimpleIdGenerator.generate());\n\n useImperativeHandle(ref, () => navWrapperRef.current!);\n\n const labelText =\n typeof selectedItemIndex === \"number\" &&\n selectedItemIndex >= 0 &&\n isStickied\n ? items[selectedItemIndex].title\n : defaultLabel;\n\n // =============================================================================\n // EFFECTS, EVENT LISTENERS\n // ============================================================================\n\n useEffect(() => {\n if (dropdownRef.current) {\n const dropdownHeight =\n dropdownRef.current.getBoundingClientRect().height;\n setDropdownHeight(dropdownHeight);\n }\n }, []);\n\n useEffect(() => {\n addStylesheetForDocumentBody();\n return () => {\n applyBodyStyleClass(\"remove\");\n };\n }, []);\n\n useEffect(() => {\n if (isDropdownExpanded && isStickied) {\n applyBodyStyleClass(\"add\");\n } else {\n applyBodyStyleClass(\"remove\");\n }\n }, [isDropdownExpanded, isStickied]);\n\n useEffect(() => {\n setViewportHeight(window.innerHeight);\n const handleResize = () => {\n setViewportHeight(window.innerHeight);\n };\n window.addEventListener(\"resize\", handleResize);\n return () => window.removeEventListener(\"resize\", handleResize);\n }, []);\n\n useEffect(() => {\n const callback = (entries: IntersectionObserverEntry[]) => {\n const [entry] = entries;\n setIsStickied(!entry.isIntersecting);\n };\n\n const observer = new IntersectionObserver(callback, {\n threshold: 1,\n rootMargin: `-${stickyOffset}px 0px 0px 0px`,\n });\n\n if (detectStickyRef.current) {\n observer.observe(detectStickyRef.current);\n }\n\n return () => observer.disconnect();\n }, [stickyOffset]);\n\n useEffect(() => {\n const adjustPadding = () => {\n const dropdown = navWrapperRef?.current;\n if (dropdown) {\n const dropdownRect = dropdown.getBoundingClientRect();\n const spaceToRight =\n document.body.clientWidth - dropdownRect.right;\n const spaceToLeft = dropdownRect.left;\n // Calculate the padding needed to balance the dropdown in the viewport\n const sidePadding = Math.max(spaceToRight, spaceToLeft);\n setDynamicMargin(sidePadding);\n }\n };\n adjustPadding();\n\n window.addEventListener(\"resize\", adjustPadding);\n\n return () => {\n window.removeEventListener(\"resize\", adjustPadding);\n };\n }, []);\n\n useEffect(() => {\n if (isDropdownExpanded) {\n listItemRefs.current[focusedIndex]?.focus();\n }\n }, [isDropdownExpanded, focusedIndex]);\n\n // =============================================================================\n // HELPER FUNCTIONS\n // =============================================================================\n\n const addStylesheetForDocumentBody = () => {\n /*\n This stylesheet is to manipulate the <body>. We only add once\n */\n if (!document.getElementById(STYLESHEET_ID)) {\n const overlayStyleSheet = document.createElement(\"style\");\n overlayStyleSheet.id = STYLESHEET_ID;\n\n const documentWidth = document.documentElement.clientWidth;\n const windowWidth = window.innerWidth;\n const scrollBarWidth = windowWidth - documentWidth;\n\n overlayStyleSheet.innerHTML = `\n\t\t\t\t.${DROPDOWN_OPEN_CLASSNAME} {\n\t\t\t\t\toverflow: hidden;\n\t\t\t\t\tpadding-right: ${scrollBarWidth}px !important;\n\t\t\t\t\t-ms-overflow-style: none;\n\t\t\t\t\tscrollbar-width: none;\n\t\t\t\t}\n\n\t\t\t\t.${DROPDOWN_OPEN_CLASSNAME}::-webkit-scrollbar {\n\t\t\t\t\tdisplay: none;\n\t\t\t\t}\n\t\t\t`;\n\n document.body.appendChild(overlayStyleSheet);\n }\n };\n\n const applyBodyStyleClass = (action: \"add\" \| \"remove\") => {\n const isOverlayStyleClassApplied = document.body.classList.contains(\n DROPDOWN_OPEN_CLASSNAME\n );\n\n if (action === \"add\" && !isOverlayStyleClassApplied) {\n document.body.classList.add(DROPDOWN_OPEN_CLASSNAME);\n } else if (action === \"remove\" && isOverlayStyleClassApplied) {\n document.body.classList.remove(DROPDOWN_OPEN_CLASSNAME);\n }\n };\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n\n const handleToggleDropdown = () => {\n setIsDropdownExpanded((prev) => !prev);\n };\n\n const handleDismissBackdrop = () => {\n setIsDropdownExpanded(false);\n };\n\n const handleNavItemClick = (\n e: React.MouseEvent<HTMLElement> \| React.KeyboardEvent<HTMLElement>,\n item: LocalNavItemProps,\n index: number\n ) => {\n if (onNavItemSelect) {\n onNavItemSelect(e, item, index);\n }\n setIsDropdownExpanded(false);\n };\n\n const handleNavItemKeyDown = (\n e: React.KeyboardEvent<HTMLElement>,\n handleClick: (\n e: React.MouseEvent<HTMLElement> \| React.KeyboardEvent<HTMLElement>\n ) => void\n ) => {\n const { key } = e;\n\n if (key === \"Enter\" \|\| key === \" \") {\n e.preventDefault();\n handleClick(e);\n }\n };\n\n const handleNavSelectKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {\n const { key } = e;\n\n if (key === \"ArrowDown\") {\n e.preventDefault();\n if (!isDropdownExpanded) {\n setIsDropdownExpanded(true);\n }\n setFocusedIndex(0);\n } else if (key === \"ArrowUp\") {\n e.preventDefault();\n if (!isDropdownExpanded) {\n setIsDropdownExpanded(true);\n }\n setFocusedIndex(items.length - 1);\n } else if (key === \"Enter\" \|\| key === \" \") {\n e.preventDefault();\n setIsDropdownExpanded(true);\n setFocusedIndex(0);\n } else if (key === \"Tab\") {\n setIsDropdownExpanded(false);\n } else if (key === \"Escape\") {\n setIsDropdownExpanded(false);\n }\n };\n\n const handleNavItemListKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {\n const { key } = e;\n\n if (key === \"ArrowDown\") {\n e.preventDefault();\n const nextIndex = (focusedIndex + 1) % items.length;\n setFocusedIndex(nextIndex);\n } else if (key === \"ArrowUp\") {\n e.preventDefault();\n const prevIndex =\n focusedIndex > 0 ? focusedIndex - 1 : items.length - 1;\n setFocusedIndex(prevIndex);\n } else if (key === \"Tab\") {\n setIsDropdownExpanded(false);\n } else if (key === \"Escape\") {\n setIsDropdownExpanded(false);\n dropdownRef.current?.focus();\n }\n };\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n\n const renderDropdownNavItem = ({\n handleClick,\n isSelected,\n item,\n renderItem,\n index,\n }: LocalNavDropdownItemComponentProps) => {\n const { id, title } = item;\n\n if (renderItem) {\n return (\n <li\n id={id}\n key={index}\n role=\"menuitem\"\n onClick={handleClick}\n onKeyDown={(e) => handleNavItemKeyDown(e, handleClick)}\n aria-current={isSelected ? true : undefined}\n tabIndex={-1}\n ref={(el) => {\n listItemRefs.current[index] = el;\n }}\n >\n {renderItem(item, {\n selected: isSelected,\n stickied: isStickied,\n })}\n </li>\n );\n }\n\n return (\n <NavItem\n id={id}\n key={index}\n role=\"menuitem\"\n $isSelected={isSelected && isStickied}\n onClick={handleClick}\n onKeyDown={(e) => handleNavItemKeyDown(e, handleClick)}\n aria-current={isSelected ? true : undefined}\n tabIndex={-1}\n ref={(el) => {\n listItemRefs.current[index] = el as HTMLLIElement;\n }}\n >\n {isSelected && <StyledTickIcon />}\n <NavItemLabel $isSelected={isSelected}>{title}</NavItemLabel>\n </NavItem>\n );\n };\n\n return (\n <>\n <span ref={detectStickyRef} data-testid={\"sticky-ref\"} />\n <NavWrapper\n $isStickied={isStickied}\n $sideMargin={dynamicMargin}\n $stickyOffset={stickyOffset}\n ref={navWrapperRef}\n id={id}\n data-testid={navTestId}\n className={className}\n >\n <NavSelect\n ref={dropdownRef}\n role=\"button\"\n onClick={handleToggleDropdown}\n onKeyDown={handleNavSelectKeyDown}\n data-testid={`${navTestId}-label`}\n $isDropdownExpanded={isDropdownExpanded}\n aria-haspopup=\"true\"\n aria-expanded={isDropdownExpanded}\n aria-controls={dropdownListId}\n tabIndex={0}\n >\n <Typography.BodyBL weight=\"semibold\">\n {labelText}\n </Typography.BodyBL>\n <NavSelectIcon $isDropdownExpanded={isDropdownExpanded} />\n </NavSelect>\n {isDropdownExpanded && (\n <NavItemList\n id={dropdownListId}\n role=\"menu\"\n onKeyDown={handleNavItemListKeyDown}\n data-testid={`${navTestId}-dropdown-list`}\n $viewportHeight={\n viewportHeight - dropdowntHeight - stickyOffset\n }\n >\n {items.map((item, i) =>\n renderDropdownNavItem({\n handleClick: (e) =>\n handleNavItemClick(e, item, i),\n isSelected: i === selectedItemIndex,\n item,\n renderItem,\n index: i,\n })\n )}\n </NavItemList>\n )}\n {isDropdownExpanded && isStickied && (\n <Backdrop onClick={handleDismissBackdrop} />\n )}\n </NavWrapper>\n </>\n );\n};\n\nexport const LocalNavDropdown = React.forwardRef(Component);\n\n// =============================================================================\n// CONSTANTS\n// =============================================================================\nconst STYLESHEET_ID = \"lifesg-ds-local-nav-dropdown-stylesheet\";\nconst DROPDOWN_OPEN_CLASSNAME = \"lifesg-ds-local-nav-dropdown-open\";\n"],"names":["LocalNavDropdown","React","forwardRef","defaultLabel","stickyOffset","onNavItemSelect","items","selectedItemIndex","id","testId","className","renderItem","ref","detectStickyRef","useRef","dropdownRef","navWrapperRef","listItemRefs","isStickied","setIsStickied","useState","isDropdownExpanded","setIsDropdownExpanded","viewportHeight","setViewportHeight","dropdowntHeight","setDropdownHeight","dynamicMargin","setDynamicMargin","focusedIndex","setFocusedIndex","navTestId","dropdownListId","SimpleIdGenerator","generate","useImperativeHandle","current","labelText","title","useEffect","dropdownHeight","getBoundingClientRect","height","addStylesheetForDocumentBody","applyBodyStyleClass","window","innerHeight","handleResize","addEventListener","removeEventListener","observer","IntersectionObserver","entries","entry","isIntersecting","threshold","rootMargin","observe","disconnect","adjustPadding","dropdown","dropdownRect","spaceToRight","document","body","clientWidth","right","spaceToLeft","left","sidePadding","Math","max","_a","focus","getElementById","STYLESHEET_ID","overlayStyleSheet","createElement","documentWidth","documentElement","scrollBarWidth","innerWidth","innerHTML","DROPDOWN_OPEN_CLASSNAME","appendChild","action","isOverlayStyleClassApplied","classList","contains","remove","add","handleNavItemKeyDown","e","handleClick","key","preventDefault","_jsxs","_Fragment","children","_jsx","NavWrapper","$isStickied","$sideMargin","$stickyOffset","NavSelect","role","onClick","prev","onKeyDown","length","$isDropdownExpanded","tabIndex","Typography","BodyBL","weight","NavSelectIcon","NavItemList","nextIndex","prevIndex","$viewportHeight","map","item","i","isSelected","index","undefined","el","selected","stickied","NavItem","$isSelected","StyledTickIcon","NavItemLabel","renderDropdownNavItem","handleNavItemClick","Backdrop"],"mappings":"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"}
1	+ {"version":3,"file":"local-nav-dropdown.js","sources":["../../../../src/local-nav/local-nav-dropdown/local-nav-dropdown.tsx"],"sourcesContent":["import React, { useEffect, useImperativeHandle, useRef, useState } from \"react\";\n\nimport { Typography } from \"../../typography\";\nimport { useId } from \"../../util\";\nimport type { LocalNavDropdownItemComponentProps } from \"../internal-types\";\nimport type { LocalNavDropdownProps, LocalNavItemProps } from \"../types\";\nimport {\n Backdrop,\n NavItem,\n NavItemLabel,\n NavItemList,\n NavSelect,\n NavSelectIcon,\n NavWrapper,\n StyledTickIcon,\n} from \"./local-nav-dropdown.styles\";\n\nconst Component = (\n {\n defaultLabel,\n stickyOffset = 0,\n onNavItemSelect,\n items,\n selectedItemIndex,\n id,\n \"data-testid\": testId,\n className,\n renderItem,\n }: LocalNavDropdownProps,\n ref: React.Ref<HTMLElement>\n): JSX.Element => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const detectStickyRef = useRef<HTMLSpanElement>(null);\n const dropdownRef = useRef<HTMLDivElement>(null);\n const navWrapperRef = useRef<HTMLElement>(null);\n const listItemRefs = useRef<(HTMLLIElement \| null)[]>([]);\n const [isStickied, setIsStickied] = useState<boolean>(false);\n const [isDropdownExpanded, setIsDropdownExpanded] =\n useState<boolean>(false);\n const [viewportHeight, setViewportHeight] = useState(0);\n const [dropdowntHeight, setDropdownHeight] = useState(0);\n const [dynamicMargin, setDynamicMargin] = useState(0);\n const [focusedIndex, setFocusedIndex] = useState(0);\n const navTestId = testId \|\| \"local-nav-dropdown\";\n const dropdownListId = useId();\n\n useImperativeHandle(ref, () => navWrapperRef.current!);\n\n const labelText =\n typeof selectedItemIndex === \"number\" &&\n selectedItemIndex >= 0 &&\n isStickied\n ? items[selectedItemIndex].title\n : defaultLabel;\n\n // =============================================================================\n // EFFECTS, EVENT LISTENERS\n // ============================================================================\n\n useEffect(() => {\n if (dropdownRef.current) {\n const dropdownHeight =\n dropdownRef.current.getBoundingClientRect().height;\n setDropdownHeight(dropdownHeight);\n }\n }, []);\n\n useEffect(() => {\n addStylesheetForDocumentBody();\n return () => {\n applyBodyStyleClass(\"remove\");\n };\n }, []);\n\n useEffect(() => {\n if (isDropdownExpanded && isStickied) {\n applyBodyStyleClass(\"add\");\n } else {\n applyBodyStyleClass(\"remove\");\n }\n }, [isDropdownExpanded, isStickied]);\n\n useEffect(() => {\n setViewportHeight(window.innerHeight);\n const handleResize = () => {\n setViewportHeight(window.innerHeight);\n };\n window.addEventListener(\"resize\", handleResize);\n return () => window.removeEventListener(\"resize\", handleResize);\n }, []);\n\n useEffect(() => {\n const callback = (entries: IntersectionObserverEntry[]) => {\n const [entry] = entries;\n setIsStickied(!entry.isIntersecting);\n };\n\n const observer = new IntersectionObserver(callback, {\n threshold: 1,\n rootMargin: `-${stickyOffset}px 0px 0px 0px`,\n });\n\n if (detectStickyRef.current) {\n observer.observe(detectStickyRef.current);\n }\n\n return () => observer.disconnect();\n }, [stickyOffset]);\n\n useEffect(() => {\n const adjustPadding = () => {\n const dropdown = navWrapperRef?.current;\n if (dropdown) {\n const dropdownRect = dropdown.getBoundingClientRect();\n const spaceToRight =\n document.body.clientWidth - dropdownRect.right;\n const spaceToLeft = dropdownRect.left;\n // Calculate the padding needed to balance the dropdown in the viewport\n const sidePadding = Math.max(spaceToRight, spaceToLeft);\n setDynamicMargin(sidePadding);\n }\n };\n adjustPadding();\n\n window.addEventListener(\"resize\", adjustPadding);\n\n return () => {\n window.removeEventListener(\"resize\", adjustPadding);\n };\n }, []);\n\n useEffect(() => {\n if (isDropdownExpanded) {\n listItemRefs.current[focusedIndex]?.focus();\n }\n }, [isDropdownExpanded, focusedIndex]);\n\n // =============================================================================\n // HELPER FUNCTIONS\n // =============================================================================\n\n const addStylesheetForDocumentBody = () => {\n /*\n This stylesheet is to manipulate the <body>. We only add once\n */\n if (!document.getElementById(STYLESHEET_ID)) {\n const overlayStyleSheet = document.createElement(\"style\");\n overlayStyleSheet.id = STYLESHEET_ID;\n\n const documentWidth = document.documentElement.clientWidth;\n const windowWidth = window.innerWidth;\n const scrollBarWidth = windowWidth - documentWidth;\n\n overlayStyleSheet.innerHTML = `\n\t\t\t\t.${DROPDOWN_OPEN_CLASSNAME} {\n\t\t\t\t\toverflow: hidden;\n\t\t\t\t\tpadding-right: ${scrollBarWidth}px !important;\n\t\t\t\t\t-ms-overflow-style: none;\n\t\t\t\t\tscrollbar-width: none;\n\t\t\t\t}\n\n\t\t\t\t.${DROPDOWN_OPEN_CLASSNAME}::-webkit-scrollbar {\n\t\t\t\t\tdisplay: none;\n\t\t\t\t}\n\t\t\t`;\n\n document.body.appendChild(overlayStyleSheet);\n }\n };\n\n const applyBodyStyleClass = (action: \"add\" \| \"remove\") => {\n const isOverlayStyleClassApplied = document.body.classList.contains(\n DROPDOWN_OPEN_CLASSNAME\n );\n\n if (action === \"add\" && !isOverlayStyleClassApplied) {\n document.body.classList.add(DROPDOWN_OPEN_CLASSNAME);\n } else if (action === \"remove\" && isOverlayStyleClassApplied) {\n document.body.classList.remove(DROPDOWN_OPEN_CLASSNAME);\n }\n };\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n\n const handleToggleDropdown = () => {\n setIsDropdownExpanded((prev) => !prev);\n };\n\n const handleDismissBackdrop = () => {\n setIsDropdownExpanded(false);\n };\n\n const handleNavItemClick = (\n e: React.MouseEvent<HTMLElement> \| React.KeyboardEvent<HTMLElement>,\n item: LocalNavItemProps,\n index: number\n ) => {\n if (onNavItemSelect) {\n onNavItemSelect(e, item, index);\n }\n setIsDropdownExpanded(false);\n };\n\n const handleNavItemKeyDown = (\n e: React.KeyboardEvent<HTMLElement>,\n handleClick: (\n e: React.MouseEvent<HTMLElement> \| React.KeyboardEvent<HTMLElement>\n ) => void\n ) => {\n const { key } = e;\n\n if (key === \"Enter\" \|\| key === \" \") {\n e.preventDefault();\n handleClick(e);\n }\n };\n\n const handleNavSelectKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {\n const { key } = e;\n\n if (key === \"ArrowDown\") {\n e.preventDefault();\n if (!isDropdownExpanded) {\n setIsDropdownExpanded(true);\n }\n setFocusedIndex(0);\n } else if (key === \"ArrowUp\") {\n e.preventDefault();\n if (!isDropdownExpanded) {\n setIsDropdownExpanded(true);\n }\n setFocusedIndex(items.length - 1);\n } else if (key === \"Enter\" \|\| key === \" \") {\n e.preventDefault();\n setIsDropdownExpanded(true);\n setFocusedIndex(0);\n } else if (key === \"Tab\") {\n setIsDropdownExpanded(false);\n } else if (key === \"Escape\") {\n setIsDropdownExpanded(false);\n }\n };\n\n const handleNavItemListKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {\n const { key } = e;\n\n if (key === \"ArrowDown\") {\n e.preventDefault();\n const nextIndex = (focusedIndex + 1) % items.length;\n setFocusedIndex(nextIndex);\n } else if (key === \"ArrowUp\") {\n e.preventDefault();\n const prevIndex =\n focusedIndex > 0 ? focusedIndex - 1 : items.length - 1;\n setFocusedIndex(prevIndex);\n } else if (key === \"Tab\") {\n setIsDropdownExpanded(false);\n } else if (key === \"Escape\") {\n setIsDropdownExpanded(false);\n dropdownRef.current?.focus();\n }\n };\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n\n const renderDropdownNavItem = ({\n handleClick,\n isSelected,\n item,\n renderItem,\n index,\n }: LocalNavDropdownItemComponentProps) => {\n const { id, title } = item;\n\n if (renderItem) {\n return (\n <li\n id={id}\n key={index}\n role=\"menuitem\"\n onClick={handleClick}\n onKeyDown={(e) => handleNavItemKeyDown(e, handleClick)}\n aria-current={isSelected ? true : undefined}\n tabIndex={-1}\n ref={(el) => {\n listItemRefs.current[index] = el;\n }}\n >\n {renderItem(item, {\n selected: isSelected,\n stickied: isStickied,\n })}\n </li>\n );\n }\n\n return (\n <NavItem\n id={id}\n key={index}\n role=\"menuitem\"\n $isSelected={isSelected && isStickied}\n onClick={handleClick}\n onKeyDown={(e) => handleNavItemKeyDown(e, handleClick)}\n aria-current={isSelected ? true : undefined}\n tabIndex={-1}\n ref={(el) => {\n listItemRefs.current[index] = el as HTMLLIElement;\n }}\n >\n {isSelected && <StyledTickIcon />}\n <NavItemLabel $isSelected={isSelected}>{title}</NavItemLabel>\n </NavItem>\n );\n };\n\n return (\n <>\n <span ref={detectStickyRef} data-testid={\"sticky-ref\"} />\n <NavWrapper\n $isStickied={isStickied}\n $sideMargin={dynamicMargin}\n $stickyOffset={stickyOffset}\n ref={navWrapperRef}\n id={id}\n data-testid={navTestId}\n className={className}\n >\n <NavSelect\n ref={dropdownRef}\n role=\"button\"\n onClick={handleToggleDropdown}\n onKeyDown={handleNavSelectKeyDown}\n data-testid={`${navTestId}-label`}\n $isDropdownExpanded={isDropdownExpanded}\n aria-haspopup=\"true\"\n aria-expanded={isDropdownExpanded}\n aria-controls={dropdownListId}\n tabIndex={0}\n >\n <Typography.BodyBL weight=\"semibold\">\n {labelText}\n </Typography.BodyBL>\n <NavSelectIcon $isDropdownExpanded={isDropdownExpanded} />\n </NavSelect>\n {isDropdownExpanded && (\n <NavItemList\n id={dropdownListId}\n role=\"menu\"\n onKeyDown={handleNavItemListKeyDown}\n data-testid={`${navTestId}-dropdown-list`}\n $viewportHeight={\n viewportHeight - dropdowntHeight - stickyOffset\n }\n >\n {items.map((item, i) =>\n renderDropdownNavItem({\n handleClick: (e) =>\n handleNavItemClick(e, item, i),\n isSelected: i === selectedItemIndex,\n item,\n renderItem,\n index: i,\n })\n )}\n </NavItemList>\n )}\n {isDropdownExpanded && isStickied && (\n <Backdrop onClick={handleDismissBackdrop} />\n )}\n </NavWrapper>\n </>\n );\n};\n\nexport const LocalNavDropdown = React.forwardRef(Component);\n\n// =============================================================================\n// CONSTANTS\n// =============================================================================\nconst STYLESHEET_ID = \"lifesg-ds-local-nav-dropdown-stylesheet\";\nconst DROPDOWN_OPEN_CLASSNAME = \"lifesg-ds-local-nav-dropdown-open\";\n"],"names":["LocalNavDropdown","React","forwardRef","defaultLabel","stickyOffset","onNavItemSelect","items","selectedItemIndex","id","testId","className","renderItem","ref","detectStickyRef","useRef","dropdownRef","navWrapperRef","listItemRefs","isStickied","setIsStickied","useState","isDropdownExpanded","setIsDropdownExpanded","viewportHeight","setViewportHeight","dropdowntHeight","setDropdownHeight","dynamicMargin","setDynamicMargin","focusedIndex","setFocusedIndex","navTestId","dropdownListId","useId","useImperativeHandle","current","labelText","title","useEffect","dropdownHeight","getBoundingClientRect","height","addStylesheetForDocumentBody","applyBodyStyleClass","window","innerHeight","handleResize","addEventListener","removeEventListener","observer","IntersectionObserver","entries","entry","isIntersecting","threshold","rootMargin","observe","disconnect","adjustPadding","dropdown","dropdownRect","spaceToRight","document","body","clientWidth","right","spaceToLeft","left","sidePadding","Math","max","_a","focus","getElementById","STYLESHEET_ID","overlayStyleSheet","createElement","documentWidth","documentElement","scrollBarWidth","innerWidth","innerHTML","DROPDOWN_OPEN_CLASSNAME","appendChild","action","isOverlayStyleClassApplied","classList","contains","remove","add","handleNavItemKeyDown","e","handleClick","key","preventDefault","_jsxs","_Fragment","children","_jsx","NavWrapper","$isStickied","$sideMargin","$stickyOffset","NavSelect","role","onClick","prev","onKeyDown","length","$isDropdownExpanded","tabIndex","Typography","BodyBL","weight","NavSelectIcon","NavItemList","nextIndex","prevIndex","$viewportHeight","map","item","i","isSelected","index","undefined","el","selected","stickied","NavItem","$isSelected","StyledTickIcon","NavItemLabel","renderDropdownNavItem","handleNavItemClick","Backdrop"],"mappings":"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"}

package/cjs/markup/markup.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),t=require("react"),s=require("./markup.style.js");const i=t.forwardRef(((t,i)=>{const{baseTextColor:a,baseTextSize:n,inline:o}=t,u=e.__rest(t,["baseTextColor","baseTextSize","inline"]);return r.jsx(s.Container,Object.assign({ref:i,as:o?"span":"div",$textSize:n,$textColor:a},u))}));exports.Markup=i;
+"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),s=require("clsx"),t=require("react");require("../theme/theme-provider/index.js"),require("../theme/theme-provider/context.js"),require("../theme/tokens/border.js"),require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js");var i=require("../theme/utils/font.js"),u=require("../theme/utils/use-apply-styles.js");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var a=require("../util/merge-refs.js");require("../util/simple-id-generator.js"),require("../util/string-helper.js"),require("@react-aria/live-announcer");var l=require("./markup.style.js"),n=require("./markup.utils.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var m=o(s);const j=t.forwardRef(((s,o)=>{const{baseTextColor:j,baseTextSize:c,inline:q,className:p}=s,d=e.__rest(s,["baseTextColor","baseTextSize","inline","className"]),f=t.useRef(null),h=t.useMemo((()=>a.mergeRefs(f,o)),[o]),x=t.useMemo((()=>{if(c)return i.generateFontProperties(c,"regular")}),[c]),b=t.useMemo((()=>Object.assign({color:j||null},n.createMarkupFontStyles(x))),[j,x]);u.useApplyStyle(f,b);const k=m.default(l.baseMarkup,c&&l.sizedMarkup,p),v=q?"span":"div";return r.jsx(v,Object.assign({ref:h,className:k},d))}));exports.Markup=j;
 //# sourceMappingURL=markup.js.map

package/cjs/markup/markup.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"markup.js","sources":["../../../src/markup/markup.tsx"],"sourcesContent":["import type React from \"react\";\nimport { forwardRef } from \"react\";\n\nimport { ~~Container~~ } from \"./markup.style\";\nimport type { MarkupProps } from \"./types\";\n\nconst Component = (props: MarkupProps, ref: React.Ref<HTMLDivElement>) => {\n // =========================================================================\n // CONST, STATE, REF\n // =========================================================================\n const { baseTextColor, baseTextSize, inline, ...otherProps } = props;\n\n // ~~=========================================================================\~~n // ~~RENDER~~ ~~FUNCTION~~\n // ~~=========================================================================\~~n return (\n ~~<Container~~\n ~~ref={ref~~}\n as={inline ? \"span\" : \"div\"}\n ~~$textSize~~={~~baseTextSize~~}\n ~~$textColor~~={~~baseTextColor~~}\n {...otherProps}\n />\n );\n};\n\nexport const Markup = forwardRef(Component);\n"],"names":["Markup","forwardRef","props","ref","baseTextColor","baseTextSize","inline","otherProps","__rest","~~_jsx~~","~~Container~~","Object","assign","as","~~$textSize~~","~~$textColor~~"],"mappings":"~~qIAMA~~,~~MAoBaA~~,EAASC,EAAAA,~~YApBJ~~,CAACC,EAAoBC,KAInC,MAAMC,cAAEA,EAAaC,aAAEA,EAAYC,OAAEA,~~GAA0BJ~~,~~EAAfK~~,EAAUC,EAAAA,~~OAAKN~~,~~EAAzD~~,CAAA,gBAAA,eAAA,~~WAKN~~,~~OACIO~~,EAAAA,~~IAACC~~,EAAAA,~~UAASC~~,OAAAC,OAAA,~~CACNT~~,~~IAAKA~~,~~EACLU~~,~~GAAIP~~,EAAS,OAAS,~~MAAKQ~~,~~UAChBT~~,~~EAAYU~~,~~WACXX~~,~~GACRG~~,GACN"}
1	+ {"version":3,"file":"markup.js","sources":["../../../src/markup/markup.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport type React from \"react\";\nimport { forwardRef, useMemo, useRef } from \"react\";\n\nimport { generateFontProperties, useApplyStyle } from \"../theme\";\nimport { mergeRefs } from \"../util\";\nimport * as styles from \"./markup.style\";\nimport { createMarkupFontStyles } from \"./markup.utils\";\nimport type { MarkupProps } from \"./types\";\n\nconst Component = (props: MarkupProps, ref: React.Ref<HTMLDivElement>) => {\n // =========================================================================\n // CONST, STATE, REF\n // =========================================================================\n const { baseTextColor, baseTextSize, inline, className, ...otherProps } =\n props;\n\n const containerRef = useRef<HTMLDivElement \| HTMLSpanElement>(null);\n const mergedRef = useMemo(() => mergeRefs(containerRef, ref), [ref]);\n\n const fontDeclarations = useMemo(() => {\n if (!baseTextSize) {\n return undefined;\n }\n\n return generateFontProperties(baseTextSize, \"regular\");\n }, [baseTextSize]);\n\n const appliedStyles = useMemo(\n () => ({\n color: baseTextColor \|\| null,\n ...createMarkupFontStyles(fontDeclarations),\n }),\n [baseTextColor, fontDeclarations]\n );\n\n useApplyStyle(containerRef, appliedStyles);\n\n const mergedClassName = clsx(\n styles.baseMarkup,\n baseTextSize && styles.sizedMarkup,\n className\n );\n\n const ElementTag = inline ? \"span\" : \"div\";\n\n return (\n <ElementTag\n ref={mergedRef as React.Ref<HTMLDivElement & HTMLSpanElement>}\n className={mergedClassName}\n {...otherProps}\n />\n );\n};\n\nexport const Markup = forwardRef(Component);\n"],"names":["Markup","forwardRef","props","ref","baseTextColor","baseTextSize","inline","className","otherProps","__rest","containerRef","useRef","mergedRef","useMemo","mergeRefs","fontDeclarations","generateFontProperties","appliedStyles","Object","assign","color","createMarkupFontStyles","useApplyStyle","mergedClassName","clsx","styles.baseMarkup","styles.sizedMarkup","ElementTag","_jsx"],"mappings":"i0BAUA,MA6CaA,EAASC,EAAAA,YA7CJ,CAACC,EAAoBC,KAInC,MAAMC,cAAEA,EAAaC,aAAEA,EAAYC,OAAEA,EAAMC,UAAEA,GACzCL,EADuDM,EAAUC,EAAAA,OACjEP,EADE,CAAA,gBAAA,eAAA,SAAA,cAGAQ,EAAeC,EAAAA,OAAyC,MACxDC,EAAYC,EAAAA,SAAQ,IAAMC,EAAAA,UAAUJ,EAAcP,IAAM,CAACA,IAEzDY,EAAmBF,EAAAA,SAAQ,KAC7B,GAAKR,EAIL,OAAOW,EAAAA,uBAAuBX,EAAc,UAAU,GACvD,CAACA,IAEEY,EAAgBJ,EAAAA,SAClB,IAAMK,OAAAC,OAAA,CACFC,MAAOhB,GAAiB,MACrBiB,EAAAA,uBAAuBN,KAE9B,CAACX,EAAeW,IAGpBO,EAAAA,cAAcZ,EAAcO,GAE5B,MAAMM,EAAkBC,EAAAA,QACpBC,EAAAA,WACApB,GAAgBqB,EAAAA,YAChBnB,GAGEoB,EAAarB,EAAS,OAAS,MAErC,OACIsB,MAACD,EAAUT,OAAAC,OAAA,CACPhB,IAAKS,EACLL,UAAWgB,GACPf,GACN"}

package/cjs/markup/markup.style.js CHANGED Viewed

@@ -1,7 +1,2 @@
-"use strict";var t=require("styled-components"),e=require("../shared/html-content/html-content.js");function o(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}const n=o(t).default.div`
-    ${t=>e.applyHtmlContentStyle({textSize:t.$textSize})}
-    ${e=>e.$textColor&&t.css`
-            color: ${e.$textColor};
-        `}
-`;exports.Container=n;
+"use strict";require("./markup.style_1iu40x9.css");exports.baseMarkup="b2c8sfe",exports.sizedMarkup="stfuo83",exports.tokens={rootFontFamily:"--fds-internal-markup-root-fontFamily",rootFontVariant:"--fds-internal-markup-root-fontVariant",rootFontSize:"--fds-internal-markup-root-fontSize",rootFontWeight:"--fds-internal-markup-root-fontWeight",rootLineHeight:"--fds-internal-markup-root-lineHeight",rootLetterSpacing:"--fds-internal-markup-root-letterSpacing"};
 //# sourceMappingURL=markup.style.js.map

package/cjs/markup/markup.style.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"markup.style.js","sources":["../../../src/markup/markup.style.~~tsx~~"],"sourcesContent":["import ~~styled,~~ { css } from \"~~styled-components~~\";\n\nimport { ~~applyHtmlContentStyle~~ } from \"../~~shared~~/~~html-content~~/~~html-content~~\";\nimport ~~type~~ { ~~V3_TypographySizeType~~ } from \"../~~v3_theme~~/font~~/types~~\";\~~nimport~~ ~~type~~ { ~~V3_ThemeStyleProps~~ } ~~from~~ \"~~../v3_theme/types~~\";\n\n// ~~=============================================================================\~~n// ~~STYLE~~ ~~INTERFACES~~\n// ~~=============================================================================\ninterface~~ ~~ContainerStyleProps~~ {\n $~~textSize?:~~ ~~V3_TypographySizeType~~ \| ~~undefined~~;\n $~~textColor?:~~ ~~string~~ \| ~~((props~~: ~~V3_ThemeStyleProps)~~ => ~~string)~~ \| ~~undefined~~;\n}\n\n// ~~=============================================================================\~~n// ~~STYLING~~\n~~// =============================================================================\~~nexport const ~~Container~~ = ~~styled.div<ContainerStyleProps>`\~~n ${~~(props~~) ~~=> applyHtmlContentStyle~~({ ~~textSize~~: ~~props.$textSize~~ })}\n ${~~(props~~) ~~=>\~~n ~~props.$textColor~~ ~~&&\~~n ~~css`\n color~~: ${~~props.$textColor~~};\n ~~`}\n~~`;\n"],"names":["~~Container~~","~~styled~~","~~div~~","~~props~~","~~applyHtmlContentStyle~~","~~textSize~~"~~,"$textSize","$textColor","css"~~],"mappings":"~~4KAiBO~~,~~MAAMA~~,~~OAAYC~~,~~QAAOC~~,~~GAAwB;MACjDC~~,~~GAAUC~~,~~EAAAA~~,~~sBAAsB~~,~~CAAEC~~,~~SAAUF~~,~~EAAMG;MAClDH~~,~~GACCA~~,~~EAAMI~~,~~YACNC~~,~~KAAG;qBACUL,EAAMI;;~~"}
1	+ {"version":3,"file":"markup.style.js","sources":["../../../src/markup/markup.style.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour } from \"../theme/tokens/colour\";\nimport { Font } from \"../theme/tokens/font\";\n\nexport const tokens = {\n rootFontFamily: \"--fds-internal-markup-root-fontFamily\",\n rootFontVariant: \"--fds-internal-markup-root-fontVariant\",\n rootFontSize: \"--fds-internal-markup-root-fontSize\",\n rootFontWeight: \"--fds-internal-markup-root-fontWeight\",\n rootLineHeight: \"--fds-internal-markup-root-lineHeight\",\n rootLetterSpacing: \"--fds-internal-markup-root-letterSpacing\",\n} as const;\n\nexport const baseMarkup = css`\n strong {\n font-weight: ${Font.Spec[\"weight-semibold\"]};\n }\n\n p {\n margin: 0;\n }\n\n a {\n font-weight: ${Font.Spec[\"weight-semibold\"]};\n color: ${Colour.hyperlink};\n text-decoration: underline;\n\n svg {\n color: ${Colour[\"icon-primary\"]};\n height: 1lh;\n width: 1em;\n margin-left: 0.4rem;\n vertical-align: middle;\n }\n\n &:hover,\n &:active,\n &:visited,\n &:focus {\n color: ${Colour[\"hyperlink-hover\"]};\n\n svg {\n color: ${Colour[\"icon-hover\"]};\n }\n }\n }\n\n ul,\n ol {\n margin: 0;\n padding: 0;\n margin-left: 2.5rem;\n }\n\n ol {\n list-style: decimal;\n }\n\n ul {\n list-style: disc;\n }\n`;\n\nexport const sizedMarkup = css`\n font-family: var(${tokens.rootFontFamily}, inherit);\n font-variant: var(${tokens.rootFontVariant}, inherit);\n font-size: var(${tokens.rootFontSize}, inherit);\n font-weight: var(${tokens.rootFontWeight}, inherit);\n line-height: var(${tokens.rootLineHeight}, inherit);\n letter-spacing: var(${tokens.rootLetterSpacing}, inherit);\n`;\n"],"names":["rootFontFamily","rootFontVariant","rootFontSize","rootFontWeight","rootLineHeight","rootLetterSpacing"],"mappings":"4FAcuB,8BAkDC,yBA3DF,CAClBA,eAAgB,wCAChBC,gBAAiB,yCACjBC,aAAc,sCACdC,eAAgB,wCAChBC,eAAgB,wCAChBC,kBAAmB"}

package/cjs/markup/markup.style_1iu40x9.css ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ .b2c8sfe strong{font-weight:var(--fds-font-weight-semibold);}.b2c8sfe p{margin:0;}.b2c8sfe a{font-weight:var(--fds-font-weight-semibold);color:var(--fds-colour-hyperlink);-webkit-text-decoration:underline;text-decoration:underline;}.b2c8sfe a svg{color:var(--fds-colour-icon-primary);height:1lh;width:1em;margin-left:0.4rem;vertical-align:middle;}.b2c8sfe a:hover,.b2c8sfe a:active,.b2c8sfe a:visited,.b2c8sfe a:focus{color:var(--fds-colour-hyperlink-hover);}.b2c8sfe a:hover svg,.b2c8sfe a:active svg,.b2c8sfe a:visited svg,.b2c8sfe a:focus svg{color:var(--fds-colour-icon-hover);}.b2c8sfe ul,.b2c8sfe ol{margin:0;padding:0;margin-left:2.5rem;}.b2c8sfe ol{list-style:decimal;}.b2c8sfe ul{list-style:disc;}
2	+ .stfuo83{font-family:var(--fds-internal-markup-root-fontFamily, inherit);font-variant:var(--fds-internal-markup-root-fontVariant, inherit);font-size:var(--fds-internal-markup-root-fontSize, inherit);font-weight:var(--fds-internal-markup-root-fontWeight, inherit);line-height:var(--fds-internal-markup-root-lineHeight, inherit);letter-spacing:var(--fds-internal-markup-root-letterSpacing, inherit);}

package/cjs/markup/markup.utils.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ "use strict";var t=require("./markup.style.js");const e={[t.tokens.rootFontFamily]:"font-family",[t.tokens.rootFontVariant]:"font-variant",[t.tokens.rootFontSize]:"font-size",[t.tokens.rootFontWeight]:"font-weight",[t.tokens.rootLineHeight]:"line-height",[t.tokens.rootLetterSpacing]:"letter-spacing"};exports.createMarkupFontStyles=t=>{return o=e,n=t,Object.fromEntries(Object.entries(o).map((([t,e])=>{var o;return[t,null!==(o=null==n?void 0:n[e])&&void 0!==o?o:null]})));var o,n};
2	+ //# sourceMappingURL=markup.utils.js.map

package/cjs/markup/markup.utils.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"markup.utils.js","sources":["../../../src/markup/markup.utils.ts"],"sourcesContent":["import type { ApplyStyleMap, FontDeclarationProperties } from \"../theme\";\nimport { tokens } from \"./markup.style\";\n\nconst rootFontTokenMap: Record<string, keyof FontDeclarationProperties> = {\n [tokens.rootFontFamily]: \"font-family\",\n [tokens.rootFontVariant]: \"font-variant\",\n [tokens.rootFontSize]: \"font-size\",\n [tokens.rootFontWeight]: \"font-weight\",\n [tokens.rootLineHeight]: \"line-height\",\n [tokens.rootLetterSpacing]: \"letter-spacing\",\n} as const;\n\nconst mapFontDeclarationsToStyles = (\n tokenMap: Record<string, keyof FontDeclarationProperties>,\n declarations?: FontDeclarationProperties\n) =>\n Object.fromEntries(\n Object.entries(tokenMap).map(([token, declarationKey]) => [\n token,\n declarations?.[declarationKey] ?? null,\n ])\n );\n\nexport const createMarkupFontStyles = (\n fontDeclarations?: FontDeclarationProperties\n): ApplyStyleMap =>\n mapFontDeclarationsToStyles(rootFontTokenMap, fontDeclarations);\n"],"names":["rootFontTokenMap","tokens","rootFontFamily","rootFontVariant","rootFontSize","rootFontWeight","rootLineHeight","rootLetterSpacing","fontDeclarations","mapFontDeclarationsToStyles","tokenMap","declarations","Object","fromEntries","entries","map","token","declarationKey","_a"],"mappings":"gDAGA,MAAMA,EAAoE,CACtE,CAACC,EAAAA,OAAOC,gBAAiB,cACzB,CAACD,EAAAA,OAAOE,iBAAkB,eAC1B,CAACF,EAAAA,OAAOG,cAAe,YACvB,CAACH,EAAAA,OAAOI,gBAAiB,cACzB,CAACJ,EAAAA,OAAOK,gBAAiB,cACzB,CAACL,EAAAA,OAAOM,mBAAoB,iDAe5BC,IAEAC,OAbAC,EAa4BV,EAZ5BW,EAY8CH,EAV9CI,OAAOC,YACHD,OAAOE,QAAQJ,GAAUK,KAAI,EAAEC,EAAOC,YAAoB,MAAA,CACtDD,EAC8B,QAA9BE,EAAAP,aAAY,EAAZA,EAAeM,UAAe,IAAAC,EAAAA,EAAI,KACrC,KAR2B,IAChCR,EACAC,CAY8D"}

package/cjs/masked-input/masked-input.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),a=require("@lifesg/react-icons/eye"),n=require("@lifesg/react-icons/eye-slash"),s=require("../external/lodash/lodash.js"),t=require("react"),i=require("../shared/accessibility/index.js");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var l=require("../util/simple-id-generator.js"),o=require("../util/string-helper.js"),u=require("./masked-input.style.js");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const c=d(t).default.forwardRef(((d,c)=>{var k,{value:m,readOnly:g,"data-testid":f,maskRange:p,unmaskRange:h,maskRegex:j,maskTransformer:v,iconMask:x=r.jsx(n.EyeSlashIcon,{}),iconUnmask:y=r.jsx(a.EyeIcon,{}),iconActiveColor:b,iconInactiveColor:C,maskChar:R="•",error:I,disableMask:E,transformInput:q,loadState:S,onMask:M,onUnmask:T,onChange:O,onFocus:$,onBlur:w,onTryAgain:L}=d,A=e.__rest(d,["value","readOnly","data-testid","maskRange","unmaskRange","maskRegex","maskTransformer","iconMask","iconUnmask","iconActiveColor","iconInactiveColor","maskChar","error","disableMask","transformInput","loadState","onMask","onUnmask","onChange","onFocus","onBlur","onTryAgain"]);const D=g&&s.lodashExports.isEmpty(m),[F,U]=t.useState(!E),[H,_]=t.useState(m||""),[B]=t.useState((()=>l.SimpleIdGenerator.generate())),V=`${null!==(k=A.id)&&void 0!==k?k:B}-value`,W=t.useRef(null),G=t.useRef(null),z=t.useRef(null),J=t.useRef(!E),K=A["aria-labelledby"];t.useImperativeHandle(c,(()=>W.current),[]),t.useEffect((()=>{_(m||"")}),[m]),t.useEffect((()=>{var e,r;g&&("fail"===S&&(null===(e=G.current)||void 0===e||e.focus()),"success"===S&&(null===(r=z.current)||void 0===r||r.focus()))}),[g,S]);const N=e=>{ee(!1),null==$||$(e)},P=e=>{ee(!0),null==w||w(e)},Q=e=>{let r=e.target.value;switch(q){case"uppercase":r=r.toUpperCase();break;case"lowercase":r=r.toLowerCase()}_(r),e.target.value=r,null==O||O(e)},X=()=>{g&&(null==L||L())},Y=e=>{e.preventDefault()},Z=()=>{var e;const r=!F;ee(r),r||null===(e=W.current)||void 0===e||e.focus()},ee=e=>{J.current!==e&&(J.current=e,U(e),e?null==M||M():null==T||T())},re=()=>D?"-":F&&!E?o.StringHelper.maskValue(H,{maskChar:R,maskRange:p,unmaskRange:h,maskRegex:j,maskTransformer:v}):H,ae=()=>!(null==H?void 0:H.toString().length)||E,ne=()=>{if(D)return"-";if(F&&!E){return o.StringHelper.getMaskedDescription(H,"masked",p)||"Masked value"}return H},se=()=>{if(D)return r.jsx(r.Fragment,{});const e=ae();return r.jsx(u.IconContainer,{"data-testid":"icon-"+(F?"masked":"unmasked"),onMouseDown:e?void 0:Y,onClick:e?void 0:Z,$isDisabled:e,$inactiveColor:C,$activeColor:b,"aria-hidden":"true",children:F?y:x})};return r.jsx("div",{"aria-busy":"loading"===S,children:(()=>{if(g)switch(S){case"fail":return r.jsxs(u.ClickableErrorWrapper,{ref:G,onClick:X,"data-testid":"try-again-button",type:"button",children:[r.jsxs(u.ErrorTextContainer,{children:[r.jsx(u.ErrorIcon,{}),r.jsx(u.ErrorLabel,{children:"Error"})]}),r.jsx(u.TryAgainLabel,{children:"Try again?"})]});case"loading":return r.jsxs(u.LoadingWrapper,{children:[r.jsx(u.Spinner,{}),r.jsx(u.LoadingLabel,{children:"Retrieving..."})]});default:return(()=>{const e=ae()||D;return r.jsxs(r.Fragment,{children:[r.jsx(i.VisuallyHidden,{id:V,children:ne()}),r.jsxs(u.ReadOnlyClickable,{ref:z,"data-testid":"masked-input-readonly-button",onClick:e?void 0:Z,type:"button","aria-labelledby":i.concatIds(V,K),"aria-disabled":e,children:[r.jsx(u.ReadOnlyValueText,{children:re()}),!e&&r.jsx(u.ReadOnlyIconContainer,{children:F?r.jsx(a.EyeIcon,{"data-testid":"masked-icon"}):r.jsx(n.EyeSlashIcon,{"data-testid":"unmasked-icon"})})]})]})})()}return r.jsx(u.InputGroupWrapper,Object.assign({ref:W,"data-testid":`${f||"masked-input"}${F?"-masked":"-unmasked"}`,addon:{type:"custom",attributes:{children:se()},position:"right"},onFocus:g?void 0:N,onBlur:g?void 0:P,onClick:g?Z:void 0,onChange:Q,value:re(),readOnly:g,error:I,$isDisabled:ae()},A))})()})}));exports.MaskedInput=c;
+"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),a=require("@lifesg/react-icons/eye"),n=require("@lifesg/react-icons/eye-slash"),s=require("../external/lodash/lodash.js"),t=require("react"),i=require("../shared/accessibility/index.js");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var l=require("../util/simple-id-generator.js"),o=require("../util/string-helper.js");require("@react-aria/live-announcer");var u=require("./masked-input.style.js");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const c=d(t).default.forwardRef(((d,c)=>{var k,{value:m,readOnly:g,"data-testid":f,maskRange:v,unmaskRange:p,maskRegex:h,maskTransformer:j,iconMask:x=r.jsx(n.EyeSlashIcon,{}),iconUnmask:y=r.jsx(a.EyeIcon,{}),iconActiveColor:b,iconInactiveColor:C,maskChar:R="•",error:I,disableMask:q,transformInput:E,loadState:M,onMask:S,onUnmask:T,onChange:O,onFocus:$,onBlur:w,onTryAgain:L}=d,A=e.__rest(d,["value","readOnly","data-testid","maskRange","unmaskRange","maskRegex","maskTransformer","iconMask","iconUnmask","iconActiveColor","iconInactiveColor","maskChar","error","disableMask","transformInput","loadState","onMask","onUnmask","onChange","onFocus","onBlur","onTryAgain"]);const D=g&&s.lodashExports.isEmpty(m),[F,U]=t.useState(!q),[H,_]=t.useState(m||""),B=l.useId(),V=`${null!==(k=A.id)&&void 0!==k?k:B}-value`,W=t.useRef(null),G=t.useRef(null),z=t.useRef(null),J=t.useRef(!q),K=A["aria-labelledby"];t.useImperativeHandle(c,(()=>W.current),[]),t.useEffect((()=>{_(m||"")}),[m]),t.useEffect((()=>{var e,r;g&&("fail"===M&&(null===(e=G.current)||void 0===e||e.focus()),"success"===M&&(null===(r=z.current)||void 0===r||r.focus()))}),[g,M]);const N=e=>{ee(!1),null==$||$(e)},P=e=>{ee(!0),null==w||w(e)},Q=e=>{let r=e.target.value;switch(E){case"uppercase":r=r.toUpperCase();break;case"lowercase":r=r.toLowerCase()}_(r),e.target.value=r,null==O||O(e)},X=()=>{g&&(null==L||L())},Y=e=>{e.preventDefault()},Z=()=>{var e;const r=!F;ee(r),r||null===(e=W.current)||void 0===e||e.focus()},ee=e=>{J.current!==e&&(J.current=e,U(e),e?null==S||S():null==T||T())},re=()=>D?"-":F&&!q?o.StringHelper.maskValue(H,{maskChar:R,maskRange:v,unmaskRange:p,maskRegex:h,maskTransformer:j}):H,ae=()=>!(null==H?void 0:H.toString().length)||q,ne=()=>{if(D)return"-";if(F&&!q){return o.StringHelper.getMaskedDescription(H,"masked",v)||"Masked value"}return H},se=()=>{if(D)return r.jsx(r.Fragment,{});const e=ae();return r.jsx(u.IconContainer,{"data-testid":"icon-"+(F?"masked":"unmasked"),onMouseDown:e?void 0:Y,onClick:e?void 0:Z,$isDisabled:e,$inactiveColor:C,$activeColor:b,"aria-hidden":"true",children:F?y:x})};return r.jsx("div",{"aria-busy":"loading"===M,children:(()=>{if(g)switch(M){case"fail":return r.jsxs(u.ClickableErrorWrapper,{ref:G,onClick:X,"data-testid":"try-again-button",type:"button",children:[r.jsxs(u.ErrorTextContainer,{children:[r.jsx(u.ErrorIcon,{}),r.jsx(u.ErrorLabel,{children:"Error"})]}),r.jsx(u.TryAgainLabel,{children:"Try again?"})]});case"loading":return r.jsxs(u.LoadingWrapper,{children:[r.jsx(u.Spinner,{}),r.jsx(u.LoadingLabel,{children:"Retrieving..."})]});default:return(()=>{const e=ae()||D;return r.jsxs(r.Fragment,{children:[r.jsx(i.VisuallyHidden,{id:V,children:ne()}),r.jsxs(u.ReadOnlyClickable,{ref:z,"data-testid":"masked-input-readonly-button",onClick:e?void 0:Z,type:"button","aria-labelledby":i.concatIds(V,K),"aria-disabled":e,children:[r.jsx(u.ReadOnlyValueText,{children:re()}),!e&&r.jsx(u.ReadOnlyIconContainer,{children:F?r.jsx(a.EyeIcon,{"data-testid":"masked-icon"}):r.jsx(n.EyeSlashIcon,{"data-testid":"unmasked-icon"})})]})]})})()}return r.jsx(u.InputGroupWrapper,Object.assign({ref:W,"data-testid":`${f||"masked-input"}${F?"-masked":"-unmasked"}`,addon:{type:"custom",attributes:{children:se()},position:"right"},onFocus:g?void 0:N,onBlur:g?void 0:P,onClick:g?Z:void 0,onChange:Q,value:re(),readOnly:g,error:I,$isDisabled:ae()},A))})()})}));exports.MaskedInput=c;
 //# sourceMappingURL=masked-input.js.map

package/cjs/masked-input/masked-input.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"masked-input.js","sources":["../../../src/masked-input/masked-input.tsx"],"sourcesContent":["import { EyeIcon } from \"@lifesg/react-icons/eye\";\nimport { EyeSlashIcon } from \"@lifesg/react-icons/eye-slash\";\nimport { isEmpty } from \"lodash\";\nimport React, { useEffect, useImperativeHandle, useRef, useState } from \"react\";\n\nimport { concatIds, VisuallyHidden } from \"../shared/accessibility\";\nimport { SimpleIdGenerator, StringHelper } from \"../util\";\nimport {\n ClickableErrorWrapper,\n ErrorIcon,\n ErrorLabel,\n ErrorTextContainer,\n IconContainer,\n InputGroupWrapper,\n LoadingLabel,\n LoadingWrapper,\n ReadOnlyClickable,\n ReadOnlyIconContainer,\n ReadOnlyValueText,\n Spinner,\n TryAgainLabel,\n} from \"./masked-input.style\";\nimport type { MaskedInputProps } from \"./types\";\n\nconst Component = (\n {\n value,\n readOnly,\n \"data-testid\": dataTestId,\n maskRange,\n unmaskRange,\n maskRegex,\n maskTransformer,\n iconMask = <EyeSlashIcon />,\n iconUnmask = <EyeIcon />,\n iconActiveColor: maskIconActiveColor,\n iconInactiveColor: maskIconInactiveColor,\n maskChar = \"•\",\n error,\n disableMask,\n transformInput,\n loadState,\n onMask,\n onUnmask,\n onChange,\n onFocus,\n onBlur,\n onTryAgain,\n ...otherProps\n }: MaskedInputProps,\n ref: React.Ref<HTMLInputElement>\n) => {\n // =============================================================================\n // CONST, STATE, REFS\n // =============================================================================\n const isEmptyReadOnlyState = readOnly && isEmpty(value);\n const [isMasked, setIsMasked] = useState<boolean>(!disableMask);\n const [updatedValue, setUpdatedValue] = useState<string>(value \|\| \"\");\n const [internalId] = useState(() => SimpleIdGenerator.generate());\n const valueId = `${otherProps.id ?? internalId}-value`;\n\n const inputRef = useRef<HTMLInputElement>(null);\n const tryAgainRef = useRef<HTMLButtonElement>(null);\n const readOnlyButtonRef = useRef<HTMLButtonElement>(null);\n const isMaskedRef = useRef<boolean>(!disableMask);\n const ariaLabelledBy = otherProps[\"aria-labelledby\"];\n\n useImperativeHandle(ref, () => inputRef.current as HTMLInputElement, []);\n\n // =============================================================================\n // EFFECTS\n // =============================================================================\n useEffect(() => {\n setUpdatedValue(value \|\| \"\");\n }, [value]);\n\n useEffect(() => {\n if (!readOnly) return;\n\n if (loadState === \"fail\") {\n tryAgainRef.current?.focus();\n }\n\n if (loadState === \"success\") {\n readOnlyButtonRef.current?.focus();\n }\n }, [readOnly, loadState]);\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n toggleMasking(false);\n onFocus?.(event);\n };\n\n const handleBlur = (event?: React.FocusEvent<HTMLInputElement>) => {\n toggleMasking(true);\n onBlur?.(event!);\n };\n\n const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n let value = event.target.value;\n\n switch (transformInput) {\n case \"uppercase\":\n value = value.toUpperCase();\n break;\n case \"lowercase\":\n value = value.toLowerCase();\n break;\n default:\n break;\n }\n\n setUpdatedValue(value);\n event.target.value = value;\n onChange?.(event);\n };\n\n const handleTryAgain = () => {\n if (readOnly) {\n onTryAgain?.();\n }\n };\n\n const handleIconMouseDown = (event: React.MouseEvent<HTMLDivElement>) => {\n event.preventDefault();\n };\n\n const handleToggleMask = () => {\n const nextMasked = !isMasked;\n\n toggleMasking(nextMasked);\n\n if (!nextMasked) {\n inputRef.current?.focus();\n return;\n }\n };\n\n // =============================================================================\n // HELPER FUNCTIONS\n // =============================================================================\n const toggleMasking = (mask: boolean) => {\n if (isMaskedRef.current === mask) return;\n\n isMaskedRef.current = mask;\n setIsMasked(mask);\n\n if (mask) {\n onMask?.();\n } else {\n onUnmask?.();\n }\n };\n\n const getValue = () => {\n if (isEmptyReadOnlyState) {\n return \"-\";\n }\n\n return isMasked && !disableMask\n ? StringHelper.maskValue(updatedValue, {\n maskChar,\n maskRange,\n unmaskRange,\n maskRegex,\n maskTransformer,\n })\n : updatedValue;\n };\n\n const shouldDisableMasking = () =>\n !updatedValue?.toString().length \|\| disableMask;\n\n const getValueDescription = () => {\n if (isEmptyReadOnlyState) {\n return \"-\";\n }\n\n if (isMasked && !disableMask) {\n const desc = StringHelper.getMaskedDescription(\n updatedValue,\n \"masked\",\n maskRange\n );\n\n return desc \|\| \"Masked value\";\n }\n\n return updatedValue;\n };\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n const renderIcon = () => {\n if (isEmptyReadOnlyState) {\n return <></>;\n }\n\n const isDisabled = shouldDisableMasking();\n\n return (\n <IconContainer\n data-testid={`icon-${isMasked ? \"masked\" : \"unmasked\"}`}\n onMouseDown={!isDisabled ? handleIconMouseDown : undefined}\n onClick={!isDisabled ? handleToggleMask : undefined}\n $isDisabled={isDisabled}\n $inactiveColor={maskIconInactiveColor}\n $activeColor={maskIconActiveColor}\n aria-hidden=\"true\"\n >\n {isMasked ? iconUnmask : iconMask}\n </IconContainer>\n );\n };\n\n const renderReadOnlyButton = () => {\n const isButtonDisabled = shouldDisableMasking() \|\| isEmptyReadOnlyState;\n\n return (\n <>\n <VisuallyHidden id={valueId}>\n {getValueDescription()}\n </VisuallyHidden>\n <ReadOnlyClickable\n ref={readOnlyButtonRef}\n data-testid=\"masked-input-readonly-button\"\n onClick={!isButtonDisabled ? handleToggleMask : undefined}\n type=\"button\"\n aria-labelledby={concatIds(valueId, ariaLabelledBy)}\n aria-disabled={isButtonDisabled}\n >\n <ReadOnlyValueText>{getValue()}</ReadOnlyValueText>\n {!isButtonDisabled && (\n <ReadOnlyIconContainer>\n {isMasked ? (\n <EyeIcon data-testid=\"masked-icon\" />\n ) : (\n <EyeSlashIcon data-testid=\"unmasked-icon\" />\n )}\n </ReadOnlyIconContainer>\n )}\n </ReadOnlyClickable>\n </>\n );\n };\n\n const renderElement = () => {\n if (readOnly) {\n switch (loadState) {\n case \"fail\":\n return (\n <ClickableErrorWrapper\n ref={tryAgainRef}\n onClick={handleTryAgain}\n data-testid=\"try-again-button\"\n type=\"button\"\n >\n <ErrorTextContainer>\n <ErrorIcon />\n <ErrorLabel>Error</ErrorLabel>\n </ErrorTextContainer>\n <TryAgainLabel>Try again?</TryAgainLabel>\n </ClickableErrorWrapper>\n );\n case \"loading\":\n return (\n <LoadingWrapper>\n <Spinner />\n <LoadingLabel>Retrieving...</LoadingLabel>\n </LoadingWrapper>\n );\n case \"success\":\n default:\n return renderReadOnlyButton();\n }\n }\n\n return (\n <InputGroupWrapper\n ref={inputRef}\n data-testid={`${dataTestId \|\| \"masked-input\"}${\n isMasked ? \"-masked\" : \"-unmasked\"\n }`}\n addon={{\n type: \"custom\",\n attributes: {\n children: renderIcon(),\n },\n position: \"right\",\n }}\n onFocus={!readOnly ? handleFocus : undefined}\n onBlur={!readOnly ? handleBlur : undefined}\n onClick={readOnly ? handleToggleMask : undefined}\n onChange={handleChange}\n value={getValue()}\n readOnly={readOnly}\n error={error}\n $isDisabled={shouldDisableMasking()}\n {...otherProps}\n />\n );\n };\n\n return <div aria-busy={loadState === \"loading\"}>{renderElement()}</div>;\n};\n\nexport const MaskedInput = React.forwardRef(Component);\n"],"names":["MaskedInput","React","forwardRef","_a","ref","value","readOnly","dataTestId","maskRange","unmaskRange","maskRegex","maskTransformer","iconMask","_jsx","EyeSlashIcon","iconUnmask","EyeIcon","iconActiveColor","maskIconActiveColor","iconInactiveColor","maskIconInactiveColor","maskChar","error","disableMask","transformInput","loadState","onMask","onUnmask","onChange","onFocus","onBlur","onTryAgain","otherProps","__rest","isEmptyReadOnlyState","isEmpty","isMasked","setIsMasked","useState","updatedValue","setUpdatedValue","internalId","SimpleIdGenerator","generate","valueId","_b","id","inputRef","useRef","tryAgainRef","readOnlyButtonRef","isMaskedRef","ariaLabelledBy","useImperativeHandle","current","useEffect","focus","handleFocus","event","toggleMasking","handleBlur","handleChange","target","toUpperCase","toLowerCase","handleTryAgain","handleIconMouseDown","preventDefault","handleToggleMask","nextMasked","mask","getValue","StringHelper","maskValue","shouldDisableMasking","toString","length","getValueDescription","getMaskedDescription","renderIcon","isDisabled","IconContainer","onMouseDown","undefined","onClick","$isDisabled","$inactiveColor","$activeColor","children","_jsxs","ClickableErrorWrapper","type","ErrorTextContainer","ErrorIcon","ErrorLabel","TryAgainLabel","LoadingWrapper","Spinner","LoadingLabel","isButtonDisabled","_Fragment","VisuallyHidden","ReadOnlyClickable","concatIds","ReadOnlyValueText","ReadOnlyIconContainer","renderReadOnlyButton","InputGroupWrapper","Object","assign","addon","attributes","position","renderElement"],"mappings":"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"}
1	+ {"version":3,"file":"masked-input.js","sources":["../../../src/masked-input/masked-input.tsx"],"sourcesContent":["import { EyeIcon } from \"@lifesg/react-icons/eye\";\nimport { EyeSlashIcon } from \"@lifesg/react-icons/eye-slash\";\nimport { isEmpty } from \"lodash\";\nimport React, { useEffect, useImperativeHandle, useRef, useState } from \"react\";\n\nimport { concatIds, VisuallyHidden } from \"../shared/accessibility\";\nimport { StringHelper, useId } from \"../util\";\nimport {\n ClickableErrorWrapper,\n ErrorIcon,\n ErrorLabel,\n ErrorTextContainer,\n IconContainer,\n InputGroupWrapper,\n LoadingLabel,\n LoadingWrapper,\n ReadOnlyClickable,\n ReadOnlyIconContainer,\n ReadOnlyValueText,\n Spinner,\n TryAgainLabel,\n} from \"./masked-input.style\";\nimport type { MaskedInputProps } from \"./types\";\n\nconst Component = (\n {\n value,\n readOnly,\n \"data-testid\": dataTestId,\n maskRange,\n unmaskRange,\n maskRegex,\n maskTransformer,\n iconMask = <EyeSlashIcon />,\n iconUnmask = <EyeIcon />,\n iconActiveColor: maskIconActiveColor,\n iconInactiveColor: maskIconInactiveColor,\n maskChar = \"•\",\n error,\n disableMask,\n transformInput,\n loadState,\n onMask,\n onUnmask,\n onChange,\n onFocus,\n onBlur,\n onTryAgain,\n ...otherProps\n }: MaskedInputProps,\n ref: React.Ref<HTMLInputElement>\n) => {\n // =============================================================================\n // CONST, STATE, REFS\n // =============================================================================\n const isEmptyReadOnlyState = readOnly && isEmpty(value);\n const [isMasked, setIsMasked] = useState<boolean>(!disableMask);\n const [updatedValue, setUpdatedValue] = useState<string>(value \|\| \"\");\n const internalId = useId();\n const valueId = `${otherProps.id ?? internalId}-value`;\n\n const inputRef = useRef<HTMLInputElement>(null);\n const tryAgainRef = useRef<HTMLButtonElement>(null);\n const readOnlyButtonRef = useRef<HTMLButtonElement>(null);\n const isMaskedRef = useRef<boolean>(!disableMask);\n const ariaLabelledBy = otherProps[\"aria-labelledby\"];\n\n useImperativeHandle(ref, () => inputRef.current as HTMLInputElement, []);\n\n // =============================================================================\n // EFFECTS\n // =============================================================================\n useEffect(() => {\n setUpdatedValue(value \|\| \"\");\n }, [value]);\n\n useEffect(() => {\n if (!readOnly) return;\n\n if (loadState === \"fail\") {\n tryAgainRef.current?.focus();\n }\n\n if (loadState === \"success\") {\n readOnlyButtonRef.current?.focus();\n }\n }, [readOnly, loadState]);\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n toggleMasking(false);\n onFocus?.(event);\n };\n\n const handleBlur = (event?: React.FocusEvent<HTMLInputElement>) => {\n toggleMasking(true);\n onBlur?.(event!);\n };\n\n const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n let value = event.target.value;\n\n switch (transformInput) {\n case \"uppercase\":\n value = value.toUpperCase();\n break;\n case \"lowercase\":\n value = value.toLowerCase();\n break;\n default:\n break;\n }\n\n setUpdatedValue(value);\n event.target.value = value;\n onChange?.(event);\n };\n\n const handleTryAgain = () => {\n if (readOnly) {\n onTryAgain?.();\n }\n };\n\n const handleIconMouseDown = (event: React.MouseEvent<HTMLDivElement>) => {\n event.preventDefault();\n };\n\n const handleToggleMask = () => {\n const nextMasked = !isMasked;\n\n toggleMasking(nextMasked);\n\n if (!nextMasked) {\n inputRef.current?.focus();\n return;\n }\n };\n\n // =============================================================================\n // HELPER FUNCTIONS\n // =============================================================================\n const toggleMasking = (mask: boolean) => {\n if (isMaskedRef.current === mask) return;\n\n isMaskedRef.current = mask;\n setIsMasked(mask);\n\n if (mask) {\n onMask?.();\n } else {\n onUnmask?.();\n }\n };\n\n const getValue = () => {\n if (isEmptyReadOnlyState) {\n return \"-\";\n }\n\n return isMasked && !disableMask\n ? StringHelper.maskValue(updatedValue, {\n maskChar,\n maskRange,\n unmaskRange,\n maskRegex,\n maskTransformer,\n })\n : updatedValue;\n };\n\n const shouldDisableMasking = () =>\n !updatedValue?.toString().length \|\| disableMask;\n\n const getValueDescription = () => {\n if (isEmptyReadOnlyState) {\n return \"-\";\n }\n\n if (isMasked && !disableMask) {\n const desc = StringHelper.getMaskedDescription(\n updatedValue,\n \"masked\",\n maskRange\n );\n\n return desc \|\| \"Masked value\";\n }\n\n return updatedValue;\n };\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n const renderIcon = () => {\n if (isEmptyReadOnlyState) {\n return <></>;\n }\n\n const isDisabled = shouldDisableMasking();\n\n return (\n <IconContainer\n data-testid={`icon-${isMasked ? \"masked\" : \"unmasked\"}`}\n onMouseDown={!isDisabled ? handleIconMouseDown : undefined}\n onClick={!isDisabled ? handleToggleMask : undefined}\n $isDisabled={isDisabled}\n $inactiveColor={maskIconInactiveColor}\n $activeColor={maskIconActiveColor}\n aria-hidden=\"true\"\n >\n {isMasked ? iconUnmask : iconMask}\n </IconContainer>\n );\n };\n\n const renderReadOnlyButton = () => {\n const isButtonDisabled = shouldDisableMasking() \|\| isEmptyReadOnlyState;\n\n return (\n <>\n <VisuallyHidden id={valueId}>\n {getValueDescription()}\n </VisuallyHidden>\n <ReadOnlyClickable\n ref={readOnlyButtonRef}\n data-testid=\"masked-input-readonly-button\"\n onClick={!isButtonDisabled ? handleToggleMask : undefined}\n type=\"button\"\n aria-labelledby={concatIds(valueId, ariaLabelledBy)}\n aria-disabled={isButtonDisabled}\n >\n <ReadOnlyValueText>{getValue()}</ReadOnlyValueText>\n {!isButtonDisabled && (\n <ReadOnlyIconContainer>\n {isMasked ? (\n <EyeIcon data-testid=\"masked-icon\" />\n ) : (\n <EyeSlashIcon data-testid=\"unmasked-icon\" />\n )}\n </ReadOnlyIconContainer>\n )}\n </ReadOnlyClickable>\n </>\n );\n };\n\n const renderElement = () => {\n if (readOnly) {\n switch (loadState) {\n case \"fail\":\n return (\n <ClickableErrorWrapper\n ref={tryAgainRef}\n onClick={handleTryAgain}\n data-testid=\"try-again-button\"\n type=\"button\"\n >\n <ErrorTextContainer>\n <ErrorIcon />\n <ErrorLabel>Error</ErrorLabel>\n </ErrorTextContainer>\n <TryAgainLabel>Try again?</TryAgainLabel>\n </ClickableErrorWrapper>\n );\n case \"loading\":\n return (\n <LoadingWrapper>\n <Spinner />\n <LoadingLabel>Retrieving...</LoadingLabel>\n </LoadingWrapper>\n );\n case \"success\":\n default:\n return renderReadOnlyButton();\n }\n }\n\n return (\n <InputGroupWrapper\n ref={inputRef}\n data-testid={`${dataTestId \|\| \"masked-input\"}${\n isMasked ? \"-masked\" : \"-unmasked\"\n }`}\n addon={{\n type: \"custom\",\n attributes: {\n children: renderIcon(),\n },\n position: \"right\",\n }}\n onFocus={!readOnly ? handleFocus : undefined}\n onBlur={!readOnly ? handleBlur : undefined}\n onClick={readOnly ? handleToggleMask : undefined}\n onChange={handleChange}\n value={getValue()}\n readOnly={readOnly}\n error={error}\n $isDisabled={shouldDisableMasking()}\n {...otherProps}\n />\n );\n };\n\n return <div aria-busy={loadState === \"loading\"}>{renderElement()}</div>;\n};\n\nexport const MaskedInput = React.forwardRef(Component);\n"],"names":["MaskedInput","React","forwardRef","_a","ref","value","readOnly","dataTestId","maskRange","unmaskRange","maskRegex","maskTransformer","iconMask","_jsx","EyeSlashIcon","iconUnmask","EyeIcon","iconActiveColor","maskIconActiveColor","iconInactiveColor","maskIconInactiveColor","maskChar","error","disableMask","transformInput","loadState","onMask","onUnmask","onChange","onFocus","onBlur","onTryAgain","otherProps","__rest","isEmptyReadOnlyState","isEmpty","isMasked","setIsMasked","useState","updatedValue","setUpdatedValue","internalId","useId","valueId","_b","id","inputRef","useRef","tryAgainRef","readOnlyButtonRef","isMaskedRef","ariaLabelledBy","useImperativeHandle","current","useEffect","focus","handleFocus","event","toggleMasking","handleBlur","handleChange","target","toUpperCase","toLowerCase","handleTryAgain","handleIconMouseDown","preventDefault","handleToggleMask","nextMasked","mask","getValue","StringHelper","maskValue","shouldDisableMasking","toString","length","getValueDescription","getMaskedDescription","renderIcon","isDisabled","IconContainer","onMouseDown","undefined","onClick","$isDisabled","$inactiveColor","$activeColor","children","_jsxs","ClickableErrorWrapper","type","ErrorTextContainer","ErrorIcon","ErrorLabel","TryAgainLabel","LoadingWrapper","Spinner","LoadingLabel","isButtonDisabled","_Fragment","VisuallyHidden","ReadOnlyClickable","concatIds","ReadOnlyValueText","ReadOnlyIconContainer","renderReadOnlyButton","InputGroupWrapper","Object","assign","addon","attributes","position","renderElement"],"mappings":"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"}

package/cjs/masthead/masthead.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime");require("./sgds.css");var t=require("react"),s=require("styled-components"),d=require("./masthead.style.js");const n="lifesg-ds-masthead-script",r="https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3/components/Masthead/index.umd.js",c="sgds-night-theme";exports.Masthead=({stretch:o=!1})=>{const m=t.useContext(s.ThemeContext),a="dark"===(null==m?void 0:m.colourMode);t.useEffect((()=>{u()||i()}),[]),t.useEffect((()=>{a?document.documentElement.classList.add(c):document.documentElement.classList.remove(c)}),[a]);const u=()=>document.getElementById(n),i=()=>{if(!document.getElementById(n)){const e=document.createElement("script");e.id=n,e.type="module",e.src=r,document.head.appendChild(e)}};return e.jsx(d.Wrapper,{dangerouslySetInnerHTML:{__html:"<sgds-masthead></sgds-masthead>"},$stretch:o})};
+"use strict";var e=require("react/jsx-runtime");require("./sgds-day.css"),require("./sgds-night.css");var t=require("clsx"),s=require("react"),d=require("styled-components"),n=require("./masthead.styles.js");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=r(t);const a=s.memo((({stretch:t=!1})=>{const r=s.useContext(d.ThemeContext),a="dark"===(null==r?void 0:r.colourMode);s.useEffect((()=>{i()||l()}),[]),s.useEffect((()=>{a?document.documentElement.classList.add(u):document.documentElement.classList.remove(u)}),[a]);const i=()=>document.getElementById(o),l=()=>{if(!document.getElementById(o)){const e=document.createElement("script");e.id=o,e.type="module",e.src=m,document.head.appendChild(e)}};return e.jsx("div",{className:c.default(n.wrapper,t&&n.wrapperStretch),dangerouslySetInnerHTML:{__html:"<sgds-masthead></sgds-masthead>"}})})),o="lifesg-ds-masthead-script",m="https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3/components/Masthead/index.umd.js",u="sgds-night-theme";exports.Masthead=a;
 //# sourceMappingURL=masthead.js.map

package/cjs/masthead/masthead.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"masthead.js","sources":["../../../src/masthead/masthead.tsx"],"sourcesContent":["import \"@govtechsg/sgds-web-component/themes/day.css\";\nimport \"@govtechsg/sgds-web-component/themes/night.css\";\n\nimport { useContext, useEffect } from \"react\";\nimport { ThemeContext } from \"styled-components\";\n\nimport { ~~Wrapper~~ } from \"./masthead.~~style~~\";\nimport type { MastheadProps } from \"./types\";\n\~~nexport~~ ~~const~~ ~~Masthead~~ = ({ stretch = false }: MastheadProps): JSX.Element => {\n const theme = useContext(ThemeContext);\n const isDarkMode = theme?.colourMode === \"dark\";\n\n // =============================================================================\n // EFFECTS\n // =============================================================================\n useEffect(() => {\n if (!doAssetsExist()) {\n addAssets();\n }\n }, []);\n\n useEffect(() => {\n // SGDS dark mode only takes effect when this class is set on the :root element\n if (isDarkMode) {\n document.documentElement.classList.add(SGDS_THEME_NIGHT_CLASSNAME);\n } else {\n document.documentElement.classList.remove(\n SGDS_THEME_NIGHT_CLASSNAME\n );\n }\n }, [isDarkMode]);\n\n // =============================================================================\n // HELPER FUNCTIONS\n // =============================================================================\n const doAssetsExist = () => {\n return document.getElementById(SCRIPT_ID);\n };\n\n const addAssets = () => {\n if (!document.getElementById(SCRIPT_ID)) {\n const script = document.createElement(\"script\");\n script.id = SCRIPT_ID;\n script.type = \"module\";\n script.src = SCRIPT_SRC;\n\n document.head.appendChild(script);\n }\n };\n\n const createContent = () => {\n /*\n Note: Had to use this method because we had to create a\n * custom type to handle Web Components (refer to this guide\n * https://blog.devgenius.io/how-to-use-web-components-in-react-54c951399bfd)\n * But we are having troubles exporting the custom type definition\n * via rollup\n */\n return { __html: \"<sgds-masthead></sgds-masthead>\" };\n };\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n\n return (\n <~~Wrapper~~ dangerouslySetInnerHTML={createContent()} ~~$stretch={stretch}~~ />\n );\n};\n\n// =============================================================================\n// CONSTANTS\n// =============================================================================\nconst SCRIPT_ID = \"lifesg-ds-masthead-script\";\nconst SCRIPT_SRC =\n \"https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3/components/Masthead/index.umd.js\";\nconst SGDS_THEME_NIGHT_CLASSNAME = \"sgds-night-theme\";\n"],"names":["~~SCRIPT_ID~~","~~SCRIPT_SRC~~","~~SGDS_THEME_NIGHT_CLASSNAME","~~stretch","theme","useContext","ThemeContext","isDarkMode","colourMode","useEffect","doAssetsExist","addAssets","document","documentElement","classList","add","remove","getElementById","script","createElement","id","type","src","head","appendChild","_jsx","~~Wrapper~~","~~dangerouslySetInnerHTML~~","~~__html~~","~~$stretch~~"],"mappings":"~~4KASO~~,~~MAiEDA~~,~~EAAY~~,~~4BACZC~~,~~EACF~~,~~gGACEC,EAA6B,oCApEX,~~EAAGC,WAAU,~~MACjC~~,MAAMC,EAAQC,EAAAA,WAAWC,gBACnBC,EAAmC,UAAtBH,aAAK,EAALA,EAAOI,YAK1BC,EAAAA,WAAU,KACDC,KACDC,GACJ,GACD,IAEHF,EAAAA,WAAU,KAEFF,EACAK,SAASC,gBAAgBC,UAAUC,~~IAAIb~~,~~GAEvCU~~,SAASC,gBAAgBC,~~UAAUE~~,OAC/Bd,EAER,GACD,~~CAACK~~,IAKJ,MAAMG,EAAgB,IACXE,~~SAASK~~,~~eAAejB~~,~~GAG7BW~~,EAAY,KACd,IAAKC,~~SAASK~~,~~eAAejB~~,GAAY,CACrC,~~MAAMkB~~,~~EAASN~~,~~SAASO~~,cAAc,UACtCD,EAAOE,~~GAAKpB~~,~~EACZkB~~,EAAOG,KAAO,SACdH,EAAOI,~~IAAMrB~~,~~EAEbW~~,~~SAASW~~,KAAKC,~~YAAYN~~,EAC9B,GAkBJ,~~OACIO~~,EAAAA,~~IAACC~~,EAAAA,~~QAAO~~,~~CAACC~~,~~wBARF~~,CAAEC,OAAQ,~~mCAQgCC~~,~~SAAY1B~~,~~GAAW~~"}
1	+ {"version":3,"file":"masthead.js","sources":["../../../src/masthead/masthead.tsx"],"sourcesContent":["import \"@govtechsg/sgds-web-component/themes/day.css\";\nimport \"@govtechsg/sgds-web-component/themes/night.css\";\n\nimport clsx from \"clsx\";\nimport { memo, useContext, useEffect } from \"react\";\nimport { ThemeContext } from \"styled-components\";\n\nimport * as styles from \"./masthead.styles\";\nimport type { MastheadProps } from \"./types\";\n\nconst MastheadComponent = ({ stretch = false }: MastheadProps): JSX.Element => {\n const theme = useContext(ThemeContext);\n const isDarkMode = theme?.colourMode === \"dark\";\n\n // =============================================================================\n // EFFECTS\n // =============================================================================\n useEffect(() => {\n if (!doAssetsExist()) {\n addAssets();\n }\n }, []);\n\n useEffect(() => {\n // SGDS dark mode only takes effect when this class is set on the :root element\n if (isDarkMode) {\n document.documentElement.classList.add(SGDS_THEME_NIGHT_CLASSNAME);\n } else {\n document.documentElement.classList.remove(\n SGDS_THEME_NIGHT_CLASSNAME\n );\n }\n }, [isDarkMode]);\n\n // =============================================================================\n // HELPER FUNCTIONS\n // =============================================================================\n const doAssetsExist = () => {\n return document.getElementById(SCRIPT_ID);\n };\n\n const addAssets = () => {\n if (!document.getElementById(SCRIPT_ID)) {\n const script = document.createElement(\"script\");\n script.id = SCRIPT_ID;\n script.type = \"module\";\n script.src = SCRIPT_SRC;\n\n document.head.appendChild(script);\n }\n };\n\n const createContent = () => {\n /*\n Note: Had to use this method because we had to create a\n * custom type to handle Web Components (refer to this guide\n * https://blog.devgenius.io/how-to-use-web-components-in-react-54c951399bfd)\n * But we are having troubles exporting the custom type definition\n * via rollup\n */\n return { __html: \"<sgds-masthead></sgds-masthead>\" };\n };\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n\n return (\n <div\n className={clsx(styles.wrapper, stretch && styles.wrapperStretch)}\n dangerouslySetInnerHTML={createContent()}\n />\n );\n};\n\nexport const Masthead = memo(MastheadComponent);\n\n// =============================================================================\n// CONSTANTS\n// =============================================================================\nconst SCRIPT_ID = \"lifesg-ds-masthead-script\";\nconst SCRIPT_SRC =\n \"https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3/components/Masthead/index.umd.js\";\nconst SGDS_THEME_NIGHT_CLASSNAME = \"sgds-night-theme\";\n"],"names":["Masthead","memo","stretch","theme","useContext","ThemeContext","isDarkMode","colourMode","useEffect","doAssetsExist","addAssets","document","documentElement","classList","add","SGDS_THEME_NIGHT_CLASSNAME","remove","getElementById","SCRIPT_ID","script","createElement","id","type","src","SCRIPT_SRC","head","appendChild","_jsx","className","clsx","styles.wrapper","styles.wrapperStretch","dangerouslySetInnerHTML","__html"],"mappings":"iUAUA,MAiEaA,EAAWC,EAAAA,MAjEE,EAAGC,WAAU,MACnC,MAAMC,EAAQC,EAAAA,WAAWC,gBACnBC,EAAmC,UAAtBH,aAAK,EAALA,EAAOI,YAK1BC,EAAAA,WAAU,KACDC,KACDC,GACJ,GACD,IAEHF,EAAAA,WAAU,KAEFF,EACAK,SAASC,gBAAgBC,UAAUC,IAAIC,GAEvCJ,SAASC,gBAAgBC,UAAUG,OAC/BD,EAER,GACD,CAACT,IAKJ,MAAMG,EAAgB,IACXE,SAASM,eAAeC,GAG7BR,EAAY,KACd,IAAKC,SAASM,eAAeC,GAAY,CACrC,MAAMC,EAASR,SAASS,cAAc,UACtCD,EAAOE,GAAKH,EACZC,EAAOG,KAAO,SACdH,EAAOI,IAAMC,EAEbb,SAASc,KAAKC,YAAYP,EAC9B,GAkBJ,OACIQ,aACIC,UAAWC,EAAAA,QAAKC,EAAAA,QAAgB5B,GAAW6B,kBAC3CC,wBAVG,CAAEC,OAAQ,oCAWf,IASJf,EAAY,4BACZM,EACF,gGACET,EAA6B"}

package/cjs/masthead/masthead.styles.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ "use strict";require("./masthead.styles_1huzon9.css");exports.wrapper="wafydue",exports.wrapperStretch="wq9iwwi";
2	+ //# sourceMappingURL=masthead.styles.js.map

package/cjs/masthead/masthead.styles.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"masthead.styles.js","sources":["../../../src/masthead/masthead.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Breakpoint, MediaQuery } from \"../theme\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const wrapper = css`\n // matches Layout.Container\n --sgds-mainnav-padding-x: ${Breakpoint[\"xxl-margin\"]};\n --sgds-mainnav-mobile-padding-x: ${Breakpoint[\"xxl-margin\"]};\n --sgds-mainnav-max-width: 1440px;\n\n ${MediaQuery.MaxWidth.xl} {\n --sgds-mainnav-padding-x: ${Breakpoint[\"xl-margin\"]};\n --sgds-mainnav-mobile-padding-x: ${Breakpoint[\"xl-margin\"]};\n }\n\n ${MediaQuery.MaxWidth.lg} {\n --sgds-mainnav-padding-x: ${Breakpoint[\"lg-margin\"]};\n --sgds-mainnav-mobile-padding-x: ${Breakpoint[\"lg-margin\"]};\n }\n\n ${MediaQuery.MaxWidth.md} {\n --sgds-mainnav-padding-x: ${Breakpoint[\"md-margin\"]};\n --sgds-mainnav-mobile-padding-x: ${Breakpoint[\"md-margin\"]};\n }\n\n ${MediaQuery.MaxWidth.sm} {\n --sgds-mainnav-padding-x: ${Breakpoint[\"sm-margin\"]};\n --sgds-mainnav-mobile-padding-x: ${Breakpoint[\"sm-margin\"]};\n }\n\n ${MediaQuery.MaxWidth.xs} {\n --sgds-mainnav-padding-x: ${Breakpoint[\"xs-margin\"]};\n --sgds-mainnav-mobile-padding-x: ${Breakpoint[\"xs-margin\"]};\n }\n\n ${MediaQuery.MaxWidth.xxs} {\n --sgds-mainnav-padding-x: ${Breakpoint[\"xxs-margin\"]};\n --sgds-mainnav-mobile-padding-x: ${Breakpoint[\"xxs-margin\"]};\n }\n`;\n\nexport const wrapperStretch = css`\n --sgds-mainnav-max-width: calc(infinity * 1px);\n`;\n"],"names":[],"mappings":"8FAOoB,iCAqCO"}

package/cjs/masthead/masthead.styles_1huzon9.css ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ .wafydue{--sgds-mainnav-padding-x:var(--fds-breakpoint-margin-xxl);--sgds-mainnav-mobile-padding-x:var(--fds-breakpoint-margin-xxl);--sgds-mainnav-max-width:1440px;}:where(body.fds-breakpoint-xl-max) .wafydue{--sgds-mainnav-padding-x:var(--fds-breakpoint-margin-xl);--sgds-mainnav-mobile-padding-x:var(--fds-breakpoint-margin-xl);}:where(body.fds-breakpoint-lg-max) .wafydue{--sgds-mainnav-padding-x:var(--fds-breakpoint-margin-lg);--sgds-mainnav-mobile-padding-x:var(--fds-breakpoint-margin-lg);}:where(body.fds-breakpoint-md-max) .wafydue{--sgds-mainnav-padding-x:var(--fds-breakpoint-margin-md);--sgds-mainnav-mobile-padding-x:var(--fds-breakpoint-margin-md);}:where(body.fds-breakpoint-sm-max) .wafydue{--sgds-mainnav-padding-x:var(--fds-breakpoint-margin-sm);--sgds-mainnav-mobile-padding-x:var(--fds-breakpoint-margin-sm);}:where(body.fds-breakpoint-xs-max) .wafydue{--sgds-mainnav-padding-x:var(--fds-breakpoint-margin-xs);--sgds-mainnav-mobile-padding-x:var(--fds-breakpoint-margin-xs);}:where(body.fds-breakpoint-xxs-max) .wafydue{--sgds-mainnav-padding-x:var(--fds-breakpoint-margin-xxs);--sgds-mainnav-mobile-padding-x:var(--fds-breakpoint-margin-xxs);}
2	+ .wq9iwwi{--sgds-mainnav-max-width:calc(infinity * 1px);}