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

package/cjs/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 { Typography } from \"../typography\";\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\n    const renderThumbnail = () => {\n        if (!showVerifyOtpThumbnail) return null;\n        const iconLabel =\n            type === \"email\" ? \"Email verification\" : \"Phone verification\";\n        return (\n            <div aria-label={iconLabel} role=\"img\">\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            aria-labelledby={id ? `${id}-title` : undefined}\n        >\n            {renderThumbnail()}\n            <SectionContainer>\n                <div>\n                    <Typography.BodyMD\n                        weight=\"semibold\"\n                        id={id ? `${id}-title` : undefined}\n                        data-testid={\n                            dataTestId ? `${dataTestId}-title` : undefined\n                        }\n                    >\n                        {verifyOtpTitle}\n                    </Typography.BodyMD>\n                    <Typography.BodyMD\n                        weight=\"regular\"\n                        id={id ? `${id}-message` : undefined}\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-label=\"Enter OTP code\"\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={id ? `${id}-verify-error` : undefined}\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":["id","dataTestId","type","showVerifyOtpThumbnail","verifyOtpTitle","verifyOtpMessage","otpCode","setOtpCode","isVerifyLoading","countdown","onVerifyOtp","verifyOtpError","otpPrefix","otpSeparator","theme","useContext","ThemeContext","thumbnailSize","useMediaQuery","maxWidth","V3_Breakpoint","_jsxs","VerificationSectionWrapper","role","undefined","children","iconLabel","_jsx","EmailThumbnail","width","height","PhoneThumbnail","renderThumbnail","SectionContainer","Typography","BodyMD","weight","VerifyInputWrapper","InputGroup","value","onChange","e","target","placeholder","addon","attributes","error","VerifyButton","onClick","loading","styleType","disabled","length","FormErrorMessage","isRunning","ReSendMessage","formatTime"],"mappings":"2dAkBmC,EAC/BA,KACA,cAAeC,EACfC,OACAC,0BAAyB,EACzBC,iBACAC,mBACAC,UACAC,aACAC,kBACAC,YACAC,cACAC,iBACAC,YACAC,mBAEA,MAAMC,EAAQC,EAAAA,WAAWC,gBAInBC,EAHWC,EAAAA,uBAAAA,cAAc,CAC3BC,SAAUC,EAAAA,cAAc,UAAU,CAAEN,YAEP,GAAK,IAuBtC,OACIO,EAAAA,KAACC,6BAA0B,CACvBtB,GAAIA,EAAE,cACOC,EACbsB,KAAK,QAAO,kBACKvB,EAAK,GAAGA,eAAawB,EAASC,SAAA,CA1B/B,MACpB,IAAKtB,EAAwB,OAAO,KACpC,MAAMuB,EACO,UAATxB,EAAmB,qBAAuB,qBAC9C,OACIyB,0BAAiBD,EAAWH,KAAK,eACnB,UAATrB,EACGyB,EAAAA,IAACC,EAAAA,eAAc,CACXC,MAAOZ,EACPa,OAAQb,IAGZU,EAAAA,IAACI,EAAAA,eAAc,CACXF,MAAOZ,EACPa,OAAQb,KAGd,EAWLe,GACDX,OAACY,EAAAA,iBAAgB,CAAAR,SAAA,CACbJ,OAAA,MAAA,CAAAI,SAAA,CACIE,EAAAA,IAACO,EAAAA,WAAWC,OAAM,CACdC,OAAO,WACPpC,GAAIA,EAAK,GAAGA,eAAawB,EAAS,cAE9BvB,EAAa,GAAGA,eAAqBuB,EAASC,SAGjDrB,IAELuB,MAACO,EAAAA,WAAWC,OAAM,CACdC,OAAO,UACPpC,GAAIA,EAAK,GAAGA,iBAAewB,EAAS,cAEhCvB,EAAa,GAAGA,iBAAuBuB,EAASC,SAGnDpB,OAGTgB,EAAAA,KAAA,MAAA,CAAAI,SAAA,CACIJ,OAACgB,EAAAA,8BACGV,MAACW,EAAAA,WAAU,CACPtC,GAAIA,EAAK,GAAGA,sBAAoBwB,gBAE5BvB,EACM,GAAGA,sBACHuB,EAEVe,MAAOjC,EACPkC,SAAWC,GAAMlC,aAAU,EAAVA,EAAakC,EAAEC,OAAOH,OACvCI,YAAY,YACZC,MAAO,CACH1C,KAAM,QACN2C,WAAY,CACRN,MAAO,GAAG3B,QAAAA,EAAa,KACnBC,QAAAA,EAAgB,OAI5BX,KAAK,SACL4C,QAASnC,EAAc,aACZ,kCACKA,EAAc,iBACf,IAEnBgB,EAAAA,IAACoB,EAAAA,aAAY,CACT/C,GAAIA,EAAK,GAAGA,uBAAqBwB,EACjCtB,KAAK,uBAEDD,EACM,GAAGA,uBACHuB,EAEVwB,QAAStC,EACTuC,QAASzC,EACT0C,UAAU,QACVC,UAAW7C,GAA8B,IAAnBA,EAAQ8C,OAAY3B,UAExCjB,GAAmB,cAG5BG,GACGgB,EAAAA,IAAC0B,EAAAA,iBAAgB,CACbrD,GAAIA,EAAK,GAAGA,sBAAoBwB,EAAS,cAErCvB,EACM,GAAGA,sBACHuB,EAEVD,KAAK,QAAOE,SAEXd,OAIZF,EAAU6C,WACPjC,EAAAA,KAACkC,gBAAa,CACVvD,GAAIA,EAAK,GAAGA,mBAAiBwB,EAAS,cAElCvB,EAAa,GAAGA,mBAAyBuB,EAASC,SAAA,CAAA,iBAGvChB,EAAU+C,qBAIZ"}
+{"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":["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","width","height","PhoneThumbnail","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":"utBAoBmC,EAC/BA,KACA,cAAeC,EACfC,OACAC,0BAAyB,EACzBC,iBACAC,mBACAC,UACAC,aACAC,kBACAC,YACAC,cACAC,iBACAC,YACAC,mBAEA,MAAMC,EAAQC,EAAAA,WAAWC,gBAInBC,EAHWC,EAAAA,uBAAAA,cAAc,CAC3BC,SAAUC,EAAAA,cAAc,UAAU,CAAEN,YAEP,GAAK,IAChCO,EAAaC,EAAAA,QAEbC,EAAU,GAAGF,UACbG,EAAY,GAAGH,YACfI,EAAa,GAAGJ,uBAChBK,EAAgB,GAAGL,iBAsBzB,OACIM,EAAAA,KAACC,EAAAA,2BAA0B,CACvB5B,GAAIA,gBACSC,EACb4B,KAAK,kBAvBJ1B,EAGD2B,MAAA,MAAA,CAAA,eAAA,EAAAC,SACc,UAAT7B,EACG4B,MAACE,EAAAA,eAAc,CACXC,MAAOhB,EACPiB,OAAQjB,IAGZa,EAAAA,IAACK,EAAAA,gBACGF,MAAOhB,EACPiB,OAAQjB,MAZY,KA0BhCU,EAAAA,KAACS,EAAAA,iBAAgB,CAAAL,SAAA,CACbJ,OAAA,MAAA,CAAAI,SAAA,CACID,EAAAA,IAACO,EAAAA,WAAWC,OAAM,CACdC,OAAO,WACPvC,GAAIuB,EAAO,cAEPtB,EAAa,GAAGA,eAAqBuC,EAAST,SAGjD3B,IAEL0B,EAAAA,IAACO,EAAAA,WAAWC,OAAM,CACdC,OAAO,UACPvC,GAAIwB,EAAS,cAETvB,EAAa,GAAGA,iBAAuBuC,EAAST,SAGnD1B,OAGTsB,EAAAA,sBACIA,EAAAA,KAACc,gCACGX,EAAAA,IAACY,EAAAA,WAAU,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,EAAAA,UACd3B,EACAC,EACAd,EAAiBe,OAAgBc,oBAErB7B,EAAc,iBACf,IAEnBmB,EAAAA,IAACsB,EAAAA,aAAY,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,EAAAA,IAAC4B,EAAAA,iBAAgB,CACb1D,GAAI0B,gBAEAzB,EACM,GAAGA,sBACHuC,EAEVX,KAAK,QAAOE,SAEXpB,OAIZF,EAAUkD,WACPhC,EAAAA,KAACiC,gBAAa,CACV5D,GAAIA,EAAK,GAAGA,mBAAiBwC,EAAS,cAElCvC,EAAa,GAAGA,mBAAyBuC,EAAST,SAAA,CAAA,iBAGvCtB,EAAUoD,qBAIZ"}

package/cjs/overlay/overlay.js

@@ -1,2 +1,2 @@
-"use strict";var t=require("react/jsx-runtime"),e=require("@floating-ui/react"),n=require("react"),o=require("react-dom");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var r=require("../util/simple-id-generator.js");require("../util/string-helper.js");var s=require("./overlay.styles.js"),l=require("./use-floating-context.js");function d(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var i=d(n),a=d(o);const c=({show:o=!1,rootId:d,onOverlayClick:c,children:v,backgroundOpacity:f,backgroundBlur:p=!0,disableTransition:b=!1,enableOverlayClick:h=!1,zIndex:j,id:w})=>{const[x,$]=n.useState(null),[q,O]=n.useState(),[k]=n.useState((()=>r.SimpleIdGenerator.generate())),T=e.useFloatingNodeId(),E=n.useRef(),I=n.useRef(null),L=v&&i.default.cloneElement(v,{ref:I}),P=w?`lifesg-ds-overlay-root-${w}`:"lifesg-ds-overlay-root",F=null!=j?j:q?99999:99998;l.useFloatingParent(F),n.useEffect((()=>(R(),$(D()),()=>{N(),z().length<1&&(G("remove"),M(),W("remove"))})),[]),n.useEffect((()=>{if(o){const t=S();C(t),A(),B()&&1===z().length&&(H(),G("add"));const e=setTimeout((()=>{W("add")}),200);return()=>clearTimeout(e)}{N(),B()&&z().length<1&&(G("remove"),M());const t=setTimeout((()=>{z().length<1&&W("remove")}),200);return()=>clearTimeout(t)}}),[o]);const C=t=>{E.current=t,O(t)},B=()=>/(iPad|iPhone|iPod)/g.test(navigator.userAgent),D=()=>document&&d?document.getElementById(d):document?document.body:null,S=()=>z().length>0,R=()=>{if(!document.getElementById(u)){const t=document.createElement("style");t.id=u;const e=document.documentElement.clientWidth,n=window.innerWidth-e;t.innerHTML=`\n\t\t\t\t.${m} {\n\t\t\t\t\toverflow: hidden;\n\t\t\t\t\tpadding-right: ${n}px !important;\n\t\t\t\t\t-ms-overflow-style: none;\n\t\t\t\t\tscrollbar-width: none;\n\t\t\t\t}\n\n\t\t\t\t.${m}::-webkit-scrollbar {\n\t\t\t\t\tdisplay: none;\n\t\t\t\t}\n\n\t\t\t\t.${y} {\n\t\t\t\t\tposition: fixed;\n\t\t\t\t\ttop: var(${g}, 0);\n\t\t\t\t\tbottom: 0;\n\t\t\t\t}\n\t\t\t`,document.body.appendChild(t)}},W=t=>{const e=document.body.classList.contains(m);"add"!==t||e?"remove"===t&&e&&document.body.classList.remove(m):document.body.classList.add(m)},z=()=>{const t=document.body.dataset.lifesgDsOverlayOrder;return t?t.split(","):[]},A=()=>{const t=z();document.body.dataset.lifesgDsOverlayOrder=[...t,k].join(",")},N=()=>{const t=z();document.body.dataset.lifesgDsOverlayOrder=t.filter((t=>t!==k)).join(",")},G=t=>{if(!B())return;const e=document.body.classList.contains(y);"add"!==t||e?"remove"===t&&e&&document.body.classList.remove(y):document.body.classList.add(y)},H=()=>{const t=document.body.style,e=t.top?t.top:window.scrollY+"px";document.body.style.setProperty(g,e)},M=()=>{const t=document.body.style.getPropertyValue(g);requestAnimationFrame((()=>{window.scrollTo({top:parseFloat(t)})}))},V=t=>{var e;const n=null===(e=I.current)||void 0===e?void 0:e.firstChild;n&&n.contains(t.target)||c&&h&&(t.preventDefault(),c())};return x?a.default.createPortal(t.jsx(s.Root,{id:P,"data-testid":P,$show:o,$zIndex:F,children:v&&t.jsx(e.FloatingNode,{id:T,children:t.jsx(s.Wrapper,{"data-testid":"overlay-wrapper",$show:o,$stacked:q,$backgroundBlur:p,$disableTransition:b,onClick:V,children:L})})}),x):null},u="lifesg-ds-overlay-stylesheet",m="lifesg-ds-overlay-open",y="lifesg-ds-overlay-scroll-lock",g="--lifesg-ds-overlay-scroll-y";exports.Overlay=n=>t.jsx(e.FloatingTree,{children:t.jsx(c,Object.assign({},n))});
+"use strict";var e=require("react/jsx-runtime"),t=require("@floating-ui/react"),r=require("clsx"),o=require("react"),n=require("react-dom");require("../theme/theme-provider/index.js");var s=require("../theme/theme-provider/hooks.js");require("../theme/tokens/border.js"),require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js");var l=require("../theme/utils/use-apply-styles.js");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var a=require("../util/simple-id-generator.js");require("../util/string-helper.js"),require("@react-aria/live-announcer");var i=require("./overlay.styles.js"),u=require("./use-floating-context.js");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=d(r),m=d(n);const y=({show:r=!1,rootId:n,onOverlayClick:d,children:y,backgroundOpacity:v,backgroundBlur:p=!0,disableTransition:g=!1,enableOverlayClick:f=!1,zIndex:h,id:b,containerRef:j})=>{const[k,q]=o.useState(null),[w,x]=o.useState(),O=a.useId(),L=t.useFloatingNodeId(),S=o.useRef(),C=o.useRef(!1),P=o.useRef(null),T=o.useRef(null),E=b?`lifesg-ds-overlay-root-${b}`:"lifesg-ds-overlay-root",I=null!=h?h:w?99999:99998,{themeProps:F,themeStyle:D}=s.useInheritedThemeScope(r);u.useFloatingParent(I),l.useApplyStyle(P,{[i.tokens.root.zIndex]:I}),o.useEffect((()=>(W(),q(N()),()=>{H(),z().length<1&&(B()&&(V("remove"),J()),Y("remove"))})),[]),o.useEffect((()=>{if(r){const e=A();R(e),$(),B()&&1===z().length&&(G(),V("add"));const t=setTimeout((()=>{Y("add")}),200);return()=>clearTimeout(t)}{H(),B()&&z().length<1&&(V("remove"),J());const e=setTimeout((()=>{z().length<1&&Y("remove")}),200);return()=>clearTimeout(e)}}),[r]),o.useEffect((()=>{if(r)return document.addEventListener("mousedown",K,!0),()=>{document.removeEventListener("mousedown",K,!0)}}),[r]);const R=e=>{S.current=e,x(e)},B=()=>/(iPad|iPhone|iPod)/g.test(navigator.userAgent),N=()=>document&&n?document.getElementById(n):document?document.body:null,A=()=>z().length>0,W=()=>{const e=document.documentElement.clientWidth,t=window.innerWidth-e;document.documentElement.style.setProperty(i.tokens.global.scrollbarWidth,`${t}px`)},Y=e=>{const t=document.body.classList.contains(i.tokens.global.overlayOpenClass);"add"!==e||t?"remove"===e&&t&&document.body.classList.remove(i.tokens.global.overlayOpenClass):document.body.classList.add(i.tokens.global.overlayOpenClass)},z=()=>{const e=document.body.dataset.lifesgDsOverlayOrder;return e?e.split(","):[]},$=()=>{const e=z();document.body.dataset.lifesgDsOverlayOrder=[...e,O].join(",")},H=()=>{const e=z();document.body.dataset.lifesgDsOverlayOrder=e.filter((e=>e!==O)).join(",")},V=e=>{if(!B())return;const t=document.body.classList.contains(i.tokens.global.overlayScrollLockClass);"add"!==e||t?"remove"===e&&t&&document.body.classList.remove(i.tokens.global.overlayScrollLockClass):document.body.classList.add(i.tokens.global.overlayScrollLockClass)},G=()=>{const e=document.body.style,t=e.top?e.top:window.scrollY+"px";document.body.style.setProperty(i.tokens.global.scrollY,t)},J=()=>{if(!B())return;const e=document.body.style.getPropertyValue(i.tokens.global.scrollY);requestAnimationFrame((()=>{window.scrollTo({top:parseFloat(e)})}))},K=e=>{var t;const r=null!==(t=null==j?void 0:j.current)&&void 0!==t?t:T.current,o=T.current;if(!r)return void(C.current=!1);const n=e.target,s=o===n,l=r===n,a=r.contains(n);C.current=!s&&(l||a)},M=e=>{var t;const r=null!==(t=null==j?void 0:j.current)&&void 0!==t?t:T.current,o=T.current;if(!r)return void(C.current=!1);const n=e.target,s=o===n,l=r===n,a=r.contains(n);!s&&(l||a)||C.current||!d||!f||(e.preventDefault(),d()),C.current=!1};return k?m.default.createPortal(e.jsx("div",Object.assign({ref:P,id:E,"data-testid":E,className:c.default(i.root,r&&i.rootShow)},F,{style:D,children:y&&e.jsx(t.FloatingNode,{id:L,children:e.jsx("div",{ref:T,"data-testid":"overlay-wrapper",className:c.default(i.wrapper,r?i.wrapperShow:i.wrapperHide,w&&i.wrapperStacked,p&&i.wrapperBackgroundBlur,g&&i.wrapperDisableTransition),onClick:M,children:y})})})),k):null};exports.Overlay=r=>e.jsx(t.FloatingTree,{children:e.jsx(y,Object.assign({},r))});
 //# sourceMappingURL=overlay.js.map

package/cjs/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 React, { useEffect, useRef, useState } from \"react\";\nimport ReactDOM from \"react-dom\";\n\nimport { SimpleIdGenerator } from \"../util\";\nimport { Root, Wrapper } 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}: 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] = useState(() => SimpleIdGenerator.generate());\n    const nodeId = useFloatingNodeId();\n\n    const stacked = useRef<boolean>();\n\n    const childRef = useRef<HTMLDivElement>(null);\n    const childWithRef =\n        children && React.cloneElement(children, { ref: childRef });\n\n    const overlayRootId = id\n        ? `lifesg-ds-overlay-root-${id}`\n        : \"lifesg-ds-overlay-root\";\n    const zIndex = customZIndex ?? (isStacked ? 99999 : 99998);\n\n    useFloatingParent(zIndex);\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        addStylesheetForDocumentBody();\n        setRootElement(getRootElement());\n\n        return () => {\n            removeOverlay();\n            if (getOverlayOrder().length < 1) {\n                applyScrollLockClass(\"remove\");\n                scrollToLastScrollPosition();\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                applyScrollLockClass(\"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                applyScrollLockClass(\"remove\");\n                scrollToLastScrollPosition();\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    // =============================================================================\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 addStylesheetForDocumentBody = () => {\n        /**\n         * This stylesheet is to manipulate the <body>. We only add once\n         */\n        if (!document.getElementById(STYLESHEET_ID)) {\n            const overlayStyleSheet = document.createElement(\"style\");\n            overlayStyleSheet.id = STYLESHEET_ID;\n\n            const documentWidth = document.documentElement.clientWidth;\n            const windowWidth = window.innerWidth;\n            const scrollBarWidth = windowWidth - documentWidth;\n\n            overlayStyleSheet.innerHTML = `\n\t\t\t\t.${OVERLAY_OPEN_CLASSNAME} {\n\t\t\t\t\toverflow: hidden;\n\t\t\t\t\tpadding-right: ${scrollBarWidth}px !important;\n\t\t\t\t\t-ms-overflow-style: none;\n\t\t\t\t\tscrollbar-width: none;\n\t\t\t\t}\n\n\t\t\t\t.${OVERLAY_OPEN_CLASSNAME}::-webkit-scrollbar {\n\t\t\t\t\tdisplay: none;\n\t\t\t\t}\n\n\t\t\t\t.${OVERLAY_SCROLL_LOCK_CLASSNAME} {\n\t\t\t\t\tposition: fixed;\n\t\t\t\t\ttop: var(${SCROLL_POSITION_VAR}, 0);\n\t\t\t\t\tbottom: 0;\n\t\t\t\t}\n\t\t\t`;\n\n            document.body.appendChild(overlayStyleSheet);\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            OVERLAY_OPEN_CLASSNAME\n        );\n\n        if (action === \"add\" && !isOverlayStyleClassApplied) {\n            document.body.classList.add(OVERLAY_OPEN_CLASSNAME);\n        } else if (action === \"remove\" && isOverlayStyleClassApplied) {\n            document.body.classList.remove(OVERLAY_OPEN_CLASSNAME);\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 applyScrollLockClass = (action: \"add\" | \"remove\") => {\n        if (!isIOS()) {\n            return;\n        }\n\n        const isClassApplied = document.body.classList.contains(\n            OVERLAY_SCROLL_LOCK_CLASSNAME\n        );\n\n        if (action === \"add\" && !isClassApplied) {\n            document.body.classList.add(OVERLAY_SCROLL_LOCK_CLASSNAME);\n        } else if (action === \"remove\" && isClassApplied) {\n            document.body.classList.remove(OVERLAY_SCROLL_LOCK_CLASSNAME);\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(SCROLL_POSITION_VAR, scrollY);\n    };\n\n    const scrollToLastScrollPosition = () => {\n        const scrollY =\n            document.body.style.getPropertyValue(SCROLL_POSITION_VAR);\n        requestAnimationFrame(() => {\n            window.scrollTo({\n                top: parseFloat(scrollY),\n            });\n        });\n    };\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleWrapperClick = (event: React.MouseEvent<HTMLDivElement>) => {\n        const modal = childRef.current?.firstChild;\n        if (modal && (modal as Node).contains(event.target as Node)) {\n            return;\n        } else if (onOverlayClick && enableOverlayClick) {\n            event.preventDefault();\n            onOverlayClick();\n        }\n    };\n\n    // =============================================================================\n    // RENDER\n    // =============================================================================\n    const renderWrapper = () => (\n        <FloatingNode id={nodeId}>\n            <Wrapper\n                data-testid=\"overlay-wrapper\"\n                $show={show}\n                $stacked={isStacked}\n                $backgroundBlur={backgroundBlur}\n                $disableTransition={disableTransition}\n                onClick={handleWrapperClick}\n            >\n                {childWithRef}\n            </Wrapper>\n        </FloatingNode>\n    );\n\n    const renderComponent = () => (\n        <Root\n            id={overlayRootId}\n            data-testid={overlayRootId}\n            $show={show}\n            $zIndex={zIndex}\n        >\n            {children && renderWrapper()}\n        </Root>\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\n// =============================================================================\n// CONSTANTS\n// =============================================================================\nconst STYLESHEET_ID = \"lifesg-ds-overlay-stylesheet\";\nconst OVERLAY_OPEN_CLASSNAME = \"lifesg-ds-overlay-open\";\nconst OVERLAY_SCROLL_LOCK_CLASSNAME = \"lifesg-ds-overlay-scroll-lock\";\nconst SCROLL_POSITION_VAR = \"--lifesg-ds-overlay-scroll-y\";\n"],"names":["OverlayComponent","show","rootId","onOverlayClick","children","backgroundOpacity","_backgroundOpacity","backgroundBlur","disableTransition","enableOverlayClick","zIndex","customZIndex","id","rootElement","setRootElement","useState","isStacked","_setIsStacked","uid","SimpleIdGenerator","generate","nodeId","useFloatingNodeId","stacked","useRef","childRef","childWithRef","React","cloneElement","ref","overlayRootId","useFloatingParent","useEffect","addStylesheetForDocumentBody","getRootElement","removeOverlay","getOverlayOrder","length","applyScrollLockClass","scrollToLastScrollPosition","applyBodyStyleClass","checkIfStacked","setStacked","addOverlay","isIOS","saveScrollPosition","timerId","setTimeout","clearTimeout","data","current","test","navigator","userAgent","document","getElementById","body","STYLESHEET_ID","overlayStyleSheet","createElement","documentWidth","documentElement","clientWidth","scrollBarWidth","window","innerWidth","innerHTML","OVERLAY_OPEN_CLASSNAME","OVERLAY_SCROLL_LOCK_CLASSNAME","SCROLL_POSITION_VAR","appendChild","action","isOverlayStyleClassApplied","classList","contains","remove","add","attr","dataset","lifesgDsOverlayOrder","split","order","join","filter","o","isClassApplied","bodyStyle","style","scrollY","top","setProperty","getPropertyValue","requestAnimationFrame","scrollTo","parseFloat","handleWrapperClick","event","modal","_a","firstChild","target","preventDefault","ReactDOM","createPortal","_jsx","Root","$show","$zIndex","FloatingNode","Wrapper","$stacked","$backgroundBlur","onClick","props","FloatingTree","Object","assign"],"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","props","FloatingTree"],"mappings":"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"}

package/cjs/overlay/overlay.styles.js

@@ -1,40 +1,2 @@
-"use strict";var i=require("styled-components"),t=require("../v3_theme/index.js");function e(i){return i&&"object"==typeof i&&"default"in i?i:{default:i}}var o=e(i);const s=o.default.div`
-    position: fixed;
-    left: 0;
-    top: 0;
-    height: 0;
-    width: 0;
-    visibility: hidden;
-    z-index: ${i=>i.$zIndex};
-
-    ${t=>{if(t.$show)return i.css`
-                height: 100%;
-                width: 100vw;
-                visibility: visible;
-            `}}
-`,n=o.default.div`
-    position: absolute;
-    left: 0;
-    top: 0;
-    background-color: ${i=>i.$stacked?t.V3_Colour["overlay-subtle"]:t.V3_Colour["overlay-strong"]};
-    backdrop-filter: ${i=>(i=>{let t="";return i&&(t+="blur(10px)"),t.length>0?t:"none"})(i.$backgroundBlur)};
-    transition: opacity 200ms ease;
-
-    ${t=>{let e="";return t.$show?e+=i.css`
-                visibility: visible;
-                opacity: 1;
-                pointer-events: auto;
-                height: 100%;
-                width: 100vw;
-            `:e+=i.css`
-                visibility: hidden;
-                opacity: 0;
-                transition-delay: ${t.$disableTransition?"0ms":"400ms"};
-                pointer-events: none;
-                height: 0;
-                width: 0;
-            `,t.$disableTransition&&(e+=i.css`
-                transition: none;
-            `),e}};
-`;exports.Root=s,exports.Wrapper=n;
+"use strict";require("./overlay.styles_12wym18.css");exports.root="r1042j6c",exports.rootShow="rceie2f",exports.tokens={global:{scrollY:"--fds-internal-overlay-body-scrollY",scrollbarWidth:"--fds-internal-overlay-body-scrollbarWidth",overlayOpenClass:"lifesg-ds-overlay-open",overlayScrollLockClass:"lifesg-ds-overlay-scroll-lock"},root:{zIndex:"--fds-internal-overlay-root-zIndex"}},exports.wrapper="w1q7jcf6",exports.wrapperBackgroundBlur="w1xh3xyq",exports.wrapperDisableTransition="w1ttt09o",exports.wrapperHide="w1q7bprp",exports.wrapperShow="wv8m6sc",exports.wrapperStacked="w14rsmxt";
 //# sourceMappingURL=overlay.styles.js.map

package/cjs/overlay/overlay.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"overlay.styles.js","sources":["../../../src/overlay/overlay.styles.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { V3_Colour } from \"../v3_theme\";\n\n// =============================================================================\n// STYLE INTERFACE, transient props are denoted with $\n// See more https://styled-components.com/docs/api#transient-props\n// =============================================================================\ninterface StyleProps {\n    $show: boolean;\n    $backgroundBlur?: boolean | undefined;\n    $disableTransition?: boolean | undefined;\n    $zIndex?: number | undefined;\n    $stacked?: boolean | undefined;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nconst getBackdropFilter = (blur: boolean | undefined) => {\n    let styleString = \"\";\n\n    if (blur) {\n        styleString += \"blur(10px)\";\n    }\n\n    return styleString.length > 0 ? styleString : \"none\";\n};\n\nexport const Root = styled.div<StyleProps>`\n    position: fixed;\n    left: 0;\n    top: 0;\n    height: 0;\n    width: 0;\n    visibility: hidden;\n    z-index: ${(props) => props.$zIndex};\n\n    ${(props) => {\n        if (props.$show) {\n            return css`\n                height: 100%;\n                width: 100vw;\n                visibility: visible;\n            `;\n        }\n    }}\n`;\n\nexport const Wrapper = styled.div<StyleProps>`\n    position: absolute;\n    left: 0;\n    top: 0;\n    background-color: ${(props) =>\n        props.$stacked\n            ? V3_Colour[\"overlay-subtle\"]\n            : V3_Colour[\"overlay-strong\"]};\n    backdrop-filter: ${(props) => getBackdropFilter(props.$backgroundBlur)};\n    transition: opacity 200ms ease;\n\n    ${(props) => {\n        let customStyles = \"\";\n        if (props.$show) {\n            customStyles += css`\n                visibility: visible;\n                opacity: 1;\n                pointer-events: auto;\n                height: 100%;\n                width: 100vw;\n            `;\n        } else {\n            customStyles += css`\n                visibility: hidden;\n                opacity: 0;\n                transition-delay: ${props.$disableTransition ? \"0ms\" : \"400ms\"};\n                pointer-events: none;\n                height: 0;\n                width: 0;\n            `;\n        }\n        if (props.$disableTransition) {\n            customStyles += css`\n                transition: none;\n            `;\n        }\n\n        return customStyles;\n    }};\n`;\n"],"names":["Root","styled","div","props","$zIndex","$show","css","Wrapper","$stacked","V3_Colour","blur","styleString","length","getBackdropFilter","$backgroundBlur","customStyles","$disableTransition"],"mappings":"qKAmBA,MAUaA,EAAOC,EAAAA,QAAOC,GAAe;;;;;;;eAO1BC,GAAUA,EAAMC;;MAEzBD,IACC,GAAIA,EAAME,MACN,OAAOC,KAAG;;;;aAKd;EAIKC,EAAUN,EAAAA,QAAOC,GAAe;;;;wBAIpBC,GACjBA,EAAMK,SACAC,EAAAA,UAAU,kBACVA,EAAAA,UAAU;uBACAN,GAtCE,CAACO,IACvB,IAAIC,EAAc,GAMlB,OAJID,IACAC,GAAe,cAGZA,EAAYC,OAAS,EAAID,EAAc,MAAM,EA+BtBE,CAAkBV,EAAMW;;;MAGnDX,IACC,IAAIY,EAAe,GAyBnB,OAxBIZ,EAAME,MACNU,GAAgBT,EAAAA,GAAG;;;;;;cAQnBS,GAAgBT,EAAAA,GAAG;;;oCAGKH,EAAMa,mBAAqB,MAAQ;;;;cAM3Db,EAAMa,qBACND,GAAgBT,EAAAA,GAAG;;eAKhBS,CAAY;"}
+{"version":3,"file":"overlay.styles.js","sources":["../../../src/overlay/overlay.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour } from \"../theme\";\n\nexport const tokens = {\n    global: {\n        scrollY: \"--fds-internal-overlay-body-scrollY\",\n        scrollbarWidth: \"--fds-internal-overlay-body-scrollbarWidth\",\n        overlayOpenClass: \"lifesg-ds-overlay-open\",\n        overlayScrollLockClass: \"lifesg-ds-overlay-scroll-lock\",\n    },\n    root: {\n        zIndex: \"--fds-internal-overlay-root-zIndex\",\n    },\n} as const;\n\nexport const root = css`\n    position: fixed;\n    left: 0;\n    top: 0;\n    height: 0;\n    width: 0;\n    visibility: hidden;\n    z-index: var(${tokens.root.zIndex});\n\n    :global() {\n        .${tokens.global.overlayOpenClass} {\n            padding-right: var(${tokens.global.scrollbarWidth}, 0) !important;\n            overflow: hidden;\n            scrollbar-width: none;\n            -ms-overflow-style: none;\n        }\n\n        .${tokens.global.overlayOpenClass}::-webkit-scrollbar {\n            display: none;\n        }\n\n        .${tokens.global.overlayScrollLockClass} {\n            position: fixed;\n            top: var(${tokens.global.scrollY}, 0);\n            bottom: 0;\n        }\n    }\n`;\n\nexport const rootShow = css`\n    height: 100%;\n    width: 100vw;\n    visibility: visible;\n`;\n\nexport const wrapper = css`\n    position: absolute;\n    left: 0;\n    top: 0;\n    background-color: ${Colour[\"overlay-strong\"]};\n    backdrop-filter: none;\n    transition: opacity 200ms ease;\n`;\n\nexport const wrapperStacked = css`\n    background-color: ${Colour[\"overlay-subtle\"]};\n`;\n\nexport const wrapperBackgroundBlur = css`\n    backdrop-filter: blur(10px);\n`;\n\nexport const wrapperShow = css`\n    visibility: visible;\n    opacity: 1;\n    pointer-events: auto;\n    height: 100%;\n    width: 100vw;\n`;\n\nexport const wrapperHide = css`\n    visibility: hidden;\n    opacity: 0;\n    transition-delay: 400ms;\n    pointer-events: none;\n    height: 0;\n    width: 0;\n`;\n\nexport const wrapperDisableTransition = css`\n    transition: none;\n    transition-delay: 0ms;\n`;\n"],"names":["global","scrollY","scrollbarWidth","overlayOpenClass","overlayScrollLockClass","root","zIndex"],"mappings":"yFAgBiB,4BA6BI,yBAzCC,CAClBA,OAAQ,CACJC,QAAS,sCACTC,eAAgB,6CAChBC,iBAAkB,yBAClBC,uBAAwB,iCAE5BC,KAAM,CACFC,OAAQ,uDAuCI,yCAac,4CAqBG,+BATb,+BARA,iCARG"}

package/cjs/overlay/overlay.styles_12wym18.css

@@ -0,0 +1,8 @@
+.r1042j6c{position:fixed;left:0;top:0;height:0;width:0;visibility:hidden;z-index:var(--fds-internal-overlay-root-zIndex);}.lifesg-ds-overlay-open {padding-right:var(--fds-internal-overlay-body-scrollbarWidth, 0)!important;overflow:hidden;scrollbar-width:none;-ms-overflow-style:none;}.lifesg-ds-overlay-open::-webkit-scrollbar {display:none;}.lifesg-ds-overlay-scroll-lock {position:fixed;top:var(--fds-internal-overlay-body-scrollY, 0);bottom:0;}
+.rceie2f{height:100%;width:100vw;visibility:visible;}
+.w1q7jcf6{position:absolute;left:0;top:0;background-color:var(--fds-colour-overlay-strong);-webkit-backdrop-filter:none;backdrop-filter:none;-webkit-transition:opacity 200ms ease;transition:opacity 200ms ease;}
+.w14rsmxt{background-color:var(--fds-colour-overlay-subtle);}
+.w1xh3xyq{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);}
+.wv8m6sc{visibility:visible;opacity:1;pointer-events:auto;height:100%;width:100vw;}
+.w1q7bprp{visibility:hidden;opacity:0;transition-delay:400ms;pointer-events:none;height:0;width:0;}
+.w1ttt09o{-webkit-transition:none;transition:none;transition-delay:0ms;}

package/cjs/package.json

@@ -1,6 +1,7 @@
 {
   "type": "commonjs",
   "dependencies": {
+    "@react-aria/live-announcer": "^3.4.4",
     "@react-spring/web": "^10.0.1",
     "clsx": "^2.1.1",
     "fabric": "^7.2.0",

package/cjs/pagination/pagination.js

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

package/cjs/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 React, { useContext, useEffect, useRef, useState } from \"react\";\nimport { useMediaQuery } from \"react-responsive\";\nimport { ThemeContext } from \"styled-components\";\n\nimport { InputSelect } from \"../input-select\";\nimport { VisuallyHidden } from \"../shared/accessibility\";\nimport { SimpleIdGenerator } from \"../util\";\nimport { V3_Breakpoint } from \"../v3_theme\";\nimport {\n    EllipsisButton,\n    EllipsisContainer,\n    Hover,\n    InputSelectWrapper,\n    InputView,\n    Label,\n    LabelDivider,\n    NavigationButton,\n    PageItem,\n    PaginationList,\n    PaginationMenu,\n    PaginationMobileInput,\n    PaginationWrapper,\n} 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 theme = useContext(ThemeContext);\n    const mobileBreakpoint = V3_Breakpoint[\"sm-max\"]({ theme });\n\n    const isMobile = useMediaQuery({\n        maxWidth: mobileBreakpoint,\n    });\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 = useRef(SimpleIdGenerator.generate());\n    const paginationId = `${internalId.current}-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                    <PageItem\n                        key={pageIndex}\n                        onClick={() => handlePaginationItemClick(pageIndex)}\n                        $selected={active}\n                        aria-label={`page ${pageIndex} of ${totalPages}`}\n                        aria-current={active ? \"page\" : false}\n                        onMouseOver={closeAllTooltips}\n                        onFocus={closeAllTooltips}\n                    >\n                        {pageIndex}\n                    </PageItem>\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                    <PageItem\n                        key={pageIndex}\n                        onClick={() => handlePaginationItemClick(pageIndex)}\n                        $selected={active}\n                        aria-label={`page ${pageIndex} of ${totalPages}`}\n                        aria-current={active ? \"page\" : false}\n                        onMouseOver={closeAllTooltips}\n                        onFocus={closeAllTooltips}\n                    >\n                        {pageIndex}\n                    </PageItem>\n                );\n            }\n\n            return null;\n        });\n    };\n\n    const renderStartEllipsis = (pageIndex: number) => (\n        <EllipsisContainer key={pageIndex}>\n            <EllipsisButton\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            </EllipsisButton>\n            {hoverLeftButton && <Hover>Previous 5 pages</Hover>}\n        </EllipsisContainer>\n    );\n\n    const renderEndEllipsis = (pageIndex: number) => (\n        <EllipsisContainer key={pageIndex}>\n            <EllipsisButton\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            </EllipsisButton>\n            {hoverRightButton && <Hover>Next 5 pages</Hover>}\n        </EllipsisContainer>\n    );\n\n    const renderMobile = () => (\n        <PaginationMobileInput>\n            <form onSubmit={handleInputSubmit}>\n                <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            <LabelDivider>/</LabelDivider>\n            <Label>{totalPages}</Label>\n        </PaginationMobileInput>\n    );\n\n    return (\n        <PaginationWrapper\n            className={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            <PaginationList>\n                <PaginationMenu>\n                    {showFirstAndLastNav && (\n                        <NavigationButton\n                            onClick={firstPaginationItem}\n                            disabled={isFirstPage}\n                            focusHighlight={false}\n                            $position=\"left\"\n                            aria-label=\"First page\"\n                            focusOutline=\"browser\"\n                        >\n                            <ChevronLineLeftIcon aria-hidden />\n                        </NavigationButton>\n                    )}\n                    <NavigationButton\n                        onClick={prevPaginationItem}\n                        disabled={isFirstPage}\n                        focusHighlight={false}\n                        $position=\"left\"\n                        aria-label=\"Previous page\"\n                        focusOutline=\"browser\"\n                    >\n                        <ChevronLeftIcon aria-hidden />\n                    </NavigationButton>\n                    {isMobile ? renderMobile() : renderPaginationItems()}\n                    <NavigationButton\n                        onClick={nextPaginationItem}\n                        disabled={isLastPage}\n                        focusHighlight={false}\n                        $position=\"right\"\n                        aria-label=\"Next page\"\n                        focusOutline=\"browser\"\n                    >\n                        <ChevronRightIcon aria-hidden />\n                    </NavigationButton>\n                    {showFirstAndLastNav && (\n                        <NavigationButton\n                            onClick={lastPaginationItem}\n                            disabled={isLastPage}\n                            focusHighlight={false}\n                            $position=\"right\"\n                            aria-label=\"Last page\"\n                            focusOutline=\"browser\"\n                        >\n                            <ChevronLineRightIcon aria-hidden />\n                        </NavigationButton>\n                    )}\n                </PaginationMenu>\n            </PaginationList>\n            {showPageSizeChanger && !isMobile && (\n                <InputSelectWrapper>\n                    <InputSelect\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                </InputSelectWrapper>\n            )}\n        </PaginationWrapper>\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","theme","useContext","ThemeContext","mobileBreakpoint","V3_Breakpoint","isMobile","useMediaQuery","maxWidth","hoverRightButton","setHoverRightButton","useState","hoverLeftButton","setHoverLeftButton","inputText","setInputText","selectedOption","setSelectedOption","pageSizeLocal","setPageSize","value","paginationId","useRef","SimpleIdGenerator","generate","current","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","EllipsisContainer","children","_jsx","EllipsisButton","focusHighlight","focusOutline","onMouseEnter","onMouseLeave","onFocus","onBlur","onClick","Chevron2LeftIcon","EllipsisHorizontalIcon","Hover","renderEndEllipsis","Chevron2RightIcon","PaginationWrapper","VisuallyHidden","PaginationList","PaginationMenu","NavigationButton","disabled","$position","ChevronLineLeftIcon","ChevronLeftIcon","PaginationMobileInput","onSubmit","InputView","onChange","autoComplete","type","LabelDivider","Label","Array","map","e","i","endRange","boundaryRange","active","PageItem","onMouseOver","ChevronRightIcon","ChevronLineRightIcon","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 {\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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"}

package/cjs/pagination/pagination.styles.js

@@ -1,165 +1,2 @@
-"use strict";var e=require("styled-components"),o=require("../input/input.js"),r=require("../shared/clickable-icon/clickable-icon.js"),i=require("../typography/index.js"),t=require("../v3_theme/index.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=n(e);const l=a.default.nav`
-    display: flex;
-`,s=a.default.div`
-    align-self: flex-start;
-
-    display: flex;
-    align-items: center;
-
-    ${t.V3_MediaQuery.MaxWidth.lg} {
-        align-self: center;
-    }
-`,d=a.default.div`
-    display: inline-flex;
-    align-items: center;
-`,c=a.default(r.ClickableIcon)`
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    outline: none;
-    border-radius: ${t.V3_Radius.sm};
-    height: 2.5rem;
-    width: 2.5rem;
-    padding: 0 ${t.V3_Spacing["spacing-8"]};
-
-    color: ${t.V3_Colour["icon-primary"]};
-
-    svg {
-        height: 1.25rem;
-        width: 1.25rem;
-    }
-
-    &:disabled {
-        color: ${t.V3_Colour["icon-disabled-subtle"]};
-        cursor: not-allowed;
-    }
-
-    &:hover,
-    &:focus-visible {
-        background-color: ${t.V3_Colour["bg-hover"]};
-    }
-`,u=a.default(r.ClickableIcon)`
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    outline: none;
-    margin: ${t.V3_Spacing["spacing-4"]};
-    border-radius: ${t.V3_Radius.sm};
-    height: 2.5rem;
-    width: 2.5rem;
-    padding: 0 ${t.V3_Spacing["spacing-8"]};
-
-    color: ${t.V3_Colour["icon-primary"]};
-
-    svg {
-        height: 1.25rem;
-        width: 1.25rem;
-    }
-
-    &:disabled {
-        color: ${t.V3_Colour["icon-disabled-subtle"]};
-        cursor: not-allowed;
-    }
-
-    &:not(:disabled):hover,
-    &:not(:disabled):focus-visible {
-        background: ${t.V3_Colour["bg-hover"]};
-    }
-`,g=a.default.button`
-    outline: none;
-    margin: ${t.V3_Spacing["spacing-4"]};
-    box-shadow: none;
-    border: ${t.V3_Border["width-010"]} ${t.V3_Border.solid}
-        ${o=>e.css`
-                ${o.$selected?t.V3_Colour["bg-primary"]:t.V3_Colour.border}
-            `};
-    border-radius: ${t.V3_Radius.sm};
-    min-width: 2.5rem;
-    height: 2.5rem;
-    padding: 0 ${t.V3_Spacing["spacing-8"]};
-
-    background: ${e=>e.$selected?t.V3_Colour["bg-primary"]:t.V3_Colour.bg};
-    cursor: pointer;
-
-    ${t.V3_Font["body-baseline-regular"]};
-    text-align: center;
-    color: ${e=>e.$selected?t.V3_Colour["text-inverse"]:t.V3_Colour.text};
-
-    ${o=>o.$selected?e.css`
-                  font-weight: ${t.V3_Font.Spec["weight-bold"]};
-
-                  &:hover,
-                  &:focus-visible {
-                      border-color: ${t.V3_Colour["bg-selected-strongest-hover"]};
-                      background: ${t.V3_Colour["bg-selected-strongest-hover"]};
-                      color: ${t.V3_Colour["text-inverse"]};
-                  }
-              `:e.css`
-                  &:hover,
-                  &:focus-visible {
-                      border-color: ${t.V3_Colour["bg-hover"]};
-                      background: ${t.V3_Colour["bg-hover"]};
-                      color: ${t.V3_Colour["text-hover"]};
-                      font-weight: ${t.V3_Font.Spec["weight-semibold"]};
-                  }
-              `}
-`,p=a.default.div`
-    position: relative;
-
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    margin: ${t.V3_Spacing["spacing-4"]};
-    border-radius: ${t.V3_Radius.sm};
-    width: 2.5rem;
-    height: 2.5rem;
-
-    cursor: pointer;
-`,b=a.default.div`
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    margin: ${t.V3_Spacing["spacing-4"]};
-
-    color: ${t.V3_Colour.text};
-`,h=a.default(i.Typography.BodyBL)`
-    white-space: nowrap;
-`,$=a.default(i.Typography.BodyBL)`
-    margin: 0 ${t.V3_Spacing["spacing-16"]};
-    white-space: nowrap;
-`,V=a.default(o.Input)`
-    width: 3.5rem;
-    height: 2.5rem;
-    ${t.V3_Font["body-baseline-regular"]};
-
-    input {
-        padding: 0 ${t.V3_Spacing["spacing-8"]};
-        text-align: center;
-    }
-`,_=a.default.div`
-    position: absolute;
-    top: -${t.V3_Spacing["spacing-8"]};
-    transform: translateY(-100%);
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    border: none;
-    border-radius: ${t.V3_Radius.sm};
-    width: max-content;
-    padding: ${t.V3_Spacing["spacing-4"]} ${t.V3_Spacing["spacing-12"]};
-
-    background-color: ${t.V3_Colour["bg-hover"]};
-
-    ${t.V3_Font["body-xs-regular"]}
-    color: ${t.V3_Colour["text-hover"]};
-`,m=a.default.div`
-    margin-left: ${t.V3_Spacing["spacing-4"]};
-    width: 10rem;
-`;exports.EllipsisButton=c,exports.EllipsisContainer=p,exports.Hover=_,exports.InputSelectWrapper=m,exports.InputView=V,exports.Label=h,exports.LabelDivider=$,exports.NavigationButton=u,exports.PageItem=g,exports.PaginationList=s,exports.PaginationMenu=d,exports.PaginationMobileInput=b,exports.PaginationWrapper=l;
+"use strict";require("./pagination.styles_1u898rb.css");exports.ellipsisContainer="e1peilt2",exports.hover="h1x6xag5",exports.iconButton="irakt3t",exports.iconButtonNavigation="i1eo6n86",exports.inputSelectWrapper="issm41d",exports.inputView="i1hj21s6",exports.label="l1nxoktb",exports.labelDivider="lquxmfr",exports.pageItem="pia4hww",exports.pageItemSelected="p673w5b",exports.paginationList="p1ma9kw3",exports.paginationMenu="p1sz1s7f",exports.paginationMobileInput="p1yg278j",exports.paginationWrapper="p1afjf30";
 //# sourceMappingURL=pagination.styles.js.map