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

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 clsx from \"clsx\";\nimport type React from \"react\";\nimport { useEffect, useRef, useState } from \"react\";\nimport ReactDOM from \"react-dom\";\n\nimport { useApplyStyle, useInheritedThemeScope } from \"../theme\";\nimport { useId } from \"../util\";\nimport * as styles from \"./overlay.styles\";\nimport type { OverlayProps } from \"./types\";\nimport { useFloatingParent } from \"./use-floating-context\";\n\nconst OverlayComponent = ({\n    show = false,\n    rootId,\n    onOverlayClick,\n    children,\n    backgroundOpacity: _backgroundOpacity,\n    backgroundBlur = true,\n    disableTransition = false,\n    enableOverlayClick = false,\n    zIndex: customZIndex,\n    id,\n    containerRef,\n}: OverlayProps): JSX.Element | null => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [rootElement, setRootElement] = useState<HTMLElement | null>(null);\n    const [isStacked, _setIsStacked] = useState<boolean>();\n    const uid = useId();\n    const nodeId = useFloatingNodeId();\n\n    const stacked = useRef<boolean>();\n    // Track where mousedown started to prevent closing drawer during text selection drag\n    const mouseDownInsideModalRef = useRef(false);\n    const rootRef = useRef<HTMLDivElement>(null);\n    const wrapperRef = useRef<HTMLDivElement>(null);\n\n    const overlayRootId = id\n        ? `lifesg-ds-overlay-root-${id}`\n        : \"lifesg-ds-overlay-root\";\n    const zIndex = customZIndex ?? (isStacked ? 99999 : 99998);\n    const { themeProps, themeStyle } = useInheritedThemeScope(show);\n\n    useFloatingParent(zIndex);\n\n    useApplyStyle(rootRef, { [styles.tokens.root.zIndex]: zIndex });\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        initialiseStylesForDocumentBody();\n        setRootElement(getRootElement());\n\n        return () => {\n            removeOverlay();\n\n            if (getOverlayOrder().length < 1) {\n                if (isIOS()) {\n                    applyScrollLockClassForIOS(\"remove\");\n                    scrollToLastScrollPositionForIOS();\n                }\n\n                applyBodyStyleClass(\"remove\");\n            }\n        };\n    }, []);\n\n    useEffect(() => {\n        if (show) {\n            const isStacked = checkIfStacked();\n            setStacked(isStacked);\n\n            addOverlay();\n\n            if (isIOS() && getOverlayOrder().length === 1) {\n                saveScrollPosition();\n                applyScrollLockClassForIOS(\"add\");\n            }\n\n            const timerId = setTimeout(() => {\n                applyBodyStyleClass(\"add\");\n            }, 200); // Allow overlay animations to complete\n\n            return () => clearTimeout(timerId);\n        } else {\n            removeOverlay();\n\n            if (isIOS() && getOverlayOrder().length < 1) {\n                applyScrollLockClassForIOS(\"remove\");\n                scrollToLastScrollPositionForIOS();\n            }\n\n            const timerId = setTimeout(() => {\n                if (getOverlayOrder().length < 1) {\n                    applyBodyStyleClass(\"remove\");\n                }\n            }, 200); // Allow overlay animations to complete\n\n            return () => clearTimeout(timerId);\n        }\n    }, [show]);\n\n    // Track mousedown origin to distinguish clicks from text selection drags\n    useEffect(() => {\n        if (!show) return;\n\n        document.addEventListener(\"mousedown\", handleDocumentMouseDown, true);\n        return () => {\n            document.removeEventListener(\n                \"mousedown\",\n                handleDocumentMouseDown,\n                true\n            );\n        };\n    }, [show]);\n\n    // =============================================================================\n    // REF FUNCTIONS\n    // =============================================================================\n    const setStacked = (data: boolean) => {\n        stacked.current = data;\n        _setIsStacked(data);\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const isIOS = () => /(iPad|iPhone|iPod)/g.test(navigator.userAgent);\n\n    const getRootElement = (): HTMLElement | null => {\n        if (document && rootId) {\n            return document.getElementById(rootId);\n        } else if (document) {\n            // If rootId not specified, we'll use body\n            return document.body;\n        } else {\n            return null;\n        }\n    };\n\n    const checkIfStacked = () => {\n        return getOverlayOrder().length > 0;\n    };\n\n    const initialiseStylesForDocumentBody = () => {\n        const documentWidth = document.documentElement.clientWidth;\n        const windowWidth = window.innerWidth;\n        const scrollBarWidth = windowWidth - documentWidth;\n\n        document.documentElement.style.setProperty(\n            styles.tokens.global.scrollbarWidth,\n            `${scrollBarWidth}px`\n        );\n    };\n\n    /**\n     * This sets the style of <body> to hide the scrollbar\n     */\n    const applyBodyStyleClass = (action: \"add\" | \"remove\") => {\n        const isOverlayStyleClassApplied = document.body.classList.contains(\n            styles.tokens.global.overlayOpenClass\n        );\n\n        if (action === \"add\" && !isOverlayStyleClassApplied) {\n            document.body.classList.add(styles.tokens.global.overlayOpenClass);\n        } else if (action === \"remove\" && isOverlayStyleClassApplied) {\n            document.body.classList.remove(\n                styles.tokens.global.overlayOpenClass\n            );\n        }\n    };\n\n    const getOverlayOrder = () => {\n        const attr = document.body.dataset.lifesgDsOverlayOrder;\n        return attr ? attr.split(\",\") : [];\n    };\n\n    const addOverlay = () => {\n        const order = getOverlayOrder();\n        document.body.dataset.lifesgDsOverlayOrder = [...order, uid].join(\",\");\n    };\n\n    const removeOverlay = () => {\n        const order = getOverlayOrder();\n        document.body.dataset.lifesgDsOverlayOrder = order\n            .filter((o) => o !== uid)\n            .join(\",\");\n    };\n\n    /**\n     * This sets the style of <body> to further prevent scrolling on iOS\n     *\n     * ref: https://stackoverflow.com/a/57455820/3932279\n     * `overflow: hidden` and `overscroll-behavior` is ignored by iOS, this is\n     * an alternative solution\n     *\n     * as a side effect this causes the scroll position to reset, so additional\n     * logic to restore the scroll on close is required\n     */\n    const applyScrollLockClassForIOS = (action: \"add\" | \"remove\") => {\n        if (!isIOS()) {\n            return;\n        }\n\n        const isClassApplied = document.body.classList.contains(\n            styles.tokens.global.overlayScrollLockClass\n        );\n\n        if (action === \"add\" && !isClassApplied) {\n            document.body.classList.add(\n                styles.tokens.global.overlayScrollLockClass\n            );\n        } else if (action === \"remove\" && isClassApplied) {\n            document.body.classList.remove(\n                styles.tokens.global.overlayScrollLockClass\n            );\n        }\n    };\n\n    const saveScrollPosition = () => {\n        const bodyStyle = document.body.style;\n        const scrollY = bodyStyle.top ? bodyStyle.top : window.scrollY + \"px\";\n\n        document.body.style.setProperty(styles.tokens.global.scrollY, scrollY);\n    };\n\n    const scrollToLastScrollPositionForIOS = () => {\n        if (!isIOS()) {\n            return;\n        }\n\n        const scrollY = document.body.style.getPropertyValue(\n            styles.tokens.global.scrollY\n        );\n        requestAnimationFrame(() => {\n            window.scrollTo({\n                top: parseFloat(scrollY),\n            });\n        });\n    };\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleDocumentMouseDown = (e: MouseEvent) => {\n        const container = containerRef?.current ?? wrapperRef.current;\n        const wrapper = wrapperRef.current;\n        if (!container) {\n            mouseDownInsideModalRef.current = false;\n            return;\n        }\n\n        const target = e.target as Node;\n        const clickedOnWrapper = wrapper === target;\n        const clickedOnContainer = container === target;\n        const clickedInsideContainer = container.contains(target);\n\n        // Track if mousedown started inside modal content\n        mouseDownInsideModalRef.current =\n            !clickedOnWrapper && (clickedOnContainer || clickedInsideContainer);\n    };\n\n    const handleWrapperClick = (event: React.MouseEvent<HTMLDivElement>) => {\n        const container = containerRef?.current ?? wrapperRef.current;\n        const wrapper = wrapperRef.current;\n        if (!container) {\n            mouseDownInsideModalRef.current = false;\n            return;\n        }\n\n        const target = event.target as Node;\n        const clickedOnWrapper = wrapper === target;\n        const clickedOnContainer = container === target;\n        const clickedInsideContainer = container.contains(target);\n        const clickedInsideModal = clickedOnContainer || clickedInsideContainer;\n\n        // Only close if both mousedown AND click happened outside modal\n        if (\n            (clickedOnWrapper || !clickedInsideModal) &&\n            !mouseDownInsideModalRef.current &&\n            onOverlayClick &&\n            enableOverlayClick\n        ) {\n            event.preventDefault();\n            onOverlayClick();\n        }\n\n        mouseDownInsideModalRef.current = false;\n    };\n\n    // =============================================================================\n    // RENDER\n    // =============================================================================\n    const renderWrapper = () => (\n        <FloatingNode id={nodeId}>\n            <div\n                ref={wrapperRef}\n                data-testid=\"overlay-wrapper\"\n                className={clsx(\n                    styles.wrapper,\n                    show ? styles.wrapperShow : styles.wrapperHide,\n                    isStacked && styles.wrapperStacked,\n                    backgroundBlur && styles.wrapperBackgroundBlur,\n                    disableTransition && styles.wrapperDisableTransition\n                )}\n                onClick={handleWrapperClick}\n            >\n                {children}\n            </div>\n        </FloatingNode>\n    );\n\n    const renderComponent = () => (\n        <div\n            ref={rootRef}\n            id={overlayRootId}\n            data-testid={overlayRootId}\n            className={clsx(styles.root, show && styles.rootShow)}\n            {...themeProps}\n            style={themeStyle}\n        >\n            {children && renderWrapper()}\n        </div>\n    );\n\n    return rootElement\n        ? ReactDOM.createPortal(renderComponent(), rootElement)\n        : null;\n};\n\nexport const Overlay = (props: OverlayProps) => {\n    return (\n        <FloatingTree>\n            <OverlayComponent {...props} />\n        </FloatingTree>\n    );\n};\n"],"names":["OverlayComponent","show","rootId","onOverlayClick","children","backgroundOpacity","_backgroundOpacity","backgroundBlur","disableTransition","enableOverlayClick","zIndex","customZIndex","id","containerRef","rootElement","setRootElement","useState","isStacked","_setIsStacked","uid","useId","nodeId","useFloatingNodeId","stacked","useRef","mouseDownInsideModalRef","rootRef","wrapperRef","overlayRootId","themeProps","themeStyle","useInheritedThemeScope","useFloatingParent","useApplyStyle","styles.tokens","root","useEffect","initialiseStylesForDocumentBody","getRootElement","removeOverlay","getOverlayOrder","length","isIOS","applyScrollLockClassForIOS","scrollToLastScrollPositionForIOS","applyBodyStyleClass","checkIfStacked","setStacked","addOverlay","saveScrollPosition","timerId","setTimeout","clearTimeout","document","addEventListener","handleDocumentMouseDown","removeEventListener","data","current","test","navigator","userAgent","getElementById","body","documentWidth","documentElement","clientWidth","scrollBarWidth","window","innerWidth","style","setProperty","global","scrollbarWidth","action","isOverlayStyleClassApplied","classList","contains","overlayOpenClass","remove","add","attr","dataset","lifesgDsOverlayOrder","split","order","join","filter","o","isClassApplied","overlayScrollLockClass","bodyStyle","scrollY","top","getPropertyValue","requestAnimationFrame","scrollTo","parseFloat","e","container","_a","wrapper","target","clickedOnWrapper","clickedOnContainer","clickedInsideContainer","handleWrapperClick","event","preventDefault","ReactDOM","createPortal","_jsx","Object","assign","ref","className","clsx","styles.root","styles.rootShow","FloatingNode","styles.wrapper","styles.wrapperShow","styles.wrapperHide","styles.wrapperStacked","styles.wrapperBackgroundBlur","styles.wrapperDisableTransition","onClick","props","FloatingTree"],"mappings":"qyBAgBA,MAAMA,EAAmB,EACrBC,QAAO,EACPC,SACAC,iBACAC,WACAC,kBAAmBC,EACnBC,kBAAiB,EACjBC,qBAAoB,EACpBC,sBAAqB,EACrBC,OAAQC,EACRC,KACAC,mBAKA,MAAOC,EAAaC,GAAkBC,EAAAA,SAA6B,OAC5DC,EAAWC,GAAiBF,aAC7BG,EAAMC,EAAAA,QACNC,EAASC,EAAAA,oBAETC,EAAUC,EAAAA,SAEVC,EAA0BD,EAAAA,QAAO,GACjCE,EAAUF,EAAAA,OAAuB,MACjCG,EAAaH,EAAAA,OAAuB,MAEpCI,EAAgBhB,EAChB,0BAA0BA,IAC1B,yBACAF,EAASC,QAAAA,EAAiBM,EAAY,MAAQ,OAC9CY,WAAEA,EAAUC,WAAEA,GAAeC,EAAAA,uBAAuB9B,GAE1D+B,EAAAA,kBAAkBtB,GAElBuB,EAAAA,cAAcP,EAAS,CAAE,CAACQ,EAAAA,OAAcC,KAAKzB,QAASA,IAKtD0B,EAAAA,WAAU,KACNC,IACAtB,EAAeuB,KAER,KACHC,IAEIC,IAAkBC,OAAS,IACvBC,MACAC,EAA2B,UAC3BC,KAGJC,EAAoB,UACxB,IAEL,IAEHT,EAAAA,WAAU,KACN,GAAInC,EAAM,CACN,MAAMgB,EAAY6B,IAClBC,EAAW9B,GAEX+B,IAEIN,KAAwC,IAA7BF,IAAkBC,SAC7BQ,IACAN,EAA2B,QAG/B,MAAMO,EAAUC,YAAW,KACvBN,EAAoB,MAAM,GAC3B,KAEH,MAAO,IAAMO,aAAaF,EAC9B,CAAO,CACHX,IAEIG,KAAWF,IAAkBC,OAAS,IACtCE,EAA2B,UAC3BC,KAGJ,MAAMM,EAAUC,YAAW,KACnBX,IAAkBC,OAAS,GAC3BI,EAAoB,SACxB,GACD,KAEH,MAAO,IAAMO,aAAaF,EAC9B,IACD,CAACjD,IAGJmC,EAAAA,WAAU,KACN,GAAKnC,EAGL,OADAoD,SAASC,iBAAiB,YAAaC,GAAyB,GACzD,KACHF,SAASG,oBACL,YACAD,GACA,EACH,CACJ,GACF,CAACtD,IAKJ,MAAM8C,EAAcU,IAChBlC,EAAQmC,QAAUD,EAClBvC,EAAcuC,EAAK,EAMjBf,EAAQ,IAAM,sBAAsBiB,KAAKC,UAAUC,WAEnDvB,EAAiB,IACfe,UAAYnD,EACLmD,SAASS,eAAe5D,GACxBmD,SAEAA,SAASU,KAET,KAITjB,EAAiB,IACZN,IAAkBC,OAAS,EAGhCJ,EAAkC,KACpC,MAAM2B,EAAgBX,SAASY,gBAAgBC,YAEzCC,EADcC,OAAOC,WACUL,EAErCX,SAASY,gBAAgBK,MAAMC,YAC3BrC,EAAAA,OAAcsC,OAAOC,eACrB,GAAGN,MACN,EAMCtB,EAAuB6B,IACzB,MAAMC,EAA6BtB,SAASU,KAAKa,UAAUC,SACvD3C,EAAAA,OAAcsC,OAAOM,kBAGV,QAAXJ,GAAqBC,EAEH,WAAXD,GAAuBC,GAC9BtB,SAASU,KAAKa,UAAUG,OACpB7C,EAAAA,OAAcsC,OAAOM,kBAHzBzB,SAASU,KAAKa,UAAUI,IAAI9C,EAAAA,OAAcsC,OAAOM,iBAKrD,EAGEtC,EAAkB,KACpB,MAAMyC,EAAO5B,SAASU,KAAKmB,QAAQC,qBACnC,OAAOF,EAAOA,EAAKG,MAAM,KAAO,EAAE,EAGhCpC,EAAa,KACf,MAAMqC,EAAQ7C,IACda,SAASU,KAAKmB,QAAQC,qBAAuB,IAAIE,EAAOlE,GAAKmE,KAAK,IAAI,EAGpE/C,EAAgB,KAClB,MAAM8C,EAAQ7C,IACda,SAASU,KAAKmB,QAAQC,qBAAuBE,EACxCE,QAAQC,GAAMA,IAAMrE,IACpBmE,KAAK,IAAI,EAaZ3C,EAA8B+B,IAChC,IAAKhC,IACD,OAGJ,MAAM+C,EAAiBpC,SAASU,KAAKa,UAAUC,SAC3C3C,EAAAA,OAAcsC,OAAOkB,wBAGV,QAAXhB,GAAqBe,EAIH,WAAXf,GAAuBe,GAC9BpC,SAASU,KAAKa,UAAUG,OACpB7C,EAAAA,OAAcsC,OAAOkB,wBALzBrC,SAASU,KAAKa,UAAUI,IACpB9C,EAAAA,OAAcsC,OAAOkB,uBAM7B,EAGEzC,EAAqB,KACvB,MAAM0C,EAAYtC,SAASU,KAAKO,MAC1BsB,EAAUD,EAAUE,IAAMF,EAAUE,IAAMzB,OAAOwB,QAAU,KAEjEvC,SAASU,KAAKO,MAAMC,YAAYrC,EAAAA,OAAcsC,OAAOoB,QAASA,EAAQ,EAGpEhD,EAAmC,KACrC,IAAKF,IACD,OAGJ,MAAMkD,EAAUvC,SAASU,KAAKO,MAAMwB,iBAChC5D,EAAAA,OAAcsC,OAAOoB,SAEzBG,uBAAsB,KAClB3B,OAAO4B,SAAS,CACZH,IAAKI,WAAWL,IAClB,GACJ,EAMArC,EAA2B2C,UAC7B,MAAMC,EAAiC,QAArBC,EAAAvF,aAAY,EAAZA,EAAc6C,eAAO,IAAA0C,EAAAA,EAAIzE,EAAW+B,QAChD2C,EAAU1E,EAAW+B,QAC3B,IAAKyC,EAED,YADA1E,EAAwBiC,SAAU,GAItC,MAAM4C,EAASJ,EAAEI,OACXC,EAAmBF,IAAYC,EAC/BE,EAAqBL,IAAcG,EACnCG,EAAyBN,EAAUtB,SAASyB,GAGlD7E,EAAwBiC,SACnB6C,IAAqBC,GAAsBC,EAAuB,EAGrEC,EAAsBC,UACxB,MAAMR,EAAiC,QAArBC,EAAAvF,aAAY,EAAZA,EAAc6C,eAAO,IAAA0C,EAAAA,EAAIzE,EAAW+B,QAChD2C,EAAU1E,EAAW+B,QAC3B,IAAKyC,EAED,YADA1E,EAAwBiC,SAAU,GAItC,MAAM4C,EAASK,EAAML,OACfC,EAAmBF,IAAYC,EAC/BE,EAAqBL,IAAcG,EACnCG,EAAyBN,EAAUtB,SAASyB,IAK7CC,IAJsBC,GAAsBC,IAK5ChF,EAAwBiC,UACzBvD,IACAM,IAEAkG,EAAMC,iBACNzG,KAGJsB,EAAwBiC,SAAU,CAAK,EAsC3C,OAAO5C,EACD+F,UAASC,aAbXC,EAAAA,IAAA,MAAAC,OAAAC,OAAA,CACIC,IAAKxF,EACLd,GAAIgB,EAAa,cACJA,EACbuF,UAAWC,EAAAA,QAAKC,EAAAA,KAAapH,GAAQqH,aACjCzF,EAAU,CACdyC,MAAOxC,WAEN1B,GA3BL2G,EAAAA,IAACQ,EAAAA,aAAY,CAAC3G,GAAIS,EAAMjB,SACpB2G,EAAAA,WACIG,IAAKvF,EAAU,cACH,kBACZwF,UAAWC,EAAAA,QACPI,EAAAA,QACAvH,EAAOwH,EAAAA,YAAqBC,EAAAA,YAC5BzG,GAAa0G,EAAAA,eACbpH,GAAkBqH,wBAClBpH,GAAqBqH,EAAAA,0BAEzBC,QAASpB,EAAkBtG,SAE1BA,SAmBkCU,GACzC,IAAI,kBAGUiH,GAEhBhB,MAACiB,EAAAA,aAAY,CAAA5H,SACT2G,EAAAA,IAAC/G,EAAgBgH,OAAAC,OAAA,CAAA,EAAKc"}
+{"version":3,"file":"overlay.js","sources":["../../../src/overlay/overlay.tsx"],"sourcesContent":["import {\n    FloatingNode,\n    FloatingTree,\n    useFloatingNodeId,\n} from \"@floating-ui/react\";\nimport clsx from \"clsx\";\nimport type React from \"react\";\nimport { useEffect, useRef, useState } from \"react\";\nimport ReactDOM from \"react-dom\";\n\nimport { useApplyStyle, useInheritedThemeScope } from \"../theme\";\nimport { useId } from \"../util\";\nimport * as styles from \"./overlay.styles\";\nimport type { OverlayProps } from \"./types\";\nimport { useFloatingParent } from \"./use-floating-context\";\n\nconst OverlayComponent = ({\n    show = false,\n    rootId,\n    onOverlayClick,\n    children,\n    backgroundOpacity: _backgroundOpacity,\n    backgroundBlur = true,\n    disableTransition = false,\n    enableOverlayClick = false,\n    zIndex: customZIndex,\n    id,\n    containerRef,\n}: OverlayProps): JSX.Element | null => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [rootElement, setRootElement] = useState<HTMLElement | null>(null);\n    const [isStacked, _setIsStacked] = useState<boolean>();\n    const uid = useId();\n    const nodeId = useFloatingNodeId();\n\n    const stacked = useRef<boolean>();\n    // Track where mousedown started to prevent closing drawer during text selection drag\n    const mouseDownInsideModalRef = useRef(false);\n    const rootRef = useRef<HTMLDivElement>(null);\n    const wrapperRef = useRef<HTMLDivElement>(null);\n\n    const overlayRootId = id\n        ? `lifesg-ds-overlay-root-${id}`\n        : \"lifesg-ds-overlay-root\";\n    const zIndex = customZIndex ?? (isStacked ? 99999 : 99998);\n    const { themeProps, themeStyle } = useInheritedThemeScope(show);\n\n    useFloatingParent(zIndex);\n\n    useApplyStyle(rootRef, { [styles.tokens.root.zIndex]: zIndex });\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        initialiseStylesForDocumentBody();\n        setRootElement(getRootElement());\n\n        return () => {\n            removeOverlay();\n\n            if (getOverlayOrder().length < 1) {\n                if (isIOS()) {\n                    applyScrollLockClassForIOS(\"remove\");\n                    scrollToLastScrollPositionForIOS();\n                }\n\n                applyBodyStyleClass(\"remove\");\n            }\n        };\n    }, []);\n\n    useEffect(() => {\n        if (show) {\n            const isStacked = checkIfStacked();\n            setStacked(isStacked);\n\n            addOverlay();\n\n            if (isIOS() && getOverlayOrder().length === 1) {\n                saveScrollPosition();\n                applyScrollLockClassForIOS(\"add\");\n            }\n\n            const timerId = setTimeout(() => {\n                applyBodyStyleClass(\"add\");\n            }, 200); // Allow overlay animations to complete\n\n            return () => clearTimeout(timerId);\n        } else {\n            removeOverlay();\n\n            if (isIOS() && getOverlayOrder().length < 1) {\n                applyScrollLockClassForIOS(\"remove\");\n                scrollToLastScrollPositionForIOS();\n            }\n\n            const timerId = setTimeout(() => {\n                if (getOverlayOrder().length < 1) {\n                    applyBodyStyleClass(\"remove\");\n                }\n            }, 200); // Allow overlay animations to complete\n\n            return () => clearTimeout(timerId);\n        }\n    }, [show]);\n\n    // Track mousedown origin to distinguish clicks from text selection drags\n    useEffect(() => {\n        if (!show) return;\n\n        document.addEventListener(\"mousedown\", handleDocumentMouseDown, true);\n        return () => {\n            document.removeEventListener(\n                \"mousedown\",\n                handleDocumentMouseDown,\n                true\n            );\n        };\n    }, [show]);\n\n    // =============================================================================\n    // REF FUNCTIONS\n    // =============================================================================\n    const setStacked = (data: boolean) => {\n        stacked.current = data;\n        _setIsStacked(data);\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const isIOS = () => /(iPad|iPhone|iPod)/g.test(navigator.userAgent);\n\n    const getRootElement = (): HTMLElement | null => {\n        if (document && rootId) {\n            return document.getElementById(rootId);\n        } else if (document) {\n            // If rootId not specified, we'll use body\n            return document.body;\n        } else {\n            return null;\n        }\n    };\n\n    const checkIfStacked = () => {\n        return getOverlayOrder().length > 0;\n    };\n\n    const initialiseStylesForDocumentBody = () => {\n        const documentWidth = document.documentElement.clientWidth;\n        const windowWidth = window.innerWidth;\n        const scrollBarWidth = windowWidth - documentWidth;\n\n        document.documentElement.style.setProperty(\n            styles.tokens.global.scrollbarWidth,\n            `${scrollBarWidth}px`\n        );\n    };\n\n    /**\n     * This sets the style of <body> to hide the scrollbar\n     */\n    const applyBodyStyleClass = (action: \"add\" | \"remove\") => {\n        const isOverlayStyleClassApplied = document.body.classList.contains(\n            styles.tokens.global.overlayOpenClass\n        );\n\n        if (action === \"add\" && !isOverlayStyleClassApplied) {\n            document.body.classList.add(styles.tokens.global.overlayOpenClass);\n        } else if (action === \"remove\" && isOverlayStyleClassApplied) {\n            document.body.classList.remove(\n                styles.tokens.global.overlayOpenClass\n            );\n        }\n    };\n\n    const getOverlayOrder = () => {\n        const attr = document.body.dataset.lifesgDsOverlayOrder;\n        return attr ? attr.split(\",\") : [];\n    };\n\n    const addOverlay = () => {\n        const order = getOverlayOrder();\n        document.body.dataset.lifesgDsOverlayOrder = [...order, uid].join(\",\");\n    };\n\n    const removeOverlay = () => {\n        const order = getOverlayOrder();\n        document.body.dataset.lifesgDsOverlayOrder = order\n            .filter((o) => o !== uid)\n            .join(\",\");\n    };\n\n    /**\n     * This sets the style of <body> to further prevent scrolling on iOS\n     *\n     * ref: https://stackoverflow.com/a/57455820/3932279\n     * `overflow: hidden` and `overscroll-behavior` is ignored by iOS, this is\n     * an alternative solution\n     *\n     * as a side effect this causes the scroll position to reset, so additional\n     * logic to restore the scroll on close is required\n     */\n    const applyScrollLockClassForIOS = (action: \"add\" | \"remove\") => {\n        if (!isIOS()) {\n            return;\n        }\n\n        const isClassApplied = document.body.classList.contains(\n            styles.tokens.global.overlayScrollLockClass\n        );\n\n        if (action === \"add\" && !isClassApplied) {\n            document.body.classList.add(\n                styles.tokens.global.overlayScrollLockClass\n            );\n        } else if (action === \"remove\" && isClassApplied) {\n            document.body.classList.remove(\n                styles.tokens.global.overlayScrollLockClass\n            );\n        }\n    };\n\n    const saveScrollPosition = () => {\n        const bodyStyle = document.body.style;\n        const scrollY = bodyStyle.top ? bodyStyle.top : window.scrollY + \"px\";\n\n        document.body.style.setProperty(styles.tokens.global.scrollY, scrollY);\n    };\n\n    const scrollToLastScrollPositionForIOS = () => {\n        if (!isIOS()) {\n            return;\n        }\n\n        const scrollY = document.body.style.getPropertyValue(\n            styles.tokens.global.scrollY\n        );\n        requestAnimationFrame(() => {\n            window.scrollTo({\n                top: parseFloat(scrollY),\n            });\n        });\n    };\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleDocumentMouseDown = (e: MouseEvent) => {\n        const container = containerRef?.current ?? wrapperRef.current;\n        const wrapper = wrapperRef.current;\n        if (!container) {\n            mouseDownInsideModalRef.current = false;\n            return;\n        }\n\n        const target = e.target as Node;\n        const clickedOnWrapper = wrapper === target;\n        const clickedOnContainer = container === target;\n        const clickedInsideContainer = container.contains(target);\n\n        // Track if mousedown started inside modal content\n        mouseDownInsideModalRef.current =\n            !clickedOnWrapper && (clickedOnContainer || clickedInsideContainer);\n    };\n\n    const handleWrapperClick = (event: React.MouseEvent<HTMLDivElement>) => {\n        const container = containerRef?.current ?? wrapperRef.current;\n        const wrapper = wrapperRef.current;\n        if (!container) {\n            mouseDownInsideModalRef.current = false;\n            return;\n        }\n\n        const target = event.target as Node;\n        const clickedOnWrapper = wrapper === target;\n        const clickedOnContainer = container === target;\n        const clickedInsideContainer = container.contains(target);\n        const clickedInsideModal = clickedOnContainer || clickedInsideContainer;\n\n        // Only close if both mousedown AND click happened outside modal\n        if (\n            (clickedOnWrapper || !clickedInsideModal) &&\n            !mouseDownInsideModalRef.current &&\n            onOverlayClick &&\n            enableOverlayClick\n        ) {\n            event.preventDefault();\n            onOverlayClick();\n        }\n\n        mouseDownInsideModalRef.current = false;\n    };\n\n    // =============================================================================\n    // RENDER\n    // =============================================================================\n    const renderWrapper = () => (\n        <FloatingNode id={nodeId}>\n            <div\n                ref={wrapperRef}\n                data-testid=\"overlay-wrapper\"\n                className={clsx(\n                    styles.wrapper,\n                    show ? styles.wrapperShow : styles.wrapperHide,\n                    isStacked && styles.wrapperStacked,\n                    backgroundBlur && styles.wrapperBackgroundBlur,\n                    disableTransition && styles.wrapperDisableTransition\n                )}\n                onClick={handleWrapperClick}\n            >\n                {children}\n            </div>\n        </FloatingNode>\n    );\n\n    const renderComponent = () => (\n        <div\n            ref={rootRef}\n            id={overlayRootId}\n            data-testid={overlayRootId}\n            className={clsx(styles.root, show && styles.rootShow)}\n            {...themeProps}\n            style={themeStyle}\n        >\n            {children && renderWrapper()}\n        </div>\n    );\n\n    return rootElement\n        ? ReactDOM.createPortal(renderComponent(), rootElement)\n        : null;\n};\n\nexport const Overlay = (props: OverlayProps) => {\n    return (\n        <FloatingTree>\n            <OverlayComponent {...props} />\n        </FloatingTree>\n    );\n};\n"],"names":["OverlayComponent","show","rootId","onOverlayClick","children","backgroundOpacity","_backgroundOpacity","backgroundBlur","disableTransition","enableOverlayClick","zIndex","customZIndex","id","containerRef","rootElement","setRootElement","useState","isStacked","_setIsStacked","uid","useId","nodeId","useFloatingNodeId","stacked","useRef","mouseDownInsideModalRef","rootRef","wrapperRef","overlayRootId","themeProps","themeStyle","useInheritedThemeScope","useFloatingParent","useApplyStyle","styles.tokens","root","useEffect","initialiseStylesForDocumentBody","getRootElement","removeOverlay","getOverlayOrder","length","isIOS","applyScrollLockClassForIOS","scrollToLastScrollPositionForIOS","applyBodyStyleClass","checkIfStacked","setStacked","addOverlay","saveScrollPosition","timerId","setTimeout","clearTimeout","document","addEventListener","handleDocumentMouseDown","removeEventListener","data","current","test","navigator","userAgent","getElementById","body","documentWidth","documentElement","clientWidth","scrollBarWidth","window","innerWidth","style","setProperty","global","scrollbarWidth","action","isOverlayStyleClassApplied","classList","contains","overlayOpenClass","remove","add","attr","dataset","lifesgDsOverlayOrder","split","order","join","filter","o","isClassApplied","overlayScrollLockClass","bodyStyle","scrollY","top","getPropertyValue","requestAnimationFrame","scrollTo","parseFloat","e","container","_a","wrapper","target","clickedOnWrapper","clickedOnContainer","clickedInsideContainer","handleWrapperClick","event","preventDefault","ReactDOM","createPortal","_jsx","Object","assign","ref","className","clsx","styles.root","styles.rootShow","FloatingNode","styles.wrapper","styles.wrapperShow","styles.wrapperHide","styles.wrapperStacked","styles.wrapperBackgroundBlur","styles.wrapperDisableTransition","onClick","props","FloatingTree"],"mappings":"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"}

package/cjs/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"),n=require("@lifesg/react-icons/chevron-left"),t=require("@lifesg/react-icons/chevron-line-left"),r=require("@lifesg/react-icons/chevron-line-right"),s=require("@lifesg/react-icons/chevron-right"),l=require("@lifesg/react-icons/ellipsis-horizontal"),o=require("clsx"),c=require("react"),u=require("../input/input.js"),d=require("../input-select/input-select.js"),h=require("../shared/accessibility/index.js"),p=require("../shared/clickable-icon/clickable-icon.js");require("../theme/theme-provider/index.js"),require("../theme/theme-provider/context.js"),require("../theme/tokens/border.js");var g=require("../theme/tokens/breakpoint.js");require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js");var v=require("../theme/utils/media-query.js");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var f=require("../util/simple-id-generator.js");require("../util/string-helper.js"),require("@react-aria/live-announcer");var j=require("../util/use-mount.js"),m=require("../theme/utils/use-design-token.js"),x=require("../typography/index.js"),b=require("./pagination.styles.js");function q(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var N=q(o);const I=q(c).default.forwardRef((({id:o,"data-testid":q,className:I,pageSize:k=10,totalItems:y,activePage:S,pageSizeOptions:B=C,showFirstAndLastNav:M,showPageSizeChanger:L=!1,onPageChange:w,onPageSizeChange:O},H)=>{const $=j.useIsMounted(),z=m.useDesignToken(g.Breakpoint["sm-max"]),E=v.useSafeMaxWidthMediaQuery(z),[P,F]=c.useState(!1),[R,V]=c.useState(!1),[D,T]=c.useState(""),[W,A]=c.useState(B[0]),[Q,G]=c.useState(!E&&L&&W?W.value:k),J=`${f.useId()}-pagination`,K=Math.ceil(y/Q),U=1===S,X=S===K,Y=S>1?()=>ne(1):void 0,Z=S<K?()=>ne(K):void 0,_=S>1?()=>ne(S-1):void 0,ee=S<K?()=>ne(parseInt(S.toString())+1):void 0;c.useEffect((()=>{S&&ie(S)}),[S]),c.useEffect((()=>{G(k),A(B.find((e=>e.value===k)))}),[k]);const ie=e=>{T(e.toString())},ae=()=>{F(!1),V(!1)},ne=e=>{w&&(w(e),ie(e))},te=()=>{const e=Math.min(K,S+5);ne(e),ie(e),F(!0),V(!1)},re=()=>{const e=Math.max(1,S-5);ne(e),ie(e),F(!1),V(!0)},se=e=>{const i=e.target.value;if(void 0===i||0===i.length)T("");else if(/^[0-9]+$/.test(i)){const e=parseInt(i.replace(/[^0-9]/g,""));ie(Math.max(1,Math.min(K,e)))}else T(i.replace(/[^0-9]/g,""))},le=e=>{e.preventDefault(),D&&(null==w||w(parseInt(D)))},oe=()=>{F(!0)},ce=()=>{F(!1)},ue=()=>{V(!0)},de=()=>{V(!1)},he=a=>e.jsxs("div",{className:b.ellipsisContainer,children:[e.jsx(p.ClickableIcon,{className:b.iconButton,focusHighlight:!1,focusOutline:"browser","aria-label":"Previous 5 pages",onMouseEnter:ue,onMouseLeave:de,onFocus:ue,onBlur:de,onClick:re,children:R?e.jsx(i.Chevron2LeftIcon,{"aria-hidden":!0}):e.jsx(l.EllipsisHorizontalIcon,{"aria-hidden":!0})}),R&&e.jsx("div",{className:b.hover,children:"Previous 5 pages"})]},a),pe=i=>e.jsxs("div",{className:b.ellipsisContainer,children:[e.jsx(p.ClickableIcon,{className:b.iconButton,focusHighlight:!1,focusOutline:"browser","aria-label":"Next 5 pages",onMouseEnter:oe,onMouseLeave:ce,onFocus:oe,onBlur:ce,onClick:te,children:P?e.jsx(a.Chevron2RightIcon,{"aria-hidden":!0}):e.jsx(l.EllipsisHorizontalIcon,{"aria-hidden":!0})}),P&&e.jsx("div",{className:b.hover,children:"Next 5 pages"})]},i);return e.jsxs("nav",{className:N.default(b.paginationWrapper,I),ref:H,id:o||"pagination-wrapper","data-testid":q||"pagination","aria-labelledby":J,children:[e.jsx(h.VisuallyHidden,{id:J,"aria-hidden":!0,children:"pagination"}),e.jsx("div",{className:b.paginationList,children:e.jsxs("div",{className:b.paginationMenu,children:[M&&e.jsx(p.ClickableIcon,{className:N.default(b.iconButton,b.iconButtonNavigation),onClick:Y,disabled:U,focusHighlight:!1,"aria-label":"First page",focusOutline:"browser",children:e.jsx(t.ChevronLineLeftIcon,{"aria-hidden":!0})}),e.jsx(p.ClickableIcon,{className:N.default(b.iconButton,b.iconButtonNavigation),onClick:_,disabled:U,focusHighlight:!1,"aria-label":"Previous page",focusOutline:"browser",children:e.jsx(n.ChevronLeftIcon,{"aria-hidden":!0})}),$&&E?e.jsxs("div",{className:b.paginationMobileInput,children:[e.jsx("form",{onSubmit:le,children:e.jsx(u.Input,{className:b.inputView,value:D,onChange:se,autoComplete:"off",type:"numeric",id:(o||"pagination")+"-input","data-testid":(q||"pagination")+"-input","aria-label":`Page ${S} of ${K}`})}),e.jsx(x.Typography.BodyBL,{className:b.labelDivider,children:"/"}),e.jsx(x.Typography.BodyBL,{className:b.label,children:K})]}):[...Array(K)].map(((i,a)=>{const n=a+1,t=K-5,r=S===n;return K<=7?e.jsx("button",{onClick:()=>ne(n),className:N.default(b.pageItem,r&&b.pageItemSelected),"aria-label":`page ${n} of ${K}`,"aria-current":!!r&&"page",onMouseOver:ae,onFocus:ae,children:n},n):S+1>5&&2===n?he(n):S-1<=t&&n===K-1-1?pe(n):n<=5&&S+1<=5||n<=1||n===S||n<=S+1&&n>=S-1-1||n>t&&S-1>t||n>K-1?e.jsx("button",{onClick:()=>ne(n),className:N.default(b.pageItem,r&&b.pageItemSelected),"aria-label":`page ${n} of ${K}`,"aria-current":!!r&&"page",onMouseOver:ae,onFocus:ae,children:n},n):null})),e.jsx(p.ClickableIcon,{className:N.default(b.iconButton,b.iconButtonNavigation),onClick:ee,disabled:X,focusHighlight:!1,"aria-label":"Next page",focusOutline:"browser",children:e.jsx(s.ChevronRightIcon,{"aria-hidden":!0})}),M&&e.jsx(p.ClickableIcon,{className:N.default(b.iconButton,b.iconButtonNavigation),onClick:Z,disabled:X,focusHighlight:!1,"aria-label":"Last page",focusOutline:"browser",children:e.jsx(r.ChevronLineRightIcon,{"aria-hidden":!0})})]})}),L&&!E&&e.jsxs("div",{className:b.inputSelectWrapper,children:[e.jsx(h.VisuallyHidden,{id:`${J}-page-size`,children:"Items per page"}),e.jsx(d.InputSelect,{"aria-labelledby":`${J}-page-size`,options:B,valueExtractor:e=>e.value,listExtractor:e=>e.label,displayValueExtractor:e=>e.label,selectedOption:W,onSelectOption:e=>{A(e);const i=e.value,a=Math.ceil(y/i);G(i);O&&O(S>=a?a:S,i)}})]})]})})),C=[{value:10,label:"10 per page"},{value:20,label:"20 per page"},{value:30,label:"30 per page"}];exports.Pagination=I;
+"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 clsx from \"clsx\";\nimport React, { useEffect, useState } from \"react\";\n\nimport { Input } from \"../input\";\nimport { InputSelect } from \"../input-select\";\nimport { VisuallyHidden } from \"../shared/accessibility\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport {\n    Breakpoint,\n    useDesignToken,\n    useSafeMaxWidthMediaQuery,\n} from \"../theme\";\nimport { Typography } from \"../typography\";\nimport { useId, useIsMounted } from \"../util\";\nimport * as styles from \"./pagination.styles\";\nimport type { PageSizeItemProps, PaginationProps } from \"./types\";\n\nconst Component = (\n    {\n        id,\n        \"data-testid\": dataTestId,\n        className,\n        pageSize = 10,\n        totalItems,\n        activePage,\n        pageSizeOptions = DEFAULT_OPTIONS,\n        showFirstAndLastNav,\n        showPageSizeChanger = false,\n        onPageChange,\n        onPageSizeChange,\n    }: PaginationProps,\n    ref: React.Ref<HTMLDivElement>\n) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n\n    const isMounted = useIsMounted();\n    const mobileBreakpoint = useDesignToken(Breakpoint[\"sm-max\"]);\n    const isMobile = useSafeMaxWidthMediaQuery(mobileBreakpoint);\n    const [hoverRightButton, setHoverRightButton] = useState(false);\n    const [hoverLeftButton, setHoverLeftButton] = useState(false);\n    const [inputText, setInputText] = useState<string>(\"\");\n\n    const [selectedOption, setSelectedOption] = useState<\n        PageSizeItemProps | undefined\n    >(pageSizeOptions[0]);\n    const [pageSizeLocal, setPageSize] = useState<number>(\n        !isMobile && showPageSizeChanger\n            ? selectedOption\n                ? selectedOption.value\n                : pageSize\n            : pageSize\n    );\n\n    const boundaryRange = 1;\n    const siblingRange = 1;\n\n    const internalId = useId();\n    const paginationId = `${internalId}-pagination`;\n\n    const totalPages = Math.ceil(totalItems / pageSizeLocal);\n    const isFirstPage = activePage === 1;\n    const isLastPage = activePage === totalPages;\n\n    const firstPaginationItem =\n        activePage > 1 ? () => handlePaginationItemClick(1) : undefined;\n    const lastPaginationItem =\n        activePage < totalPages\n            ? () => handlePaginationItemClick(totalPages)\n            : undefined;\n    const prevPaginationItem =\n        activePage > 1\n            ? () => handlePaginationItemClick(activePage - 1)\n            : undefined;\n    const nextPaginationItem =\n        activePage < totalPages\n            ? () =>\n                  handlePaginationItemClick(parseInt(activePage.toString()) + 1)\n            : undefined;\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        if (activePage) {\n            setInputValue(activePage);\n        }\n    }, [activePage]);\n\n    useEffect(() => {\n        setPageSize(pageSize);\n        setSelectedOption(\n            pageSizeOptions.find((option) => option.value === pageSize)\n        );\n    }, [pageSize]);\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const setInputValue = (value: number) => {\n        setInputText(value.toString());\n    };\n\n    const closeAllTooltips = () => {\n        setHoverRightButton(false);\n        setHoverLeftButton(false);\n    };\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handlePaginationItemClick = (pageIndex: number) => {\n        if (onPageChange) {\n            onPageChange(pageIndex);\n            setInputValue(pageIndex);\n        }\n    };\n\n    const handleFastForwardClick = () => {\n        const currentIndex = Math.min(totalPages, activePage + 5);\n        handlePaginationItemClick(currentIndex);\n        setInputValue(currentIndex);\n        setHoverRightButton(true);\n        setHoverLeftButton(false);\n    };\n\n    const handleFastBackwardClick = () => {\n        const currentIndex = Math.max(1, activePage - 5);\n        handlePaginationItemClick(currentIndex);\n        setInputValue(currentIndex);\n        setHoverRightButton(false);\n        setHoverLeftButton(true);\n    };\n\n    const handleInput = (event: React.ChangeEvent<HTMLInputElement>) => {\n        const value = event.target.value;\n        const numericRegex = /^[0-9]+$/;\n        if (value === undefined || value.length === 0) {\n            setInputText(\"\");\n        } else if (!numericRegex.test(value)) {\n            setInputText(value.replace(/[^0-9]/g, \"\"));\n        } else {\n            const newPage = parseInt(value.replace(/[^0-9]/g, \"\"));\n            setInputValue(Math.max(1, Math.min(totalPages, newPage)));\n        }\n    };\n\n    const handleInputSubmit = (event: React.FormEvent) => {\n        event.preventDefault();\n        if (inputText) {\n            onPageChange?.(parseInt(inputText));\n        }\n    };\n\n    const onHoverRightButton = () => {\n        setHoverRightButton(true);\n    };\n\n    const onBlurRightButton = () => {\n        setHoverRightButton(false);\n    };\n\n    const onHoverLeftButton = () => {\n        setHoverLeftButton(true);\n    };\n\n    const onBlurLeftButton = () => {\n        setHoverLeftButton(false);\n    };\n\n    const handleListItemClick = (item: PageSizeItemProps) => {\n        setSelectedOption(item);\n        const pagesize = item.value;\n        const totalPage = Math.ceil(totalItems / pagesize);\n\n        setPageSize(pagesize);\n\n        const page = activePage >= totalPage ? totalPage : activePage;\n\n        if (onPageSizeChange) {\n            onPageSizeChange(page, pagesize);\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderPaginationItems = () => {\n        return [...Array(totalPages)].map((e, i) => {\n            const pageIndex = i + 1;\n            const startRange = boundaryRange + 2 + siblingRange * 2;\n            const endRange = totalPages - startRange;\n            const totalRange = (boundaryRange + siblingRange) * 2 + 3;\n            const active = activePage === pageIndex;\n            if (totalPages <= totalRange) {\n                return (\n                    <button\n                        key={pageIndex}\n                        onClick={() => handlePaginationItemClick(pageIndex)}\n                        className={clsx(\n                            styles.pageItem,\n                            active && styles.pageItemSelected\n                        )}\n                        aria-label={`page ${pageIndex} of ${totalPages}`}\n                        aria-current={active ? \"page\" : false}\n                        onMouseOver={closeAllTooltips}\n                        onFocus={closeAllTooltips}\n                    >\n                        {pageIndex}\n                    </button>\n                );\n            }\n\n            const ellipsisStart =\n                activePage + siblingRange > startRange &&\n                pageIndex === boundaryRange + 1;\n            if (ellipsisStart) {\n                return renderStartEllipsis(pageIndex);\n            }\n\n            const ellipsisEnd =\n                activePage - siblingRange <= endRange &&\n                pageIndex === totalPages - boundaryRange - 1;\n            if (ellipsisEnd) {\n                return renderEndEllipsis(pageIndex);\n            }\n\n            const paginationStart =\n                (pageIndex <= startRange &&\n                    activePage + siblingRange <= startRange) ||\n                pageIndex <= boundaryRange;\n            const paginationMiddle =\n                pageIndex === activePage ||\n                (pageIndex <= activePage + siblingRange &&\n                    pageIndex >= activePage - siblingRange - 1);\n            const paginationEnd =\n                (pageIndex > endRange &&\n                    activePage - siblingRange > endRange) ||\n                pageIndex > totalPages - boundaryRange;\n            if (paginationStart || paginationMiddle || paginationEnd) {\n                return (\n                    <button\n                        key={pageIndex}\n                        onClick={() => handlePaginationItemClick(pageIndex)}\n                        className={clsx(\n                            styles.pageItem,\n                            active && styles.pageItemSelected\n                        )}\n                        aria-label={`page ${pageIndex} of ${totalPages}`}\n                        aria-current={active ? \"page\" : false}\n                        onMouseOver={closeAllTooltips}\n                        onFocus={closeAllTooltips}\n                    >\n                        {pageIndex}\n                    </button>\n                );\n            }\n\n            return null;\n        });\n    };\n\n    const renderStartEllipsis = (pageIndex: number) => (\n        <div key={pageIndex} className={styles.ellipsisContainer}>\n            <ClickableIcon\n                className={styles.iconButton}\n                focusHighlight={false}\n                focusOutline=\"browser\"\n                aria-label={\"Previous 5 pages\"}\n                onMouseEnter={onHoverLeftButton}\n                onMouseLeave={onBlurLeftButton}\n                onFocus={onHoverLeftButton}\n                onBlur={onBlurLeftButton}\n                onClick={handleFastBackwardClick}\n            >\n                {hoverLeftButton ? (\n                    <Chevron2LeftIcon aria-hidden />\n                ) : (\n                    <EllipsisHorizontalIcon aria-hidden />\n                )}\n            </ClickableIcon>\n            {hoverLeftButton && (\n                <div className={styles.hover}>Previous 5 pages</div>\n            )}\n        </div>\n    );\n\n    const renderEndEllipsis = (pageIndex: number) => (\n        <div key={pageIndex} className={styles.ellipsisContainer}>\n            <ClickableIcon\n                className={styles.iconButton}\n                focusHighlight={false}\n                focusOutline=\"browser\"\n                aria-label={\"Next 5 pages\"}\n                onMouseEnter={onHoverRightButton}\n                onMouseLeave={onBlurRightButton}\n                onFocus={onHoverRightButton}\n                onBlur={onBlurRightButton}\n                onClick={handleFastForwardClick}\n            >\n                {hoverRightButton ? (\n                    <Chevron2RightIcon aria-hidden />\n                ) : (\n                    <EllipsisHorizontalIcon aria-hidden />\n                )}\n            </ClickableIcon>\n            {hoverRightButton && (\n                <div className={styles.hover}>Next 5 pages</div>\n            )}\n        </div>\n    );\n\n    const renderMobile = () => (\n        <div className={styles.paginationMobileInput}>\n            <form onSubmit={handleInputSubmit}>\n                <Input\n                    className={styles.inputView}\n                    value={inputText}\n                    onChange={handleInput}\n                    autoComplete=\"off\"\n                    type=\"numeric\"\n                    id={(id || \"pagination\") + \"-input\"}\n                    data-testid={(dataTestId || \"pagination\") + \"-input\"}\n                    aria-label={`Page ${activePage} of ${totalPages}`}\n                />\n            </form>\n            <Typography.BodyBL className={styles.labelDivider}>\n                /\n            </Typography.BodyBL>\n            <Typography.BodyBL className={styles.label}>\n                {totalPages}\n            </Typography.BodyBL>\n        </div>\n    );\n\n    return (\n        <nav\n            className={clsx(styles.paginationWrapper, className)}\n            ref={ref}\n            id={id || \"pagination-wrapper\"}\n            data-testid={dataTestId || \"pagination\"}\n            aria-labelledby={paginationId}\n        >\n            <VisuallyHidden id={paginationId} aria-hidden>\n                pagination\n            </VisuallyHidden>\n            <div className={styles.paginationList}>\n                <div className={styles.paginationMenu}>\n                    {showFirstAndLastNav && (\n                        <ClickableIcon\n                            className={clsx(\n                                styles.iconButton,\n                                styles.iconButtonNavigation\n                            )}\n                            onClick={firstPaginationItem}\n                            disabled={isFirstPage}\n                            focusHighlight={false}\n                            aria-label=\"First page\"\n                            focusOutline=\"browser\"\n                        >\n                            <ChevronLineLeftIcon aria-hidden />\n                        </ClickableIcon>\n                    )}\n                    <ClickableIcon\n                        className={clsx(\n                            styles.iconButton,\n                            styles.iconButtonNavigation\n                        )}\n                        onClick={prevPaginationItem}\n                        disabled={isFirstPage}\n                        focusHighlight={false}\n                        aria-label=\"Previous page\"\n                        focusOutline=\"browser\"\n                    >\n                        <ChevronLeftIcon aria-hidden />\n                    </ClickableIcon>\n                    {isMounted && isMobile\n                        ? renderMobile()\n                        : renderPaginationItems()}\n                    <ClickableIcon\n                        className={clsx(\n                            styles.iconButton,\n                            styles.iconButtonNavigation\n                        )}\n                        onClick={nextPaginationItem}\n                        disabled={isLastPage}\n                        focusHighlight={false}\n                        aria-label=\"Next page\"\n                        focusOutline=\"browser\"\n                    >\n                        <ChevronRightIcon aria-hidden />\n                    </ClickableIcon>\n                    {showFirstAndLastNav && (\n                        <ClickableIcon\n                            className={clsx(\n                                styles.iconButton,\n                                styles.iconButtonNavigation\n                            )}\n                            onClick={lastPaginationItem}\n                            disabled={isLastPage}\n                            focusHighlight={false}\n                            aria-label=\"Last page\"\n                            focusOutline=\"browser\"\n                        >\n                            <ChevronLineRightIcon aria-hidden />\n                        </ClickableIcon>\n                    )}\n                </div>\n            </div>\n            {showPageSizeChanger && !isMobile && (\n                <div className={styles.inputSelectWrapper}>\n                    <VisuallyHidden id={`${paginationId}-page-size`}>\n                        Items per page\n                    </VisuallyHidden>\n                    <InputSelect\n                        aria-labelledby={`${paginationId}-page-size`}\n                        options={pageSizeOptions}\n                        valueExtractor={(item) => item.value}\n                        listExtractor={(item) => item.label}\n                        displayValueExtractor={(item) => item.label}\n                        selectedOption={selectedOption}\n                        onSelectOption={handleListItemClick}\n                    />\n                </div>\n            )}\n        </nav>\n    );\n};\nexport const Pagination = React.forwardRef(Component);\n\nconst DEFAULT_OPTIONS: PageSizeItemProps[] = [\n    { value: 10, label: \"10 per page\" },\n    { value: 20, label: \"20 per page\" },\n    { value: 30, label: \"30 per page\" },\n];\n"],"names":["Pagination","React","forwardRef","id","dataTestId","className","pageSize","totalItems","activePage","pageSizeOptions","DEFAULT_OPTIONS","showFirstAndLastNav","showPageSizeChanger","onPageChange","onPageSizeChange","ref","isMounted","useIsMounted","mobileBreakpoint","useDesignToken","Breakpoint","isMobile","useSafeMaxWidthMediaQuery","hoverRightButton","setHoverRightButton","useState","hoverLeftButton","setHoverLeftButton","inputText","setInputText","selectedOption","setSelectedOption","pageSizeLocal","setPageSize","value","paginationId","useId","totalPages","Math","ceil","isFirstPage","isLastPage","firstPaginationItem","handlePaginationItemClick","undefined","lastPaginationItem","prevPaginationItem","nextPaginationItem","parseInt","toString","useEffect","setInputValue","find","option","closeAllTooltips","pageIndex","handleFastForwardClick","currentIndex","min","handleFastBackwardClick","max","handleInput","event","target","length","test","newPage","replace","handleInputSubmit","preventDefault","onHoverRightButton","onBlurRightButton","onHoverLeftButton","onBlurLeftButton","renderStartEllipsis","_jsxs","styles.ellipsisContainer","children","_jsx","ClickableIcon","styles.iconButton","focusHighlight","focusOutline","onMouseEnter","onMouseLeave","onFocus","onBlur","onClick","Chevron2LeftIcon","EllipsisHorizontalIcon","styles.hover","renderEndEllipsis","Chevron2RightIcon","clsx","styles.paginationWrapper","VisuallyHidden","styles.paginationList","styles.paginationMenu","styles.iconButtonNavigation","disabled","ChevronLineLeftIcon","ChevronLeftIcon","styles.paginationMobileInput","onSubmit","Input","styles.inputView","onChange","autoComplete","type","Typography","BodyBL","styles.labelDivider","styles.label","Array","map","e","i","endRange","boundaryRange","active","styles.pageItem","styles.pageItemSelected","onMouseOver","ChevronRightIcon","ChevronLineRightIcon","styles.inputSelectWrapper","InputSelect","options","valueExtractor","item","listExtractor","label","displayValueExtractor","onSelectOption","pagesize","totalPage"],"mappings":"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"}
+{"version":3,"file":"pagination.js","sources":["../../../src/pagination/pagination.tsx"],"sourcesContent":["import { Chevron2LeftIcon } from \"@lifesg/react-icons/chevron-2-left\";\nimport { Chevron2RightIcon } from \"@lifesg/react-icons/chevron-2-right\";\nimport { ChevronLeftIcon } from \"@lifesg/react-icons/chevron-left\";\nimport { ChevronLineLeftIcon } from \"@lifesg/react-icons/chevron-line-left\";\nimport { ChevronLineRightIcon } from \"@lifesg/react-icons/chevron-line-right\";\nimport { ChevronRightIcon } from \"@lifesg/react-icons/chevron-right\";\nimport { EllipsisHorizontalIcon } from \"@lifesg/react-icons/ellipsis-horizontal\";\nimport clsx from \"clsx\";\nimport React, { useEffect, useState } from \"react\";\n\nimport { Input } from \"../input\";\nimport { InputSelect } from \"../input-select\";\nimport { VisuallyHidden } from \"../shared/accessibility\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { useMaxWidthMediaQuery } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport { useId, useIsMounted } from \"../util\";\nimport * as styles from \"./pagination.styles\";\nimport type { PageSizeItemProps, PaginationProps } from \"./types\";\n\nconst Component = (\n    {\n        id,\n        \"data-testid\": dataTestId,\n        className,\n        pageSize = 10,\n        totalItems,\n        activePage,\n        pageSizeOptions = DEFAULT_OPTIONS,\n        showFirstAndLastNav,\n        showPageSizeChanger = false,\n        onPageChange,\n        onPageSizeChange,\n    }: PaginationProps,\n    ref: React.Ref<HTMLDivElement>\n) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n\n    const isMounted = useIsMounted();\n    const isMobile = useMaxWidthMediaQuery(\"sm\");\n    const [hoverRightButton, setHoverRightButton] = useState(false);\n    const [hoverLeftButton, setHoverLeftButton] = useState(false);\n    const [inputText, setInputText] = useState<string>(\"\");\n\n    const [selectedOption, setSelectedOption] = useState<\n        PageSizeItemProps | undefined\n    >(pageSizeOptions[0]);\n    const [pageSizeLocal, setPageSize] = useState<number>(\n        !isMobile && showPageSizeChanger\n            ? selectedOption\n                ? selectedOption.value\n                : pageSize\n            : pageSize\n    );\n\n    const boundaryRange = 1;\n    const siblingRange = 1;\n\n    const internalId = useId();\n    const paginationId = `${internalId}-pagination`;\n\n    const totalPages = Math.ceil(totalItems / pageSizeLocal);\n    const isFirstPage = activePage === 1;\n    const isLastPage = activePage === totalPages;\n\n    const firstPaginationItem =\n        activePage > 1 ? () => handlePaginationItemClick(1) : undefined;\n    const lastPaginationItem =\n        activePage < totalPages\n            ? () => handlePaginationItemClick(totalPages)\n            : undefined;\n    const prevPaginationItem =\n        activePage > 1\n            ? () => handlePaginationItemClick(activePage - 1)\n            : undefined;\n    const nextPaginationItem =\n        activePage < totalPages\n            ? () =>\n                  handlePaginationItemClick(parseInt(activePage.toString()) + 1)\n            : undefined;\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        if (activePage) {\n            setInputValue(activePage);\n        }\n    }, [activePage]);\n\n    useEffect(() => {\n        setPageSize(pageSize);\n        setSelectedOption(\n            pageSizeOptions.find((option) => option.value === pageSize)\n        );\n    }, [pageSize]);\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const setInputValue = (value: number) => {\n        setInputText(value.toString());\n    };\n\n    const closeAllTooltips = () => {\n        setHoverRightButton(false);\n        setHoverLeftButton(false);\n    };\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handlePaginationItemClick = (pageIndex: number) => {\n        if (onPageChange) {\n            onPageChange(pageIndex);\n            setInputValue(pageIndex);\n        }\n    };\n\n    const handleFastForwardClick = () => {\n        const currentIndex = Math.min(totalPages, activePage + 5);\n        handlePaginationItemClick(currentIndex);\n        setInputValue(currentIndex);\n        setHoverRightButton(true);\n        setHoverLeftButton(false);\n    };\n\n    const handleFastBackwardClick = () => {\n        const currentIndex = Math.max(1, activePage - 5);\n        handlePaginationItemClick(currentIndex);\n        setInputValue(currentIndex);\n        setHoverRightButton(false);\n        setHoverLeftButton(true);\n    };\n\n    const handleInput = (event: React.ChangeEvent<HTMLInputElement>) => {\n        const value = event.target.value;\n        const numericRegex = /^[0-9]+$/;\n        if (value === undefined || value.length === 0) {\n            setInputText(\"\");\n        } else if (!numericRegex.test(value)) {\n            setInputText(value.replace(/[^0-9]/g, \"\"));\n        } else {\n            const newPage = parseInt(value.replace(/[^0-9]/g, \"\"));\n            setInputValue(Math.max(1, Math.min(totalPages, newPage)));\n        }\n    };\n\n    const handleInputSubmit = (event: React.FormEvent) => {\n        event.preventDefault();\n        if (inputText) {\n            onPageChange?.(parseInt(inputText));\n        }\n    };\n\n    const onHoverRightButton = () => {\n        setHoverRightButton(true);\n    };\n\n    const onBlurRightButton = () => {\n        setHoverRightButton(false);\n    };\n\n    const onHoverLeftButton = () => {\n        setHoverLeftButton(true);\n    };\n\n    const onBlurLeftButton = () => {\n        setHoverLeftButton(false);\n    };\n\n    const handleListItemClick = (item: PageSizeItemProps) => {\n        setSelectedOption(item);\n        const pagesize = item.value;\n        const totalPage = Math.ceil(totalItems / pagesize);\n\n        setPageSize(pagesize);\n\n        const page = activePage >= totalPage ? totalPage : activePage;\n\n        if (onPageSizeChange) {\n            onPageSizeChange(page, pagesize);\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderPaginationItems = () => {\n        return [...Array(totalPages)].map((e, i) => {\n            const pageIndex = i + 1;\n            const startRange = boundaryRange + 2 + siblingRange * 2;\n            const endRange = totalPages - startRange;\n            const totalRange = (boundaryRange + siblingRange) * 2 + 3;\n            const active = activePage === pageIndex;\n            if (totalPages <= totalRange) {\n                return (\n                    <button\n                        key={pageIndex}\n                        onClick={() => handlePaginationItemClick(pageIndex)}\n                        className={clsx(\n                            styles.pageItem,\n                            active && styles.pageItemSelected\n                        )}\n                        aria-label={`page ${pageIndex} of ${totalPages}`}\n                        aria-current={active ? \"page\" : false}\n                        onMouseOver={closeAllTooltips}\n                        onFocus={closeAllTooltips}\n                    >\n                        {pageIndex}\n                    </button>\n                );\n            }\n\n            const ellipsisStart =\n                activePage + siblingRange > startRange &&\n                pageIndex === boundaryRange + 1;\n            if (ellipsisStart) {\n                return renderStartEllipsis(pageIndex);\n            }\n\n            const ellipsisEnd =\n                activePage - siblingRange <= endRange &&\n                pageIndex === totalPages - boundaryRange - 1;\n            if (ellipsisEnd) {\n                return renderEndEllipsis(pageIndex);\n            }\n\n            const paginationStart =\n                (pageIndex <= startRange &&\n                    activePage + siblingRange <= startRange) ||\n                pageIndex <= boundaryRange;\n            const paginationMiddle =\n                pageIndex === activePage ||\n                (pageIndex <= activePage + siblingRange &&\n                    pageIndex >= activePage - siblingRange - 1);\n            const paginationEnd =\n                (pageIndex > endRange &&\n                    activePage - siblingRange > endRange) ||\n                pageIndex > totalPages - boundaryRange;\n            if (paginationStart || paginationMiddle || paginationEnd) {\n                return (\n                    <button\n                        key={pageIndex}\n                        onClick={() => handlePaginationItemClick(pageIndex)}\n                        className={clsx(\n                            styles.pageItem,\n                            active && styles.pageItemSelected\n                        )}\n                        aria-label={`page ${pageIndex} of ${totalPages}`}\n                        aria-current={active ? \"page\" : false}\n                        onMouseOver={closeAllTooltips}\n                        onFocus={closeAllTooltips}\n                    >\n                        {pageIndex}\n                    </button>\n                );\n            }\n\n            return null;\n        });\n    };\n\n    const renderStartEllipsis = (pageIndex: number) => (\n        <div key={pageIndex} className={styles.ellipsisContainer}>\n            <ClickableIcon\n                className={styles.iconButton}\n                focusHighlight={false}\n                focusOutline=\"browser\"\n                aria-label={\"Previous 5 pages\"}\n                onMouseEnter={onHoverLeftButton}\n                onMouseLeave={onBlurLeftButton}\n                onFocus={onHoverLeftButton}\n                onBlur={onBlurLeftButton}\n                onClick={handleFastBackwardClick}\n            >\n                {hoverLeftButton ? (\n                    <Chevron2LeftIcon aria-hidden />\n                ) : (\n                    <EllipsisHorizontalIcon aria-hidden />\n                )}\n            </ClickableIcon>\n            {hoverLeftButton && (\n                <div className={styles.hover}>Previous 5 pages</div>\n            )}\n        </div>\n    );\n\n    const renderEndEllipsis = (pageIndex: number) => (\n        <div key={pageIndex} className={styles.ellipsisContainer}>\n            <ClickableIcon\n                className={styles.iconButton}\n                focusHighlight={false}\n                focusOutline=\"browser\"\n                aria-label={\"Next 5 pages\"}\n                onMouseEnter={onHoverRightButton}\n                onMouseLeave={onBlurRightButton}\n                onFocus={onHoverRightButton}\n                onBlur={onBlurRightButton}\n                onClick={handleFastForwardClick}\n            >\n                {hoverRightButton ? (\n                    <Chevron2RightIcon aria-hidden />\n                ) : (\n                    <EllipsisHorizontalIcon aria-hidden />\n                )}\n            </ClickableIcon>\n            {hoverRightButton && (\n                <div className={styles.hover}>Next 5 pages</div>\n            )}\n        </div>\n    );\n\n    const renderMobile = () => (\n        <div className={styles.paginationMobileInput}>\n            <form onSubmit={handleInputSubmit}>\n                <Input\n                    className={styles.inputView}\n                    value={inputText}\n                    onChange={handleInput}\n                    autoComplete=\"off\"\n                    type=\"numeric\"\n                    id={(id || \"pagination\") + \"-input\"}\n                    data-testid={(dataTestId || \"pagination\") + \"-input\"}\n                    aria-label={`Page ${activePage} of ${totalPages}`}\n                />\n            </form>\n            <Typography.BodyBL className={styles.labelDivider}>\n                /\n            </Typography.BodyBL>\n            <Typography.BodyBL className={styles.label}>\n                {totalPages}\n            </Typography.BodyBL>\n        </div>\n    );\n\n    return (\n        <nav\n            className={clsx(styles.paginationWrapper, className)}\n            ref={ref}\n            id={id || \"pagination-wrapper\"}\n            data-testid={dataTestId || \"pagination\"}\n            aria-labelledby={paginationId}\n        >\n            <VisuallyHidden id={paginationId} aria-hidden>\n                pagination\n            </VisuallyHidden>\n            <div className={styles.paginationList}>\n                <div className={styles.paginationMenu}>\n                    {showFirstAndLastNav && (\n                        <ClickableIcon\n                            className={clsx(\n                                styles.iconButton,\n                                styles.iconButtonNavigation\n                            )}\n                            onClick={firstPaginationItem}\n                            disabled={isFirstPage}\n                            focusHighlight={false}\n                            aria-label=\"First page\"\n                            focusOutline=\"browser\"\n                        >\n                            <ChevronLineLeftIcon aria-hidden />\n                        </ClickableIcon>\n                    )}\n                    <ClickableIcon\n                        className={clsx(\n                            styles.iconButton,\n                            styles.iconButtonNavigation\n                        )}\n                        onClick={prevPaginationItem}\n                        disabled={isFirstPage}\n                        focusHighlight={false}\n                        aria-label=\"Previous page\"\n                        focusOutline=\"browser\"\n                    >\n                        <ChevronLeftIcon aria-hidden />\n                    </ClickableIcon>\n                    {isMounted && isMobile\n                        ? renderMobile()\n                        : renderPaginationItems()}\n                    <ClickableIcon\n                        className={clsx(\n                            styles.iconButton,\n                            styles.iconButtonNavigation\n                        )}\n                        onClick={nextPaginationItem}\n                        disabled={isLastPage}\n                        focusHighlight={false}\n                        aria-label=\"Next page\"\n                        focusOutline=\"browser\"\n                    >\n                        <ChevronRightIcon aria-hidden />\n                    </ClickableIcon>\n                    {showFirstAndLastNav && (\n                        <ClickableIcon\n                            className={clsx(\n                                styles.iconButton,\n                                styles.iconButtonNavigation\n                            )}\n                            onClick={lastPaginationItem}\n                            disabled={isLastPage}\n                            focusHighlight={false}\n                            aria-label=\"Last page\"\n                            focusOutline=\"browser\"\n                        >\n                            <ChevronLineRightIcon aria-hidden />\n                        </ClickableIcon>\n                    )}\n                </div>\n            </div>\n            {showPageSizeChanger && !isMobile && (\n                <div className={styles.inputSelectWrapper}>\n                    <VisuallyHidden id={`${paginationId}-page-size`}>\n                        Items per page\n                    </VisuallyHidden>\n                    <InputSelect\n                        aria-labelledby={`${paginationId}-page-size`}\n                        options={pageSizeOptions}\n                        valueExtractor={(item) => item.value}\n                        listExtractor={(item) => item.label}\n                        displayValueExtractor={(item) => item.label}\n                        selectedOption={selectedOption}\n                        onSelectOption={handleListItemClick}\n                    />\n                </div>\n            )}\n        </nav>\n    );\n};\nexport const Pagination = React.forwardRef(Component);\n\nconst DEFAULT_OPTIONS: PageSizeItemProps[] = [\n    { value: 10, label: \"10 per page\" },\n    { value: 20, label: \"20 per page\" },\n    { value: 30, label: \"30 per page\" },\n];\n"],"names":["Pagination","React","forwardRef","id","dataTestId","className","pageSize","totalItems","activePage","pageSizeOptions","DEFAULT_OPTIONS","showFirstAndLastNav","showPageSizeChanger","onPageChange","onPageSizeChange","ref","isMounted","useIsMounted","isMobile","useMaxWidthMediaQuery","hoverRightButton","setHoverRightButton","useState","hoverLeftButton","setHoverLeftButton","inputText","setInputText","selectedOption","setSelectedOption","pageSizeLocal","setPageSize","value","paginationId","useId","totalPages","Math","ceil","isFirstPage","isLastPage","firstPaginationItem","handlePaginationItemClick","undefined","lastPaginationItem","prevPaginationItem","nextPaginationItem","parseInt","toString","useEffect","setInputValue","find","option","closeAllTooltips","pageIndex","handleFastForwardClick","currentIndex","min","handleFastBackwardClick","max","handleInput","event","target","length","test","newPage","replace","handleInputSubmit","preventDefault","onHoverRightButton","onBlurRightButton","onHoverLeftButton","onBlurLeftButton","renderStartEllipsis","_jsxs","styles.ellipsisContainer","children","_jsx","ClickableIcon","styles.iconButton","focusHighlight","focusOutline","onMouseEnter","onMouseLeave","onFocus","onBlur","onClick","Chevron2LeftIcon","EllipsisHorizontalIcon","styles.hover","renderEndEllipsis","Chevron2RightIcon","clsx","styles.paginationWrapper","VisuallyHidden","styles.paginationList","styles.paginationMenu","styles.iconButtonNavigation","disabled","ChevronLineLeftIcon","ChevronLeftIcon","styles.paginationMobileInput","onSubmit","Input","styles.inputView","onChange","autoComplete","type","Typography","BodyBL","styles.labelDivider","styles.label","Array","map","e","i","endRange","boundaryRange","active","styles.pageItem","styles.pageItemSelected","onMouseOver","ChevronRightIcon","ChevronLineRightIcon","styles.inputSelectWrapper","InputSelect","options","valueExtractor","item","listExtractor","label","displayValueExtractor","onSelectOption","pagesize","totalPage"],"mappings":"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"}

package/cjs/popover/index.js

@@ -1,2 +1,2 @@
-"use strict";var o=require("./popover.js"),r=require("./popover-hoc.js");exports.Popover=o.Popover,exports.withPopover=r.withPopover;
+"use strict";var e=require("./popover.js"),r=require("./popover-inline/popover-inline.js"),o=require("./popover-trigger.js");exports.Popover=e.Popover,exports.PopoverInline=r.PopoverInline,exports.PopoverTrigger=o.PopoverTrigger;
 //# sourceMappingURL=index.js.map

package/{popover-v2 → cjs/popover}/popover-inline/popover-inline.js.map

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

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

@@ -0,0 +1,2 @@
+"use strict";require("./popover-inline.styles_bkopnt.css");exports.popoverInlineIconWithContent="pzf43s3",exports.popoverInlineText="p1h7dfwa";
+//# sourceMappingURL=popover-inline.styles.js.map

package/{popover-v2 → cjs/popover}/popover-inline/popover-inline.styles.js.map

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

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

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

package/cjs/popover/popover-trigger.js

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

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

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

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

@@ -0,0 +1,2 @@
+"use strict";require("./popover-trigger.styles_8zokig.css");exports.triggerContainer="tjxhm5y";
+//# sourceMappingURL=popover-trigger.styles.js.map

package/{popover-v2 → cjs/popover}/popover-trigger.styles.js.map

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

package/cjs/popover/popover-trigger.styles_8zokig.css

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

package/cjs/popover/popover.js

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

package/cjs/popover/popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"popover.js","sources":["../../../src/popover/popover.tsx"],"sourcesContent":["import debounce from \"lodash/debounce\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { useMediaQuery } from \"react-responsive\";\n\nimport { Card } from \"../card\";\nimport { Modal } from \"../modal/modal\";\nimport { MediaWidths } from \"../v2_spec/media-spec\";\nimport { V2_Text } from \"../v2_text/text\";\nimport type { OffsetPosition } from \"./popover.styles\";\nimport { BubbleWrap, ContentWrapper, MobileModalBox } from \"./popover.styles\";\nimport type { PopoverProps } from \"./types\";\n\n/**\n * @deprecated Use `PopoverV2` for improved positioning behaviour. This component will be removed in DS v3.\n */\nexport const Popover = ({\n    children,\n    visible,\n    onMobileClose,\n    ...otherProps\n}: PopoverProps): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const testId = otherProps[\"data-testid\"] || \"popover\";\n    const [offset, _setOffset] = useState<OffsetPosition>(\"none\");\n    const bubbleRef = useRef<HTMLDivElement>(null);\n    const isMobile = useMediaQuery({\n        maxWidth: MediaWidths.mobileL,\n    });\n\n    /**\n     * Have to use refs to allow the state values to be accessible\n     * by the event listener callback functions\n     * Reference:\n     * https://stackoverflow.com/questions/55265255/react-usestate-hook-event-handler-using-initial-state\n     */\n    const offsetStateRef = useRef<OffsetPosition>(offset);\n\n    // =============================================================================\n    // REF FUNCTIONS\n    // =============================================================================\n    const setOffset = (value: OffsetPosition) => {\n        offsetStateRef.current = value;\n        _setOffset(value);\n    };\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        updateOffsetPosition();\n        window.addEventListener(\"resize\", debounce(handleViewportResize, 300));\n\n        return () => {\n            window.removeEventListener(\n                \"resize\",\n                debounce(handleViewportResize, 300)\n            );\n        };\n    }, []);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleViewportResize = () => {\n        updateOffsetPosition();\n    };\n\n    const handleMobileClose = () => {\n        if (onMobileClose) {\n            onMobileClose();\n        }\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const updateOffsetPosition = () => {\n        const newOffsetPosition = getOffsetPosition();\n\n        if (newOffsetPosition) {\n            setOffset(newOffsetPosition);\n        }\n    };\n\n    const getOffsetPosition = (): OffsetPosition | undefined => {\n        if (bubbleRef.current) {\n            const bubbleRect = bubbleRef.current.getBoundingClientRect();\n            const paddingBuffer = 24; // buffer for all sides\n            const hasExceededTop = bubbleRect.y < paddingBuffer;\n            const rightLimit = window.innerWidth - paddingBuffer;\n\n            if (bubbleRect.x < paddingBuffer) {\n                // Exceed left\n                return hasExceededTop ? \"top-left\" : \"left\";\n            } else if (bubbleRect.x + bubbleRect.width > rightLimit) {\n                // Exceed right\n                return hasExceededTop ? \"top-right\" : \"right\";\n            }\n\n            /**\n             * Handle cases where there is more space and we can\n             * shift bubble back to center\n             */\n            if (\n                (offsetStateRef.current === \"top-left\" ||\n                    offsetStateRef.current === \"left\") &&\n                bubbleRect.x - bubbleRect.width / 2 > paddingBuffer\n            ) {\n                return hasExceededTop ? \"top-center\" : \"none\";\n            }\n\n            if (\n                (offsetStateRef.current === \"top-right\" ||\n                    offsetStateRef.current === \"right\") &&\n                bubbleRect.x + bubbleRect.width * 2 < rightLimit\n            ) {\n                return hasExceededTop ? \"top-center\" : \"none\";\n            }\n\n            if (hasExceededTop) {\n                return \"top-center\";\n            }\n\n            // All ok, do nothing\n            return undefined;\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderContent = () =>\n        typeof children === \"string\" ? (\n            <V2_Text.BodySmall>{children}</V2_Text.BodySmall>\n        ) : (\n            children\n        );\n\n    return (\n        <>\n            <BubbleWrap\n                ref={bubbleRef}\n                data-testid={testId}\n                $visible={visible}\n                $offset={offset}\n                {...otherProps}\n            >\n                <Card>{renderContent()}</Card>\n            </BubbleWrap>\n            {isMobile && (\n                <Modal\n                    show={visible ?? false}\n                    onOverlayClick={handleMobileClose}\n                >\n                    <MobileModalBox onClose={handleMobileClose}>\n                        <ContentWrapper>{renderContent()}</ContentWrapper>\n                    </MobileModalBox>\n                </Modal>\n            )}\n        </>\n    );\n};\n"],"names":["_a","children","visible","onMobileClose","otherProps","__rest","testId","offset","_setOffset","useState","bubbleRef","useRef","isMobile","useMediaQuery","maxWidth","MediaWidths","mobileL","offsetStateRef","useEffect","updateOffsetPosition","window","addEventListener","debounce","handleViewportResize","removeEventListener","handleMobileClose","newOffsetPosition","getOffsetPosition","value","current","bubbleRect","getBoundingClientRect","paddingBuffer","hasExceededTop","y","rightLimit","innerWidth","x","width","renderContent","_jsx","V2_Text","BodySmall","_jsxs","_Fragment","BubbleWrap","Object","assign","ref","$visible","$offset","Card","Modal","show","onOverlayClick","MobileModalBox","onClose","ContentWrapper"],"mappings":"wYAewBA,QAAAC,SACpBA,EAAQC,QACRA,EAAOC,cACPA,KACGC,EAAUC,EAAAA,OAAAL,EAJO,CAAA,WAAA,UAAA,kBASpB,MAAMM,EAASF,EAAW,gBAAkB,WACrCG,EAAQC,GAAcC,EAAAA,SAAyB,QAChDC,EAAYC,EAAAA,OAAuB,MACnCC,EAAWC,EAAAA,uBAAAA,cAAc,CAC3BC,SAAUC,EAAAA,YAAYC,UASpBC,EAAiBN,EAAAA,OAAuBJ,GAa9CW,EAAAA,WAAU,KACNC,IACAC,OAAOC,iBAAiB,SAAUC,EAAAA,QAASC,EAAsB,MAE1D,KACHH,OAAOI,oBACH,SACAF,EAAAA,QAASC,EAAsB,KAClC,IAEN,IAKH,MAAMA,EAAuB,KACzBJ,GAAsB,EAGpBM,EAAoB,KAClBtB,GACAA,GACJ,EAMEgB,EAAuB,KACzB,MAAMO,EAAoBC,IArCZ,IAACC,EAuCXF,IAvCWE,EAwCDF,EAvCdT,EAAeY,QAAUD,EACzBpB,EAAWoB,GAuCX,EAGED,EAAoB,KACtB,GAAIjB,EAAUmB,QAAS,CACnB,MAAMC,EAAapB,EAAUmB,QAAQE,wBAC/BC,EAAgB,GAChBC,EAAiBH,EAAWI,EAAIF,EAChCG,EAAaf,OAAOgB,WAAaJ,EAEvC,OAAIF,EAAWO,EAAIL,EAERC,EAAiB,WAAa,OAC9BH,EAAWO,EAAIP,EAAWQ,MAAQH,EAElCF,EAAiB,YAAc,SAQV,aAA3BhB,EAAeY,SACe,SAA3BZ,EAAeY,UACnBC,EAAWO,EAAIP,EAAWQ,MAAQ,EAAIN,IAMV,cAA3Bf,EAAeY,SACe,UAA3BZ,EAAeY,UACnBC,EAAWO,EAAuB,EAAnBP,EAAWQ,MAAYH,EAN/BF,EAAiB,aAAe,OAWvCA,EACO,kBAIX,CACJ,GAMEM,EAAgB,IACE,iBAAbtC,EACHuC,EAAAA,IAACC,UAAQC,UAAS,CAAAzC,SAAEA,IAA6B,EAKzD,OACI0C,EAAAA,KAAAC,EAAAA,SAAA,CAAA3C,SAAA,CACIuC,EAAAA,IAACK,EAAAA,WAAUC,OAAAC,OAAA,CACPC,IAAKtC,EAAS,cACDJ,EAAM2C,SACT/C,EAAOgD,QACR3C,GACLH,EAAU,CAAAH,SAEduC,MAACW,EAAAA,KAAI,CAAAlD,SAAEsC,SAEV3B,GACG4B,EAAAA,IAACY,EAAAA,MAAK,CACFC,KAAMnD,SAAAA,EACNoD,eAAgB7B,EAAiBxB,SAEjCuC,EAAAA,IAACe,iBAAc,CAACC,QAAS/B,EAAiBxB,SACtCuC,EAAAA,IAACiB,EAAAA,eAAc,CAAAxD,SAAEsC,YAI9B"}
+{"version":3,"file":"popover.js","sources":["../../../src/popover/popover.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useMemo, useRef } from \"react\";\n\nimport { Card } from \"../card\";\nimport { Markup } from \"../markup\";\nimport { ModalV2 } from \"../modal-v2\";\nimport { useApplyStyle, useMaxWidthMediaQuery } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport * as styles from \"./popover.styles\";\nimport type { PopoverProps } from \"./types\";\n\nexport const Popover = ({\n    children,\n    visible = false,\n    onMobileClose,\n    maxHeight,\n    overflow,\n    ariaLabel = \"More information\",\n    id,\n    className,\n    \"data-testid\": testId = \"popover\",\n    ...otherProps\n}: PopoverProps): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const isMobile = useMaxWidthMediaQuery(\"sm\");\n    const popoverContainerRef = useRef<HTMLDivElement>(null);\n    const popoverCardStyle = useMemo(\n        () => ({\n            [styles.tokens.popoverCard.maxHeight]:\n                maxHeight === undefined ? null : `${maxHeight}px`,\n            [styles.tokens.popoverCard.overflowY]: overflow ?? null,\n        }),\n        [maxHeight, overflow]\n    );\n    useApplyStyle(popoverContainerRef, popoverCardStyle);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleMobileClose = () => {\n        if (onMobileClose) {\n            onMobileClose();\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderContent = () =>\n        typeof children === \"string\" ? (\n            <Typography.BodyMD>{children}</Typography.BodyMD>\n        ) : (\n            children\n        );\n\n    return (\n        <>\n            {visible && !isMobile && (\n                <div\n                    ref={popoverContainerRef}\n                    tabIndex={0}\n                    data-testid={testId}\n                    {...otherProps}\n                    className={clsx(styles.popoverContainer, className)}\n                    id={id}\n                    role=\"dialog\"\n                    aria-label={ariaLabel}\n                >\n                    <Card\n                        className={clsx(\n                            styles.popoverCard,\n                            maxHeight !== undefined &&\n                                styles.popoverCardWithMaxHeight,\n                            overflow && styles.popoverCardWithOverflow\n                        )}\n                    >\n                        <Markup baseTextSize=\"body-md\">\n                            {renderContent()}\n                        </Markup>\n                    </Card>\n                </div>\n            )}\n            {isMobile && (\n                <ModalV2\n                    show={visible}\n                    onOverlayClick={handleMobileClose}\n                    onClose={handleMobileClose}\n                    id={id}\n                    role=\"dialog\"\n                    aria-label={ariaLabel}\n                >\n                    <ModalV2.Card>\n                        <ModalV2.Content>\n                            <Markup>{renderContent()}</Markup>\n                        </ModalV2.Content>\n                        <ModalV2.CloseButton />\n                    </ModalV2.Card>\n                </ModalV2>\n            )}\n        </>\n    );\n};\n"],"names":["_a","children","visible","onMobileClose","maxHeight","overflow","ariaLabel","id","className","testId","otherProps","__rest","isMobile","useMaxWidthMediaQuery","popoverContainerRef","useRef","popoverCardStyle","useMemo","styles.tokens","popoverCard","undefined","overflowY","useApplyStyle","handleMobileClose","renderContent","_jsx","Typography","BodyMD","_jsxs","_Fragment","Object","assign","ref","tabIndex","clsx","styles.popoverContainer","role","Card","styles.popoverCard","styles.popoverCardWithMaxHeight","styles.popoverCardWithOverflow","Markup","baseTextSize","ModalV2","show","onOverlayClick","onClose","Content","CloseButton"],"mappings":"otBAWwBA,IAAA,IAAAC,SACpBA,EAAQC,QACRA,GAAU,EAAKC,cACfA,EAAaC,UACbA,EAASC,SACTA,EAAQC,UACRA,EAAY,mBAAkBC,GAC9BA,EAAEC,UACFA,EACA,cAAeC,EAAS,WAAST,EAC9BU,EAAUC,EAAAA,OAAAX,EAVO,0GAepB,MAAMY,EAAWC,EAAAA,sBAAsB,MACjCC,EAAsBC,EAAAA,OAAuB,MAC7CC,EAAmBC,EAAAA,SACrB,KAAA,CACI,CAACC,EAAAA,OAAcC,YAAYf,gBACTgB,IAAdhB,EAA0B,KAAO,GAAGA,MACxC,CAACc,EAAAA,OAAcC,YAAYE,WAAYhB,QAAAA,EAAY,QAEvD,CAACD,EAAWC,IAEhBiB,EAAAA,cAAcR,EAAqBE,GAKnC,MAAMO,EAAoB,KAClBpB,GACAA,GACJ,EAMEqB,EAAgB,IACE,iBAAbvB,EACHwB,EAAAA,IAACC,aAAWC,OAAM,CAAA1B,SAAEA,IAA6B,EAKzD,OACI2B,EAAAA,KAAAC,EAAAA,SAAA,CAAA5B,SAAA,CACKC,IAAYU,GACTa,MAAA,MAAAK,OAAAC,OAAA,CACIC,IAAKlB,EACLmB,SAAU,EAAC,cACExB,GACTC,EAAU,CACdF,UAAW0B,EAAAA,QAAKC,EAAAA,iBAAyB3B,GACzCD,GAAIA,EACJ6B,KAAK,SAAQ,aACD9B,EAASL,SAErBwB,EAAAA,IAACY,OAAI,CACD7B,UAAW0B,UACPI,EAAAA,iBACclB,IAAdhB,GACImC,EAAAA,yBACJlC,GAAYmC,EAAAA,yBACfvC,SAEDwB,EAAAA,IAACgB,EAAAA,OAAM,CAACC,aAAa,mBAChBlB,WAKhBZ,GACGa,EAAAA,IAACkB,EAAAA,QAAO,CACJC,KAAM1C,EACN2C,eAAgBtB,EAChBuB,QAASvB,EACThB,GAAIA,EACJ6B,KAAK,SAAQ,aACD9B,EAASL,SAErB2B,EAAAA,KAACe,EAAAA,QAAQN,KAAI,CAAApC,SAAA,CACTwB,EAAAA,IAACkB,EAAAA,QAAQI,QAAO,CAAA9C,SACZwB,EAAAA,IAACgB,SAAM,CAAAxC,SAAEuB,QAEbC,EAAAA,IAACkB,EAAAA,QAAQK,YAAW,CAAA,UAIjC"}

package/cjs/popover/popover.styles.js

@@ -1,75 +1,2 @@
-"use strict";var t=require("styled-components"),e=require("../modal/modal-box.js"),r=require("../v2_media/media.js"),a=require("../v2_transition/index.js");function o(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var i=o(t);const n=i.default.div`
-    max-width: 30rem;
-    pointer-events: auto;
-    position: absolute;
-
-    ${e=>e.$visible?t.css`
-            visibility: visible;
-            opacity: 1;
-            transition: ${a.V2_Transition.Base};
-            z-index: 50;
-        `:t.css`
-            visibility: hidden;
-            opacity: 0;
-            transition: ${a.V2_Transition.Base};
-            z-index: -1;
-        `}
-    ${e=>(e=>{switch(e){case"top-center":return t.css`
-                top: calc(100% + 12px);
-                width: max-content;
-                margin: auto;
-                left: 50%;
-                -moz-transform: translateX(-50%);
-                -webkit-transform: translateX(-50%);
-                transform: translateX(-50%);
-            `;case"top-left":return t.css`
-                top: calc(100% + 12px);
-                width: max-content;
-                margin: auto;
-                left: 0;
-            `;case"top-right":return t.css`
-                top: calc(100% + 12px);
-                width: max-content;
-                margin: auto;
-                right: 0;
-            `;case"left":return t.css`
-                bottom: calc(100% + 12px);
-                width: max-content;
-                margin: auto;
-                left: 0;
-            `;case"right":return t.css`
-                bottom: calc(100% + 12px);
-                width: max-content;
-                margin: auto;
-                right: 0;
-            `;default:return t.css`
-                bottom: calc(100% + 12px);
-                width: max-content;
-                margin: auto;
-                left: 50%;
-                -moz-transform: translateX(-50%);
-                -webkit-transform: translateX(-50%);
-                transform: translateX(-50%);
-            `}})(e.$offset)}
-
-	${r.V2_MediaQuery.MaxWidth.mobileL} {
-        display: none;
-    }
-`,s=i.default(e.ModalBox)`
-    padding: 3.5rem 1.25rem 2.5rem;
-`,l=i.default.div`
-    position: relative;
-    width: fit-content;
-`,c=i.default.button`
-    cursor: pointer;
-    background: none;
-    border: none;
-    padding: 0;
-`,d=i.default.div`
-    overflow-y: scroll;
-
-    &::-webkit-scrollbar {
-        display: none; /* Chrome/Safari/Webkit */
-    }
-`;exports.BubbleWrap=n,exports.ContentWrapper=d,exports.HOCTrigger=c,exports.HOCWrapper=l,exports.MobileModalBox=s;
+"use strict";require("./popover.styles_ujnf0h.css");exports.popoverCard="p1jmdldd",exports.popoverCardWithMaxHeight="p51fygj",exports.popoverCardWithOverflow="p1hzbz92",exports.popoverContainer="p1scb124",exports.tokens={popoverCard:{maxHeight:"--fds-internal-popover-popoverCard-maxHeight",overflowY:"--fds-internal-popover-popoverCard-overflowY"}};
 //# sourceMappingURL=popover.styles.js.map

package/cjs/popover/popover.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"popover.styles.js","sources":["../../../src/popover/popover.styles.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { ModalBox } from \"../modal/modal-box\";\nimport { V2_MediaQuery } from \"../v2_media\";\nimport { V2_Transition } from \"../v2_transition\";\n\n// =============================================================================\n// STYLE INTERFACES, transient props are denoted with $\n// See more https://styled-components.com/docs/api#transient-props\n// =============================================================================\nexport type OffsetPosition =\n    | \"top-center\"\n    | \"top-left\"\n    | \"top-right\"\n    | \"left\"\n    | \"right\"\n    | \"none\";\n\ninterface PopoverStyleProps {\n    $visible?: boolean;\n    $offset: OffsetPosition;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nconst getVisibilityStyle = (visible: boolean | undefined) => {\n    if (visible) {\n        return css`\n            visibility: visible;\n            opacity: 1;\n            transition: ${V2_Transition.Base};\n            z-index: 50;\n        `;\n    } else {\n        return css`\n            visibility: hidden;\n            opacity: 0;\n            transition: ${V2_Transition.Base};\n            z-index: -1;\n        `;\n    }\n};\n\nconst getBubblePosition = (offset: OffsetPosition) => {\n    switch (offset) {\n        case \"top-center\":\n            return css`\n                top: calc(100% + 12px);\n                width: max-content;\n                margin: auto;\n                left: 50%;\n                -moz-transform: translateX(-50%);\n                -webkit-transform: translateX(-50%);\n                transform: translateX(-50%);\n            `;\n        case \"top-left\":\n            return css`\n                top: calc(100% + 12px);\n                width: max-content;\n                margin: auto;\n                left: 0;\n            `;\n        case \"top-right\":\n            return css`\n                top: calc(100% + 12px);\n                width: max-content;\n                margin: auto;\n                right: 0;\n            `;\n        case \"left\":\n            return css`\n                bottom: calc(100% + 12px);\n                width: max-content;\n                margin: auto;\n                left: 0;\n            `;\n        case \"right\":\n            return css`\n                bottom: calc(100% + 12px);\n                width: max-content;\n                margin: auto;\n                right: 0;\n            `;\n        default:\n            return css`\n                bottom: calc(100% + 12px);\n                width: max-content;\n                margin: auto;\n                left: 50%;\n                -moz-transform: translateX(-50%);\n                -webkit-transform: translateX(-50%);\n                transform: translateX(-50%);\n            `;\n    }\n};\n\nexport const BubbleWrap = styled.div<PopoverStyleProps>`\n    max-width: 30rem;\n    pointer-events: auto;\n    position: absolute;\n\n    ${(props) => getVisibilityStyle(props.$visible)}\n    ${(props) => getBubblePosition(props.$offset)}\n\n\t${V2_MediaQuery.MaxWidth.mobileL} {\n        display: none;\n    }\n`;\n\nexport const MobileModalBox = styled(ModalBox)`\n    padding: 3.5rem 1.25rem 2.5rem;\n`;\n\nexport const HOCWrapper = styled.div`\n    position: relative;\n    width: fit-content;\n`;\n\nexport const HOCTrigger = styled.button`\n    cursor: pointer;\n    background: none;\n    border: none;\n    padding: 0;\n`;\n\nexport const ContentWrapper = styled.div`\n    overflow-y: scroll;\n\n    &::-webkit-scrollbar {\n        display: none; /* Chrome/Safari/Webkit */\n    }\n`;\n"],"names":["BubbleWrap","styled","div","props","$visible","css","V2_Transition","Base","offset","getBubblePosition","$offset","V2_MediaQuery","MaxWidth","mobileL","MobileModalBox","ModalBox","HOCWrapper","HOCTrigger","button","ContentWrapper"],"mappings":"+OA0BA,MAuEaA,EAAaC,EAAAA,QAAOC,GAAsB;;;;;MAKhDC,GAA6BA,EAAMC,SA1E3BC,KAAG;;;0BAGQC,EAAAA,cAAcC;;UAIzBF,KAAG;;;0BAGQC,EAAAA,cAAcC;;;MAiEjCJ,GA3DmB,CAACK,IACvB,OAAQA,GACJ,IAAK,aACD,OAAOH,KAAG;;;;;;;;cASd,IAAK,WACD,OAAOA,KAAG;;;;;cAMd,IAAK,YACD,OAAOA,KAAG;;;;;cAMd,IAAK,OACD,OAAOA,KAAG;;;;;cAMd,IAAK,QACD,OAAOA,KAAG;;;;;cAMd,QACI,OAAOA,KAAG;;;;;;;;gBAkBLI,CAAkBN,EAAMO;;GAEtCC,EAAAA,cAAcC,SAASC;;;EAKbC,EAAiBb,EAAAA,QAAOc,EAAAA,SAAS;;EAIjCC,EAAaf,EAAAA,QAAOC,GAAG;;;EAKvBe,EAAahB,EAAAA,QAAOiB,MAAM;;;;;EAO1BC,EAAiBlB,EAAAA,QAAOC,GAAG;;;;;;"}
+{"version":3,"file":"popover.styles.js","sources":["../../../src/popover/popover.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, MediaQuery, Radius } from \"../theme\";\n\nexport const tokens = {\n    popoverCard: {\n        maxHeight: \"--fds-internal-popover-popoverCard-maxHeight\",\n        overflowY: \"--fds-internal-popover-popoverCard-overflowY\",\n    },\n} as const;\n\nexport const popoverContainer = css`\n    max-width: 30rem;\n    padding: 0 1rem;\n    pointer-events: auto;\n    outline: none;\n`;\n\nexport const popoverCard = css`\n    color: ${Colour.text};\n\n    ${MediaQuery.MaxWidth.sm} {\n        display: none;\n    }\n\n    &::-webkit-scrollbar {\n        width: 14px;\n    }\n\n    &::-webkit-scrollbar-track {\n        background: transparent;\n    }\n\n    &::-webkit-scrollbar-thumb {\n        background: ${Colour[\"bg-inverse-subtlest\"]};\n        border: 5px solid transparent;\n        border-radius: ${Radius.full};\n        background-clip: padding-box;\n    }\n`;\n\nexport const popoverCardWithMaxHeight = css`\n    ${tokens.popoverCard.maxHeight}: initial;\n    max-height: var(${tokens.popoverCard.maxHeight});\n`;\n\nexport const popoverCardWithOverflow = css`\n    ${tokens.popoverCard.overflowY}: initial;\n    overflow-y: var(${tokens.popoverCard.overflowY});\n`;\n"],"names":["popoverCard","maxHeight","overflowY"],"mappings":"+FAkBwB,4CAuBa,0CAKD,oCAnCP,0BAPP,CAClBA,YAAa,CACTC,UAAW,+CACXC,UAAW"}

package/cjs/popover/popover.styles_ujnf0h.css

@@ -0,0 +1,4 @@
+.p1scb124{max-width:30rem;padding:0 1rem;pointer-events:auto;outline:none;}
+.p1jmdldd{color:var(--fds-colour-text);}:where(body.fds-breakpoint-sm-max) .p1jmdldd{display:none;}.p1jmdldd::-webkit-scrollbar{width:14px;}.p1jmdldd::-webkit-scrollbar-track{background:transparent;}.p1jmdldd::-webkit-scrollbar-thumb{background:var(--fds-colour-bg-inverse-subtlest);border:5px solid transparent;border-radius:var(--fds-radius-full);-webkit-background-clip:padding-box;background-clip:padding-box;}
+.p51fygj{--fds-internal-popover-popoverCard-maxHeight:initial;max-height:var(--fds-internal-popover-popoverCard-maxHeight);}
+.p1hzbz92{--fds-internal-popover-popoverCard-overflowY:initial;overflow-y:var(--fds-internal-popover-popoverCard-overflowY);}