@lifesg/react-design-system 4.0.0-alpha.5 → 4.0.0-alpha.7

package/countdown-timer/countdown-timer.js.map

@@ -1 +1 @@
-{"version":3,"file":"countdown-timer.js","sources":["../../src/countdown-timer/countdown-timer.tsx"],"sourcesContent":["import { ClockIcon } from \"@lifesg/react-icons\";\nimport clsx from \"clsx\";\nimport throttle from \"lodash/throttle\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { useInView } from \"react-intersection-observer\";\n\nimport { inertValue, VisuallyHidden } from \"../shared/accessibility\";\nimport {\n    formatUnitValue,\n    useApplyStyle,\n    useMaxWidthMediaQuery,\n} from \"../theme\";\nimport { useIsMounted } from \"../util\";\nimport { TimeHelper } from \"../util/time-helper\";\nimport * as styles from \"./countdown-timer.styles\";\nimport type { CountdownTimerProps } from \"./types\";\nimport { useTimer } from \"./use-timer\";\n\n/**\n * Displays a live countdown of time remaining until a deadline.\n *\n * Use when a time-limited interaction — such as a session timeout or a timed\n * form — needs a persistent visual reminder.\n */\nexport const CountdownTimer = ({\n    className,\n    align = \"right\",\n    timer,\n    timestamp,\n    notifyTimer,\n    offset,\n    mobileOffset,\n    show,\n    fixed = true,\n    reminderInterval = 120,\n    \"data-testid\": testId,\n    onFinish,\n    onNotify,\n    onTick,\n    ...otherProps\n}: CountdownTimerProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const fixedCountdownRef = useRef<HTMLDivElement>(null);\n\n    const isNotified = useRef<boolean>(false);\n    const [offsetY, setOffsetY] = useState<number>(0);\n    const [clientRectRight, setClientRectRight] = useState<number>(0);\n    const [clientRectX, setClientRectX] = useState<number>(0);\n    const [isPlaying, setIsPlaying] = useState(false);\n    const [announcement, setAnnouncement] = useState<string>(\"\");\n\n    const isMounted = useIsMounted();\n    const [remainingSeconds, initialSeconds] = useTimer(\n        timer,\n        timestamp,\n        isPlaying\n    );\n    const { ref: stickyRef, inView } = useInView({\n        threshold: 1,\n        rootMargin: `${offsetY * -1}px 0px 0px 0px`,\n        initialInView: true,\n    });\n    const isVisible = !fixed || inView;\n    const warn =\n        typeof notifyTimer === \"number\" && remainingSeconds <= notifyTimer;\n\n    const isMobile = useMaxWidthMediaQuery(\"sm\");\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n\n    useApplyStyle(fixedCountdownRef, {\n        [styles.tokens.fixedCountdown.top]: formatUnitValue(offsetY, \"px\"),\n        [styles.tokens.fixedCountdown.left]: formatUnitValue(\n            getOffsetLeft(),\n            \"px\"\n        ),\n        [styles.tokens.fixedCountdown.right]: formatUnitValue(\n            getOffsetRight(),\n            \"px\"\n        ),\n    });\n\n    useEffect(() => {\n        setIsPlaying(show);\n    }, [show]);\n\n    useEffect(() => {\n        if (remainingSeconds === 0) {\n            performOnFinishHandler();\n        } else if (\n            typeof notifyTimer === \"number\" &&\n            remainingSeconds <= notifyTimer\n        ) {\n            performOnTickHandler();\n            performOnNotifyHandler();\n        }\n    }, [remainingSeconds]);\n\n    useEffect(() => {\n        const y = getOffsetY();\n        setOffsetY(y);\n    }, [isMobile, offset?.top, mobileOffset?.top]);\n\n    useEffect(() => {\n        if (wrapperRef.current) {\n            const handleResize = throttle(handleWindowResize, 300);\n            handleWindowResize();\n\n            window.addEventListener(\"resize\", handleResize);\n\n            return () => {\n                window.removeEventListener(\"resize\", handleResize);\n            };\n        }\n    }, [wrapperRef.current]);\n\n    // Announcements\n    useEffect(() => {\n        const timeElapsed = initialSeconds - remainingSeconds;\n        if (timeElapsed === 0) return;\n        // Polite notification\n        if (timeElapsed % reminderInterval === 0) {\n            if (\n                typeof notifyTimer !== \"number\" ||\n                remainingSeconds > notifyTimer\n            ) {\n                setAnnouncement(getAccessibleTimeText(remainingSeconds));\n            }\n        }\n\n        // Assertive notification\n        if (\n            typeof notifyTimer === \"number\" &&\n            remainingSeconds === notifyTimer\n        ) {\n            setAnnouncement(getAccessibleTimeText(remainingSeconds));\n        }\n    }, [remainingSeconds, initialSeconds, reminderInterval, notifyTimer]);\n\n    useEffect(() => {\n        // reset\n        isNotified.current = false;\n    }, [initialSeconds, show]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleWindowResize = () => {\n        if (!wrapperRef.current) return;\n\n        const clientRect = wrapperRef.current.getBoundingClientRect();\n\n        setClientRectX(clientRect.x);\n        setClientRectRight(clientRect.right);\n    };\n\n    const handleOnFocus = () => {\n        const focusMessage = getAccessibleTimeText(remainingSeconds);\n        setAnnouncement(focusMessage);\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n\n    const performOnTickHandler = () => {\n        if (onTick) {\n            onTick(remainingSeconds);\n        }\n    };\n\n    const performOnNotifyHandler = () => {\n        if (onNotify && !isNotified.current) {\n            isNotified.current = true;\n            onNotify();\n        }\n    };\n\n    const performOnFinishHandler = () => {\n        setIsPlaying(false);\n\n        if (onFinish) onFinish();\n    };\n\n    function getOffsetY() {\n        const desktopTop = offset?.top ?? 168;\n        const mobileTop = mobileOffset?.top ?? 80;\n        const offsetY = isMobile ? mobileTop : desktopTop;\n\n        return offsetY;\n    }\n\n    function getOffsetLeft() {\n        if (!isMounted || align !== \"left\") return undefined;\n        return offset?.left ?? clientRectX;\n    }\n\n    function getOffsetRight() {\n        if (!isMounted || align !== \"right\") return undefined;\n        return (\n            offset?.right ??\n            Math.floor(document.body.clientWidth - clientRectRight)\n        );\n    }\n\n    const getAccessibleTimeText = (seconds: number): string => {\n        const { minutes, seconds: secs } = TimeHelper.toMinutesSeconds(seconds);\n\n        const minuteText = minutes === 1 ? \"minute\" : \"minutes\";\n        const secondText = secs === 1 ? \"second\" : \"seconds\";\n\n        if (minutes > 0 && secs > 0) {\n            return `Time left: ${minutes} ${minuteText} and ${secs} ${secondText}`;\n        } else if (minutes > 0) {\n            return `Time left: ${minutes} ${minuteText}`;\n        } else {\n            return `Time left: ${secs} ${secondText}`;\n        }\n    };\n    // =============================================================================\n    // RENDER FUNCTION\n    // =============================================================================\n\n    const renderPeriodicAndWarningAnnouncement = () => (\n        <VisuallyHidden\n            aria-live={\n                typeof notifyTimer === \"number\" &&\n                remainingSeconds <= notifyTimer\n                    ? \"assertive\"\n                    : \"polite\"\n            }\n            aria-atomic=\"true\"\n        >\n            {announcement}\n        </VisuallyHidden>\n    );\n\n    const renderTimer = () => {\n        const { minutes, seconds } =\n            TimeHelper.toMinutesSeconds(remainingSeconds);\n        const m = minutes !== 1 ? \"mins\" : \"min\";\n        const s = seconds !== 1 ? \"secs\" : \"sec\";\n        return (\n            <>\n                <ClockIcon className={styles.timerIcon} data-warn={!!warn} />\n                <div className={styles.timeLeft}>Time left:</div>\n                <div\n                    className={styles.timer}\n                    aria-label={getAccessibleTimeText(remainingSeconds)}\n                >\n                    {minutes} {m} {String(seconds).padStart(2, \"0\")} {s}\n                </div>\n                {renderPeriodicAndWarningAnnouncement()}\n            </>\n        );\n    };\n\n    const renderInlineCountdown = () => {\n        return (\n            <div\n                data-testid={testId}\n                data-id=\"countdown-wrapper\"\n                data-warn={!!warn}\n                ref={wrapperRef}\n                inert={inertValue(!isVisible)}\n                className={clsx(\n                    styles.countdown,\n                    styles.countdownInline,\n                    !isVisible && styles.countdownHidden\n                )}\n                tabIndex={0}\n                role=\"timer\"\n                aria-label=\"Countdown timer\"\n                onFocus={handleOnFocus}\n            >\n                {renderTimer()}\n            </div>\n        );\n    };\n\n    const renderFixedCountdown = () => {\n        return (\n            <div\n                ref={fixedCountdownRef}\n                data-testid={testId}\n                data-id=\"fixed-countdown-wrapper\"\n                data-warn={!!warn}\n                className={clsx(styles.countdown, styles.countdownFixed)}\n                tabIndex={0}\n                role=\"timer\"\n                aria-label=\"Countdown timer\"\n                onFocus={handleOnFocus}\n            >\n                {renderTimer()}\n            </div>\n        );\n    };\n\n    if (!isPlaying && remainingSeconds !== 0) return <></>;\n\n    return (\n        <div className={clsx(styles.wrapper, className)} {...otherProps}>\n            <div ref={stickyRef}></div>\n            {renderInlineCountdown()}\n            {wrapperRef.current && !isVisible && renderFixedCountdown()}\n        </div>\n    );\n};\n"],"names":["CountdownTimer","_a","className","align","timer","timestamp","notifyTimer","offset","mobileOffset","show","fixed","reminderInterval","testId","onFinish","onNotify","onTick","otherProps","__rest","wrapperRef","useRef","fixedCountdownRef","isNotified","offsetY","setOffsetY","useState","clientRectRight","setClientRectRight","clientRectX","setClientRectX","isPlaying","setIsPlaying","announcement","setAnnouncement","isMounted","useIsMounted","remainingSeconds","initialSeconds","useTimer","ref","stickyRef","inView","useInView","threshold","rootMargin","initialInView","isVisible","warn","isMobile","useMaxWidthMediaQuery","useApplyStyle","styles.tokens","fixedCountdown","top","formatUnitValue","left","getOffsetLeft","right","Math","floor","document","body","clientWidth","getOffsetRight","useEffect","performOnFinishHandler","performOnTickHandler","performOnNotifyHandler","y","desktopTop","mobileTop","_b","getOffsetY","current","handleResize","throttle","handleWindowResize","window","addEventListener","removeEventListener","timeElapsed","getAccessibleTimeText","clientRect","getBoundingClientRect","x","handleOnFocus","focusMessage","seconds","minutes","secs","TimeHelper","toMinutesSeconds","minuteText","secondText","renderTimer","m","s","_jsxs","_Fragment","children","_jsx","ClockIcon","styles.timerIcon","styles.timeLeft","styles.timer","String","padStart","VisuallyHidden","Object","assign","clsx","styles.wrapper","inert","inertValue","styles.countdown","styles.countdownInline","styles.countdownHidden","tabIndex","role","onFocus","styles.countdownFixed"],"mappings":"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"}
+{"version":3,"file":"countdown-timer.js","sources":["../../src/countdown-timer/countdown-timer.tsx"],"sourcesContent":["import { ClockIcon } from \"@lifesg/react-icons\";\nimport clsx from \"clsx\";\nimport throttle from \"lodash/throttle\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { useInView } from \"react-intersection-observer\";\n\nimport { inertValue, VisuallyHidden } from \"../shared/accessibility\";\nimport {\n    formatUnitValue,\n    useApplyStyle,\n    useMaxWidthMediaQuery,\n} from \"../theme\";\nimport { useIsMounted } from \"../util\";\nimport { TimeHelper } from \"../util/time-helper\";\nimport * as styles from \"./countdown-timer.styles\";\nimport type { CountdownTimerProps } from \"./types\";\nimport { useTimer } from \"./use-timer\";\n\n// @catalog\n/**\n * Displays a live countdown of time remaining until a deadline.\n *\n * Use when a time-limited interaction — such as a session timeout or a timed\n * form — needs a persistent visual reminder.\n */\nexport const CountdownTimer = ({\n    className,\n    align = \"right\",\n    timer,\n    timestamp,\n    notifyTimer,\n    offset,\n    mobileOffset,\n    show,\n    fixed = true,\n    reminderInterval = 120,\n    \"data-testid\": testId,\n    onFinish,\n    onNotify,\n    onTick,\n    ...otherProps\n}: CountdownTimerProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const fixedCountdownRef = useRef<HTMLDivElement>(null);\n\n    const isNotified = useRef<boolean>(false);\n    const [offsetY, setOffsetY] = useState<number>(0);\n    const [clientRectRight, setClientRectRight] = useState<number>(0);\n    const [clientRectX, setClientRectX] = useState<number>(0);\n    const [isPlaying, setIsPlaying] = useState(false);\n    const [announcement, setAnnouncement] = useState<string>(\"\");\n\n    const isMounted = useIsMounted();\n    const [remainingSeconds, initialSeconds] = useTimer(\n        timer,\n        timestamp,\n        isPlaying\n    );\n    const { ref: stickyRef, inView } = useInView({\n        threshold: 1,\n        rootMargin: `${offsetY * -1}px 0px 0px 0px`,\n        initialInView: true,\n    });\n    const isVisible = !fixed || inView;\n    const warn =\n        typeof notifyTimer === \"number\" && remainingSeconds <= notifyTimer;\n\n    const isMobile = useMaxWidthMediaQuery(\"sm\");\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n\n    useApplyStyle(fixedCountdownRef, {\n        [styles.tokens.fixedCountdown.top]: formatUnitValue(offsetY, \"px\"),\n        [styles.tokens.fixedCountdown.left]: formatUnitValue(\n            getOffsetLeft(),\n            \"px\"\n        ),\n        [styles.tokens.fixedCountdown.right]: formatUnitValue(\n            getOffsetRight(),\n            \"px\"\n        ),\n    });\n\n    useEffect(() => {\n        setIsPlaying(show);\n    }, [show]);\n\n    useEffect(() => {\n        if (remainingSeconds === 0) {\n            performOnFinishHandler();\n        } else if (\n            typeof notifyTimer === \"number\" &&\n            remainingSeconds <= notifyTimer\n        ) {\n            performOnTickHandler();\n            performOnNotifyHandler();\n        }\n    }, [remainingSeconds]);\n\n    useEffect(() => {\n        const y = getOffsetY();\n        setOffsetY(y);\n    }, [isMobile, offset?.top, mobileOffset?.top]);\n\n    useEffect(() => {\n        if (wrapperRef.current) {\n            const handleResize = throttle(handleWindowResize, 300);\n            handleWindowResize();\n\n            window.addEventListener(\"resize\", handleResize);\n\n            return () => {\n                window.removeEventListener(\"resize\", handleResize);\n            };\n        }\n    }, [wrapperRef.current]);\n\n    // Announcements\n    useEffect(() => {\n        const timeElapsed = initialSeconds - remainingSeconds;\n        if (timeElapsed === 0) return;\n        // Polite notification\n        if (timeElapsed % reminderInterval === 0) {\n            if (\n                typeof notifyTimer !== \"number\" ||\n                remainingSeconds > notifyTimer\n            ) {\n                setAnnouncement(getAccessibleTimeText(remainingSeconds));\n            }\n        }\n\n        // Assertive notification\n        if (\n            typeof notifyTimer === \"number\" &&\n            remainingSeconds === notifyTimer\n        ) {\n            setAnnouncement(getAccessibleTimeText(remainingSeconds));\n        }\n    }, [remainingSeconds, initialSeconds, reminderInterval, notifyTimer]);\n\n    useEffect(() => {\n        // reset\n        isNotified.current = false;\n    }, [initialSeconds, show]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleWindowResize = () => {\n        if (!wrapperRef.current) return;\n\n        const clientRect = wrapperRef.current.getBoundingClientRect();\n\n        setClientRectX(clientRect.x);\n        setClientRectRight(clientRect.right);\n    };\n\n    const handleOnFocus = () => {\n        const focusMessage = getAccessibleTimeText(remainingSeconds);\n        setAnnouncement(focusMessage);\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n\n    const performOnTickHandler = () => {\n        if (onTick) {\n            onTick(remainingSeconds);\n        }\n    };\n\n    const performOnNotifyHandler = () => {\n        if (onNotify && !isNotified.current) {\n            isNotified.current = true;\n            onNotify();\n        }\n    };\n\n    const performOnFinishHandler = () => {\n        setIsPlaying(false);\n\n        if (onFinish) onFinish();\n    };\n\n    function getOffsetY() {\n        const desktopTop = offset?.top ?? 168;\n        const mobileTop = mobileOffset?.top ?? 80;\n        const offsetY = isMobile ? mobileTop : desktopTop;\n\n        return offsetY;\n    }\n\n    function getOffsetLeft() {\n        if (!isMounted || align !== \"left\") return undefined;\n        return offset?.left ?? clientRectX;\n    }\n\n    function getOffsetRight() {\n        if (!isMounted || align !== \"right\") return undefined;\n        return (\n            offset?.right ??\n            Math.floor(document.body.clientWidth - clientRectRight)\n        );\n    }\n\n    const getAccessibleTimeText = (seconds: number): string => {\n        const { minutes, seconds: secs } = TimeHelper.toMinutesSeconds(seconds);\n\n        const minuteText = minutes === 1 ? \"minute\" : \"minutes\";\n        const secondText = secs === 1 ? \"second\" : \"seconds\";\n\n        if (minutes > 0 && secs > 0) {\n            return `Time left: ${minutes} ${minuteText} and ${secs} ${secondText}`;\n        } else if (minutes > 0) {\n            return `Time left: ${minutes} ${minuteText}`;\n        } else {\n            return `Time left: ${secs} ${secondText}`;\n        }\n    };\n    // =============================================================================\n    // RENDER FUNCTION\n    // =============================================================================\n\n    const renderPeriodicAndWarningAnnouncement = () => (\n        <VisuallyHidden\n            aria-live={\n                typeof notifyTimer === \"number\" &&\n                remainingSeconds <= notifyTimer\n                    ? \"assertive\"\n                    : \"polite\"\n            }\n            aria-atomic=\"true\"\n        >\n            {announcement}\n        </VisuallyHidden>\n    );\n\n    const renderTimer = () => {\n        const { minutes, seconds } =\n            TimeHelper.toMinutesSeconds(remainingSeconds);\n        const m = minutes !== 1 ? \"mins\" : \"min\";\n        const s = seconds !== 1 ? \"secs\" : \"sec\";\n        return (\n            <>\n                <ClockIcon className={styles.timerIcon} data-warn={!!warn} />\n                <div className={styles.timeLeft}>Time left:</div>\n                <div\n                    className={styles.timer}\n                    aria-label={getAccessibleTimeText(remainingSeconds)}\n                >\n                    {minutes} {m} {String(seconds).padStart(2, \"0\")} {s}\n                </div>\n                {renderPeriodicAndWarningAnnouncement()}\n            </>\n        );\n    };\n\n    const renderInlineCountdown = () => {\n        return (\n            <div\n                data-testid={testId}\n                data-id=\"countdown-wrapper\"\n                data-warn={!!warn}\n                ref={wrapperRef}\n                inert={inertValue(!isVisible)}\n                className={clsx(\n                    styles.countdown,\n                    styles.countdownInline,\n                    !isVisible && styles.countdownHidden\n                )}\n                tabIndex={0}\n                role=\"timer\"\n                aria-label=\"Countdown timer\"\n                onFocus={handleOnFocus}\n            >\n                {renderTimer()}\n            </div>\n        );\n    };\n\n    const renderFixedCountdown = () => {\n        return (\n            <div\n                ref={fixedCountdownRef}\n                data-testid={testId}\n                data-id=\"fixed-countdown-wrapper\"\n                data-warn={!!warn}\n                className={clsx(styles.countdown, styles.countdownFixed)}\n                tabIndex={0}\n                role=\"timer\"\n                aria-label=\"Countdown timer\"\n                onFocus={handleOnFocus}\n            >\n                {renderTimer()}\n            </div>\n        );\n    };\n\n    if (!isPlaying && remainingSeconds !== 0) return <></>;\n\n    return (\n        <div className={clsx(styles.wrapper, className)} {...otherProps}>\n            <div ref={stickyRef}></div>\n            {renderInlineCountdown()}\n            {wrapperRef.current && !isVisible && renderFixedCountdown()}\n        </div>\n    );\n};\n"],"names":["CountdownTimer","_a","className","align","timer","timestamp","notifyTimer","offset","mobileOffset","show","fixed","reminderInterval","testId","onFinish","onNotify","onTick","otherProps","__rest","wrapperRef","useRef","fixedCountdownRef","isNotified","offsetY","setOffsetY","useState","clientRectRight","setClientRectRight","clientRectX","setClientRectX","isPlaying","setIsPlaying","announcement","setAnnouncement","isMounted","useIsMounted","remainingSeconds","initialSeconds","useTimer","ref","stickyRef","inView","useInView","threshold","rootMargin","initialInView","isVisible","warn","isMobile","useMaxWidthMediaQuery","useApplyStyle","styles.tokens","fixedCountdown","top","formatUnitValue","left","getOffsetLeft","right","Math","floor","document","body","clientWidth","getOffsetRight","useEffect","performOnFinishHandler","performOnTickHandler","performOnNotifyHandler","y","desktopTop","mobileTop","_b","getOffsetY","current","handleResize","throttle","handleWindowResize","window","addEventListener","removeEventListener","timeElapsed","getAccessibleTimeText","clientRect","getBoundingClientRect","x","handleOnFocus","focusMessage","seconds","minutes","secs","TimeHelper","toMinutesSeconds","minuteText","secondText","renderTimer","m","s","_jsxs","_Fragment","children","_jsx","ClockIcon","styles.timerIcon","styles.timeLeft","styles.timer","String","padStart","VisuallyHidden","Object","assign","clsx","styles.wrapper","inert","inertValue","styles.countdown","styles.countdownInline","styles.countdownHidden","tabIndex","role","onFocus","styles.countdownFixed"],"mappings":"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"}

package/countdown-timer/types.d.ts

@@ -71,18 +71,18 @@ interface CountdownTimerBaseProps extends React.HTMLAttributes<HTMLDivElement> {
      */
     reminderInterval?: number | undefined;
 }
-/** Props for the duration-based variant. Supply `timer` to count down from a fixed number of seconds. */
-interface TimerProps extends CountdownTimerBaseProps {
+/** Props for the duration-based variant. */
+interface TimerProps {
     /** Duration of the countdown in seconds. */
     timer: number;
     timestamp?: number | undefined;
 }
-/** Props for the deadline-based variant. Supply `timestamp` to count down to an absolute point in time. */
-interface TimestampProps extends CountdownTimerBaseProps {
+/** Props for the deadline-based variant. */
+interface TimestampProps {
     /** Unix timestamp (milliseconds since Jan 1, 1970) at which the countdown ends. */
     timestamp: number;
     timer?: number | undefined;
 }
-/** Props for `CountdownTimer`. Provide either `timer` (duration in seconds) or `timestamp` (Unix ms deadline). */
-export type CountdownTimerProps = TimerProps | TimestampProps;
+/** Props for `CountdownTimer` component. */
+export type CountdownTimerProps = CountdownTimerBaseProps & (TimerProps | TimestampProps);
 export {};

package/dashed-border/dashed-border.js.map

@@ -1 +1 @@
-{"version":3,"file":"dashed-border.js","sources":["../../src/dashed-border/dashed-border.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { forwardRef, useRef } from \"react\";\n\nimport { BorderThickness, Colour, Radius, useApplyStyle } from \"../theme\";\nimport { toCssValue, useResolvedTokenValue } from \"../theme/utils\";\nimport { mergeRefs } from \"../util\";\nimport {\n    isColourToken,\n    isRadiusToken,\n    isThicknessToken,\n} from \"../util/styling-helper\";\nimport * as styles from \"./dashed-border.styles\";\nimport { createSvgBackgroundImage } from \"./dashed-border.utils\";\nimport type { DashedBorderProps } from \"./types\";\n\nconst Component = (\n    props: DashedBorderProps,\n    ref: React.Ref<HTMLDivElement>\n) => {\n    const {\n        enabled = true,\n        thickness = BorderThickness[\"width-010\"],\n        radius = Radius[\"none\"],\n        colour = Colour[\"border\"],\n        backgroundColor,\n        className,\n        children,\n        ...otherProps\n    } = props;\n\n    const effectiveThickness = useResolvedTokenValue({\n        value: thickness,\n        fallback: BorderThickness[\"width-010\"],\n        isToken: isThicknessToken,\n        normalizeCustom: toCssValue,\n    });\n\n    const effectiveRadius = useResolvedTokenValue({\n        value: radius,\n        fallback: Radius[\"none\"],\n        isToken: isRadiusToken,\n        normalizeCustom: toCssValue,\n    });\n\n    const effectiveColour = useResolvedTokenValue({\n        value: colour,\n        fallback: Colour[\"border\"],\n        isToken: isColourToken,\n        normalizeCustom: String,\n    });\n\n    const effectiveBackgroundColor = useResolvedTokenValue({\n        value: backgroundColor,\n        fallback: \"none\",\n        isToken: isColourToken,\n        normalizeCustom: String,\n    });\n\n    const showSvg = enabled || !!backgroundColor;\n    const overlayBackgroundImage = createSvgBackgroundImage({\n        radius: effectiveRadius,\n        colour: effectiveColour,\n        thickness: effectiveThickness,\n        enabled,\n    });\n    const rootRef = useRef<HTMLDivElement>(null);\n    const overlayRef = useRef<HTMLDivElement>(null);\n    const mergedRootRef = ref ? mergeRefs(rootRef, ref) : rootRef;\n\n    useApplyStyle(rootRef, {\n        [styles.tokens.rootRadius]: effectiveRadius,\n        [styles.tokens.rootBackgroundColor]: backgroundColor\n            ? effectiveBackgroundColor\n            : null,\n    });\n\n    useApplyStyle(overlayRef, {\n        [styles.tokens.overlayBackgroundImage]: showSvg\n            ? overlayBackgroundImage\n            : null,\n    });\n\n    return (\n        <div\n            ref={mergedRootRef}\n            className={clsx(styles.root, className)}\n            {...otherProps}\n        >\n            {showSvg && (\n                <div\n                    aria-hidden=\"true\"\n                    className={styles.overlay}\n                    ref={overlayRef}\n                />\n            )}\n            {children}\n        </div>\n    );\n};\n\n/**\n * A container that renders a dashed border using an SVG overlay.\n *\n * Use when you need a dashed visual boundary around content — for example, drop zones,\n * placeholder regions, or empty-state containers.\n */\nexport const DashedBorder = forwardRef(Component);\n"],"names":["DashedBorder","forwardRef","props","ref","enabled","thickness","BorderThickness","radius","Radius","colour","Colour","backgroundColor","className","children","otherProps","__rest","effectiveThickness","useResolvedTokenValue","value","fallback","isToken","isThicknessToken","normalizeCustom","toCssValue","effectiveRadius","isRadiusToken","effectiveColour","isColourToken","String","effectiveBackgroundColor","showSvg","overlayBackgroundImage","createSvgBackgroundImage","rootRef","useRef","overlayRef","mergedRootRef","mergeRefs","useApplyStyle","styles.tokens","rootRadius","rootBackgroundColor","_jsxs","Object","assign","clsx","styles.root","_jsx","styles.overlay"],"mappings":"+qCAeA,MA2FaA,EAAeC,GA3FV,CACdC,EACAC,KAEA,MAAMC,QACFA,GAAU,EAAIC,UACdA,EAAYC,EAAgB,aAAYC,OACxCA,EAASC,EAAa,KAACC,OACvBA,EAASC,EAAe,OAACC,gBACzBA,EAAeC,UACfA,EAASC,SACTA,GAEAX,EADGY,EAAUC,EACbb,EATE,CAAA,UAAA,YAAA,SAAA,SAAA,kBAAA,YAAA,aAWAc,EAAqBC,EAAsB,CAC7CC,MAAOb,EACPc,SAAUb,EAAgB,aAC1Bc,QAASC,EACTC,gBAAiBC,IAGfC,EAAkBP,EAAsB,CAC1CC,MAAOX,EACPY,SAAUX,EAAa,KACvBY,QAASK,EACTH,gBAAiBC,IAGfG,EAAkBT,EAAsB,CAC1CC,MAAOT,EACPU,SAAUT,EAAe,OACzBU,QAASO,EACTL,gBAAiBM,SAGfC,EAA2BZ,EAAsB,CACnDC,MAAOP,EACPQ,SAAU,OACVC,QAASO,EACTL,gBAAiBM,SAGfE,EAAU1B,KAAaO,EACvBoB,EAAyBC,EAAyB,CACpDzB,OAAQiB,EACRf,OAAQiB,EACRrB,UAAWW,EACXZ,YAEE6B,EAAUC,EAAuB,MACjCC,EAAaD,EAAuB,MACpCE,EAAgBjC,EAAMkC,EAAUJ,EAAS9B,GAAO8B,EAetD,OAbAK,EAAcL,EAAS,CACnB,CAACM,EAAcC,YAAahB,EAC5B,CAACe,EAAcE,qBAAsB9B,EAC/BkB,EACA,OAGVS,EAAcH,EAAY,CACtB,CAACI,EAAcR,wBAAyBD,EAClCC,EACA,OAINW,EAAA,MAAAC,OAAAC,OAAA,CACIzC,IAAKiC,EACLxB,UAAWiC,EAAKC,EAAalC,IACzBE,EAAU,CAAAD,SAAA,CAEbiB,GACGiB,uBACgB,OACZnC,UAAWoC,EACX7C,IAAKgC,IAGZtB,KACC"}
+{"version":3,"file":"dashed-border.js","sources":["../../src/dashed-border/dashed-border.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { forwardRef, useRef } from \"react\";\n\nimport { BorderThickness, Colour, Radius, useApplyStyle } from \"../theme\";\nimport { toCssValue, useResolvedTokenValue } from \"../theme/utils\";\nimport { mergeRefs } from \"../util\";\nimport {\n    isColourToken,\n    isRadiusToken,\n    isThicknessToken,\n} from \"../util/styling-helper\";\nimport * as styles from \"./dashed-border.styles\";\nimport { createSvgBackgroundImage } from \"./dashed-border.utils\";\nimport type { DashedBorderProps } from \"./types\";\n\nconst Component = (\n    props: DashedBorderProps,\n    ref: React.Ref<HTMLDivElement>\n) => {\n    const {\n        enabled = true,\n        thickness = BorderThickness[\"width-010\"],\n        radius = Radius[\"none\"],\n        colour = Colour[\"border\"],\n        backgroundColor,\n        className,\n        children,\n        ...otherProps\n    } = props;\n\n    const effectiveThickness = useResolvedTokenValue({\n        value: thickness,\n        fallback: BorderThickness[\"width-010\"],\n        isToken: isThicknessToken,\n        normalizeCustom: toCssValue,\n    });\n\n    const effectiveRadius = useResolvedTokenValue({\n        value: radius,\n        fallback: Radius[\"none\"],\n        isToken: isRadiusToken,\n        normalizeCustom: toCssValue,\n    });\n\n    const effectiveColour = useResolvedTokenValue({\n        value: colour,\n        fallback: Colour[\"border\"],\n        isToken: isColourToken,\n        normalizeCustom: String,\n    });\n\n    const effectiveBackgroundColor = useResolvedTokenValue({\n        value: backgroundColor,\n        fallback: \"none\",\n        isToken: isColourToken,\n        normalizeCustom: String,\n    });\n\n    const showSvg = enabled || !!backgroundColor;\n    const overlayBackgroundImage = createSvgBackgroundImage({\n        radius: effectiveRadius,\n        colour: effectiveColour,\n        thickness: effectiveThickness,\n        enabled,\n    });\n    const rootRef = useRef<HTMLDivElement>(null);\n    const overlayRef = useRef<HTMLDivElement>(null);\n    const mergedRootRef = ref ? mergeRefs(rootRef, ref) : rootRef;\n\n    useApplyStyle(rootRef, {\n        [styles.tokens.rootRadius]: effectiveRadius,\n        [styles.tokens.rootBackgroundColor]: backgroundColor\n            ? effectiveBackgroundColor\n            : null,\n    });\n\n    useApplyStyle(overlayRef, {\n        [styles.tokens.overlayBackgroundImage]: showSvg\n            ? overlayBackgroundImage\n            : null,\n    });\n\n    return (\n        <div\n            ref={mergedRootRef}\n            className={clsx(styles.root, className)}\n            {...otherProps}\n        >\n            {showSvg && (\n                <div\n                    aria-hidden=\"true\"\n                    className={styles.overlay}\n                    ref={overlayRef}\n                />\n            )}\n            {children}\n        </div>\n    );\n};\n\n// @catalog\n/**\n * A container that renders a dashed border using an SVG overlay.\n *\n * Use when you need a dashed visual boundary around content — for example, drop zones,\n * placeholder regions, or empty-state containers.\n */\nexport const DashedBorder = forwardRef(Component);\n"],"names":["DashedBorder","forwardRef","props","ref","enabled","thickness","BorderThickness","radius","Radius","colour","Colour","backgroundColor","className","children","otherProps","__rest","effectiveThickness","useResolvedTokenValue","value","fallback","isToken","isThicknessToken","normalizeCustom","toCssValue","effectiveRadius","isRadiusToken","effectiveColour","isColourToken","String","effectiveBackgroundColor","showSvg","overlayBackgroundImage","createSvgBackgroundImage","rootRef","useRef","overlayRef","mergedRootRef","mergeRefs","useApplyStyle","styles.tokens","rootRadius","rootBackgroundColor","_jsxs","Object","assign","clsx","styles.root","_jsx","styles.overlay"],"mappings":"+qCAeA,MA4FaA,EAAeC,GA5FV,CACdC,EACAC,KAEA,MAAMC,QACFA,GAAU,EAAIC,UACdA,EAAYC,EAAgB,aAAYC,OACxCA,EAASC,EAAa,KAACC,OACvBA,EAASC,EAAe,OAACC,gBACzBA,EAAeC,UACfA,EAASC,SACTA,GAEAX,EADGY,EAAUC,EACbb,EATE,CAAA,UAAA,YAAA,SAAA,SAAA,kBAAA,YAAA,aAWAc,EAAqBC,EAAsB,CAC7CC,MAAOb,EACPc,SAAUb,EAAgB,aAC1Bc,QAASC,EACTC,gBAAiBC,IAGfC,EAAkBP,EAAsB,CAC1CC,MAAOX,EACPY,SAAUX,EAAa,KACvBY,QAASK,EACTH,gBAAiBC,IAGfG,EAAkBT,EAAsB,CAC1CC,MAAOT,EACPU,SAAUT,EAAe,OACzBU,QAASO,EACTL,gBAAiBM,SAGfC,EAA2BZ,EAAsB,CACnDC,MAAOP,EACPQ,SAAU,OACVC,QAASO,EACTL,gBAAiBM,SAGfE,EAAU1B,KAAaO,EACvBoB,EAAyBC,EAAyB,CACpDzB,OAAQiB,EACRf,OAAQiB,EACRrB,UAAWW,EACXZ,YAEE6B,EAAUC,EAAuB,MACjCC,EAAaD,EAAuB,MACpCE,EAAgBjC,EAAMkC,EAAUJ,EAAS9B,GAAO8B,EAetD,OAbAK,EAAcL,EAAS,CACnB,CAACM,EAAcC,YAAahB,EAC5B,CAACe,EAAcE,qBAAsB9B,EAC/BkB,EACA,OAGVS,EAAcH,EAAY,CACtB,CAACI,EAAcR,wBAAyBD,EAClCC,EACA,OAINW,EAAA,MAAAC,OAAAC,OAAA,CACIzC,IAAKiC,EACLxB,UAAWiC,EAAKC,EAAalC,IACzBE,EAAU,CAAAD,SAAA,CAEbiB,GACGiB,uBACgB,OACZnC,UAAWoC,EACX7C,IAAKgC,IAGZtB,KACC"}

package/data-table/data-table.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as t,jsx as r,Fragment as i}from"react/jsx-runtime";import{ArrowUpIcon as n,ArrowDownIcon as l}from"@lifesg/react-icons";import o from"clsx";import{useRef as a,useState as s,useCallback as c,useEffect as d}from"react";import{useInView as m}from"../external/react-intersection-observer/index.js";import{useResizeDetector as u}from"../external/react-resize-detector/build/index.esm.js";import"../animations/loading-dots/loading-dots.js";import{LoadingDotsSpinner as p}from"../animations/loading-dots-spinner/loading-dots-spinner.js";import"../animations/loading-spinner/loading-spinner.js";import"../theme/theme-provider/context.js";import{Checkbox as h}from"../checkbox/checkbox.js";import{ErrorDisplay as g}from"../error-display/error-display.js";import{VisuallyHidden as f,concatIds as y}from"../shared/accessibility/index.js";import{BasicButton as b}from"../shared/input-wrapper/input-wrapper.js";import"../theme/theme-provider/index.js";import"../theme/tokens/border.js";import"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import{useApplyStyle as w}from"../theme/utils/use-apply-styles.js";import"../theme/utils/use-media-query.js";import{Typography as v}from"../typography/index.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{useId as j}from"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{useEventListener as N}from"../util/use-event-listener.js";import{tokens as S,tableContainer as $,table as k,tableWrapper as C,stickyHeader as x,headerRow as H,bodyRow as B,emptyStateCell as R,bodyRowWithBottomBorder as A,bodyRowAlternating as I,bodyRowSelectable as M,bodyRowSelected as V,loadingStateWrapper as W,actionBarButton as K,actionBar as L,actionBarFloating as q,actionBarWrapper as Y,actionBarWrapperFloating as z,selectionCheckboxWrapper as D,headerCell as E,headerCellCheckbox as _,headerCellContent as F,headerCellClickable as O,emptyStateTitle as P,bodyCell as T,bodyCellCheckbox as G,bodyCellText as J}from"./data-table.styles.js";const Q=Q=>{var{id:U,headers:X,rows:Z,className:ee,sortIndicators:te,alternatingRows:re,loadState:ie="success",enableMultiSelect:ne,selectedIds:le,disabledIds:oe,enableActionBar:ae,enableSelectAll:se,enableStickyHeader:ce,emptyView:de,actionBarContent:me,renderCustomEmptyView:ue,onHeaderClick:pe,onSelect:he,onSelectAll:ge,onClearSelectionClick:fe}=Q,ye=e(Q,["id","headers","rows","className","sortIndicators","alternatingRows","loadState","enableMultiSelect","selectedIds","disabledIds","enableActionBar","enableSelectAll","enableStickyHeader","emptyView","actionBarContent","renderCustomEmptyView","onHeaderClick","onSelect","onSelectAll","onClearSelectionClick"]);const be=a(null),we=a(null),ve=a(null),je=a(null),Ne=a(null),Se=j(),$e=X.filter((e=>"string"!=typeof e&&!!e.keyColumn)),[ke,Ce]=s(!1),[xe,He]=s(!1),[Be,Re]=s(!1),[Ae,Ie]=s(!1),{ref:Me,inView:Ve}=m();w(je,{[S.actionBarWrapperLeft]:Be&&be.current?`${be.current.getBoundingClientRect().left}px`:void 0,[S.actionBarWrapperWidth]:Be&&be.current?`${be.current.clientWidth}px`:void 0});const We=c((()=>{if(!Ne.current||!je.current)return;const e=Ne.current.scrollHeight>Ne.current.clientHeight;Ce(e),e?je.current.style.transform="translateY(0)":Ge()}),[]);d((()=>{We()}),[]),u({onResize:We});N("scroll",(()=>{requestAnimationFrame((()=>{ke?Te():Ge()}))}),"window"),d((()=>{Je()}),[Z]);const Ke=()=>!!(Z&&Z.length&&le)&&le.length===Z.length,Le=e=>!!(null==le?void 0:le.includes(e)),qe=e=>!!re&&e%2==1,Ye=e=>!!(null==oe?void 0:oe.includes(e)),ze=e=>{if(ye["data-testid"])return`${ye["data-testid"]}-${e}`},De=()=>X.length+(ne?1:0),Ee=e=>null==te?void 0:te[e],_e=e=>{const t=Ee(e);if(t)return"asc"===t?"ascending":"descending"},Fe=e=>` by ${"asc"===Ee(e)?"descending":"ascending"} order`,Oe=(e,t)=>`${Se}-row-${e}-${t}-key-column`,Pe=e=>{const t=$e.map((t=>Oe(e,t.fieldKey)));return y(...t)},Te=()=>{if(!Ne.current)return;const e=Ne.current.getBoundingClientRect();Re(e.bottom>window.innerHeight+30&&e.top<window.innerHeight-200)},Ge=()=>{if(!(be.current&&we.current&&Ne.current&&je.current&&ve.current))return;const e=we.current.getBoundingClientRect();if(e.top>window.innerHeight){const t=e.bottom-window.innerHeight,r=be.current.getBoundingClientRect().height-ve.current.clientHeight-32,i=Math.min(t,r);je.current.style.transform=`translateY(-${i}px)`}else je.current.style.transform="translateY(0)"},Je=()=>{be.current&&Ne.current&&Ie(be.current.clientHeight+(ae?56:0)<Ne.current.clientHeight)},Qe=e=>{const{fieldKey:i,label:n,clickable:l=!1,style:a}="string"==typeof e?{fieldKey:e,label:e,style:void 0}:e,s=!!Ee(i),c=(e=>`${Se}-header-${e}`)(i);return t("th",{"data-testid":ze(`header-${i}`),className:o(E,l&&O),scope:"col","aria-sort":_e(i),style:a,onClick:()=>(e=>{null==pe||pe(e)})(i),children:[t("div",{className:F,id:c,children:["string"==typeof n?r(v.BodyBL,{weight:"bold",children:n}):n,Ue(i)]}),(l||s)&&r(f,{children:t("button",{onClick:e=>((e,t)=>{e.stopPropagation(),null==pe||pe(t)})(e,i),children:[s&&"Sort ",r("span",{"aria-labelledby":c}),s&&Fe(i)]})})]},i)},Ue=e=>{const t=null==te?void 0:te[e];return t?"asc"===t?r(n,{"aria-hidden":!0,"data-testid":ze(`header-${e}-arrowup`)}):r(l,{"aria-hidden":!0,"data-testid":ze(`header-${e}-arrowdown`)}):r(i,{})},Xe=()=>r("th",{"data-testid":ze("header-selection"),className:o(E,_),scope:"col",children:t("div",{className:D,children:[r(f,{children:"Row selection"}),se&&r(h,{checked:Ke(),indeterminate:!!le&&0!==le.length&&!Ke(),disabled:!Z||!Z.length||!le,"aria-label":"Select all rows",onClick:()=>{ge&&ge(Ke())}})]})}),Ze=(e,t)=>{const i="string"==typeof e?void 0:e.style,n="string"==typeof e?e:e.fieldKey,l=t.id.toString(),o=t[n],a=`${l}-${n}`;let s;return s="string"==typeof o||"number"==typeof o?r(v.BodyBL,{className:J,children:o}):"function"==typeof o?o(t,{isSelected:Le(l)}):o,r("td",{"data-testid":ze(`row-${a}`),id:Oe(l,n),className:T,style:i,children:s},a)},et=e=>{const t=e.id.toString();return r("td",{"data-testid":ze(`row-${t}-selection`),className:o(T,G),children:r("div",{className:D,children:r(h,{checked:Le(t),"aria-labelledby":Pe(t),onClick:()=>{he&&he(t,!Le(t))},disabled:Ye(t),focusableWhenDisabled:Ye(t)})})})},tt=()=>{let e;return e=(null==de?void 0:de.title)?"string"==typeof de.title?r(v.HeadingSM,{className:P,weight:"bold",children:de.title}):de.title:r(v.HeadingSM,{className:P,weight:"bold",children:"No <items> found"}),r(g,Object.assign({type:"no-item-found"},de,{title:e,description:(null==de?void 0:de.description)?de.description:"No matching rows"}))};return t("div",{id:U||"table-wrapper","data-testid":ye["data-testid"]||"table",className:o(C,ee),ref:Ne,onScroll:()=>{ke&&Ne.current&&He(Ne.current.scrollTop+Ne.current.clientHeight>=Ne.current.scrollHeight)},tabIndex:0,children:[r("div",{className:$,children:t("table",{ref:be,className:o(k),children:[r("thead",{ref:ve,className:ce?x:void 0,children:t("tr",{className:H,children:[ne&&Xe(),X.map(Qe)]})}),r("tbody",{children:"success"===ie?!Z||Z.length<1?r("tr",{className:B,children:r("td",{className:R,colSpan:De(),children:ue?ue():tt()})}):r(i,{children:null==Z?void 0:Z.map(((e,r)=>t("tr",{"data-testid":ze(`row-${e.id.toString()}`),className:o(B,Ae&&A,qe(r)&&I,ne&&M,Le(e.id.toString())&&V),children:[ne&&et(e),X.map((t=>Ze(t,e)))]},e.id.toString())))}):r("tr",{className:B,children:r("td",{colSpan:De(),children:r("div",{className:W,role:"status","aria-live":"polite","aria-label":"Loading table",children:"loading"===ie&&r(p,{})})})})})]})}),ae&&le&&le.length>0&&(()=>{var e;const i=null!==(e=null==le?void 0:le.length)&&void 0!==e?e:0,n=ke&&!xe||!ke&&!Ve||Be;return r("div",{ref:je,className:o(Y,Be&&z),children:t("div",{className:o(L,n&&q),children:[r(v.BodyMD,{weight:"semibold",children:`${i} item${i>1?"s":""} selected`}),r(b,{className:K,type:"button","aria-label":`Clear selection of ${i} item${1===i?"":"s"}`,onClick:fe,children:"Clear selection"}),me]})})})(),r("div",{ref:e=>{we.current=e,Me(e)}})]})};export{Q as DataTable};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as t,jsx as i,Fragment as r}from"react/jsx-runtime";import{ArrowUpIcon as n,ArrowDownIcon as l}from"@lifesg/react-icons";import o from"clsx";import{useRef as a,useState as s,useEffect as d}from"react";import{useResizeDetector as c}from"../external/react-resize-detector/build/index.esm.js";import"../animations/loading-dots/loading-dots.js";import{LoadingDotsSpinner as m}from"../animations/loading-dots-spinner/loading-dots-spinner.js";import"../animations/loading-spinner/loading-spinner.js";import"../theme/theme-provider/context.js";import{Checkbox as h}from"../checkbox/checkbox.js";import{ErrorDisplay as p}from"../error-display/error-display.js";import{VisuallyHidden as u,concatIds as g}from"../shared/accessibility/index.js";import{BasicButton as b}from"../shared/input-wrapper/input-wrapper.js";import"../theme/theme-provider/index.js";import"../theme/tokens/border.js";import"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import{useApplyStyle as f}from"../theme/utils/use-apply-styles.js";import"../theme/utils/use-media-query.js";import{Typography as y}from"../typography/index.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{useId as w}from"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{useEvent as v}from"../util/use-event.js";import{useEventListener as j}from"../util/use-event-listener.js";import{useThrottle as N}from"../util/use-throttle.js";import{tokens as S,tableContainer as k,table as $,tableWrapper as C,tableWrapperScrollable as x,stickyHeader as H,headerRow as B,bodyRow as R,emptyStateCell as I,bodyRowWithBottomBorder as A,bodyRowAlternating as M,bodyRowSelectable as W,bodyRowSelected as K,loadingStateWrapper as L,actionBarWrapper as V,actionBarButton as q,actionBar as z,actionBarFloating as D,actionBarSpacer as E,selectionCheckboxWrapper as _,headerCell as O,headerCellCheckbox as P,headerCellContent as T,headerCellClickable as F,emptyStateTitle as G,bodyCell as J,bodyCellCheckbox as Q,bodyCellText as U}from"./data-table.styles.js";const X=X=>{var{id:Y,headers:Z,rows:ee,className:te,sortIndicators:ie,alternatingRows:re,loadState:ne="success",enableMultiSelect:le,selectedIds:oe,disabledIds:ae,enableActionBar:se,enableSelectAll:de,enableStickyHeader:ce,emptyView:me,actionBarContent:he,renderCustomEmptyView:pe,onHeaderClick:ue,onSelect:ge,onSelectAll:be,onClearSelectionClick:fe}=X,ye=e(X,["id","headers","rows","className","sortIndicators","alternatingRows","loadState","enableMultiSelect","selectedIds","disabledIds","enableActionBar","enableSelectAll","enableStickyHeader","emptyView","actionBarContent","renderCustomEmptyView","onHeaderClick","onSelect","onSelectAll","onClearSelectionClick"]);const we=a(null),ve=a(null),je=a(null),Ne=a(null),Se=w(),ke=Z.filter((e=>"string"!=typeof e&&!!e.keyColumn)),[$e,Ce]=s("inline"),[xe,He]=s(!1),[Be,Re]=s(!1);f(je,{[S.actionBarWrapperLeft]:Be&&we.current?`${we.current.getBoundingClientRect().left}px`:void 0,[S.actionBarWrapperWidth]:we.current?`${we.current.clientWidth}px`:void 0});const Ie=v((()=>{Pe()}));d((()=>{Ie()}),[Ie]);const Ae=N((()=>Pe()),100);c({targetRef:Ne,onResize:()=>Ae()}),j("scroll",Ae),j("scroll",Ae,Ne.current);const Me=()=>!!(ee&&ee.length&&oe)&&oe.length===ee.length,We=e=>!!(null==oe?void 0:oe.includes(e)),Ke=e=>!!re&&e%2==1,Le=e=>!!(null==ae?void 0:ae.includes(e)),Ve=e=>{if(ye["data-testid"])return`${ye["data-testid"]}-${e}`},qe=()=>Z.length+(le?1:0),ze=e=>null==ie?void 0:ie[e],De=e=>{const t=ze(e);if(t)return"asc"===t?"ascending":"descending"},Ee=e=>` by ${"asc"===ze(e)?"descending":"ascending"} order`,_e=(e,t)=>`${Se}-row-${e}-${t}-key-column`,Oe=e=>{const t=ke.map((t=>_e(e,t.fieldKey)));return g(...t)},Pe=()=>{if(!Ne.current||!ve.current||!je.current)return;const e=Ne.current.getBoundingClientRect(),t=ve.current.getBoundingClientRect();let i="inline";const r=Ne.current.scrollHeight>Ne.current.clientHeight;if(e.top>window.innerHeight||e.bottom<0?i="inline":r?e.top>0&&e.top<window.innerHeight&&e.bottom>0&&e.bottom<window.innerHeight||e.top<0&&e.bottom>0&&e.bottom<window.innerHeight?i="sticky":e.bottom>window.innerHeight&&Math.max(e.top,t.bottom)+t.height<window.innerHeight&&(i="fixed"):e.bottom>window.innerHeight&&t.bottom+t.height<window.innerHeight&&(i="fixed"),He(r),Ce(i),"fixed"===i)Re(!0);else if("sticky"===i){const e=Ne.current.scrollTop+Ne.current.clientHeight<Ne.current.scrollHeight;Re(e)}else Re(!1)},Te=e=>{const{fieldKey:r,label:n,clickable:l=!1,style:a}="string"==typeof e?{fieldKey:e,label:e,style:void 0}:e,s=!!ze(r),d=(e=>`${Se}-header-${e}`)(r);return t("th",{"data-testid":Ve(`header-${r}`),className:o(O,l&&F),scope:"col","aria-sort":De(r),style:a,onClick:()=>(e=>{null==ue||ue(e)})(r),children:[t("div",{className:T,id:d,children:["string"==typeof n?i(y.BodyBL,{weight:"bold",children:n}):n,Fe(r)]}),(l||s)&&i(u,{children:t("button",{onClick:e=>((e,t)=>{e.stopPropagation(),null==ue||ue(t)})(e,r),children:[s&&"Sort ",i("span",{"aria-labelledby":d}),s&&Ee(r)]})})]},r)},Fe=e=>{const t=null==ie?void 0:ie[e];return t?"asc"===t?i(n,{"aria-hidden":!0,"data-testid":Ve(`header-${e}-arrowup`)}):i(l,{"aria-hidden":!0,"data-testid":Ve(`header-${e}-arrowdown`)}):i(r,{})},Ge=()=>i("th",{"data-testid":Ve("header-selection"),className:o(O,P),scope:"col",children:t("div",{className:_,children:[i(u,{children:"Row selection"}),de&&i(h,{checked:Me(),indeterminate:!!oe&&0!==oe.length&&!Me(),disabled:!ee||!ee.length||!oe,"aria-label":"Select all rows",onClick:()=>{be&&be(Me())}})]})}),Je=(e,t)=>{const r="string"==typeof e?void 0:e.style,n="string"==typeof e?e:e.fieldKey,l=t.id.toString(),o=t[n],a=`${l}-${n}`;let s;return s="string"==typeof o||"number"==typeof o?i(y.BodyBL,{className:U,children:o}):"function"==typeof o?o(t,{isSelected:We(l)}):o,i("td",{"data-testid":Ve(`row-${a}`),id:_e(l,n),className:J,style:r,children:s},a)},Qe=e=>{const t=e.id.toString();return i("td",{"data-testid":Ve(`row-${t}-selection`),className:o(J,Q),children:i("div",{className:_,children:i(h,{checked:We(t),"aria-labelledby":Oe(t),onClick:()=>{ge&&ge(t,!We(t))},disabled:Le(t),focusableWhenDisabled:Le(t)})})})},Ue=()=>{let e;return e=(null==me?void 0:me.title)?"string"==typeof me.title?i(y.HeadingSM,{className:G,weight:"bold",children:me.title}):me.title:i(y.HeadingSM,{className:G,weight:"bold",children:"No <items> found"}),i(p,Object.assign({type:"no-item-found"},me,{title:e,description:(null==me?void 0:me.description)?me.description:"No matching rows"}))};return t("div",{id:Y||"table-wrapper","data-testid":ye["data-testid"]||"table",className:o(C,xe&&x,te),ref:Ne,tabIndex:0,children:[i("div",{className:k,children:t("table",{ref:we,className:$,children:[i("thead",{ref:ve,className:ce?H:void 0,children:t("tr",{className:B,children:[le&&Ge(),Z.map(Te)]})}),i("tbody",{children:"success"===ne?!ee||ee.length<1?i("tr",{className:R,children:i("td",{className:I,colSpan:qe(),children:pe?pe():Ue()})}):i(r,{children:null==ee?void 0:ee.map(((e,i)=>t("tr",{"data-testid":Ve(`row-${e.id.toString()}`),className:o(R,Be&&A,Ke(i)&&M,le&&W,We(e.id.toString())&&K),children:[le&&Qe(e),Z.map((t=>Je(t,e)))]},e.id.toString())))}):i("tr",{className:R,children:i("td",{colSpan:qe(),children:i("div",{className:L,role:"status","aria-live":"polite","aria-label":"Loading table",children:"loading"===ne&&i(m,{})})})})})]})}),se&&oe&&oe.length>0&&(()=>{var e;const n=null!==(e=null==oe?void 0:oe.length)&&void 0!==e?e:0,l="item"+(n>1?"s":"");return t(r,{children:[i("div",{ref:je,className:V,"data-strategy":$e,children:t("div",{"data-testid":"data-table-action-bar",className:o(z,Be&&D),children:[i(y.BodyMD,{weight:"semibold",children:`${n} ${l} selected`}),i(b,{className:q,type:"button","aria-label":`Clear selection of ${n} ${l}`,onClick:fe,children:"Clear selection"}),he]})}),"sticky"!==$e&&i("div",{className:E})]})})()]})};export{X as DataTable};
 //# sourceMappingURL=data-table.js.map

package/data-table/data-table.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-table.js","sources":["../../src/data-table/data-table.tsx"],"sourcesContent":["import { ArrowDownIcon, ArrowUpIcon } from \"@lifesg/react-icons\";\nimport clsx from \"clsx\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport { useInView } from \"react-intersection-observer\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { LoadingDotsSpinner } from \"../animations\";\nimport { Checkbox } from \"../checkbox\";\nimport { ErrorDisplay } from \"../error-display\";\nimport { concatIds, VisuallyHidden } from \"../shared/accessibility\";\nimport { BasicButton } from \"../shared/input-wrapper\";\nimport { useApplyStyle } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport { useId } from \"../util\";\nimport { useEventListener } from \"../util/use-event-listener\";\nimport * as styles from \"./data-table.styles\";\nimport type { DataTableProps, HeaderProps, RowProps } from \"./types\";\n\n/**\n * Renders a sortable, selectable data table with scroll-aware action bar and loading state support.\n *\n * Use `DataTable` when presenting structured multi-column data that users may need to sort by\n * column or select rows for bulk actions. Row selection, sort indicators, and the action bar\n * content are all externally controlled; the component manages scroll detection, sticky-header\n * positioning, and floating action bar behaviour internally.\n */\nexport const DataTable = ({\n    id,\n    headers,\n    rows,\n    className,\n    sortIndicators,\n    alternatingRows,\n    loadState = \"success\",\n    enableMultiSelect,\n    selectedIds,\n    disabledIds,\n    enableActionBar,\n    enableSelectAll,\n    enableStickyHeader,\n    emptyView,\n    actionBarContent,\n    renderCustomEmptyView,\n    onHeaderClick,\n    onSelect,\n    onSelectAll,\n    onClearSelectionClick,\n    ...otherProps\n}: DataTableProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const tableRef = useRef<HTMLTableElement>(null);\n    const tableEndRef = useRef<HTMLDivElement | null>(null);\n    const headerRef = useRef<HTMLTableSectionElement>(null);\n    const actionBarRef = useRef<HTMLDivElement>(null);\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const internalId = useId();\n    const keyColumns = headers.filter(\n        (header): header is Exclude<HeaderProps, string> => {\n            return typeof header !== \"string\" && !!header.keyColumn;\n        }\n    );\n\n    const [scrollable, setScrollable] = useState(false);\n    const [scrollEnd, setScrollEnd] = useState(false);\n    const [isFloatingActionBar, setIsFloatingActionBar] = useState(false);\n    const [showLastBorder, setShowLastBorder] = useState(false);\n\n    const { ref: endRef, inView: end } = useInView();\n\n    useApplyStyle(actionBarRef, {\n        [styles.tokens.actionBarWrapperLeft]:\n            isFloatingActionBar && tableRef.current\n                ? `${tableRef.current.getBoundingClientRect().left}px`\n                : undefined,\n        [styles.tokens.actionBarWrapperWidth]:\n            isFloatingActionBar && tableRef.current\n                ? `${tableRef.current.clientWidth}px`\n                : undefined,\n    });\n\n    // =============================================================================\n    // EFFECTS, EVENT LISTENERS\n    // ============================================================================\n    const onResize = useCallback(() => {\n        if (!wrapperRef.current || !actionBarRef.current) {\n            return;\n        }\n        const scrollable =\n            wrapperRef.current.scrollHeight > wrapperRef.current.clientHeight;\n        setScrollable(scrollable);\n\n        if (scrollable) {\n            actionBarRef.current.style.transform = `translateY(0)`;\n        } else {\n            calculateStickyInViewport();\n        }\n    }, []);\n\n    useEffect(() => {\n        onResize();\n    }, []);\n\n    useResizeDetector({ onResize });\n\n    const scrollHandler = () => {\n        requestAnimationFrame(() => {\n            if (scrollable) {\n                calculateFixedInViewport();\n            } else {\n                calculateStickyInViewport();\n            }\n        });\n    };\n\n    useEventListener(\"scroll\", scrollHandler, \"window\");\n\n    useEffect(() => {\n        checkLastBorder();\n    }, [rows]);\n\n    // ===========================================================================\n    // HELPER FUNCTIONS\n    // ===========================================================================\n    const isAllCheckboxSelected = (): boolean => {\n        if (!rows || !rows.length || !selectedIds) {\n            return false;\n        }\n        return selectedIds.length === rows.length;\n    };\n\n    const isIndeterminateCheckbox = (): boolean => {\n        return (\n            !!selectedIds &&\n            selectedIds.length !== 0 &&\n            !isAllCheckboxSelected()\n        );\n    };\n\n    const isHeaderCheckboxDisabled = (): boolean => {\n        return !rows || !rows.length || !selectedIds;\n    };\n\n    const isRowSelected = (rowId: string): boolean => {\n        return !!selectedIds?.includes(rowId);\n    };\n\n    const isAlternatingRow = (index: number): boolean => {\n        return !!alternatingRows && index % 2 === 1;\n    };\n\n    const isDisabledRow = (rowId: string): boolean => {\n        return !!disabledIds?.includes(rowId);\n    };\n\n    const getDataTestId = (subStr: string) => {\n        if (!otherProps[\"data-testid\"]) return undefined;\n        return `${otherProps[\"data-testid\"]}-${subStr}`;\n    };\n\n    const getTotalColumns = (): number => {\n        return headers.length + (enableMultiSelect ? 1 : 0);\n    };\n\n    const getSortDirection = (fieldKey: string) => {\n        return sortIndicators?.[fieldKey];\n    };\n\n    const getHeaderAriaSort = (fieldKey: string) => {\n        const sortDirection = getSortDirection(fieldKey);\n\n        if (!sortDirection) {\n            return undefined;\n        }\n\n        return sortDirection === \"asc\" ? \"ascending\" : \"descending\";\n    };\n\n    const getSortButtonAriaLabel = (fieldKey: string) => {\n        const nextSortDirection =\n            getSortDirection(fieldKey) === \"asc\" ? \"descending\" : \"ascending\";\n\n        return ` by ${nextSortDirection} order`;\n    };\n\n    const getHeaderCellId = (fieldKey: string) => {\n        return `${internalId}-header-${fieldKey}`;\n    };\n    const getCellId = (rowId: string, fieldKey: string) => {\n        return `${internalId}-row-${rowId}-${fieldKey}-key-column`;\n    };\n\n    const getRowCheckboxAriaLabelledBy = (rowId: string) => {\n        const keyColumnIds = keyColumns.map((header) =>\n            getCellId(rowId, header.fieldKey)\n        );\n\n        return concatIds(...keyColumnIds);\n    };\n\n    const calculateFixedInViewport = () => {\n        if (!wrapperRef.current) {\n            return;\n        }\n        const wrapperBounds = wrapperRef.current.getBoundingClientRect();\n        setIsFloatingActionBar(\n            wrapperBounds.bottom > window.innerHeight + 30 &&\n                wrapperBounds.top < window.innerHeight - 200\n        );\n    };\n\n    const calculateStickyInViewport = () => {\n        if (\n            !tableRef.current ||\n            !tableEndRef.current ||\n            !wrapperRef.current ||\n            !actionBarRef.current ||\n            !headerRef.current\n        ) {\n            return;\n        }\n\n        const endBounds = tableEndRef.current.getBoundingClientRect();\n\n        if (endBounds.top > window.innerHeight) {\n            const bottomOffset = endBounds.bottom - window.innerHeight;\n            const bottomToHeaderOffset =\n                tableRef.current.getBoundingClientRect().height -\n                headerRef.current.clientHeight -\n                32;\n            const maxBottomOffset = Math.min(\n                bottomOffset,\n                bottomToHeaderOffset\n            );\n\n            actionBarRef.current.style.transform = `translateY(-${maxBottomOffset}px)`;\n        } else {\n            actionBarRef.current.style.transform = `translateY(0)`;\n        }\n    };\n\n    const checkLastBorder = () => {\n        if (!tableRef.current || !wrapperRef.current) {\n            return;\n        }\n        // 56 pixels added due to the behavior of action bar\n        setShowLastBorder(\n            tableRef.current.clientHeight + (enableActionBar ? 56 : 0) <\n                wrapperRef.current.clientHeight\n        );\n    };\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleHeaderClick = (fieldKey: string) => {\n        onHeaderClick?.(fieldKey);\n    };\n\n    const handleHeaderButtonClick = (\n        event: React.MouseEvent<HTMLButtonElement>,\n        fieldKey: string\n    ) => {\n        event.stopPropagation();\n        onHeaderClick?.(fieldKey);\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderHeaders = () => (\n        <thead\n            ref={headerRef}\n            className={enableStickyHeader ? styles.stickyHeader : undefined}\n        >\n            <tr className={styles.headerRow}>\n                {enableMultiSelect && renderHeaderCheckBox()}\n                {headers.map(renderHeaderCell)}\n            </tr>\n        </thead>\n    );\n\n    const renderHeaderCell = (header: HeaderProps) => {\n        const {\n            fieldKey,\n            label,\n            clickable = false,\n            style,\n        } = typeof header === \"string\"\n            ? {\n                  fieldKey: header,\n                  label: header,\n                  style: undefined,\n              }\n            : header;\n\n        const isSortable = !!getSortDirection(fieldKey);\n        const headerCellId = getHeaderCellId(fieldKey);\n        return (\n            <th\n                data-testid={getDataTestId(`header-${fieldKey}`)}\n                key={fieldKey}\n                className={clsx(\n                    styles.headerCell,\n                    clickable && styles.headerCellClickable\n                )}\n                scope=\"col\"\n                aria-sort={getHeaderAriaSort(fieldKey)}\n                style={style}\n                onClick={() => handleHeaderClick(fieldKey)}\n            >\n                <div className={styles.headerCellContent} id={headerCellId}>\n                    {typeof label === \"string\" ? (\n                        <Typography.BodyBL weight=\"bold\">\n                            {label}\n                        </Typography.BodyBL>\n                    ) : (\n                        label\n                    )}\n                    {renderSortedArrow(fieldKey)}\n                </div>\n                {(clickable || isSortable) && (\n                    <VisuallyHidden>\n                        <button\n                            onClick={(event) =>\n                                handleHeaderButtonClick(event, fieldKey)\n                            }\n                        >\n                            {isSortable && \"Sort \"}\n                            <span aria-labelledby={headerCellId} />\n                            {isSortable && getSortButtonAriaLabel(fieldKey)}\n                        </button>\n                    </VisuallyHidden>\n                )}\n            </th>\n        );\n    };\n\n    const renderSortedArrow = (fieldKey: string) => {\n        const isSorted = sortIndicators?.[fieldKey];\n\n        if (!isSorted) {\n            return <></>;\n        }\n        if (isSorted === \"asc\") {\n            return (\n                <ArrowUpIcon\n                    aria-hidden\n                    data-testid={getDataTestId(`header-${fieldKey}-arrowup`)}\n                />\n            );\n        }\n        return (\n            <ArrowDownIcon\n                aria-hidden\n                data-testid={getDataTestId(`header-${fieldKey}-arrowdown`)}\n            />\n        );\n    };\n\n    const renderHeaderCheckBox = () => {\n        return (\n            <th\n                data-testid={getDataTestId(\"header-selection\")}\n                className={clsx(styles.headerCell, styles.headerCellCheckbox)}\n                scope=\"col\"\n            >\n                <div className={styles.selectionCheckboxWrapper}>\n                    <VisuallyHidden>Row selection</VisuallyHidden>\n                    {enableSelectAll && (\n                        <Checkbox\n                            checked={isAllCheckboxSelected()}\n                            indeterminate={isIndeterminateCheckbox()}\n                            disabled={isHeaderCheckboxDisabled()}\n                            aria-label=\"Select all rows\"\n                            onClick={() => {\n                                if (onSelectAll) {\n                                    onSelectAll(isAllCheckboxSelected());\n                                }\n                            }}\n                        />\n                    )}\n                </div>\n            </th>\n        );\n    };\n\n    const renderRows = () => {\n        return !rows || rows.length < 1 ? (\n            <tr className={styles.bodyRow}>\n                <td\n                    className={styles.emptyStateCell}\n                    colSpan={getTotalColumns()}\n                >\n                    {renderCustomEmptyView\n                        ? renderCustomEmptyView()\n                        : renderBasicEmptyView()}\n                </td>\n            </tr>\n        ) : (\n            <>\n                {rows?.map((row: RowProps, index: number) => (\n                    <tr\n                        data-testid={getDataTestId(`row-${row.id.toString()}`)}\n                        key={row.id.toString()}\n                        className={clsx(\n                            styles.bodyRow,\n                            showLastBorder && styles.bodyRowWithBottomBorder,\n                            isAlternatingRow(index) &&\n                                styles.bodyRowAlternating,\n                            enableMultiSelect && styles.bodyRowSelectable,\n                            isRowSelected(row.id.toString()) &&\n                                styles.bodyRowSelected\n                        )}\n                    >\n                        {enableMultiSelect && renderRowCheckBox(row)}\n\n                        {headers.map((header) => renderRowCell(header, row))}\n                    </tr>\n                ))}\n            </>\n        );\n    };\n\n    const renderRowCell = (header: HeaderProps, row: RowProps) => {\n        const style = typeof header === \"string\" ? undefined : header.style;\n        const fieldKey = typeof header === \"string\" ? header : header.fieldKey;\n        const rowId = row.id.toString();\n        const cellData = row[fieldKey];\n        const cellId = `${rowId}-${fieldKey}`;\n\n        let cellContent: React.ReactNode;\n        if (typeof cellData === \"string\" || typeof cellData === \"number\") {\n            cellContent = (\n                <Typography.BodyBL className={styles.bodyCellText}>\n                    {cellData}\n                </Typography.BodyBL>\n            );\n        } else if (typeof cellData === \"function\") {\n            cellContent = cellData(row, { isSelected: isRowSelected(rowId) });\n        } else {\n            cellContent = cellData;\n        }\n\n        return (\n            <td\n                data-testid={getDataTestId(`row-${cellId}`)}\n                key={cellId}\n                id={getCellId(rowId, fieldKey)}\n                className={styles.bodyCell}\n                style={style}\n            >\n                {cellContent}\n            </td>\n        );\n    };\n\n    const renderRowCheckBox = (row: RowProps) => {\n        const rowId = row.id.toString();\n\n        return (\n            <td\n                data-testid={getDataTestId(`row-${rowId}-selection`)}\n                className={clsx(styles.bodyCell, styles.bodyCellCheckbox)}\n            >\n                <div className={styles.selectionCheckboxWrapper}>\n                    <Checkbox\n                        checked={isRowSelected(rowId)}\n                        aria-labelledby={getRowCheckboxAriaLabelledBy(rowId)}\n                        onClick={() => {\n                            if (onSelect) {\n                                onSelect(rowId, !isRowSelected(rowId));\n                            }\n                        }}\n                        disabled={isDisabledRow(rowId)}\n                        focusableWhenDisabled={isDisabledRow(rowId)}\n                    />\n                </div>\n            </td>\n        );\n    };\n\n    const renderBasicEmptyView = () => {\n        let emptyTitle: JSX.Element;\n        if (!emptyView?.title) {\n            emptyTitle = (\n                <Typography.HeadingSM\n                    className={styles.emptyStateTitle}\n                    weight=\"bold\"\n                >\n                    {\"No <items> found\"}\n                </Typography.HeadingSM>\n            );\n        } else if (typeof emptyView.title === \"string\") {\n            emptyTitle = (\n                <Typography.HeadingSM\n                    className={styles.emptyStateTitle}\n                    weight=\"bold\"\n                >\n                    {emptyView.title}\n                </Typography.HeadingSM>\n            );\n        } else {\n            emptyTitle = emptyView.title;\n        }\n\n        return (\n            <ErrorDisplay\n                type={\"no-item-found\"}\n                {...emptyView}\n                title={emptyTitle}\n                description={\n                    emptyView?.description\n                        ? emptyView.description\n                        : \"No matching rows\"\n                }\n            />\n        );\n    };\n\n    const renderLoader = () => {\n        return (\n            <tr className={styles.bodyRow}>\n                <td colSpan={getTotalColumns()}>\n                    <div\n                        className={styles.loadingStateWrapper}\n                        role=\"status\"\n                        aria-live=\"polite\"\n                        aria-label=\"Loading table\"\n                    >\n                        {loadState === \"loading\" && <LoadingDotsSpinner />}\n                    </div>\n                </td>\n            </tr>\n        );\n    };\n\n    const renderSelectionBar = () => {\n        const count = selectedIds?.length ?? 0;\n        const hasNotReachedScrollableEnd = scrollable && !scrollEnd;\n        const hasNotReachedTableEnd = !scrollable && !end;\n        const shouldUseFloatingActionBar =\n            hasNotReachedScrollableEnd ||\n            hasNotReachedTableEnd ||\n            isFloatingActionBar;\n\n        return (\n            <div\n                ref={actionBarRef}\n                className={clsx(\n                    styles.actionBarWrapper,\n                    isFloatingActionBar && styles.actionBarWrapperFloating\n                )}\n            >\n                <div\n                    className={clsx(\n                        styles.actionBar,\n                        shouldUseFloatingActionBar && styles.actionBarFloating\n                    )}\n                >\n                    <Typography.BodyMD weight=\"semibold\">{`${count} item${\n                        count > 1 ? \"s\" : \"\"\n                    } selected`}</Typography.BodyMD>\n                    <BasicButton\n                        className={styles.actionBarButton}\n                        type=\"button\"\n                        aria-label={`Clear selection of ${count} item${\n                            count === 1 ? \"\" : \"s\"\n                        }`}\n                        onClick={onClearSelectionClick}\n                    >\n                        Clear selection\n                    </BasicButton>\n                    {actionBarContent}\n                </div>\n            </div>\n        );\n    };\n\n    return (\n        <div\n            id={id || \"table-wrapper\"}\n            data-testid={otherProps[\"data-testid\"] || \"table\"}\n            className={clsx(styles.tableWrapper, className)}\n            ref={wrapperRef}\n            onScroll={() => {\n                if (scrollable && wrapperRef.current) {\n                    setScrollEnd(\n                        wrapperRef.current.scrollTop +\n                            wrapperRef.current.clientHeight >=\n                            wrapperRef.current.scrollHeight\n                    );\n                }\n            }}\n            tabIndex={0} // scrollable container must be focusable to support keyboard users\n        >\n            <div className={styles.tableContainer}>\n                <table ref={tableRef} className={clsx(styles.table)}>\n                    {renderHeaders()}\n                    <tbody>\n                        {loadState === \"success\"\n                            ? renderRows()\n                            : renderLoader()}\n                    </tbody>\n                </table>\n            </div>\n            {enableActionBar &&\n                selectedIds &&\n                selectedIds.length > 0 &&\n                renderSelectionBar()}\n            <div\n                ref={(r) => {\n                    tableEndRef.current = r;\n                    endRef(r);\n                }}\n            />\n        </div>\n    );\n};\n"],"names":["DataTable","_a","id","headers","rows","className","sortIndicators","alternatingRows","loadState","enableMultiSelect","selectedIds","disabledIds","enableActionBar","enableSelectAll","enableStickyHeader","emptyView","actionBarContent","renderCustomEmptyView","onHeaderClick","onSelect","onSelectAll","onClearSelectionClick","otherProps","__rest","tableRef","useRef","tableEndRef","headerRef","actionBarRef","wrapperRef","internalId","useId","keyColumns","filter","header","keyColumn","scrollable","setScrollable","useState","scrollEnd","setScrollEnd","isFloatingActionBar","setIsFloatingActionBar","showLastBorder","setShowLastBorder","ref","endRef","inView","end","useInView","useApplyStyle","styles.tokens","actionBarWrapperLeft","current","getBoundingClientRect","left","undefined","actionBarWrapperWidth","clientWidth","onResize","useCallback","scrollHeight","clientHeight","style","transform","calculateStickyInViewport","useEffect","useResizeDetector","useEventListener","requestAnimationFrame","calculateFixedInViewport","checkLastBorder","isAllCheckboxSelected","length","isRowSelected","rowId","includes","isAlternatingRow","index","isDisabledRow","getDataTestId","subStr","getTotalColumns","getSortDirection","fieldKey","getHeaderAriaSort","sortDirection","getSortButtonAriaLabel","getCellId","getRowCheckboxAriaLabelledBy","keyColumnIds","map","concatIds","wrapperBounds","bottom","window","innerHeight","top","endBounds","bottomOffset","bottomToHeaderOffset","height","maxBottomOffset","Math","min","renderHeaderCell","label","clickable","isSortable","headerCellId","getHeaderCellId","_jsxs","clsx","styles.headerCell","styles.headerCellClickable","scope","onClick","handleHeaderClick","children","styles.headerCellContent","_jsx","Typography","BodyBL","weight","renderSortedArrow","VisuallyHidden","event","stopPropagation","handleHeaderButtonClick","isSorted","ArrowUpIcon","ArrowDownIcon","renderHeaderCheckBox","styles.headerCellCheckbox","styles.selectionCheckboxWrapper","Checkbox","checked","indeterminate","disabled","renderRowCell","row","toString","cellData","cellId","cellContent","styles.bodyCellText","isSelected","styles.bodyCell","renderRowCheckBox","styles.bodyCellCheckbox","focusableWhenDisabled","renderBasicEmptyView","emptyTitle","title","HeadingSM","styles.emptyStateTitle","ErrorDisplay","Object","assign","type","description","styles.tableWrapper","onScroll","scrollTop","tabIndex","styles.tableContainer","styles.table","styles.stickyHeader","styles.headerRow","styles.bodyRow","styles.emptyStateCell","colSpan","_Fragment","styles.bodyRowWithBottomBorder","styles.bodyRowAlternating","styles.bodyRowSelectable","styles.bodyRowSelected","styles.loadingStateWrapper","role","LoadingDotsSpinner","count","shouldUseFloatingActionBar","styles.actionBarWrapper","styles.actionBarWrapperFloating","styles.actionBar","styles.actionBarFloating","BodyMD","BasicButton","styles.actionBarButton","renderSelectionBar","r"],"mappings":"smEA0BO,MAAMA,EAAaC,QAAAC,GACtBA,EAAEC,QACFA,EAAOC,KACPA,EAAIC,UACJA,GAASC,eACTA,GAAcC,gBACdA,GAAeC,UACfA,GAAY,UAASC,kBACrBA,GAAiBC,YACjBA,GAAWC,YACXA,GAAWC,gBACXA,GAAeC,gBACfA,GAAeC,mBACfA,GAAkBC,UAClBA,GAASC,iBACTA,GAAgBC,sBAChBA,GAAqBC,cACrBA,GAAaC,SACbA,GAAQC,YACRA,GAAWC,sBACXA,MACGC,GAAUC,EAAAtB,EArBS,CAAA,KAAA,UAAA,OAAA,YAAA,iBAAA,kBAAA,YAAA,oBAAA,cAAA,cAAA,kBAAA,kBAAA,qBAAA,YAAA,mBAAA,wBAAA,gBAAA,WAAA,cAAA,0BA0BtB,MAAMuB,GAAWC,EAAyB,MACpCC,GAAcD,EAA8B,MAC5CE,GAAYF,EAAgC,MAC5CG,GAAeH,EAAuB,MACtCI,GAAaJ,EAAuB,MACpCK,GAAaC,IACbC,GAAa7B,EAAQ8B,QACtBC,GAC4B,iBAAXA,KAAyBA,EAAOC,aAI/CC,GAAYC,IAAiBC,GAAS,IACtCC,GAAWC,IAAgBF,GAAS,IACpCG,GAAqBC,IAA0BJ,GAAS,IACxDK,GAAgBC,IAAqBN,GAAS,IAE7CO,IAAKC,GAAQC,OAAQC,IAAQC,IAErCC,EAActB,GAAc,CACxB,CAACuB,EAAcC,sBACXX,IAAuBjB,GAAS6B,QAC1B,GAAG7B,GAAS6B,QAAQC,wBAAwBC,cAC5CC,EACV,CAACL,EAAcM,uBACXhB,IAAuBjB,GAAS6B,QAC1B,GAAG7B,GAAS6B,QAAQK,qBACpBF,IAMd,MAAMG,GAAWC,GAAY,KACzB,IAAK/B,GAAWwB,UAAYzB,GAAayB,QACrC,OAEJ,MAAMjB,EACFP,GAAWwB,QAAQQ,aAAehC,GAAWwB,QAAQS,aACzDzB,GAAcD,GAEVA,EACAR,GAAayB,QAAQU,MAAMC,UAAY,gBAEvCC,IACJ,GACD,IAEHC,GAAU,KACNP,IAAU,GACX,IAEHQ,EAAkB,CAAER,cAYpBS,EAAiB,UAVK,KAClBC,uBAAsB,KACdjC,GACAkC,KAEAL,IACJ,GACF,GAGoC,UAE1CC,GAAU,KACNK,IAAiB,GAClB,CAACnE,IAKJ,MAAMoE,GAAwB,OACrBpE,GAASA,EAAKqE,QAAW/D,KAGvBA,GAAY+D,SAAWrE,EAAKqE,OAejCC,GAAiBC,MACVjE,cAAW,EAAXA,GAAakE,SAASD,IAG7BE,GAAoBC,KACbvE,IAAmBuE,EAAQ,GAAM,EAGxCC,GAAiBJ,MACVhE,cAAW,EAAXA,GAAaiE,SAASD,IAG7BK,GAAiBC,IACnB,GAAK3D,GAAW,eAChB,MAAO,GAAGA,GAAW,kBAAkB2D,GAAQ,EAG7CC,GAAkB,IACb/E,EAAQsE,QAAUhE,GAAoB,EAAI,GAG/C0E,GAAoBC,GACf9E,cAAc,EAAdA,GAAiB8E,GAGtBC,GAAqBD,IACvB,MAAME,EAAgBH,GAAiBC,GAEvC,GAAKE,EAIL,MAAyB,QAAlBA,EAA0B,YAAc,YAAY,EAGzDC,GAA0BH,GAIrB,OAF4B,QAA/BD,GAAiBC,GAAsB,aAAe,oBAQxDI,GAAY,CAACb,EAAeS,IACvB,GAAGtD,UAAkB6C,KAASS,eAGnCK,GAAgCd,IAClC,MAAMe,EAAe1D,GAAW2D,KAAKzD,GACjCsD,GAAUb,EAAOzC,EAAOkD,YAG5B,OAAOQ,KAAaF,EAAa,EAG/BpB,GAA2B,KAC7B,IAAKzC,GAAWwB,QACZ,OAEJ,MAAMwC,EAAgBhE,GAAWwB,QAAQC,wBACzCZ,GACImD,EAAcC,OAASC,OAAOC,YAAc,IACxCH,EAAcI,IAAMF,OAAOC,YAAc,IAChD,EAGC/B,GAA4B,KAC9B,KACKzC,GAAS6B,SACT3B,GAAY2B,SACZxB,GAAWwB,SACXzB,GAAayB,SACb1B,GAAU0B,SAEX,OAGJ,MAAM6C,EAAYxE,GAAY2B,QAAQC,wBAEtC,GAAI4C,EAAUD,IAAMF,OAAOC,YAAa,CACpC,MAAMG,EAAeD,EAAUJ,OAASC,OAAOC,YACzCI,EACF5E,GAAS6B,QAAQC,wBAAwB+C,OACzC1E,GAAU0B,QAAQS,aAClB,GACEwC,EAAkBC,KAAKC,IACzBL,EACAC,GAGJxE,GAAayB,QAAQU,MAAMC,UAAY,eAAesC,MAC1D,MACI1E,GAAayB,QAAQU,MAAMC,UAAY,eAC3C,EAGEO,GAAkB,KACf/C,GAAS6B,SAAYxB,GAAWwB,SAIrCT,GACIpB,GAAS6B,QAAQS,cAAgBlD,GAAkB,GAAK,GACpDiB,GAAWwB,QAAQS,aAC1B,EAiCC2C,GAAoBvE,IACtB,MAAMkD,SACFA,EAAQsB,MACRA,EAAKC,UACLA,GAAY,EAAK5C,MACjBA,GACkB,iBAAX7B,EACL,CACIkD,SAAUlD,EACVwE,MAAOxE,EACP6B,WAAOP,GAEXtB,EAEA0E,IAAezB,GAAiBC,GAChCyB,EAhHc,CAACzB,GACd,GAAGtD,aAAqBsD,IA+GV0B,CAAgB1B,GACrC,OACI2B,EAAA,KAAA,CAAA,cACiB/B,GAAc,UAAUI,KAErC/E,UAAW2G,EACPC,EACAN,GAAaO,GAEjBC,MAAM,MAAK,YACA9B,GAAkBD,GAC7BrB,MAAOA,EACPqD,QAAS,IAtDK,CAAChC,IACvBlE,UAAAA,GAAgBkE,EAAS,EAqDFiC,CAAkBjC,GAASkC,SAAA,CAE1CP,SAAK1G,UAAWkH,EAA0BrH,GAAI2G,EAAYS,SAAA,CACpC,iBAAVZ,EACJc,EAACC,EAAWC,OAAM,CAACC,OAAO,OAAML,SAC3BZ,IACe,EAIvBkB,GAAkBxC,OAErBuB,GAAaC,IACXY,EAACK,YACGd,EAAA,SAAA,CACIK,QAAUU,GAjEF,EAC5BA,EACA1C,KAEA0C,EAAMC,kBACN7G,UAAAA,GAAgBkE,EAAS,EA6DD4C,CAAwBF,EAAO1C,GAASkC,SAAA,CAG3CV,GAAc,QACfY,EAAA,OAAA,CAAA,kBAAuBX,IACtBD,GAAcrB,GAAuBH,UA7B7CA,EAiCJ,EAIPwC,GAAqBxC,IACvB,MAAM6C,EAAW3H,gBAAAA,GAAiB8E,GAElC,OAAK6C,EAGY,QAAbA,EAEIT,EAACU,EAAW,CAAA,eAAA,EAAA,cAEKlD,GAAc,UAAUI,eAK7CoC,EAACW,EAAa,CAAA,eAAA,EAAA,cAEGnD,GAAc,UAAUI,iBAblCoC,OAcL,EAIJY,GAAuB,IAErBZ,EAAA,KAAA,CAAA,cACiBxC,GAAc,oBAC3B3E,UAAW2G,EAAKC,EAAmBoB,GACnClB,MAAM,MAAKG,SAEXP,EAAA,MAAA,CAAK1G,UAAWiI,EAA+BhB,SAAA,CAC3CE,EAACK,EAAc,CAAAP,SAAA,kBACdzG,IACG2G,EAACe,EAAQ,CACLC,QAAShE,KACTiE,gBA/Od/H,IACqB,IAAvBA,GAAY+D,SACXD,KA8OekE,UAzOZtI,IAASA,EAAKqE,SAAW/D,GAyOuB,aACzB,kBACX0G,QAAS,KACDhG,IACAA,GAAYoD,KAChB,SA8CtBmE,GAAgB,CAACzG,EAAqB0G,KACxC,MAAM7E,EAA0B,iBAAX7B,OAAsBsB,EAAYtB,EAAO6B,MACxDqB,EAA6B,iBAAXlD,EAAsBA,EAASA,EAAOkD,SACxDT,EAAQiE,EAAI1I,GAAG2I,WACfC,EAAWF,EAAIxD,GACf2D,EAAS,GAAGpE,KAASS,IAE3B,IAAI4D,EAaJ,OAXIA,EADoB,iBAAbF,GAA6C,iBAAbA,EAEnCtB,EAACC,EAAWC,OAAM,CAACrH,UAAW4I,EAAmB3B,SAC5CwB,IAGkB,mBAAbA,EACAA,EAASF,EAAK,CAAEM,WAAYxE,GAAcC,KAE1CmE,EAIdtB,EAAA,KAAA,CAAA,cACiBxC,GAAc,OAAO+D,KAElC7I,GAAIsF,GAAUb,EAAOS,GACrB/E,UAAW8I,EACXpF,MAAOA,WAENiF,GALID,EAMJ,EAIPK,GAAqBR,IACvB,MAAMjE,EAAQiE,EAAI1I,GAAG2I,WAErB,OACIrB,sBACiBxC,GAAc,OAAOL,eAClCtE,UAAW2G,EAAKmC,EAAiBE,GAAwB/B,SAEzDE,EAAA,MAAA,CAAKnH,UAAWiI,EAA+BhB,SAC3CE,EAACe,EAAQ,CACLC,QAAS9D,GAAcC,GAAM,kBACZc,GAA6Bd,GAC9CyC,QAAS,KACDjG,IACAA,GAASwD,GAAQD,GAAcC,GACnC,EAEJ+D,SAAU3D,GAAcJ,GACxB2E,sBAAuBvE,GAAcJ,QAG5C,EAIP4E,GAAuB,KACzB,IAAIC,EAuBJ,OAZIA,GAVCzI,cAAS,EAATA,GAAW0I,OASsB,iBAApB1I,GAAU0I,MAEpBjC,EAACC,EAAWiC,UAAS,CACjBrJ,UAAWsJ,EACXhC,OAAO,OAAML,SAEZvG,GAAU0I,QAIN1I,GAAU0I,MAjBnBjC,EAACC,EAAWiC,UAAS,CACjBrJ,UAAWsJ,EACXhC,OAAO,gBAEN,qBAiBTH,EAACoC,EAAYC,OAAAC,OAAA,CACTC,KAAM,iBACFhJ,GAAS,CACb0I,MAAOD,EACPQ,aACIjJ,cAAS,EAATA,GAAWiJ,aACLjJ,GAAUiJ,YACV,qBAEZ,EA+DV,OACIjD,EAAA,MAAA,CACI7G,GAAIA,GAAM,gBAAe,cACZoB,GAAW,gBAAkB,QAC1CjB,UAAW2G,EAAKiD,EAAqB5J,IACrCwC,IAAKhB,GACLqI,SAAU,KACF9H,IAAcP,GAAWwB,SACzBb,GACIX,GAAWwB,QAAQ8G,UACftI,GAAWwB,QAAQS,cACnBjC,GAAWwB,QAAQQ,aAE/B,EAEJuG,SAAU,YAEV5C,EAAA,MAAA,CAAKnH,UAAWgK,EAAqB/C,SACjCP,EAAA,QAAA,CAAOlE,IAAKrB,GAAUnB,UAAW2G,EAAKsD,GAAahD,SAAA,CAtU3DE,EAAA,QAAA,CACI3E,IAAKlB,GACLtB,UAAWS,GAAqByJ,OAAsB/G,EAAS8D,SAE/DP,EAAA,KAAA,CAAI1G,UAAWmK,EAAgBlD,SAAA,CAC1B7G,IAAqB2H,KACrBjI,EAAQwF,IAAIc,SAkUTe,EAAA,QAAA,CAAAF,SACmB,YAAd9G,IApNTJ,GAAQA,EAAKqE,OAAS,EAC1B+C,QAAInH,UAAWoK,EAAcnD,SACzBE,EAAA,KAAA,CACInH,UAAWqK,EACXC,QAASzF,cAERjE,GACKA,KACAsI,SAId/B,EAAAoD,EAAA,CAAAtD,SACKlH,aAAI,EAAJA,EAAMuF,KAAI,CAACiD,EAAe9D,IACvBiC,EAAA,KAAA,CAAA,cACiB/B,GAAc,OAAO4D,EAAI1I,GAAG2I,cAEzCxI,UAAW2G,EACPyD,EACA9H,IAAkBkI,EAClBhG,GAAiBC,IACbgG,EACJrK,IAAqBsK,EACrBrG,GAAckE,EAAI1I,GAAG2I,aACjBmC,GACP1D,SAAA,CAEA7G,IAAqB2I,GAAkBR,GAEvCzI,EAAQwF,KAAKzD,GAAWyG,GAAczG,EAAQ0G,OAb1CA,EAAI1I,GAAG2I,gBAsHxBrB,EAAA,KAAA,CAAInH,UAAWoK,EAAcnD,SACzBE,EAAA,KAAA,CAAImD,QAASzF,KAAiBoC,SAC1BE,SACInH,UAAW4K,EACXC,KAAK,SAAQ,YACH,SAAQ,aACP,yBAEI,YAAd1K,IAA2BgH,EAAC2D,EAAkB,CAAA,gBA4E1DvK,IACGF,IACAA,GAAY+D,OAAS,GAvEN,YACvB,MAAM2G,EAA2B,QAAnBnL,EAAAS,cAAW,EAAXA,GAAa+D,cAAM,IAAAxE,EAAAA,EAAI,EAG/BoL,EAF6BjJ,KAAeG,KACnBH,KAAeY,IAI1CP,GAEJ,OACI+E,SACI3E,IAAKjB,GACLvB,UAAW2G,EACPsE,EACA7I,IAAuB8I,GAC1BjE,SAEDP,EAAA,MAAA,CACI1G,UAAW2G,EACPwE,EACAH,GAA8BI,GACjCnE,SAAA,CAEDE,EAACC,EAAWiE,OAAM,CAAC/D,OAAO,WAAUL,SAAE,GAAG8D,SACrCA,EAAQ,EAAI,IAAM,gBAEtB5D,EAACmE,EAAW,CACRtL,UAAWuL,EACX7B,KAAK,SAAQ,aACD,sBAAsBqB,SACpB,IAAVA,EAAc,GAAK,MAEvBhE,QAAS/F,GAAqBiG,SAAA,oBAIjCtG,OAEH,EAkCF6K,GACJrE,EAAA,MAAA,CACI3E,IAAMiJ,IACFpK,GAAY2B,QAAUyI,EACtBhJ,GAAOgJ,EAAE,MAGf"}
+{"version":3,"file":"data-table.js","sources":["../../src/data-table/data-table.tsx"],"sourcesContent":["import { ArrowDownIcon, ArrowUpIcon } from \"@lifesg/react-icons\";\nimport clsx from \"clsx\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { LoadingDotsSpinner } from \"../animations\";\nimport { Checkbox } from \"../checkbox\";\nimport { ErrorDisplay } from \"../error-display\";\nimport { concatIds, VisuallyHidden } from \"../shared/accessibility\";\nimport { BasicButton } from \"../shared/input-wrapper\";\nimport { useApplyStyle } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport { useEvent, useEventListener, useId, useThrottle } from \"../util\";\nimport * as styles from \"./data-table.styles\";\nimport type { DataTableProps, HeaderProps, RowProps } from \"./types\";\n\n// @catalog\n/**\n * Renders a sortable, selectable data table with scroll-aware action bar and loading state support.\n *\n * Use `DataTable` when presenting structured multi-column data that users may need to sort by\n * column or select rows for bulk actions. Row selection, sort indicators, and the action bar\n * content are all externally controlled; the component manages scroll detection, sticky-header\n * positioning, and floating action bar behaviour internally.\n */\nexport const DataTable = ({\n    id,\n    headers,\n    rows,\n    className,\n    sortIndicators,\n    alternatingRows,\n    loadState = \"success\",\n    enableMultiSelect,\n    selectedIds,\n    disabledIds,\n    enableActionBar,\n    enableSelectAll,\n    enableStickyHeader,\n    emptyView,\n    actionBarContent,\n    renderCustomEmptyView,\n    onHeaderClick,\n    onSelect,\n    onSelectAll,\n    onClearSelectionClick,\n    ...otherProps\n}: DataTableProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const tableRef = useRef<HTMLTableElement>(null);\n    const headerRef = useRef<HTMLTableSectionElement>(null);\n    const actionBarWrapperRef = useRef<HTMLDivElement>(null);\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const internalId = useId();\n    const keyColumns = headers.filter(\n        (header): header is Exclude<HeaderProps, string> => {\n            return typeof header !== \"string\" && !!header.keyColumn;\n        }\n    );\n\n    const [actionBarStrategy, setActionBarStrategy] = useState<\n        \"sticky\" | \"fixed\" | \"inline\"\n    >(\"inline\");\n    const [scrollable, setScrollable] = useState(false);\n    const [isFloatingActionBar, setIsFloatingActionBar] = useState(false);\n\n    useApplyStyle(actionBarWrapperRef, {\n        [styles.tokens.actionBarWrapperLeft]:\n            isFloatingActionBar && tableRef.current\n                ? `${tableRef.current.getBoundingClientRect().left}px`\n                : undefined,\n        [styles.tokens.actionBarWrapperWidth]: tableRef.current\n            ? `${tableRef.current.clientWidth}px`\n            : undefined,\n    });\n\n    // =============================================================================\n    // EFFECTS, EVENT LISTENERS\n    // ============================================================================\n    const useUpdateActionBarBehaviour = useEvent(() => {\n        updateActionBarBehaviour();\n    });\n\n    useEffect(() => {\n        useUpdateActionBarBehaviour();\n    }, [useUpdateActionBarBehaviour]);\n\n    const updateActionBarBehaviourThrottled = useThrottle(\n        () => updateActionBarBehaviour(),\n        100\n    );\n\n    useResizeDetector({\n        targetRef: wrapperRef,\n        onResize: () => updateActionBarBehaviourThrottled(),\n    });\n\n    useEventListener(\"scroll\", updateActionBarBehaviourThrottled);\n    useEventListener(\n        \"scroll\",\n        updateActionBarBehaviourThrottled,\n        wrapperRef.current\n    );\n\n    // ===========================================================================\n    // HELPER FUNCTIONS\n    // ===========================================================================\n    const isAllCheckboxSelected = (): boolean => {\n        if (!rows || !rows.length || !selectedIds) {\n            return false;\n        }\n        return selectedIds.length === rows.length;\n    };\n\n    const isIndeterminateCheckbox = (): boolean => {\n        return (\n            !!selectedIds &&\n            selectedIds.length !== 0 &&\n            !isAllCheckboxSelected()\n        );\n    };\n\n    const isHeaderCheckboxDisabled = (): boolean => {\n        return !rows || !rows.length || !selectedIds;\n    };\n\n    const isRowSelected = (rowId: string): boolean => {\n        return !!selectedIds?.includes(rowId);\n    };\n\n    const isAlternatingRow = (index: number): boolean => {\n        return !!alternatingRows && index % 2 === 1;\n    };\n\n    const isDisabledRow = (rowId: string): boolean => {\n        return !!disabledIds?.includes(rowId);\n    };\n\n    const getDataTestId = (subStr: string) => {\n        if (!otherProps[\"data-testid\"]) return undefined;\n        return `${otherProps[\"data-testid\"]}-${subStr}`;\n    };\n\n    const getTotalColumns = (): number => {\n        return headers.length + (enableMultiSelect ? 1 : 0);\n    };\n\n    const getSortDirection = (fieldKey: string) => {\n        return sortIndicators?.[fieldKey];\n    };\n\n    const getHeaderAriaSort = (fieldKey: string) => {\n        const sortDirection = getSortDirection(fieldKey);\n\n        if (!sortDirection) {\n            return undefined;\n        }\n\n        return sortDirection === \"asc\" ? \"ascending\" : \"descending\";\n    };\n\n    const getSortButtonAriaLabel = (fieldKey: string) => {\n        const nextSortDirection =\n            getSortDirection(fieldKey) === \"asc\" ? \"descending\" : \"ascending\";\n\n        return ` by ${nextSortDirection} order`;\n    };\n\n    const getHeaderCellId = (fieldKey: string) => {\n        return `${internalId}-header-${fieldKey}`;\n    };\n    const getCellId = (rowId: string, fieldKey: string) => {\n        return `${internalId}-row-${rowId}-${fieldKey}-key-column`;\n    };\n\n    const getRowCheckboxAriaLabelledBy = (rowId: string) => {\n        const keyColumnIds = keyColumns.map((header) =>\n            getCellId(rowId, header.fieldKey)\n        );\n\n        return concatIds(...keyColumnIds);\n    };\n\n    const updateActionBarBehaviour = () => {\n        if (\n            !wrapperRef.current ||\n            !headerRef.current ||\n            !actionBarWrapperRef.current\n        ) {\n            return;\n        }\n\n        const wrapperBounds = wrapperRef.current.getBoundingClientRect();\n        const headerBounds = headerRef.current.getBoundingClientRect();\n\n        let strategy: typeof actionBarStrategy = \"inline\";\n\n        const scrollable =\n            wrapperRef.current.scrollHeight > wrapperRef.current.clientHeight;\n\n        if (\n            wrapperBounds.top > window.innerHeight ||\n            wrapperBounds.bottom < 0\n        ) {\n            // if fully out of the viewport, disable floating\n            strategy = \"inline\";\n        } else if (scrollable) {\n            if (\n                wrapperBounds.top > 0 &&\n                wrapperBounds.top < window.innerHeight &&\n                wrapperBounds.bottom > 0 &&\n                wrapperBounds.bottom < window.innerHeight\n            ) {\n                // if fully in the viewport, use the native sticky behaviour\n                strategy = \"sticky\";\n            } else if (\n                wrapperBounds.top < 0 &&\n                wrapperBounds.bottom > 0 &&\n                wrapperBounds.bottom < window.innerHeight\n            ) {\n                // if partially offscreen at the top, use the native sticky behaviour\n                strategy = \"sticky\";\n            } else if (\n                wrapperBounds.bottom > window.innerHeight &&\n                Math.max(wrapperBounds.top, headerBounds.bottom) +\n                    headerBounds.height <\n                    window.innerHeight\n            ) {\n                // if offscreen at the bottom, pin to the viewport, up until the table/header\n                strategy = \"fixed\";\n            }\n        } else if (\n            wrapperBounds.bottom > window.innerHeight &&\n            headerBounds.bottom + headerBounds.height < window.innerHeight\n        ) {\n            // if offscreen at the bottom, pin to the viewport, up until the header\n            strategy = \"fixed\";\n        }\n\n        setScrollable(scrollable);\n        setActionBarStrategy(strategy);\n\n        if (strategy === \"fixed\") {\n            setIsFloatingActionBar(true);\n        } else if (strategy === \"sticky\") {\n            const beforeScrollEnd =\n                wrapperRef.current.scrollTop + wrapperRef.current.clientHeight <\n                wrapperRef.current.scrollHeight;\n            setIsFloatingActionBar(beforeScrollEnd);\n        } else {\n            setIsFloatingActionBar(false);\n        }\n    };\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleHeaderClick = (fieldKey: string) => {\n        onHeaderClick?.(fieldKey);\n    };\n\n    const handleHeaderButtonClick = (\n        event: React.MouseEvent<HTMLButtonElement>,\n        fieldKey: string\n    ) => {\n        event.stopPropagation();\n        onHeaderClick?.(fieldKey);\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderHeaders = () => (\n        <thead\n            ref={headerRef}\n            className={enableStickyHeader ? styles.stickyHeader : undefined}\n        >\n            <tr className={styles.headerRow}>\n                {enableMultiSelect && renderHeaderCheckBox()}\n                {headers.map(renderHeaderCell)}\n            </tr>\n        </thead>\n    );\n\n    const renderHeaderCell = (header: HeaderProps) => {\n        const {\n            fieldKey,\n            label,\n            clickable = false,\n            style,\n        } = typeof header === \"string\"\n            ? {\n                  fieldKey: header,\n                  label: header,\n                  style: undefined,\n              }\n            : header;\n\n        const isSortable = !!getSortDirection(fieldKey);\n        const headerCellId = getHeaderCellId(fieldKey);\n        return (\n            <th\n                data-testid={getDataTestId(`header-${fieldKey}`)}\n                key={fieldKey}\n                className={clsx(\n                    styles.headerCell,\n                    clickable && styles.headerCellClickable\n                )}\n                scope=\"col\"\n                aria-sort={getHeaderAriaSort(fieldKey)}\n                style={style}\n                onClick={() => handleHeaderClick(fieldKey)}\n            >\n                <div className={styles.headerCellContent} id={headerCellId}>\n                    {typeof label === \"string\" ? (\n                        <Typography.BodyBL weight=\"bold\">\n                            {label}\n                        </Typography.BodyBL>\n                    ) : (\n                        label\n                    )}\n                    {renderSortedArrow(fieldKey)}\n                </div>\n                {(clickable || isSortable) && (\n                    <VisuallyHidden>\n                        <button\n                            onClick={(event) =>\n                                handleHeaderButtonClick(event, fieldKey)\n                            }\n                        >\n                            {isSortable && \"Sort \"}\n                            <span aria-labelledby={headerCellId} />\n                            {isSortable && getSortButtonAriaLabel(fieldKey)}\n                        </button>\n                    </VisuallyHidden>\n                )}\n            </th>\n        );\n    };\n\n    const renderSortedArrow = (fieldKey: string) => {\n        const isSorted = sortIndicators?.[fieldKey];\n\n        if (!isSorted) {\n            return <></>;\n        }\n        if (isSorted === \"asc\") {\n            return (\n                <ArrowUpIcon\n                    aria-hidden\n                    data-testid={getDataTestId(`header-${fieldKey}-arrowup`)}\n                />\n            );\n        }\n        return (\n            <ArrowDownIcon\n                aria-hidden\n                data-testid={getDataTestId(`header-${fieldKey}-arrowdown`)}\n            />\n        );\n    };\n\n    const renderHeaderCheckBox = () => {\n        return (\n            <th\n                data-testid={getDataTestId(\"header-selection\")}\n                className={clsx(styles.headerCell, styles.headerCellCheckbox)}\n                scope=\"col\"\n            >\n                <div className={styles.selectionCheckboxWrapper}>\n                    <VisuallyHidden>Row selection</VisuallyHidden>\n                    {enableSelectAll && (\n                        <Checkbox\n                            checked={isAllCheckboxSelected()}\n                            indeterminate={isIndeterminateCheckbox()}\n                            disabled={isHeaderCheckboxDisabled()}\n                            aria-label=\"Select all rows\"\n                            onClick={() => {\n                                if (onSelectAll) {\n                                    onSelectAll(isAllCheckboxSelected());\n                                }\n                            }}\n                        />\n                    )}\n                </div>\n            </th>\n        );\n    };\n\n    const renderRows = () => {\n        return !rows || rows.length < 1 ? (\n            <tr className={styles.bodyRow}>\n                <td\n                    className={styles.emptyStateCell}\n                    colSpan={getTotalColumns()}\n                >\n                    {renderCustomEmptyView\n                        ? renderCustomEmptyView()\n                        : renderBasicEmptyView()}\n                </td>\n            </tr>\n        ) : (\n            <>\n                {rows?.map((row: RowProps, index: number) => (\n                    <tr\n                        data-testid={getDataTestId(`row-${row.id.toString()}`)}\n                        key={row.id.toString()}\n                        className={clsx(\n                            styles.bodyRow,\n                            isFloatingActionBar &&\n                                styles.bodyRowWithBottomBorder,\n                            isAlternatingRow(index) &&\n                                styles.bodyRowAlternating,\n                            enableMultiSelect && styles.bodyRowSelectable,\n                            isRowSelected(row.id.toString()) &&\n                                styles.bodyRowSelected\n                        )}\n                    >\n                        {enableMultiSelect && renderRowCheckBox(row)}\n\n                        {headers.map((header) => renderRowCell(header, row))}\n                    </tr>\n                ))}\n            </>\n        );\n    };\n\n    const renderRowCell = (header: HeaderProps, row: RowProps) => {\n        const style = typeof header === \"string\" ? undefined : header.style;\n        const fieldKey = typeof header === \"string\" ? header : header.fieldKey;\n        const rowId = row.id.toString();\n        const cellData = row[fieldKey];\n        const cellId = `${rowId}-${fieldKey}`;\n\n        let cellContent: React.ReactNode;\n        if (typeof cellData === \"string\" || typeof cellData === \"number\") {\n            cellContent = (\n                <Typography.BodyBL className={styles.bodyCellText}>\n                    {cellData}\n                </Typography.BodyBL>\n            );\n        } else if (typeof cellData === \"function\") {\n            cellContent = cellData(row, { isSelected: isRowSelected(rowId) });\n        } else {\n            cellContent = cellData;\n        }\n\n        return (\n            <td\n                data-testid={getDataTestId(`row-${cellId}`)}\n                key={cellId}\n                id={getCellId(rowId, fieldKey)}\n                className={styles.bodyCell}\n                style={style}\n            >\n                {cellContent}\n            </td>\n        );\n    };\n\n    const renderRowCheckBox = (row: RowProps) => {\n        const rowId = row.id.toString();\n\n        return (\n            <td\n                data-testid={getDataTestId(`row-${rowId}-selection`)}\n                className={clsx(styles.bodyCell, styles.bodyCellCheckbox)}\n            >\n                <div className={styles.selectionCheckboxWrapper}>\n                    <Checkbox\n                        checked={isRowSelected(rowId)}\n                        aria-labelledby={getRowCheckboxAriaLabelledBy(rowId)}\n                        onClick={() => {\n                            if (onSelect) {\n                                onSelect(rowId, !isRowSelected(rowId));\n                            }\n                        }}\n                        disabled={isDisabledRow(rowId)}\n                        focusableWhenDisabled={isDisabledRow(rowId)}\n                    />\n                </div>\n            </td>\n        );\n    };\n\n    const renderBasicEmptyView = () => {\n        let emptyTitle: JSX.Element;\n        if (!emptyView?.title) {\n            emptyTitle = (\n                <Typography.HeadingSM\n                    className={styles.emptyStateTitle}\n                    weight=\"bold\"\n                >\n                    {\"No <items> found\"}\n                </Typography.HeadingSM>\n            );\n        } else if (typeof emptyView.title === \"string\") {\n            emptyTitle = (\n                <Typography.HeadingSM\n                    className={styles.emptyStateTitle}\n                    weight=\"bold\"\n                >\n                    {emptyView.title}\n                </Typography.HeadingSM>\n            );\n        } else {\n            emptyTitle = emptyView.title;\n        }\n\n        return (\n            <ErrorDisplay\n                type={\"no-item-found\"}\n                {...emptyView}\n                title={emptyTitle}\n                description={\n                    emptyView?.description\n                        ? emptyView.description\n                        : \"No matching rows\"\n                }\n            />\n        );\n    };\n\n    const renderLoader = () => {\n        return (\n            <tr className={styles.bodyRow}>\n                <td colSpan={getTotalColumns()}>\n                    <div\n                        className={styles.loadingStateWrapper}\n                        role=\"status\"\n                        aria-live=\"polite\"\n                        aria-label=\"Loading table\"\n                    >\n                        {loadState === \"loading\" && <LoadingDotsSpinner />}\n                    </div>\n                </td>\n            </tr>\n        );\n    };\n\n    const renderSelectionBar = () => {\n        const count = selectedIds?.length ?? 0;\n        const counter = `item${count > 1 ? \"s\" : \"\"}`;\n\n        return (\n            <>\n                <div\n                    ref={actionBarWrapperRef}\n                    className={styles.actionBarWrapper}\n                    data-strategy={actionBarStrategy}\n                >\n                    <div\n                        data-testid=\"data-table-action-bar\"\n                        className={clsx(\n                            styles.actionBar,\n                            isFloatingActionBar && styles.actionBarFloating\n                        )}\n                    >\n                        <Typography.BodyMD weight=\"semibold\">{`${count} ${counter} selected`}</Typography.BodyMD>\n                        <BasicButton\n                            className={styles.actionBarButton}\n                            type=\"button\"\n                            aria-label={`Clear selection of ${count} ${counter}`}\n                            onClick={onClearSelectionClick}\n                        >\n                            Clear selection\n                        </BasicButton>\n                        {actionBarContent}\n                    </div>\n                </div>\n                {/* leave a fixed space when action bar floats to avoid layout shift */}\n                {actionBarStrategy !== \"sticky\" && (\n                    <div className={styles.actionBarSpacer} />\n                )}\n            </>\n        );\n    };\n\n    return (\n        <div\n            id={id || \"table-wrapper\"}\n            data-testid={otherProps[\"data-testid\"] || \"table\"}\n            className={clsx(\n                styles.tableWrapper,\n                scrollable && styles.tableWrapperScrollable,\n                className\n            )}\n            ref={wrapperRef}\n            tabIndex={0} // scrollable container must be focusable to support keyboard users\n        >\n            <div className={styles.tableContainer}>\n                <table ref={tableRef} className={styles.table}>\n                    {renderHeaders()}\n                    <tbody>\n                        {loadState === \"success\"\n                            ? renderRows()\n                            : renderLoader()}\n                    </tbody>\n                </table>\n            </div>\n            {enableActionBar &&\n                selectedIds &&\n                selectedIds.length > 0 &&\n                renderSelectionBar()}\n        </div>\n    );\n};\n"],"names":["DataTable","_a","id","headers","rows","className","sortIndicators","alternatingRows","loadState","enableMultiSelect","selectedIds","disabledIds","enableActionBar","enableSelectAll","enableStickyHeader","emptyView","actionBarContent","renderCustomEmptyView","onHeaderClick","onSelect","onSelectAll","onClearSelectionClick","otherProps","__rest","tableRef","useRef","headerRef","actionBarWrapperRef","wrapperRef","internalId","useId","keyColumns","filter","header","keyColumn","actionBarStrategy","setActionBarStrategy","useState","scrollable","setScrollable","isFloatingActionBar","setIsFloatingActionBar","useApplyStyle","styles.tokens","actionBarWrapperLeft","current","getBoundingClientRect","left","undefined","actionBarWrapperWidth","clientWidth","useUpdateActionBarBehaviour","useEvent","updateActionBarBehaviour","useEffect","updateActionBarBehaviourThrottled","useThrottle","useResizeDetector","targetRef","onResize","useEventListener","isAllCheckboxSelected","length","isRowSelected","rowId","includes","isAlternatingRow","index","isDisabledRow","getDataTestId","subStr","getTotalColumns","getSortDirection","fieldKey","getHeaderAriaSort","sortDirection","getSortButtonAriaLabel","getCellId","getRowCheckboxAriaLabelledBy","keyColumnIds","map","concatIds","wrapperBounds","headerBounds","strategy","scrollHeight","clientHeight","top","window","innerHeight","bottom","Math","max","height","beforeScrollEnd","scrollTop","renderHeaderCell","label","clickable","style","isSortable","headerCellId","getHeaderCellId","_jsxs","clsx","styles.headerCell","styles.headerCellClickable","scope","onClick","handleHeaderClick","children","styles.headerCellContent","_jsx","Typography","BodyBL","weight","renderSortedArrow","VisuallyHidden","event","stopPropagation","handleHeaderButtonClick","isSorted","ArrowUpIcon","ArrowDownIcon","renderHeaderCheckBox","styles.headerCellCheckbox","styles.selectionCheckboxWrapper","Checkbox","checked","indeterminate","disabled","renderRowCell","row","toString","cellData","cellId","cellContent","styles.bodyCellText","isSelected","styles.bodyCell","renderRowCheckBox","styles.bodyCellCheckbox","focusableWhenDisabled","renderBasicEmptyView","emptyTitle","title","HeadingSM","styles.emptyStateTitle","ErrorDisplay","Object","assign","type","description","styles.tableWrapper","styles.tableWrapperScrollable","ref","tabIndex","styles.tableContainer","styles.table","styles.stickyHeader","styles.headerRow","styles.bodyRow","styles.emptyStateCell","colSpan","_Fragment","styles.bodyRowWithBottomBorder","styles.bodyRowAlternating","styles.bodyRowSelectable","styles.bodyRowSelected","styles.loadingStateWrapper","role","LoadingDotsSpinner","count","counter","styles.actionBarWrapper","styles.actionBar","styles.actionBarFloating","BodyMD","BasicButton","styles.actionBarButton","styles.actionBarSpacer","renderSelectionBar"],"mappings":"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"}

package/data-table/data-table.styles.d.ts

@@ -3,6 +3,7 @@ export declare const tokens: {
     readonly actionBarWrapperWidth: "--fds-internal-dataTable-actionBarWrapper-width";
 };
 export declare const tableWrapper: import("@linaria/core").LinariaClassName;
+export declare const tableWrapperScrollable: import("@linaria/core").LinariaClassName;
 export declare const tableContainer: import("@linaria/core").LinariaClassName;
 export declare const table: import("@linaria/core").LinariaClassName;
 export declare const stickyHeader: import("@linaria/core").LinariaClassName;
@@ -22,9 +23,9 @@ export declare const bodyCellText: import("@linaria/core").LinariaClassName;
 export declare const emptyStateCell: import("@linaria/core").LinariaClassName;
 export declare const selectionCheckboxWrapper: import("@linaria/core").LinariaClassName;
 export declare const actionBarButton: import("@linaria/core").LinariaClassName;
+export declare const actionBarSpacer: import("@linaria/core").LinariaClassName;
 export declare const actionBar: import("@linaria/core").LinariaClassName;
 export declare const actionBarFloating: import("@linaria/core").LinariaClassName;
 export declare const actionBarWrapper: import("@linaria/core").LinariaClassName;
-export declare const actionBarWrapperFloating: import("@linaria/core").LinariaClassName;
 export declare const loadingStateWrapper: import("@linaria/core").LinariaClassName;
 export declare const emptyStateTitle: import("@linaria/core").LinariaClassName;

package/data-table/data-table.styles.js

@@ -1,2 +1,2 @@
-import"./data-table.styles_1iqq1g7.css";const a={actionBarWrapperLeft:"--fds-internal-dataTable-actionBarWrapper-left",actionBarWrapperWidth:"--fds-internal-dataTable-actionBarWrapper-width"},t="t188sfx3",e="t1j0mhj",r="t4ucy2z",n="s7u4vf5",c="h1nfqacf",p="h1744qno",b="h1ec4wtd",d="hp15x3z",i="h4ne4e9",s="bfa3d3x",f="b6ks76c",l="b1bceurq",h="b8t2s91",o="bjmthdi",q="b1tvp43a",x="bx1feaw",y="b1g3gl2s",g="e1yxh9il",w="s1w2nktt",W="axywpxo",m="anoy5c0",u="a1gvi5ye",B="aag0lf9",_="a1euqarq",j="ldhafdm",v="e1pcc0nq";export{m as actionBar,W as actionBarButton,u as actionBarFloating,B as actionBarWrapper,_ as actionBarWrapperFloating,s as bodyCell,x as bodyCellCheckbox,y as bodyCellText,f as bodyRow,l as bodyRowAlternating,o as bodyRowSelectable,h as bodyRowSelected,q as bodyRowWithBottomBorder,g as emptyStateCell,v as emptyStateTitle,p as headerCell,d as headerCellCheckbox,b as headerCellClickable,i as headerCellContent,c as headerRow,j as loadingStateWrapper,w as selectionCheckboxWrapper,n as stickyHeader,r as table,e as tableContainer,t as tableWrapper,a as tokens};
+import"./data-table.styles_rxganh.css";const a={actionBarWrapperLeft:"--fds-internal-dataTable-actionBarWrapper-left",actionBarWrapperWidth:"--fds-internal-dataTable-actionBarWrapper-width"},t="t188sfx3",e="t1j0mhj",r="t4ucy2z",n="t7u4vf5",c="s1nfqacf",p="h1744qno",b="h1ec4wtd",d="hp15x3z",f="h4ne4e9",s="hfa3d3x",h="b6ks76c",i="b1bceurq",l="b8t2s91",o="bjmthdi",x="b1tvp43a",q="bx1feaw",y="b1g3gl2s",g="b1yxh9il",w="e1w2nktt",W="sxywpxo",m="anoy5c0",u="a1gvi5ye",B="aag0lf9",_="a1euqarq",j="adhafdm",k="l1pcc0nq",v="e1qkofer";export{B as actionBar,m as actionBarButton,_ as actionBarFloating,u as actionBarSpacer,j as actionBarWrapper,h as bodyCell,y as bodyCellCheckbox,g as bodyCellText,i as bodyRow,l as bodyRowAlternating,x as bodyRowSelectable,o as bodyRowSelected,q as bodyRowWithBottomBorder,w as emptyStateCell,v as emptyStateTitle,b as headerCell,f as headerCellCheckbox,d as headerCellClickable,s as headerCellContent,p as headerRow,k as loadingStateWrapper,W as selectionCheckboxWrapper,c as stickyHeader,n as table,r as tableContainer,t as tableWrapper,e as tableWrapperScrollable,a as tokens};
 //# sourceMappingURL=data-table.styles.js.map

package/data-table/data-table.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-table.styles.js","sources":["../../src/data-table/data-table.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { lineClampCss } from \"../shared/styles\";\nimport {\n    Border,\n    Colour,\n    Font,\n    Motion,\n    Radius,\n    Shadow,\n    Spacing,\n} from \"../theme\";\n\nexport const tokens = {\n    actionBarWrapperLeft: \"--fds-internal-dataTable-actionBarWrapper-left\",\n    actionBarWrapperWidth: \"--fds-internal-dataTable-actionBarWrapper-width\",\n} as const;\n\n// =============================================================================\n// Layout\n// =============================================================================\nexport const tableWrapper = css`\n    overflow: auto;\n    display: flex;\n    flex-direction: column;\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    border-radius: ${Radius[\"md\"]};\n\n    // Hide scrollbar\n    &::-webkit-scrollbar {\n        display: none;\n    }\n    * {\n        -ms-overflow-style: none; /* IE and Edge */\n        scrollbar-width: none; /* Firefox */\n    }\n`;\n\nexport const tableContainer = css`\n    flex: 1;\n`;\n\nexport const table = css`\n    text-align: left;\n    border-collapse: separate;\n    border-spacing: 0;\n    width: 100%;\n`;\n\n// =============================================================================\n// Header\n// =============================================================================\nexport const stickyHeader = css`\n    position: sticky;\n    top: 0;\n    z-index: 20;\n`;\n\nexport const headerRow = css`\n    background-color: ${Colour[\"bg-stronger\"]};\n    height: 6rem;\n    border-bottom: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n`;\n\nexport const headerCell = css`\n    padding: 1.25rem 1rem;\n    text-align: left;\n    cursor: default;\n    vertical-align: middle;\n    color: ${Colour[\"text\"]};\n    border-bottom: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n\n    &:first-child {\n        padding-left: 1.5rem;\n    }\n\n    &:last-child {\n        padding-right: 1.5rem;\n    }\n\n    &:focus-within {\n        outline: 2px solid ${Colour[\"focus-ring\"]};\n        outline-offset: -3px;\n    }\n`;\n\nexport const headerCellClickable = css`\n    cursor: pointer;\n`;\n\nexport const headerCellCheckbox = css`\n    width: 4rem;\n    padding: 1.25rem 0.5rem 1.25rem 1.5rem;\n`;\n\nexport const headerCellContent = css`\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n\n    svg {\n        color: ${Colour[\"text\"]};\n        margin-left: 0.5rem;\n    }\n`;\n\n// =============================================================================\n// Body\n// =============================================================================\nexport const bodyCell = css`\n    padding: 1.25rem 1rem;\n    vertical-align: middle;\n    color: ${Colour[\"text\"]};\n    border-bottom: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n\n    &:first-child {\n        padding-left: 1.5rem;\n    }\n\n    &:last-child {\n        padding-right: 1.5rem;\n    }\n`;\n\nexport const bodyRow = css`\n    background-color: ${Colour[\"bg\"]};\n    border-top: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n\n    &:last-child {\n        .${bodyCell} {\n            border-bottom: none;\n        }\n    }\n`;\n\nexport const bodyRowAlternating = css`\n    background-color: ${Colour[\"bg-strong\"]};\n`;\n\nexport const bodyRowSelected = css`\n    background-color: ${Colour[\"bg-selected\"]};\n`;\n\nexport const bodyRowSelectable = css`\n    &:hover {\n        background-color: ${Colour[\"bg-hover-strong\"]};\n    }\n`;\n\nexport const bodyRowWithBottomBorder = css`\n    &:last-child {\n        .${bodyCell} {\n            border-bottom: ${Border[\"width-010\"]} ${Border[\"solid\"]}\n                ${Colour[\"border\"]};\n        }\n    }\n`;\n\nexport const bodyCellCheckbox = css`\n    padding: 1.25rem 0.5rem 1.25rem 1.5rem;\n`;\n\nexport const bodyCellText = css`\n    ${lineClampCss(2)}\n    text-overflow: ellipsis;\n`;\n\nexport const emptyStateCell = css`\n    padding: 4rem 0;\n\n    &:first-child {\n        padding-left: 1.5rem;\n    }\n\n    &:last-child {\n        padding-right: 1.5rem;\n    }\n`;\n\nexport const selectionCheckboxWrapper = css`\n    display: flex;\n    align-items: center;\n    justify-content: center;\n`;\n\n// =============================================================================\n// Action bar\n// =============================================================================\nexport const actionBarButton = css`\n    ${Font[\"body-md-semibold\"]}\n    cursor: pointer;\n    color: ${Colour[\"text-primary\"]};\n    transition: ${Motion[\"duration-150\"]} ${Motion[\"ease-default\"]};\n    padding: 0.75rem;\n    margin: -0.75rem 0;\n\n    &:hover {\n        color: ${Colour[\"text-hover\"]};\n    }\n`;\n\nexport const actionBar = css`\n    overflow: hidden;\n    display: flex;\n    align-items: center;\n    height: 3.5rem;\n    padding: ${Spacing[\"spacing-16\"]} ${Spacing[\"spacing-24\"]};\n    border-top: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    background-color: ${Colour[\"bg-selected\"]};\n    transition: all 300ms ease;\n    border-radius: ${Radius[\"none\"]} ${Radius[\"none\"]} ${Radius[\"sm\"]}\n        ${Radius[\"sm\"]};\n`;\n\nexport const actionBarFloating = css`\n    transform: translateX(0.5rem) translateY(-2rem);\n    border-radius: ${Radius[\"sm\"]};\n    box-shadow: ${Shadow[\"xs-subtle\"]};\n    width: calc(100% - ${Spacing[\"spacing-16\"]});\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n`;\n\nexport const actionBarWrapper = css`\n    bottom: 0;\n    position: sticky;\n    left: 0;\n`;\n\nexport const actionBarWrapperFloating = css`\n    ${tokens.actionBarWrapperLeft}: initial;\n    ${tokens.actionBarWrapperWidth}: initial;\n\n    position: fixed;\n    left: var(${tokens.actionBarWrapperLeft}, 0px);\n    width: var(${tokens.actionBarWrapperWidth}, 100%);\n`;\n\n// =============================================================================\n// Load and error states\n// =============================================================================\nexport const loadingStateWrapper = css`\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    padding: 4rem 0;\n`;\n\nexport const emptyStateTitle = css`\n    margin-top: 2rem;\n    margin-bottom: 1rem;\n`;\n"],"names":["tokens","actionBarWrapperLeft","actionBarWrapperWidth","tableWrapper","tableContainer","table","stickyHeader","headerRow","headerCell","headerCellClickable","headerCellCheckbox","headerCellContent","bodyCell","bodyRow","bodyRowAlternating","bodyRowSelected","bodyRowSelectable","bodyRowWithBottomBorder","bodyCellCheckbox","bodyCellText","emptyStateCell","selectionCheckboxWrapper","actionBarButton","actionBar","actionBarFloating","actionBarWrapper","actionBarWrapperFloating","loadingStateWrapper","emptyStateTitle"],"mappings":"kEAaO,MAAMA,EAAS,CAClBC,qBAAsB,iDACtBC,sBAAuB,mDAMdC,EAAY,WAiBZC,EAAc,UAIdC,EAAK,UAULC,EAAY,UAMZC,EAAS,WAMTC,EAAU,WAsBVC,EAAmB,WAInBC,EAAkB,UAKlBC,EAAiB,UAcjBC,EAAQ,UAeRC,EAAO,UAWPC,EAAkB,WAIlBC,EAAe,UAIfC,EAAiB,UAMjBC,EAAuB,WASvBC,EAAgB,UAIhBC,EAAY,WAKZC,EAAc,WAYdC,EAAwB,WASxBC,EAAe,UAafC,EAAS,UAaTC,EAAiB,WAQjBC,EAAgB,UAMhBC,EAAwB,WAYxBC,EAAmB,UAOnBC,EAAe"}
+{"version":3,"file":"data-table.styles.js","sources":["../../src/data-table/data-table.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { lineClampCss } from \"../shared/styles\";\nimport {\n    Border,\n    Colour,\n    Font,\n    Motion,\n    Radius,\n    Shadow,\n    Spacing,\n} from \"../theme\";\n\nexport const tokens = {\n    actionBarWrapperLeft: \"--fds-internal-dataTable-actionBarWrapper-left\",\n    actionBarWrapperWidth: \"--fds-internal-dataTable-actionBarWrapper-width\",\n} as const;\n\n// =============================================================================\n// Layout\n// =============================================================================\nexport const tableWrapper = css`\n    /* we separate the overflow styles so that sticky elements can still work\n       with horizontal scrolling on supported browsers\n       see: https://github.com/w3c/csswg-drafts/issues/12289 */\n    overflow-y: clip;\n    overflow-x: auto;\n    position: relative;\n\n    display: flex;\n    flex-direction: column;\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    border-radius: ${Radius[\"md\"]};\n\n    /* Hide scrollbar */\n    scrollbar-width: none; /* Firefox */\n    -ms-overflow-style: none; /* IE 10+ */\n    &::-webkit-scrollbar {\n        display: none; /* Chrome/Safari/Webkit */\n    }\n`;\n\nexport const tableWrapperScrollable = css`\n    overflow-y: auto;\n`;\n\nexport const tableContainer = css`\n    flex: 1;\n`;\n\nexport const table = css`\n    text-align: left;\n    border-collapse: separate;\n    border-spacing: 0;\n    width: 100%;\n`;\n\n// =============================================================================\n// Header\n// =============================================================================\nexport const stickyHeader = css`\n    position: sticky;\n    top: 0;\n    z-index: 20;\n`;\n\nexport const headerRow = css`\n    background-color: ${Colour[\"bg-stronger\"]};\n    height: 6rem;\n    border-bottom: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n`;\n\nexport const headerCell = css`\n    padding: 1.25rem 1rem;\n    text-align: left;\n    cursor: default;\n    vertical-align: middle;\n    color: ${Colour[\"text\"]};\n    border-bottom: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n\n    &:first-child {\n        padding-left: 1.5rem;\n    }\n\n    &:last-child {\n        padding-right: 1.5rem;\n    }\n\n    &:focus-within {\n        outline: 2px solid ${Colour[\"focus-ring\"]};\n        outline-offset: -3px;\n    }\n`;\n\nexport const headerCellClickable = css`\n    cursor: pointer;\n`;\n\nexport const headerCellCheckbox = css`\n    width: 4rem;\n    padding: 1.25rem 0.5rem 1.25rem 1.5rem;\n`;\n\nexport const headerCellContent = css`\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n\n    svg {\n        color: ${Colour[\"text\"]};\n        margin-left: 0.5rem;\n    }\n`;\n\n// =============================================================================\n// Body\n// =============================================================================\nexport const bodyCell = css`\n    padding: 1.25rem 1rem;\n    vertical-align: middle;\n    color: ${Colour[\"text\"]};\n    border-bottom: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n\n    &:first-child {\n        padding-left: 1.5rem;\n    }\n\n    &:last-child {\n        padding-right: 1.5rem;\n    }\n`;\n\nexport const bodyRow = css`\n    background-color: ${Colour[\"bg\"]};\n    border-top: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n\n    &:last-child {\n        .${bodyCell} {\n            border-bottom: none;\n        }\n    }\n`;\n\nexport const bodyRowAlternating = css`\n    background-color: ${Colour[\"bg-strong\"]};\n`;\n\nexport const bodyRowSelected = css`\n    background-color: ${Colour[\"bg-selected\"]};\n`;\n\nexport const bodyRowSelectable = css`\n    &:hover {\n        background-color: ${Colour[\"bg-hover-strong\"]};\n    }\n`;\n\nexport const bodyRowWithBottomBorder = css`\n    &:last-child {\n        .${bodyCell} {\n            border-bottom: ${Border[\"width-010\"]} ${Border[\"solid\"]}\n                ${Colour[\"border\"]};\n        }\n    }\n`;\n\nexport const bodyCellCheckbox = css`\n    padding: 1.25rem 0.5rem 1.25rem 1.5rem;\n`;\n\nexport const bodyCellText = css`\n    ${lineClampCss(2)}\n    text-overflow: ellipsis;\n`;\n\nexport const emptyStateCell = css`\n    padding: 4rem 0;\n\n    &:first-child {\n        padding-left: 1.5rem;\n    }\n\n    &:last-child {\n        padding-right: 1.5rem;\n    }\n`;\n\nexport const selectionCheckboxWrapper = css`\n    display: flex;\n    align-items: center;\n    justify-content: center;\n`;\n\n// =============================================================================\n// Action bar\n// =============================================================================\nexport const actionBarButton = css`\n    ${Font[\"body-md-semibold\"]}\n    cursor: pointer;\n    color: ${Colour[\"text-primary\"]};\n    transition: ${Motion[\"duration-150\"]} ${Motion[\"ease-default\"]};\n    padding: 0.75rem;\n    margin: -0.75rem 0;\n\n    &:hover {\n        color: ${Colour[\"text-hover\"]};\n    }\n`;\n\nexport const actionBarSpacer = css`\n    height: 3.5rem;\n`;\n\nexport const actionBar = css`\n    overflow: hidden;\n    display: flex;\n    align-items: center;\n    height: 3.5rem;\n    padding: ${Spacing[\"spacing-16\"]} ${Spacing[\"spacing-24\"]};\n    border-top: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    background-color: ${Colour[\"bg-selected\"]};\n    transition: transform ${Motion[\"duration-350\"]} ${Motion[\"ease-default\"]};\n    border-radius: ${Radius[\"none\"]} ${Radius[\"none\"]} ${Radius[\"sm\"]}\n        ${Radius[\"sm\"]};\n`;\n\nexport const actionBarFloating = css`\n    transform: translateX(0.5rem) translateY(-2rem);\n    border-radius: ${Radius[\"sm\"]};\n    box-shadow: ${Shadow[\"xs-subtle\"]};\n    width: calc(100% - ${Spacing[\"spacing-16\"]});\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n`;\n\nexport const actionBarWrapper = css`\n    ${tokens.actionBarWrapperLeft}: initial;\n    ${tokens.actionBarWrapperWidth}: initial;\n\n    &[data-strategy=\"inline\"] {\n        position: absolute;\n        bottom: 0;\n        left: 0;\n        width: var(${tokens.actionBarWrapperWidth}, 100%);\n    }\n\n    &[data-strategy=\"fixed\"] {\n        position: fixed;\n        bottom: 0;\n        left: var(${tokens.actionBarWrapperLeft}, 0px);\n        width: var(${tokens.actionBarWrapperWidth}, 100%);\n    }\n\n    &[data-strategy=\"sticky\"] {\n        position: sticky;\n        bottom: 0;\n    }\n`;\n\n// =============================================================================\n// Load and error states\n// =============================================================================\nexport const loadingStateWrapper = css`\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    padding: 4rem 0;\n`;\n\nexport const emptyStateTitle = css`\n    margin-top: 2rem;\n    margin-bottom: 1rem;\n`;\n"],"names":["tokens","actionBarWrapperLeft","actionBarWrapperWidth","tableWrapper","tableWrapperScrollable","tableContainer","table","stickyHeader","headerRow","headerCell","headerCellClickable","headerCellCheckbox","headerCellContent","bodyCell","bodyRow","bodyRowAlternating","bodyRowSelected","bodyRowSelectable","bodyRowWithBottomBorder","bodyCellCheckbox","bodyCellText","emptyStateCell","selectionCheckboxWrapper","actionBarButton","actionBarSpacer","actionBar","actionBarFloating","actionBarWrapper","loadingStateWrapper","emptyStateTitle"],"mappings":"iEAaO,MAAMA,EAAS,CAClBC,qBAAsB,iDACtBC,sBAAuB,mDAMdC,EAAY,WAqBZC,EAAsB,UAItBC,EAAc,UAIdC,EAAK,UAULC,EAAY,WAMZC,EAAS,WAMTC,EAAU,WAsBVC,EAAmB,UAInBC,EAAkB,UAKlBC,EAAiB,UAcjBC,EAAQ,UAeRC,EAAO,WAWPC,EAAkB,UAIlBC,EAAe,UAIfC,EAAiB,WAMjBC,EAAuB,UASvBC,EAAgB,WAIhBC,EAAY,WAKZC,EAAc,WAYdC,EAAwB,UASxBC,EAAe,UAafC,EAAe,WAIfC,EAAS,UAaTC,EAAiB,WAQjBC,EAAgB,UA2BhBC,EAAmB,WAOnBC,EAAe"}

package/data-table/data-table.styles_rxganh.css

@@ -0,0 +1,27 @@
+@layer fds{.t188sfx3{overflow-y:clip;overflow-x:auto;position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);border-radius:var(--fds-radius-md);scrollbar-width:none;-ms-overflow-style:none;}.t188sfx3::-webkit-scrollbar{display:none;}
+.t1j0mhj{overflow-y:auto;}
+.t4ucy2z{-webkit-flex:1;-ms-flex:1;flex:1;}
+.t7u4vf5{text-align:left;border-collapse:separate;border-spacing:0;width:100%;}
+.s1nfqacf{position:-webkit-sticky;position:sticky;top:0;z-index:20;}
+.h1744qno{background-color:var(--fds-colour-bg-stronger);height:6rem;border-bottom:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);}
+.h1ec4wtd{padding:1.25rem 1rem;text-align:left;cursor:default;vertical-align:middle;color:var(--fds-colour-text);border-bottom:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);}.h1ec4wtd:first-child{padding-left:1.5rem;}.h1ec4wtd:last-child{padding-right:1.5rem;}.h1ec4wtd:focus-within{outline:2px solid var(--fds-colour-focus-ring);outline-offset:-3px;}
+.hp15x3z{cursor:pointer;}
+.h4ne4e9{width:4rem;padding:1.25rem 0.5rem 1.25rem 1.5rem;}
+.hfa3d3x{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.hfa3d3x svg{color:var(--fds-colour-text);margin-left:0.5rem;}
+.b6ks76c{padding:1.25rem 1rem;vertical-align:middle;color:var(--fds-colour-text);border-bottom:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);}.b6ks76c:first-child{padding-left:1.5rem;}.b6ks76c:last-child{padding-right:1.5rem;}
+.b1bceurq{background-color:var(--fds-colour-bg);border-top:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);}.b1bceurq:last-child .b6ks76c{border-bottom:none;}
+.b8t2s91{background-color:var(--fds-colour-bg-strong);}
+.bjmthdi{background-color:var(--fds-colour-bg-selected);}
+.b1tvp43a:hover{background-color:var(--fds-colour-bg-hover-strong);}
+.bx1feaw:last-child .b6ks76c{border-bottom:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);}
+.b1g3gl2s{padding:1.25rem 0.5rem 1.25rem 1.5rem;}
+.b1yxh9il{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;}
+.e1w2nktt{padding:4rem 0;}.e1w2nktt:first-child{padding-left:1.5rem;}.e1w2nktt:last-child{padding-right:1.5rem;}
+.sxywpxo{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}
+.anoy5c0{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);cursor:pointer;color:var(--fds-colour-text-primary);-webkit-transition:var(--fds-motion-duration-150) var(--fds-motion-timing-ease-default);transition:var(--fds-motion-duration-150) var(--fds-motion-timing-ease-default);padding:0.75rem;margin:-0.75rem 0;}.anoy5c0:hover{color:var(--fds-colour-text-hover);}
+.a1gvi5ye{height:3.5rem;}
+.aag0lf9{overflow:hidden;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:3.5rem;padding:var(--fds-spacing-16) var(--fds-spacing-24);border-top:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);background-color:var(--fds-colour-bg-selected);-webkit-transition:-webkit-transform var(--fds-motion-duration-350) var(--fds-motion-timing-ease-default);transition:transform var(--fds-motion-duration-350) var(--fds-motion-timing-ease-default);border-radius:var(--fds-radius-none) var(--fds-radius-none) var(--fds-radius-sm) var(--fds-radius-sm);}
+.a1euqarq{-webkit-transform:translateX(0.5rem) translateY(-2rem);-moz-transform:translateX(0.5rem) translateY(-2rem);-ms-transform:translateX(0.5rem) translateY(-2rem);transform:translateX(0.5rem) translateY(-2rem);border-radius:var(--fds-radius-sm);box-shadow:var(--fds-shadow-xs-subtle);width:calc(100% - var(--fds-spacing-16));border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);}
+.adhafdm{--fds-internal-dataTable-actionBarWrapper-left:initial;--fds-internal-dataTable-actionBarWrapper-width:initial;}.adhafdm[data-strategy="inline"]{position:absolute;bottom:0;left:0;width:var(--fds-internal-dataTable-actionBarWrapper-width, 100%);}.adhafdm[data-strategy="fixed"]{position:fixed;bottom:0;left:var(--fds-internal-dataTable-actionBarWrapper-left, 0px);width:var(--fds-internal-dataTable-actionBarWrapper-width, 100%);}.adhafdm[data-strategy="sticky"]{position:-webkit-sticky;position:sticky;bottom:0;}
+.l1pcc0nq{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:4rem 0;}
+.e1qkofer{margin-top:2rem;margin-bottom:1rem;}}

package/date-input/date-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"date-input.js","sources":["../../src/date-input/date-input.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport dayjs from \"dayjs\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport type { DropdownRenderProps } from \"../shared/dropdown-wrapper\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport { InputWrapper } from \"../shared/input-wrapper\";\nimport type {\n    CalendarAction,\n    InternalCalendarRef,\n} from \"../shared/internal-calendar\";\nimport { CalendarDropdown } from \"../shared/internal-calendar\";\nimport type { StandaloneDateInputRef } from \"../shared/standalone-date-input/standalone-date-input\";\nimport { StandaloneDateInput } from \"../shared/standalone-date-input/standalone-date-input\";\nimport { DateInputHelper } from \"../util\";\nimport * as styles from \"./date-input.styles\";\nimport type { DateInputProps } from \"./types\";\n\n/**\n * A single-date input field with an attached calendar dropdown.\n *\n * Use this to enter or pick a single date.\n */\nexport const DateInput = ({\n    minDate,\n    maxDate,\n    disabled,\n    disabledDates,\n    error,\n    hideInputKeyboard,\n    value,\n    onChange,\n    onFocus,\n    onBlur,\n    onYearMonthDisplayChange,\n    withButton = true,\n    readOnly,\n    id,\n    allowDisabledSelection,\n    zIndex,\n    dropdownRootNode,\n    className,\n    ...otherProps\n}: DateInputProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [initialDate, setInitialDate] = useState<string>(\n        DateInputHelper.sanitizeInput(value)\n    );\n    const [selectedDate, setSelectedDate] = useState<string>(\n        DateInputHelper.sanitizeInput(value)\n    );\n    const [hoveredDate, setHoveredDate] = useState<string | undefined>(\n        undefined\n    );\n    const [calendarOpen, setCalendarOpen] = useState<boolean>(false);\n    const [focused, setFocused] = useState<boolean>(false);\n\n    const nodeRef = useRef<HTMLDivElement>(null);\n    const inputRef = useRef<StandaloneDateInputRef>(null);\n    const calendarRef = useRef<InternalCalendarRef>(null);\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        const newValue = DateInputHelper.sanitizeInput(value);\n        setInitialDate(newValue);\n        setSelectedDate(newValue);\n    }, [value]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleClose = () => {\n        inputRef.current?.resetInput();\n        setSelectedDate(initialDate);\n        setCalendarOpen(false);\n        setFocused(false);\n\n        performOnBlurHandler();\n\n        // clear hover value for mobile scrolling\n        setHoveredDate(undefined);\n    };\n\n    const handleDismiss = () => {\n        inputRef.current?.resetInput();\n        nodeRef.current?.focus();\n        setSelectedDate(initialDate);\n        setCalendarOpen(false);\n    };\n\n    const handleChange = (val: string) => {\n        if (\n            !allowDisabledSelection &&\n            DateInputHelper.isDateDisabled(val, {\n                disabledDates,\n                minDate,\n                maxDate,\n            })\n        ) {\n            return;\n        }\n\n        setSelectedDate(val);\n\n        if (!withButton) {\n            performOnChangeHandler(val);\n            setInitialDate(val);\n            if (val) {\n                setCalendarOpen(false);\n            }\n        }\n    };\n\n    const handleSelect = (val: string) => {\n        setSelectedDate(val);\n\n        if (!withButton) {\n            performOnChangeHandler(val);\n            setInitialDate(val);\n            if (val) {\n                inputRef.current?.focusYearRef();\n                setCalendarOpen(false);\n            }\n\n            // clear hover value for mobile when onMouseLeave={handleMouseLeaveCell} is not triggered due to touch input\n            setHoveredDate(undefined);\n        }\n    };\n\n    const handleFocus = () => {\n        if (readOnly || disabled) return;\n\n        setCalendarOpen(true);\n\n        if (focused) return;\n\n        setFocused(true);\n\n        if (onFocus) {\n            onFocus();\n        }\n    };\n\n    const handleBlur = (e: React.FocusEvent) => {\n        const target = e.relatedTarget as HTMLElement;\n\n        const isInsideCalendar =\n            calendarRef.current && calendarRef.current.contains(target);\n        const isInsideNode =\n            nodeRef.current && nodeRef.current.contains(target);\n        const isFloatingElement =\n            target?.matches?.(\"[data-floating-ui-focusable]\") ||\n            target?.matches?.(\"[data-floating-ui-focus-guard]\");\n\n        // Condition when the calendar is closed and focus moved outside the component\n        const shouldBlurWhenClosed =\n            focused && !calendarOpen && !isInsideNode && !isFloatingElement;\n\n        // Condition when the calendar is open, and focus went outside both input and calendar\n        const shouldBlurWhenOpenOutside =\n            calendarOpen &&\n            !isInsideNode &&\n            !isInsideCalendar &&\n            !isFloatingElement;\n\n        if (shouldBlurWhenClosed || shouldBlurWhenOpenOutside) {\n            inputRef.current?.resetInput();\n            setSelectedDate(initialDate);\n            setFocused(false);\n            setCalendarOpen(false);\n            performOnBlurHandler();\n        }\n    };\n\n    const handleHoverDayCell = (value: string) => {\n        if (!calendarOpen) return;\n        setHoveredDate(value);\n    };\n\n    const handleCalendarAction = (buttonAction: CalendarAction) => {\n        // handle button in day calendar view\n        switch (buttonAction) {\n            case \"reset\":\n                setSelectedDate(initialDate);\n                break;\n            case \"confirmed\":\n                setInitialDate(selectedDate);\n                performOnChangeHandler(selectedDate);\n                break;\n        }\n\n        const isValid = dayjs(selectedDate, \"YYYY-MM-DD\", true).isValid();\n\n        // Focus on year input if the selected date is valid to avoid restarting entire tab order\n        if (isValid) {\n            inputRef.current?.focusYearRef();\n        } else {\n            nodeRef.current?.focus();\n        }\n        setCalendarOpen(false);\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const performOnChangeHandler = (changeValue: string) => {\n        if (onChange) {\n            onChange(changeValue);\n        }\n    };\n\n    const performOnBlurHandler = () => {\n        if (onBlur) {\n            onBlur();\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderInput = () => {\n        return (\n            <InputWrapper\n                role=\"group\"\n                tabIndex={0}\n                ref={nodeRef}\n                onBlur={handleBlur}\n                onFocus={handleFocus}\n                disabled={disabled}\n                readOnly={readOnly}\n                focused={focused}\n                error={error}\n                id={id}\n                data-testid={otherProps[\"data-testid\"]}\n                aria-disabled={disabled}\n                className={clsx(styles.container, className)}\n                {...otherProps}\n            >\n                <StandaloneDateInput\n                    ref={inputRef}\n                    disabled={disabled}\n                    onChange={handleChange}\n                    readOnly={readOnly}\n                    focused={calendarOpen}\n                    names={[\"start-day\", \"start-month\", \"start-year\"]}\n                    value={selectedDate}\n                    hoverValue={hoveredDate}\n                    hideInputKeyboard={hideInputKeyboard}\n                />\n            </InputWrapper>\n        );\n    };\n\n    const renderCalendar = ({ elementWidth }: DropdownRenderProps) => {\n        return (\n            <CalendarDropdown\n                variant=\"single\"\n                ref={calendarRef}\n                initialCalendarDate={selectedDate}\n                withButton={withButton}\n                value={selectedDate}\n                disabledDates={disabledDates}\n                minDate={minDate}\n                maxDate={maxDate}\n                allowDisabledSelection={allowDisabledSelection}\n                onHover={handleHoverDayCell}\n                onSelect={handleSelect}\n                onDismiss={handleCalendarAction}\n                onYearMonthDisplayChange={onYearMonthDisplayChange}\n                width={elementWidth}\n                isFocusable={!readOnly && !disabled}\n            />\n        );\n    };\n\n    return (\n        <ElementWithDropdown\n            enabled={!readOnly && !disabled}\n            isOpen={calendarOpen}\n            renderElement={renderInput}\n            renderDropdown={renderCalendar}\n            onClose={handleClose}\n            onDismiss={handleDismiss}\n            customZIndex={zIndex}\n            offset={16}\n            rootNode={dropdownRootNode}\n        />\n    );\n};\n"],"names":["DateInput","_a","minDate","maxDate","disabled","disabledDates","error","hideInputKeyboard","value","onChange","onFocus","onBlur","onYearMonthDisplayChange","withButton","readOnly","id","allowDisabledSelection","zIndex","dropdownRootNode","className","otherProps","__rest","initialDate","setInitialDate","useState","DateInputHelper","sanitizeInput","selectedDate","setSelectedDate","hoveredDate","setHoveredDate","undefined","calendarOpen","setCalendarOpen","focused","setFocused","nodeRef","useRef","inputRef","calendarRef","useEffect","newValue","handleChange","val","isDateDisabled","performOnChangeHandler","handleSelect","current","focusYearRef","handleFocus","handleBlur","e","target","relatedTarget","isInsideCalendar","contains","isInsideNode","isFloatingElement","matches","call","_b","_c","resetInput","performOnBlurHandler","handleHoverDayCell","handleCalendarAction","buttonAction","dayjs","isValid","focus","changeValue","_jsx","ElementWithDropdown","enabled","isOpen","renderElement","InputWrapper","Object","assign","role","tabIndex","ref","clsx","styles.container","children","StandaloneDateInput","names","hoverValue","renderDropdown","elementWidth","CalendarDropdown","variant","initialCalendarDate","onHover","onSelect","onDismiss","width","isFocusable","onClose","customZIndex","offset","rootNode"],"mappings":"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"}
+{"version":3,"file":"date-input.js","sources":["../../src/date-input/date-input.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport dayjs from \"dayjs\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport type { DropdownRenderProps } from \"../shared/dropdown-wrapper\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport { InputWrapper } from \"../shared/input-wrapper\";\nimport type {\n    CalendarAction,\n    InternalCalendarRef,\n} from \"../shared/internal-calendar\";\nimport { CalendarDropdown } from \"../shared/internal-calendar\";\nimport type { StandaloneDateInputRef } from \"../shared/standalone-date-input/standalone-date-input\";\nimport { StandaloneDateInput } from \"../shared/standalone-date-input/standalone-date-input\";\nimport { DateInputHelper } from \"../util\";\nimport * as styles from \"./date-input.styles\";\nimport type { DateInputProps } from \"./types\";\n\n// @catalog\n/**\n * A single-date input field with an attached calendar dropdown.\n *\n * Use this to enter or pick a single date.\n */\nexport const DateInput = ({\n    minDate,\n    maxDate,\n    disabled,\n    disabledDates,\n    error,\n    hideInputKeyboard,\n    value,\n    onChange,\n    onFocus,\n    onBlur,\n    onYearMonthDisplayChange,\n    withButton = true,\n    readOnly,\n    id,\n    allowDisabledSelection,\n    zIndex,\n    dropdownRootNode,\n    className,\n    ...otherProps\n}: DateInputProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [initialDate, setInitialDate] = useState<string>(\n        DateInputHelper.sanitizeInput(value)\n    );\n    const [selectedDate, setSelectedDate] = useState<string>(\n        DateInputHelper.sanitizeInput(value)\n    );\n    const [hoveredDate, setHoveredDate] = useState<string | undefined>(\n        undefined\n    );\n    const [calendarOpen, setCalendarOpen] = useState<boolean>(false);\n    const [focused, setFocused] = useState<boolean>(false);\n\n    const nodeRef = useRef<HTMLDivElement>(null);\n    const inputRef = useRef<StandaloneDateInputRef>(null);\n    const calendarRef = useRef<InternalCalendarRef>(null);\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        const newValue = DateInputHelper.sanitizeInput(value);\n        setInitialDate(newValue);\n        setSelectedDate(newValue);\n    }, [value]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleClose = () => {\n        inputRef.current?.resetInput();\n        setSelectedDate(initialDate);\n        setCalendarOpen(false);\n        setFocused(false);\n\n        performOnBlurHandler();\n\n        // clear hover value for mobile scrolling\n        setHoveredDate(undefined);\n    };\n\n    const handleDismiss = () => {\n        inputRef.current?.resetInput();\n        nodeRef.current?.focus();\n        setSelectedDate(initialDate);\n        setCalendarOpen(false);\n    };\n\n    const handleChange = (val: string) => {\n        if (\n            !allowDisabledSelection &&\n            DateInputHelper.isDateDisabled(val, {\n                disabledDates,\n                minDate,\n                maxDate,\n            })\n        ) {\n            return;\n        }\n\n        setSelectedDate(val);\n\n        if (!withButton) {\n            performOnChangeHandler(val);\n            setInitialDate(val);\n            if (val) {\n                setCalendarOpen(false);\n            }\n        }\n    };\n\n    const handleSelect = (val: string) => {\n        setSelectedDate(val);\n\n        if (!withButton) {\n            performOnChangeHandler(val);\n            setInitialDate(val);\n            if (val) {\n                inputRef.current?.focusYearRef();\n                setCalendarOpen(false);\n            }\n\n            // clear hover value for mobile when onMouseLeave={handleMouseLeaveCell} is not triggered due to touch input\n            setHoveredDate(undefined);\n        }\n    };\n\n    const handleFocus = () => {\n        if (readOnly || disabled) return;\n\n        setCalendarOpen(true);\n\n        if (focused) return;\n\n        setFocused(true);\n\n        if (onFocus) {\n            onFocus();\n        }\n    };\n\n    const handleBlur = (e: React.FocusEvent) => {\n        const target = e.relatedTarget as HTMLElement;\n\n        const isInsideCalendar =\n            calendarRef.current && calendarRef.current.contains(target);\n        const isInsideNode =\n            nodeRef.current && nodeRef.current.contains(target);\n        const isFloatingElement =\n            target?.matches?.(\"[data-floating-ui-focusable]\") ||\n            target?.matches?.(\"[data-floating-ui-focus-guard]\");\n\n        // Condition when the calendar is closed and focus moved outside the component\n        const shouldBlurWhenClosed =\n            focused && !calendarOpen && !isInsideNode && !isFloatingElement;\n\n        // Condition when the calendar is open, and focus went outside both input and calendar\n        const shouldBlurWhenOpenOutside =\n            calendarOpen &&\n            !isInsideNode &&\n            !isInsideCalendar &&\n            !isFloatingElement;\n\n        if (shouldBlurWhenClosed || shouldBlurWhenOpenOutside) {\n            inputRef.current?.resetInput();\n            setSelectedDate(initialDate);\n            setFocused(false);\n            setCalendarOpen(false);\n            performOnBlurHandler();\n        }\n    };\n\n    const handleHoverDayCell = (value: string) => {\n        if (!calendarOpen) return;\n        setHoveredDate(value);\n    };\n\n    const handleCalendarAction = (buttonAction: CalendarAction) => {\n        // handle button in day calendar view\n        switch (buttonAction) {\n            case \"reset\":\n                setSelectedDate(initialDate);\n                break;\n            case \"confirmed\":\n                setInitialDate(selectedDate);\n                performOnChangeHandler(selectedDate);\n                break;\n        }\n\n        const isValid = dayjs(selectedDate, \"YYYY-MM-DD\", true).isValid();\n\n        // Focus on year input if the selected date is valid to avoid restarting entire tab order\n        if (isValid) {\n            inputRef.current?.focusYearRef();\n        } else {\n            nodeRef.current?.focus();\n        }\n        setCalendarOpen(false);\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const performOnChangeHandler = (changeValue: string) => {\n        if (onChange) {\n            onChange(changeValue);\n        }\n    };\n\n    const performOnBlurHandler = () => {\n        if (onBlur) {\n            onBlur();\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderInput = () => {\n        return (\n            <InputWrapper\n                role=\"group\"\n                tabIndex={0}\n                ref={nodeRef}\n                onBlur={handleBlur}\n                onFocus={handleFocus}\n                disabled={disabled}\n                readOnly={readOnly}\n                focused={focused}\n                error={error}\n                id={id}\n                data-testid={otherProps[\"data-testid\"]}\n                aria-disabled={disabled}\n                className={clsx(styles.container, className)}\n                {...otherProps}\n            >\n                <StandaloneDateInput\n                    ref={inputRef}\n                    disabled={disabled}\n                    onChange={handleChange}\n                    readOnly={readOnly}\n                    focused={calendarOpen}\n                    names={[\"start-day\", \"start-month\", \"start-year\"]}\n                    value={selectedDate}\n                    hoverValue={hoveredDate}\n                    hideInputKeyboard={hideInputKeyboard}\n                />\n            </InputWrapper>\n        );\n    };\n\n    const renderCalendar = ({ elementWidth }: DropdownRenderProps) => {\n        return (\n            <CalendarDropdown\n                variant=\"single\"\n                ref={calendarRef}\n                initialCalendarDate={selectedDate}\n                withButton={withButton}\n                value={selectedDate}\n                disabledDates={disabledDates}\n                minDate={minDate}\n                maxDate={maxDate}\n                allowDisabledSelection={allowDisabledSelection}\n                onHover={handleHoverDayCell}\n                onSelect={handleSelect}\n                onDismiss={handleCalendarAction}\n                onYearMonthDisplayChange={onYearMonthDisplayChange}\n                width={elementWidth}\n                isFocusable={!readOnly && !disabled}\n            />\n        );\n    };\n\n    return (\n        <ElementWithDropdown\n            enabled={!readOnly && !disabled}\n            isOpen={calendarOpen}\n            renderElement={renderInput}\n            renderDropdown={renderCalendar}\n            onClose={handleClose}\n            onDismiss={handleDismiss}\n            customZIndex={zIndex}\n            offset={16}\n            rootNode={dropdownRootNode}\n        />\n    );\n};\n"],"names":["DateInput","_a","minDate","maxDate","disabled","disabledDates","error","hideInputKeyboard","value","onChange","onFocus","onBlur","onYearMonthDisplayChange","withButton","readOnly","id","allowDisabledSelection","zIndex","dropdownRootNode","className","otherProps","__rest","initialDate","setInitialDate","useState","DateInputHelper","sanitizeInput","selectedDate","setSelectedDate","hoveredDate","setHoveredDate","undefined","calendarOpen","setCalendarOpen","focused","setFocused","nodeRef","useRef","inputRef","calendarRef","useEffect","newValue","handleChange","val","isDateDisabled","performOnChangeHandler","handleSelect","current","focusYearRef","handleFocus","handleBlur","e","target","relatedTarget","isInsideCalendar","contains","isInsideNode","isFloatingElement","matches","call","_b","_c","resetInput","performOnBlurHandler","handleHoverDayCell","handleCalendarAction","buttonAction","dayjs","isValid","focus","changeValue","_jsx","ElementWithDropdown","enabled","isOpen","renderElement","InputWrapper","Object","assign","role","tabIndex","ref","clsx","styles.container","children","StandaloneDateInput","names","hoverValue","renderDropdown","elementWidth","CalendarDropdown","variant","initialCalendarDate","onHover","onSelect","onDismiss","width","isFocusable","onClose","customZIndex","offset","rootNode"],"mappings":"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"}

package/date-input/types.d.ts

@@ -14,7 +14,7 @@ export interface DateInputProps extends CommonCalendarProps {
      * Note: if a parent of the trigger has a higher `z-index` than the dropdown,
      * the dropdown may be obscured.
      *
-     * @default `document.body`
+     * @default document.body
      */
     dropdownRootNode?: RefObject<HTMLElement> | undefined;
     "data-testid"?: string | undefined;