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

package/otp-verification/verification-section.js.map

@@ -1 +1 @@
-{"version":3,"file":"verification-section.js","sources":["../../src/otp-verification/verification-section.tsx"],"sourcesContent":["import { useContext } from \"react\";\nimport { useMediaQuery } from \"react-responsive\";\nimport { ThemeContext } from \"styled-components\";\n\nimport { FormErrorMessage } from \"../form/form-label\";\nimport { InputGroup } from \"../input-group\";\nimport { concatIds } from \"../shared/accessibility\";\nimport { Typography } from \"../typography\";\nimport { useId } from \"../util\";\nimport { V3_Breakpoint } from \"../v3_theme\";\nimport type { VerificationSectionProps } from \"./internal-types\";\nimport { EmailThumbnail, PhoneThumbnail } from \"./thumbnail\";\nimport {\n    ReSendMessage,\n    SectionContainer,\n    VerificationSectionWrapper,\n    VerifyButton,\n    VerifyInputWrapper,\n} from \"./verification-section-styles\";\n\nexport const VerificationSection = ({\n    id,\n    \"data-testid\": dataTestId,\n    type,\n    showVerifyOtpThumbnail = false,\n    verifyOtpTitle,\n    verifyOtpMessage,\n    otpCode,\n    setOtpCode,\n    isVerifyLoading,\n    countdown,\n    onVerifyOtp,\n    verifyOtpError,\n    otpPrefix,\n    otpSeparator,\n}: VerificationSectionProps) => {\n    const theme = useContext(ThemeContext);\n    const isMobile = useMediaQuery({\n        maxWidth: V3_Breakpoint[\"sm-max\"]({ theme }),\n    });\n    const thumbnailSize = isMobile ? 64 : 120;\n    const internalId = useId();\n\n    const titleId = `${internalId}-title`;\n    const messageId = `${internalId}-message`;\n    const otpAddonId = `${internalId}-verify-input-addon`;\n    const verifyErrorId = `${internalId}-verify-error`;\n\n    const renderThumbnail = () => {\n        if (!showVerifyOtpThumbnail) return null;\n\n        return (\n            <div aria-hidden>\n                {type === \"email\" ? (\n                    <EmailThumbnail\n                        width={thumbnailSize}\n                        height={thumbnailSize}\n                    />\n                ) : (\n                    <PhoneThumbnail\n                        width={thumbnailSize}\n                        height={thumbnailSize}\n                    />\n                )}\n            </div>\n        );\n    };\n\n    return (\n        <VerificationSectionWrapper\n            id={id}\n            data-testid={dataTestId}\n            role=\"group\"\n        >\n            {renderThumbnail()}\n            <SectionContainer>\n                <div>\n                    <Typography.BodyMD\n                        weight=\"semibold\"\n                        id={titleId}\n                        data-testid={\n                            dataTestId ? `${dataTestId}-title` : undefined\n                        }\n                    >\n                        {verifyOtpTitle}\n                    </Typography.BodyMD>\n                    <Typography.BodyMD\n                        weight=\"regular\"\n                        id={messageId}\n                        data-testid={\n                            dataTestId ? `${dataTestId}-message` : undefined\n                        }\n                    >\n                        {verifyOtpMessage}\n                    </Typography.BodyMD>\n                </div>\n                <div>\n                    <VerifyInputWrapper>\n                        <InputGroup\n                            id={id ? `${id}-verify-input` : undefined}\n                            data-testid={\n                                dataTestId\n                                    ? `${dataTestId}-verify-input`\n                                    : undefined\n                            }\n                            value={otpCode}\n                            onChange={(e) => setOtpCode?.(e.target.value)}\n                            placeholder=\"Enter OTP\"\n                            addon={{\n                                type: \"label\",\n                                attributes: {\n                                    value: `${otpPrefix ?? \"\"}${\n                                        otpSeparator ?? \"\"\n                                    }`,\n                                },\n                            }}\n                            type=\"number\"\n                            error={!!verifyOtpError}\n                            aria-labelledby={titleId}\n                            aria-describedby={concatIds(\n                                messageId,\n                                otpAddonId,\n                                verifyOtpError ? verifyErrorId : undefined\n                            )}\n                            aria-invalid={!!verifyOtpError}\n                            aria-required={true}\n                        />\n                        <VerifyButton\n                            id={id ? `${id}-verify-button` : undefined}\n                            type=\"button\"\n                            data-testid={\n                                dataTestId\n                                    ? `${dataTestId}-verify-button`\n                                    : undefined\n                            }\n                            onClick={onVerifyOtp}\n                            loading={isVerifyLoading}\n                            styleType=\"light\"\n                            disabled={!otpCode || otpCode.length === 0}\n                        >\n                            {!isVerifyLoading && \"Verify\"}\n                        </VerifyButton>\n                    </VerifyInputWrapper>\n                    {verifyOtpError && (\n                        <FormErrorMessage\n                            id={verifyErrorId}\n                            data-testid={\n                                dataTestId\n                                    ? `${dataTestId}-verify-error`\n                                    : undefined\n                            }\n                            role=\"alert\"\n                        >\n                            {verifyOtpError}\n                        </FormErrorMessage>\n                    )}\n                </div>\n                {countdown.isRunning && (\n                    <ReSendMessage\n                        id={id ? `${id}-countdown` : undefined}\n                        data-testid={\n                            dataTestId ? `${dataTestId}-countdown` : undefined\n                        }\n                    >\n                        Resend OTP in {countdown.formatTime()}\n                    </ReSendMessage>\n                )}\n            </SectionContainer>\n        </VerificationSectionWrapper>\n    );\n};\n"],"names":["VerificationSection","id","dataTestId","type","showVerifyOtpThumbnail","verifyOtpTitle","verifyOtpMessage","otpCode","setOtpCode","isVerifyLoading","countdown","onVerifyOtp","verifyOtpError","otpPrefix","otpSeparator","theme","useContext","ThemeContext","thumbnailSize","useMediaQuery","maxWidth","V3_Breakpoint","internalId","useId","titleId","messageId","otpAddonId","verifyErrorId","_jsxs","VerificationSectionWrapper","role","_jsx","children","EmailThumbnail","PhoneThumbnail","width","height","SectionContainer","Typography","BodyMD","weight","undefined","VerifyInputWrapper","InputGroup","value","onChange","e","target","placeholder","addon","attributes","error","concatIds","VerifyButton","onClick","loading","styleType","disabled","length","FormErrorMessage","isRunning","ReSendMessage","formatTime"],"mappings":"28BAoBO,MAAMA,EAAsB,EAC/BC,KACA,cAAeC,EACfC,OACAC,0BAAyB,EACzBC,iBACAC,mBACAC,UACAC,aACAC,kBACAC,YACAC,cACAC,iBACAC,YACAC,mBAEA,MAAMC,EAAQC,EAAWC,GAInBC,EAHWC,EAAAA,cAAc,CAC3BC,SAAUC,EAAc,UAAU,CAAEN,YAEP,GAAK,IAChCO,EAAaC,IAEbC,EAAU,GAAGF,UACbG,EAAY,GAAGH,YACfI,EAAa,GAAGJ,uBAChBK,EAAgB,GAAGL,iBAsBzB,OACIM,EAACC,EAA0B,CACvB5B,GAAIA,gBACSC,EACb4B,KAAK,kBAvBJ1B,EAGD2B,EAAA,MAAA,CAAA,eAAA,EAAAC,SAEQD,EADM,UAAT5B,EACI8B,EAKAC,EALc,CACXC,MAAOjB,EACPkB,OAAQlB,MAPY,KA0BhCU,EAACS,EAAgB,CAAAL,SAAA,CACbJ,EAAA,MAAA,CAAAI,SAAA,CACID,EAACO,EAAWC,OAAM,CACdC,OAAO,WACPvC,GAAIuB,EAAO,cAEPtB,EAAa,GAAGA,eAAqBuC,EAAST,SAGjD3B,IAEL0B,EAACO,EAAWC,OAAM,CACdC,OAAO,UACPvC,GAAIwB,EAAS,cAETvB,EAAa,GAAGA,iBAAuBuC,EAAST,SAGnD1B,OAGTsB,mBACIA,EAACc,aACGX,EAACY,EAAU,CACP1C,GAAIA,EAAK,GAAGA,sBAAoBwC,EAAS,cAErCvC,EACM,GAAGA,sBACHuC,EAEVG,MAAOrC,EACPsC,SAAWC,GAAMtC,aAAU,EAAVA,EAAasC,EAAEC,OAAOH,OACvCI,YAAY,YACZC,MAAO,CACH9C,KAAM,QACN+C,WAAY,CACRN,MAAO,GAAG/B,QAAAA,EAAa,KACnBC,QAAAA,EAAgB,OAI5BX,KAAK,SACLgD,QAASvC,EAAc,kBACNY,EAAO,mBACN4B,EACd3B,EACAC,EACAd,EAAiBe,OAAgBc,oBAErB7B,EAAc,iBACf,IAEnBmB,EAACsB,EAAY,CACTpD,GAAIA,EAAK,GAAGA,uBAAqBwC,EACjCtC,KAAK,SAAQ,cAETD,EACM,GAAGA,uBACHuC,EAEVa,QAAS3C,EACT4C,QAAS9C,EACT+C,UAAU,QACVC,UAAWlD,GAA8B,IAAnBA,EAAQmD,OAAY1B,UAExCvB,GAAmB,cAG5BG,GACGmB,EAAC4B,EAAgB,CACb1D,GAAI0B,gBAEAzB,EACM,GAAGA,sBACHuC,EAEVX,KAAK,QAAOE,SAEXpB,OAIZF,EAAUkD,WACPhC,EAACiC,EAAa,CACV5D,GAAIA,EAAK,GAAGA,mBAAiBwC,EAAS,cAElCvC,EAAa,GAAGA,mBAAyBuC,EAAST,SAAA,CAAA,iBAGvCtB,EAAUoD,qBAIZ"}
+{"version":3,"file":"verification-section.js","sources":["../../src/otp-verification/verification-section.tsx"],"sourcesContent":["import { FormErrorMessage } from \"../form/form-label\";\nimport { InputGroup } from \"../input-group\";\nimport { concatIds } from \"../shared/accessibility\";\nimport { useMaxWidthMediaQuery } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport { useId } from \"../util\";\nimport type { VerificationSectionProps } from \"./internal-types\";\nimport { EmailThumbnail, PhoneThumbnail } from \"./thumbnail\";\nimport {\n    ReSendMessage,\n    SectionContainer,\n    VerificationSectionWrapper,\n    VerifyButton,\n    VerifyInputWrapper,\n} from \"./verification-section-styles\";\n\nexport const VerificationSection = ({\n    id,\n    \"data-testid\": dataTestId,\n    type,\n    showVerifyOtpThumbnail = false,\n    verifyOtpTitle,\n    verifyOtpMessage,\n    otpCode,\n    setOtpCode,\n    isVerifyLoading,\n    countdown,\n    onVerifyOtp,\n    verifyOtpError,\n    otpPrefix,\n    otpSeparator,\n}: VerificationSectionProps) => {\n    const isMobile = useMaxWidthMediaQuery(\"sm\");\n    const thumbnailSize = isMobile ? 64 : 120;\n    const internalId = useId();\n\n    const titleId = `${internalId}-title`;\n    const messageId = `${internalId}-message`;\n    const otpAddonId = `${internalId}-verify-input-addon`;\n    const verifyErrorId = `${internalId}-verify-error`;\n\n    const renderThumbnail = () => {\n        if (!showVerifyOtpThumbnail) return null;\n\n        return (\n            <div aria-hidden>\n                {type === \"email\" ? (\n                    <EmailThumbnail\n                        width={thumbnailSize}\n                        height={thumbnailSize}\n                    />\n                ) : (\n                    <PhoneThumbnail\n                        width={thumbnailSize}\n                        height={thumbnailSize}\n                    />\n                )}\n            </div>\n        );\n    };\n\n    return (\n        <VerificationSectionWrapper\n            id={id}\n            data-testid={dataTestId}\n            role=\"group\"\n        >\n            {renderThumbnail()}\n            <SectionContainer>\n                <div>\n                    <Typography.BodyMD\n                        weight=\"semibold\"\n                        id={titleId}\n                        data-testid={\n                            dataTestId ? `${dataTestId}-title` : undefined\n                        }\n                    >\n                        {verifyOtpTitle}\n                    </Typography.BodyMD>\n                    <Typography.BodyMD\n                        weight=\"regular\"\n                        id={messageId}\n                        data-testid={\n                            dataTestId ? `${dataTestId}-message` : undefined\n                        }\n                    >\n                        {verifyOtpMessage}\n                    </Typography.BodyMD>\n                </div>\n                <div>\n                    <VerifyInputWrapper>\n                        <InputGroup\n                            id={id ? `${id}-verify-input` : undefined}\n                            data-testid={\n                                dataTestId\n                                    ? `${dataTestId}-verify-input`\n                                    : undefined\n                            }\n                            value={otpCode}\n                            onChange={(e) => setOtpCode?.(e.target.value)}\n                            placeholder=\"Enter OTP\"\n                            addon={{\n                                type: \"label\",\n                                attributes: {\n                                    value: `${otpPrefix ?? \"\"}${\n                                        otpSeparator ?? \"\"\n                                    }`,\n                                },\n                            }}\n                            type=\"number\"\n                            error={!!verifyOtpError}\n                            aria-labelledby={titleId}\n                            aria-describedby={concatIds(\n                                messageId,\n                                otpAddonId,\n                                verifyOtpError ? verifyErrorId : undefined\n                            )}\n                            aria-invalid={!!verifyOtpError}\n                            aria-required={true}\n                        />\n                        <VerifyButton\n                            id={id ? `${id}-verify-button` : undefined}\n                            type=\"button\"\n                            data-testid={\n                                dataTestId\n                                    ? `${dataTestId}-verify-button`\n                                    : undefined\n                            }\n                            onClick={onVerifyOtp}\n                            loading={isVerifyLoading}\n                            styleType=\"light\"\n                            disabled={!otpCode || otpCode.length === 0}\n                        >\n                            {!isVerifyLoading && \"Verify\"}\n                        </VerifyButton>\n                    </VerifyInputWrapper>\n                    {verifyOtpError && (\n                        <FormErrorMessage\n                            id={verifyErrorId}\n                            data-testid={\n                                dataTestId\n                                    ? `${dataTestId}-verify-error`\n                                    : undefined\n                            }\n                            role=\"alert\"\n                        >\n                            {verifyOtpError}\n                        </FormErrorMessage>\n                    )}\n                </div>\n                {countdown.isRunning && (\n                    <ReSendMessage\n                        id={id ? `${id}-countdown` : undefined}\n                        data-testid={\n                            dataTestId ? `${dataTestId}-countdown` : undefined\n                        }\n                    >\n                        Resend OTP in {countdown.formatTime()}\n                    </ReSendMessage>\n                )}\n            </SectionContainer>\n        </VerificationSectionWrapper>\n    );\n};\n"],"names":["VerificationSection","id","dataTestId","type","showVerifyOtpThumbnail","verifyOtpTitle","verifyOtpMessage","otpCode","setOtpCode","isVerifyLoading","countdown","onVerifyOtp","verifyOtpError","otpPrefix","otpSeparator","thumbnailSize","useMaxWidthMediaQuery","internalId","useId","titleId","messageId","otpAddonId","verifyErrorId","_jsxs","VerificationSectionWrapper","role","_jsx","children","EmailThumbnail","PhoneThumbnail","width","height","SectionContainer","Typography","BodyMD","weight","undefined","VerifyInputWrapper","InputGroup","value","onChange","e","target","placeholder","addon","attributes","error","concatIds","VerifyButton","onClick","loading","styleType","disabled","length","FormErrorMessage","isRunning","ReSendMessage","formatTime"],"mappings":"ojCAgBO,MAAMA,EAAsB,EAC/BC,KACA,cAAeC,EACfC,OACAC,0BAAyB,EACzBC,iBACAC,mBACAC,UACAC,aACAC,kBACAC,YACAC,cACAC,iBACAC,YACAC,mBAEA,MACMC,EADWC,EAAsB,MACN,GAAK,IAChCC,EAAaC,IAEbC,EAAU,GAAGF,UACbG,EAAY,GAAGH,YACfI,EAAa,GAAGJ,uBAChBK,EAAgB,GAAGL,iBAsBzB,OACIM,EAACC,EAA0B,CACvBvB,GAAIA,gBACSC,EACbuB,KAAK,kBAvBJrB,EAGDsB,EAAA,MAAA,CAAA,eAAA,EAAAC,SAEQD,EADM,UAATvB,EACIyB,EAKAC,EALc,CACXC,MAAOf,EACPgB,OAAQhB,MAPY,KA0BhCQ,EAACS,EAAgB,CAAAL,SAAA,CACbJ,EAAA,MAAA,CAAAI,SAAA,CACID,EAACO,EAAWC,OAAM,CACdC,OAAO,WACPlC,GAAIkB,EAAO,cAEPjB,EAAa,GAAGA,eAAqBkC,EAAST,SAGjDtB,IAELqB,EAACO,EAAWC,OAAM,CACdC,OAAO,UACPlC,GAAImB,EAAS,cAETlB,EAAa,GAAGA,iBAAuBkC,EAAST,SAGnDrB,OAGTiB,mBACIA,EAACc,aACGX,EAACY,EAAU,CACPrC,GAAIA,EAAK,GAAGA,sBAAoBmC,EAAS,cAErClC,EACM,GAAGA,sBACHkC,EAEVG,MAAOhC,EACPiC,SAAWC,GAAMjC,aAAU,EAAVA,EAAaiC,EAAEC,OAAOH,OACvCI,YAAY,YACZC,MAAO,CACHzC,KAAM,QACN0C,WAAY,CACRN,MAAO,GAAG1B,QAAAA,EAAa,KACnBC,QAAAA,EAAgB,OAI5BX,KAAK,SACL2C,QAASlC,EAAc,kBACNO,EAAO,mBACN4B,EACd3B,EACAC,EACAT,EAAiBU,OAAgBc,oBAErBxB,EAAc,iBACf,IAEnBc,EAACsB,EAAY,CACT/C,GAAIA,EAAK,GAAGA,uBAAqBmC,EACjCjC,KAAK,SAAQ,cAETD,EACM,GAAGA,uBACHkC,EAEVa,QAAStC,EACTuC,QAASzC,EACT0C,UAAU,QACVC,UAAW7C,GAA8B,IAAnBA,EAAQ8C,OAAY1B,UAExClB,GAAmB,cAG5BG,GACGc,EAAC4B,EAAgB,CACbrD,GAAIqB,gBAEApB,EACM,GAAGA,sBACHkC,EAEVX,KAAK,QAAOE,SAEXf,OAIZF,EAAU6C,WACPhC,EAACiC,EAAa,CACVvD,GAAIA,EAAK,GAAGA,mBAAiBmC,EAAS,cAElClC,EAAa,GAAGA,mBAAyBkC,EAAST,SAAA,CAAA,iBAGvCjB,EAAU+C,qBAIZ"}

package/overlay/overlay.js

@@ -1,2 +1,2 @@
-import{jsx as e}from"react/jsx-runtime";import{FloatingTree as t,useFloatingNodeId as o,FloatingNode as r}from"@floating-ui/react";import n from"clsx";import{useState as l,useRef as s,useEffect as i}from"react";import a from"react-dom";import"../theme/theme-provider/index.js";import{useInheritedThemeScope as d}from"../theme/theme-provider/hooks.js";import"../theme/tokens/border.js";import"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import{useApplyStyle as c}from"../theme/utils/use-apply-styles.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{useId as m}from"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{tokens as u,root as p,rootShow as y,wrapper as v,wrapperShow as g,wrapperHide as b,wrapperStacked as f,wrapperBackgroundBlur as h,wrapperDisableTransition as j}from"./overlay.styles.js";import{useFloatingParent as O}from"./use-floating-context.js";const k=({show:t=!1,rootId:k,onOverlayClick:L,children:w,backgroundOpacity:x,backgroundBlur:C=!0,disableTransition:P=!1,enableOverlayClick:T=!1,zIndex:E,id:D,containerRef:I})=>{const[S,W]=l(null),[Y,q]=l(),z=m(),A=o(),B=s(),F=s(!1),N=s(null),$=s(null),R=D?`lifesg-ds-overlay-root-${D}`:"lifesg-ds-overlay-root",V=null!=E?E:Y?99999:99998,{themeProps:G,themeStyle:H}=d(t);O(V),c(N,{[u.root.zIndex]:V}),i((()=>(U(),W(M()),()=>{ee(),Z().length<1&&(K()&&(te("remove"),re()),X("remove"))})),[]),i((()=>{if(t){const e=Q();J(e),_(),K()&&1===Z().length&&(oe(),te("add"));const t=setTimeout((()=>{X("add")}),200);return()=>clearTimeout(t)}{ee(),K()&&Z().length<1&&(te("remove"),re());const e=setTimeout((()=>{Z().length<1&&X("remove")}),200);return()=>clearTimeout(e)}}),[t]),i((()=>{if(t)return document.addEventListener("mousedown",ne,!0),()=>{document.removeEventListener("mousedown",ne,!0)}}),[t]);const J=e=>{B.current=e,q(e)},K=()=>/(iPad|iPhone|iPod)/g.test(navigator.userAgent),M=()=>document&&k?document.getElementById(k):document?document.body:null,Q=()=>Z().length>0,U=()=>{const e=document.documentElement.clientWidth,t=window.innerWidth-e;document.documentElement.style.setProperty(u.global.scrollbarWidth,`${t}px`)},X=e=>{const t=document.body.classList.contains(u.global.overlayOpenClass);"add"!==e||t?"remove"===e&&t&&document.body.classList.remove(u.global.overlayOpenClass):document.body.classList.add(u.global.overlayOpenClass)},Z=()=>{const e=document.body.dataset.lifesgDsOverlayOrder;return e?e.split(","):[]},_=()=>{const e=Z();document.body.dataset.lifesgDsOverlayOrder=[...e,z].join(",")},ee=()=>{const e=Z();document.body.dataset.lifesgDsOverlayOrder=e.filter((e=>e!==z)).join(",")},te=e=>{if(!K())return;const t=document.body.classList.contains(u.global.overlayScrollLockClass);"add"!==e||t?"remove"===e&&t&&document.body.classList.remove(u.global.overlayScrollLockClass):document.body.classList.add(u.global.overlayScrollLockClass)},oe=()=>{const e=document.body.style,t=e.top?e.top:window.scrollY+"px";document.body.style.setProperty(u.global.scrollY,t)},re=()=>{if(!K())return;const e=document.body.style.getPropertyValue(u.global.scrollY);requestAnimationFrame((()=>{window.scrollTo({top:parseFloat(e)})}))},ne=e=>{var t;const o=null!==(t=null==I?void 0:I.current)&&void 0!==t?t:$.current,r=$.current;if(!o)return void(F.current=!1);const n=e.target,l=r===n,s=o===n,i=o.contains(n);F.current=!l&&(s||i)},le=e=>{var t;const o=null!==(t=null==I?void 0:I.current)&&void 0!==t?t:$.current,r=$.current;if(!o)return void(F.current=!1);const n=e.target,l=r===n,s=o===n,i=o.contains(n);!l&&(s||i)||F.current||!L||!T||(e.preventDefault(),L()),F.current=!1};return S?a.createPortal(e("div",Object.assign({ref:N,id:R,"data-testid":R,className:n(p,t&&y)},G,{style:H,children:w&&e(r,{id:A,children:e("div",{ref:$,"data-testid":"overlay-wrapper",className:n(v,t?g:b,Y&&f,C&&h,P&&j),onClick:le,children:w})})})),S):null},L=o=>e(t,{children:e(k,Object.assign({},o))});export{L as Overlay};
+import{jsx as e}from"react/jsx-runtime";import{FloatingTree as t,useFloatingNodeId as o,FloatingNode as r}from"@floating-ui/react";import n from"clsx";import{useState as l,useRef as s,useEffect as i}from"react";import a from"react-dom";import"../theme/theme-provider/index.js";import{useInheritedThemeScope as d}from"../theme/theme-provider/hooks.js";import"../theme/tokens/border.js";import"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import{useApplyStyle as c}from"../theme/utils/use-apply-styles.js";import"../theme/utils/use-media-query.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{useId as m}from"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{tokens as u,root as p,rootShow as y,wrapper as v,wrapperShow as g,wrapperHide as b,wrapperStacked as h,wrapperBackgroundBlur as f,wrapperDisableTransition as j}from"./overlay.styles.js";import{useFloatingParent as O}from"./use-floating-context.js";const k=({show:t=!1,rootId:k,onOverlayClick:L,children:w,backgroundOpacity:x,backgroundBlur:C=!0,disableTransition:P=!1,enableOverlayClick:T=!1,zIndex:E,id:D,containerRef:I})=>{const[S,q]=l(null),[W,Y]=l(),z=m(),A=o(),B=s(),F=s(!1),N=s(null),$=s(null),R=D?`lifesg-ds-overlay-root-${D}`:"lifesg-ds-overlay-root",V=null!=E?E:W?99999:99998,{themeProps:G,themeStyle:H}=d(t);O(V),c(N,{[u.root.zIndex]:V}),i((()=>(U(),q(M()),()=>{ee(),Z().length<1&&(K()&&(te("remove"),re()),X("remove"))})),[]),i((()=>{if(t){const e=Q();J(e),_(),K()&&1===Z().length&&(oe(),te("add"));const t=setTimeout((()=>{X("add")}),200);return()=>clearTimeout(t)}{ee(),K()&&Z().length<1&&(te("remove"),re());const e=setTimeout((()=>{Z().length<1&&X("remove")}),200);return()=>clearTimeout(e)}}),[t]),i((()=>{if(t)return document.addEventListener("mousedown",ne,!0),()=>{document.removeEventListener("mousedown",ne,!0)}}),[t]);const J=e=>{B.current=e,Y(e)},K=()=>/(iPad|iPhone|iPod)/g.test(navigator.userAgent),M=()=>document&&k?document.getElementById(k):document?document.body:null,Q=()=>Z().length>0,U=()=>{const e=document.documentElement.clientWidth,t=window.innerWidth-e;document.documentElement.style.setProperty(u.global.scrollbarWidth,`${t}px`)},X=e=>{const t=document.body.classList.contains(u.global.overlayOpenClass);"add"!==e||t?"remove"===e&&t&&document.body.classList.remove(u.global.overlayOpenClass):document.body.classList.add(u.global.overlayOpenClass)},Z=()=>{const e=document.body.dataset.lifesgDsOverlayOrder;return e?e.split(","):[]},_=()=>{const e=Z();document.body.dataset.lifesgDsOverlayOrder=[...e,z].join(",")},ee=()=>{const e=Z();document.body.dataset.lifesgDsOverlayOrder=e.filter((e=>e!==z)).join(",")},te=e=>{if(!K())return;const t=document.body.classList.contains(u.global.overlayScrollLockClass);"add"!==e||t?"remove"===e&&t&&document.body.classList.remove(u.global.overlayScrollLockClass):document.body.classList.add(u.global.overlayScrollLockClass)},oe=()=>{const e=document.body.style,t=e.top?e.top:window.scrollY+"px";document.body.style.setProperty(u.global.scrollY,t)},re=()=>{if(!K())return;const e=document.body.style.getPropertyValue(u.global.scrollY);requestAnimationFrame((()=>{window.scrollTo({top:parseFloat(e)})}))},ne=e=>{var t;const o=null!==(t=null==I?void 0:I.current)&&void 0!==t?t:$.current,r=$.current;if(!o)return void(F.current=!1);const n=e.target,l=r===n,s=o===n,i=o.contains(n);F.current=!l&&(s||i)},le=e=>{var t;const o=null!==(t=null==I?void 0:I.current)&&void 0!==t?t:$.current,r=$.current;if(!o)return void(F.current=!1);const n=e.target,l=r===n,s=o===n,i=o.contains(n);!l&&(s||i)||F.current||!L||!T||(e.preventDefault(),L()),F.current=!1};return S?a.createPortal(e("div",Object.assign({ref:N,id:R,"data-testid":R,className:n(p,t&&y)},G,{style:H,children:w&&e(r,{id:A,children:e("div",{ref:$,"data-testid":"overlay-wrapper",className:n(v,t?g:b,W&&h,C&&f,P&&j),onClick:le,children:w})})})),S):null},L=o=>e(t,{children:e(k,Object.assign({},o))});export{L as Overlay};
 //# sourceMappingURL=overlay.js.map

package/overlay/overlay.js.map

@@ -1 +1 @@
-{"version":3,"file":"overlay.js","sources":["../../src/overlay/overlay.tsx"],"sourcesContent":["import {\n    FloatingNode,\n    FloatingTree,\n    useFloatingNodeId,\n} from \"@floating-ui/react\";\nimport clsx from \"clsx\";\nimport type React from \"react\";\nimport { useEffect, useRef, useState } from \"react\";\nimport ReactDOM from \"react-dom\";\n\nimport { useApplyStyle, useInheritedThemeScope } from \"../theme\";\nimport { useId } from \"../util\";\nimport * as styles from \"./overlay.styles\";\nimport type { OverlayProps } from \"./types\";\nimport { useFloatingParent } from \"./use-floating-context\";\n\nconst OverlayComponent = ({\n    show = false,\n    rootId,\n    onOverlayClick,\n    children,\n    backgroundOpacity: _backgroundOpacity,\n    backgroundBlur = true,\n    disableTransition = false,\n    enableOverlayClick = false,\n    zIndex: customZIndex,\n    id,\n    containerRef,\n}: OverlayProps): JSX.Element | null => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [rootElement, setRootElement] = useState<HTMLElement | null>(null);\n    const [isStacked, _setIsStacked] = useState<boolean>();\n    const uid = useId();\n    const nodeId = useFloatingNodeId();\n\n    const stacked = useRef<boolean>();\n    // Track where mousedown started to prevent closing drawer during text selection drag\n    const mouseDownInsideModalRef = useRef(false);\n    const rootRef = useRef<HTMLDivElement>(null);\n    const wrapperRef = useRef<HTMLDivElement>(null);\n\n    const overlayRootId = id\n        ? `lifesg-ds-overlay-root-${id}`\n        : \"lifesg-ds-overlay-root\";\n    const zIndex = customZIndex ?? (isStacked ? 99999 : 99998);\n    const { themeProps, themeStyle } = useInheritedThemeScope(show);\n\n    useFloatingParent(zIndex);\n\n    useApplyStyle(rootRef, { [styles.tokens.root.zIndex]: zIndex });\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        initialiseStylesForDocumentBody();\n        setRootElement(getRootElement());\n\n        return () => {\n            removeOverlay();\n\n            if (getOverlayOrder().length < 1) {\n                if (isIOS()) {\n                    applyScrollLockClassForIOS(\"remove\");\n                    scrollToLastScrollPositionForIOS();\n                }\n\n                applyBodyStyleClass(\"remove\");\n            }\n        };\n    }, []);\n\n    useEffect(() => {\n        if (show) {\n            const isStacked = checkIfStacked();\n            setStacked(isStacked);\n\n            addOverlay();\n\n            if (isIOS() && getOverlayOrder().length === 1) {\n                saveScrollPosition();\n                applyScrollLockClassForIOS(\"add\");\n            }\n\n            const timerId = setTimeout(() => {\n                applyBodyStyleClass(\"add\");\n            }, 200); // Allow overlay animations to complete\n\n            return () => clearTimeout(timerId);\n        } else {\n            removeOverlay();\n\n            if (isIOS() && getOverlayOrder().length < 1) {\n                applyScrollLockClassForIOS(\"remove\");\n                scrollToLastScrollPositionForIOS();\n            }\n\n            const timerId = setTimeout(() => {\n                if (getOverlayOrder().length < 1) {\n                    applyBodyStyleClass(\"remove\");\n                }\n            }, 200); // Allow overlay animations to complete\n\n            return () => clearTimeout(timerId);\n        }\n    }, [show]);\n\n    // Track mousedown origin to distinguish clicks from text selection drags\n    useEffect(() => {\n        if (!show) return;\n\n        document.addEventListener(\"mousedown\", handleDocumentMouseDown, true);\n        return () => {\n            document.removeEventListener(\n                \"mousedown\",\n                handleDocumentMouseDown,\n                true\n            );\n        };\n    }, [show]);\n\n    // =============================================================================\n    // REF FUNCTIONS\n    // =============================================================================\n    const setStacked = (data: boolean) => {\n        stacked.current = data;\n        _setIsStacked(data);\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const isIOS = () => /(iPad|iPhone|iPod)/g.test(navigator.userAgent);\n\n    const getRootElement = (): HTMLElement | null => {\n        if (document && rootId) {\n            return document.getElementById(rootId);\n        } else if (document) {\n            // If rootId not specified, we'll use body\n            return document.body;\n        } else {\n            return null;\n        }\n    };\n\n    const checkIfStacked = () => {\n        return getOverlayOrder().length > 0;\n    };\n\n    const initialiseStylesForDocumentBody = () => {\n        const documentWidth = document.documentElement.clientWidth;\n        const windowWidth = window.innerWidth;\n        const scrollBarWidth = windowWidth - documentWidth;\n\n        document.documentElement.style.setProperty(\n            styles.tokens.global.scrollbarWidth,\n            `${scrollBarWidth}px`\n        );\n    };\n\n    /**\n     * This sets the style of <body> to hide the scrollbar\n     */\n    const applyBodyStyleClass = (action: \"add\" | \"remove\") => {\n        const isOverlayStyleClassApplied = document.body.classList.contains(\n            styles.tokens.global.overlayOpenClass\n        );\n\n        if (action === \"add\" && !isOverlayStyleClassApplied) {\n            document.body.classList.add(styles.tokens.global.overlayOpenClass);\n        } else if (action === \"remove\" && isOverlayStyleClassApplied) {\n            document.body.classList.remove(\n                styles.tokens.global.overlayOpenClass\n            );\n        }\n    };\n\n    const getOverlayOrder = () => {\n        const attr = document.body.dataset.lifesgDsOverlayOrder;\n        return attr ? attr.split(\",\") : [];\n    };\n\n    const addOverlay = () => {\n        const order = getOverlayOrder();\n        document.body.dataset.lifesgDsOverlayOrder = [...order, uid].join(\",\");\n    };\n\n    const removeOverlay = () => {\n        const order = getOverlayOrder();\n        document.body.dataset.lifesgDsOverlayOrder = order\n            .filter((o) => o !== uid)\n            .join(\",\");\n    };\n\n    /**\n     * This sets the style of <body> to further prevent scrolling on iOS\n     *\n     * ref: https://stackoverflow.com/a/57455820/3932279\n     * `overflow: hidden` and `overscroll-behavior` is ignored by iOS, this is\n     * an alternative solution\n     *\n     * as a side effect this causes the scroll position to reset, so additional\n     * logic to restore the scroll on close is required\n     */\n    const applyScrollLockClassForIOS = (action: \"add\" | \"remove\") => {\n        if (!isIOS()) {\n            return;\n        }\n\n        const isClassApplied = document.body.classList.contains(\n            styles.tokens.global.overlayScrollLockClass\n        );\n\n        if (action === \"add\" && !isClassApplied) {\n            document.body.classList.add(\n                styles.tokens.global.overlayScrollLockClass\n            );\n        } else if (action === \"remove\" && isClassApplied) {\n            document.body.classList.remove(\n                styles.tokens.global.overlayScrollLockClass\n            );\n        }\n    };\n\n    const saveScrollPosition = () => {\n        const bodyStyle = document.body.style;\n        const scrollY = bodyStyle.top ? bodyStyle.top : window.scrollY + \"px\";\n\n        document.body.style.setProperty(styles.tokens.global.scrollY, scrollY);\n    };\n\n    const scrollToLastScrollPositionForIOS = () => {\n        if (!isIOS()) {\n            return;\n        }\n\n        const scrollY = document.body.style.getPropertyValue(\n            styles.tokens.global.scrollY\n        );\n        requestAnimationFrame(() => {\n            window.scrollTo({\n                top: parseFloat(scrollY),\n            });\n        });\n    };\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleDocumentMouseDown = (e: MouseEvent) => {\n        const container = containerRef?.current ?? wrapperRef.current;\n        const wrapper = wrapperRef.current;\n        if (!container) {\n            mouseDownInsideModalRef.current = false;\n            return;\n        }\n\n        const target = e.target as Node;\n        const clickedOnWrapper = wrapper === target;\n        const clickedOnContainer = container === target;\n        const clickedInsideContainer = container.contains(target);\n\n        // Track if mousedown started inside modal content\n        mouseDownInsideModalRef.current =\n            !clickedOnWrapper && (clickedOnContainer || clickedInsideContainer);\n    };\n\n    const handleWrapperClick = (event: React.MouseEvent<HTMLDivElement>) => {\n        const container = containerRef?.current ?? wrapperRef.current;\n        const wrapper = wrapperRef.current;\n        if (!container) {\n            mouseDownInsideModalRef.current = false;\n            return;\n        }\n\n        const target = event.target as Node;\n        const clickedOnWrapper = wrapper === target;\n        const clickedOnContainer = container === target;\n        const clickedInsideContainer = container.contains(target);\n        const clickedInsideModal = clickedOnContainer || clickedInsideContainer;\n\n        // Only close if both mousedown AND click happened outside modal\n        if (\n            (clickedOnWrapper || !clickedInsideModal) &&\n            !mouseDownInsideModalRef.current &&\n            onOverlayClick &&\n            enableOverlayClick\n        ) {\n            event.preventDefault();\n            onOverlayClick();\n        }\n\n        mouseDownInsideModalRef.current = false;\n    };\n\n    // =============================================================================\n    // RENDER\n    // =============================================================================\n    const renderWrapper = () => (\n        <FloatingNode id={nodeId}>\n            <div\n                ref={wrapperRef}\n                data-testid=\"overlay-wrapper\"\n                className={clsx(\n                    styles.wrapper,\n                    show ? styles.wrapperShow : styles.wrapperHide,\n                    isStacked && styles.wrapperStacked,\n                    backgroundBlur && styles.wrapperBackgroundBlur,\n                    disableTransition && styles.wrapperDisableTransition\n                )}\n                onClick={handleWrapperClick}\n            >\n                {children}\n            </div>\n        </FloatingNode>\n    );\n\n    const renderComponent = () => (\n        <div\n            ref={rootRef}\n            id={overlayRootId}\n            data-testid={overlayRootId}\n            className={clsx(styles.root, show && styles.rootShow)}\n            {...themeProps}\n            style={themeStyle}\n        >\n            {children && renderWrapper()}\n        </div>\n    );\n\n    return rootElement\n        ? ReactDOM.createPortal(renderComponent(), rootElement)\n        : null;\n};\n\nexport const Overlay = (props: OverlayProps) => {\n    return (\n        <FloatingTree>\n            <OverlayComponent {...props} />\n        </FloatingTree>\n    );\n};\n"],"names":["OverlayComponent","show","rootId","onOverlayClick","children","backgroundOpacity","_backgroundOpacity","backgroundBlur","disableTransition","enableOverlayClick","zIndex","customZIndex","id","containerRef","rootElement","setRootElement","useState","isStacked","_setIsStacked","uid","useId","nodeId","useFloatingNodeId","stacked","useRef","mouseDownInsideModalRef","rootRef","wrapperRef","overlayRootId","themeProps","themeStyle","useInheritedThemeScope","useFloatingParent","useApplyStyle","styles.tokens","root","useEffect","initialiseStylesForDocumentBody","getRootElement","removeOverlay","getOverlayOrder","length","isIOS","applyScrollLockClassForIOS","scrollToLastScrollPositionForIOS","applyBodyStyleClass","checkIfStacked","setStacked","addOverlay","saveScrollPosition","timerId","setTimeout","clearTimeout","document","addEventListener","handleDocumentMouseDown","removeEventListener","data","current","test","navigator","userAgent","getElementById","body","documentWidth","documentElement","clientWidth","scrollBarWidth","window","innerWidth","style","setProperty","global","scrollbarWidth","action","isOverlayStyleClassApplied","classList","contains","overlayOpenClass","remove","add","attr","dataset","lifesgDsOverlayOrder","split","order","join","filter","o","isClassApplied","overlayScrollLockClass","bodyStyle","scrollY","top","getPropertyValue","requestAnimationFrame","scrollTo","parseFloat","e","container","_a","wrapper","target","clickedOnWrapper","clickedOnContainer","clickedInsideContainer","handleWrapperClick","event","preventDefault","ReactDOM","createPortal","_jsx","Object","assign","ref","className","clsx","styles.root","styles.rootShow","FloatingNode","styles.wrapper","styles.wrapperShow","styles.wrapperHide","styles.wrapperStacked","styles.wrapperBackgroundBlur","styles.wrapperDisableTransition","onClick","Overlay","props","FloatingTree"],"mappings":"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"}
+{"version":3,"file":"overlay.js","sources":["../../src/overlay/overlay.tsx"],"sourcesContent":["import {\n    FloatingNode,\n    FloatingTree,\n    useFloatingNodeId,\n} from \"@floating-ui/react\";\nimport clsx from \"clsx\";\nimport type React from \"react\";\nimport { useEffect, useRef, useState } from \"react\";\nimport ReactDOM from \"react-dom\";\n\nimport { useApplyStyle, useInheritedThemeScope } from \"../theme\";\nimport { useId } from \"../util\";\nimport * as styles from \"./overlay.styles\";\nimport type { OverlayProps } from \"./types\";\nimport { useFloatingParent } from \"./use-floating-context\";\n\nconst OverlayComponent = ({\n    show = false,\n    rootId,\n    onOverlayClick,\n    children,\n    backgroundOpacity: _backgroundOpacity,\n    backgroundBlur = true,\n    disableTransition = false,\n    enableOverlayClick = false,\n    zIndex: customZIndex,\n    id,\n    containerRef,\n}: OverlayProps): JSX.Element | null => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [rootElement, setRootElement] = useState<HTMLElement | null>(null);\n    const [isStacked, _setIsStacked] = useState<boolean>();\n    const uid = useId();\n    const nodeId = useFloatingNodeId();\n\n    const stacked = useRef<boolean>();\n    // Track where mousedown started to prevent closing drawer during text selection drag\n    const mouseDownInsideModalRef = useRef(false);\n    const rootRef = useRef<HTMLDivElement>(null);\n    const wrapperRef = useRef<HTMLDivElement>(null);\n\n    const overlayRootId = id\n        ? `lifesg-ds-overlay-root-${id}`\n        : \"lifesg-ds-overlay-root\";\n    const zIndex = customZIndex ?? (isStacked ? 99999 : 99998);\n    const { themeProps, themeStyle } = useInheritedThemeScope(show);\n\n    useFloatingParent(zIndex);\n\n    useApplyStyle(rootRef, { [styles.tokens.root.zIndex]: zIndex });\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        initialiseStylesForDocumentBody();\n        setRootElement(getRootElement());\n\n        return () => {\n            removeOverlay();\n\n            if (getOverlayOrder().length < 1) {\n                if (isIOS()) {\n                    applyScrollLockClassForIOS(\"remove\");\n                    scrollToLastScrollPositionForIOS();\n                }\n\n                applyBodyStyleClass(\"remove\");\n            }\n        };\n    }, []);\n\n    useEffect(() => {\n        if (show) {\n            const isStacked = checkIfStacked();\n            setStacked(isStacked);\n\n            addOverlay();\n\n            if (isIOS() && getOverlayOrder().length === 1) {\n                saveScrollPosition();\n                applyScrollLockClassForIOS(\"add\");\n            }\n\n            const timerId = setTimeout(() => {\n                applyBodyStyleClass(\"add\");\n            }, 200); // Allow overlay animations to complete\n\n            return () => clearTimeout(timerId);\n        } else {\n            removeOverlay();\n\n            if (isIOS() && getOverlayOrder().length < 1) {\n                applyScrollLockClassForIOS(\"remove\");\n                scrollToLastScrollPositionForIOS();\n            }\n\n            const timerId = setTimeout(() => {\n                if (getOverlayOrder().length < 1) {\n                    applyBodyStyleClass(\"remove\");\n                }\n            }, 200); // Allow overlay animations to complete\n\n            return () => clearTimeout(timerId);\n        }\n    }, [show]);\n\n    // Track mousedown origin to distinguish clicks from text selection drags\n    useEffect(() => {\n        if (!show) return;\n\n        document.addEventListener(\"mousedown\", handleDocumentMouseDown, true);\n        return () => {\n            document.removeEventListener(\n                \"mousedown\",\n                handleDocumentMouseDown,\n                true\n            );\n        };\n    }, [show]);\n\n    // =============================================================================\n    // REF FUNCTIONS\n    // =============================================================================\n    const setStacked = (data: boolean) => {\n        stacked.current = data;\n        _setIsStacked(data);\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const isIOS = () => /(iPad|iPhone|iPod)/g.test(navigator.userAgent);\n\n    const getRootElement = (): HTMLElement | null => {\n        if (document && rootId) {\n            return document.getElementById(rootId);\n        } else if (document) {\n            // If rootId not specified, we'll use body\n            return document.body;\n        } else {\n            return null;\n        }\n    };\n\n    const checkIfStacked = () => {\n        return getOverlayOrder().length > 0;\n    };\n\n    const initialiseStylesForDocumentBody = () => {\n        const documentWidth = document.documentElement.clientWidth;\n        const windowWidth = window.innerWidth;\n        const scrollBarWidth = windowWidth - documentWidth;\n\n        document.documentElement.style.setProperty(\n            styles.tokens.global.scrollbarWidth,\n            `${scrollBarWidth}px`\n        );\n    };\n\n    /**\n     * This sets the style of <body> to hide the scrollbar\n     */\n    const applyBodyStyleClass = (action: \"add\" | \"remove\") => {\n        const isOverlayStyleClassApplied = document.body.classList.contains(\n            styles.tokens.global.overlayOpenClass\n        );\n\n        if (action === \"add\" && !isOverlayStyleClassApplied) {\n            document.body.classList.add(styles.tokens.global.overlayOpenClass);\n        } else if (action === \"remove\" && isOverlayStyleClassApplied) {\n            document.body.classList.remove(\n                styles.tokens.global.overlayOpenClass\n            );\n        }\n    };\n\n    const getOverlayOrder = () => {\n        const attr = document.body.dataset.lifesgDsOverlayOrder;\n        return attr ? attr.split(\",\") : [];\n    };\n\n    const addOverlay = () => {\n        const order = getOverlayOrder();\n        document.body.dataset.lifesgDsOverlayOrder = [...order, uid].join(\",\");\n    };\n\n    const removeOverlay = () => {\n        const order = getOverlayOrder();\n        document.body.dataset.lifesgDsOverlayOrder = order\n            .filter((o) => o !== uid)\n            .join(\",\");\n    };\n\n    /**\n     * This sets the style of <body> to further prevent scrolling on iOS\n     *\n     * ref: https://stackoverflow.com/a/57455820/3932279\n     * `overflow: hidden` and `overscroll-behavior` is ignored by iOS, this is\n     * an alternative solution\n     *\n     * as a side effect this causes the scroll position to reset, so additional\n     * logic to restore the scroll on close is required\n     */\n    const applyScrollLockClassForIOS = (action: \"add\" | \"remove\") => {\n        if (!isIOS()) {\n            return;\n        }\n\n        const isClassApplied = document.body.classList.contains(\n            styles.tokens.global.overlayScrollLockClass\n        );\n\n        if (action === \"add\" && !isClassApplied) {\n            document.body.classList.add(\n                styles.tokens.global.overlayScrollLockClass\n            );\n        } else if (action === \"remove\" && isClassApplied) {\n            document.body.classList.remove(\n                styles.tokens.global.overlayScrollLockClass\n            );\n        }\n    };\n\n    const saveScrollPosition = () => {\n        const bodyStyle = document.body.style;\n        const scrollY = bodyStyle.top ? bodyStyle.top : window.scrollY + \"px\";\n\n        document.body.style.setProperty(styles.tokens.global.scrollY, scrollY);\n    };\n\n    const scrollToLastScrollPositionForIOS = () => {\n        if (!isIOS()) {\n            return;\n        }\n\n        const scrollY = document.body.style.getPropertyValue(\n            styles.tokens.global.scrollY\n        );\n        requestAnimationFrame(() => {\n            window.scrollTo({\n                top: parseFloat(scrollY),\n            });\n        });\n    };\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleDocumentMouseDown = (e: MouseEvent) => {\n        const container = containerRef?.current ?? wrapperRef.current;\n        const wrapper = wrapperRef.current;\n        if (!container) {\n            mouseDownInsideModalRef.current = false;\n            return;\n        }\n\n        const target = e.target as Node;\n        const clickedOnWrapper = wrapper === target;\n        const clickedOnContainer = container === target;\n        const clickedInsideContainer = container.contains(target);\n\n        // Track if mousedown started inside modal content\n        mouseDownInsideModalRef.current =\n            !clickedOnWrapper && (clickedOnContainer || clickedInsideContainer);\n    };\n\n    const handleWrapperClick = (event: React.MouseEvent<HTMLDivElement>) => {\n        const container = containerRef?.current ?? wrapperRef.current;\n        const wrapper = wrapperRef.current;\n        if (!container) {\n            mouseDownInsideModalRef.current = false;\n            return;\n        }\n\n        const target = event.target as Node;\n        const clickedOnWrapper = wrapper === target;\n        const clickedOnContainer = container === target;\n        const clickedInsideContainer = container.contains(target);\n        const clickedInsideModal = clickedOnContainer || clickedInsideContainer;\n\n        // Only close if both mousedown AND click happened outside modal\n        if (\n            (clickedOnWrapper || !clickedInsideModal) &&\n            !mouseDownInsideModalRef.current &&\n            onOverlayClick &&\n            enableOverlayClick\n        ) {\n            event.preventDefault();\n            onOverlayClick();\n        }\n\n        mouseDownInsideModalRef.current = false;\n    };\n\n    // =============================================================================\n    // RENDER\n    // =============================================================================\n    const renderWrapper = () => (\n        <FloatingNode id={nodeId}>\n            <div\n                ref={wrapperRef}\n                data-testid=\"overlay-wrapper\"\n                className={clsx(\n                    styles.wrapper,\n                    show ? styles.wrapperShow : styles.wrapperHide,\n                    isStacked && styles.wrapperStacked,\n                    backgroundBlur && styles.wrapperBackgroundBlur,\n                    disableTransition && styles.wrapperDisableTransition\n                )}\n                onClick={handleWrapperClick}\n            >\n                {children}\n            </div>\n        </FloatingNode>\n    );\n\n    const renderComponent = () => (\n        <div\n            ref={rootRef}\n            id={overlayRootId}\n            data-testid={overlayRootId}\n            className={clsx(styles.root, show && styles.rootShow)}\n            {...themeProps}\n            style={themeStyle}\n        >\n            {children && renderWrapper()}\n        </div>\n    );\n\n    return rootElement\n        ? ReactDOM.createPortal(renderComponent(), rootElement)\n        : null;\n};\n\nexport const Overlay = (props: OverlayProps) => {\n    return (\n        <FloatingTree>\n            <OverlayComponent {...props} />\n        </FloatingTree>\n    );\n};\n"],"names":["OverlayComponent","show","rootId","onOverlayClick","children","backgroundOpacity","_backgroundOpacity","backgroundBlur","disableTransition","enableOverlayClick","zIndex","customZIndex","id","containerRef","rootElement","setRootElement","useState","isStacked","_setIsStacked","uid","useId","nodeId","useFloatingNodeId","stacked","useRef","mouseDownInsideModalRef","rootRef","wrapperRef","overlayRootId","themeProps","themeStyle","useInheritedThemeScope","useFloatingParent","useApplyStyle","styles.tokens","root","useEffect","initialiseStylesForDocumentBody","getRootElement","removeOverlay","getOverlayOrder","length","isIOS","applyScrollLockClassForIOS","scrollToLastScrollPositionForIOS","applyBodyStyleClass","checkIfStacked","setStacked","addOverlay","saveScrollPosition","timerId","setTimeout","clearTimeout","document","addEventListener","handleDocumentMouseDown","removeEventListener","data","current","test","navigator","userAgent","getElementById","body","documentWidth","documentElement","clientWidth","scrollBarWidth","window","innerWidth","style","setProperty","global","scrollbarWidth","action","isOverlayStyleClassApplied","classList","contains","overlayOpenClass","remove","add","attr","dataset","lifesgDsOverlayOrder","split","order","join","filter","o","isClassApplied","overlayScrollLockClass","bodyStyle","scrollY","top","getPropertyValue","requestAnimationFrame","scrollTo","parseFloat","e","container","_a","wrapper","target","clickedOnWrapper","clickedOnContainer","clickedInsideContainer","handleWrapperClick","event","preventDefault","ReactDOM","createPortal","_jsx","Object","assign","ref","className","clsx","styles.root","styles.rootShow","FloatingNode","styles.wrapper","styles.wrapperShow","styles.wrapperHide","styles.wrapperStacked","styles.wrapperBackgroundBlur","styles.wrapperDisableTransition","onClick","Overlay","props","FloatingTree"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifesg/react-design-system",
-  "version": "4.0.0-alpha.2",
+  "version": "4.0.0-alpha.3",
   "description": "A component design system for LifeSG web apps",
   "main": "./cjs/index.js",
   "module": "./index.js",
@@ -301,12 +301,6 @@
       "require": "./cjs/masked-input/index.js",
       "default": "./masked-input/index.js"
     },
-    "./masonry": {
-      "types": "./masonry/index.d.ts",
-      "import": "./masonry/index.js",
-      "require": "./cjs/masonry/index.js",
-      "default": "./masonry/index.js"
-    },
     "./masthead": {
       "types": "./masthead/index.d.ts",
       "import": "./masthead/index.js",
@@ -385,12 +379,6 @@
       "require": "./cjs/popover/index.js",
       "default": "./popover/index.js"
     },
-    "./popover-v2": {
-      "types": "./popover-v2/index.d.ts",
-      "import": "./popover-v2/index.js",
-      "require": "./cjs/popover-v2/index.js",
-      "default": "./popover-v2/index.js"
-    },
     "./predictive-text-input": {
       "types": "./predictive-text-input/index.d.ts",
       "import": "./predictive-text-input/index.js",
@@ -523,12 +511,6 @@
       "require": "./cjs/toggle/index.js",
       "default": "./toggle/index.js"
     },
-    "./tooltip": {
-      "types": "./tooltip/index.d.ts",
-      "import": "./tooltip/index.js",
-      "require": "./cjs/tooltip/index.js",
-      "default": "./tooltip/index.js"
-    },
     "./typography": {
       "types": "./typography/index.d.ts",
       "import": "./typography/index.js",
@@ -547,54 +529,6 @@
       "require": "./cjs/unit-number/index.js",
       "default": "./unit-number/index.js"
     },
-    "./v2_color": {
-      "types": "./v2_color/index.d.ts",
-      "import": "./v2_color/index.js",
-      "require": "./cjs/v2_color/index.js",
-      "default": "./v2_color/index.js"
-    },
-    "./v2_design-token": {
-      "types": "./v2_design-token/index.d.ts",
-      "import": "./v2_design-token/index.js",
-      "require": "./cjs/v2_design-token/index.js",
-      "default": "./v2_design-token/index.js"
-    },
-    "./v2_layout": {
-      "types": "./v2_layout/index.d.ts",
-      "import": "./v2_layout/index.js",
-      "require": "./cjs/v2_layout/index.js",
-      "default": "./v2_layout/index.js"
-    },
-    "./v2_media": {
-      "types": "./v2_media/index.d.ts",
-      "import": "./v2_media/index.js",
-      "require": "./cjs/v2_media/index.js",
-      "default": "./v2_media/index.js"
-    },
-    "./v2_text": {
-      "types": "./v2_text/index.d.ts",
-      "import": "./v2_text/index.js",
-      "require": "./cjs/v2_text/index.js",
-      "default": "./v2_text/index.js"
-    },
-    "./v2_text-list": {
-      "types": "./v2_text-list/index.d.ts",
-      "import": "./v2_text-list/index.js",
-      "require": "./cjs/v2_text-list/index.js",
-      "default": "./v2_text-list/index.js"
-    },
-    "./v2_theme": {
-      "types": "./v2_theme/index.d.ts",
-      "import": "./v2_theme/index.js",
-      "require": "./cjs/v2_theme/index.js",
-      "default": "./v2_theme/index.js"
-    },
-    "./v2_transition": {
-      "types": "./v2_transition/index.d.ts",
-      "import": "./v2_transition/index.js",
-      "require": "./cjs/v2_transition/index.js",
-      "default": "./v2_transition/index.js"
-    },
     "./v3_theme": {
       "types": "./v3_theme/index.d.ts",
       "import": "./v3_theme/index.js",

package/pagination/pagination.js

@@ -1,2 +1,2 @@
-import{jsxs as e,jsx as i}from"react/jsx-runtime";import{Chevron2LeftIcon as a}from"@lifesg/react-icons/chevron-2-left";import{Chevron2RightIcon as r}from"@lifesg/react-icons/chevron-2-right";import{ChevronLeftIcon as o}from"@lifesg/react-icons/chevron-left";import{ChevronLineLeftIcon as t}from"@lifesg/react-icons/chevron-line-left";import{ChevronLineRightIcon as s}from"@lifesg/react-icons/chevron-line-right";import{ChevronRightIcon as l}from"@lifesg/react-icons/chevron-right";import{EllipsisHorizontalIcon as n}from"@lifesg/react-icons/ellipsis-horizontal";import c from"clsx";import m,{useState as p,useEffect as d}from"react";import{Input as h}from"../input/input.js";import{InputSelect as u}from"../input-select/input-select.js";import{VisuallyHidden as g}from"../shared/accessibility/index.js";import{ClickableIcon as f}from"../shared/clickable-icon/clickable-icon.js";import"../theme/theme-provider/index.js";import"../theme/theme-provider/context.js";import"../theme/tokens/border.js";import{Breakpoint as v}from"../theme/tokens/breakpoint.js";import"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import{useSafeMaxWidthMediaQuery as b}from"../theme/utils/media-query.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{useId as N}from"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{useIsMounted as j}from"../util/use-mount.js";import{useDesignToken as k}from"../theme/utils/use-design-token.js";import{Typography as x}from"../typography/index.js";import{paginationList as y,paginationMenu as C,iconButton as M,iconButtonNavigation as O,inputSelectWrapper as w,paginationWrapper as $,paginationMobileInput as P,inputView as S,labelDivider as z,label as B,pageItem as F,pageItemSelected as H,ellipsisContainer as L,hover as E}from"./pagination.styles.js";const I=m.forwardRef((({id:m,"data-testid":I,className:A,pageSize:D=10,totalItems:R,activePage:V,pageSizeOptions:G=q,showFirstAndLastNav:J,showPageSizeChanger:K=!1,onPageChange:Q,onPageSizeChange:T},U)=>{const W=j(),X=k(v["sm-max"]),Y=b(X),[Z,_]=p(!1),[ee,ie]=p(!1),[ae,re]=p(""),[oe,te]=p(G[0]),[se,le]=p(!Y&&K&&oe?oe.value:D),ne=`${N()}-pagination`,ce=Math.ceil(R/se),me=1===V,pe=V===ce,de=V>1?()=>be(1):void 0,he=V<ce?()=>be(ce):void 0,ue=V>1?()=>be(V-1):void 0,ge=V<ce?()=>be(parseInt(V.toString())+1):void 0;d((()=>{V&&fe(V)}),[V]),d((()=>{le(D),te(G.find((e=>e.value===D)))}),[D]);const fe=e=>{re(e.toString())},ve=()=>{_(!1),ie(!1)},be=e=>{Q&&(Q(e),fe(e))},Ne=()=>{const e=Math.min(ce,V+5);be(e),fe(e),_(!0),ie(!1)},je=()=>{const e=Math.max(1,V-5);be(e),fe(e),_(!1),ie(!0)},ke=e=>{const i=e.target.value;if(void 0===i||0===i.length)re("");else if(/^[0-9]+$/.test(i)){const e=parseInt(i.replace(/[^0-9]/g,""));fe(Math.max(1,Math.min(ce,e)))}else re(i.replace(/[^0-9]/g,""))},xe=e=>{e.preventDefault(),ae&&(null==Q||Q(parseInt(ae)))},ye=()=>{_(!0)},Ce=()=>{_(!1)},Me=()=>{ie(!0)},Oe=()=>{ie(!1)},we=r=>e("div",{className:L,children:[i(f,{className:M,focusHighlight:!1,focusOutline:"browser","aria-label":"Previous 5 pages",onMouseEnter:Me,onMouseLeave:Oe,onFocus:Me,onBlur:Oe,onClick:je,children:i(ee?a:n,{"aria-hidden":!0})}),ee&&i("div",{className:E,children:"Previous 5 pages"})]},r),$e=a=>e("div",{className:L,children:[i(f,{className:M,focusHighlight:!1,focusOutline:"browser","aria-label":"Next 5 pages",onMouseEnter:ye,onMouseLeave:Ce,onFocus:ye,onBlur:Ce,onClick:Ne,children:i(Z?r:n,{"aria-hidden":!0})}),Z&&i("div",{className:E,children:"Next 5 pages"})]},a);return e("nav",{className:c($,A),ref:U,id:m||"pagination-wrapper","data-testid":I||"pagination","aria-labelledby":ne,children:[i(g,{id:ne,"aria-hidden":!0,children:"pagination"}),i("div",{className:y,children:e("div",{className:C,children:[J&&i(f,{className:c(M,O),onClick:de,disabled:me,focusHighlight:!1,"aria-label":"First page",focusOutline:"browser",children:i(t,{"aria-hidden":!0})}),i(f,{className:c(M,O),onClick:ue,disabled:me,focusHighlight:!1,"aria-label":"Previous page",focusOutline:"browser",children:i(o,{"aria-hidden":!0})}),W&&Y?e("div",{className:P,children:[i("form",{onSubmit:xe,children:i(h,{className:S,value:ae,onChange:ke,autoComplete:"off",type:"numeric",id:(m||"pagination")+"-input","data-testid":(I||"pagination")+"-input","aria-label":`Page ${V} of ${ce}`})}),i(x.BodyBL,{className:z,children:"/"}),i(x.BodyBL,{className:B,children:ce})]}):[...Array(ce)].map(((e,a)=>{const r=a+1,o=ce-5,t=V===r;return ce<=7?i("button",{onClick:()=>be(r),className:c(F,t&&H),"aria-label":`page ${r} of ${ce}`,"aria-current":!!t&&"page",onMouseOver:ve,onFocus:ve,children:r},r):V+1>5&&2===r?we(r):V-1<=o&&r===ce-1-1?$e(r):r<=5&&V+1<=5||r<=1||r===V||r<=V+1&&r>=V-1-1||r>o&&V-1>o||r>ce-1?i("button",{onClick:()=>be(r),className:c(F,t&&H),"aria-label":`page ${r} of ${ce}`,"aria-current":!!t&&"page",onMouseOver:ve,onFocus:ve,children:r},r):null})),i(f,{className:c(M,O),onClick:ge,disabled:pe,focusHighlight:!1,"aria-label":"Next page",focusOutline:"browser",children:i(l,{"aria-hidden":!0})}),J&&i(f,{className:c(M,O),onClick:he,disabled:pe,focusHighlight:!1,"aria-label":"Last page",focusOutline:"browser",children:i(s,{"aria-hidden":!0})})]})}),K&&!Y&&e("div",{className:w,children:[i(g,{id:`${ne}-page-size`,children:"Items per page"}),i(u,{"aria-labelledby":`${ne}-page-size`,options:G,valueExtractor:e=>e.value,listExtractor:e=>e.label,displayValueExtractor:e=>e.label,selectedOption:oe,onSelectOption:e=>{te(e);const i=e.value,a=Math.ceil(R/i);le(i);T&&T(V>=a?a:V,i)}})]})]})})),q=[{value:10,label:"10 per page"},{value:20,label:"20 per page"},{value:30,label:"30 per page"}];export{I as Pagination};
+import{jsxs as e,jsx as i}from"react/jsx-runtime";import{Chevron2LeftIcon as a}from"@lifesg/react-icons/chevron-2-left";import{Chevron2RightIcon as r}from"@lifesg/react-icons/chevron-2-right";import{ChevronLeftIcon as o}from"@lifesg/react-icons/chevron-left";import{ChevronLineLeftIcon as t}from"@lifesg/react-icons/chevron-line-left";import{ChevronLineRightIcon as s}from"@lifesg/react-icons/chevron-line-right";import{ChevronRightIcon as l}from"@lifesg/react-icons/chevron-right";import{EllipsisHorizontalIcon as n}from"@lifesg/react-icons/ellipsis-horizontal";import c from"clsx";import m,{useState as d,useEffect as p}from"react";import{Input as h}from"../input/input.js";import{InputSelect as u}from"../input-select/input-select.js";import{VisuallyHidden as g}from"../shared/accessibility/index.js";import{ClickableIcon as f}from"../shared/clickable-icon/clickable-icon.js";import"../theme/theme-provider/index.js";import"../theme/theme-provider/context.js";import"../theme/tokens/border.js";import"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{useId as v}from"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{useIsMounted as b}from"../util/use-mount.js";import{useMaxWidthMediaQuery as N}from"../theme/utils/use-media-query.js";import{Typography as j}from"../typography/index.js";import{paginationList as x,paginationMenu as y,iconButton as k,iconButtonNavigation as C,inputSelectWrapper as M,paginationWrapper as O,paginationMobileInput as w,inputView as $,labelDivider as P,label as S,pageItem as z,pageItemSelected as B,ellipsisContainer as F,hover as H}from"./pagination.styles.js";const L=m.forwardRef((({id:m,"data-testid":L,className:I,pageSize:q=10,totalItems:A,activePage:D,pageSizeOptions:R=E,showFirstAndLastNav:V,showPageSizeChanger:G=!1,onPageChange:J,onPageSizeChange:K},Q)=>{const T=b(),U=N("sm"),[W,X]=d(!1),[Y,Z]=d(!1),[_,ee]=d(""),[ie,ae]=d(R[0]),[re,oe]=d(!U&&G&&ie?ie.value:q),te=`${v()}-pagination`,se=Math.ceil(A/re),le=1===D,ne=D===se,ce=D>1?()=>ge(1):void 0,me=D<se?()=>ge(se):void 0,de=D>1?()=>ge(D-1):void 0,pe=D<se?()=>ge(parseInt(D.toString())+1):void 0;p((()=>{D&&he(D)}),[D]),p((()=>{oe(q),ae(R.find((e=>e.value===q)))}),[q]);const he=e=>{ee(e.toString())},ue=()=>{X(!1),Z(!1)},ge=e=>{J&&(J(e),he(e))},fe=()=>{const e=Math.min(se,D+5);ge(e),he(e),X(!0),Z(!1)},ve=()=>{const e=Math.max(1,D-5);ge(e),he(e),X(!1),Z(!0)},be=e=>{const i=e.target.value;if(void 0===i||0===i.length)ee("");else if(/^[0-9]+$/.test(i)){const e=parseInt(i.replace(/[^0-9]/g,""));he(Math.max(1,Math.min(se,e)))}else ee(i.replace(/[^0-9]/g,""))},Ne=e=>{e.preventDefault(),_&&(null==J||J(parseInt(_)))},je=()=>{X(!0)},xe=()=>{X(!1)},ye=()=>{Z(!0)},ke=()=>{Z(!1)},Ce=r=>e("div",{className:F,children:[i(f,{className:k,focusHighlight:!1,focusOutline:"browser","aria-label":"Previous 5 pages",onMouseEnter:ye,onMouseLeave:ke,onFocus:ye,onBlur:ke,onClick:ve,children:i(Y?a:n,{"aria-hidden":!0})}),Y&&i("div",{className:H,children:"Previous 5 pages"})]},r),Me=a=>e("div",{className:F,children:[i(f,{className:k,focusHighlight:!1,focusOutline:"browser","aria-label":"Next 5 pages",onMouseEnter:je,onMouseLeave:xe,onFocus:je,onBlur:xe,onClick:fe,children:i(W?r:n,{"aria-hidden":!0})}),W&&i("div",{className:H,children:"Next 5 pages"})]},a);return e("nav",{className:c(O,I),ref:Q,id:m||"pagination-wrapper","data-testid":L||"pagination","aria-labelledby":te,children:[i(g,{id:te,"aria-hidden":!0,children:"pagination"}),i("div",{className:x,children:e("div",{className:y,children:[V&&i(f,{className:c(k,C),onClick:ce,disabled:le,focusHighlight:!1,"aria-label":"First page",focusOutline:"browser",children:i(t,{"aria-hidden":!0})}),i(f,{className:c(k,C),onClick:de,disabled:le,focusHighlight:!1,"aria-label":"Previous page",focusOutline:"browser",children:i(o,{"aria-hidden":!0})}),T&&U?e("div",{className:w,children:[i("form",{onSubmit:Ne,children:i(h,{className:$,value:_,onChange:be,autoComplete:"off",type:"numeric",id:(m||"pagination")+"-input","data-testid":(L||"pagination")+"-input","aria-label":`Page ${D} of ${se}`})}),i(j.BodyBL,{className:P,children:"/"}),i(j.BodyBL,{className:S,children:se})]}):[...Array(se)].map(((e,a)=>{const r=a+1,o=se-5,t=D===r;return se<=7?i("button",{onClick:()=>ge(r),className:c(z,t&&B),"aria-label":`page ${r} of ${se}`,"aria-current":!!t&&"page",onMouseOver:ue,onFocus:ue,children:r},r):D+1>5&&2===r?Ce(r):D-1<=o&&r===se-1-1?Me(r):r<=5&&D+1<=5||r<=1||r===D||r<=D+1&&r>=D-1-1||r>o&&D-1>o||r>se-1?i("button",{onClick:()=>ge(r),className:c(z,t&&B),"aria-label":`page ${r} of ${se}`,"aria-current":!!t&&"page",onMouseOver:ue,onFocus:ue,children:r},r):null})),i(f,{className:c(k,C),onClick:pe,disabled:ne,focusHighlight:!1,"aria-label":"Next page",focusOutline:"browser",children:i(l,{"aria-hidden":!0})}),V&&i(f,{className:c(k,C),onClick:me,disabled:ne,focusHighlight:!1,"aria-label":"Last page",focusOutline:"browser",children:i(s,{"aria-hidden":!0})})]})}),G&&!U&&e("div",{className:M,children:[i(g,{id:`${te}-page-size`,children:"Items per page"}),i(u,{"aria-labelledby":`${te}-page-size`,options:R,valueExtractor:e=>e.value,listExtractor:e=>e.label,displayValueExtractor:e=>e.label,selectedOption:ie,onSelectOption:e=>{ae(e);const i=e.value,a=Math.ceil(A/i);oe(i);K&&K(D>=a?a:D,i)}})]})]})})),E=[{value:10,label:"10 per page"},{value:20,label:"20 per page"},{value:30,label:"30 per page"}];export{L as Pagination};
 //# sourceMappingURL=pagination.js.map

package/pagination/pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"pagination.js","sources":["../../src/pagination/pagination.tsx"],"sourcesContent":["import { Chevron2LeftIcon } from \"@lifesg/react-icons/chevron-2-left\";\nimport { Chevron2RightIcon } from \"@lifesg/react-icons/chevron-2-right\";\nimport { ChevronLeftIcon } from \"@lifesg/react-icons/chevron-left\";\nimport { ChevronLineLeftIcon } from \"@lifesg/react-icons/chevron-line-left\";\nimport { ChevronLineRightIcon } from \"@lifesg/react-icons/chevron-line-right\";\nimport { ChevronRightIcon } from \"@lifesg/react-icons/chevron-right\";\nimport { EllipsisHorizontalIcon } from \"@lifesg/react-icons/ellipsis-horizontal\";\nimport clsx from \"clsx\";\nimport React, { useEffect, useState } from \"react\";\n\nimport { Input } from \"../input\";\nimport { InputSelect } from \"../input-select\";\nimport { VisuallyHidden } from \"../shared/accessibility\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport {\n    Breakpoint,\n    useDesignToken,\n    useSafeMaxWidthMediaQuery,\n} from \"../theme\";\nimport { Typography } from \"../typography\";\nimport { useId, useIsMounted } from \"../util\";\nimport * as styles from \"./pagination.styles\";\nimport type { PageSizeItemProps, PaginationProps } from \"./types\";\n\nconst Component = (\n    {\n        id,\n        \"data-testid\": dataTestId,\n        className,\n        pageSize = 10,\n        totalItems,\n        activePage,\n        pageSizeOptions = DEFAULT_OPTIONS,\n        showFirstAndLastNav,\n        showPageSizeChanger = false,\n        onPageChange,\n        onPageSizeChange,\n    }: PaginationProps,\n    ref: React.Ref<HTMLDivElement>\n) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n\n    const isMounted = useIsMounted();\n    const mobileBreakpoint = useDesignToken(Breakpoint[\"sm-max\"]);\n    const isMobile = useSafeMaxWidthMediaQuery(mobileBreakpoint);\n    const [hoverRightButton, setHoverRightButton] = useState(false);\n    const [hoverLeftButton, setHoverLeftButton] = useState(false);\n    const [inputText, setInputText] = useState<string>(\"\");\n\n    const [selectedOption, setSelectedOption] = useState<\n        PageSizeItemProps | undefined\n    >(pageSizeOptions[0]);\n    const [pageSizeLocal, setPageSize] = useState<number>(\n        !isMobile && showPageSizeChanger\n            ? selectedOption\n                ? selectedOption.value\n                : pageSize\n            : pageSize\n    );\n\n    const boundaryRange = 1;\n    const siblingRange = 1;\n\n    const internalId = useId();\n    const paginationId = `${internalId}-pagination`;\n\n    const totalPages = Math.ceil(totalItems / pageSizeLocal);\n    const isFirstPage = activePage === 1;\n    const isLastPage = activePage === totalPages;\n\n    const firstPaginationItem =\n        activePage > 1 ? () => handlePaginationItemClick(1) : undefined;\n    const lastPaginationItem =\n        activePage < totalPages\n            ? () => handlePaginationItemClick(totalPages)\n            : undefined;\n    const prevPaginationItem =\n        activePage > 1\n            ? () => handlePaginationItemClick(activePage - 1)\n            : undefined;\n    const nextPaginationItem =\n        activePage < totalPages\n            ? () =>\n                  handlePaginationItemClick(parseInt(activePage.toString()) + 1)\n            : undefined;\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        if (activePage) {\n            setInputValue(activePage);\n        }\n    }, [activePage]);\n\n    useEffect(() => {\n        setPageSize(pageSize);\n        setSelectedOption(\n            pageSizeOptions.find((option) => option.value === pageSize)\n        );\n    }, [pageSize]);\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const setInputValue = (value: number) => {\n        setInputText(value.toString());\n    };\n\n    const closeAllTooltips = () => {\n        setHoverRightButton(false);\n        setHoverLeftButton(false);\n    };\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handlePaginationItemClick = (pageIndex: number) => {\n        if (onPageChange) {\n            onPageChange(pageIndex);\n            setInputValue(pageIndex);\n        }\n    };\n\n    const handleFastForwardClick = () => {\n        const currentIndex = Math.min(totalPages, activePage + 5);\n        handlePaginationItemClick(currentIndex);\n        setInputValue(currentIndex);\n        setHoverRightButton(true);\n        setHoverLeftButton(false);\n    };\n\n    const handleFastBackwardClick = () => {\n        const currentIndex = Math.max(1, activePage - 5);\n        handlePaginationItemClick(currentIndex);\n        setInputValue(currentIndex);\n        setHoverRightButton(false);\n        setHoverLeftButton(true);\n    };\n\n    const handleInput = (event: React.ChangeEvent<HTMLInputElement>) => {\n        const value = event.target.value;\n        const numericRegex = /^[0-9]+$/;\n        if (value === undefined || value.length === 0) {\n            setInputText(\"\");\n        } else if (!numericRegex.test(value)) {\n            setInputText(value.replace(/[^0-9]/g, \"\"));\n        } else {\n            const newPage = parseInt(value.replace(/[^0-9]/g, \"\"));\n            setInputValue(Math.max(1, Math.min(totalPages, newPage)));\n        }\n    };\n\n    const handleInputSubmit = (event: React.FormEvent) => {\n        event.preventDefault();\n        if (inputText) {\n            onPageChange?.(parseInt(inputText));\n        }\n    };\n\n    const onHoverRightButton = () => {\n        setHoverRightButton(true);\n    };\n\n    const onBlurRightButton = () => {\n        setHoverRightButton(false);\n    };\n\n    const onHoverLeftButton = () => {\n        setHoverLeftButton(true);\n    };\n\n    const onBlurLeftButton = () => {\n        setHoverLeftButton(false);\n    };\n\n    const handleListItemClick = (item: PageSizeItemProps) => {\n        setSelectedOption(item);\n        const pagesize = item.value;\n        const totalPage = Math.ceil(totalItems / pagesize);\n\n        setPageSize(pagesize);\n\n        const page = activePage >= totalPage ? totalPage : activePage;\n\n        if (onPageSizeChange) {\n            onPageSizeChange(page, pagesize);\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderPaginationItems = () => {\n        return [...Array(totalPages)].map((e, i) => {\n            const pageIndex = i + 1;\n            const startRange = boundaryRange + 2 + siblingRange * 2;\n            const endRange = totalPages - startRange;\n            const totalRange = (boundaryRange + siblingRange) * 2 + 3;\n            const active = activePage === pageIndex;\n            if (totalPages <= totalRange) {\n                return (\n                    <button\n                        key={pageIndex}\n                        onClick={() => handlePaginationItemClick(pageIndex)}\n                        className={clsx(\n                            styles.pageItem,\n                            active && styles.pageItemSelected\n                        )}\n                        aria-label={`page ${pageIndex} of ${totalPages}`}\n                        aria-current={active ? \"page\" : false}\n                        onMouseOver={closeAllTooltips}\n                        onFocus={closeAllTooltips}\n                    >\n                        {pageIndex}\n                    </button>\n                );\n            }\n\n            const ellipsisStart =\n                activePage + siblingRange > startRange &&\n                pageIndex === boundaryRange + 1;\n            if (ellipsisStart) {\n                return renderStartEllipsis(pageIndex);\n            }\n\n            const ellipsisEnd =\n                activePage - siblingRange <= endRange &&\n                pageIndex === totalPages - boundaryRange - 1;\n            if (ellipsisEnd) {\n                return renderEndEllipsis(pageIndex);\n            }\n\n            const paginationStart =\n                (pageIndex <= startRange &&\n                    activePage + siblingRange <= startRange) ||\n                pageIndex <= boundaryRange;\n            const paginationMiddle =\n                pageIndex === activePage ||\n                (pageIndex <= activePage + siblingRange &&\n                    pageIndex >= activePage - siblingRange - 1);\n            const paginationEnd =\n                (pageIndex > endRange &&\n                    activePage - siblingRange > endRange) ||\n                pageIndex > totalPages - boundaryRange;\n            if (paginationStart || paginationMiddle || paginationEnd) {\n                return (\n                    <button\n                        key={pageIndex}\n                        onClick={() => handlePaginationItemClick(pageIndex)}\n                        className={clsx(\n                            styles.pageItem,\n                            active && styles.pageItemSelected\n                        )}\n                        aria-label={`page ${pageIndex} of ${totalPages}`}\n                        aria-current={active ? \"page\" : false}\n                        onMouseOver={closeAllTooltips}\n                        onFocus={closeAllTooltips}\n                    >\n                        {pageIndex}\n                    </button>\n                );\n            }\n\n            return null;\n        });\n    };\n\n    const renderStartEllipsis = (pageIndex: number) => (\n        <div key={pageIndex} className={styles.ellipsisContainer}>\n            <ClickableIcon\n                className={styles.iconButton}\n                focusHighlight={false}\n                focusOutline=\"browser\"\n                aria-label={\"Previous 5 pages\"}\n                onMouseEnter={onHoverLeftButton}\n                onMouseLeave={onBlurLeftButton}\n                onFocus={onHoverLeftButton}\n                onBlur={onBlurLeftButton}\n                onClick={handleFastBackwardClick}\n            >\n                {hoverLeftButton ? (\n                    <Chevron2LeftIcon aria-hidden />\n                ) : (\n                    <EllipsisHorizontalIcon aria-hidden />\n                )}\n            </ClickableIcon>\n            {hoverLeftButton && (\n                <div className={styles.hover}>Previous 5 pages</div>\n            )}\n        </div>\n    );\n\n    const renderEndEllipsis = (pageIndex: number) => (\n        <div key={pageIndex} className={styles.ellipsisContainer}>\n            <ClickableIcon\n                className={styles.iconButton}\n                focusHighlight={false}\n                focusOutline=\"browser\"\n                aria-label={\"Next 5 pages\"}\n                onMouseEnter={onHoverRightButton}\n                onMouseLeave={onBlurRightButton}\n                onFocus={onHoverRightButton}\n                onBlur={onBlurRightButton}\n                onClick={handleFastForwardClick}\n            >\n                {hoverRightButton ? (\n                    <Chevron2RightIcon aria-hidden />\n                ) : (\n                    <EllipsisHorizontalIcon aria-hidden />\n                )}\n            </ClickableIcon>\n            {hoverRightButton && (\n                <div className={styles.hover}>Next 5 pages</div>\n            )}\n        </div>\n    );\n\n    const renderMobile = () => (\n        <div className={styles.paginationMobileInput}>\n            <form onSubmit={handleInputSubmit}>\n                <Input\n                    className={styles.inputView}\n                    value={inputText}\n                    onChange={handleInput}\n                    autoComplete=\"off\"\n                    type=\"numeric\"\n                    id={(id || \"pagination\") + \"-input\"}\n                    data-testid={(dataTestId || \"pagination\") + \"-input\"}\n                    aria-label={`Page ${activePage} of ${totalPages}`}\n                />\n            </form>\n            <Typography.BodyBL className={styles.labelDivider}>\n                /\n            </Typography.BodyBL>\n            <Typography.BodyBL className={styles.label}>\n                {totalPages}\n            </Typography.BodyBL>\n        </div>\n    );\n\n    return (\n        <nav\n            className={clsx(styles.paginationWrapper, className)}\n            ref={ref}\n            id={id || \"pagination-wrapper\"}\n            data-testid={dataTestId || \"pagination\"}\n            aria-labelledby={paginationId}\n        >\n            <VisuallyHidden id={paginationId} aria-hidden>\n                pagination\n            </VisuallyHidden>\n            <div className={styles.paginationList}>\n                <div className={styles.paginationMenu}>\n                    {showFirstAndLastNav && (\n                        <ClickableIcon\n                            className={clsx(\n                                styles.iconButton,\n                                styles.iconButtonNavigation\n                            )}\n                            onClick={firstPaginationItem}\n                            disabled={isFirstPage}\n                            focusHighlight={false}\n                            aria-label=\"First page\"\n                            focusOutline=\"browser\"\n                        >\n                            <ChevronLineLeftIcon aria-hidden />\n                        </ClickableIcon>\n                    )}\n                    <ClickableIcon\n                        className={clsx(\n                            styles.iconButton,\n                            styles.iconButtonNavigation\n                        )}\n                        onClick={prevPaginationItem}\n                        disabled={isFirstPage}\n                        focusHighlight={false}\n                        aria-label=\"Previous page\"\n                        focusOutline=\"browser\"\n                    >\n                        <ChevronLeftIcon aria-hidden />\n                    </ClickableIcon>\n                    {isMounted && isMobile\n                        ? renderMobile()\n                        : renderPaginationItems()}\n                    <ClickableIcon\n                        className={clsx(\n                            styles.iconButton,\n                            styles.iconButtonNavigation\n                        )}\n                        onClick={nextPaginationItem}\n                        disabled={isLastPage}\n                        focusHighlight={false}\n                        aria-label=\"Next page\"\n                        focusOutline=\"browser\"\n                    >\n                        <ChevronRightIcon aria-hidden />\n                    </ClickableIcon>\n                    {showFirstAndLastNav && (\n                        <ClickableIcon\n                            className={clsx(\n                                styles.iconButton,\n                                styles.iconButtonNavigation\n                            )}\n                            onClick={lastPaginationItem}\n                            disabled={isLastPage}\n                            focusHighlight={false}\n                            aria-label=\"Last page\"\n                            focusOutline=\"browser\"\n                        >\n                            <ChevronLineRightIcon aria-hidden />\n                        </ClickableIcon>\n                    )}\n                </div>\n            </div>\n            {showPageSizeChanger && !isMobile && (\n                <div className={styles.inputSelectWrapper}>\n                    <VisuallyHidden id={`${paginationId}-page-size`}>\n                        Items per page\n                    </VisuallyHidden>\n                    <InputSelect\n                        aria-labelledby={`${paginationId}-page-size`}\n                        options={pageSizeOptions}\n                        valueExtractor={(item) => item.value}\n                        listExtractor={(item) => item.label}\n                        displayValueExtractor={(item) => item.label}\n                        selectedOption={selectedOption}\n                        onSelectOption={handleListItemClick}\n                    />\n                </div>\n            )}\n        </nav>\n    );\n};\nexport const Pagination = React.forwardRef(Component);\n\nconst DEFAULT_OPTIONS: PageSizeItemProps[] = [\n    { value: 10, label: \"10 per page\" },\n    { value: 20, label: \"20 per page\" },\n    { value: 30, label: \"30 per page\" },\n];\n"],"names":["Pagination","React","forwardRef","id","dataTestId","className","pageSize","totalItems","activePage","pageSizeOptions","DEFAULT_OPTIONS","showFirstAndLastNav","showPageSizeChanger","onPageChange","onPageSizeChange","ref","isMounted","useIsMounted","mobileBreakpoint","useDesignToken","Breakpoint","isMobile","useSafeMaxWidthMediaQuery","hoverRightButton","setHoverRightButton","useState","hoverLeftButton","setHoverLeftButton","inputText","setInputText","selectedOption","setSelectedOption","pageSizeLocal","setPageSize","value","paginationId","useId","totalPages","Math","ceil","isFirstPage","isLastPage","firstPaginationItem","handlePaginationItemClick","undefined","lastPaginationItem","prevPaginationItem","nextPaginationItem","parseInt","toString","useEffect","setInputValue","find","option","closeAllTooltips","pageIndex","handleFastForwardClick","currentIndex","min","handleFastBackwardClick","max","handleInput","event","target","length","test","newPage","replace","handleInputSubmit","preventDefault","onHoverRightButton","onBlurRightButton","onHoverLeftButton","onBlurLeftButton","renderStartEllipsis","_jsxs","styles.ellipsisContainer","children","_jsx","ClickableIcon","styles.iconButton","focusHighlight","focusOutline","onMouseEnter","onMouseLeave","onFocus","onBlur","onClick","Chevron2LeftIcon","EllipsisHorizontalIcon","styles.hover","renderEndEllipsis","Chevron2RightIcon","clsx","styles.paginationWrapper","VisuallyHidden","styles.paginationList","styles.paginationMenu","styles.iconButtonNavigation","disabled","ChevronLineLeftIcon","ChevronLeftIcon","styles.paginationMobileInput","onSubmit","Input","styles.inputView","onChange","autoComplete","type","Typography","BodyBL","styles.labelDivider","styles.label","Array","map","e","i","endRange","boundaryRange","active","styles.pageItem","styles.pageItemSelected","onMouseOver","ChevronRightIcon","ChevronLineRightIcon","styles.inputSelectWrapper","InputSelect","options","valueExtractor","item","listExtractor","label","displayValueExtractor","onSelectOption","pagesize","totalPage"],"mappings":"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"}
+{"version":3,"file":"pagination.js","sources":["../../src/pagination/pagination.tsx"],"sourcesContent":["import { Chevron2LeftIcon } from \"@lifesg/react-icons/chevron-2-left\";\nimport { Chevron2RightIcon } from \"@lifesg/react-icons/chevron-2-right\";\nimport { ChevronLeftIcon } from \"@lifesg/react-icons/chevron-left\";\nimport { ChevronLineLeftIcon } from \"@lifesg/react-icons/chevron-line-left\";\nimport { ChevronLineRightIcon } from \"@lifesg/react-icons/chevron-line-right\";\nimport { ChevronRightIcon } from \"@lifesg/react-icons/chevron-right\";\nimport { EllipsisHorizontalIcon } from \"@lifesg/react-icons/ellipsis-horizontal\";\nimport clsx from \"clsx\";\nimport React, { useEffect, useState } from \"react\";\n\nimport { Input } from \"../input\";\nimport { InputSelect } from \"../input-select\";\nimport { VisuallyHidden } from \"../shared/accessibility\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { useMaxWidthMediaQuery } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport { useId, useIsMounted } from \"../util\";\nimport * as styles from \"./pagination.styles\";\nimport type { PageSizeItemProps, PaginationProps } from \"./types\";\n\nconst Component = (\n    {\n        id,\n        \"data-testid\": dataTestId,\n        className,\n        pageSize = 10,\n        totalItems,\n        activePage,\n        pageSizeOptions = DEFAULT_OPTIONS,\n        showFirstAndLastNav,\n        showPageSizeChanger = false,\n        onPageChange,\n        onPageSizeChange,\n    }: PaginationProps,\n    ref: React.Ref<HTMLDivElement>\n) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n\n    const isMounted = useIsMounted();\n    const isMobile = useMaxWidthMediaQuery(\"sm\");\n    const [hoverRightButton, setHoverRightButton] = useState(false);\n    const [hoverLeftButton, setHoverLeftButton] = useState(false);\n    const [inputText, setInputText] = useState<string>(\"\");\n\n    const [selectedOption, setSelectedOption] = useState<\n        PageSizeItemProps | undefined\n    >(pageSizeOptions[0]);\n    const [pageSizeLocal, setPageSize] = useState<number>(\n        !isMobile && showPageSizeChanger\n            ? selectedOption\n                ? selectedOption.value\n                : pageSize\n            : pageSize\n    );\n\n    const boundaryRange = 1;\n    const siblingRange = 1;\n\n    const internalId = useId();\n    const paginationId = `${internalId}-pagination`;\n\n    const totalPages = Math.ceil(totalItems / pageSizeLocal);\n    const isFirstPage = activePage === 1;\n    const isLastPage = activePage === totalPages;\n\n    const firstPaginationItem =\n        activePage > 1 ? () => handlePaginationItemClick(1) : undefined;\n    const lastPaginationItem =\n        activePage < totalPages\n            ? () => handlePaginationItemClick(totalPages)\n            : undefined;\n    const prevPaginationItem =\n        activePage > 1\n            ? () => handlePaginationItemClick(activePage - 1)\n            : undefined;\n    const nextPaginationItem =\n        activePage < totalPages\n            ? () =>\n                  handlePaginationItemClick(parseInt(activePage.toString()) + 1)\n            : undefined;\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        if (activePage) {\n            setInputValue(activePage);\n        }\n    }, [activePage]);\n\n    useEffect(() => {\n        setPageSize(pageSize);\n        setSelectedOption(\n            pageSizeOptions.find((option) => option.value === pageSize)\n        );\n    }, [pageSize]);\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const setInputValue = (value: number) => {\n        setInputText(value.toString());\n    };\n\n    const closeAllTooltips = () => {\n        setHoverRightButton(false);\n        setHoverLeftButton(false);\n    };\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handlePaginationItemClick = (pageIndex: number) => {\n        if (onPageChange) {\n            onPageChange(pageIndex);\n            setInputValue(pageIndex);\n        }\n    };\n\n    const handleFastForwardClick = () => {\n        const currentIndex = Math.min(totalPages, activePage + 5);\n        handlePaginationItemClick(currentIndex);\n        setInputValue(currentIndex);\n        setHoverRightButton(true);\n        setHoverLeftButton(false);\n    };\n\n    const handleFastBackwardClick = () => {\n        const currentIndex = Math.max(1, activePage - 5);\n        handlePaginationItemClick(currentIndex);\n        setInputValue(currentIndex);\n        setHoverRightButton(false);\n        setHoverLeftButton(true);\n    };\n\n    const handleInput = (event: React.ChangeEvent<HTMLInputElement>) => {\n        const value = event.target.value;\n        const numericRegex = /^[0-9]+$/;\n        if (value === undefined || value.length === 0) {\n            setInputText(\"\");\n        } else if (!numericRegex.test(value)) {\n            setInputText(value.replace(/[^0-9]/g, \"\"));\n        } else {\n            const newPage = parseInt(value.replace(/[^0-9]/g, \"\"));\n            setInputValue(Math.max(1, Math.min(totalPages, newPage)));\n        }\n    };\n\n    const handleInputSubmit = (event: React.FormEvent) => {\n        event.preventDefault();\n        if (inputText) {\n            onPageChange?.(parseInt(inputText));\n        }\n    };\n\n    const onHoverRightButton = () => {\n        setHoverRightButton(true);\n    };\n\n    const onBlurRightButton = () => {\n        setHoverRightButton(false);\n    };\n\n    const onHoverLeftButton = () => {\n        setHoverLeftButton(true);\n    };\n\n    const onBlurLeftButton = () => {\n        setHoverLeftButton(false);\n    };\n\n    const handleListItemClick = (item: PageSizeItemProps) => {\n        setSelectedOption(item);\n        const pagesize = item.value;\n        const totalPage = Math.ceil(totalItems / pagesize);\n\n        setPageSize(pagesize);\n\n        const page = activePage >= totalPage ? totalPage : activePage;\n\n        if (onPageSizeChange) {\n            onPageSizeChange(page, pagesize);\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderPaginationItems = () => {\n        return [...Array(totalPages)].map((e, i) => {\n            const pageIndex = i + 1;\n            const startRange = boundaryRange + 2 + siblingRange * 2;\n            const endRange = totalPages - startRange;\n            const totalRange = (boundaryRange + siblingRange) * 2 + 3;\n            const active = activePage === pageIndex;\n            if (totalPages <= totalRange) {\n                return (\n                    <button\n                        key={pageIndex}\n                        onClick={() => handlePaginationItemClick(pageIndex)}\n                        className={clsx(\n                            styles.pageItem,\n                            active && styles.pageItemSelected\n                        )}\n                        aria-label={`page ${pageIndex} of ${totalPages}`}\n                        aria-current={active ? \"page\" : false}\n                        onMouseOver={closeAllTooltips}\n                        onFocus={closeAllTooltips}\n                    >\n                        {pageIndex}\n                    </button>\n                );\n            }\n\n            const ellipsisStart =\n                activePage + siblingRange > startRange &&\n                pageIndex === boundaryRange + 1;\n            if (ellipsisStart) {\n                return renderStartEllipsis(pageIndex);\n            }\n\n            const ellipsisEnd =\n                activePage - siblingRange <= endRange &&\n                pageIndex === totalPages - boundaryRange - 1;\n            if (ellipsisEnd) {\n                return renderEndEllipsis(pageIndex);\n            }\n\n            const paginationStart =\n                (pageIndex <= startRange &&\n                    activePage + siblingRange <= startRange) ||\n                pageIndex <= boundaryRange;\n            const paginationMiddle =\n                pageIndex === activePage ||\n                (pageIndex <= activePage + siblingRange &&\n                    pageIndex >= activePage - siblingRange - 1);\n            const paginationEnd =\n                (pageIndex > endRange &&\n                    activePage - siblingRange > endRange) ||\n                pageIndex > totalPages - boundaryRange;\n            if (paginationStart || paginationMiddle || paginationEnd) {\n                return (\n                    <button\n                        key={pageIndex}\n                        onClick={() => handlePaginationItemClick(pageIndex)}\n                        className={clsx(\n                            styles.pageItem,\n                            active && styles.pageItemSelected\n                        )}\n                        aria-label={`page ${pageIndex} of ${totalPages}`}\n                        aria-current={active ? \"page\" : false}\n                        onMouseOver={closeAllTooltips}\n                        onFocus={closeAllTooltips}\n                    >\n                        {pageIndex}\n                    </button>\n                );\n            }\n\n            return null;\n        });\n    };\n\n    const renderStartEllipsis = (pageIndex: number) => (\n        <div key={pageIndex} className={styles.ellipsisContainer}>\n            <ClickableIcon\n                className={styles.iconButton}\n                focusHighlight={false}\n                focusOutline=\"browser\"\n                aria-label={\"Previous 5 pages\"}\n                onMouseEnter={onHoverLeftButton}\n                onMouseLeave={onBlurLeftButton}\n                onFocus={onHoverLeftButton}\n                onBlur={onBlurLeftButton}\n                onClick={handleFastBackwardClick}\n            >\n                {hoverLeftButton ? (\n                    <Chevron2LeftIcon aria-hidden />\n                ) : (\n                    <EllipsisHorizontalIcon aria-hidden />\n                )}\n            </ClickableIcon>\n            {hoverLeftButton && (\n                <div className={styles.hover}>Previous 5 pages</div>\n            )}\n        </div>\n    );\n\n    const renderEndEllipsis = (pageIndex: number) => (\n        <div key={pageIndex} className={styles.ellipsisContainer}>\n            <ClickableIcon\n                className={styles.iconButton}\n                focusHighlight={false}\n                focusOutline=\"browser\"\n                aria-label={\"Next 5 pages\"}\n                onMouseEnter={onHoverRightButton}\n                onMouseLeave={onBlurRightButton}\n                onFocus={onHoverRightButton}\n                onBlur={onBlurRightButton}\n                onClick={handleFastForwardClick}\n            >\n                {hoverRightButton ? (\n                    <Chevron2RightIcon aria-hidden />\n                ) : (\n                    <EllipsisHorizontalIcon aria-hidden />\n                )}\n            </ClickableIcon>\n            {hoverRightButton && (\n                <div className={styles.hover}>Next 5 pages</div>\n            )}\n        </div>\n    );\n\n    const renderMobile = () => (\n        <div className={styles.paginationMobileInput}>\n            <form onSubmit={handleInputSubmit}>\n                <Input\n                    className={styles.inputView}\n                    value={inputText}\n                    onChange={handleInput}\n                    autoComplete=\"off\"\n                    type=\"numeric\"\n                    id={(id || \"pagination\") + \"-input\"}\n                    data-testid={(dataTestId || \"pagination\") + \"-input\"}\n                    aria-label={`Page ${activePage} of ${totalPages}`}\n                />\n            </form>\n            <Typography.BodyBL className={styles.labelDivider}>\n                /\n            </Typography.BodyBL>\n            <Typography.BodyBL className={styles.label}>\n                {totalPages}\n            </Typography.BodyBL>\n        </div>\n    );\n\n    return (\n        <nav\n            className={clsx(styles.paginationWrapper, className)}\n            ref={ref}\n            id={id || \"pagination-wrapper\"}\n            data-testid={dataTestId || \"pagination\"}\n            aria-labelledby={paginationId}\n        >\n            <VisuallyHidden id={paginationId} aria-hidden>\n                pagination\n            </VisuallyHidden>\n            <div className={styles.paginationList}>\n                <div className={styles.paginationMenu}>\n                    {showFirstAndLastNav && (\n                        <ClickableIcon\n                            className={clsx(\n                                styles.iconButton,\n                                styles.iconButtonNavigation\n                            )}\n                            onClick={firstPaginationItem}\n                            disabled={isFirstPage}\n                            focusHighlight={false}\n                            aria-label=\"First page\"\n                            focusOutline=\"browser\"\n                        >\n                            <ChevronLineLeftIcon aria-hidden />\n                        </ClickableIcon>\n                    )}\n                    <ClickableIcon\n                        className={clsx(\n                            styles.iconButton,\n                            styles.iconButtonNavigation\n                        )}\n                        onClick={prevPaginationItem}\n                        disabled={isFirstPage}\n                        focusHighlight={false}\n                        aria-label=\"Previous page\"\n                        focusOutline=\"browser\"\n                    >\n                        <ChevronLeftIcon aria-hidden />\n                    </ClickableIcon>\n                    {isMounted && isMobile\n                        ? renderMobile()\n                        : renderPaginationItems()}\n                    <ClickableIcon\n                        className={clsx(\n                            styles.iconButton,\n                            styles.iconButtonNavigation\n                        )}\n                        onClick={nextPaginationItem}\n                        disabled={isLastPage}\n                        focusHighlight={false}\n                        aria-label=\"Next page\"\n                        focusOutline=\"browser\"\n                    >\n                        <ChevronRightIcon aria-hidden />\n                    </ClickableIcon>\n                    {showFirstAndLastNav && (\n                        <ClickableIcon\n                            className={clsx(\n                                styles.iconButton,\n                                styles.iconButtonNavigation\n                            )}\n                            onClick={lastPaginationItem}\n                            disabled={isLastPage}\n                            focusHighlight={false}\n                            aria-label=\"Last page\"\n                            focusOutline=\"browser\"\n                        >\n                            <ChevronLineRightIcon aria-hidden />\n                        </ClickableIcon>\n                    )}\n                </div>\n            </div>\n            {showPageSizeChanger && !isMobile && (\n                <div className={styles.inputSelectWrapper}>\n                    <VisuallyHidden id={`${paginationId}-page-size`}>\n                        Items per page\n                    </VisuallyHidden>\n                    <InputSelect\n                        aria-labelledby={`${paginationId}-page-size`}\n                        options={pageSizeOptions}\n                        valueExtractor={(item) => item.value}\n                        listExtractor={(item) => item.label}\n                        displayValueExtractor={(item) => item.label}\n                        selectedOption={selectedOption}\n                        onSelectOption={handleListItemClick}\n                    />\n                </div>\n            )}\n        </nav>\n    );\n};\nexport const Pagination = React.forwardRef(Component);\n\nconst DEFAULT_OPTIONS: PageSizeItemProps[] = [\n    { value: 10, label: \"10 per page\" },\n    { value: 20, label: \"20 per page\" },\n    { value: 30, label: \"30 per page\" },\n];\n"],"names":["Pagination","React","forwardRef","id","dataTestId","className","pageSize","totalItems","activePage","pageSizeOptions","DEFAULT_OPTIONS","showFirstAndLastNav","showPageSizeChanger","onPageChange","onPageSizeChange","ref","isMounted","useIsMounted","isMobile","useMaxWidthMediaQuery","hoverRightButton","setHoverRightButton","useState","hoverLeftButton","setHoverLeftButton","inputText","setInputText","selectedOption","setSelectedOption","pageSizeLocal","setPageSize","value","paginationId","useId","totalPages","Math","ceil","isFirstPage","isLastPage","firstPaginationItem","handlePaginationItemClick","undefined","lastPaginationItem","prevPaginationItem","nextPaginationItem","parseInt","toString","useEffect","setInputValue","find","option","closeAllTooltips","pageIndex","handleFastForwardClick","currentIndex","min","handleFastBackwardClick","max","handleInput","event","target","length","test","newPage","replace","handleInputSubmit","preventDefault","onHoverRightButton","onBlurRightButton","onHoverLeftButton","onBlurLeftButton","renderStartEllipsis","_jsxs","styles.ellipsisContainer","children","_jsx","ClickableIcon","styles.iconButton","focusHighlight","focusOutline","onMouseEnter","onMouseLeave","onFocus","onBlur","onClick","Chevron2LeftIcon","EllipsisHorizontalIcon","styles.hover","renderEndEllipsis","Chevron2RightIcon","clsx","styles.paginationWrapper","VisuallyHidden","styles.paginationList","styles.paginationMenu","styles.iconButtonNavigation","disabled","ChevronLineLeftIcon","ChevronLeftIcon","styles.paginationMobileInput","onSubmit","Input","styles.inputView","onChange","autoComplete","type","Typography","BodyBL","styles.labelDivider","styles.label","Array","map","e","i","endRange","boundaryRange","active","styles.pageItem","styles.pageItemSelected","onMouseOver","ChevronRightIcon","ChevronLineRightIcon","styles.inputSelectWrapper","InputSelect","options","valueExtractor","item","listExtractor","label","displayValueExtractor","onSelectOption","pagesize","totalPage"],"mappings":"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"}

package/popover/index.d.ts

@@ -1,3 +1,4 @@
 export * from "./popover";
-export * from "./popover-hoc";
+export * from "./popover-inline";
+export * from "./popover-trigger";
 export * from "./types";

package/popover/index.js

@@ -1,2 +1,2 @@
-export{Popover}from"./popover.js";export{withPopover}from"./popover-hoc.js";
+export{Popover}from"./popover.js";export{PopoverInline}from"./popover-inline/popover-inline.js";export{PopoverTrigger}from"./popover-trigger.js";
 //# sourceMappingURL=index.js.map

package/popover/popover-inline/popover-inline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover-inline.js","sources":["../../../src/popover/popover-inline/popover-inline.tsx"],"sourcesContent":["import clsx from \"clsx\";\n\nimport { PopoverTrigger } from \"../popover-trigger\";\nimport type { PopoverInlineProps } from \"../types\";\nimport * as styles from \"./popover-inline.styles\";\n\nexport const PopoverInline = ({\n    ariaLabel,\n    content,\n    icon,\n    underlineStyle = \"default\",\n    underlineHoverStyle = \"default\",\n    ...otherProps\n}: PopoverInlineProps) => {\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const hasContent = !!content;\n\n    return (\n        <PopoverTrigger {...otherProps}>\n            <span\n                aria-label={ariaLabel ?? (hasContent ? undefined : \"More info\")}\n                role=\"button\"\n                aria-haspopup=\"dialog\"\n                tabIndex={0}\n                className={styles.popoverInlineText}\n                data-underline-style={underlineStyle}\n                data-underline-hover-style={underlineHoverStyle}\n            >\n                {content}\n                {icon && (\n                    <span\n                        className={clsx(\n                            hasContent && styles.popoverInlineIconWithContent\n                        )}\n                    >\n                        {icon}\n                    </span>\n                )}\n            </span>\n        </PopoverTrigger>\n    );\n};\n"],"names":["PopoverInline","_a","ariaLabel","content","icon","underlineStyle","underlineHoverStyle","otherProps","__rest","hasContent","_jsx","PopoverTrigger","Object","assign","children","_jsxs","undefined","role","tabIndex","className","styles.popoverInlineText","clsx","styles.popoverInlineIconWithContent"],"mappings":"gRAMO,MAAMA,EAAiBC,IAAA,IAAAC,UAC1BA,EAASC,QACTA,EAAOC,KACPA,EAAIC,eACJA,EAAiB,UAASC,oBAC1BA,EAAsB,WAASL,EAC5BM,EAAUC,EAAAP,EANa,uEAW1B,MAAMQ,IAAeN,EAErB,OACIO,EAACC,EAAcC,OAAAC,OAAA,CAAA,EAAKN,EAAU,CAAAO,SAC1BC,EAAA,OAAA,CAAA,aACgBb,QAAAA,EAAcO,OAAaO,EAAY,YACnDC,KAAK,SAAQ,gBACC,SACdC,SAAU,EACVC,UAAWC,yBACWf,EAAc,6BACRC,EAAmBQ,SAAA,CAE9CX,EACAC,GACGM,EAAA,OAAA,CACIS,UAAWE,EACPZ,GAAca,GACjBR,SAEAV,SAIA"}

package/popover/popover-inline/popover-inline.styles.js

@@ -0,0 +1,2 @@
+import"./popover-inline.styles_bkopnt.css";const p="p1h7dfwa",o="pzf43s3";export{o as popoverInlineIconWithContent,p as popoverInlineText};
+//# sourceMappingURL=popover-inline.styles.js.map

package/popover/popover-inline/popover-inline.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover-inline.styles.js","sources":["../../../src/popover/popover-inline/popover-inline.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour } from \"../../theme\";\n\nexport const popoverInlineText = css`\n    color: ${Colour[\"text-primary\"]};\n    font-weight: 600;\n    text-underline-position: under;\n\n    &[data-underline-style=\"underline\"] {\n        text-decoration: underline 1px;\n    }\n\n    &[data-underline-style=\"underline-dashed\"] {\n        text-decoration: underline dashed 1px;\n    }\n\n    &:hover,\n    &:focus-visible {\n        color: ${Colour[\"text-hover\"]};\n    }\n\n    &[data-underline-hover-style=\"underline\"]:hover,\n    &[data-underline-hover-style=\"underline\"]:focus-visible {\n        text-decoration: underline 1px;\n    }\n\n    &[data-underline-hover-style=\"underline-dashed\"]:hover,\n    &[data-underline-hover-style=\"underline-dashed\"]:focus-visible {\n        text-decoration: underline dashed 1px;\n    }\n\n    svg {\n        height: 1lh; /* align vertically */\n        width: 1em; /* scale icon with font size */\n        vertical-align: top;\n    }\n`;\n\nexport const popoverInlineIconWithContent = css`\n    margin-left: 0.25rem;\n`;\n"],"names":["popoverInlineText","popoverInlineIconWithContent"],"mappings":"iFAIO,MAAMA,EAAiB,WAmCjBC,EAA4B"}

package/popover/popover-inline/popover-inline.styles_bkopnt.css

@@ -0,0 +1,2 @@
+.p1h7dfwa{color:var(--fds-colour-text-primary);font-weight:600;text-underline-position:under;}.p1h7dfwa[data-underline-style="underline"]{-webkit-text-decoration:underline 1px;text-decoration:underline 1px;}.p1h7dfwa[data-underline-style="underline-dashed"]{-webkit-text-decoration:underline dashed 1px;text-decoration:underline dashed 1px;}.p1h7dfwa:hover,.p1h7dfwa:focus-visible{color:var(--fds-colour-text-hover);}.p1h7dfwa[data-underline-hover-style="underline"]:hover,.p1h7dfwa[data-underline-hover-style="underline"]:focus-visible{-webkit-text-decoration:underline 1px;text-decoration:underline 1px;}.p1h7dfwa[data-underline-hover-style="underline-dashed"]:hover,.p1h7dfwa[data-underline-hover-style="underline-dashed"]:focus-visible{-webkit-text-decoration:underline dashed 1px;text-decoration:underline dashed 1px;}.p1h7dfwa svg{height:1lh;width:1em;vertical-align:top;}
+.pzf43s3{margin-left:0.25rem;}

package/{popover-v2 → popover}/popover-trigger.d.ts

@@ -1,2 +1,2 @@
-import type { PopoverV2TriggerProps } from "./types";
-export declare const PopoverTrigger: ({ children, popoverContent, trigger: _trigger, position, zIndex, rootNode, customOffset, delay, onPopoverAppear, onPopoverDismiss, popoverAriaLabel, enableFlip, enableResize, overflow, triggerOnFocus, isModal, className, ...otherProps }: PopoverV2TriggerProps) => import("react/jsx-runtime").JSX.Element;
+import type { PopoverTriggerProps } from "./types";
+export declare const PopoverTrigger: ({ children, popoverContent, trigger: _trigger, position, zIndex, rootNode, customOffset, delay, onPopoverAppear, onPopoverDismiss, popoverAriaLabel, enableFlip, enableResize, overflow, triggerOnFocus, isModal, className, ...otherProps }: PopoverTriggerProps) => import("react/jsx-runtime").JSX.Element;

package/popover/popover-trigger.js

@@ -0,0 +1,2 @@
+import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as o,Fragment as t,jsx as r}from"react/jsx-runtime";import{useFloating as i,autoUpdate as n,offset as l,flip as s,shift as a,limitShift as p,size as m,useClick as c,useDismiss as u,useHover as d,useFocus as f,useInteractions as v,FloatingPortal as g,FloatingFocusManager as h}from"@floating-ui/react";import j from"clsx";import{useState as b,useRef as y}from"react";import{useFloatingChild as x}from"../overlay/use-floating-context.js";import"../theme/theme-provider/index.js";import{useInheritedThemeScope as O}from"../theme/theme-provider/hooks.js";import"../theme/tokens/border.js";import"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{useId as k}from"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{useMaxWidthMediaQuery as F}from"../theme/utils/use-media-query.js";import{Popover as P}from"./popover.js";import{triggerContainer as w}from"./popover-trigger.styles.js";const M=M=>{var z,A,{children:C,popoverContent:N,trigger:E="click",position:H="top",zIndex:L,rootNode:R,customOffset:D,delay:I,onPopoverAppear:q,onPopoverDismiss:S,popoverAriaLabel:T,enableFlip:_=!0,enableResize:B=!1,overflow:$="auto",triggerOnFocus:G=!1,isModal:J=!0,className:K}=M,Q=e(M,["children","popoverContent","trigger","position","zIndex","rootNode","customOffset","delay","onPopoverAppear","onPopoverDismiss","popoverAriaLabel","enableFlip","enableResize","overflow","triggerOnFocus","isModal","className"]);const[U,V]=b(!1),W=y(null),X=y(null),Y=F("sm"),[Z,ee]=b(0),oe=`${k()}-popover`,{refs:te,floatingStyles:re,context:ie}=i({open:U,placement:H,whileElementsMounted:n,middleware:[l(null!=D?D:16),_&&s(),a({limiter:p()}),B&&m({apply({availableHeight:e}){ee(e)}})],onOpenChange:e=>{V(e),U!==e&&ge(e)}}),ne=x(),{themeProps:le,themeStyle:se}=O(U),ae="hover"===(Y?"click":E),pe=c(ie,{ignoreMouse:ae}),me=u(ie),ce=d(ie,{enabled:ae,delay:{open:null!==(z=null==I?void 0:I.open)&&void 0!==z?z:0,close:null!==(A=null==I?void 0:I.close)&&void 0!==A?A:500}}),ue=f(ie,{enabled:G}),{getReferenceProps:de,getFloatingProps:fe}=v([pe,me,ce,ue]),ve=()=>{V(!1),ge(!1)},ge=e=>{e&&q&&q(),!e&&S&&S()};return o(t,{children:[r("div",Object.assign({ref:e=>{W.current=e,te.setReference(e)}},de({onClick:e=>{e.stopPropagation(),e.preventDefault()}}),Q,{className:j(w,K),children:C})),U&&r(g,{root:R,children:r(h,Object.assign({context:ie},!J&&{initialFocus:-1,returnFocus:!1,modal:!1},{children:r("div",Object.assign({ref:e=>{X.current=e,te.setFloating(e)}},le,{onBlur:e=>{var o;if(J||Y&&"function"!=typeof N)return;const t=null!==(o=e.relatedTarget)&&void 0!==o?o:document.activeElement;t&&(e=>{var o;if(!e)return!1;if(e instanceof HTMLElement&&e.hasAttribute("data-floating-ui-focus-guard"))return!0;const t=W.current,r=null===(o=X.current)||void 0===o?void 0:o.parentElement;return!!t&&t.contains(e)||!!r&&r.contains(e)})(t)||(V(!1),ge(!1))},style:Object.assign(Object.assign(Object.assign({},se),re),{outline:"none",zIndex:null!=L?L:ne})},fe(),{children:"function"==typeof N?N(B?{maxHeight:Z,overflow:$}:{}):r(P,{visible:!0,onMobileClose:ve,maxHeight:B?Z:void 0,overflow:B?$:void 0,ariaLabel:T,id:oe,children:N})}))}))})]})};export{M as PopoverTrigger};
+//# sourceMappingURL=popover-trigger.js.map

package/popover/popover-trigger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover-trigger.js","sources":["../../src/popover/popover-trigger.tsx"],"sourcesContent":["import {\n    autoUpdate,\n    flip,\n    FloatingFocusManager,\n    FloatingPortal,\n    limitShift,\n    offset,\n    shift,\n    size,\n    useClick,\n    useDismiss,\n    useFloating,\n    useFocus,\n    useHover,\n    useInteractions,\n} from \"@floating-ui/react\";\nimport clsx from \"clsx\";\nimport type React from \"react\";\nimport { useRef, useState } from \"react\";\n\nimport { useFloatingChild } from \"../overlay/use-floating-context\";\nimport { useInheritedThemeScope, useMaxWidthMediaQuery } from \"../theme\";\nimport { useId } from \"../util\";\nimport { Popover } from \"./popover\";\nimport * as styles from \"./popover-trigger.styles\";\nimport type { PopoverTriggerProps, PopoverTriggerType } from \"./types\";\n\nexport const PopoverTrigger = ({\n    children,\n    popoverContent,\n    trigger: _trigger = \"click\",\n    position = \"top\",\n    zIndex,\n    rootNode,\n    customOffset,\n    delay,\n    onPopoverAppear,\n    onPopoverDismiss,\n    popoverAriaLabel,\n    enableFlip = true,\n    enableResize = false,\n    overflow = \"auto\",\n    triggerOnFocus = false,\n    isModal = true,\n    className,\n    ...otherProps\n}: PopoverTriggerProps) => {\n    // =========================================================================\n    // CONST, STATE, REF\n    // =========================================================================\n    const [visible, setVisible] = useState<boolean>(false);\n    const nodeRef = useRef<HTMLElement | null>(null);\n    const popoverRef = useRef<HTMLElement | null>(null);\n    const isMobile = useMaxWidthMediaQuery(\"sm\");\n    const [availableHeight, setAvailableHeight] = useState(0);\n    const internalId = useId();\n    const popoverContainerId = `${internalId}-popover`;\n\n    const { refs, floatingStyles, context } = useFloating({\n        open: visible,\n        placement: position,\n        whileElementsMounted: autoUpdate,\n        middleware: [\n            offset(customOffset ?? 16),\n            enableFlip && flip(),\n            shift({\n                limiter: limitShift(),\n            }),\n            enableResize &&\n                size({\n                    apply({ availableHeight }) {\n                        setAvailableHeight(availableHeight);\n                    },\n                }),\n        ],\n        onOpenChange: (isOpen) => {\n            setVisible(isOpen);\n\n            // this callback is triggering twice on hover, the check here prevents extra calls\n            if (visible !== isOpen) {\n                handleVisibilityChange(isOpen);\n            }\n        },\n    });\n    const parentZIndex = useFloatingChild();\n    const { themeProps, themeStyle } = useInheritedThemeScope(visible);\n\n    const trigger: PopoverTriggerType = isMobile ? \"click\" : _trigger;\n    const isTooltip = trigger === \"hover\";\n\n    const click = useClick(context, {\n        // allow trigger by Space/Enter, but disable mouse click in hover mode\n        ignoreMouse: isTooltip,\n    });\n\n    const dismiss = useDismiss(context);\n\n    const hover = useHover(context, {\n        enabled: isTooltip,\n        // short window to enter the floating element without it closing\n        delay: {\n            open: delay?.open ?? 0,\n            close: delay?.close ?? 500,\n        },\n    });\n\n    const focus = useFocus(context, {\n        enabled: triggerOnFocus,\n    });\n\n    const { getReferenceProps, getFloatingProps } = useInteractions([\n        click,\n        dismiss,\n        hover,\n        focus,\n    ]);\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    const isFocusInside = (node: Node | null) => {\n        if (!node) return false;\n\n        if (\n            node instanceof HTMLElement &&\n            node.hasAttribute(\"data-floating-ui-focus-guard\")\n        ) {\n            return true;\n        }\n\n        const refEl = nodeRef.current;\n        const floatingEl = popoverRef.current?.parentElement;\n\n        return (\n            (!!refEl && refEl.contains(node)) ||\n            (!!floatingEl && floatingEl.contains(node))\n        );\n    };\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handlePopoverMobileClose = () => {\n        setVisible(false);\n        handleVisibilityChange(false);\n    };\n\n    const handleVisibilityChange = (nextVisible: boolean) => {\n        if (nextVisible && onPopoverAppear) onPopoverAppear();\n        if (!nextVisible && onPopoverDismiss) onPopoverDismiss();\n    };\n\n    const handleBlur = (e: React.FocusEvent<HTMLElement>) => {\n        // On mobile, ModalV2 handles its own dismiss via onMobileClose\n        if (isModal || (isMobile && typeof popoverContent !== \"function\"))\n            return;\n\n        const next =\n            (e.relatedTarget as Node | null) ??\n            (document.activeElement as Node | null);\n\n        if (next && isFocusInside(next)) return;\n\n        setVisible(false);\n        handleVisibilityChange(false);\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderPopover = () => {\n        if (typeof popoverContent === \"function\") {\n            return popoverContent(\n                enableResize ? { maxHeight: availableHeight, overflow } : {}\n            );\n        }\n\n        return (\n            <Popover\n                visible\n                onMobileClose={handlePopoverMobileClose}\n                maxHeight={enableResize ? availableHeight : undefined}\n                overflow={enableResize ? overflow : undefined}\n                ariaLabel={popoverAriaLabel}\n                id={popoverContainerId}\n            >\n                {popoverContent}\n            </Popover>\n        );\n    };\n\n    return (\n        <>\n            <div\n                ref={(node) => {\n                    nodeRef.current = node;\n                    refs.setReference(node);\n                }}\n                {...getReferenceProps({\n                    onClick: (event) => {\n                        // prevent popover interaction from triggering click events on parents\n                        event.stopPropagation();\n                        event.preventDefault();\n                    },\n                })}\n                {...otherProps}\n                className={clsx(styles.triggerContainer, className)}\n            >\n                {children}\n            </div>\n            {visible && (\n                <FloatingPortal root={rootNode}>\n                    <FloatingFocusManager\n                        context={context}\n                        {...(!isModal && {\n                            initialFocus: -1,\n                            returnFocus: false,\n                            modal: false,\n                        })}\n                    >\n                        <div\n                            ref={(node) => {\n                                popoverRef.current = node;\n                                refs.setFloating(node);\n                            }}\n                            {...themeProps}\n                            onBlur={handleBlur}\n                            style={{\n                                ...themeStyle,\n                                ...floatingStyles,\n                                outline: \"none\",\n                                zIndex: zIndex ?? parentZIndex,\n                            }}\n                            {...getFloatingProps()}\n                        >\n                            {renderPopover()}\n                        </div>\n                    </FloatingFocusManager>\n                </FloatingPortal>\n            )}\n        </>\n    );\n};\n"],"names":["PopoverTrigger","_a","children","popoverContent","trigger","_trigger","position","zIndex","rootNode","customOffset","delay","onPopoverAppear","onPopoverDismiss","popoverAriaLabel","enableFlip","enableResize","overflow","triggerOnFocus","isModal","className","otherProps","__rest","visible","setVisible","useState","nodeRef","useRef","popoverRef","isMobile","useMaxWidthMediaQuery","availableHeight","setAvailableHeight","popoverContainerId","useId","refs","floatingStyles","context","useFloating","open","placement","whileElementsMounted","autoUpdate","middleware","offset","flip","shift","limiter","limitShift","size","apply","onOpenChange","isOpen","handleVisibilityChange","parentZIndex","useFloatingChild","themeProps","themeStyle","useInheritedThemeScope","isTooltip","click","useClick","ignoreMouse","dismiss","useDismiss","hover","useHover","enabled","_b","close","_c","focus","useFocus","getReferenceProps","getFloatingProps","useInteractions","handlePopoverMobileClose","nextVisible","_jsxs","_jsx","Object","assign","ref","node","current","setReference","onClick","event","stopPropagation","preventDefault","clsx","styles.triggerContainer","FloatingPortal","root","FloatingFocusManager","initialFocus","returnFocus","modal","setFloating","onBlur","e","next","relatedTarget","document","activeElement","HTMLElement","hasAttribute","refEl","floatingEl","parentElement","contains","isFocusInside","style","outline","maxHeight","Popover","onMobileClose","undefined","ariaLabel","id"],"mappings":"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"}

package/popover/popover-trigger.styles.js

@@ -0,0 +1,2 @@
+import"./popover-trigger.styles_8zokig.css";const o="tjxhm5y";export{o as triggerContainer};
+//# sourceMappingURL=popover-trigger.styles.js.map

package/popover/popover-trigger.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover-trigger.styles.js","sources":["../../src/popover/popover-trigger.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nexport const triggerContainer = css`\n    display: inline;\n    width: fit-content;\n    cursor: pointer;\n    position: relative;\n`;\n"],"names":["triggerContainer"],"mappings":"mEAEO,MAAMA,EAAgB"}

package/popover/popover-trigger.styles_8zokig.css

@@ -0,0 +1 @@
+.tjxhm5y{display:inline;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;cursor:pointer;position:relative;}

package/popover/popover.d.ts

@@ -1,5 +1,2 @@
 import type { PopoverProps } from "./types";
-/**
- * @deprecated Use `PopoverV2` for improved positioning behaviour. This component will be removed in DS v3.
- */
-export declare const Popover: ({ children, visible, onMobileClose, ...otherProps }: PopoverProps) => JSX.Element;
+export declare const Popover: ({ children, visible, onMobileClose, maxHeight, overflow, ariaLabel, id, className, "data-testid": testId, ...otherProps }: PopoverProps) => JSX.Element;

package/popover/popover.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as r,Fragment as t,jsx as o}from"react/jsx-runtime";import i from"../external/lodash/debounce.js";import{useState as n,useRef as s,useEffect as l}from"react";import{r as c}from"../external/react-responsive/dist/react-responsive.js";import{Card as d}from"../card/card.js";import{Modal as m}from"../modal/modal.js";import{MediaWidths as a}from"../v2_spec/media-spec.js";import{V2_Text as p}from"../v2_text/text.js";import{BubbleWrap as h,MobileModalBox as f,ContentWrapper as u}from"./popover.styles.js";const v=v=>{var{children:x,visible:j,onMobileClose:w}=v,b=e(v,["children","visible","onMobileClose"]);const g=b["data-testid"]||"popover",[y,C]=n("none"),_=s(null),L=c.useMediaQuery({maxWidth:a.mobileL}),M=s(y);l((()=>(E(),window.addEventListener("resize",i(z,300)),()=>{window.removeEventListener("resize",i(z,300))})),[]);const z=()=>{E()},B=()=>{w&&w()},E=()=>{const e=O();var r;e&&(r=e,M.current=r,C(r))},O=()=>{if(_.current){const e=_.current.getBoundingClientRect(),r=24,t=e.y<r,o=window.innerWidth-r;return e.x<r?t?"top-left":"left":e.x+e.width>o?t?"top-right":"right":("top-left"===M.current||"left"===M.current)&&e.x-e.width/2>r||("top-right"===M.current||"right"===M.current)&&e.x+2*e.width<o?t?"top-center":"none":t?"top-center":void 0}},W=()=>"string"==typeof x?o(p.BodySmall,{children:x}):x;return r(t,{children:[o(h,Object.assign({ref:_,"data-testid":g,$visible:j,$offset:y},b,{children:o(d,{children:W()})})),L&&o(m,{show:null!=j&&j,onOverlayClick:B,children:o(f,{onClose:B,children:o(u,{children:W()})})})]})};export{v as Popover};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as o,Fragment as r,jsx as i}from"react/jsx-runtime";import t from"clsx";import{useRef as l,useMemo as s}from"react";import{Card as m}from"../card/card.js";import{Markup as a}from"../markup/markup.js";import{ModalV2 as d}from"../modal-v2/index.js";import"../theme/theme-provider/index.js";import"../theme/theme-provider/context.js";import"../theme/tokens/border.js";import"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import{useApplyStyle as n}from"../theme/utils/use-apply-styles.js";import{useMaxWidthMediaQuery as p}from"../theme/utils/use-media-query.js";import{Typography as c}from"../typography/index.js";import{tokens as h,popoverCard as f,popoverCardWithMaxHeight as v,popoverCardWithOverflow as u,popoverContainer as j}from"./popover.styles.js";const b=b=>{var{children:x,visible:y=!1,onMobileClose:C,maxHeight:g,overflow:k,ariaLabel:w="More information",id:M,className:N,"data-testid":H="popover"}=b,q=e(b,["children","visible","onMobileClose","maxHeight","overflow","ariaLabel","id","className","data-testid"]);const B=p("sm"),L=l(null),O=s((()=>({[h.popoverCard.maxHeight]:void 0===g?null:`${g}px`,[h.popoverCard.overflowY]:null!=k?k:null})),[g,k]);n(L,O);const _=()=>{C&&C()},z=()=>"string"==typeof x?i(c.BodyMD,{children:x}):x;return o(r,{children:[y&&!B&&i("div",Object.assign({ref:L,tabIndex:0,"data-testid":H},q,{className:t(j,N),id:M,role:"dialog","aria-label":w,children:i(m,{className:t(f,void 0!==g&&v,k&&u),children:i(a,{baseTextSize:"body-md",children:z()})})})),B&&i(d,{show:y,onOverlayClick:_,onClose:_,id:M,role:"dialog","aria-label":w,children:o(d.Card,{children:[i(d.Content,{children:i(a,{children:z()})}),i(d.CloseButton,{})]})})]})};export{b as Popover};
 //# sourceMappingURL=popover.js.map