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

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 { Button } from \"../button\";\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 type { VerificationSectionProps } from \"./internal-types\";\nimport { EmailThumbnail, PhoneThumbnail } from \"./thumbnail\";\nimport * as styles 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 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\" ? <EmailThumbnail /> : <PhoneThumbnail />}\n            </div>\n        );\n    };\n\n    return (\n        <div\n            id={id}\n            data-testid={dataTestId}\n            role=\"group\"\n            className={styles.verificationSectionWrapper}\n        >\n            {renderThumbnail()}\n            <div className={styles.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                    <div className={styles.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                        <Button\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                            className={styles.verifyButton}\n                        >\n                            {!isVerifyLoading && \"Verify\"}\n                        </Button>\n                    </div>\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                    <Typography.BodyMD\n                        id={id ? `${id}-countdown` : undefined}\n                        data-testid={\n                            dataTestId ? `${dataTestId}-countdown` : undefined\n                        }\n                        className={styles.resendMessage}\n                    >\n                        Resend OTP in {countdown.formatTime()}\n                    </Typography.BodyMD>\n                )}\n            </div>\n        </div>\n    );\n};\n"],"names":["id","dataTestId","type","showVerifyOtpThumbnail","verifyOtpTitle","verifyOtpMessage","otpCode","setOtpCode","isVerifyLoading","countdown","onVerifyOtp","verifyOtpError","otpPrefix","otpSeparator","internalId","useId","titleId","messageId","otpAddonId","verifyErrorId","_jsxs","role","className","styles.verificationSectionWrapper","children","_jsx","EmailThumbnail","PhoneThumbnail","styles.sectionContainer","Typography","BodyMD","weight","undefined","styles.verifyInputWrapper","InputGroup","value","onChange","e","target","placeholder","addon","attributes","error","concatIds","Button","onClick","loading","styleType","disabled","length","styles.verifyButton","FormErrorMessage","isRunning","styles.resendMessage","formatTime"],"mappings":"6nBAUmC,EAC/BA,KACA,cAAeC,EACfC,OACAC,0BAAyB,EACzBC,iBACAC,mBACAC,UACAC,aACAC,kBACAC,YACAC,cACAC,iBACAC,YACAC,mBAEA,MAAMC,EAAaC,EAAAA,QAEbC,EAAU,GAAGF,UACbG,EAAY,GAAGH,YACfI,EAAa,GAAGJ,uBAChBK,EAAgB,GAAGL,iBAYzB,OACIM,EAAAA,KAAA,MAAA,CACIpB,GAAIA,gBACSC,EACboB,KAAK,QACLC,UAAWC,6BAAiCC,SAAA,CAd3CrB,EAGDsB,EAAAA,IAAA,MAAA,CAAA,eAAA,EAAAD,SACc,UAATtB,EAAmBuB,EAAAA,IAACC,EAAAA,eAAc,CAAA,GAAMD,EAAAA,IAACE,EAAAA,eAAc,CAAA,KAJ5B,KAiBhCP,EAAAA,KAAA,MAAA,CAAKE,UAAWM,mBAAuBJ,SAAA,CACnCJ,OAAA,MAAA,CAAAI,SAAA,CACIC,EAAAA,IAACI,aAAWC,QACRC,OAAO,WACP/B,GAAIgB,EAAO,cAEPf,EAAa,GAAGA,eAAqB+B,EAASR,SAGjDpB,IAELqB,EAAAA,IAACI,EAAAA,WAAWC,OAAM,CACdC,OAAO,UACP/B,GAAIiB,gBAEAhB,EAAa,GAAGA,iBAAuB+B,EAASR,SAGnDnB,OAGTe,EAAAA,KAAA,MAAA,CAAAI,SAAA,CACIJ,EAAAA,KAAA,MAAA,CAAKE,UAAWW,EAAAA,mBAAyBT,SAAA,CACrCC,EAAAA,IAACS,aAAU,CACPlC,GAAIA,EAAK,GAAGA,sBAAoBgC,EAAS,cAErC/B,EACM,GAAGA,sBACH+B,EAEVG,MAAO7B,EACP8B,SAAWC,GAAM9B,aAAU,EAAVA,EAAa8B,EAAEC,OAAOH,OACvCI,YAAY,YACZC,MAAO,CACHtC,KAAM,QACNuC,WAAY,CACRN,MAAO,GAAGvB,QAAAA,EAAa,KACnBC,QAAAA,EAAgB,OAI5BX,KAAK,SACLwC,QAAS/B,EAAc,kBACNK,EAAO,mBACN2B,EAAAA,UACd1B,EACAC,EACAP,EAAiBQ,OAAgBa,oBAErBrB,EAAc,iBACf,IAEnBc,EAAAA,IAACmB,EAAAA,OAAM,CACH5C,GAAIA,EAAK,GAAGA,uBAAqBgC,EACjC9B,KAAK,SAAQ,cAETD,EACM,GAAGA,uBACH+B,EAEVa,QAASnC,EACToC,QAAStC,EACTuC,UAAU,QACVC,UAAW1C,GAA8B,IAAnBA,EAAQ2C,OAC9B3B,UAAW4B,EAAAA,aAAmB1B,UAE5BhB,GAAmB,cAG5BG,GACGc,EAAAA,IAAC0B,EAAAA,kBACGnD,GAAImB,EAAa,cAEblB,EACM,GAAGA,sBACH+B,EAEVX,KAAK,QAAOG,SAEXb,OAIZF,EAAU2C,WACPhC,EAAAA,KAACS,EAAAA,WAAWC,OAAM,CACd9B,GAAIA,EAAK,GAAGA,mBAAiBgC,EAAS,cAElC/B,EAAa,GAAGA,mBAAyB+B,EAE7CV,UAAW+B,EAAAA,cAAoB7B,SAAA,CAAA,iBAEhBf,EAAU6C,qBAInC"}

package/cjs/otp-verification/verification-section.styles.js

@@ -0,0 +1,2 @@
+"use strict";require("./verification-section.styles_x8jj.css");exports.resendMessage="rl8lhyn",exports.sectionContainer="s1h7j64h",exports.verificationSectionWrapper="v1j5kvy",exports.verifyButton="v61u1jj",exports.verifyInputWrapper="v1ob0u9j";
+//# sourceMappingURL=verification-section.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"verification-section.styles.js","sources":["../../../src/otp-verification/verification-section.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, MediaQuery, Spacing } from \"../theme\";\n\nexport const verificationSectionWrapper = css`\n    display: flex;\n    align-items: center;\n    background-color: ${Colour[\"bg-strong\"]};\n    padding: ${Spacing[\"spacing-16\"]} ${Spacing[\"spacing-32\"]};\n    gap: ${Spacing[\"spacing-32\"]};\n\n    ${MediaQuery.MaxWidth.sm} {\n        flex-direction: column;\n        align-items: start;\n        gap: ${Spacing[\"spacing-16\"]};\n        padding: ${Spacing[\"spacing-16\"]};\n    }\n`;\n\nexport const sectionContainer = css`\n    display: flex;\n    flex-direction: column;\n    gap: ${Spacing[\"spacing-16\"]};\n`;\n\nexport const resendMessage = css`\n    color: ${Colour[\"text-subtlest\"]};\n`;\n\nexport const verifyInputWrapper = css`\n    display: flex;\n    gap: ${Spacing[\"spacing-8\"]};\n    max-width: 472px;\n`;\n\nexport const verifyButton = css`\n    flex-shrink: 0;\n    width: 83px;\n`;\n"],"names":[],"mappings":"qHAyB0B,mCANG,8CAfU,+BA+Bd,qCANM"}

package/cjs/otp-verification/verification-section.styles_x8jj.css

@@ -0,0 +1,5 @@
+@layer fds{.v1j5kvy{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--fds-colour-bg-strong);padding:var(--fds-spacing-16) var(--fds-spacing-32);gap:var(--fds-spacing-32);}:where(body.fds-breakpoint-sm-max) .v1j5kvy{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:start;-webkit-box-align:start;-ms-flex-align:start;align-items:start;gap:var(--fds-spacing-16);padding:var(--fds-spacing-16);}
+.s1h7j64h{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:var(--fds-spacing-16);}
+.rl8lhyn{color:var(--fds-colour-text-subtlest);}
+.v1ob0u9j{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:var(--fds-spacing-8);max-width:472px;}
+.v61u1jj{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;width:83px;}}

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"),s=require("react-dom");require("../theme/theme-provider/index.js");var n=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("../theme/utils/use-media-query.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(s);const y=({show:r=!1,rootId:s,onOverlayClick:d,children:y,backgroundBlur:v=!0,disableTransition:p=!1,enableOverlayClick:g=!1,zIndex:f,id:h,containerRef:b})=>{const[j,k]=o.useState(null),[q,w]=o.useState(),x=a.useId(),O=t.useFloatingNodeId(),L=o.useRef(),S=o.useRef(!1),C=o.useRef(null),P=o.useRef(null),T=h?`lifesg-ds-overlay-root-${h}`:"lifesg-ds-overlay-root",E=null!=f?f:q?99999:99998,{themeProps:I,themeStyle:F}=n.useInheritedThemeScope(r);u.useFloatingParent(E),l.useApplyStyle(C,{[i.tokens.root.zIndex]:E}),o.useEffect((()=>(A(),k(B()),()=>{$(),Y().length<1&&(R()&&(H("remove"),G()),W("remove"))})),[]),o.useEffect((()=>{if(r){const e=N();D(e),z(),R()&&1===Y().length&&(V(),H("add"));const t=setTimeout((()=>{W("add")}),200);return()=>clearTimeout(t)}{$(),R()&&Y().length<1&&(H("remove"),G());const e=setTimeout((()=>{Y().length<1&&W("remove")}),200);return()=>clearTimeout(e)}}),[r]),o.useEffect((()=>{if(r)return document.addEventListener("mousedown",J,!0),()=>{document.removeEventListener("mousedown",J,!0)}}),[r]);const D=e=>{L.current=e,w(e)},R=()=>/(iPad|iPhone|iPod)/g.test(navigator.userAgent),B=()=>document&&s?document.getElementById(s):document?document.body:null,N=()=>Y().length>0,A=()=>{const e=document.documentElement.clientWidth,t=window.innerWidth-e;document.documentElement.style.setProperty(i.tokens.global.scrollbarWidth,`${t}px`)},W=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)},Y=()=>{const e=document.body.dataset.lifesgDsOverlayOrder;return e?e.split(","):[]},z=()=>{const e=Y();document.body.dataset.lifesgDsOverlayOrder=[...e,x].join(",")},$=()=>{const e=Y();document.body.dataset.lifesgDsOverlayOrder=e.filter((e=>e!==x)).join(",")},H=e=>{if(!R())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)},V=()=>{const e=document.body.style,t=e.top?e.top:window.scrollY+"px";document.body.style.setProperty(i.tokens.global.scrollY,t)},G=()=>{if(!R())return;const e=document.body.style.getPropertyValue(i.tokens.global.scrollY);requestAnimationFrame((()=>{window.scrollTo({top:parseFloat(e)})}))},J=e=>{var t;const r=null!==(t=null==b?void 0:b.current)&&void 0!==t?t:P.current,o=P.current;if(!r)return void(S.current=!1);const s=e.target,n=o===s,l=r===s,a=r.contains(s);S.current=!n&&(l||a)},K=e=>{var t;const r=null!==(t=null==b?void 0:b.current)&&void 0!==t?t:P.current,o=P.current;if(!r)return void(S.current=!1);const s=e.target,n=o===s,l=r===s,a=r.contains(s);!n&&(l||a)||S.current||!d||!g||(e.preventDefault(),d()),S.current=!1};return j?m.default.createPortal(e.jsx("div",Object.assign({ref:C,id:T,"data-testid":T,className:c.default(i.root,r&&i.rootShow)},I,{style:F,children:y&&e.jsx(t.FloatingNode,{id:O,children:e.jsx("div",{ref:P,"data-testid":"overlay-wrapper",className:c.default(i.wrapper,r?i.wrapperShow:i.wrapperHide,q&&i.wrapperStacked,v&&i.wrapperBackgroundBlur,p&&i.wrapperDisableTransition),onClick:K,children:y})})})),j):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    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        // eslint-disable-next-line react-hooks/exhaustive-deps\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        // eslint-disable-next-line react-hooks/exhaustive-deps\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        // eslint-disable-next-line react-hooks/exhaustive-deps\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\n// @catalog\n/**\n * A full-screen dimmed overlay backdrop.\n *\n * Use `Overlay` as the backdrop for modal dialogs, drawers, and similar\n * blocking UI patterns. It manages body scroll-lock automatically and stacks\n * correctly when multiple overlays are open at once.\n * @keywords backdrop, dim, modal\n */\nexport const Overlay = (props: OverlayProps) => {\n    return (\n        <FloatingTree>\n            <OverlayComponent {...props} />\n        </FloatingTree>\n    );\n};\n"],"names":["OverlayComponent","show","rootId","onOverlayClick","children","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 @@
+@layer fds{.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,11 +1,11 @@
 {
   "type": "commonjs",
   "dependencies": {
+    "@react-aria/live-announcer": "^3.4.4",
     "@react-spring/web": "^10.0.1",
     "clsx": "^2.1.1",
     "fabric": "^7.2.0",
     "immer": "^10.0.2",
-    "react-slider": "^2.0.6",
     "react-virtuoso": "^4.12.5",
     "react-zoom-pan-pinch": "^3.3.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"),s=require("@lifesg/react-icons/chevron-line-right"),r=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"),require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js"),require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var g=require("../util/simple-id-generator.js");require("../util/string-helper.js"),require("@react-aria/live-announcer");var v=require("../util/use-mount.js"),f=require("../theme/utils/use-media-query.js"),j=require("../typography/index.js"),m=require("./pagination.styles.js");function x(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var b=x(o);const q=x(c).default.forwardRef((({id:o,"data-testid":x,className:q,pageSize:I=10,totalItems:C,activePage:y,pageSizeOptions:k=N,showFirstAndLastNav:M,showPageSizeChanger:S=!1,onPageChange:B,onPageSizeChange:L},w)=>{const O=v.useIsMounted(),H=f.useMaxWidthMediaQuery("sm"),[$,z]=c.useState(!1),[E,P]=c.useState(!1),[F,R]=c.useState(""),[V,W]=c.useState(k[0]),[A,D]=c.useState(!H&&S&&V?V.value:I),T=`${g.useId()}-pagination`,Q=Math.ceil(C/A),G=1===y,J=y===Q,K=y>1?()=>ee(1):void 0,U=y<Q?()=>ee(Q):void 0,X=y>1?()=>ee(y-1):void 0,Y=y<Q?()=>ee(parseInt(y.toString())+1):void 0;c.useEffect((()=>{y&&Z(y)}),[y]),c.useEffect((()=>{D(I),W(k.find((e=>e.value===I)))}),[I]);const Z=e=>{R(e.toString())},_=()=>{z(!1),P(!1)},ee=e=>{B&&(B(e),Z(e))},ie=()=>{const e=Math.min(Q,y+5);ee(e),Z(e),z(!0),P(!1)},ae=()=>{const e=Math.max(1,y-5);ee(e),Z(e),z(!1),P(!0)},ne=e=>{const i=e.target.value;if(void 0===i||0===i.length)R("");else if(/^[0-9]+$/.test(i)){const e=parseInt(i.replace(/[^0-9]/g,""));Z(Math.max(1,Math.min(Q,e)))}else R(i.replace(/[^0-9]/g,""))},te=e=>{e.preventDefault(),F&&(null==B||B(parseInt(F)))},se=()=>{z(!0)},re=()=>{z(!1)},le=()=>{P(!0)},oe=()=>{P(!1)},ce=a=>e.jsxs("div",{className:m.ellipsisContainer,children:[e.jsx(p.ClickableIcon,{className:m.iconButton,focusHighlight:!1,focusOutline:"browser","aria-label":"Previous 5 pages",onMouseEnter:le,onMouseLeave:oe,onFocus:le,onBlur:oe,onClick:ae,children:E?e.jsx(i.Chevron2LeftIcon,{"aria-hidden":!0}):e.jsx(l.EllipsisHorizontalIcon,{"aria-hidden":!0})}),E&&e.jsx("div",{className:m.hover,children:"Previous 5 pages"})]},a),ue=i=>e.jsxs("div",{className:m.ellipsisContainer,children:[e.jsx(p.ClickableIcon,{className:m.iconButton,focusHighlight:!1,focusOutline:"browser","aria-label":"Next 5 pages",onMouseEnter:se,onMouseLeave:re,onFocus:se,onBlur:re,onClick:ie,children:$?e.jsx(a.Chevron2RightIcon,{"aria-hidden":!0}):e.jsx(l.EllipsisHorizontalIcon,{"aria-hidden":!0})}),$&&e.jsx("div",{className:m.hover,children:"Next 5 pages"})]},i);return e.jsxs("nav",{className:b.default(m.paginationWrapper,q),ref:w,id:o||"pagination-wrapper","data-testid":x||"pagination","aria-labelledby":T,children:[e.jsx(h.VisuallyHidden,{id:T,"aria-hidden":!0,children:"pagination"}),e.jsx("div",{className:m.paginationList,children:e.jsxs("div",{className:m.paginationMenu,children:[M&&e.jsx(p.ClickableIcon,{className:b.default(m.iconButton,m.iconButtonNavigation),onClick:K,disabled:G,focusHighlight:!1,"aria-label":"First page",focusOutline:"browser",children:e.jsx(t.ChevronLineLeftIcon,{"aria-hidden":!0})}),e.jsx(p.ClickableIcon,{className:b.default(m.iconButton,m.iconButtonNavigation),onClick:X,disabled:G,focusHighlight:!1,"aria-label":"Previous page",focusOutline:"browser",children:e.jsx(n.ChevronLeftIcon,{"aria-hidden":!0})}),O&&H?e.jsxs("div",{className:m.paginationMobileInput,children:[e.jsx("form",{onSubmit:te,children:e.jsx(u.Input,{className:m.inputView,value:F,onChange:ne,autoComplete:"off",type:"numeric",id:(o||"pagination")+"-input","data-testid":(x||"pagination")+"-input","aria-label":`Page ${y} of ${Q}`})}),e.jsx(j.Typography.BodyBL,{className:m.labelDivider,children:"/"}),e.jsx(j.Typography.BodyBL,{className:m.label,children:Q})]}):[...Array(Q)].map(((i,a)=>{const n=a+1,t=Q-5,s=y===n;return Q<=7?e.jsx("button",{onClick:()=>ee(n),className:b.default(m.pageItem,s&&m.pageItemSelected),"aria-label":`page ${n} of ${Q}`,"aria-current":!!s&&"page",onMouseOver:_,onFocus:_,children:n},n):y+1>5&&2===n?ce(n):y-1<=t&&n===Q-1-1?ue(n):n<=5&&y+1<=5||n<=1||n===y||n<=y+1&&n>=y-1-1||n>t&&y-1>t||n>Q-1?e.jsx("button",{onClick:()=>ee(n),className:b.default(m.pageItem,s&&m.pageItemSelected),"aria-label":`page ${n} of ${Q}`,"aria-current":!!s&&"page",onMouseOver:_,onFocus:_,children:n},n):null})),e.jsx(p.ClickableIcon,{className:b.default(m.iconButton,m.iconButtonNavigation),onClick:Y,disabled:J,focusHighlight:!1,"aria-label":"Next page",focusOutline:"browser",children:e.jsx(r.ChevronRightIcon,{"aria-hidden":!0})}),M&&e.jsx(p.ClickableIcon,{className:b.default(m.iconButton,m.iconButtonNavigation),onClick:U,disabled:J,focusHighlight:!1,"aria-label":"Last page",focusOutline:"browser",children:e.jsx(s.ChevronLineRightIcon,{"aria-hidden":!0})})]})}),S&&!H&&e.jsxs("div",{className:m.inputSelectWrapper,children:[e.jsx(h.VisuallyHidden,{id:`${T}-page-size`,children:"Items per page"}),e.jsx(d.InputSelect,{"aria-labelledby":`${T}-page-size`,options:k,valueExtractor:e=>e.value,listExtractor:e=>e.label,displayValueExtractor:e=>e.label,selectedOption:V,onSelectOption:e=>{W(e);const i=e.value,a=Math.ceil(C/i);D(i);L&&L(y>=a?a:y,i)}})]})]})})),N=[{value:10,label:"10 per page"},{value:20,label:"20 per page"},{value:30,label:"30 per page"}];exports.Pagination=q;
 //# 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 { useMaxWidthMediaQuery } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport { useId, useIsMounted } from \"../util\";\nimport * as styles from \"./pagination.styles\";\nimport type { PageSizeItemProps, PaginationProps } from \"./types\";\n\nconst Component = (\n    {\n        id,\n        \"data-testid\": dataTestId,\n        className,\n        pageSize = 10,\n        totalItems,\n        activePage,\n        pageSizeOptions = DEFAULT_OPTIONS,\n        showFirstAndLastNav,\n        showPageSizeChanger = false,\n        onPageChange,\n        onPageSizeChange,\n    }: PaginationProps,\n    ref: React.Ref<HTMLDivElement>\n) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n\n    const isMounted = useIsMounted();\n    const isMobile = useMaxWidthMediaQuery(\"sm\");\n    const [hoverRightButton, setHoverRightButton] = useState(false);\n    const [hoverLeftButton, setHoverLeftButton] = useState(false);\n    const [inputText, setInputText] = useState<string>(\"\");\n\n    const [selectedOption, setSelectedOption] = useState<\n        PageSizeItemProps | undefined\n    >(pageSizeOptions[0]);\n    const [pageSizeLocal, setPageSize] = useState<number>(\n        !isMobile && showPageSizeChanger\n            ? selectedOption\n                ? selectedOption.value\n                : pageSize\n            : pageSize\n    );\n\n    const boundaryRange = 1;\n    const siblingRange = 1;\n\n    const internalId = useId();\n    const paginationId = `${internalId}-pagination`;\n\n    const totalPages = Math.ceil(totalItems / pageSizeLocal);\n    const isFirstPage = activePage === 1;\n    const isLastPage = activePage === totalPages;\n\n    const firstPaginationItem =\n        activePage > 1 ? () => handlePaginationItemClick(1) : undefined;\n    const lastPaginationItem =\n        activePage < totalPages\n            ? () => handlePaginationItemClick(totalPages)\n            : undefined;\n    const prevPaginationItem =\n        activePage > 1\n            ? () => handlePaginationItemClick(activePage - 1)\n            : undefined;\n    const nextPaginationItem =\n        activePage < totalPages\n            ? () =>\n                  handlePaginationItemClick(parseInt(activePage.toString()) + 1)\n            : undefined;\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        if (activePage) {\n            setInputValue(activePage);\n        }\n    }, [activePage]);\n\n    useEffect(() => {\n        setPageSize(pageSize);\n        setSelectedOption(\n            pageSizeOptions.find((option) => option.value === pageSize)\n        );\n        // eslint-disable-next-line react-hooks/exhaustive-deps\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};\n// @catalog\n/**\n * A navigation control for moving through paged content.\n *\n * Use `Pagination` to let users navigate between pages of a data set.\n * @keywords navigation, pager, pages\n */\nexport const Pagination = React.forwardRef(Component);\n\nconst DEFAULT_OPTIONS: PageSizeItemProps[] = [\n    { value: 10, label: \"10 per page\" },\n    { value: 20, label: \"20 per page\" },\n    { value: 30, label: \"30 per page\" },\n];\n"],"names":["Pagination","React","forwardRef","id","dataTestId","className","pageSize","totalItems","activePage","pageSizeOptions","DEFAULT_OPTIONS","showFirstAndLastNav","showPageSizeChanger","onPageChange","onPageSizeChange","ref","isMounted","useIsMounted","isMobile","useMaxWidthMediaQuery","hoverRightButton","setHoverRightButton","useState","hoverLeftButton","setHoverLeftButton","inputText","setInputText","selectedOption","setSelectedOption","pageSizeLocal","setPageSize","value","paginationId","useId","totalPages","Math","ceil","isFirstPage","isLastPage","firstPaginationItem","handlePaginationItemClick","undefined","lastPaginationItem","prevPaginationItem","nextPaginationItem","parseInt","toString","useEffect","setInputValue","find","option","closeAllTooltips","pageIndex","handleFastForwardClick","currentIndex","min","handleFastBackwardClick","max","handleInput","event","target","length","test","newPage","replace","handleInputSubmit","preventDefault","onHoverRightButton","onBlurRightButton","onHoverLeftButton","onBlurLeftButton","renderStartEllipsis","_jsxs","styles.ellipsisContainer","children","_jsx","ClickableIcon","styles.iconButton","focusHighlight","focusOutline","onMouseEnter","onMouseLeave","onFocus","onBlur","onClick","Chevron2LeftIcon","EllipsisHorizontalIcon","styles.hover","renderEndEllipsis","Chevron2RightIcon","clsx","styles.paginationWrapper","VisuallyHidden","styles.paginationList","styles.paginationMenu","styles.iconButtonNavigation","disabled","ChevronLineLeftIcon","ChevronLeftIcon","styles.paginationMobileInput","onSubmit","Input","styles.inputView","onChange","autoComplete","type","Typography","BodyBL","styles.labelDivider","styles.label","Array","map","e","i","endRange","boundaryRange","active","styles.pageItem","styles.pageItemSelected","onMouseOver","ChevronRightIcon","ChevronLineRightIcon","styles.inputSelectWrapper","InputSelect","options","valueExtractor","item","listExtractor","label","displayValueExtractor","onSelectOption","pagesize","totalPage"],"mappings":"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"}