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

package/overlay/overlay.js.map

@@ -1 +1 @@
-{"version":3,"file":"overlay.js","sources":["../../src/overlay/overlay.tsx"],"sourcesContent":["import {\n    FloatingNode,\n    FloatingTree,\n    useFloatingNodeId,\n} from \"@floating-ui/react\";\nimport React, { useEffect, useRef, useState } from \"react\";\nimport ReactDOM from \"react-dom\";\n\nimport { SimpleIdGenerator } from \"../util\";\nimport { Root, Wrapper } from \"./overlay.styles\";\nimport type { OverlayProps } from \"./types\";\nimport { useFloatingParent } from \"./use-floating-context\";\n\nconst OverlayComponent = ({\n    show = false,\n    rootId,\n    onOverlayClick,\n    children,\n    backgroundOpacity: _backgroundOpacity,\n    backgroundBlur = true,\n    disableTransition = false,\n    enableOverlayClick = false,\n    zIndex: customZIndex,\n    id,\n}: OverlayProps): JSX.Element | null => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [rootElement, setRootElement] = useState<HTMLElement | null>(null);\n    const [isStacked, _setIsStacked] = useState<boolean>();\n    const [uid] = useState(() => SimpleIdGenerator.generate());\n    const nodeId = useFloatingNodeId();\n\n    const stacked = useRef<boolean>();\n\n    const childRef = useRef<HTMLDivElement>(null);\n    const childWithRef =\n        children && React.cloneElement(children, { ref: childRef });\n\n    const overlayRootId = id\n        ? `lifesg-ds-overlay-root-${id}`\n        : \"lifesg-ds-overlay-root\";\n    const zIndex = customZIndex ?? (isStacked ? 99999 : 99998);\n\n    useFloatingParent(zIndex);\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        addStylesheetForDocumentBody();\n        setRootElement(getRootElement());\n\n        return () => {\n            removeOverlay();\n            if (getOverlayOrder().length < 1) {\n                applyScrollLockClass(\"remove\");\n                scrollToLastScrollPosition();\n                applyBodyStyleClass(\"remove\");\n            }\n        };\n    }, []);\n\n    useEffect(() => {\n        if (show) {\n            const isStacked = checkIfStacked();\n            setStacked(isStacked);\n\n            addOverlay();\n\n            if (isIOS() && getOverlayOrder().length === 1) {\n                saveScrollPosition();\n                applyScrollLockClass(\"add\");\n            }\n\n            const timerId = setTimeout(() => {\n                applyBodyStyleClass(\"add\");\n            }, 200); // Allow overlay animations to complete\n\n            return () => clearTimeout(timerId);\n        } else {\n            removeOverlay();\n\n            if (isIOS() && getOverlayOrder().length < 1) {\n                applyScrollLockClass(\"remove\");\n                scrollToLastScrollPosition();\n            }\n\n            const timerId = setTimeout(() => {\n                if (getOverlayOrder().length < 1) {\n                    applyBodyStyleClass(\"remove\");\n                }\n            }, 200); // Allow overlay animations to complete\n\n            return () => clearTimeout(timerId);\n        }\n    }, [show]);\n\n    // =============================================================================\n    // REF FUNCTIONS\n    // =============================================================================\n    const setStacked = (data: boolean) => {\n        stacked.current = data;\n        _setIsStacked(data);\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const isIOS = () => /(iPad|iPhone|iPod)/g.test(navigator.userAgent);\n\n    const getRootElement = (): HTMLElement | null => {\n        if (document && rootId) {\n            return document.getElementById(rootId);\n        } else if (document) {\n            // If rootId not specified, we'll use body\n            return document.body;\n        } else {\n            return null;\n        }\n    };\n\n    const checkIfStacked = () => {\n        return getOverlayOrder().length > 0;\n    };\n\n    const addStylesheetForDocumentBody = () => {\n        /**\n         * This stylesheet is to manipulate the <body>. We only add once\n         */\n        if (!document.getElementById(STYLESHEET_ID)) {\n            const overlayStyleSheet = document.createElement(\"style\");\n            overlayStyleSheet.id = STYLESHEET_ID;\n\n            const documentWidth = document.documentElement.clientWidth;\n            const windowWidth = window.innerWidth;\n            const scrollBarWidth = windowWidth - documentWidth;\n\n            overlayStyleSheet.innerHTML = `\n\t\t\t\t.${OVERLAY_OPEN_CLASSNAME} {\n\t\t\t\t\toverflow: hidden;\n\t\t\t\t\tpadding-right: ${scrollBarWidth}px !important;\n\t\t\t\t\t-ms-overflow-style: none;\n\t\t\t\t\tscrollbar-width: none;\n\t\t\t\t}\n\n\t\t\t\t.${OVERLAY_OPEN_CLASSNAME}::-webkit-scrollbar {\n\t\t\t\t\tdisplay: none;\n\t\t\t\t}\n\n\t\t\t\t.${OVERLAY_SCROLL_LOCK_CLASSNAME} {\n\t\t\t\t\tposition: fixed;\n\t\t\t\t\ttop: var(${SCROLL_POSITION_VAR}, 0);\n\t\t\t\t\tbottom: 0;\n\t\t\t\t}\n\t\t\t`;\n\n            document.body.appendChild(overlayStyleSheet);\n        }\n    };\n\n    /**\n     * This sets the style of <body> to hide the scrollbar\n     */\n    const applyBodyStyleClass = (action: \"add\" | \"remove\") => {\n        const isOverlayStyleClassApplied = document.body.classList.contains(\n            OVERLAY_OPEN_CLASSNAME\n        );\n\n        if (action === \"add\" && !isOverlayStyleClassApplied) {\n            document.body.classList.add(OVERLAY_OPEN_CLASSNAME);\n        } else if (action === \"remove\" && isOverlayStyleClassApplied) {\n            document.body.classList.remove(OVERLAY_OPEN_CLASSNAME);\n        }\n    };\n\n    const getOverlayOrder = () => {\n        const attr = document.body.dataset.lifesgDsOverlayOrder;\n        return attr ? attr.split(\",\") : [];\n    };\n\n    const addOverlay = () => {\n        const order = getOverlayOrder();\n        document.body.dataset.lifesgDsOverlayOrder = [...order, uid].join(\",\");\n    };\n\n    const removeOverlay = () => {\n        const order = getOverlayOrder();\n        document.body.dataset.lifesgDsOverlayOrder = order\n            .filter((o) => o !== uid)\n            .join(\",\");\n    };\n\n    /**\n     * This sets the style of <body> to further prevent scrolling on iOS\n     *\n     * ref: https://stackoverflow.com/a/57455820/3932279\n     * `overflow: hidden` and `overscroll-behavior` is ignored by iOS, this is\n     * an alternative solution\n     *\n     * as a side effect this causes the scroll position to reset, so additional\n     * logic to restore the scroll on close is required\n     */\n    const applyScrollLockClass = (action: \"add\" | \"remove\") => {\n        if (!isIOS()) {\n            return;\n        }\n\n        const isClassApplied = document.body.classList.contains(\n            OVERLAY_SCROLL_LOCK_CLASSNAME\n        );\n\n        if (action === \"add\" && !isClassApplied) {\n            document.body.classList.add(OVERLAY_SCROLL_LOCK_CLASSNAME);\n        } else if (action === \"remove\" && isClassApplied) {\n            document.body.classList.remove(OVERLAY_SCROLL_LOCK_CLASSNAME);\n        }\n    };\n\n    const saveScrollPosition = () => {\n        const bodyStyle = document.body.style;\n        const scrollY = bodyStyle.top ? bodyStyle.top : window.scrollY + \"px\";\n\n        document.body.style.setProperty(SCROLL_POSITION_VAR, scrollY);\n    };\n\n    const scrollToLastScrollPosition = () => {\n        const scrollY =\n            document.body.style.getPropertyValue(SCROLL_POSITION_VAR);\n        requestAnimationFrame(() => {\n            window.scrollTo({\n                top: parseFloat(scrollY),\n            });\n        });\n    };\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleWrapperClick = (event: React.MouseEvent<HTMLDivElement>) => {\n        const modal = childRef.current?.firstChild;\n        if (modal && (modal as Node).contains(event.target as Node)) {\n            return;\n        } else if (onOverlayClick && enableOverlayClick) {\n            event.preventDefault();\n            onOverlayClick();\n        }\n    };\n\n    // =============================================================================\n    // RENDER\n    // =============================================================================\n    const renderWrapper = () => (\n        <FloatingNode id={nodeId}>\n            <Wrapper\n                data-testid=\"overlay-wrapper\"\n                $show={show}\n                $stacked={isStacked}\n                $backgroundBlur={backgroundBlur}\n                $disableTransition={disableTransition}\n                onClick={handleWrapperClick}\n            >\n                {childWithRef}\n            </Wrapper>\n        </FloatingNode>\n    );\n\n    const renderComponent = () => (\n        <Root\n            id={overlayRootId}\n            data-testid={overlayRootId}\n            $show={show}\n            $zIndex={zIndex}\n        >\n            {children && renderWrapper()}\n        </Root>\n    );\n\n    return rootElement\n        ? ReactDOM.createPortal(renderComponent(), rootElement)\n        : null;\n};\n\nexport const Overlay = (props: OverlayProps) => {\n    return (\n        <FloatingTree>\n            <OverlayComponent {...props} />\n        </FloatingTree>\n    );\n};\n\n// =============================================================================\n// CONSTANTS\n// =============================================================================\nconst STYLESHEET_ID = \"lifesg-ds-overlay-stylesheet\";\nconst OVERLAY_OPEN_CLASSNAME = \"lifesg-ds-overlay-open\";\nconst OVERLAY_SCROLL_LOCK_CLASSNAME = \"lifesg-ds-overlay-scroll-lock\";\nconst SCROLL_POSITION_VAR = \"--lifesg-ds-overlay-scroll-y\";\n"],"names":["OverlayComponent","show","rootId","onOverlayClick","children","backgroundOpacity","_backgroundOpacity","backgroundBlur","disableTransition","enableOverlayClick","zIndex","customZIndex","id","rootElement","setRootElement","useState","isStacked","_setIsStacked","uid","SimpleIdGenerator","generate","nodeId","useFloatingNodeId","stacked","useRef","childRef","childWithRef","React","cloneElement","ref","overlayRootId","useFloatingParent","useEffect","addStylesheetForDocumentBody","getRootElement","removeOverlay","getOverlayOrder","length","applyScrollLockClass","scrollToLastScrollPosition","applyBodyStyleClass","checkIfStacked","setStacked","addOverlay","isIOS","saveScrollPosition","timerId","setTimeout","clearTimeout","data","current","test","navigator","userAgent","document","getElementById","body","STYLESHEET_ID","overlayStyleSheet","createElement","documentWidth","documentElement","clientWidth","scrollBarWidth","window","innerWidth","innerHTML","OVERLAY_OPEN_CLASSNAME","OVERLAY_SCROLL_LOCK_CLASSNAME","SCROLL_POSITION_VAR","appendChild","action","isOverlayStyleClassApplied","classList","contains","remove","add","attr","dataset","lifesgDsOverlayOrder","split","order","join","filter","o","isClassApplied","bodyStyle","style","scrollY","top","setProperty","getPropertyValue","requestAnimationFrame","scrollTo","parseFloat","handleWrapperClick","event","modal","_a","firstChild","target","preventDefault","ReactDOM","createPortal","_jsx","Root","$show","$zIndex","FloatingNode","Wrapper","$stacked","$backgroundBlur","onClick","Overlay","props","FloatingTree","Object","assign"],"mappings":"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"}
+{"version":3,"file":"overlay.js","sources":["../../src/overlay/overlay.tsx"],"sourcesContent":["import {\n    FloatingNode,\n    FloatingTree,\n    useFloatingNodeId,\n} from \"@floating-ui/react\";\nimport clsx from \"clsx\";\nimport type React from \"react\";\nimport { useEffect, useRef, useState } from \"react\";\nimport ReactDOM from \"react-dom\";\n\nimport { useApplyStyle, useInheritedThemeScope } from \"../theme\";\nimport { useId } from \"../util\";\nimport * as styles from \"./overlay.styles\";\nimport type { OverlayProps } from \"./types\";\nimport { useFloatingParent } from \"./use-floating-context\";\n\nconst OverlayComponent = ({\n    show = false,\n    rootId,\n    onOverlayClick,\n    children,\n    backgroundBlur = true,\n    disableTransition = false,\n    enableOverlayClick = false,\n    zIndex: customZIndex,\n    id,\n    containerRef,\n}: OverlayProps): JSX.Element | null => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [rootElement, setRootElement] = useState<HTMLElement | null>(null);\n    const [isStacked, _setIsStacked] = useState<boolean>();\n    const uid = useId();\n    const nodeId = useFloatingNodeId();\n\n    const stacked = useRef<boolean>();\n    // Track where mousedown started to prevent closing drawer during text selection drag\n    const mouseDownInsideModalRef = useRef(false);\n    const rootRef = useRef<HTMLDivElement>(null);\n    const wrapperRef = useRef<HTMLDivElement>(null);\n\n    const overlayRootId = id\n        ? `lifesg-ds-overlay-root-${id}`\n        : \"lifesg-ds-overlay-root\";\n    const zIndex = customZIndex ?? (isStacked ? 99999 : 99998);\n    const { themeProps, themeStyle } = useInheritedThemeScope(show);\n\n    useFloatingParent(zIndex);\n\n    useApplyStyle(rootRef, { [styles.tokens.root.zIndex]: zIndex });\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        initialiseStylesForDocumentBody();\n        setRootElement(getRootElement());\n\n        return () => {\n            removeOverlay();\n\n            if (getOverlayOrder().length < 1) {\n                if (isIOS()) {\n                    applyScrollLockClassForIOS(\"remove\");\n                    scrollToLastScrollPositionForIOS();\n                }\n\n                applyBodyStyleClass(\"remove\");\n            }\n        };\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, []);\n\n    useEffect(() => {\n        if (show) {\n            const isStacked = checkIfStacked();\n            setStacked(isStacked);\n\n            addOverlay();\n\n            if (isIOS() && getOverlayOrder().length === 1) {\n                saveScrollPosition();\n                applyScrollLockClassForIOS(\"add\");\n            }\n\n            const timerId = setTimeout(() => {\n                applyBodyStyleClass(\"add\");\n            }, 200); // Allow overlay animations to complete\n\n            return () => clearTimeout(timerId);\n        } else {\n            removeOverlay();\n\n            if (isIOS() && getOverlayOrder().length < 1) {\n                applyScrollLockClassForIOS(\"remove\");\n                scrollToLastScrollPositionForIOS();\n            }\n\n            const timerId = setTimeout(() => {\n                if (getOverlayOrder().length < 1) {\n                    applyBodyStyleClass(\"remove\");\n                }\n            }, 200); // Allow overlay animations to complete\n\n            return () => clearTimeout(timerId);\n        }\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [show]);\n\n    // Track mousedown origin to distinguish clicks from text selection drags\n    useEffect(() => {\n        if (!show) return;\n\n        document.addEventListener(\"mousedown\", handleDocumentMouseDown, true);\n        return () => {\n            document.removeEventListener(\n                \"mousedown\",\n                handleDocumentMouseDown,\n                true\n            );\n        };\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [show]);\n\n    // =============================================================================\n    // REF FUNCTIONS\n    // =============================================================================\n    const setStacked = (data: boolean) => {\n        stacked.current = data;\n        _setIsStacked(data);\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const isIOS = () => /(iPad|iPhone|iPod)/g.test(navigator.userAgent);\n\n    const getRootElement = (): HTMLElement | null => {\n        if (document && rootId) {\n            return document.getElementById(rootId);\n        } else if (document) {\n            // If rootId not specified, we'll use body\n            return document.body;\n        } else {\n            return null;\n        }\n    };\n\n    const checkIfStacked = () => {\n        return getOverlayOrder().length > 0;\n    };\n\n    const initialiseStylesForDocumentBody = () => {\n        const documentWidth = document.documentElement.clientWidth;\n        const windowWidth = window.innerWidth;\n        const scrollBarWidth = windowWidth - documentWidth;\n\n        document.documentElement.style.setProperty(\n            styles.tokens.global.scrollbarWidth,\n            `${scrollBarWidth}px`\n        );\n    };\n\n    /**\n     * This sets the style of <body> to hide the scrollbar\n     */\n    const applyBodyStyleClass = (action: \"add\" | \"remove\") => {\n        const isOverlayStyleClassApplied = document.body.classList.contains(\n            styles.tokens.global.overlayOpenClass\n        );\n\n        if (action === \"add\" && !isOverlayStyleClassApplied) {\n            document.body.classList.add(styles.tokens.global.overlayOpenClass);\n        } else if (action === \"remove\" && isOverlayStyleClassApplied) {\n            document.body.classList.remove(\n                styles.tokens.global.overlayOpenClass\n            );\n        }\n    };\n\n    const getOverlayOrder = () => {\n        const attr = document.body.dataset.lifesgDsOverlayOrder;\n        return attr ? attr.split(\",\") : [];\n    };\n\n    const addOverlay = () => {\n        const order = getOverlayOrder();\n        document.body.dataset.lifesgDsOverlayOrder = [...order, uid].join(\",\");\n    };\n\n    const removeOverlay = () => {\n        const order = getOverlayOrder();\n        document.body.dataset.lifesgDsOverlayOrder = order\n            .filter((o) => o !== uid)\n            .join(\",\");\n    };\n\n    /**\n     * This sets the style of <body> to further prevent scrolling on iOS\n     *\n     * ref: https://stackoverflow.com/a/57455820/3932279\n     * `overflow: hidden` and `overscroll-behavior` is ignored by iOS, this is\n     * an alternative solution\n     *\n     * as a side effect this causes the scroll position to reset, so additional\n     * logic to restore the scroll on close is required\n     */\n    const applyScrollLockClassForIOS = (action: \"add\" | \"remove\") => {\n        if (!isIOS()) {\n            return;\n        }\n\n        const isClassApplied = document.body.classList.contains(\n            styles.tokens.global.overlayScrollLockClass\n        );\n\n        if (action === \"add\" && !isClassApplied) {\n            document.body.classList.add(\n                styles.tokens.global.overlayScrollLockClass\n            );\n        } else if (action === \"remove\" && isClassApplied) {\n            document.body.classList.remove(\n                styles.tokens.global.overlayScrollLockClass\n            );\n        }\n    };\n\n    const saveScrollPosition = () => {\n        const bodyStyle = document.body.style;\n        const scrollY = bodyStyle.top ? bodyStyle.top : window.scrollY + \"px\";\n\n        document.body.style.setProperty(styles.tokens.global.scrollY, scrollY);\n    };\n\n    const scrollToLastScrollPositionForIOS = () => {\n        if (!isIOS()) {\n            return;\n        }\n\n        const scrollY = document.body.style.getPropertyValue(\n            styles.tokens.global.scrollY\n        );\n        requestAnimationFrame(() => {\n            window.scrollTo({\n                top: parseFloat(scrollY),\n            });\n        });\n    };\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleDocumentMouseDown = (e: MouseEvent) => {\n        const container = containerRef?.current ?? wrapperRef.current;\n        const wrapper = wrapperRef.current;\n        if (!container) {\n            mouseDownInsideModalRef.current = false;\n            return;\n        }\n\n        const target = e.target as Node;\n        const clickedOnWrapper = wrapper === target;\n        const clickedOnContainer = container === target;\n        const clickedInsideContainer = container.contains(target);\n\n        // Track if mousedown started inside modal content\n        mouseDownInsideModalRef.current =\n            !clickedOnWrapper && (clickedOnContainer || clickedInsideContainer);\n    };\n\n    const handleWrapperClick = (event: React.MouseEvent<HTMLDivElement>) => {\n        const container = containerRef?.current ?? wrapperRef.current;\n        const wrapper = wrapperRef.current;\n        if (!container) {\n            mouseDownInsideModalRef.current = false;\n            return;\n        }\n\n        const target = event.target as Node;\n        const clickedOnWrapper = wrapper === target;\n        const clickedOnContainer = container === target;\n        const clickedInsideContainer = container.contains(target);\n        const clickedInsideModal = clickedOnContainer || clickedInsideContainer;\n\n        // Only close if both mousedown AND click happened outside modal\n        if (\n            (clickedOnWrapper || !clickedInsideModal) &&\n            !mouseDownInsideModalRef.current &&\n            onOverlayClick &&\n            enableOverlayClick\n        ) {\n            event.preventDefault();\n            onOverlayClick();\n        }\n\n        mouseDownInsideModalRef.current = false;\n    };\n\n    // =============================================================================\n    // RENDER\n    // =============================================================================\n    const renderWrapper = () => (\n        <FloatingNode id={nodeId}>\n            <div\n                ref={wrapperRef}\n                data-testid=\"overlay-wrapper\"\n                className={clsx(\n                    styles.wrapper,\n                    show ? styles.wrapperShow : styles.wrapperHide,\n                    isStacked && styles.wrapperStacked,\n                    backgroundBlur && styles.wrapperBackgroundBlur,\n                    disableTransition && styles.wrapperDisableTransition\n                )}\n                onClick={handleWrapperClick}\n            >\n                {children}\n            </div>\n        </FloatingNode>\n    );\n\n    const renderComponent = () => (\n        <div\n            ref={rootRef}\n            id={overlayRootId}\n            data-testid={overlayRootId}\n            className={clsx(styles.root, show && styles.rootShow)}\n            {...themeProps}\n            style={themeStyle}\n        >\n            {children && renderWrapper()}\n        </div>\n    );\n\n    return rootElement\n        ? ReactDOM.createPortal(renderComponent(), rootElement)\n        : null;\n};\n\n// @catalog\n/**\n * A full-screen dimmed overlay backdrop.\n *\n * Use `Overlay` as the backdrop for modal dialogs, drawers, and similar\n * blocking UI patterns. It manages body scroll-lock automatically and stacks\n * correctly when multiple overlays are open at once.\n * @keywords backdrop, dim, modal\n */\nexport const Overlay = (props: OverlayProps) => {\n    return (\n        <FloatingTree>\n            <OverlayComponent {...props} />\n        </FloatingTree>\n    );\n};\n"],"names":["OverlayComponent","show","rootId","onOverlayClick","children","backgroundBlur","disableTransition","enableOverlayClick","zIndex","customZIndex","id","containerRef","rootElement","setRootElement","useState","isStacked","_setIsStacked","uid","useId","nodeId","useFloatingNodeId","stacked","useRef","mouseDownInsideModalRef","rootRef","wrapperRef","overlayRootId","themeProps","themeStyle","useInheritedThemeScope","useFloatingParent","useApplyStyle","styles.tokens","root","useEffect","initialiseStylesForDocumentBody","getRootElement","removeOverlay","getOverlayOrder","length","isIOS","applyScrollLockClassForIOS","scrollToLastScrollPositionForIOS","applyBodyStyleClass","checkIfStacked","setStacked","addOverlay","saveScrollPosition","timerId","setTimeout","clearTimeout","document","addEventListener","handleDocumentMouseDown","removeEventListener","data","current","test","navigator","userAgent","getElementById","body","documentWidth","documentElement","clientWidth","scrollBarWidth","window","innerWidth","style","setProperty","global","scrollbarWidth","action","isOverlayStyleClassApplied","classList","contains","overlayOpenClass","remove","add","attr","dataset","lifesgDsOverlayOrder","split","order","join","filter","o","isClassApplied","overlayScrollLockClass","bodyStyle","scrollY","top","getPropertyValue","requestAnimationFrame","scrollTo","parseFloat","e","container","_a","wrapper","target","clickedOnWrapper","clickedOnContainer","clickedInsideContainer","handleWrapperClick","event","preventDefault","ReactDOM","createPortal","_jsx","Object","assign","ref","className","clsx","styles.root","styles.rootShow","FloatingNode","styles.wrapper","styles.wrapperShow","styles.wrapperHide","styles.wrapperStacked","styles.wrapperBackgroundBlur","styles.wrapperDisableTransition","onClick","Overlay","props","FloatingTree"],"mappings":"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"}

package/overlay/overlay.styles.d.ts

@@ -1,10 +1,19 @@
-interface StyleProps {
-    $show: boolean;
-    $backgroundBlur?: boolean | undefined;
-    $disableTransition?: boolean | undefined;
-    $zIndex?: number | undefined;
-    $stacked?: boolean | undefined;
-}
-export declare const Root: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyleProps>> & string;
-export declare const Wrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyleProps>> & string;
-export {};
+export declare const tokens: {
+    readonly global: {
+        readonly scrollY: "--fds-internal-overlay-body-scrollY";
+        readonly scrollbarWidth: "--fds-internal-overlay-body-scrollbarWidth";
+        readonly overlayOpenClass: "lifesg-ds-overlay-open";
+        readonly overlayScrollLockClass: "lifesg-ds-overlay-scroll-lock";
+    };
+    readonly root: {
+        readonly zIndex: "--fds-internal-overlay-root-zIndex";
+    };
+};
+export declare const root: import("@linaria/core").LinariaClassName;
+export declare const rootShow: import("@linaria/core").LinariaClassName;
+export declare const wrapper: import("@linaria/core").LinariaClassName;
+export declare const wrapperStacked: import("@linaria/core").LinariaClassName;
+export declare const wrapperBackgroundBlur: import("@linaria/core").LinariaClassName;
+export declare const wrapperShow: import("@linaria/core").LinariaClassName;
+export declare const wrapperHide: import("@linaria/core").LinariaClassName;
+export declare const wrapperDisableTransition: import("@linaria/core").LinariaClassName;

package/overlay/overlay.styles.js

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

package/overlay/overlay.styles.js.map

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

package/overlay/overlay.styles_12wym18.css

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

package/overlay/types.d.ts

@@ -1,24 +1,69 @@
+/**
+ * Props for the `Overlay` component.
+ */
 export interface OverlayProps {
     children?: JSX.Element | undefined;
+    /**
+     * Controls the visible state of the overlay.
+     *
+     * @default false
+     */
     show?: boolean | undefined;
+    /**
+     * The root element that contains the overlay element, specified by its `id`.
+     *
+     * @remarks
+     * - If `rootId` is provided but no matching element exists, the overlay is not rendered.
+     * - If a parent has a higher `z-index` than the overlay, the overlay may be
+     * obscured.
+     *
+     * @default document.body
+     */
     rootId?: string | undefined;
-    /** @deprecated no longer has effect */
-    backgroundOpacity?: number | undefined;
+    /**
+     * Applies a blur effect to the background behind the overlay.
+     *
+     * @default true
+     */
     backgroundBlur?: boolean | undefined;
+    /**
+     * Disables the enter and exit transition animations.
+     *
+     * @default false
+     */
     disableTransition?: boolean | undefined;
+    /**
+     * Enables `onOverlayClick` to fire when the user clicks outside the
+     * modal content.
+     *
+     * @default false
+     */
     enableOverlayClick?: boolean | undefined;
+    /**
+     * Overrides the CSS `z-index` of the overlay root element.
+     *
+     * @remarks
+     * When omitted, the z-index is auto-assigned: `99999` for stacked overlays (opened on
+     * top of another) and `99998` for the base overlay.
+     */
     zIndex?: number | undefined;
+    /**
+     * Called when the user clicks outside the modal content area. Only fires
+     * when `enableOverlayClick` is `true`.
+     */
     onOverlayClick?: (() => void) | undefined;
+    /**
+     * Sets the `id` attribute of the overlay root element as
+     * `lifesg-ds-overlay-root-${id}`.
+     *
+     * @default "lifesg-ds-overlay-root"
+     */
     id?: string | undefined;
-}
-/**
- * @deprecated For library internal use only
- */
-export interface StyleProps {
-    $show: boolean;
-    $backgroundBlur?: boolean | undefined;
-    $disableTransition?: boolean | undefined;
-    $enableOverlayClick?: boolean | undefined;
-    zIndex?: number | undefined;
-    $stacked?: boolean | undefined;
+    /**
+     * A ref to an element that defines the boundary for outside-click
+     * detection.
+     *
+     * @remarks Falls back to the internal wrapper element when omitted.
+     */
+    containerRef?: React.RefObject<HTMLElement> | undefined;
 }

package/package.json

@@ -1,7 +1,19 @@
 {
   "name": "@lifesg/react-design-system",
-  "version": "4.0.0-alpha.1",
+  "version": "4.0.0-alpha.10",
   "description": "A component design system for LifeSG web apps",
+  "keywords": [
+    "design-system"
+  ],
+  "homepage": "https://github.com/LifeSG/react-design-system#readme",
+  "bugs": {
+    "url": "https://github.com/LifeSG/react-design-system/issues"
+  },
+  "license": "ISC",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/LifeSG/react-design-system.git"
+  },
   "main": "./cjs/index.js",
   "module": "./index.js",
   "types": "./index.d.ts",
@@ -67,12 +79,6 @@
       "require": "./cjs/button/index.js",
       "default": "./button/index.js"
     },
-    "./button-with-icon": {
-      "types": "./button-with-icon/index.d.ts",
-      "import": "./button-with-icon/index.js",
-      "require": "./cjs/button-with-icon/index.js",
-      "default": "./button-with-icon/index.js"
-    },
     "./calendar": {
       "types": "./calendar/index.d.ts",
       "import": "./calendar/index.js",
@@ -151,12 +157,6 @@
       "require": "./cjs/error-display/index.js",
       "default": "./error-display/index.js"
     },
-    "./example": {
-      "types": "./example/index.d.ts",
-      "import": "./example/index.js",
-      "require": "./cjs/example/index.js",
-      "default": "./example/index.js"
-    },
     "./feedback-rating": {
       "types": "./feedback-rating/index.d.ts",
       "import": "./feedback-rating/index.js",
@@ -205,12 +205,6 @@
       "require": "./cjs/histogram-slider/index.js",
       "default": "./histogram-slider/index.js"
     },
-    "./icon-button": {
-      "types": "./icon-button/index.d.ts",
-      "import": "./icon-button/index.js",
-      "require": "./cjs/icon-button/index.js",
-      "default": "./icon-button/index.js"
-    },
     "./image-button": {
       "types": "./image-button/index.d.ts",
       "import": "./image-button/index.js",
@@ -277,6 +271,12 @@
       "require": "./cjs/input-textarea/index.js",
       "default": "./input-textarea/index.js"
     },
+    "./language-switcher": {
+      "types": "./language-switcher/index.d.ts",
+      "import": "./language-switcher/index.js",
+      "require": "./cjs/language-switcher/index.js",
+      "default": "./language-switcher/index.js"
+    },
     "./layout": {
       "types": "./layout/index.d.ts",
       "import": "./layout/index.js",
@@ -307,12 +307,6 @@
       "require": "./cjs/masked-input/index.js",
       "default": "./masked-input/index.js"
     },
-    "./masonry": {
-      "types": "./masonry/index.d.ts",
-      "import": "./masonry/index.js",
-      "require": "./cjs/masonry/index.js",
-      "default": "./masonry/index.js"
-    },
     "./masthead": {
       "types": "./masthead/index.d.ts",
       "import": "./masthead/index.js",
@@ -391,12 +385,6 @@
       "require": "./cjs/popover/index.js",
       "default": "./popover/index.js"
     },
-    "./popover-v2": {
-      "types": "./popover-v2/index.d.ts",
-      "import": "./popover-v2/index.js",
-      "require": "./cjs/popover-v2/index.js",
-      "default": "./popover-v2/index.js"
-    },
     "./predictive-text-input": {
       "types": "./predictive-text-input/index.d.ts",
       "import": "./predictive-text-input/index.js",
@@ -529,12 +517,6 @@
       "require": "./cjs/toggle/index.js",
       "default": "./toggle/index.js"
     },
-    "./tooltip": {
-      "types": "./tooltip/index.d.ts",
-      "import": "./tooltip/index.js",
-      "require": "./cjs/tooltip/index.js",
-      "default": "./tooltip/index.js"
-    },
     "./typography": {
       "types": "./typography/index.d.ts",
       "import": "./typography/index.js",
@@ -552,68 +534,14 @@
       "import": "./unit-number/index.js",
       "require": "./cjs/unit-number/index.js",
       "default": "./unit-number/index.js"
-    },
-    "./v2_color": {
-      "types": "./v2_color/index.d.ts",
-      "import": "./v2_color/index.js",
-      "require": "./cjs/v2_color/index.js",
-      "default": "./v2_color/index.js"
-    },
-    "./v2_design-token": {
-      "types": "./v2_design-token/index.d.ts",
-      "import": "./v2_design-token/index.js",
-      "require": "./cjs/v2_design-token/index.js",
-      "default": "./v2_design-token/index.js"
-    },
-    "./v2_layout": {
-      "types": "./v2_layout/index.d.ts",
-      "import": "./v2_layout/index.js",
-      "require": "./cjs/v2_layout/index.js",
-      "default": "./v2_layout/index.js"
-    },
-    "./v2_media": {
-      "types": "./v2_media/index.d.ts",
-      "import": "./v2_media/index.js",
-      "require": "./cjs/v2_media/index.js",
-      "default": "./v2_media/index.js"
-    },
-    "./v2_text": {
-      "types": "./v2_text/index.d.ts",
-      "import": "./v2_text/index.js",
-      "require": "./cjs/v2_text/index.js",
-      "default": "./v2_text/index.js"
-    },
-    "./v2_text-list": {
-      "types": "./v2_text-list/index.d.ts",
-      "import": "./v2_text-list/index.js",
-      "require": "./cjs/v2_text-list/index.js",
-      "default": "./v2_text-list/index.js"
-    },
-    "./v2_theme": {
-      "types": "./v2_theme/index.d.ts",
-      "import": "./v2_theme/index.js",
-      "require": "./cjs/v2_theme/index.js",
-      "default": "./v2_theme/index.js"
-    },
-    "./v2_transition": {
-      "types": "./v2_transition/index.d.ts",
-      "import": "./v2_transition/index.js",
-      "require": "./cjs/v2_transition/index.js",
-      "default": "./v2_transition/index.js"
-    },
-    "./v3_theme": {
-      "types": "./v3_theme/index.d.ts",
-      "import": "./v3_theme/index.js",
-      "require": "./cjs/v3_theme/index.js",
-      "default": "./v3_theme/index.js"
     }
   },
   "dependencies": {
+    "@react-aria/live-announcer": "^3.4.4",
     "@react-spring/web": "^10.0.1",
     "clsx": "^2.1.1",
     "fabric": "^7.2.0",
     "immer": "^10.0.2",
-    "react-slider": "^2.0.6",
     "react-virtuoso": "^4.12.5",
     "react-zoom-pan-pinch": "^3.3.0"
   },
@@ -621,7 +549,6 @@
     "@floating-ui/react": ">=0.26.23 <1.0.0",
     "@lifesg/react-icons": "^1.5.0",
     "react": "^17.0.2 || ^18.0.0 || ^19.0.0",
-    "react-dom": "^17.0.2 || ^18.0.0 || ^19.0.0",
-    "styled-components": "^6.1.19"
+    "react-dom": "^17.0.2 || ^18.0.0 || ^19.0.0"
   }
 }

package/pagination/pagination.d.ts

@@ -1,3 +1,9 @@
 import React from "react";
 import type { PaginationProps } from "./types";
+/**
+ * A navigation control for moving through paged content.
+ *
+ * Use `Pagination` to let users navigate between pages of a data set.
+ * @keywords navigation, pager, pages
+ */
 export declare const Pagination: (props: PaginationProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null;

package/pagination/pagination.js

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