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

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

@@ -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"),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;
+"use strict";var e=require("react/jsx-runtime"),t=require("@lifesg/react-icons/chevron-down"),n=require("@lifesg/react-icons/tick"),r=require("clsx"),s=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/use-apply-styles.js");require("../../theme/utils/use-media-query.js");var a=require("../../typography/index.js");require("../../util/calendar-helper.js"),require("../../external/dayjs/dayjs.min.js");var o=require("../../util/simple-id-generator.js");require("../../util/string-helper.js"),require("@react-aria/live-announcer");var d=require("./local-nav-dropdown.styles.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=l(r);const u=l(s).default.forwardRef((({defaultLabel:r,stickyOffset:l=0,onNavItemSelect:u,items:f,selectedItemIndex:v,id:h,"data-testid":w,className:y,renderItem:x},j)=>{const g=s.useRef(null),k=s.useRef(null),b=s.useRef(null),I=s.useRef(null),q=s.useRef([]),[E,S]=s.useState(!1),[L,D]=s.useState(!1),[N,C]=s.useState(0),[R,$]=s.useState(0),[W,A]=s.useState(0),[B,H]=s.useState(0),T=w||"local-nav-dropdown",z=o.useId();s.useImperativeHandle(j,(()=>b.current)),i.useApplyStyle(b,{[d.tokens.navWrapper.stickyOffset]:`${l}px`,[d.tokens.navWrapper.sideMargin]:`${W}px`}),i.useApplyStyle(I,{[d.tokens.navItemList.viewportHeight]:N-R-l+"px"});const K="number"==typeof v&&v>=0&&E?f[v].title:r;s.useEffect((()=>{if(k.current){const e=k.current.getBoundingClientRect().height;$(e)}}),[]),s.useEffect((()=>(M(),()=>{O("remove")})),[]),s.useEffect((()=>{O(L&&E?"add":"remove")}),[L,E]),s.useEffect((()=>{C(window.innerHeight);const e=()=>{C(window.innerHeight)};return window.addEventListener("resize",e),()=>window.removeEventListener("resize",e)}),[]),s.useEffect((()=>{const e=new IntersectionObserver((e=>{const[t]=e;S(!t.isIntersecting)}),{threshold:1,rootMargin:`-${l}px 0px 0px 0px`});return g.current&&e.observe(g.current),()=>e.disconnect()}),[l]),s.useEffect((()=>{const e=()=>{const e=null==b?void 0:b.current;if(e){const t=e.getBoundingClientRect(),n=document.body.clientWidth-t.right,r=t.left,s=Math.max(n,r);A(s)}};return e(),window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}}),[]),s.useEffect((()=>{var e;L&&(null===(e=q.current[B])||void 0===e||e.focus())}),[L,B]);const M=()=>{if(!document.getElementById(m)){const e=document.createElement("style");e.id=m;const t=document.documentElement.clientWidth,n=window.innerWidth-t;e.innerHTML=`\n\t\t\t\t.${p} {\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.${p}::-webkit-scrollbar {\n\t\t\t\t\tdisplay: none;\n\t\t\t\t}\n\t\t\t`,document.body.appendChild(e)}},O=e=>{const t=document.body.classList.contains(p);"add"!==e||t?"remove"===e&&t&&document.body.classList.remove(p):document.body.classList.add(p)},U=(e,t)=>{const{key:n}=e;"Enter"!==n&&" "!==n||(e.preventDefault(),t(e))};return e.jsxs(e.Fragment,{children:[e.jsx("span",{ref:g,"data-testid":"sticky-ref"}),e.jsxs("nav",{ref:b,id:h,"data-testid":T,className:c.default(d.navWrapper,E&&d.navWrapperStickied,y),children:[e.jsxs("div",{ref:k,role:"button",onClick:()=>{D((e=>!e))},onKeyDown:e=>{const{key:t}=e;"ArrowDown"===t?(e.preventDefault(),L||D(!0),H(0)):"ArrowUp"===t?(e.preventDefault(),L||D(!0),H(f.length-1)):"Enter"===t||" "===t?(e.preventDefault(),D(!0),H(0)):("Tab"===t||"Escape"===t)&&D(!1)},"data-testid":`${T}-label`,className:c.default(d.navSelect,L&&d.navSelectExpanded),"aria-haspopup":"true","aria-expanded":L,"aria-controls":z,tabIndex:0,children:[e.jsx(a.Typography.BodyBL,{weight:"semibold",children:K}),e.jsx(t.ChevronDownIcon,{className:c.default(d.navSelectIcon,L&&d.navSelectIconExpanded)})]}),L&&e.jsx("ul",{ref:I,id:z,role:"menu",onKeyDown:e=>{var t;const{key:n}=e;if("ArrowDown"===n){e.preventDefault();const t=(B+1)%f.length;H(t)}else if("ArrowUp"===n){e.preventDefault();const t=B>0?B-1:f.length-1;H(t)}else"Tab"===n?D(!1):"Escape"===n&&(D(!1),null===(t=k.current)||void 0===t||t.focus())},"data-testid":`${T}-dropdown-list`,className:d.navItemList,children:f.map(((t,r)=>(({handleClick:t,isSelected:r,item:s,renderItem:i,index:a})=>{const{id:o,title:l}=s;return i?e.jsx("li",{id:o,role:"menuitem",onClick:t,onKeyDown:e=>U(e,t),"aria-current":!!r||void 0,tabIndex:-1,ref:e=>{q.current[a]=e},children:i(s,{selected:r,stickied:E})},a):e.jsxs("li",{id:o,role:"menuitem",className:c.default(d.navItem,r&&E&&d.navItemSelected),onClick:t,onKeyDown:e=>U(e,t),"aria-current":!!r||void 0,tabIndex:-1,ref:e=>{q.current[a]=e},children:[r&&e.jsx(n.TickIcon,{className:d.tickIcon}),e.jsx("div",{className:c.default(d.navItemLabel,r&&d.navItemLabelSelected),children:l})]},a)})({handleClick:e=>((e,t,n)=>{u&&u(e,t,n),D(!1)})(e,t,r),isSelected:r===v,item:t,renderItem:x,index:r})))}),L&&E&&e.jsx("div",{className:d.backdrop,onClick:()=>{D(!1)}})]})]})})),m="lifesg-ds-local-nav-dropdown-stylesheet",p="lifesg-ds-local-nav-dropdown-open";exports.LocalNavDropdown=u;
 //# sourceMappingURL=local-nav-dropdown.js.map

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

@@ -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 { 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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"}
+{"version":3,"file":"local-nav-dropdown.js","sources":["../../../../src/local-nav/local-nav-dropdown/local-nav-dropdown.tsx"],"sourcesContent":["import { ChevronDownIcon } from \"@lifesg/react-icons/chevron-down\";\nimport { TickIcon } from \"@lifesg/react-icons/tick\";\nimport clsx from \"clsx\";\nimport React, { useEffect, useImperativeHandle, useRef, useState } from \"react\";\n\nimport { useApplyStyle } from \"../../theme\";\nimport { Typography } from \"../../typography\";\nimport { useId } from \"../../util\";\nimport type { LocalNavDropdownItemComponentProps } from \"../internal-types\";\nimport type { LocalNavDropdownProps, LocalNavItemProps } from \"../types\";\nimport * as styles 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 navItemListRef = useRef<HTMLUListElement>(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    useApplyStyle(navWrapperRef, {\n        [styles.tokens.navWrapper.stickyOffset]: `${stickyOffset}px`,\n        [styles.tokens.navWrapper.sideMargin]: `${dynamicMargin}px`,\n    });\n\n    useApplyStyle(navItemListRef, {\n        [styles.tokens.navItemList.viewportHeight]: `${\n            viewportHeight - dropdowntHeight - stickyOffset\n        }px`,\n    });\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            <li\n                id={id}\n                key={index}\n                role=\"menuitem\"\n                className={clsx(\n                    styles.navItem,\n                    isSelected && isStickied && styles.navItemSelected\n                )}\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 && <TickIcon className={styles.tickIcon} />}\n                <div\n                    className={clsx(\n                        styles.navItemLabel,\n                        isSelected && styles.navItemLabelSelected\n                    )}\n                >\n                    {title}\n                </div>\n            </li>\n        );\n    };\n\n    return (\n        <>\n            <span ref={detectStickyRef} data-testid={\"sticky-ref\"} />\n            <nav\n                ref={navWrapperRef}\n                id={id}\n                data-testid={navTestId}\n                className={clsx(\n                    styles.navWrapper,\n                    isStickied && styles.navWrapperStickied,\n                    className\n                )}\n            >\n                <div\n                    ref={dropdownRef}\n                    role=\"button\"\n                    onClick={handleToggleDropdown}\n                    onKeyDown={handleNavSelectKeyDown}\n                    data-testid={`${navTestId}-label`}\n                    className={clsx(\n                        styles.navSelect,\n                        isDropdownExpanded && styles.navSelectExpanded\n                    )}\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                    <ChevronDownIcon\n                        className={clsx(\n                            styles.navSelectIcon,\n                            isDropdownExpanded && styles.navSelectIconExpanded\n                        )}\n                    />\n                </div>\n                {isDropdownExpanded && (\n                    <ul\n                        ref={navItemListRef}\n                        id={dropdownListId}\n                        role=\"menu\"\n                        onKeyDown={handleNavItemListKeyDown}\n                        data-testid={`${navTestId}-dropdown-list`}\n                        className={styles.navItemList}\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                    </ul>\n                )}\n                {isDropdownExpanded && isStickied && (\n                    <div\n                        className={styles.backdrop}\n                        onClick={handleDismissBackdrop}\n                    />\n                )}\n            </nav>\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","navItemListRef","listItemRefs","isStickied","setIsStickied","useState","isDropdownExpanded","setIsDropdownExpanded","viewportHeight","setViewportHeight","dropdowntHeight","setDropdownHeight","dynamicMargin","setDynamicMargin","focusedIndex","setFocusedIndex","navTestId","dropdownListId","useId","useImperativeHandle","current","useApplyStyle","styles.tokens","navWrapper","sideMargin","navItemList","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","clsx","styles.navWrapper","styles.navWrapperStickied","role","onClick","prev","onKeyDown","length","styles.navSelect","styles.navSelectExpanded","tabIndex","Typography","BodyBL","weight","ChevronDownIcon","styles.navSelectIcon","styles.navSelectIconExpanded","nextIndex","prevIndex","styles.navItemList","map","item","i","isSelected","index","undefined","el","selected","stickied","styles.navItem","styles.navItemSelected","TickIcon","styles.tickIcon","styles.navItemLabel","styles.navItemLabelSelected","renderDropdownNavItem","handleNavItemClick","styles.backdrop"],"mappings":"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"}

package/cjs/local-nav/local-nav-dropdown/local-nav-dropdown.styles.js

@@ -1,101 +1,2 @@
-"use strict";var o=require("@lifesg/react-icons/chevron-down"),i=require("@lifesg/react-icons/tick"),e=require("styled-components"),t=require("../../v3_theme/index.js");function r(o){return o&&"object"==typeof o&&"default"in o?o:{default:o}}var a=r(e);const s=a.default(o.ChevronDownIcon)`
-    color: ${t.V3_Colour.icon};
-    transition: transform ${t.V3_Motion["duration-250"]}
-        ${t.V3_Motion["ease-default"]};
-    transform: rotate(${o=>o.$isDropdownExpanded?180:0}deg);
-`,n=a.default.div`
-    cursor: pointer;
-    background: ${t.V3_Colour.bg};
-    padding: ${t.V3_Spacing["spacing-12"]} ${t.V3_Spacing["spacing-16"]};
-    overflow: hidden;
-    box-shadow: 0 0 ${t.V3_Border["width-010"]} ${t.V3_Border["width-010"]}
-        ${t.V3_Colour.border};
-    border-radius: ${t.V3_Radius.sm};
-    ${o=>o.$isDropdownExpanded&&e.css`
-            border-bottom-left-radius: ${t.V3_Radius.none};
-            border-bottom-right-radius: ${t.V3_Radius.none};
-        `}
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    transition: all ${t.V3_Motion["duration-250"]} ${t.V3_Motion["ease-default"]};
-    transition-property: background, border-radius, box-shadow, transform;
-
-    &:focus-visible {
-        outline: 2px solid ${t.V3_Colour["focus-ring"]};
-        outline-offset: 2px;
-        border-radius: ${t.V3_Radius.sm};
-    }
-`,d=a.default.li`
-    padding: ${o=>o.$isSelected?e.css`
-                  ${t.V3_Spacing["spacing-12"]} ${t.V3_Spacing["spacing-8"]} 
-                  ${t.V3_Spacing["spacing-12"]} 0
-              `:e.css`
-                  ${t.V3_Spacing["spacing-12"]} ${t.V3_Spacing["spacing-8"]}
-                  ${t.V3_Spacing["spacing-12"]} ${t.V3_Spacing["spacing-32"]}
-              `};
-    background: ${o=>o.$isSelected?t.V3_Colour["bg-primary-subtlest"]:t.V3_Colour.bg};
-    /* Ensures that the tick mark is positioned relative to the selected item */
-    position: relative;
-    display: flex;
-    /* Vertically align text and tick */
-    align-items: center;
-
-    &:focus-visible {
-        outline: 2px solid ${t.V3_Colour["focus-ring"]};
-        outline-offset: 0px;
-        border-radius: ${t.V3_Radius.sm};
-    }
-`,l=a.default.ul`
-    transition: all ${t.V3_Motion["duration-250"]} ${t.V3_Motion["ease-default"]};
-    transform-origin: top;
-    list-style-type: none;
-    padding: 0 ${t.V3_Spacing["spacing-8"]};
-    margin: 0;
-    background: ${t.V3_Colour.bg};
-    cursor: pointer;
-    box-shadow: 0 0 ${t.V3_Border["width-010"]} ${t.V3_Border["width-010"]}
-        ${t.V3_Colour.border};
-    border-bottom-right-radius: ${t.V3_Radius.sm};
-    border-bottom-left-radius: ${t.V3_Radius.sm};
-    /* Enables vertical scrolling */
-    overflow-y: auto;
-    /* Set a max height for the dropdown list */
-    max-height: ${o=>o.$viewportHeight}px;
-`,c=a.default.div`
-    ${t.V3_Font["body-baseline-regular"]}
-    color: ${o=>o.$isSelected?t.V3_Colour["text-selected"]:t.V3_Colour.text};
-`,u=a.default(i.TickIcon)`
-    color: ${t.V3_Colour["icon-selected"]};
-    margin: 0 ${t.V3_Spacing["spacing-8"]};
-`,p=a.default.div`
-    position: fixed;
-    top: 0;
-    right: 0;
-    left: 0;
-    bottom: 0;
-    background-color: ${t.V3_Colour["overlay-strong"]};
-    z-index: -1;
-`,$=a.default.nav`
-    display: block;
-    position: sticky;
-    top: ${o=>o.$stickyOffset}px;
-    width: 100%;
-    z-index: 10;
-
-    ${({$isStickied:o,$sideMargin:i})=>o&&e.css`
-            ${n} {
-                ${i&&`margin: 0 -${i}px;`}
-                padding: ${t.V3_Spacing["spacing-12"]} ${t.V3_Spacing["spacing-16"]};
-                border-radius: ${t.V3_Radius.none};
-            }
-
-            ${l} {
-                ${i&&`margin-left: -${i}px;`}
-                ${i&&`margin-right: -${i}px;`}
-                border-radius-bottom-left: ${t.V3_Radius.sm};
-                border-radius-bottom-right: ${t.V3_Radius.sm};
-            }
-        `}
-`;exports.Backdrop=p,exports.NavItem=d,exports.NavItemLabel=c,exports.NavItemList=l,exports.NavSelect=n,exports.NavSelectIcon=s,exports.NavWrapper=$,exports.StyledTickIcon=u;
+"use strict";require("./local-nav-dropdown.styles_ftv36t.css");exports.backdrop="beqsxqe",exports.navItem="n1rgfmu8",exports.navItemLabel="n1lmzf88",exports.navItemLabelSelected="nc4nyiy",exports.navItemList="ny6lx9v",exports.navItemSelected="n122w1r6",exports.navSelect="n1fsscye",exports.navSelectExpanded="n10li8ea",exports.navSelectIcon="nczumix",exports.navSelectIconExpanded="n1mayi9n",exports.navWrapper="ns92rya",exports.navWrapperStickied="np844yu",exports.tickIcon="thuuy8a",exports.tokens={navWrapper:{stickyOffset:"--fds-internal-localNavDropdown-navWrapper-stickyOffset",sideMargin:"--fds-internal-localNavDropdown-navWrapper-sideMargin"},navItemList:{viewportHeight:"--fds-internal-localNavDropdown-navItemList-viewportHeight"}};
 //# sourceMappingURL=local-nav-dropdown.styles.js.map

package/cjs/local-nav/local-nav-dropdown/local-nav-dropdown.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"local-nav-dropdown.styles.js","sources":["../../../../src/local-nav/local-nav-dropdown/local-nav-dropdown.styles.tsx"],"sourcesContent":["import { ChevronDownIcon } from \"@lifesg/react-icons/chevron-down\";\nimport { TickIcon } from \"@lifesg/react-icons/tick\";\nimport styled, { css } from \"styled-components\";\n\nimport {\n    V3_Border,\n    V3_Colour,\n    V3_Font,\n    V3_Motion,\n    V3_Radius,\n    V3_Spacing,\n} from \"../../v3_theme\";\n\n// =============================================================================\n// STYLE INTERFACES, transient props are denoted with $\n// See more https://styled-components.com/docs/api#transient-props\n// =============================================================================\ninterface DropdownNavStyleProps {\n    $isStickied?: boolean;\n    $stickyOffset: number;\n    $sideMargin?: number;\n}\n\ninterface NavItemListStyleProps {\n    $viewportHeight?: number;\n}\n\ninterface NavItemStyleProps {\n    $isSelected?: boolean;\n}\ninterface DropdownExpandedProps {\n    $isDropdownExpanded: boolean;\n}\n\ninterface NavIconStyleProps extends DropdownExpandedProps {}\ninterface NavLabelStyleProps extends DropdownExpandedProps {}\n\n// =============================================================================\n// STYLING\n// =============================================================================\n\n// -----------------------------------------------------------------------------\n// NAV SELECT\n// -----------------------------------------------------------------------------\n\nexport const NavSelectIcon = styled(ChevronDownIcon)<NavIconStyleProps>`\n    color: ${V3_Colour[\"icon\"]};\n    transition: transform ${V3_Motion[\"duration-250\"]}\n        ${V3_Motion[\"ease-default\"]};\n    transform: rotate(${(props) => (props.$isDropdownExpanded ? 180 : 0)}deg);\n`;\n\nexport const NavSelect = styled.div<NavLabelStyleProps>`\n    cursor: pointer;\n    background: ${V3_Colour[\"bg\"]};\n    padding: ${V3_Spacing[\"spacing-12\"]} ${V3_Spacing[\"spacing-16\"]};\n    overflow: hidden;\n    box-shadow: 0 0 ${V3_Border[\"width-010\"]} ${V3_Border[\"width-010\"]}\n        ${V3_Colour[\"border\"]};\n    border-radius: ${V3_Radius[\"sm\"]};\n    ${(props) =>\n        props.$isDropdownExpanded &&\n        css`\n            border-bottom-left-radius: ${V3_Radius[\"none\"]};\n            border-bottom-right-radius: ${V3_Radius[\"none\"]};\n        `}\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    transition: all ${V3_Motion[\"duration-250\"]} ${V3_Motion[\"ease-default\"]};\n    transition-property: background, border-radius, box-shadow, transform;\n\n    &:focus-visible {\n        outline: 2px solid ${V3_Colour[\"focus-ring\"]};\n        outline-offset: 2px;\n        border-radius: ${V3_Radius[\"sm\"]};\n    }\n`;\n\n// -----------------------------------------------------------------------------\n// NAV ITEMS\n// -----------------------------------------------------------------------------\n\nexport const NavItem = styled.li<NavItemStyleProps>`\n    padding: ${(props) =>\n        props.$isSelected\n            ? css`\n                  ${V3_Spacing[\"spacing-12\"]} ${V3_Spacing[\"spacing-8\"]} \n                  ${V3_Spacing[\"spacing-12\"]} 0\n              `\n            : css`\n                  ${V3_Spacing[\"spacing-12\"]} ${V3_Spacing[\"spacing-8\"]}\n                  ${V3_Spacing[\"spacing-12\"]} ${V3_Spacing[\"spacing-32\"]}\n              `};\n    background: ${(props) =>\n        props.$isSelected ? V3_Colour[\"bg-primary-subtlest\"] : V3_Colour[\"bg\"]};\n    /* Ensures that the tick mark is positioned relative to the selected item */\n    position: relative;\n    display: flex;\n    /* Vertically align text and tick */\n    align-items: center;\n\n    &:focus-visible {\n        outline: 2px solid ${V3_Colour[\"focus-ring\"]};\n        outline-offset: 0px;\n        border-radius: ${V3_Radius[\"sm\"]};\n    }\n`;\n\nexport const NavItemList = styled.ul<NavItemListStyleProps>`\n    transition: all ${V3_Motion[\"duration-250\"]} ${V3_Motion[\"ease-default\"]};\n    transform-origin: top;\n    list-style-type: none;\n    padding: 0 ${V3_Spacing[\"spacing-8\"]};\n    margin: 0;\n    background: ${V3_Colour[\"bg\"]};\n    cursor: pointer;\n    box-shadow: 0 0 ${V3_Border[\"width-010\"]} ${V3_Border[\"width-010\"]}\n        ${V3_Colour[\"border\"]};\n    border-bottom-right-radius: ${V3_Radius[\"sm\"]};\n    border-bottom-left-radius: ${V3_Radius[\"sm\"]};\n    /* Enables vertical scrolling */\n    overflow-y: auto;\n    /* Set a max height for the dropdown list */\n    max-height: ${(props) => props.$viewportHeight}px;\n`;\n\nexport const NavItemLabel = styled.div<NavItemStyleProps>`\n    ${V3_Font[\"body-baseline-regular\"]}\n    color: ${(props) =>\n        props.$isSelected ? V3_Colour[\"text-selected\"] : V3_Colour[\"text\"]};\n`;\n\nexport const StyledTickIcon = styled(TickIcon)`\n    color: ${V3_Colour[\"icon-selected\"]};\n    margin: 0 ${V3_Spacing[\"spacing-8\"]};\n`;\n\n// -----------------------------------------------------------------------------\n// MAIN\n// -----------------------------------------------------------------------------\n\nexport const Backdrop = styled.div`\n    position: fixed;\n    top: 0;\n    right: 0;\n    left: 0;\n    bottom: 0;\n    background-color: ${V3_Colour[\"overlay-strong\"]};\n    z-index: -1;\n`;\n\nexport const NavWrapper = styled.nav<DropdownNavStyleProps>`\n    display: block;\n    position: sticky;\n    top: ${(props) => props.$stickyOffset}px;\n    width: 100%;\n    z-index: 10;\n\n    ${({ $isStickied, $sideMargin }) =>\n        $isStickied &&\n        css`\n            ${NavSelect} {\n                ${$sideMargin && `margin: 0 -${$sideMargin}px;`}\n                padding: ${V3_Spacing[\"spacing-12\"]} ${V3_Spacing[\n                    \"spacing-16\"\n                ]};\n                border-radius: ${V3_Radius[\"none\"]};\n            }\n\n            ${NavItemList} {\n                ${$sideMargin && `margin-left: -${$sideMargin}px;`}\n                ${$sideMargin && `margin-right: -${$sideMargin}px;`}\n                border-radius-bottom-left: ${V3_Radius.sm};\n                border-radius-bottom-right: ${V3_Radius.sm};\n            }\n        `}\n`;\n"],"names":["NavSelectIcon","styled","ChevronDownIcon","V3_Colour","V3_Motion","props","$isDropdownExpanded","NavSelect","div","V3_Spacing","V3_Border","V3_Radius","css","NavItem","li","$isSelected","NavItemList","ul","$viewportHeight","NavItemLabel","V3_Font","StyledTickIcon","TickIcon","Backdrop","NavWrapper","nav","$stickyOffset","$isStickied","$sideMargin","sm"],"mappings":"kQA6CaA,EAAgBC,EAAAA,QAAOC,EAAAA,gBAAmC;aAC1DC,EAAAA,UAAgB;4BACDC,EAAAA,UAAU;UAC5BA,EAAAA,UAAU;wBACKC,GAAWA,EAAMC,oBAAsB,IAAM;EAGzDC,EAAYN,EAAAA,QAAOO,GAAuB;;kBAErCL,EAAAA,UAAc;eACjBM,EAAAA,WAAW,iBAAiBA,EAAAA,WAAW;;sBAEhCC,EAAAA,UAAU,gBAAgBA,EAAAA,UAAU;UAChDP,EAAAA,UAAkB;qBACPQ,EAAAA,UAAc;MAC5BN,GACCA,EAAMC,qBACNM,KAAG;yCAC8BD,EAAAA,UAAgB;0CACfA,EAAAA,UAAgB;;;;;sBAKpCP,EAAAA,UAAU,mBAAmBA,EAAAA,UAAU;;;;6BAIhCD,EAAAA,UAAU;;yBAEdQ,EAAAA,UAAc;;EAQ1BE,EAAUZ,EAAAA,QAAOa,EAAqB;eACnCT,GACRA,EAAMU,YACAH,KAAG;oBACGH,EAAAA,WAAW,iBAAiBA,EAAAA,WAAW;oBACvCA,EAAAA,WAAW;gBAEjBG,KAAG;oBACGH,EAAAA,WAAW,iBAAiBA,EAAAA,WAAW;oBACvCA,EAAAA,WAAW,iBAAiBA,EAAAA,WAAW;;kBAExCJ,GACXA,EAAMU,YAAcZ,EAAAA,UAAU,uBAAyBA,YAAc;;;;;;;;6BAQhDA,EAAAA,UAAU;;yBAEdQ,EAAAA,UAAc;;EAI1BK,EAAcf,EAAAA,QAAOgB,EAAyB;sBACrCb,EAAAA,UAAU,mBAAmBA,EAAAA,UAAU;;;iBAG5CK,EAAAA,WAAW;;kBAEVN,EAAAA,UAAc;;sBAEVO,EAAAA,UAAU,gBAAgBA,EAAAA,UAAU;UAChDP,EAAAA,UAAkB;kCACMQ,EAAAA,UAAc;iCACfA,EAAAA,UAAc;;;;kBAI5BN,GAAUA,EAAMa;EAGtBC,EAAelB,EAAAA,QAAOO,GAAsB;MACnDY,EAAAA,QAAQ;aACAf,GACNA,EAAMU,YAAcZ,EAAAA,UAAU,iBAAmBA,YAAgB;EAG5DkB,EAAiBpB,EAAAA,QAAOqB,EAAAA,SAAS;aACjCnB,EAAAA,UAAU;gBACPM,EAAAA,WAAW;EAOdc,EAAWtB,EAAAA,QAAOO,GAAG;;;;;;wBAMVL,EAAAA,UAAU;;EAIrBqB,EAAavB,EAAAA,QAAOwB,GAA0B;;;WAG/CpB,GAAUA,EAAMqB;;;;MAItB,EAAGC,cAAaC,iBACdD,GACAf,KAAG;cACGL;kBACIqB,GAAe,cAAcA;2BACpBnB,EAAAA,WAAW,iBAAiBA,EAAAA,WACnC;iCAEaE,EAAAA,UAAgB;;;cAGnCK;kBACIY,GAAe,iBAAiBA;kBAChCA,GAAe,kBAAkBA;6CACNjB,EAAAA,UAAUkB;8CACTlB,EAAAA,UAAUkB;;;"}
+{"version":3,"file":"local-nav-dropdown.styles.js","sources":["../../../../src/local-nav/local-nav-dropdown/local-nav-dropdown.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour, Font, Motion, Radius, Spacing } from \"../../theme\";\n\nexport const tokens = {\n    navWrapper: {\n        stickyOffset: \"--fds-internal-localNavDropdown-navWrapper-stickyOffset\",\n        sideMargin: \"--fds-internal-localNavDropdown-navWrapper-sideMargin\",\n    },\n    navItemList: {\n        viewportHeight:\n            \"--fds-internal-localNavDropdown-navItemList-viewportHeight\",\n    },\n};\n\n// -----------------------------------------------------------------------------\n// NAV SELECT\n// -----------------------------------------------------------------------------\n\nexport const navSelectIcon = css`\n    color: ${Colour[\"icon\"]};\n    transition: transform ${Motion[\"duration-250\"]} ${Motion[\"ease-default\"]};\n    transform: rotate(0deg);\n`;\n\nexport const navSelectIconExpanded = css`\n    transform: rotate(180deg);\n`;\n\nexport const navSelect = css`\n    cursor: pointer;\n    background: ${Colour[\"bg\"]};\n    padding: ${Spacing[\"spacing-12\"]} ${Spacing[\"spacing-16\"]};\n    overflow: hidden;\n    box-shadow: 0 0 ${Border[\"width-010\"]} ${Border[\"width-010\"]}\n        ${Colour[\"border\"]};\n    border-radius: ${Radius[\"sm\"]};\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    transition: all ${Motion[\"duration-250\"]} ${Motion[\"ease-default\"]};\n    transition-property: background, border-radius, box-shadow, transform;\n\n    &:focus-visible {\n        outline: 2px solid ${Colour[\"focus-ring\"]};\n        outline-offset: 2px;\n        border-radius: ${Radius[\"sm\"]};\n    }\n`;\n\nexport const navSelectExpanded = css`\n    border-bottom-left-radius: ${Radius[\"none\"]};\n    border-bottom-right-radius: ${Radius[\"none\"]};\n`;\n\n// -----------------------------------------------------------------------------\n// NAV ITEMS\n// -----------------------------------------------------------------------------\n\nexport const navItem = css`\n    padding: ${Spacing[\"spacing-12\"]} ${Spacing[\"spacing-8\"]}\n        ${Spacing[\"spacing-12\"]} ${Spacing[\"spacing-32\"]};\n    background: ${Colour[\"bg\"]};\n    /* Ensures that the tick mark is positioned relative to the selected item */\n    position: relative;\n    display: flex;\n    /* Vertically align text and tick */\n    align-items: center;\n\n    &:focus-visible {\n        outline: 2px solid ${Colour[\"focus-ring\"]};\n        outline-offset: 0px;\n        border-radius: ${Radius[\"sm\"]};\n    }\n`;\n\nexport const navItemSelected = css`\n    padding: ${Spacing[\"spacing-12\"]} ${Spacing[\"spacing-8\"]}\n        ${Spacing[\"spacing-12\"]} 0;\n    background: ${Colour[\"bg-primary-subtlest\"]};\n`;\n\nexport const navItemList = css`\n    ${tokens.navItemList.viewportHeight}: initial;\n    transition: all ${Motion[\"duration-250\"]} ${Motion[\"ease-default\"]};\n    transform-origin: top;\n    list-style-type: none;\n    padding: 0 ${Spacing[\"spacing-8\"]};\n    margin: 0;\n    background: ${Colour[\"bg\"]};\n    cursor: pointer;\n    box-shadow: 0 0 ${Border[\"width-010\"]} ${Border[\"width-010\"]}\n        ${Colour[\"border\"]};\n    border-bottom-right-radius: ${Radius[\"sm\"]};\n    border-bottom-left-radius: ${Radius[\"sm\"]};\n    /* Enables vertical scrolling */\n    overflow-y: auto;\n    /* Set a max height for the dropdown list */\n    max-height: var(${tokens.navItemList.viewportHeight});\n`;\n\nexport const navItemLabel = css`\n    ${Font[\"body-baseline-regular\"]}\n    color: ${Colour[\"text\"]};\n`;\n\nexport const navItemLabelSelected = css`\n    color: ${Colour[\"text-selected\"]};\n`;\n\nexport const tickIcon = css`\n    color: ${Colour[\"icon-selected\"]};\n    margin: 0 ${Spacing[\"spacing-8\"]};\n`;\n\n// -----------------------------------------------------------------------------\n// MAIN\n// -----------------------------------------------------------------------------\n\nexport const backdrop = css`\n    position: fixed;\n    top: 0;\n    right: 0;\n    left: 0;\n    bottom: 0;\n    background-color: ${Colour[\"overlay-strong\"]};\n    z-index: -1;\n`;\n\nexport const navWrapper = css`\n    ${tokens.navWrapper.stickyOffset}: initial;\n    ${tokens.navWrapper.sideMargin}: initial;\n    display: block;\n    position: sticky;\n    top: var(${tokens.navWrapper.stickyOffset});\n    width: 100%;\n    z-index: 10;\n`;\n\nexport const navWrapperStickied = css`\n    .${navSelect} {\n        margin: 0 calc(var(${tokens.navWrapper.sideMargin}, 0px) * -1);\n        padding: ${Spacing[\"spacing-12\"]} ${Spacing[\"spacing-16\"]};\n        border-radius: ${Radius[\"none\"]};\n    }\n\n    .${navItemList} {\n        margin-left: calc(var(${tokens.navWrapper.sideMargin}, 0px) * -1);\n        margin-right: calc(var(${tokens.navWrapper.sideMargin}, 0px) * -1);\n        border-bottom-left-radius: ${Radius[\"sm\"]};\n        border-bottom-right-radius: ${Radius[\"sm\"]};\n    }\n`;\n"],"names":["navWrapper","stickyOffset","sideMargin","navItemList","viewportHeight"],"mappings":"4HAuHqB,0BA5DD,gCA0CK,wCAKQ,8BAxBT,kCANI,6BA/CN,qCAqBQ,iCA/BJ,wCAMQ,8BAwGX,qCAUQ,2BA7BV,yBA1GC,CAClBA,WAAY,CACRC,aAAc,0DACdC,WAAY,yDAEhBC,YAAa,CACTC,eACI"}

package/cjs/local-nav/local-nav-dropdown/local-nav-dropdown.styles_ftv36t.css

@@ -0,0 +1,13 @@
+.nczumix{color:var(--fds-colour-icon);-webkit-transition:-webkit-transform var(--fds-motion-duration-250) var(--fds-motion-timing-ease-default);transition:transform var(--fds-motion-duration-250) var(--fds-motion-timing-ease-default);-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}
+.n1mayi9n{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);}
+.n1fsscye{cursor:pointer;background:var(--fds-colour-bg);padding:var(--fds-spacing-12) var(--fds-spacing-16);overflow:hidden;box-shadow:0 0 var(--fds-border-width-010) var(--fds-border-width-010) var(--fds-colour-border);border-radius:var(--fds-radius-sm);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:space-between;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-transition:all var(--fds-motion-duration-250) var(--fds-motion-timing-ease-default);transition:all var(--fds-motion-duration-250) var(--fds-motion-timing-ease-default);transition-property:background,border-radius,box-shadow,transform;}.n1fsscye:focus-visible{outline:2px solid var(--fds-colour-focus-ring);outline-offset:2px;border-radius:var(--fds-radius-sm);}
+.n10li8ea{border-bottom-left-radius:var(--fds-radius-none);border-bottom-right-radius:var(--fds-radius-none);}
+.n1rgfmu8{padding:var(--fds-spacing-12) var(--fds-spacing-8) var(--fds-spacing-12) var(--fds-spacing-32);background:var(--fds-colour-bg);position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.n1rgfmu8:focus-visible{outline:2px solid var(--fds-colour-focus-ring);outline-offset:0px;border-radius:var(--fds-radius-sm);}
+.n122w1r6{padding:var(--fds-spacing-12) var(--fds-spacing-8) var(--fds-spacing-12) 0;background:var(--fds-colour-bg-primary-subtlest);}
+.ny6lx9v{--fds-internal-localNavDropdown-navItemList-viewportHeight:initial;-webkit-transition:all var(--fds-motion-duration-250) var(--fds-motion-timing-ease-default);transition:all var(--fds-motion-duration-250) var(--fds-motion-timing-ease-default);transform-origin:top;list-style-type:none;padding:0 var(--fds-spacing-8);margin:0;background:var(--fds-colour-bg);cursor:pointer;box-shadow:0 0 var(--fds-border-width-010) var(--fds-border-width-010) var(--fds-colour-border);border-bottom-right-radius:var(--fds-radius-sm);border-bottom-left-radius:var(--fds-radius-sm);overflow-y:auto;max-height:var(--fds-internal-localNavDropdown-navItemList-viewportHeight);}
+.n1lmzf88{font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);color:var(--fds-colour-text);}
+.nc4nyiy{color:var(--fds-colour-text-selected);}
+.thuuy8a{color:var(--fds-colour-icon-selected);margin:0 var(--fds-spacing-8);}
+.beqsxqe{position:fixed;top:0;right:0;left:0;bottom:0;background-color:var(--fds-colour-overlay-strong);z-index:-1;}
+.ns92rya{--fds-internal-localNavDropdown-navWrapper-stickyOffset:initial;--fds-internal-localNavDropdown-navWrapper-sideMargin:initial;display:block;position:-webkit-sticky;position:sticky;top:var(--fds-internal-localNavDropdown-navWrapper-stickyOffset);width:100%;z-index:10;}
+.np844yu .n1fsscye{margin:0 calc(var(--fds-internal-localNavDropdown-navWrapper-sideMargin, 0px) * -1);padding:var(--fds-spacing-12) var(--fds-spacing-16);border-radius:var(--fds-radius-none);}.np844yu .ny6lx9v{margin-left:calc(var(--fds-internal-localNavDropdown-navWrapper-sideMargin, 0px) * -1);margin-right:calc(var(--fds-internal-localNavDropdown-navWrapper-sideMargin, 0px) * -1);border-bottom-left-radius:var(--fds-radius-sm);border-bottom-right-radius:var(--fds-radius-sm);}

package/cjs/local-nav/local-nav-menu/local-nav-menu.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),t=require("react"),n=require("./local-nav-menu.styles.js");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const a=r(t).default.forwardRef((({onNavItemSelect:t,items:r,selectedItemIndex:a,id:i,"data-testid":l,className:d,renderItem:c},s)=>{const o=l||"local-nav-menu";return e.jsx(n.Nav,{ref:s,id:i,className:d,"data-testid":o,children:r.map(((r,i)=>(({handleClick:t,isSelected:r,item:a,renderItem:i,index:l})=>{const{id:d,title:c}=a;return e.jsx(n.NavItem,{id:d,$isSelected:r,children:e.jsx(n.NavItemContent,{role:"link",onClick:t,onKeyDown:e=>((e,t)=>{const{key:n}=e;"Enter"!==n&&" "!==n||(e.preventDefault(),t(e))})(e,t),tabIndex:0,"aria-current":!!r||void 0,children:i?i(a,{selected:r}):e.jsx(n.TextLabel,{weight:r?"semibold":"regular",children:c})})},l)})({handleClick:e=>t(e,r,i),isSelected:i===a,item:r,renderItem:c,index:i})))})}));exports.LocalNavMenu=a;
+"use strict";var e=require("react/jsx-runtime"),t=require("clsx"),a=require("react"),r=require("../../typography/index.js"),n=require("./local-nav-menu.styles.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=l(t);const d=l(a).default.forwardRef((({onNavItemSelect:t,items:a,selectedItemIndex:l,id:d,"data-testid":s,className:c,renderItem:o},u)=>{const m=s||"local-nav-menu";return e.jsx("ul",{ref:u,id:d,className:i.default(n.nav,c),"data-testid":m,children:a.map(((a,d)=>(({handleClick:t,isSelected:a,item:l,renderItem:d,index:s})=>{const{id:c,title:o}=l;return e.jsx("li",{id:c,className:i.default(n.navItem,a&&n.navItemSelected),children:e.jsx("div",{className:n.navItemContent,role:"link",onClick:t,onKeyDown:e=>((e,t)=>{const{key:a}=e;"Enter"!==a&&" "!==a||(e.preventDefault(),t(e))})(e,t),tabIndex:0,"aria-current":!!a||void 0,children:d?d(l,{selected:a}):e.jsx(r.Typography.BodyBL,{className:n.textLabel,weight:a?"semibold":"regular",children:o})})},s)})({handleClick:e=>t(e,a,d),isSelected:d===l,item:a,renderItem:o,index:d})))})}));exports.LocalNavMenu=d;
 //# sourceMappingURL=local-nav-menu.js.map

package/cjs/local-nav/local-nav-menu/local-nav-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"local-nav-menu.js","sources":["../../../../src/local-nav/local-nav-menu/local-nav-menu.tsx"],"sourcesContent":["import React from \"react\";\n\nimport type { LocalNavMenuItemComponentProps } from \"../internal-types\";\nimport type { LocalNavMenuProps } from \"../types\";\nimport {\n    Nav,\n    NavItem,\n    NavItemContent,\n    TextLabel,\n} from \"./local-nav-menu.styles\";\n\n/**\n * A sidebar navigation element. The currently visible section will be highlighted.\n *\n * This component should be placed inside a container that aligns it to the side.\n * The container can also have `position: sticky` in order to make it a sticky sidebar.\n */\nconst Component = (\n    {\n        onNavItemSelect,\n        items,\n        selectedItemIndex,\n        id,\n        \"data-testid\": dataTestId,\n        className,\n        renderItem,\n    }: LocalNavMenuProps,\n    ref: React.Ref<HTMLUListElement>\n): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const localNavMenuId = dataTestId || \"local-nav-menu\";\n\n    // =============================================================================\n    // EVENT HANDLERS\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    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n\n    const renderLocalNavItem = ({\n        handleClick,\n        isSelected,\n        item,\n        renderItem,\n        index,\n    }: LocalNavMenuItemComponentProps) => {\n        const { id, title } = item;\n\n        const renderTitle = () => {\n            if (renderItem) {\n                return renderItem(item, { selected: isSelected });\n            }\n            return (\n                <TextLabel weight={isSelected ? \"semibold\" : \"regular\"}>\n                    {title}\n                </TextLabel>\n            );\n        };\n\n        return (\n            <NavItem id={id} key={index} $isSelected={isSelected}>\n                <NavItemContent\n                    role=\"link\"\n                    onClick={handleClick}\n                    onKeyDown={(e) => handleNavItemKeyDown(e, handleClick)}\n                    tabIndex={0}\n                    aria-current={isSelected ? true : undefined}\n                >\n                    {renderTitle()}\n                </NavItemContent>\n            </NavItem>\n        );\n    };\n    return (\n        <Nav\n            ref={ref}\n            id={id}\n            className={className}\n            data-testid={localNavMenuId}\n        >\n            {items.map((item, i) => {\n                const isSelected = i === selectedItemIndex;\n                return renderLocalNavItem({\n                    handleClick: (e) => onNavItemSelect(e, item, i),\n                    isSelected,\n                    item,\n                    renderItem,\n                    index: i,\n                });\n            })}\n        </Nav>\n    );\n};\n\nexport const LocalNavMenu = React.forwardRef(Component);\n"],"names":["LocalNavMenu","React","forwardRef","onNavItemSelect","items","selectedItemIndex","id","dataTestId","className","renderItem","ref","localNavMenuId","_jsx","Nav","children","map","item","i","handleClick","isSelected","index","title","NavItem","$isSelected","NavItemContent","role","onClick","onKeyDown","e","key","preventDefault","handleNavItemKeyDown","tabIndex","undefined","selected","TextLabel","weight","renderLocalNavItem"],"mappings":"mLAiBA,MA6FaA,OAAeC,QAAMC,YA7FhB,EAEVC,kBACAC,QACAC,oBACAC,KACA,cAAeC,EACfC,YACAC,cAEJC,KAKA,MAAMC,EAAiBJ,GAAc,iBAyDrC,OACIK,EAAAA,IAACC,EAAAA,IAAG,CACAH,IAAKA,EACLJ,GAAIA,EACJE,UAAWA,EAAS,cACPG,EAAcG,SAE1BV,EAAMW,KAAI,CAACC,EAAMC,IAzCC,GACvBC,cACAC,aACAH,OACAP,aACAW,YAEA,MAAMd,GAAEA,EAAEe,MAAEA,GAAUL,EAatB,OACIJ,EAAAA,IAACU,EAAAA,QAAO,CAAChB,GAAIA,EAAEiB,YAA2BJ,EAAUL,SAChDF,EAAAA,IAACY,EAAAA,eAAc,CACXC,KAAK,OACLC,QAASR,EACTS,UAAYC,GA3CC,EACzBA,EACAV,KAIA,MAAMW,IAAEA,GAAQD,EAEJ,UAARC,GAA2B,MAARA,IACnBD,EAAEE,iBACFZ,EAAYU,GAChB,EAgC8BG,CAAqBH,EAAGV,GAC1Cc,SAAU,EAAC,iBACGb,QAAoBc,EAASnB,SAjB/CL,EACOA,EAAWO,EAAM,CAAEkB,SAAUf,IAGpCP,EAAAA,IAACuB,aAAUC,OAAQjB,EAAa,WAAa,mBACxCE,OAMaD,EAUZ,EAYCiB,CAAmB,CACtBnB,YAAcU,GAAMzB,EAAgByB,EAAGZ,EAAMC,GAC7CE,WAHeF,IAAMZ,EAIrBW,OACAP,aACAW,MAAOH,OAGb"}
+{"version":3,"file":"local-nav-menu.js","sources":["../../../../src/local-nav/local-nav-menu/local-nav-menu.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React from \"react\";\n\nimport { Typography } from \"../../typography\";\nimport type { LocalNavMenuItemComponentProps } from \"../internal-types\";\nimport type { LocalNavMenuProps } from \"../types\";\nimport * as styles from \"./local-nav-menu.styles\";\n\n/**\n * A sidebar navigation element. The currently visible section will be highlighted.\n *\n * This component should be placed inside a container that aligns it to the side.\n * The container can also have `position: sticky` in order to make it a sticky sidebar.\n */\nconst Component = (\n    {\n        onNavItemSelect,\n        items,\n        selectedItemIndex,\n        id,\n        \"data-testid\": dataTestId,\n        className,\n        renderItem,\n    }: LocalNavMenuProps,\n    ref: React.Ref<HTMLUListElement>\n): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const localNavMenuId = dataTestId || \"local-nav-menu\";\n\n    // =============================================================================\n    // EVENT HANDLERS\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    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n\n    const renderLocalNavItem = ({\n        handleClick,\n        isSelected,\n        item,\n        renderItem,\n        index,\n    }: LocalNavMenuItemComponentProps) => {\n        const { id, title } = item;\n\n        const renderTitle = () => {\n            if (renderItem) {\n                return renderItem(item, { selected: isSelected });\n            }\n            return (\n                <Typography.BodyBL\n                    className={styles.textLabel}\n                    weight={isSelected ? \"semibold\" : \"regular\"}\n                >\n                    {title}\n                </Typography.BodyBL>\n            );\n        };\n\n        return (\n            <li\n                id={id}\n                key={index}\n                className={clsx(\n                    styles.navItem,\n                    isSelected && styles.navItemSelected\n                )}\n            >\n                <div\n                    className={styles.navItemContent}\n                    role=\"link\"\n                    onClick={handleClick}\n                    onKeyDown={(e) => handleNavItemKeyDown(e, handleClick)}\n                    tabIndex={0}\n                    aria-current={isSelected ? true : undefined}\n                >\n                    {renderTitle()}\n                </div>\n            </li>\n        );\n    };\n    return (\n        <ul\n            ref={ref}\n            id={id}\n            className={clsx(styles.nav, className)}\n            data-testid={localNavMenuId}\n        >\n            {items.map((item, i) => {\n                const isSelected = i === selectedItemIndex;\n                return renderLocalNavItem({\n                    handleClick: (e) => onNavItemSelect(e, item, i),\n                    isSelected,\n                    item,\n                    renderItem,\n                    index: i,\n                });\n            })}\n        </ul>\n    );\n};\n\nexport const LocalNavMenu = React.forwardRef(Component);\n"],"names":["LocalNavMenu","React","forwardRef","onNavItemSelect","items","selectedItemIndex","id","dataTestId","className","renderItem","ref","localNavMenuId","_jsx","clsx","styles.nav","map","item","i","handleClick","isSelected","index","title","styles.navItem","styles.navItemSelected","children","styles.navItemContent","role","onClick","onKeyDown","e","key","preventDefault","handleNavItemKeyDown","tabIndex","undefined","selected","Typography","BodyBL","styles.textLabel","weight","renderLocalNavItem"],"mappings":"uPAcA,MAwGaA,OAAeC,QAAMC,YAxGhB,EAEVC,kBACAC,QACAC,oBACAC,KACA,cAAeC,EACfC,YACAC,cAEJC,KAKA,MAAMC,EAAiBJ,GAAc,iBAoErC,OACIK,EAAAA,IAAA,KAAA,CACIF,IAAKA,EACLJ,GAAIA,EACJE,UAAWK,EAAAA,QAAKC,EAAAA,IAAYN,GAAU,cACzBG,WAEZP,EAAMW,KAAI,CAACC,EAAMC,IApDC,GACvBC,cACAC,aACAH,OACAP,aACAW,YAEA,MAAMd,GAAEA,EAAEe,MAAEA,GAAUL,EAgBtB,OACIJ,EAAAA,IAAA,KAAA,CACIN,GAAIA,EAEJE,UAAWK,EAAAA,QACPS,UACAH,GAAcI,EAAAA,iBACjBC,SAEDZ,MAAA,MAAA,CACIJ,UAAWiB,EAAAA,eACXC,KAAK,OACLC,QAAST,EACTU,UAAYC,GAtDC,EACzBA,EACAX,KAIA,MAAMY,IAAEA,GAAQD,EAEJ,UAARC,GAA2B,MAARA,IACnBD,EAAEE,iBACFb,EAAYW,GAChB,EA2C8BG,CAAqBH,EAAGX,GAC1Ce,SAAU,EAAC,iBACGd,QAAoBe,EAASV,SA5B/Cf,EACOA,EAAWO,EAAM,CAAEmB,SAAUhB,IAGpCP,EAAAA,IAACwB,EAAAA,WAAWC,OAAM,CACd7B,UAAW8B,EAAAA,UACXC,OAAQpB,EAAa,WAAa,UAASK,SAE1CH,OAQAD,EAgBJ,EAYMoB,CAAmB,CACtBtB,YAAcW,GAAM1B,EAAgB0B,EAAGb,EAAMC,GAC7CE,WAHeF,IAAMZ,EAIrBW,OACAP,aACAW,MAAOH,OAGd"}

package/cjs/local-nav/local-nav-menu/local-nav-menu.styles.js

@@ -1,40 +1,2 @@
-"use strict";var e=require("styled-components"),o=require("../../typography/index.js"),t=require("../../v3_theme/index.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=i(e);const a=r.default.ul`
-    list-style-type: none;
-    padding: 0;
-    margin-top: 0;
-`,n=r.default(o.Typography.BodyBL)`
-    margin: 0;
-`,l=r.default.li`
-    display: block;
-    position: relative;
-    margin: 0;
-    padding: 0;
-    cursor: pointer;
-
-    &::before {
-        content: "";
-        position: absolute;
-        left: 0;
-        width: 4px;
-        height: 100%;
-        top: 0;
-        background-color: ${e=>e.$isSelected?t.V3_Colour["bg-primary"]:t.V3_Colour["bg-primary-subtler"]};
-        transition: all 250ms linear;
-    }
-
-    &:hover,
-    &:focus-within {
-        background-color: ${t.V3_Colour["bg-hover-subtle"]};
-    }
-`,s=r.default.div`
-    display: block;
-    padding: ${t.V3_Spacing["spacing-16"]};
-    padding-left: ${t.V3_Spacing["spacing-20"]};
-
-    &:focus-visible {
-        outline: 2px solid ${t.V3_Colour["focus-ring"]};
-        outline-offset: 2px;
-        border-radius: ${t.V3_Radius.sm};
-    }
-`;exports.Nav=a,exports.NavItem=l,exports.NavItemContent=s,exports.TextLabel=n;
+"use strict";require("./local-nav-menu.styles_pq19dh.css");exports.nav="nflnesd",exports.navItem="n1ocymwf",exports.navItemContent="n8uzvfa",exports.navItemSelected="naf0oif",exports.textLabel="tun9y1j";
 //# sourceMappingURL=local-nav-menu.styles.js.map

package/cjs/local-nav/local-nav-menu/local-nav-menu.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"local-nav-menu.styles.js","sources":["../../../../src/local-nav/local-nav-menu/local-nav-menu.styles.tsx"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { Typography } from \"../../typography\";\nimport { V3_Colour, V3_Radius, V3_Spacing } from \"../../v3_theme\";\n\n// =============================================================================\n// STYLE INTERFACES, transient props are denoted with $\n// See more https://styled-components.com/docs/api#transient-props\n// =============================================================================\ninterface NavItemStyleProps {\n    $isSelected?: boolean;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\n\nexport const Nav = styled.ul`\n    list-style-type: none;\n    padding: 0;\n    margin-top: 0;\n`;\n\nexport const TextLabel = styled(Typography.BodyBL)<NavItemStyleProps>`\n    margin: 0;\n`;\n\nexport const NavItem = styled.li<NavItemStyleProps>`\n    display: block;\n    position: relative;\n    margin: 0;\n    padding: 0;\n    cursor: pointer;\n\n    &::before {\n        content: \"\";\n        position: absolute;\n        left: 0;\n        width: 4px;\n        height: 100%;\n        top: 0;\n        background-color: ${(props) =>\n            props.$isSelected\n                ? V3_Colour[\"bg-primary\"]\n                : V3_Colour[\"bg-primary-subtler\"]};\n        transition: all 250ms linear;\n    }\n\n    &:hover,\n    &:focus-within {\n        background-color: ${V3_Colour[\"bg-hover-subtle\"]};\n    }\n`;\n\nexport const NavItemContent = styled.div`\n    display: block;\n    padding: ${V3_Spacing[\"spacing-16\"]};\n    padding-left: ${V3_Spacing[\"spacing-20\"]};\n\n    &:focus-visible {\n        outline: 2px solid ${V3_Colour[\"focus-ring\"]};\n        outline-offset: 2px;\n        border-radius: ${V3_Radius[\"sm\"]};\n    }\n`;\n"],"names":["Nav","styled","ul","TextLabel","Typography","BodyBL","NavItem","li","props","$isSelected","V3_Colour","NavItemContent","div","V3_Spacing","V3_Radius"],"mappings":"+MAiBO,MAAMA,EAAMC,EAAAA,QAAOC,EAAE;;;;EAMfC,EAAYF,EAAAA,QAAOG,aAAWC,OAA0B;;EAIxDC,EAAUL,EAAAA,QAAOM,EAAqB;;;;;;;;;;;;;;4BActBC,GACjBA,EAAMC,YACAC,EAAAA,UAAU,cACVA,EAAAA,UAAU;;;;;;4BAMAA,EAAAA,UAAU;;EAIzBC,EAAiBV,EAAAA,QAAOW,GAAG;;eAEzBC,EAAAA,WAAW;oBACNA,EAAAA,WAAW;;;6BAGFH,EAAAA,UAAU;;yBAEdI,EAAAA,UAAc;;"}
+{"version":3,"file":"local-nav-menu.styles.js","sources":["../../../../src/local-nav/local-nav-menu/local-nav-menu.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Radius, Spacing } from \"../../theme\";\n\nexport const nav = css`\n    list-style-type: none;\n    padding: 0;\n    margin-top: 0;\n`;\n\nexport const textLabel = css`\n    margin: 0;\n`;\n\nexport const navItem = css`\n    display: block;\n    position: relative;\n    margin: 0;\n    padding: 0;\n    cursor: pointer;\n\n    &::before {\n        content: \"\";\n        position: absolute;\n        left: 0;\n        width: 4px;\n        height: 100%;\n        top: 0;\n        background-color: ${Colour[\"bg-primary-subtler\"]};\n        transition: all 250ms linear;\n    }\n\n    &:hover,\n    &:focus-within {\n        background-color: ${Colour[\"bg-hover-subtle\"]};\n    }\n`;\n\nexport const navItemSelected = css`\n    &::before {\n        background-color: ${Colour[\"bg-primary\"]};\n    }\n`;\n\nexport const navItemContent = css`\n    display: block;\n    padding: ${Spacing[\"spacing-16\"]};\n    padding-left: ${Spacing[\"spacing-20\"]};\n\n    &:focus-visible {\n        outline: 2px solid ${Colour[\"focus-ring\"]};\n        outline-offset: 2px;\n        border-radius: ${Radius[\"sm\"]};\n    }\n`;\n"],"names":[],"mappings":"+GAIgB,0BAUI,kCA8BO,kCANC,4BA5BN"}

package/cjs/local-nav/local-nav-menu/local-nav-menu.styles_pq19dh.css

@@ -0,0 +1,5 @@
+.nflnesd{list-style-type:none;padding:0;margin-top:0;}
+.tun9y1j{margin:0;}
+.n1ocymwf{display:block;position:relative;margin:0;padding:0;cursor:pointer;}.n1ocymwf::before{content:"";position:absolute;left:0;width:4px;height:100%;top:0;background-color:var(--fds-colour-bg-primary-subtler);-webkit-transition:all 250ms linear;transition:all 250ms linear;}.n1ocymwf:hover,.n1ocymwf:focus-within{background-color:var(--fds-colour-bg-hover-subtle);}
+.naf0oif::before{background-color:var(--fds-colour-bg-primary);}
+.n8uzvfa{display:block;padding:var(--fds-spacing-16);padding-left:var(--fds-spacing-20);}.n8uzvfa:focus-visible{outline:2px solid var(--fds-colour-focus-ring);outline-offset:2px;border-radius:var(--fds-radius-sm);}

package/cjs/markup/markup.js

@@ -1,2 +1,2 @@
-"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;
+"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 u=require("../theme/utils/font.js"),i=require("../theme/utils/use-apply-styles.js");require("../theme/utils/use-media-query.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:q,inline:c,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(q)return u.generateFontProperties(q,"regular")}),[q]),y=t.useMemo((()=>Object.assign({color:j||null},n.createMarkupFontStyles(x))),[j,x]);i.useApplyStyle(f,y);const b=m.default(l.baseMarkup,q&&l.sizedMarkup,p),k=c?"span":"div";return r.jsx(k,Object.assign({ref:h,className:b},d))}));exports.Markup=j;
 //# sourceMappingURL=markup.js.map

package/cjs/markup/markup.js.map

@@ -1 +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"}
+{"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":"82BAUA,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/masked-input/masked-input.js

@@ -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");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;
+"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),a=require("@lifesg/react-icons/exclamation-triangle"),n=require("@lifesg/react-icons/eye"),s=require("@lifesg/react-icons/eye-slash"),t=require("clsx"),i=require("../external/lodash/lodash.js"),o=require("react"),l=require("../input-group/input-group.js"),u=require("../shared/accessibility/index.js"),c=require("../shared/component-loading-spinner/component-loading-spinner.js"),d=require("../shared/input-wrapper/input-wrapper.js");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 m=require("../theme/utils/use-apply-styles.js");require("../theme/utils/use-media-query.js");var p=require("../typography/index.js");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var k=require("../util/simple-id-generator.js"),h=require("../util/string-helper.js");require("@react-aria/live-announcer");var g=require("./masked-input.styles.js");function j(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var v=j(t);const f=j(o).default.forwardRef(((t,j)=>{var f,{value:y,readOnly:x,"data-testid":q,maskRange:b,unmaskRange:C,maskRegex:I,maskTransformer:R,iconMask:N=r.jsx(s.EyeSlashIcon,{}),iconUnmask:E=r.jsx(n.EyeIcon,{}),iconActiveColor:S,iconInactiveColor:M,maskChar:T="•",error:w,disableMask:B,transformInput:O,loadState:A,onMask:L,onUnmask:F,onChange:U,onFocus:D,onBlur:H,onTryAgain:_,className:V}=t,W=e.__rest(t,["value","readOnly","data-testid","maskRange","unmaskRange","maskRegex","maskTransformer","iconMask","iconUnmask","iconActiveColor","iconInactiveColor","maskChar","error","disableMask","transformInput","loadState","onMask","onUnmask","onChange","onFocus","onBlur","onTryAgain","className"]);const $=x&&i.lodashExports.isEmpty(y),[G,z]=o.useState(!B),[J,K]=o.useState(y||""),P=k.useId(),Q=`${null!==(f=W.id)&&void 0!==f?f:P}-value`,X=o.useRef(null),Y=o.useRef(null),Z=o.useRef(null),ee=o.useRef(null),re=o.useRef(!B),ae=W["aria-labelledby"];o.useImperativeHandle(j,(()=>X.current),[]),m.useApplyStyle(ee,{[g.tokens.iconContainer.inactiveColor]:M,[g.tokens.iconContainer.activeColor]:S}),o.useEffect((()=>{K(y||"")}),[y]),o.useEffect((()=>{var e,r;x&&("fail"===A&&(null===(e=Y.current)||void 0===e||e.focus()),"success"===A&&(null===(r=Z.current)||void 0===r||r.focus()))}),[x,A]);const ne=e=>{ue(!1),null==D||D(e)},se=e=>{ue(!0),null==H||H(e)},te=e=>{let r=e.target.value;switch(O){case"uppercase":r=r.toUpperCase();break;case"lowercase":r=r.toLowerCase()}K(r),e.target.value=r,null==U||U(e)},ie=()=>{x&&(null==_||_())},oe=e=>{e.preventDefault()},le=()=>{var e;const r=!G;ue(r),r||null===(e=X.current)||void 0===e||e.focus()},ue=e=>{re.current!==e&&(re.current=e,z(e),e?null==L||L():null==F||F())},ce=()=>$?"-":G&&!B?h.StringHelper.maskValue(J,{maskChar:T,maskRange:b,unmaskRange:C,maskRegex:I,maskTransformer:R}):J,de=()=>!(null==J?void 0:J.toString().length)||B,me=()=>{if($)return"-";if(G&&!B){return h.StringHelper.getMaskedDescription(J,"masked",b)||"Masked value"}return J},pe=()=>{if($)return r.jsx(r.Fragment,{});const e=de();return r.jsx("div",{ref:ee,className:v.default(g.iconContainer,e&&g.iconContainerDisabled),"data-testid":"icon-"+(G?"masked":"unmasked"),onMouseDown:e?void 0:oe,onClick:e?void 0:le,"aria-hidden":"true",children:G?E:N})};return r.jsx("div",{"aria-busy":"loading"===A,children:(()=>{if(x)switch(A){case"fail":return r.jsxs(d.BasicButton,{ref:Y,className:g.clickableErrorWrapper,onClick:ie,"data-testid":"try-again-button",type:"button",children:[r.jsxs("span",{className:g.errorTextContainer,children:[r.jsx(a.ExclamationTriangleIcon,{className:g.errorIcon}),r.jsx("span",{className:g.errorLabel,children:"Error"})]}),r.jsx("span",{className:g.tryAgainLabel,children:"Try again?"})]});case"loading":return r.jsxs("div",{className:g.loadingWrapper,children:[r.jsx(c.ComponentLoadingSpinner,{className:g.spinner}),r.jsx(p.Typography.BodyBL,{className:g.loadingLabel,children:"Retrieving..."})]});default:return(()=>{const e=de()||$;return r.jsxs(r.Fragment,{children:[r.jsx(u.VisuallyHidden,{id:Q,children:me()}),r.jsxs("button",{ref:Z,className:g.readOnlyClickable,"data-testid":"masked-input-readonly-button",onClick:e?void 0:le,type:"button","aria-labelledby":u.concatIds(Q,ae),"aria-disabled":e,children:[r.jsx("span",{className:g.readOnlyValueText,children:ce()}),!e&&r.jsx("span",{className:g.readOnlyIconContainer,children:G?r.jsx(n.EyeIcon,{"data-testid":"masked-icon"}):r.jsx(s.EyeSlashIcon,{"data-testid":"unmasked-icon"})})]})]})})()}return r.jsx(l.InputGroup,Object.assign({ref:X,className:v.default(g.inputGroupWrapper,V),"data-testid":`${q||"masked-input"}${G?"-masked":"-unmasked"}`,addon:{type:"custom",attributes:{children:pe()},position:"right"},onFocus:x?void 0:ne,onBlur:x?void 0:se,onClick:x?le:void 0,onChange:te,value:ce(),readOnly:x,error:w},W))})()})}));exports.MaskedInput=f;
 //# sourceMappingURL=masked-input.js.map