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

package/cjs/timetable/timetable.js.map

@@ -1 +1 @@
-{"version":3,"file":"timetable.js","sources":["../../../src/timetable/timetable.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport dayjs from \"dayjs\";\nimport { isEmpty, throttle } from \"lodash\";\nimport {\n    forwardRef,\n    useEffect,\n    useImperativeHandle,\n    useRef,\n    useState,\n} from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { LoadingDotsSpinner } from \"../animations\";\nimport { ErrorDisplay } from \"../error-display\";\nimport type { PopoverTriggerProps } from \"../popover\";\nimport { PopoverTrigger } from \"../popover\";\nimport { VisuallyHidden } from \"../shared/accessibility\";\nimport { useApplyStyle } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport { TimeHelper } from \"../util/time-helper\";\nimport {\n    MIN_INTERVAL_WIDTH,\n    ROW_BAR_COLOR_ALTERNATE_COLOR,\n    ROW_BAR_COLOR_SEQUENCE,\n    ROW_HEADER_WIDTH,\n    ROW_INTERVAL,\n} from \"./const\";\nimport * as styles from \"./timetable.styles\";\nimport { TimeTableHeader } from \"./timetable-header/timetable-header\";\nimport { RowBar } from \"./timetable-row/row-bar\";\nimport type { TimeTableProps, TimeTableRef, TimeTableRowData } from \"./types\";\n\nconst Component = (props: TimeTableProps, ref: React.Ref<TimeTableRef>) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const {\n        date,\n        emptyContentMessage,\n        rowData,\n        loading,\n        minTime = \"00:00\",\n        maxTime = \"23:00\",\n        initialScrollTime,\n        minDate,\n        maxDate,\n        totalRecords,\n        showCurrentDateAsToday,\n        showDateAsShortForm,\n        onPage,\n        onRefresh,\n        onNextDayClick,\n        onPreviousDayClick,\n        onCalendarDateSelect,\n        roundInitialScrollTime = true,\n        ...otherProps\n    } = props;\n    const testId = otherProps[\"data-testid\"] || \"timetable\";\n    const timetableMinTime = TimeHelper.roundToNearestInterval(minTime, 60);\n    const timetableMaxTime = TimeHelper.roundToNearestInterval(\n        maxTime,\n        60,\n        true\n    );\n    const hourlyIntervals = TimeHelper.generateHourlyIntervals(\n        timetableMinTime,\n        timetableMaxTime\n    );\n    const numberOfIntervals = Math.ceil(\n        (hourlyIntervals.length * 60) / ROW_INTERVAL\n    );\n    const formattedDate = dayjs(date).format(\"D MMMM YYYY\");\n    const timetableAriaLabel = `Timetable of resource availability, for ${formattedDate}, from ${dayjs(\n        timetableMinTime,\n        \"HH:mm\"\n    ).format(\"ha\")} to ${dayjs(timetableMaxTime, \"HH:mm\").format(\"ha\")}`;\n    const ariaRowCount = (totalRecords || rowData.length) + 1;\n    const ariaColCount = numberOfIntervals + 1;\n\n    const isEmptyContent = totalRecords === 0 || isEmpty(rowData);\n    const allRecordsLoaded = isEmptyContent || rowData.length === totalRecords;\n    const hasLazyLoad = !allRecordsLoaded && !!onPage;\n    const tableContainerRef = useRef<HTMLDivElement>(null);\n    const contentContainerRef = useRef<HTMLDivElement>(null);\n    const columnHeaderRowRef = useRef<HTMLDivElement>(null);\n    const loadingWrapperRef = useRef<HTMLDivElement>(null);\n    const [isScrolledX, setIsScrolledX] = useState<boolean>(false);\n    const [isScrolledY, setIsScrolledY] = useState<boolean>(false);\n    const [intervalWidth, setIntervalWidth] = useState<number>(0);\n    const [loadMore, setLoadMore] = useState<boolean>(false);\n\n    // Expose imperative handle\n    useImperativeHandle(ref, () => ({\n        resetScroll,\n    }));\n\n    useApplyStyle(columnHeaderRowRef, {\n        [styles.tokens.columnHeaderRow.columnWidth]: `${intervalWidth * 4}px`,\n    });\n\n    useApplyStyle(loadingWrapperRef, {\n        [styles.tokens.loadingWrapper.cellWidth]: `${intervalWidth * 4}px`,\n    });\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        const handleScroll = throttle(() => {\n            if (tableContainerRef.current) {\n                setIsScrolledX(tableContainerRef.current.scrollLeft > 0);\n                setIsScrolledY(tableContainerRef.current.scrollTop > 0);\n            }\n\n            if (loadMore || !tableContainerRef.current) return;\n\n            const { scrollTop, clientHeight, scrollHeight } =\n                tableContainerRef.current;\n            const scrollBottomTolerance = 1;\n            const isEndReached =\n                Math.ceil(scrollTop + clientHeight) >=\n                scrollHeight - scrollBottomTolerance;\n            const shouldLoadMore =\n                isEndReached && !allRecordsLoaded && onPage && !loading;\n\n            if (shouldLoadMore) {\n                setLoadMore(true);\n                onPage();\n            }\n        }, 100);\n\n        const tableContainer = tableContainerRef.current;\n\n        if (tableContainer) {\n            tableContainer.addEventListener(\"scroll\", handleScroll);\n        }\n\n        return () => {\n            if (tableContainer) {\n                tableContainer.removeEventListener(\"scroll\", handleScroll);\n            }\n        };\n    }, [allRecordsLoaded, loadMore, loading, onPage]);\n\n    useEffect(() => {\n        setLoadMore(false);\n    }, [rowData]);\n\n    // Initial scroll on mount and when dependencies change\n    useEffect(() => {\n        resetScroll();\n    }, [initialScrollTime, intervalWidth, timetableMinTime, timetableMaxTime]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    /**\n     * Handles when the TimeTable component is resized.\n     *\n     * @remarks\n     * When the component is resized, we recalculate the width of each interval\n     * in the Timetable. We do this by dividing the width of the container by\n     * the number of intervals per row bar. We also make sure that the width\n     * of each interval is at least 21px, otherwise it becomes too small.\n     */\n    const handleResize = () => {\n        if (tableContainerRef.current) {\n            const numberOfIntervalsPerRowBar = Math.ceil(\n                (hourlyIntervals.length * 60) / ROW_INTERVAL\n            );\n            const tableContainerWidth =\n                tableContainerRef.current.clientWidth - ROW_HEADER_WIDTH;\n            const calcWidth = tableContainerWidth / numberOfIntervalsPerRowBar;\n            const width =\n                calcWidth > MIN_INTERVAL_WIDTH ? calcWidth : MIN_INTERVAL_WIDTH;\n            setIntervalWidth(width);\n        }\n    };\n\n    useResizeDetector({\n        onResize: handleResize,\n        targetRef: tableContainerRef,\n        refreshMode: \"debounce\",\n        refreshRate: 50,\n    });\n\n    const handleRowNameClick = (\n        data: TimeTableRowData,\n        event: React.MouseEvent\n    ) => {\n        if (data.onRowNameClick) {\n            data.onRowNameClick(data, event);\n        }\n    };\n\n    // ===========================================================================\n    // HELPER FUNCTIONS\n    // ===========================================================================\n    /**\n     * Using closures to more efficiently loop through and wrap the color sequencing instead of modding large numbers repeatedly\n     * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures#closure\n     */\n    const getColorFromSequence = (() => {\n        let colorIndex = 0;\n        const colorSequenceLength = ROW_BAR_COLOR_SEQUENCE.length;\n\n        return () => {\n            const mainColor = ROW_BAR_COLOR_SEQUENCE[colorIndex];\n            const alternateColor = ROW_BAR_COLOR_ALTERNATE_COLOR[colorIndex];\n            colorIndex = (colorIndex + 1) % colorSequenceLength;\n            return { mainColor, alternateColor };\n        };\n    })();\n\n    const buildPopoverTrigger = (\n        data: TimeTableRowData,\n        child: JSX.Element\n    ) => {\n        if (!data.rowHeaderPopover) {\n            return child;\n        }\n\n        const popoverTriggerProps: PopoverTriggerProps = {\n            position: \"bottom-start\",\n            customOffset: data.rowHeaderPopover.offset,\n            children: child,\n            trigger: data.rowHeaderPopover.trigger,\n            delay: data.rowHeaderPopover.delay,\n            popoverContent: data.rowHeaderPopover.content,\n        };\n\n        return (\n            <PopoverTrigger\n                {...popoverTriggerProps}\n                className={styles.popoverTrigger}\n                key={`${data.id}-popover-trigger`}\n                zIndex={2}\n            >\n                {child}\n            </PopoverTrigger>\n        );\n    };\n\n    // Function to reset scroll to initialScrollTime\n    const resetScroll = () => {\n        if (\n            initialScrollTime &&\n            tableContainerRef.current &&\n            intervalWidth > 0\n        ) {\n            const scrollPosition = TimeHelper.calculateScrollPosition({\n                scrollTime: initialScrollTime,\n                minTime: timetableMinTime,\n                maxTime: timetableMaxTime,\n                interval: ROW_INTERVAL,\n                intervalWidth,\n                options: {\n                    roundToInterval: roundInitialScrollTime,\n                },\n            });\n\n            if (scrollPosition !== null) {\n                tableContainerRef.current.scrollLeft = scrollPosition;\n            }\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderRowHeader = (data: TimeTableRowData) => {\n        const rowHeaderContent = (\n            <>\n                <Typography.BodyMD\n                    className={clsx(\n                        styles.clickableRowHeaderTitle,\n                        !!data.onRowNameClick &&\n                            styles.clickableRowHeaderTitleClickable\n                    )}\n                    onClick={(event: React.MouseEvent) =>\n                        handleRowNameClick(data, event)\n                    }\n                    weight=\"semibold\"\n                    data-testid={`${data.id}-row-header-title`}\n                >\n                    {data.name}\n                </Typography.BodyMD>\n\n                <Typography.BodyXS\n                    weight=\"bold\"\n                    className={clsx(\n                        styles.rowHeaderSubtitle,\n                        !data.subtitle && styles.rowHeaderSubtitleHidden\n                    )}\n                    data-testid={`${data.id}-row-header-subtitle`}\n                >\n                    {data.subtitle}\n                </Typography.BodyXS>\n            </>\n        );\n\n        return (\n            <div\n                className={clsx(\n                    styles.rowHeader,\n                    isScrolledX && styles.rowHeaderScrolled\n                )}\n                key={`${data.id}-row-header`}\n                role=\"rowheader\"\n                aria-colindex={1}\n            >\n                {buildPopoverTrigger(data, rowHeaderContent)}\n            </div>\n        );\n    };\n\n    const renderColumnHeaders = () => {\n        // Don't render first column if there are no rows\n\n        return hourlyIntervals.map((columnHeader: string) => (\n            <div\n                className={styles.columnHeader}\n                key={`${columnHeader}-column-key`}\n                data-testid={`${columnHeader}-column`}\n            >\n                <Typography.BodySM\n                    className={styles.columnHeaderTitle}\n                    weight={\"semibold\"}\n                >\n                    {columnHeader}\n                </Typography.BodySM>\n            </div>\n        ));\n    };\n\n    const renderRows = () => {\n        if (loading) {\n            return (\n                <LoadingDotsSpinner\n                    data-testid=\"timetable-loading-spinner\"\n                    className={clsx(\n                        styles.loadingSpinner,\n                        isEmptyContent\n                            ? styles.loadingSpinnerEmptyContent\n                            : styles.loadingSpinnerHasContent\n                    )}\n                />\n            );\n        }\n\n        return (\n            <div\n                className={styles.timeTableBody}\n                data-testid=\"content-container-id\"\n                ref={contentContainerRef}\n                role=\"rowgroup\"\n            >\n                {rowData.map((data, index) => {\n                    return (\n                        <div\n                            className={styles.timeTableRow}\n                            key={`${index}-timetable-row`}\n                            role=\"row\"\n                            aria-rowindex={index + 2}\n                            aria-label={data.name}\n                        >\n                            {renderRowHeader(data)}\n                            <RowBar\n                                key={`${index}-row-bar`}\n                                timetableMinTime={timetableMinTime}\n                                timetableMaxTime={timetableMaxTime}\n                                rowBarColor={getColorFromSequence()}\n                                intervalWidth={intervalWidth}\n                                containerRef={contentContainerRef}\n                                {...data}\n                            />\n                        </div>\n                    );\n                })}\n                {renderLazyLoadRow()}\n            </div>\n        );\n    };\n\n    const renderLazyLoadRow = () => {\n        if (loading || !loadMore) return;\n        return (\n            <div className={styles.timeTableRow}>\n                <div\n                    className={clsx(\n                        styles.rowHeader,\n                        isScrolledX && styles.rowHeaderScrolled\n                    )}\n                >\n                    <div className={styles.loadingBar} />\n                </div>\n                <div\n                    ref={loadingWrapperRef}\n                    className={styles.loadingWrapper}\n                    data-testid=\"lazy-loader\"\n                    role=\"presentation\"\n                >\n                    {hourlyIntervals.map((_, index) => (\n                        <div\n                            className={styles.loadingCell}\n                            key={`lazy-load-cell-${index}`}\n                        >\n                            <div className={styles.loadingBar} />\n                        </div>\n                    ))}\n                </div>\n            </div>\n        );\n    };\n\n    if (isEmptyContent) {\n        return (\n            <div {...otherProps} data-testid={testId}>\n                <TimeTableHeader\n                    selectedDate={date}\n                    loading={loading || loadMore}\n                    tableContainerRef={tableContainerRef}\n                    minDate={minDate}\n                    maxDate={maxDate}\n                    totalRecords={totalRecords}\n                    showCurrentDateAsToday={showCurrentDateAsToday}\n                    showDateAsShortForm={showDateAsShortForm}\n                    onPreviousDayClick={onPreviousDayClick}\n                    onNextDayClick={onNextDayClick}\n                    onRefresh={onRefresh}\n                    onCalendarDateSelect={onCalendarDateSelect}\n                />\n                <div\n                    className={clsx(\n                        styles.emptyTableContainer,\n                        \"empty-container\"\n                    )}\n                    tabIndex={0}\n                    aria-live=\"polite\"\n                    aria-atomic\n                    aria-busy={loading}\n                >\n                    {!loading ? (\n                        <ErrorDisplay\n                            className={styles.noResultsFound}\n                            type=\"no-item-found\"\n                            description={emptyContentMessage}\n                        />\n                    ) : (\n                        <>\n                            <VisuallyHidden>{`Loading ${timetableAriaLabel}`}</VisuallyHidden>\n                            <LoadingDotsSpinner\n                                data-testid=\"timetable-loading-spinner\"\n                                className={clsx(\n                                    styles.loadingSpinner,\n                                    isEmptyContent\n                                        ? styles.loadingSpinnerEmptyContent\n                                        : styles.loadingSpinnerHasContent\n                                )}\n                            />\n                        </>\n                    )}\n                </div>\n            </div>\n        );\n    }\n\n    return (\n        <div {...otherProps} data-testid={testId}>\n            <TimeTableHeader\n                data-id=\"timetable-date-navigator\"\n                selectedDate={date}\n                loading={loading || loadMore}\n                tableContainerRef={tableContainerRef}\n                minDate={minDate}\n                maxDate={maxDate}\n                totalRecords={totalRecords}\n                showCurrentDateAsToday={showCurrentDateAsToday}\n                showDateAsShortForm={showDateAsShortForm}\n                onPreviousDayClick={onPreviousDayClick}\n                onNextDayClick={onNextDayClick}\n                onRefresh={onRefresh}\n                onCalendarDateSelect={onCalendarDateSelect}\n            />\n            <div\n                data-id=\"timetable-container\"\n                data-testid=\"timetable-container\"\n                ref={tableContainerRef}\n                className={clsx(\n                    styles.timeTableContainer,\n                    hasLazyLoad && styles.timeTableContainerNotAllLoaded,\n                    loading && styles.timeTableContainerLoading\n                )}\n                role=\"grid\"\n                aria-label={timetableAriaLabel}\n                aria-rowcount={ariaRowCount}\n                aria-colcount={ariaColCount}\n                aria-busy={loadMore}\n                tabIndex={0}\n            >\n                <div\n                    className={styles.timeTableHeaderRow}\n                    role=\"row\"\n                    aria-rowindex={1}\n                    data-testid={\"row-header-column-id\"}\n                >\n                    <div\n                        className={clsx(\n                            styles.rowColumnHeader,\n                            (isScrolledX || isScrolledY) &&\n                                styles.rowColumnHeaderScrolled,\n                            isScrolledX && styles.rowColumnHeaderScrolledX,\n                            isScrolledY && styles.rowColumnHeaderScrolledY\n                        )}\n                        role=\"columnheader\"\n                        aria-colindex={1}\n                    >\n                        <VisuallyHidden>Resource</VisuallyHidden>\n                    </div>\n                    <div\n                        ref={columnHeaderRowRef}\n                        className={clsx(\n                            styles.columnHeaderRow,\n                            isScrolledY && styles.columnHeaderRowScrolled\n                        )}\n                        role=\"presentation\"\n                    >\n                        {renderColumnHeaders()}\n                    </div>\n                </div>\n                {renderRows()}\n            </div>\n        </div>\n    );\n};\n\nexport const TimeTable = forwardRef<TimeTableRef, TimeTableProps>(Component);\n"],"names":["TimeTable","forwardRef","props","ref","date","emptyContentMessage","rowData","loading","minTime","maxTime","initialScrollTime","minDate","maxDate","totalRecords","showCurrentDateAsToday","showDateAsShortForm","onPage","onRefresh","onNextDayClick","onPreviousDayClick","onCalendarDateSelect","roundInitialScrollTime","otherProps","testId","timetableMinTime","TimeHelper","roundToNearestInterval","timetableMaxTime","hourlyIntervals","generateHourlyIntervals","numberOfIntervals","Math","ceil","length","ROW_INTERVAL","timetableAriaLabel","dayjs","format","ariaRowCount","ariaColCount","isEmptyContent","isEmpty","allRecordsLoaded","hasLazyLoad","tableContainerRef","useRef","contentContainerRef","columnHeaderRowRef","loadingWrapperRef","isScrolledX","setIsScrolledX","useState","isScrolledY","setIsScrolledY","intervalWidth","setIntervalWidth","loadMore","setLoadMore","useImperativeHandle","resetScroll","useApplyStyle","styles.tokens","columnHeaderRow","columnWidth","loadingWrapper","cellWidth","useEffect","handleScroll","throttle","current","scrollLeft","scrollTop","clientHeight","scrollHeight","tableContainer","addEventListener","removeEventListener","useResizeDetector","onResize","numberOfIntervalsPerRowBar","calcWidth","clientWidth","ROW_HEADER_WIDTH","width","MIN_INTERVAL_WIDTH","targetRef","refreshMode","refreshRate","getColorFromSequence","colorIndex","colorSequenceLength","ROW_BAR_COLOR_SEQUENCE","mainColor","alternateColor","ROW_BAR_COLOR_ALTERNATE_COLOR","buildPopoverTrigger","data","child","rowHeaderPopover","popoverTriggerProps","position","customOffset","offset","children","trigger","delay","popoverContent","content","_createElement","PopoverTrigger","Object","assign","className","styles.popoverTrigger","key","id","zIndex","scrollPosition","calculateScrollPosition","scrollTime","interval","options","roundToInterval","renderRowHeader","rowHeaderContent","_jsxs","_Fragment","_jsx","Typography","BodyMD","clsx","styles.clickableRowHeaderTitle","onRowNameClick","styles.clickableRowHeaderTitleClickable","onClick","event","handleRowNameClick","weight","name","BodyXS","styles.rowHeaderSubtitle","subtitle","styles.rowHeaderSubtitleHidden","styles.rowHeader","styles.rowHeaderScrolled","role","renderLazyLoadRow","styles.timeTableRow","styles.loadingBar","styles.loadingWrapper","map","_","index","styles.loadingCell","TimeTableHeader","selectedDate","styles.emptyTableContainer","tabIndex","VisuallyHidden","LoadingDotsSpinner","styles.loadingSpinner","styles.loadingSpinnerEmptyContent","styles.loadingSpinnerHasContent","ErrorDisplay","styles.noResultsFound","type","description","styles.timeTableContainer","styles.timeTableContainerNotAllLoaded","styles.timeTableContainerLoading","styles.timeTableHeaderRow","styles.rowColumnHeader","styles.rowColumnHeaderScrolled","styles.rowColumnHeaderScrolledX","styles.rowColumnHeaderScrolledY","styles.columnHeaderRow","styles.columnHeaderRowScrolled","columnHeader","styles.columnHeader","BodySM","styles.columnHeaderTitle","styles.timeTableBody","RowBar","rowBarColor","containerRef"],"mappings":"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"}
+{"version":3,"file":"timetable.js","sources":["../../../src/timetable/timetable.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport dayjs from \"dayjs\";\nimport { isEmpty, throttle } from \"lodash\";\nimport {\n    forwardRef,\n    useEffect,\n    useImperativeHandle,\n    useRef,\n    useState,\n} from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { LoadingDotsSpinner } from \"../animations\";\nimport { ErrorDisplay } from \"../error-display\";\nimport type { PopoverTriggerProps } from \"../popover\";\nimport { PopoverTrigger } from \"../popover\";\nimport { VisuallyHidden } from \"../shared/accessibility\";\nimport { useApplyStyle } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport { TimeHelper } from \"../util/time-helper\";\nimport {\n    MIN_INTERVAL_WIDTH,\n    ROW_BAR_COLOR_ALTERNATE_COLOR,\n    ROW_BAR_COLOR_SEQUENCE,\n    ROW_HEADER_WIDTH,\n    ROW_INTERVAL,\n} from \"./const\";\nimport * as styles from \"./timetable.styles\";\nimport { TimeTableHeader } from \"./timetable-header/timetable-header\";\nimport { RowBar } from \"./timetable-row/row-bar\";\nimport type { TimeTableProps, TimeTableRef, TimeTableRowData } from \"./types\";\n\nconst Component = (props: TimeTableProps, ref: React.Ref<TimeTableRef>) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const {\n        date,\n        emptyContentMessage,\n        rowData,\n        loading,\n        minTime = \"00:00\",\n        maxTime = \"23:00\",\n        initialScrollTime,\n        minDate,\n        maxDate,\n        totalRecords,\n        showCurrentDateAsToday,\n        showDateAsShortForm,\n        onPage,\n        onRefresh,\n        onNextDayClick,\n        onPreviousDayClick,\n        onCalendarDateSelect,\n        roundInitialScrollTime = true,\n        ...otherProps\n    } = props;\n    const testId = otherProps[\"data-testid\"] || \"timetable\";\n    const timetableMinTime = TimeHelper.roundToNearestInterval(minTime, 60);\n    const timetableMaxTime = TimeHelper.roundToNearestInterval(\n        maxTime,\n        60,\n        true\n    );\n    const hourlyIntervals = TimeHelper.generateHourlyIntervals(\n        timetableMinTime,\n        timetableMaxTime\n    );\n    const numberOfIntervals = Math.ceil(\n        (hourlyIntervals.length * 60) / ROW_INTERVAL\n    );\n    const formattedDate = dayjs(date).format(\"D MMMM YYYY\");\n    const timetableAriaLabel = `Timetable of resource availability, for ${formattedDate}, from ${dayjs(\n        timetableMinTime,\n        \"HH:mm\"\n    ).format(\"ha\")} to ${dayjs(timetableMaxTime, \"HH:mm\").format(\"ha\")}`;\n    const ariaRowCount = (totalRecords || rowData.length) + 1;\n    const ariaColCount = numberOfIntervals + 1;\n\n    const isEmptyContent = totalRecords === 0 || isEmpty(rowData);\n    const allRecordsLoaded = isEmptyContent || rowData.length === totalRecords;\n    const hasLazyLoad = !allRecordsLoaded && !!onPage;\n    const tableContainerRef = useRef<HTMLDivElement>(null);\n    const contentContainerRef = useRef<HTMLDivElement>(null);\n    const columnHeaderRowRef = useRef<HTMLDivElement>(null);\n    const loadingWrapperRef = useRef<HTMLDivElement>(null);\n    const [isScrolledX, setIsScrolledX] = useState<boolean>(false);\n    const [isScrolledY, setIsScrolledY] = useState<boolean>(false);\n    const [intervalWidth, setIntervalWidth] = useState<number>(0);\n    const [loadMore, setLoadMore] = useState<boolean>(false);\n\n    // Expose imperative handle\n    useImperativeHandle(ref, () => ({\n        resetScroll,\n    }));\n\n    useApplyStyle(columnHeaderRowRef, {\n        [styles.tokens.columnHeaderRow.columnWidth]: `${intervalWidth * 4}px`,\n    });\n\n    useApplyStyle(loadingWrapperRef, {\n        [styles.tokens.loadingWrapper.cellWidth]: `${intervalWidth * 4}px`,\n    });\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        const handleScroll = throttle(() => {\n            if (tableContainerRef.current) {\n                setIsScrolledX(tableContainerRef.current.scrollLeft > 0);\n                setIsScrolledY(tableContainerRef.current.scrollTop > 0);\n            }\n\n            if (loadMore || !tableContainerRef.current) return;\n\n            const { scrollTop, clientHeight, scrollHeight } =\n                tableContainerRef.current;\n            const scrollBottomTolerance = 1;\n            const isEndReached =\n                Math.ceil(scrollTop + clientHeight) >=\n                scrollHeight - scrollBottomTolerance;\n            const shouldLoadMore =\n                isEndReached && !allRecordsLoaded && onPage && !loading;\n\n            if (shouldLoadMore) {\n                setLoadMore(true);\n                onPage();\n            }\n        }, 100);\n\n        const tableContainer = tableContainerRef.current;\n\n        if (tableContainer) {\n            tableContainer.addEventListener(\"scroll\", handleScroll);\n        }\n\n        return () => {\n            if (tableContainer) {\n                tableContainer.removeEventListener(\"scroll\", handleScroll);\n            }\n        };\n    }, [allRecordsLoaded, loadMore, loading, onPage]);\n\n    useEffect(() => {\n        setLoadMore(false);\n    }, [rowData]);\n\n    // Initial scroll on mount and when dependencies change\n    useEffect(() => {\n        resetScroll();\n    }, [initialScrollTime, intervalWidth, timetableMinTime, timetableMaxTime]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    /**\n     * Handles when the TimeTable component is resized.\n     *\n     * @remarks\n     * When the component is resized, we recalculate the width of each interval\n     * in the Timetable. We do this by dividing the width of the container by\n     * the number of intervals per row bar. We also make sure that the width\n     * of each interval is at least 21px, otherwise it becomes too small.\n     */\n    const handleResize = () => {\n        if (tableContainerRef.current) {\n            const numberOfIntervalsPerRowBar = Math.ceil(\n                (hourlyIntervals.length * 60) / ROW_INTERVAL\n            );\n            const tableContainerWidth =\n                tableContainerRef.current.clientWidth - ROW_HEADER_WIDTH;\n            const calcWidth = tableContainerWidth / numberOfIntervalsPerRowBar;\n            const width =\n                calcWidth > MIN_INTERVAL_WIDTH ? calcWidth : MIN_INTERVAL_WIDTH;\n            setIntervalWidth(width);\n        }\n    };\n\n    useResizeDetector({\n        onResize: handleResize,\n        targetRef: tableContainerRef,\n        refreshMode: \"debounce\",\n        refreshRate: 50,\n    });\n\n    const handleRowNameClick = (\n        data: TimeTableRowData,\n        event: React.MouseEvent\n    ) => {\n        if (data.onRowNameClick) {\n            data.onRowNameClick(data, event);\n        }\n    };\n\n    // ===========================================================================\n    // HELPER FUNCTIONS\n    // ===========================================================================\n    /**\n     * Using closures to more efficiently loop through and wrap the color sequencing instead of modding large numbers repeatedly\n     * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures#closure\n     */\n    const getColorFromSequence = (() => {\n        let colorIndex = 0;\n        const colorSequenceLength = ROW_BAR_COLOR_SEQUENCE.length;\n\n        return () => {\n            const mainColor = ROW_BAR_COLOR_SEQUENCE[colorIndex];\n            const alternateColor = ROW_BAR_COLOR_ALTERNATE_COLOR[colorIndex];\n            colorIndex = (colorIndex + 1) % colorSequenceLength;\n            return { mainColor, alternateColor };\n        };\n    })();\n\n    const buildPopoverTrigger = (\n        data: TimeTableRowData,\n        child: JSX.Element\n    ) => {\n        if (!data.rowHeaderPopover) {\n            return child;\n        }\n\n        const popoverTriggerProps: PopoverTriggerProps = {\n            position: \"bottom-start\",\n            customOffset: data.rowHeaderPopover.offset,\n            children: child,\n            trigger: data.rowHeaderPopover.trigger,\n            delay: data.rowHeaderPopover.delay,\n            popoverContent: data.rowHeaderPopover.content,\n        };\n\n        return (\n            <PopoverTrigger\n                {...popoverTriggerProps}\n                className={styles.popoverTrigger}\n                key={`${data.id}-popover-trigger`}\n                zIndex={2}\n            >\n                {child}\n            </PopoverTrigger>\n        );\n    };\n\n    // Function to reset scroll to initialScrollTime\n    const resetScroll = () => {\n        if (\n            initialScrollTime &&\n            tableContainerRef.current &&\n            intervalWidth > 0\n        ) {\n            const scrollPosition = TimeHelper.calculateScrollPosition({\n                scrollTime: initialScrollTime,\n                minTime: timetableMinTime,\n                maxTime: timetableMaxTime,\n                interval: ROW_INTERVAL,\n                intervalWidth,\n                options: {\n                    roundToInterval: roundInitialScrollTime,\n                },\n            });\n\n            if (scrollPosition !== null) {\n                tableContainerRef.current.scrollLeft = scrollPosition;\n            }\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderRowHeader = (data: TimeTableRowData) => {\n        const rowHeaderContent = (\n            <>\n                <Typography.BodyMD\n                    className={clsx(\n                        styles.clickableRowHeaderTitle,\n                        !!data.onRowNameClick &&\n                            styles.clickableRowHeaderTitleClickable\n                    )}\n                    onClick={(event: React.MouseEvent) =>\n                        handleRowNameClick(data, event)\n                    }\n                    weight=\"semibold\"\n                    data-testid={`${data.id}-row-header-title`}\n                >\n                    {data.name}\n                </Typography.BodyMD>\n\n                <Typography.BodyXS\n                    weight=\"bold\"\n                    className={clsx(\n                        styles.rowHeaderSubtitle,\n                        !data.subtitle && styles.rowHeaderSubtitleHidden\n                    )}\n                    data-testid={`${data.id}-row-header-subtitle`}\n                >\n                    {data.subtitle}\n                </Typography.BodyXS>\n            </>\n        );\n\n        return (\n            <div\n                className={clsx(\n                    styles.rowHeader,\n                    isScrolledX && styles.rowHeaderScrolled\n                )}\n                key={`${data.id}-row-header`}\n                role=\"rowheader\"\n                aria-colindex={1}\n            >\n                {buildPopoverTrigger(data, rowHeaderContent)}\n            </div>\n        );\n    };\n\n    const renderColumnHeaders = () => {\n        // Don't render first column if there are no rows\n\n        return hourlyIntervals.map((columnHeader: string) => (\n            <div\n                className={styles.columnHeader}\n                key={`${columnHeader}-column-key`}\n                data-testid={`${columnHeader}-column`}\n            >\n                <Typography.BodySM\n                    className={styles.columnHeaderTitle}\n                    weight={\"semibold\"}\n                >\n                    {columnHeader}\n                </Typography.BodySM>\n            </div>\n        ));\n    };\n\n    const renderRows = () => {\n        if (loading) {\n            return (\n                <LoadingDotsSpinner\n                    data-testid=\"timetable-loading-spinner\"\n                    className={clsx(\n                        styles.loadingSpinner,\n                        isEmptyContent\n                            ? styles.loadingSpinnerEmptyContent\n                            : styles.loadingSpinnerHasContent\n                    )}\n                />\n            );\n        }\n\n        return (\n            <div\n                className={styles.timeTableBody}\n                data-testid=\"content-container-id\"\n                ref={contentContainerRef}\n                role=\"rowgroup\"\n            >\n                {rowData.map((data, index) => {\n                    return (\n                        <div\n                            className={styles.timeTableRow}\n                            key={`${index}-timetable-row`}\n                            role=\"row\"\n                            aria-rowindex={index + 2}\n                            aria-label={data.name}\n                        >\n                            {renderRowHeader(data)}\n                            <RowBar\n                                key={`${index}-row-bar`}\n                                timetableMinTime={timetableMinTime}\n                                timetableMaxTime={timetableMaxTime}\n                                rowBarColor={getColorFromSequence()}\n                                intervalWidth={intervalWidth}\n                                containerRef={contentContainerRef}\n                                {...data}\n                            />\n                        </div>\n                    );\n                })}\n                {renderLazyLoadRow()}\n            </div>\n        );\n    };\n\n    const renderLazyLoadRow = () => {\n        if (loading || !loadMore) return;\n        return (\n            <div className={styles.timeTableRow}>\n                <div\n                    className={clsx(\n                        styles.rowHeader,\n                        isScrolledX && styles.rowHeaderScrolled\n                    )}\n                >\n                    <div className={styles.loadingBar} />\n                </div>\n                <div\n                    ref={loadingWrapperRef}\n                    className={styles.loadingWrapper}\n                    data-testid=\"lazy-loader\"\n                    role=\"presentation\"\n                >\n                    {hourlyIntervals.map((_, index) => (\n                        <div\n                            className={styles.loadingCell}\n                            key={`lazy-load-cell-${index}`}\n                        >\n                            <div className={styles.loadingBar} />\n                        </div>\n                    ))}\n                </div>\n            </div>\n        );\n    };\n\n    if (isEmptyContent) {\n        return (\n            <div {...otherProps} data-testid={testId}>\n                <TimeTableHeader\n                    selectedDate={date}\n                    loading={loading || loadMore}\n                    tableContainerRef={tableContainerRef}\n                    minDate={minDate}\n                    maxDate={maxDate}\n                    totalRecords={totalRecords}\n                    showCurrentDateAsToday={showCurrentDateAsToday}\n                    showDateAsShortForm={showDateAsShortForm}\n                    onPreviousDayClick={onPreviousDayClick}\n                    onNextDayClick={onNextDayClick}\n                    onRefresh={onRefresh}\n                    onCalendarDateSelect={onCalendarDateSelect}\n                />\n                <div\n                    className={clsx(\n                        styles.emptyTableContainer,\n                        \"empty-container\"\n                    )}\n                    tabIndex={0}\n                    aria-live=\"polite\"\n                    aria-atomic\n                    aria-busy={loading}\n                >\n                    {!loading ? (\n                        <ErrorDisplay\n                            className={styles.noResultsFound}\n                            type=\"no-item-found\"\n                            description={emptyContentMessage}\n                        />\n                    ) : (\n                        <>\n                            <VisuallyHidden>{`Loading ${timetableAriaLabel}`}</VisuallyHidden>\n                            <LoadingDotsSpinner\n                                data-testid=\"timetable-loading-spinner\"\n                                className={clsx(\n                                    styles.loadingSpinner,\n                                    isEmptyContent\n                                        ? styles.loadingSpinnerEmptyContent\n                                        : styles.loadingSpinnerHasContent\n                                )}\n                            />\n                        </>\n                    )}\n                </div>\n            </div>\n        );\n    }\n\n    return (\n        <div {...otherProps} data-testid={testId}>\n            <TimeTableHeader\n                data-id=\"timetable-date-navigator\"\n                selectedDate={date}\n                loading={loading || loadMore}\n                tableContainerRef={tableContainerRef}\n                minDate={minDate}\n                maxDate={maxDate}\n                totalRecords={totalRecords}\n                showCurrentDateAsToday={showCurrentDateAsToday}\n                showDateAsShortForm={showDateAsShortForm}\n                onPreviousDayClick={onPreviousDayClick}\n                onNextDayClick={onNextDayClick}\n                onRefresh={onRefresh}\n                onCalendarDateSelect={onCalendarDateSelect}\n            />\n            <div\n                data-id=\"timetable-container\"\n                data-testid=\"timetable-container\"\n                ref={tableContainerRef}\n                className={clsx(\n                    styles.timeTableContainer,\n                    hasLazyLoad && styles.timeTableContainerNotAllLoaded,\n                    loading && styles.timeTableContainerLoading\n                )}\n                role=\"grid\"\n                aria-label={timetableAriaLabel}\n                aria-rowcount={ariaRowCount}\n                aria-colcount={ariaColCount}\n                aria-busy={loadMore}\n                tabIndex={0}\n            >\n                <div\n                    className={styles.timeTableHeaderRow}\n                    role=\"row\"\n                    aria-rowindex={1}\n                    data-testid={\"row-header-column-id\"}\n                >\n                    <div\n                        className={clsx(\n                            styles.rowColumnHeader,\n                            (isScrolledX || isScrolledY) &&\n                                styles.rowColumnHeaderScrolled,\n                            isScrolledX && styles.rowColumnHeaderScrolledX,\n                            isScrolledY && styles.rowColumnHeaderScrolledY\n                        )}\n                        role=\"columnheader\"\n                        aria-colindex={1}\n                    >\n                        <VisuallyHidden>Resource</VisuallyHidden>\n                    </div>\n                    <div\n                        ref={columnHeaderRowRef}\n                        className={clsx(\n                            styles.columnHeaderRow,\n                            isScrolledY && styles.columnHeaderRowScrolled\n                        )}\n                        role=\"presentation\"\n                    >\n                        {renderColumnHeaders()}\n                    </div>\n                </div>\n                {renderRows()}\n            </div>\n        </div>\n    );\n};\n\n// @catalog\n/**\n * A scrollable grid that visualises time slot availability across a day.\n *\n * Use `TimeTable` to display one day's schedule for multiple resources side by\n * side.\n */\nexport const TimeTable = forwardRef<TimeTableRef, TimeTableProps>(Component);\n"],"names":["TimeTable","forwardRef","props","ref","date","emptyContentMessage","rowData","loading","minTime","maxTime","initialScrollTime","minDate","maxDate","totalRecords","showCurrentDateAsToday","showDateAsShortForm","onPage","onRefresh","onNextDayClick","onPreviousDayClick","onCalendarDateSelect","roundInitialScrollTime","otherProps","testId","timetableMinTime","TimeHelper","roundToNearestInterval","timetableMaxTime","hourlyIntervals","generateHourlyIntervals","numberOfIntervals","Math","ceil","length","ROW_INTERVAL","timetableAriaLabel","dayjs","format","ariaRowCount","ariaColCount","isEmptyContent","isEmpty","allRecordsLoaded","hasLazyLoad","tableContainerRef","useRef","contentContainerRef","columnHeaderRowRef","loadingWrapperRef","isScrolledX","setIsScrolledX","useState","isScrolledY","setIsScrolledY","intervalWidth","setIntervalWidth","loadMore","setLoadMore","useImperativeHandle","resetScroll","useApplyStyle","styles.tokens","columnHeaderRow","columnWidth","loadingWrapper","cellWidth","useEffect","handleScroll","throttle","current","scrollLeft","scrollTop","clientHeight","scrollHeight","tableContainer","addEventListener","removeEventListener","useResizeDetector","onResize","numberOfIntervalsPerRowBar","calcWidth","clientWidth","ROW_HEADER_WIDTH","width","MIN_INTERVAL_WIDTH","targetRef","refreshMode","refreshRate","getColorFromSequence","colorIndex","colorSequenceLength","ROW_BAR_COLOR_SEQUENCE","mainColor","alternateColor","ROW_BAR_COLOR_ALTERNATE_COLOR","buildPopoverTrigger","data","child","rowHeaderPopover","popoverTriggerProps","position","customOffset","offset","children","trigger","delay","popoverContent","content","_createElement","PopoverTrigger","Object","assign","className","styles.popoverTrigger","key","id","zIndex","scrollPosition","calculateScrollPosition","scrollTime","interval","options","roundToInterval","renderRowHeader","rowHeaderContent","_jsxs","_Fragment","_jsx","Typography","BodyMD","clsx","styles.clickableRowHeaderTitle","onRowNameClick","styles.clickableRowHeaderTitleClickable","onClick","event","handleRowNameClick","weight","name","BodyXS","styles.rowHeaderSubtitle","subtitle","styles.rowHeaderSubtitleHidden","styles.rowHeader","styles.rowHeaderScrolled","role","renderLazyLoadRow","styles.timeTableRow","styles.loadingBar","styles.loadingWrapper","map","_","index","styles.loadingCell","TimeTableHeader","selectedDate","styles.emptyTableContainer","tabIndex","VisuallyHidden","LoadingDotsSpinner","styles.loadingSpinner","styles.loadingSpinnerEmptyContent","styles.loadingSpinnerHasContent","ErrorDisplay","styles.noResultsFound","type","description","styles.timeTableContainer","styles.timeTableContainerNotAllLoaded","styles.timeTableContainerLoading","styles.timeTableHeaderRow","styles.rowColumnHeader","styles.rowColumnHeaderScrolled","styles.rowColumnHeaderScrolledX","styles.rowColumnHeaderScrolledY","styles.columnHeaderRow","styles.columnHeaderRowScrolled","columnHeader","styles.columnHeader","BodySM","styles.columnHeaderTitle","styles.timeTableBody","RowBar","rowBarColor","containerRef"],"mappings":"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"}

package/cjs/toast/toast.js.map

@@ -1 +1 @@
-{"version":3,"file":"toast.js","sources":["../../../src/toast/toast.tsx"],"sourcesContent":["import {\n    CrossIcon,\n    ExclamationCircleFillIcon,\n    ExclamationTriangleFillIcon,\n    ICircleFillIcon,\n    TickCircleFillIcon,\n} from \"@lifesg/react-icons\";\nimport { animated, easings, useSpring } from \"@react-spring/web\";\nimport clsx from \"clsx\";\nimport React, { useEffect, useRef, useState } from \"react\";\n\nimport { Button } from \"../button\";\nimport { inertValue, VisuallyHidden } from \"../shared/accessibility\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { useMaxWidthMediaQuery } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport * as styles from \"./toast.styles\";\nimport type { ToastProps } from \"./types\";\n\nconst DEFAULT_AUTO_DISMISS_TIME = 4000;\nconst EASING_DURATION = 1000;\n\nconst TOAST_ICON_MAP = {\n    success: TickCircleFillIcon,\n    warning: ExclamationTriangleFillIcon,\n    error: ExclamationCircleFillIcon,\n    info: ICircleFillIcon,\n};\n\nexport const Toast = ({\n    type = \"success\",\n    title,\n    label,\n    className,\n    autoDismiss,\n    autoDismissTime = DEFAULT_AUTO_DISMISS_TIME,\n    onDismiss,\n    fixed = true,\n    actionButton,\n    ...otherProps\n}: ToastProps) => {\n    // =============================================================================\n    // CONST, STATE\n    // =============================================================================\n    const toastRef = useRef<HTMLDivElement>(null);\n    const [isVisible, setVisible] = useState<boolean>(false);\n\n    const isMobile = useMaxWidthMediaQuery(\"lg\");\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        setVisible(true);\n    }, []);\n\n    useEffect(() => {\n        if (!autoDismiss) return;\n\n        const timeout = setTimeout(() => {\n            setVisible(false);\n        }, autoDismissTime);\n\n        return () => clearTimeout(timeout);\n    }, [autoDismiss, autoDismissTime]);\n\n    useEffect(() => {\n        const handleKeyDown = (event: KeyboardEvent) => {\n            if (\n                event.key === \"Escape\" &&\n                toastRef.current?.contains(document.activeElement)\n            ) {\n                handleDismiss();\n            }\n        };\n\n        document.addEventListener(\"keydown\", handleKeyDown);\n        return () => {\n            document.removeEventListener(\"keydown\", handleKeyDown);\n        };\n    }, []);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleDismiss = () => {\n        setVisible(false);\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const transitions = useSpring({\n        opacity: isVisible ? 1 : 0,\n        transform: isVisible\n            ? isMobile\n                ? `translateY(0%)`\n                : `translateX(0%)`\n            : isMobile\n            ? `translateY(-1500%)`\n            : `translateX(150%)`,\n        config: {\n            easing: easings.easeInOutQuart,\n            duration: EASING_DURATION,\n        },\n        onRest: () => {\n            if (!isVisible) onDismiss?.();\n        },\n    });\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderIcon = () => {\n        const Icon = TOAST_ICON_MAP[type];\n        return Icon && <Icon aria-hidden />;\n    };\n\n    const renderTitle = () => {\n        if (React.isValidElement(title)) {\n            return title;\n        } else {\n            return (\n                <h2 className={styles.title} role=\"presentation\">\n                    {title}\n                </h2>\n            );\n        }\n    };\n\n    const renderDesc = () => {\n        if (React.isValidElement(label)) {\n            return label;\n        } else if (title) {\n            return (\n                <Typography.BodyMD className={styles.description}>\n                    {label}\n                </Typography.BodyMD>\n            );\n        } else {\n            return (\n                <Typography.BodyBL className={styles.description}>\n                    {label}\n                </Typography.BodyBL>\n            );\n        }\n    };\n\n    return (\n        <animated.div\n            ref={toastRef}\n            style={transitions}\n            className={clsx(styles.wrapper, className)}\n            data-type={type}\n            data-fixed={fixed}\n            role=\"alert\"\n            inert={inertValue(!isVisible)}\n            {...otherProps}\n        >\n            <VisuallyHidden>{type}</VisuallyHidden>\n            <div className={styles.contentWrapper}>\n                <div className={styles.textIconWrapper} data-type={type}>\n                    {renderIcon()}\n                    <div className={styles.textContainer}>\n                        {title && renderTitle()}\n                        {label && renderDesc()}\n                    </div>\n                </div>\n\n                {actionButton && (\n                    <Button\n                        className={styles.actionButton}\n                        styleType=\"light\"\n                        onClick={actionButton.onClick}\n                        sizeType=\"small\"\n                    >\n                        {actionButton.label}\n                    </Button>\n                )}\n            </div>\n            <ClickableIcon\n                className={styles.dismissButton}\n                onClick={handleDismiss}\n            >\n                <VisuallyHidden role=\"presentation\">\n                    Close notification\n                </VisuallyHidden>\n                <CrossIcon aria-hidden />\n            </ClickableIcon>\n        </animated.div>\n    );\n};\n"],"names":["DEFAULT_AUTO_DISMISS_TIME","TOAST_ICON_MAP","success","TickCircleFillIcon","warning","ExclamationTriangleFillIcon","error","ExclamationCircleFillIcon","info","ICircleFillIcon","_a","type","title","label","className","autoDismiss","autoDismissTime","onDismiss","fixed","actionButton","otherProps","__rest","toastRef","useRef","isVisible","setVisible","useState","isMobile","useMaxWidthMediaQuery","useEffect","timeout","setTimeout","clearTimeout","handleKeyDown","event","key","current","contains","document","activeElement","handleDismiss","addEventListener","removeEventListener","transitions","useSpring","opacity","transform","config","easing","easings","easeInOutQuart","duration","onRest","_jsxs","animated","div","Object","assign","ref","style","clsx","styles.wrapper","role","inert","inertValue","children","_jsx","VisuallyHidden","styles.contentWrapper","styles.textIconWrapper","Icon","renderIcon","styles.textContainer","React","isValidElement","styles.title","Typography","BodyMD","styles.description","BodyBL","Button","styles.actionButton","styleType","onClick","sizeType","ClickableIcon","styles.dismissButton","CrossIcon"],"mappings":"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"}
+{"version":3,"file":"toast.js","sources":["../../../src/toast/toast.tsx"],"sourcesContent":["import {\n    CrossIcon,\n    ExclamationCircleFillIcon,\n    ExclamationTriangleFillIcon,\n    ICircleFillIcon,\n    TickCircleFillIcon,\n} from \"@lifesg/react-icons\";\nimport { animated, easings, useSpring } from \"@react-spring/web\";\nimport clsx from \"clsx\";\nimport React, { useEffect, useRef, useState } from \"react\";\n\nimport { Button } from \"../button\";\nimport { inertValue, VisuallyHidden } from \"../shared/accessibility\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { useMaxWidthMediaQuery } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport * as styles from \"./toast.styles\";\nimport type { ToastProps } from \"./types\";\n\nconst DEFAULT_AUTO_DISMISS_TIME = 4000;\nconst EASING_DURATION = 1000;\n\nconst TOAST_ICON_MAP = {\n    success: TickCircleFillIcon,\n    warning: ExclamationTriangleFillIcon,\n    error: ExclamationCircleFillIcon,\n    info: ICircleFillIcon,\n};\n\n// @catalog\n/**\n * A brief notification that appears on screen to provide feedback about an\n * operation or event.\n *\n * Use `Toast` to surface status messages without interrupting the user's workflow.\n */\nexport const Toast = ({\n    type = \"success\",\n    title,\n    label,\n    className,\n    autoDismiss,\n    autoDismissTime = DEFAULT_AUTO_DISMISS_TIME,\n    onDismiss,\n    fixed = true,\n    actionButton,\n    ...otherProps\n}: ToastProps) => {\n    // =============================================================================\n    // CONST, STATE\n    // =============================================================================\n    const toastRef = useRef<HTMLDivElement>(null);\n    const [isVisible, setVisible] = useState<boolean>(false);\n\n    const isMobile = useMaxWidthMediaQuery(\"lg\");\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        setVisible(true);\n    }, []);\n\n    useEffect(() => {\n        if (!autoDismiss) return;\n\n        const timeout = setTimeout(() => {\n            setVisible(false);\n        }, autoDismissTime);\n\n        return () => clearTimeout(timeout);\n    }, [autoDismiss, autoDismissTime]);\n\n    useEffect(() => {\n        const handleKeyDown = (event: KeyboardEvent) => {\n            if (\n                event.key === \"Escape\" &&\n                toastRef.current?.contains(document.activeElement)\n            ) {\n                handleDismiss();\n            }\n        };\n\n        document.addEventListener(\"keydown\", handleKeyDown);\n        return () => {\n            document.removeEventListener(\"keydown\", handleKeyDown);\n        };\n    }, []);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleDismiss = () => {\n        setVisible(false);\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const transitions = useSpring({\n        opacity: isVisible ? 1 : 0,\n        transform: isVisible\n            ? isMobile\n                ? `translateY(0%)`\n                : `translateX(0%)`\n            : isMobile\n            ? `translateY(-1500%)`\n            : `translateX(150%)`,\n        config: {\n            easing: easings.easeInOutQuart,\n            duration: EASING_DURATION,\n        },\n        onRest: () => {\n            if (!isVisible) onDismiss?.();\n        },\n    });\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderIcon = () => {\n        const Icon = TOAST_ICON_MAP[type];\n        return Icon && <Icon aria-hidden />;\n    };\n\n    const renderTitle = () => {\n        if (React.isValidElement(title)) {\n            return title;\n        } else {\n            return (\n                <h2 className={styles.title} role=\"presentation\">\n                    {title}\n                </h2>\n            );\n        }\n    };\n\n    const renderDesc = () => {\n        if (React.isValidElement(label)) {\n            return label;\n        } else if (title) {\n            return (\n                <Typography.BodyMD className={styles.description}>\n                    {label}\n                </Typography.BodyMD>\n            );\n        } else {\n            return (\n                <Typography.BodyBL className={styles.description}>\n                    {label}\n                </Typography.BodyBL>\n            );\n        }\n    };\n\n    return (\n        <animated.div\n            ref={toastRef}\n            style={transitions}\n            className={clsx(styles.wrapper, className)}\n            data-type={type}\n            data-fixed={fixed}\n            role=\"alert\"\n            inert={inertValue(!isVisible)}\n            {...otherProps}\n        >\n            <VisuallyHidden>{type}</VisuallyHidden>\n            <div className={styles.contentWrapper}>\n                <div className={styles.textIconWrapper} data-type={type}>\n                    {renderIcon()}\n                    <div className={styles.textContainer}>\n                        {title && renderTitle()}\n                        {label && renderDesc()}\n                    </div>\n                </div>\n\n                {actionButton && (\n                    <Button\n                        className={styles.actionButton}\n                        styleType=\"light\"\n                        onClick={actionButton.onClick}\n                        sizeType=\"small\"\n                    >\n                        {actionButton.label}\n                    </Button>\n                )}\n            </div>\n            <ClickableIcon\n                className={styles.dismissButton}\n                onClick={handleDismiss}\n            >\n                <VisuallyHidden role=\"presentation\">\n                    Close notification\n                </VisuallyHidden>\n                <CrossIcon aria-hidden />\n            </ClickableIcon>\n        </animated.div>\n    );\n};\n"],"names":["DEFAULT_AUTO_DISMISS_TIME","TOAST_ICON_MAP","success","TickCircleFillIcon","warning","ExclamationTriangleFillIcon","error","ExclamationCircleFillIcon","info","ICircleFillIcon","_a","type","title","label","className","autoDismiss","autoDismissTime","onDismiss","fixed","actionButton","otherProps","__rest","toastRef","useRef","isVisible","setVisible","useState","isMobile","useMaxWidthMediaQuery","useEffect","timeout","setTimeout","clearTimeout","handleKeyDown","event","key","current","contains","document","activeElement","handleDismiss","addEventListener","removeEventListener","transitions","useSpring","opacity","transform","config","easing","easings","easeInOutQuart","duration","onRest","_jsxs","animated","div","Object","assign","ref","style","clsx","styles.wrapper","role","inert","inertValue","children","_jsx","VisuallyHidden","styles.contentWrapper","styles.textIconWrapper","Icon","renderIcon","styles.textContainer","React","isValidElement","styles.title","Typography","BodyMD","styles.description","BodyBL","Button","styles.actionButton","styleType","onClick","sizeType","ClickableIcon","styles.dismissButton","CrossIcon"],"mappings":"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"}

package/cjs/toggle/toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"toggle.js","sources":["../../../src/toggle/toggle.tsx"],"sourcesContent":["import { ChevronDownIcon } from \"@lifesg/react-icons/chevron-down\";\nimport { ChevronUpIcon } from \"@lifesg/react-icons/chevron-up\";\nimport clsx from \"clsx\";\nimport { useEffect, useMemo, useRef, useState } from \"react\";\n\nimport { Alert } from \"../alert\";\nimport { Markup } from \"../markup\";\nimport { TextList } from \"../text-list\";\nimport { useApplyStyle } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport { useId } from \"../util\";\nimport * as styles from \"./toggle.styles\";\nimport type { ToggleIconType } from \"./toggle-icon\";\nimport { ToggleIcon } from \"./toggle-icon\";\nimport type { ToggleProps } from \"./types\";\n\nexport const Toggle = ({\n    type = \"checkbox\",\n    indicator,\n    checked,\n    styleType = \"default\",\n    children,\n    childrenMaxLines,\n    subLabel,\n    disabled,\n    error,\n    name,\n    id,\n    className,\n    compositeSection,\n    removable,\n    focusableWhenDisabled,\n    useContentWidth,\n    onRemove,\n    onChange,\n    \"data-testid\": testId,\n    \"aria-describedby\": ariaDescribedBy,\n    ...otherProps\n}: ToggleProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const {\n        collapsible = true,\n        errors,\n        children: compositeSectionChildren,\n        initialExpanded,\n    } = compositeSection || {};\n    const [selected, setSelected] = useState<boolean | undefined>(checked);\n    const [expanded, setExpanded] = useState<boolean>(!!initialExpanded);\n    const hasCompositeSectionError = useMemo(() => {\n        const hasErrorList = Array.isArray(errors) && errors?.length > 0;\n        const hasErrorElement = !Array.isArray(errors) && !!errors;\n        return hasErrorList || hasErrorElement;\n    }, [errors]);\n    const uniqueId = useId();\n    const generatedId = id ? `${id}` : `tg-${uniqueId}`;\n\n    const inputRef = useRef<HTMLInputElement>(null);\n    const labelRef = useRef<HTMLLabelElement>(null);\n\n    useApplyStyle(labelRef, {\n        [styles.tokens.label.desktopLineClamp]:\n            childrenMaxLines?.desktop == null\n                ? null\n                : `${childrenMaxLines.desktop}`,\n        [styles.tokens.label.tabletLineClamp]:\n            childrenMaxLines?.tablet == null\n                ? null\n                : `${childrenMaxLines.tablet}`,\n        [styles.tokens.label.mobileLineClamp]:\n            childrenMaxLines?.mobile == null\n                ? null\n                : `${childrenMaxLines.mobile}`,\n    });\n\n    const isFocusableWhenDisabled = !!disabled && !!focusableWhenDisabled;\n    const isNativeDisabled = !!disabled && !focusableWhenDisabled;\n    const isInteractionBlocked = !!disabled;\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        setSelected(checked);\n    }, [checked]);\n\n    useEffect(() => {\n        if (selected) {\n            setExpanded(initialExpanded ?? true);\n        }\n    }, [selected]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        if (isInteractionBlocked) {\n            event.preventDefault();\n            return;\n        }\n\n        if (onChange) {\n            onChange(event);\n            return;\n        }\n\n        switch (type) {\n            case \"checkbox\":\n                setSelected((prevSelected) => {\n                    return !prevSelected;\n                });\n                break;\n            case \"radio\":\n            case \"yes\":\n            case \"no\":\n                if (!selected) {\n                    setSelected(true);\n                }\n                break;\n        }\n    };\n\n    const handleExpandCollapseClick = () => {\n        if (!disabled) {\n            setExpanded(!expanded);\n        }\n    };\n\n    const handleOnRemove = () => {\n        if (!disabled) {\n            if (onRemove) {\n                onRemove();\n                return;\n            }\n        }\n    };\n\n    const handleContainerClick = () => {\n        inputRef?.current?.click();\n    };\n\n    const handleInputClick = (e: React.MouseEvent<HTMLInputElement>) => {\n        e.stopPropagation();\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n\n    const getContainerStateClass = () => {\n        if (styleType === \"no-border\") {\n            if (error) {\n                return clsx(\n                    styles.colorBorderError,\n                    !disabled && styles.toggleContainerError\n                );\n            }\n\n            if (disabled) {\n                return selected\n                    ? styles.toggleContainerNoBorderDisabledSelected\n                    : styles.toggleContainerNoBorderDisabled;\n            }\n\n            if (selected) {\n                return styles.toggleContainerNoBorderSelected;\n            }\n\n            return styles.toggleContainerNoBorder;\n        }\n\n        if (error) {\n            return disabled\n                ? styles.colorBorderError\n                : styles.toggleContainerError;\n        }\n\n        if (disabled) {\n            return selected\n                ? styles.toggleContainerDisabledSelected\n                : styles.toggleContainerDisabled;\n        }\n\n        if (selected) {\n            return styles.toggleContainerSelected;\n        }\n\n        return styles.toggleContainer;\n    };\n\n    const getContainerHoverClass = () => {\n        if (disabled) {\n            return undefined;\n        }\n\n        if (!error && selected) {\n            return styles.toggleContainerHoverSelected;\n        }\n\n        return styles.toggleContainerHoverDefault;\n    };\n\n    const getTextContainerStateClass = () => {\n        if (disabled) {\n            return selected\n                ? styles.toggleTextContainerDisabledSelected\n                : styles.colorTextDisabled;\n        }\n\n        if (selected) {\n            return styles.toggleTextContainerSelected;\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderIndicator = () => {\n        let toggleIconType: ToggleIconType;\n\n        switch (type) {\n            case \"yes\":\n                toggleIconType = \"tick\";\n                break;\n            case \"no\":\n                toggleIconType = \"cross\";\n                break;\n            case \"checkbox\":\n            case \"radio\":\n                toggleIconType = type;\n                break;\n        }\n\n        return (\n            <ToggleIcon\n                type={toggleIconType}\n                active={selected}\n                disabled={disabled}\n            />\n        );\n    };\n\n    const renderSubLabel = () => {\n        if (!subLabel) {\n            return null;\n        }\n\n        let component: string | JSX.Element;\n\n        if (typeof subLabel === \"function\") {\n            component = subLabel();\n        } else {\n            component = subLabel;\n        }\n\n        // Hide sublabel from screen readers as the main input already has aria-describedby that points to the sublabel\n        return (\n            <div\n                data-id=\"toggle-sublabel\"\n                id={`${generatedId}-sublabel`}\n                aria-hidden\n                className={styles.subLabel}\n            >\n                {component}\n            </div>\n        );\n    };\n\n    const renderCompositeChildren = () => {\n        return (\n            (!collapsible || expanded) && (\n                <div\n                    data-id=\"toggle-composite-children\"\n                    className={clsx(\n                        styles.children,\n                        !collapsible && styles.childrenIsFinalItem,\n                        disabled && styles.colorTextDisabled\n                    )}\n                >\n                    <Markup baseTextSize=\"body-md\">\n                        {compositeSectionChildren}\n                    </Markup>\n                </div>\n            )\n        );\n    };\n\n    const renderExpandButton = () => {\n        const collapsedWithoutErrors = !expanded && !hasCompositeSectionError;\n\n        return (\n            collapsible && (\n                <button\n                    className={clsx(\n                        styles.expandButton,\n                        disabled && styles.disabledColorCursor,\n                        collapsedWithoutErrors &&\n                            styles.expandButtonPaddingTopRequired\n                    )}\n                    disabled={disabled}\n                    onClick={handleExpandCollapseClick}\n                    data-testid={expanded ? \"collapse-button\" : \"expand-button\"}\n                >\n                    {expanded ? \"Show less\" : \"Show more\"}\n                    {expanded ? (\n                        <ChevronUpIcon aria-hidden />\n                    ) : (\n                        <ChevronDownIcon aria-hidden />\n                    )}\n                </button>\n            )\n        );\n    };\n\n    const renderToggleWithRemoveButton = () => {\n        const ariaDescriptions =\n            [\n                typeof subLabel === \"string\" ? `${generatedId}-sublabel` : null,\n                ariaDescribedBy,\n            ]\n                .filter(Boolean)\n                .join(\" \") || undefined;\n\n        return (\n            <div\n                id={`${generatedId}-header-container`}\n                className={styles.headerContainer}\n            >\n                <div\n                    className={clsx(\n                        styles.indicatorLabelContainer,\n                        removable && styles.indicatorLabelContainerAddPadding\n                    )}\n                >\n                    <div\n                        id={`${generatedId}-input-container`}\n                        onClick={handleContainerClick}\n                        className={styles.inputContainer}\n                    >\n                        <input\n                            ref={inputRef}\n                            name={name}\n                            id={`${generatedId}-input`}\n                            type={type === \"checkbox\" ? \"checkbox\" : \"radio\"}\n                            data-testid=\"toggle-input\"\n                            className={clsx(\n                                styles.input,\n                                disabled && styles.toggleInputDisabled\n                            )}\n                            disabled={isNativeDisabled}\n                            aria-disabled={isFocusableWhenDisabled}\n                            onChange={handleOnChange}\n                            onClick={handleInputClick}\n                            checked={selected}\n                            tabIndex={isFocusableWhenDisabled ? 0 : undefined}\n                            aria-describedby={ariaDescriptions}\n                            {...otherProps}\n                        />\n                        {indicator && renderIndicator()}\n                        <div\n                            className={clsx(\n                                styles.textContainer,\n                                getTextContainerStateClass()\n                            )}\n                        >\n                            <label\n                                ref={labelRef}\n                                htmlFor={`${generatedId}-input`}\n                                data-testid={`toggle-label`}\n                                id={`${generatedId}-label`}\n                                className={clsx(\n                                    styles.label,\n                                    selected\n                                        ? styles.toggleLabelSelected\n                                        : styles.toggleLabelDefault\n                                )}\n                            >\n                                {children}\n                            </label>\n                            {subLabel && renderSubLabel()}\n                        </div>\n                    </div>\n                </div>\n                {removable && (\n                    <button\n                        type=\"button\"\n                        className={clsx(\n                            styles.removeButton,\n                            disabled && styles.disabledColorCursor\n                        )}\n                        onClick={handleOnRemove}\n                        id={`${generatedId}-remove-button`}\n                    >\n                        Remove\n                    </button>\n                )}\n            </div>\n        );\n    };\n\n    const renderErrorList = (errors: string[]) => {\n        return (\n            <>\n                <Typography.BodyMD\n                    weight=\"semibold\"\n                    className={clsx(\n                        styles.colorTextError,\n                        disabled && styles.colorTextDisabled\n                    )}\n                >\n                    Error\n                </Typography.BodyMD>\n                <TextList.Ul\n                    className={clsx(\n                        styles.colorTextError,\n                        disabled && styles.colorTextDisabled\n                    )}\n                >\n                    {errors?.map((item, index) => {\n                        return (\n                            <li\n                                key={index}\n                                id={`${generatedId}-error-list-item-${index}`}\n                            >\n                                <Typography.BodyMD\n                                    weight=\"semibold\"\n                                    className={clsx(\n                                        styles.colorTextError,\n                                        disabled && styles.colorTextDisabled\n                                    )}\n                                >\n                                    {item}\n                                </Typography.BodyMD>\n                            </li>\n                        );\n                    })}\n                </TextList.Ul>\n            </>\n        );\n    };\n\n    const renderError = () => {\n        return (\n            collapsible &&\n            !expanded &&\n            hasCompositeSectionError && (\n                <div\n                    className={clsx(\n                        styles.errorContainer,\n                        disabled && styles.disabledColorCursor\n                    )}\n                    onClick={handleExpandCollapseClick}\n                    id={`${generatedId}-error-alert`}\n                >\n                    <Alert\n                        type={disabled ? \"description\" : \"error\"}\n                        className={styles.alertContainer}\n                        showIcon\n                    >\n                        {Array.isArray(errors)\n                            ? renderErrorList(errors)\n                            : errors}\n                    </Alert>\n                </div>\n            )\n        );\n    };\n\n    const renderCompositeSection = () => {\n        return (\n            compositeSectionChildren && (\n                <div>\n                    {renderCompositeChildren()}\n                    {renderError()}\n                    {renderExpandButton()}\n                </div>\n            )\n        );\n    };\n\n    return (\n        <div\n            className={clsx(\n                styles.container,\n                getContainerStateClass(),\n                getContainerHoverClass(),\n                !indicator && styles.noIndicatorContainer,\n                useContentWidth && styles.useContentWidthContainer,\n                className\n            )}\n            id={id}\n            data-testid={testId}\n        >\n            {renderToggleWithRemoveButton()}\n            {renderCompositeSection()}\n        </div>\n    );\n};\n"],"names":["_a","type","indicator","checked","styleType","children","childrenMaxLines","subLabel","disabled","error","name","id","className","compositeSection","removable","focusableWhenDisabled","useContentWidth","onRemove","onChange","testId","ariaDescribedBy","otherProps","__rest","collapsible","errors","compositeSectionChildren","initialExpanded","selected","setSelected","useState","expanded","setExpanded","hasCompositeSectionError","useMemo","hasErrorList","Array","isArray","length","hasErrorElement","uniqueId","useId","generatedId","inputRef","useRef","labelRef","useApplyStyle","styles.tokens","label","desktopLineClamp","desktop","tabletLineClamp","tablet","mobileLineClamp","mobile","isFocusableWhenDisabled","isNativeDisabled","isInteractionBlocked","useEffect","handleOnChange","event","preventDefault","prevSelected","handleExpandCollapseClick","handleOnRemove","handleContainerClick","current","click","handleInputClick","e","stopPropagation","renderIndicator","toggleIconType","_jsx","ToggleIcon","active","renderSubLabel","component","styles.subLabel","renderExpandButton","collapsedWithoutErrors","_jsxs","clsx","styles.expandButton","styles.disabledColorCursor","styles.expandButtonPaddingTopRequired","onClick","ChevronUpIcon","ChevronDownIcon","renderErrorList","_Fragment","Typography","BodyMD","weight","styles.colorTextError","styles.colorTextDisabled","TextList","Ul","map","item","index","styles.container","styles.colorBorderError","styles.toggleContainerError","styles.toggleContainerNoBorderDisabledSelected","styles.toggleContainerNoBorderDisabled","styles.toggleContainerNoBorderSelected","styles.toggleContainerNoBorder","styles.toggleContainerDisabledSelected","styles.toggleContainerDisabled","styles.toggleContainerSelected","styles.toggleContainer","styles.toggleContainerHoverSelected","styles.toggleContainerHoverDefault","getContainerHoverClass","styles.noIndicatorContainer","styles.useContentWidthContainer","ariaDescriptions","filter","Boolean","join","undefined","styles.headerContainer","styles.indicatorLabelContainer","styles.indicatorLabelContainerAddPadding","styles.inputContainer","ref","styles.input","styles.toggleInputDisabled","tabIndex","styles.textContainer","styles.toggleTextContainerDisabledSelected","styles.toggleTextContainerSelected","htmlFor","styles.label","styles.toggleLabelSelected","styles.toggleLabelDefault","styles.removeButton","renderToggleWithRemoveButton","styles.children","styles.childrenIsFinalItem","Markup","baseTextSize","styles.errorContainer","Alert","styles.alertContainer","showIcon"],"mappings":"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"}
+{"version":3,"file":"toggle.js","sources":["../../../src/toggle/toggle.tsx"],"sourcesContent":["import { ChevronDownIcon } from \"@lifesg/react-icons/chevron-down\";\nimport { ChevronUpIcon } from \"@lifesg/react-icons/chevron-up\";\nimport clsx from \"clsx\";\nimport { useEffect, useMemo, useRef, useState } from \"react\";\n\nimport { Alert } from \"../alert\";\nimport { Markup } from \"../markup\";\nimport { TextList } from \"../text-list\";\nimport { useApplyStyle } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport { useId } from \"../util\";\nimport * as styles from \"./toggle.styles\";\nimport type { ToggleIconType } from \"./toggle-icon\";\nimport { ToggleIcon } from \"./toggle-icon\";\nimport type { ToggleProps } from \"./types\";\n\n// @catalog\n/**\n * A selectable control for checkbox and radio interaction patterns.\n *\n * Use `Toggle` to present a labeled option that the user can select or\n * deselect.\n */\nexport const Toggle = ({\n    type = \"checkbox\",\n    indicator,\n    checked,\n    styleType = \"default\",\n    children,\n    childrenMaxLines,\n    subLabel,\n    disabled,\n    error,\n    name,\n    id,\n    className,\n    compositeSection,\n    removable,\n    focusableWhenDisabled,\n    useContentWidth,\n    onRemove,\n    onChange,\n    \"data-testid\": testId,\n    \"aria-describedby\": ariaDescribedBy,\n    ...otherProps\n}: ToggleProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const {\n        collapsible = true,\n        errors,\n        children: compositeSectionChildren,\n        initialExpanded,\n    } = compositeSection || {};\n    const [selected, setSelected] = useState<boolean | undefined>(checked);\n    const [expanded, setExpanded] = useState<boolean>(!!initialExpanded);\n    const hasCompositeSectionError = useMemo(() => {\n        const hasErrorList = Array.isArray(errors) && errors?.length > 0;\n        const hasErrorElement = !Array.isArray(errors) && !!errors;\n        return hasErrorList || hasErrorElement;\n    }, [errors]);\n    const uniqueId = useId();\n    const generatedId = id ? `${id}` : `tg-${uniqueId}`;\n\n    const inputRef = useRef<HTMLInputElement>(null);\n    const labelRef = useRef<HTMLLabelElement>(null);\n\n    useApplyStyle(labelRef, {\n        [styles.tokens.label.desktopLineClamp]:\n            childrenMaxLines?.desktop == null\n                ? null\n                : `${childrenMaxLines.desktop}`,\n        [styles.tokens.label.tabletLineClamp]:\n            childrenMaxLines?.tablet == null\n                ? null\n                : `${childrenMaxLines.tablet}`,\n        [styles.tokens.label.mobileLineClamp]:\n            childrenMaxLines?.mobile == null\n                ? null\n                : `${childrenMaxLines.mobile}`,\n    });\n\n    const isFocusableWhenDisabled = !!disabled && !!focusableWhenDisabled;\n    const isNativeDisabled = !!disabled && !focusableWhenDisabled;\n    const isInteractionBlocked = !!disabled;\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        setSelected(checked);\n    }, [checked]);\n\n    useEffect(() => {\n        if (selected) {\n            setExpanded(initialExpanded ?? true);\n        }\n    }, [selected]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        if (isInteractionBlocked) {\n            event.preventDefault();\n            return;\n        }\n\n        if (onChange) {\n            onChange(event);\n            return;\n        }\n\n        switch (type) {\n            case \"checkbox\":\n                setSelected((prevSelected) => {\n                    return !prevSelected;\n                });\n                break;\n            case \"radio\":\n            case \"yes\":\n            case \"no\":\n                if (!selected) {\n                    setSelected(true);\n                }\n                break;\n        }\n    };\n\n    const handleExpandCollapseClick = () => {\n        if (!disabled) {\n            setExpanded(!expanded);\n        }\n    };\n\n    const handleOnRemove = () => {\n        if (!disabled) {\n            if (onRemove) {\n                onRemove();\n                return;\n            }\n        }\n    };\n\n    const handleContainerClick = () => {\n        inputRef?.current?.click();\n    };\n\n    const handleInputClick = (e: React.MouseEvent<HTMLInputElement>) => {\n        e.stopPropagation();\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n\n    const getContainerStateClass = () => {\n        if (styleType === \"no-border\") {\n            if (error) {\n                return clsx(\n                    styles.colorBorderError,\n                    !disabled && styles.toggleContainerError\n                );\n            }\n\n            if (disabled) {\n                return selected\n                    ? styles.toggleContainerNoBorderDisabledSelected\n                    : styles.toggleContainerNoBorderDisabled;\n            }\n\n            if (selected) {\n                return styles.toggleContainerNoBorderSelected;\n            }\n\n            return styles.toggleContainerNoBorder;\n        }\n\n        if (error) {\n            return disabled\n                ? styles.colorBorderError\n                : styles.toggleContainerError;\n        }\n\n        if (disabled) {\n            return selected\n                ? styles.toggleContainerDisabledSelected\n                : styles.toggleContainerDisabled;\n        }\n\n        if (selected) {\n            return styles.toggleContainerSelected;\n        }\n\n        return styles.toggleContainer;\n    };\n\n    const getContainerHoverClass = () => {\n        if (disabled) {\n            return undefined;\n        }\n\n        if (!error && selected) {\n            return styles.toggleContainerHoverSelected;\n        }\n\n        return styles.toggleContainerHoverDefault;\n    };\n\n    const getTextContainerStateClass = () => {\n        if (disabled) {\n            return selected\n                ? styles.toggleTextContainerDisabledSelected\n                : styles.colorTextDisabled;\n        }\n\n        if (selected) {\n            return styles.toggleTextContainerSelected;\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderIndicator = () => {\n        let toggleIconType: ToggleIconType;\n\n        switch (type) {\n            case \"yes\":\n                toggleIconType = \"tick\";\n                break;\n            case \"no\":\n                toggleIconType = \"cross\";\n                break;\n            case \"checkbox\":\n            case \"radio\":\n                toggleIconType = type;\n                break;\n        }\n\n        return (\n            <ToggleIcon\n                type={toggleIconType}\n                active={selected}\n                disabled={disabled}\n            />\n        );\n    };\n\n    const renderSubLabel = () => {\n        if (!subLabel) {\n            return null;\n        }\n\n        let component: string | JSX.Element;\n\n        if (typeof subLabel === \"function\") {\n            component = subLabel();\n        } else {\n            component = subLabel;\n        }\n\n        // Hide sublabel from screen readers as the main input already has aria-describedby that points to the sublabel\n        return (\n            <div\n                data-id=\"toggle-sublabel\"\n                id={`${generatedId}-sublabel`}\n                aria-hidden\n                className={styles.subLabel}\n            >\n                {component}\n            </div>\n        );\n    };\n\n    const renderCompositeChildren = () => {\n        return (\n            (!collapsible || expanded) && (\n                <div\n                    data-id=\"toggle-composite-children\"\n                    className={clsx(\n                        styles.children,\n                        !collapsible && styles.childrenIsFinalItem,\n                        disabled && styles.colorTextDisabled\n                    )}\n                >\n                    <Markup baseTextSize=\"body-md\">\n                        {compositeSectionChildren}\n                    </Markup>\n                </div>\n            )\n        );\n    };\n\n    const renderExpandButton = () => {\n        const collapsedWithoutErrors = !expanded && !hasCompositeSectionError;\n\n        return (\n            collapsible && (\n                <button\n                    className={clsx(\n                        styles.expandButton,\n                        disabled && styles.disabledColorCursor,\n                        collapsedWithoutErrors &&\n                            styles.expandButtonPaddingTopRequired\n                    )}\n                    disabled={disabled}\n                    onClick={handleExpandCollapseClick}\n                    data-testid={expanded ? \"collapse-button\" : \"expand-button\"}\n                >\n                    {expanded ? \"Show less\" : \"Show more\"}\n                    {expanded ? (\n                        <ChevronUpIcon aria-hidden />\n                    ) : (\n                        <ChevronDownIcon aria-hidden />\n                    )}\n                </button>\n            )\n        );\n    };\n\n    const renderToggleWithRemoveButton = () => {\n        const ariaDescriptions =\n            [\n                typeof subLabel === \"string\" ? `${generatedId}-sublabel` : null,\n                ariaDescribedBy,\n            ]\n                .filter(Boolean)\n                .join(\" \") || undefined;\n\n        return (\n            <div\n                id={`${generatedId}-header-container`}\n                className={styles.headerContainer}\n            >\n                <div\n                    className={clsx(\n                        styles.indicatorLabelContainer,\n                        removable && styles.indicatorLabelContainerAddPadding\n                    )}\n                >\n                    <div\n                        id={`${generatedId}-input-container`}\n                        onClick={handleContainerClick}\n                        className={styles.inputContainer}\n                    >\n                        <input\n                            ref={inputRef}\n                            name={name}\n                            id={`${generatedId}-input`}\n                            type={type === \"checkbox\" ? \"checkbox\" : \"radio\"}\n                            data-testid=\"toggle-input\"\n                            className={clsx(\n                                styles.input,\n                                disabled && styles.toggleInputDisabled\n                            )}\n                            disabled={isNativeDisabled}\n                            aria-disabled={isFocusableWhenDisabled}\n                            onChange={handleOnChange}\n                            onClick={handleInputClick}\n                            checked={selected}\n                            tabIndex={isFocusableWhenDisabled ? 0 : undefined}\n                            aria-describedby={ariaDescriptions}\n                            {...otherProps}\n                        />\n                        {indicator && renderIndicator()}\n                        <div\n                            className={clsx(\n                                styles.textContainer,\n                                getTextContainerStateClass()\n                            )}\n                        >\n                            <label\n                                ref={labelRef}\n                                htmlFor={`${generatedId}-input`}\n                                data-testid={`toggle-label`}\n                                id={`${generatedId}-label`}\n                                className={clsx(\n                                    styles.label,\n                                    selected\n                                        ? styles.toggleLabelSelected\n                                        : styles.toggleLabelDefault\n                                )}\n                            >\n                                {children}\n                            </label>\n                            {subLabel && renderSubLabel()}\n                        </div>\n                    </div>\n                </div>\n                {removable && (\n                    <button\n                        type=\"button\"\n                        className={clsx(\n                            styles.removeButton,\n                            disabled && styles.disabledColorCursor\n                        )}\n                        onClick={handleOnRemove}\n                        id={`${generatedId}-remove-button`}\n                    >\n                        Remove\n                    </button>\n                )}\n            </div>\n        );\n    };\n\n    const renderErrorList = (errors: string[]) => {\n        return (\n            <>\n                <Typography.BodyMD\n                    weight=\"semibold\"\n                    className={clsx(\n                        styles.colorTextError,\n                        disabled && styles.colorTextDisabled\n                    )}\n                >\n                    Error\n                </Typography.BodyMD>\n                <TextList.Ul\n                    className={clsx(\n                        styles.colorTextError,\n                        disabled && styles.colorTextDisabled\n                    )}\n                >\n                    {errors?.map((item, index) => {\n                        return (\n                            <li\n                                key={index}\n                                id={`${generatedId}-error-list-item-${index}`}\n                            >\n                                <Typography.BodyMD\n                                    weight=\"semibold\"\n                                    className={clsx(\n                                        styles.colorTextError,\n                                        disabled && styles.colorTextDisabled\n                                    )}\n                                >\n                                    {item}\n                                </Typography.BodyMD>\n                            </li>\n                        );\n                    })}\n                </TextList.Ul>\n            </>\n        );\n    };\n\n    const renderError = () => {\n        return (\n            collapsible &&\n            !expanded &&\n            hasCompositeSectionError && (\n                <div\n                    className={clsx(\n                        styles.errorContainer,\n                        disabled && styles.disabledColorCursor\n                    )}\n                    onClick={handleExpandCollapseClick}\n                    id={`${generatedId}-error-alert`}\n                >\n                    <Alert\n                        type={disabled ? \"description\" : \"error\"}\n                        className={styles.alertContainer}\n                        showIcon\n                    >\n                        {Array.isArray(errors)\n                            ? renderErrorList(errors)\n                            : errors}\n                    </Alert>\n                </div>\n            )\n        );\n    };\n\n    const renderCompositeSection = () => {\n        return (\n            compositeSectionChildren && (\n                <div>\n                    {renderCompositeChildren()}\n                    {renderError()}\n                    {renderExpandButton()}\n                </div>\n            )\n        );\n    };\n\n    return (\n        <div\n            className={clsx(\n                styles.container,\n                getContainerStateClass(),\n                getContainerHoverClass(),\n                !indicator && styles.noIndicatorContainer,\n                useContentWidth && styles.useContentWidthContainer,\n                className\n            )}\n            id={id}\n            data-testid={testId}\n        >\n            {renderToggleWithRemoveButton()}\n            {renderCompositeSection()}\n        </div>\n    );\n};\n"],"names":["_a","type","indicator","checked","styleType","children","childrenMaxLines","subLabel","disabled","error","name","id","className","compositeSection","removable","focusableWhenDisabled","useContentWidth","onRemove","onChange","testId","ariaDescribedBy","otherProps","__rest","collapsible","errors","compositeSectionChildren","initialExpanded","selected","setSelected","useState","expanded","setExpanded","hasCompositeSectionError","useMemo","hasErrorList","Array","isArray","length","hasErrorElement","uniqueId","useId","generatedId","inputRef","useRef","labelRef","useApplyStyle","styles.tokens","label","desktopLineClamp","desktop","tabletLineClamp","tablet","mobileLineClamp","mobile","isFocusableWhenDisabled","isNativeDisabled","isInteractionBlocked","useEffect","handleOnChange","event","preventDefault","prevSelected","handleExpandCollapseClick","handleOnRemove","handleContainerClick","current","click","handleInputClick","e","stopPropagation","renderIndicator","toggleIconType","_jsx","ToggleIcon","active","renderSubLabel","component","styles.subLabel","renderExpandButton","collapsedWithoutErrors","_jsxs","clsx","styles.expandButton","styles.disabledColorCursor","styles.expandButtonPaddingTopRequired","onClick","ChevronUpIcon","ChevronDownIcon","renderErrorList","_Fragment","Typography","BodyMD","weight","styles.colorTextError","styles.colorTextDisabled","TextList","Ul","map","item","index","styles.container","styles.colorBorderError","styles.toggleContainerError","styles.toggleContainerNoBorderDisabledSelected","styles.toggleContainerNoBorderDisabled","styles.toggleContainerNoBorderSelected","styles.toggleContainerNoBorder","styles.toggleContainerDisabledSelected","styles.toggleContainerDisabled","styles.toggleContainerSelected","styles.toggleContainer","styles.toggleContainerHoverSelected","styles.toggleContainerHoverDefault","getContainerHoverClass","styles.noIndicatorContainer","styles.useContentWidthContainer","ariaDescriptions","filter","Boolean","join","undefined","styles.headerContainer","styles.indicatorLabelContainer","styles.indicatorLabelContainerAddPadding","styles.inputContainer","ref","styles.input","styles.toggleInputDisabled","tabIndex","styles.textContainer","styles.toggleTextContainerDisabledSelected","styles.toggleTextContainerSelected","htmlFor","styles.label","styles.toggleLabelSelected","styles.toggleLabelDefault","styles.removeButton","renderToggleWithRemoveButton","styles.children","styles.childrenIsFinalItem","Markup","baseTextSize","styles.errorContainer","Alert","styles.alertContainer","showIcon"],"mappings":"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"}

package/cjs/typography/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/typography/index.ts"],"sourcesContent":["import {\n    BodyBL,\n    BodyMD,\n    BodySM,\n    BodyXS,\n    HeadingLG,\n    HeadingMD,\n    HeadingSM,\n    HeadingXL,\n    HeadingXS,\n    HeadingXXL,\n    LinkBL,\n    LinkMD,\n    LinkSM,\n    LinkXS,\n} from \"./typography\";\n\nexport const Typography = {\n    HeadingXXL,\n    HeadingXL,\n    HeadingLG,\n    HeadingMD,\n    HeadingSM,\n    HeadingXS,\n    BodyBL,\n    BodyMD,\n    BodySM,\n    BodyXS,\n    LinkBL,\n    LinkMD,\n    LinkSM,\n    LinkXS,\n};\n\nexport * from \"./types\";\n"],"names":["Typography","HeadingXXL","HeadingXL","HeadingLG","HeadingMD","HeadingSM","HeadingXS","BodyBL","BodyMD","BodySM","BodyXS","LinkBL","LinkMD","LinkSM","LinkXS"],"mappings":"8CAiBO,MAAMA,EAAa,YACtBC,EAAAA,qBACAC,EAAAA,oBACAC,EAAAA,oBACAC,EAAAA,oBACAC,EAAAA,oBACAC,EAAAA,iBACAC,EAAAA,cACAC,EAAAA,cACAC,EAAAA,cACAC,EAAAA,cACAC,EAAAA,cACAC,EAAAA,cACAC,EAAAA,cACAC,EAAAA"}
+{"version":3,"file":"index.js","sources":["../../../src/typography/index.ts"],"sourcesContent":["import {\n    BodyBL,\n    BodyMD,\n    BodySM,\n    BodyXS,\n    HeadingLG,\n    HeadingMD,\n    HeadingSM,\n    HeadingXL,\n    HeadingXS,\n    HeadingXXL,\n    LinkBL,\n    LinkMD,\n    LinkSM,\n    LinkXS,\n} from \"./typography\";\n\n// @catalog\n/**\n * A collection of pre-styled text components covering headings, body copy, and\n * hyperlinks.\n *\n * Use `Typography` sub-components to render consistently sized and weighted\n * text.\n *\n * Sub-components:\n * - Heading variants (`HeadingXXL` through `HeadingXS`) render semantic heading elements by default.\n * - Body variants (`BodyBL`, `BodyMD`, `BodySM`, `BodyXS`) render `p` elements.\n * - Link variants (`LinkBL`, `LinkMD`, `LinkSM`, `LinkXS`) render `a` elements .\n *\n * @remarks All text variants accept an `as` prop to\n * override the rendered element for semantic flexibility.\n */\nexport const Typography = {\n    /** Renders the largest heading (`h1`). */\n    HeadingXXL,\n    /** Renders an extra-large heading (`h2`). */\n    HeadingXL,\n    /** Renders a large heading (`h3`). */\n    HeadingLG,\n    /** Renders a medium heading (`h4`). */\n    HeadingMD,\n    /** Renders a small heading (`h5`). */\n    HeadingSM,\n    /** Renders the smallest heading (`h6`). */\n    HeadingXS,\n    /** Renders baseline body text (`p`). */\n    BodyBL,\n    /** Renders medium body text (`p`). */\n    BodyMD,\n    /** Renders small body text (`p`). */\n    BodySM,\n    /** Renders extra-small body text (`p`). */\n    BodyXS,\n    /** Renders a baseline-size hyperlink (`a`). */\n    LinkBL,\n    /** Renders a medium-size hyperlink (`a`). */\n    LinkMD,\n    /** Renders a small-size hyperlink (`a`). */\n    LinkSM,\n    /** Renders an extra-small hyperlink (`a`). */\n    LinkXS,\n};\n\nexport * from \"./types\";\n"],"names":["Typography","HeadingXXL","HeadingXL","HeadingLG","HeadingMD","HeadingSM","HeadingXS","BodyBL","BodyMD","BodySM","BodyXS","LinkBL","LinkMD","LinkSM","LinkXS"],"mappings":"8CAiCO,MAAMA,EAAa,YAEtBC,EAAAA,qBAEAC,EAAAA,oBAEAC,EAAAA,oBAEAC,EAAAA,oBAEAC,EAAAA,oBAEAC,EAAAA,iBAEAC,EAAAA,cAEAC,EAAAA,cAEAC,EAAAA,cAEAC,EAAAA,cAEAC,EAAAA,cAEAC,EAAAA,cAEAC,EAAAA,cAEAC,EAAAA"}

package/cjs/uneditable-section/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/uneditable-section/index.ts"],"sourcesContent":["import { UneditableItemSection } from \"./item-section\";\nimport { UneditableSectionItem } from \"./section-item\";\nimport { UneditableSectionBase } from \"./uneditable-section\";\n\nexport * from \"./types\";\nexport const UneditableSection = Object.assign(UneditableSectionBase, {\n    ItemSection: UneditableItemSection,\n    Item: UneditableSectionItem,\n});\n"],"names":["UneditableSection","Object","assign","UneditableSectionBase","ItemSection","UneditableItemSection","Item","UneditableSectionItem"],"mappings":"0HAKaA,EAAoBC,OAAOC,OAAOC,wBAAuB,CAClEC,YAAaC,EAAAA,sBACbC,KAAMC,EAAAA"}
+{"version":3,"file":"index.js","sources":["../../../src/uneditable-section/index.ts"],"sourcesContent":["import { UneditableItemSection } from \"./item-section\";\nimport { UneditableSectionItem } from \"./section-item\";\nimport { UneditableSectionBase } from \"./uneditable-section\";\n\nexport * from \"./types\";\n\n// @catalog\n/**\n * A read-only summary section for displaying labeled field values.\n *\n * Use `UneditableSection` to present a group of non-editable field–value pairs\n * in a responsive grid layout\n *\n * Sub-components:\n * - `UneditableSection.Item` — a standalone labeled read-only field with optional masking.\n * - `UneditableSection.ItemSection` — a standalone grid list for composing items.\n */\nexport const UneditableSection = Object.assign(UneditableSectionBase, {\n    /**\n     * A standalone grid list for rendering `UneditableSection.Item` elements\n     * outside the full section wrapper.\n     */\n    ItemSection: UneditableItemSection,\n    /** A standalone labeled read-only field with optional masking support. */\n    Item: UneditableSectionItem,\n});\n"],"names":["UneditableSection","Object","assign","UneditableSectionBase","ItemSection","UneditableItemSection","Item","UneditableSectionItem"],"mappings":"0HAiBaA,EAAoBC,OAAOC,OAAOC,wBAAuB,CAKlEC,YAAaC,EAAAA,sBAEbC,KAAMC,EAAAA"}

package/cjs/uneditable-section/section-item.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),a=require("@lifesg/react-icons/exclamation-triangle"),s=require("@lifesg/react-icons/eye"),r=require("@lifesg/react-icons/eye-slash"),i=require("react"),n=require("../alert/alert.js"),l=require("../form/form-label.js"),t=require("../shared/accessibility/index.js"),c=require("../shared/component-loading-spinner/component-loading-spinner.js"),d=require("../typography/index.js"),o=require("../util/string-helper.js"),m=require("./section-item.styles.js");exports.UneditableSectionItem=({label:u,value:g,displayWidth:k="full",maskState:h,maskLoadingState:p,maskChar:j="•",maskRange:x,unmaskRange:y,maskRegex:b,disableMaskUnmask:f,alert:q,maskTransformer:N,onMask:L,onUnmask:S,onTryAgain:T,fullWidth:R})=>{const[v,C]=i.useState(h);i.useEffect((()=>{C(h)}),[h]);const E=()=>{switch("fail"===p&&T&&T(),v){case"masked":S&&S(),C("unmasked");break;case"unmasked":L&&L(),C("masked")}},I=()=>"string"!=typeof g?g:"masked"===v?o.StringHelper.maskValue(g,{maskChar:j,maskRange:x,unmaskRange:y,maskRegex:b,maskTransformer:N}):g,w=()=>{switch(p){case"fail":return e.jsxs(e.Fragment,{children:[e.jsx(a.ExclamationTriangleIcon,{className:m.errorIcon}),e.jsx("span",{className:m.errorLabel,children:"Error"}),e.jsxs("span",{className:m.tryAgainLabel,children:["Try again?",e.jsx(t.VisuallyHidden,{children:u})]})]});case"loading":return e.jsxs(e.Fragment,{children:[e.jsx(c.ComponentLoadingSpinner,{className:m.spinner}),e.jsx("span",{className:m.loadingLabel,children:"Retrieving..."})]});default:return e.jsxs(e.Fragment,{children:[I(),e.jsx("div",{className:m.iconContainer,"aria-label":"masked"===v?`Display ${u}`:`Hide ${u}`,children:"masked"===v?e.jsx(s.EyeIcon,{"data-testid":"masked-icon"}):e.jsx(r.EyeSlashIcon,{"data-testid":"unmasked-icon"})})]})}};return e.jsxs("li",{"data-width":k,"data-full-width":R,className:m.container,children:[e.jsx(l.FormLabel,{children:u}),"string"!=typeof g?g:v?f?e.jsx(d.Typography.BodyBL,{children:I()}):e.jsx("button",{className:m.clickable,"data-testid":"clickable-label",onClick:E,"aria-busy":"loading"===p,"aria-live":"polite",type:"button","aria-label":o.StringHelper.getMaskedDescription(g,v,x),children:w()}):e.jsx(d.Typography.BodyBL,{children:g}),q&&e.jsx(n.Alert,Object.assign({className:m.alert,sizeType:"small"},q))]})};
+"use strict";var e=require("react/jsx-runtime"),a=require("@lifesg/react-icons/exclamation-triangle"),s=require("@lifesg/react-icons/eye"),r=require("@lifesg/react-icons/eye-slash"),i=require("react"),n=require("../alert/alert.js"),l=require("../form/form-label/form-label.js"),t=require("../shared/accessibility/index.js"),c=require("../shared/component-loading-spinner/component-loading-spinner.js"),d=require("../typography/index.js"),o=require("../util/string-helper.js"),m=require("./section-item.styles.js");exports.UneditableSectionItem=({label:u,value:g,displayWidth:k="full",maskState:h,maskLoadingState:p,maskChar:j="•",maskRange:x,unmaskRange:y,maskRegex:b,disableMaskUnmask:f,alert:q,maskTransformer:N,onMask:L,onUnmask:S,onTryAgain:T,fullWidth:R})=>{const[v,C]=i.useState(h);i.useEffect((()=>{C(h)}),[h]);const E=()=>{switch("fail"===p&&T&&T(),v){case"masked":S&&S(),C("unmasked");break;case"unmasked":L&&L(),C("masked")}},I=()=>"string"!=typeof g?g:"masked"===v?o.StringHelper.maskValue(g,{maskChar:j,maskRange:x,unmaskRange:y,maskRegex:b,maskTransformer:N}):g,w=()=>{switch(p){case"fail":return e.jsxs(e.Fragment,{children:[e.jsx(a.ExclamationTriangleIcon,{className:m.errorIcon}),e.jsx("span",{className:m.errorLabel,children:"Error"}),e.jsxs("span",{className:m.tryAgainLabel,children:["Try again?",e.jsx(t.VisuallyHidden,{children:u})]})]});case"loading":return e.jsxs(e.Fragment,{children:[e.jsx(c.ComponentLoadingSpinner,{className:m.spinner}),e.jsx("span",{className:m.loadingLabel,children:"Retrieving..."})]});default:return e.jsxs(e.Fragment,{children:[I(),e.jsx("div",{className:m.iconContainer,"aria-label":"masked"===v?`Display ${u}`:`Hide ${u}`,children:"masked"===v?e.jsx(s.EyeIcon,{"data-testid":"masked-icon"}):e.jsx(r.EyeSlashIcon,{"data-testid":"unmasked-icon"})})]})}};return e.jsxs("li",{"data-width":k,"data-full-width":R,className:m.container,children:[e.jsx(l.FormLabel,{children:u}),"string"!=typeof g?g:v?f?e.jsx(d.Typography.BodyBL,{children:I()}):e.jsx("button",{className:m.clickable,"data-testid":"clickable-label",onClick:E,"aria-busy":"loading"===p,"aria-live":"polite",type:"button","aria-label":o.StringHelper.getMaskedDescription(g,v,x),children:w()}):e.jsx(d.Typography.BodyBL,{children:g}),q&&e.jsx(n.Alert,Object.assign({className:m.alert,sizeType:"small"},q))]})};
 //# sourceMappingURL=section-item.js.map

package/cjs/uneditable-section/section-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"section-item.js","sources":["../../../src/uneditable-section/section-item.tsx"],"sourcesContent":["import { ExclamationTriangleIcon } from \"@lifesg/react-icons/exclamation-triangle\";\nimport { EyeIcon } from \"@lifesg/react-icons/eye\";\nimport { EyeSlashIcon } from \"@lifesg/react-icons/eye-slash\";\nimport { useEffect, useState } from \"react\";\n\nimport { Alert } from \"../alert\";\nimport { FormLabel } from \"../form/form-label\";\nimport { VisuallyHidden } from \"../shared/accessibility\";\nimport { ComponentLoadingSpinner } from \"../shared/component-loading-spinner\";\nimport { Typography } from \"../typography\";\nimport { StringHelper } from \"../util/string-helper\";\nimport * as styles from \"./section-item.styles\";\nimport type {\n    UneditableSectionItemMaskState,\n    UneditableSectionItemProps,\n} from \"./types\";\n\nexport interface UneditableSectionItemComponentProps\n    extends UneditableSectionItemProps {\n    onMask?: (() => void) | undefined;\n    onUnmask?: (() => void) | undefined;\n    onTryAgain?: (() => void) | undefined;\n    fullWidth?: boolean | undefined;\n}\n\nexport const UneditableSectionItem = ({\n    label,\n    value,\n    displayWidth = \"full\",\n    maskState,\n    maskLoadingState,\n    maskChar = \"•\",\n    maskRange,\n    unmaskRange,\n    maskRegex,\n    disableMaskUnmask,\n    alert,\n    maskTransformer,\n    onMask,\n    onUnmask,\n    onTryAgain,\n    fullWidth,\n}: UneditableSectionItemComponentProps) => {\n    // =========================================================================\n    // CONST, STATE, REF\n    // =========================================================================\n    const [displayMaskState, setMaskState] = useState<\n        UneditableSectionItemMaskState | undefined\n    >(maskState);\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        setMaskState(maskState);\n    }, [maskState]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleClickableClick = () => {\n        if (maskLoadingState === \"fail\") {\n            if (onTryAgain) onTryAgain();\n        }\n\n        switch (displayMaskState) {\n            case \"masked\": {\n                if (onUnmask) {\n                    onUnmask();\n                }\n                setMaskState(\"unmasked\");\n                break;\n            }\n            case \"unmasked\": {\n                if (onMask) {\n                    onMask();\n                }\n                setMaskState(\"masked\");\n                break;\n            }\n        }\n    };\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    const getValue = () => {\n        if (typeof value !== \"string\") {\n            return value;\n        }\n\n        return displayMaskState === \"masked\"\n            ? StringHelper.maskValue(value, {\n                  maskChar,\n                  maskRange,\n                  unmaskRange,\n                  maskRegex,\n                  maskTransformer,\n              })\n            : value;\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderMaskingState = () => {\n        switch (maskLoadingState) {\n            case \"fail\":\n                return (\n                    <>\n                        <ExclamationTriangleIcon className={styles.errorIcon} />\n                        <span className={styles.errorLabel}>Error</span>\n                        <span className={styles.tryAgainLabel}>\n                            Try again?\n                            <VisuallyHidden>{label}</VisuallyHidden>\n                        </span>\n                    </>\n                );\n            case \"loading\":\n                return (\n                    <>\n                        <ComponentLoadingSpinner className={styles.spinner} />\n                        <span className={styles.loadingLabel}>\n                            Retrieving...\n                        </span>\n                    </>\n                );\n            default:\n                return (\n                    <>\n                        {getValue()}\n                        <div\n                            className={styles.iconContainer}\n                            aria-label={\n                                displayMaskState === \"masked\"\n                                    ? `Display ${label}`\n                                    : `Hide ${label}`\n                            }\n                        >\n                            {displayMaskState === \"masked\" ? (\n                                <EyeIcon data-testid=\"masked-icon\" />\n                            ) : (\n                                <EyeSlashIcon data-testid=\"unmasked-icon\" />\n                            )}\n                        </div>\n                    </>\n                );\n        }\n    };\n\n    const renderContent = () => {\n        if (typeof value !== \"string\") {\n            return value;\n        }\n\n        if (!displayMaskState) {\n            return <Typography.BodyBL>{value}</Typography.BodyBL>;\n        }\n\n        if (disableMaskUnmask) {\n            return <Typography.BodyBL>{getValue()}</Typography.BodyBL>;\n        }\n\n        return (\n            <button\n                className={styles.clickable}\n                data-testid=\"clickable-label\"\n                onClick={handleClickableClick}\n                aria-busy={maskLoadingState === \"loading\"}\n                aria-live=\"polite\"\n                type=\"button\"\n                aria-label={StringHelper.getMaskedDescription(\n                    value,\n                    displayMaskState,\n                    maskRange\n                )}\n            >\n                {renderMaskingState()}\n            </button>\n        );\n    };\n\n    return (\n        <li\n            data-width={displayWidth}\n            data-full-width={fullWidth}\n            className={styles.container}\n        >\n            <FormLabel>{label}</FormLabel>\n            {renderContent()}\n            {alert && (\n                <Alert className={styles.alert} sizeType=\"small\" {...alert} />\n            )}\n        </li>\n    );\n};\n"],"names":["label","value","displayWidth","maskState","maskLoadingState","maskChar","maskRange","unmaskRange","maskRegex","disableMaskUnmask","alert","maskTransformer","onMask","onUnmask","onTryAgain","fullWidth","displayMaskState","setMaskState","useState","useEffect","handleClickableClick","getValue","StringHelper","maskValue","renderMaskingState","_jsxs","_Fragment","children","_jsx","ExclamationTriangleIcon","className","styles.errorIcon","styles.errorLabel","styles.tryAgainLabel","VisuallyHidden","ComponentLoadingSpinner","styles.spinner","styles.loadingLabel","styles.iconContainer","EyeIcon","EyeSlashIcon","styles.container","FormLabel","Typography","BodyBL","styles.clickable","onClick","type","getMaskedDescription","Alert","styles.alert","sizeType"],"mappings":"qhBAyBqC,EACjCA,QACAC,QACAC,eAAe,OACfC,YACAC,mBACAC,WAAW,IACXC,YACAC,cACAC,YACAC,oBAAiBC,MACjBA,EACAC,kBACAC,SACAC,WACAC,aACAC,gBAKA,MAAOC,EAAkBC,GAAgBC,EAAAA,SAEvCf,GAKFgB,EAAAA,WAAU,KACNF,EAAad,EAAU,GACxB,CAACA,IAKJ,MAAMiB,EAAuB,KAKzB,OAJyB,SAArBhB,GACIU,GAAYA,IAGZE,GACJ,IAAK,SACGH,GACAA,IAEJI,EAAa,YACb,MAEJ,IAAK,WACGL,GACAA,IAEJK,EAAa,YASnBI,EAAW,IACQ,iBAAVpB,EACAA,EAGiB,WAArBe,EACDM,EAAAA,aAAaC,UAAUtB,EAAO,CAC1BI,WACAC,YACAC,cACAC,YACAG,oBAEJV,EAMJuB,EAAqB,KACvB,OAAQpB,GACJ,IAAK,OACD,OACIqB,EAAAA,KAAAC,EAAAA,SAAA,CAAAC,SAAA,CACIC,EAAAA,IAACC,EAAAA,yBAAwBC,UAAWC,EAAAA,YACpCH,EAAAA,IAAA,OAAA,CAAME,UAAWE,EAAAA,WAAiBL,SAAA,UAClCF,EAAAA,KAAA,OAAA,CAAMK,UAAWG,EAAAA,cAAoBN,SAAA,CAAA,aAEjCC,EAAAA,IAACM,EAAAA,yBAAgBlC,UAIjC,IAAK,UACD,OACIyB,EAAAA,2BACIG,EAAAA,IAACO,EAAAA,yBAAwBL,UAAWM,EAAAA,UACpCR,MAAA,OAAA,CAAME,UAAWO,EAAAA,aAAmBV,SAAA,qBAKhD,QACI,OACIF,EAAAA,KAAAC,EAAAA,SAAA,CAAAC,SAAA,CACKN,IACDO,MAAA,MAAA,CACIE,UAAWQ,gBAAoB,aAEN,WAArBtB,EACM,WAAWhB,IACX,QAAQA,IAAO2B,SAGH,WAArBX,EACGY,MAACW,EAAAA,QAAO,CAAA,cAAa,gBAErBX,MAACY,EAAAA,aAAY,CAAA,cAAa,yBAwCtD,OACIf,EAAAA,KAAA,KAAA,CAAA,aACgBvB,oBACKa,EACjBe,UAAWW,EAAAA,UAAgBd,SAAA,CAE3BC,EAAAA,IAACc,EAAAA,UAAS,CAAAf,SAAE3B,IArCK,iBAAVC,EACAA,EAGNe,EAIDP,EACOmB,EAAAA,IAACe,EAAAA,WAAWC,iBAAQvB,MAI3BO,MAAA,SAAA,CACIE,UAAWe,EAAAA,UAAgB,cACf,kBACZC,QAAS1B,cACuB,YAArBhB,EAA8B,YAC/B,SACV2C,KAAK,SAAQ,aACDzB,EAAAA,aAAa0B,qBACrB/C,EACAe,EACAV,GACHqB,SAEAH,MArBEI,EAAAA,IAACe,EAAAA,WAAWC,OAAM,CAAAjB,SAAE1B,IAkC1BS,GACGkB,EAAAA,IAACqB,EAAAA,qBAAMnB,UAAWoB,EAAAA,MAAcC,SAAS,SAAYzC,MAExD"}
+{"version":3,"file":"section-item.js","sources":["../../../src/uneditable-section/section-item.tsx"],"sourcesContent":["import { ExclamationTriangleIcon } from \"@lifesg/react-icons/exclamation-triangle\";\nimport { EyeIcon } from \"@lifesg/react-icons/eye\";\nimport { EyeSlashIcon } from \"@lifesg/react-icons/eye-slash\";\nimport { useEffect, useState } from \"react\";\n\nimport { Alert } from \"../alert\";\nimport { FormLabel } from \"../form/form-label\";\nimport { VisuallyHidden } from \"../shared/accessibility\";\nimport { ComponentLoadingSpinner } from \"../shared/component-loading-spinner\";\nimport { Typography } from \"../typography\";\nimport { StringHelper } from \"../util/string-helper\";\nimport * as styles from \"./section-item.styles\";\nimport type {\n    UneditableSectionItemMaskState,\n    UneditableSectionItemProps,\n} from \"./types\";\n\nexport interface UneditableSectionItemComponentProps\n    extends UneditableSectionItemProps {\n    onMask?: (() => void) | undefined;\n    onUnmask?: (() => void) | undefined;\n    onTryAgain?: (() => void) | undefined;\n    fullWidth?: boolean | undefined;\n}\n\nexport const UneditableSectionItem = ({\n    label,\n    value,\n    displayWidth = \"full\",\n    maskState,\n    maskLoadingState,\n    maskChar = \"•\",\n    maskRange,\n    unmaskRange,\n    maskRegex,\n    disableMaskUnmask,\n    alert,\n    maskTransformer,\n    onMask,\n    onUnmask,\n    onTryAgain,\n    fullWidth,\n}: UneditableSectionItemComponentProps) => {\n    // =========================================================================\n    // CONST, STATE, REF\n    // =========================================================================\n    const [displayMaskState, setMaskState] = useState<\n        UneditableSectionItemMaskState | undefined\n    >(maskState);\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        setMaskState(maskState);\n    }, [maskState]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleClickableClick = () => {\n        if (maskLoadingState === \"fail\") {\n            if (onTryAgain) onTryAgain();\n        }\n\n        switch (displayMaskState) {\n            case \"masked\": {\n                if (onUnmask) {\n                    onUnmask();\n                }\n                setMaskState(\"unmasked\");\n                break;\n            }\n            case \"unmasked\": {\n                if (onMask) {\n                    onMask();\n                }\n                setMaskState(\"masked\");\n                break;\n            }\n        }\n    };\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    const getValue = () => {\n        if (typeof value !== \"string\") {\n            return value;\n        }\n\n        return displayMaskState === \"masked\"\n            ? StringHelper.maskValue(value, {\n                  maskChar,\n                  maskRange,\n                  unmaskRange,\n                  maskRegex,\n                  maskTransformer,\n              })\n            : value;\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderMaskingState = () => {\n        switch (maskLoadingState) {\n            case \"fail\":\n                return (\n                    <>\n                        <ExclamationTriangleIcon className={styles.errorIcon} />\n                        <span className={styles.errorLabel}>Error</span>\n                        <span className={styles.tryAgainLabel}>\n                            Try again?\n                            <VisuallyHidden>{label}</VisuallyHidden>\n                        </span>\n                    </>\n                );\n            case \"loading\":\n                return (\n                    <>\n                        <ComponentLoadingSpinner className={styles.spinner} />\n                        <span className={styles.loadingLabel}>\n                            Retrieving...\n                        </span>\n                    </>\n                );\n            default:\n                return (\n                    <>\n                        {getValue()}\n                        <div\n                            className={styles.iconContainer}\n                            aria-label={\n                                displayMaskState === \"masked\"\n                                    ? `Display ${label}`\n                                    : `Hide ${label}`\n                            }\n                        >\n                            {displayMaskState === \"masked\" ? (\n                                <EyeIcon data-testid=\"masked-icon\" />\n                            ) : (\n                                <EyeSlashIcon data-testid=\"unmasked-icon\" />\n                            )}\n                        </div>\n                    </>\n                );\n        }\n    };\n\n    const renderContent = () => {\n        if (typeof value !== \"string\") {\n            return value;\n        }\n\n        if (!displayMaskState) {\n            return <Typography.BodyBL>{value}</Typography.BodyBL>;\n        }\n\n        if (disableMaskUnmask) {\n            return <Typography.BodyBL>{getValue()}</Typography.BodyBL>;\n        }\n\n        return (\n            <button\n                className={styles.clickable}\n                data-testid=\"clickable-label\"\n                onClick={handleClickableClick}\n                aria-busy={maskLoadingState === \"loading\"}\n                aria-live=\"polite\"\n                type=\"button\"\n                aria-label={StringHelper.getMaskedDescription(\n                    value,\n                    displayMaskState,\n                    maskRange\n                )}\n            >\n                {renderMaskingState()}\n            </button>\n        );\n    };\n\n    return (\n        <li\n            data-width={displayWidth}\n            data-full-width={fullWidth}\n            className={styles.container}\n        >\n            <FormLabel>{label}</FormLabel>\n            {renderContent()}\n            {alert && (\n                <Alert className={styles.alert} sizeType=\"small\" {...alert} />\n            )}\n        </li>\n    );\n};\n"],"names":["label","value","displayWidth","maskState","maskLoadingState","maskChar","maskRange","unmaskRange","maskRegex","disableMaskUnmask","alert","maskTransformer","onMask","onUnmask","onTryAgain","fullWidth","displayMaskState","setMaskState","useState","useEffect","handleClickableClick","getValue","StringHelper","maskValue","renderMaskingState","_jsxs","_Fragment","children","_jsx","ExclamationTriangleIcon","className","styles.errorIcon","styles.errorLabel","styles.tryAgainLabel","VisuallyHidden","ComponentLoadingSpinner","styles.spinner","styles.loadingLabel","styles.iconContainer","EyeIcon","EyeSlashIcon","styles.container","FormLabel","Typography","BodyBL","styles.clickable","onClick","type","getMaskedDescription","Alert","styles.alert","sizeType"],"mappings":"giBAyBqC,EACjCA,QACAC,QACAC,eAAe,OACfC,YACAC,mBACAC,WAAW,IACXC,YACAC,cACAC,YACAC,oBAAiBC,MACjBA,EACAC,kBACAC,SACAC,WACAC,aACAC,gBAKA,MAAOC,EAAkBC,GAAgBC,EAAAA,SAEvCf,GAKFgB,EAAAA,WAAU,KACNF,EAAad,EAAU,GACxB,CAACA,IAKJ,MAAMiB,EAAuB,KAKzB,OAJyB,SAArBhB,GACIU,GAAYA,IAGZE,GACJ,IAAK,SACGH,GACAA,IAEJI,EAAa,YACb,MAEJ,IAAK,WACGL,GACAA,IAEJK,EAAa,YASnBI,EAAW,IACQ,iBAAVpB,EACAA,EAGiB,WAArBe,EACDM,EAAAA,aAAaC,UAAUtB,EAAO,CAC1BI,WACAC,YACAC,cACAC,YACAG,oBAEJV,EAMJuB,EAAqB,KACvB,OAAQpB,GACJ,IAAK,OACD,OACIqB,EAAAA,KAAAC,EAAAA,SAAA,CAAAC,SAAA,CACIC,EAAAA,IAACC,EAAAA,yBAAwBC,UAAWC,EAAAA,YACpCH,EAAAA,IAAA,OAAA,CAAME,UAAWE,EAAAA,WAAiBL,SAAA,UAClCF,EAAAA,KAAA,OAAA,CAAMK,UAAWG,EAAAA,cAAoBN,SAAA,CAAA,aAEjCC,EAAAA,IAACM,EAAAA,yBAAgBlC,UAIjC,IAAK,UACD,OACIyB,EAAAA,2BACIG,EAAAA,IAACO,EAAAA,yBAAwBL,UAAWM,EAAAA,UACpCR,MAAA,OAAA,CAAME,UAAWO,EAAAA,aAAmBV,SAAA,qBAKhD,QACI,OACIF,EAAAA,KAAAC,EAAAA,SAAA,CAAAC,SAAA,CACKN,IACDO,MAAA,MAAA,CACIE,UAAWQ,gBAAoB,aAEN,WAArBtB,EACM,WAAWhB,IACX,QAAQA,IAAO2B,SAGH,WAArBX,EACGY,MAACW,EAAAA,QAAO,CAAA,cAAa,gBAErBX,MAACY,EAAAA,aAAY,CAAA,cAAa,yBAwCtD,OACIf,EAAAA,KAAA,KAAA,CAAA,aACgBvB,oBACKa,EACjBe,UAAWW,EAAAA,UAAgBd,SAAA,CAE3BC,EAAAA,IAACc,EAAAA,UAAS,CAAAf,SAAE3B,IArCK,iBAAVC,EACAA,EAGNe,EAIDP,EACOmB,EAAAA,IAACe,EAAAA,WAAWC,iBAAQvB,MAI3BO,MAAA,SAAA,CACIE,UAAWe,EAAAA,UAAgB,cACf,kBACZC,QAAS1B,cACuB,YAArBhB,EAA8B,YAC/B,SACV2C,KAAK,SAAQ,aACDzB,EAAAA,aAAa0B,qBACrB/C,EACAe,EACAV,GACHqB,SAEAH,MArBEI,EAAAA,IAACe,EAAAA,WAAWC,OAAM,CAAAjB,SAAE1B,IAkC1BS,GACGkB,EAAAA,IAACqB,EAAAA,qBAAMnB,UAAWoB,EAAAA,MAAcC,SAAS,SAAYzC,MAExD"}

package/cjs/unit-number/unit-number-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"unit-number-input.js","sources":["../../../src/unit-number/unit-number-input.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport type React from \"react\";\nimport { useEffect, useMemo, useRef, useState } from \"react\";\n\nimport { Input } from \"../input\";\nimport * as inputGroupStyles from \"../input-group/input-group.styles\";\nimport { concatIds, VisuallyHidden } from \"../shared/accessibility\";\nimport { InputWrapper } from \"../shared/input-wrapper\";\nimport { Typography } from \"../typography\";\nimport { StringHelper, useId, useNextInputState } from \"../util\";\nimport type { UnitNumberInputProps } from \"./types\";\nimport * as styles from \"./unit-number-input.styles\";\n\ntype FieldType = \"floor\" | \"unit\" | \"none\";\ntype ValueFieldTypes = Exclude<FieldType, \"none\">;\n\nexport const UnitNumberInput = ({\n    disabled,\n    error,\n    value,\n    onChange,\n    onBlur,\n    onChangeRaw,\n    onBlurRaw,\n    readOnly,\n    placeholder = \"00-8888\",\n    autoComplete,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    \"aria-invalid\": ariaInvalid,\n    className,\n    ...otherProps\n}: UnitNumberInputProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [floorValue, _setFloorValue] = useState<string>(\"\");\n    const [unitValue, _setUnitValue] = useState<string>(\"\");\n    const [currentFocus, _setCurrentFocus] = useState<FieldType>(\"none\");\n    const internalId = useId();\n    const floorLabelId = `${internalId}-floor-label`;\n    const unitLabelId = `${internalId}-unit-label`;\n    const liveMessageId = `${internalId}-live-message`;\n\n    const nodeRef = useRef<HTMLDivElement>(null);\n    const floorInputRef = useRef<HTMLInputElement>(null);\n    const unitInputRef = useRef<HTMLInputElement>(null);\n\n    /**\n     * Have to use refs to allow the state values to be accessible\n     * by the event listener callback functions\n     * Reference:\n     * https://stackoverflow.com/questions/55265255/react-usestate-hook-event-handler-using-initial-state\n     */\n\n    const floorValueStateRef = useRef<string>(floorValue);\n    const unitValueStateRef = useRef<string>(unitValue);\n    const currentFocusStateRef = useRef<FieldType>(currentFocus);\n\n    const formatter = (value: string) =>\n        value.toLocaleUpperCase().replace(/[^0-9A-Za-z]/g, \"\");\n    const getNextFloorInputState = useNextInputState({\n        ref: floorInputRef,\n        formatter,\n    });\n    const getNextUnitInputState = useNextInputState({\n        ref: unitInputRef,\n        formatter,\n    });\n\n    const liveMessage = useMemo(() => {\n        let msg = \"\";\n        const floorMsg = formatPhraseWithPrefix(\"Hash\", floorValue);\n        const unitMsg = formatPhraseWithPrefix(\"Dash\", unitValue);\n        switch (currentFocus) {\n            case \"floor\":\n                msg = floorMsg;\n                break;\n            case \"unit\":\n                msg = floorValue ? [floorMsg, unitMsg].join(\" \") : unitMsg;\n                break;\n            default:\n                msg = \"\";\n        }\n        return msg;\n    }, [currentFocus, floorValue, unitValue]);\n\n    // =============================================================================\n    // REF FUNCTIONS\n    // =============================================================================\n    const setFloorValue = (data: string) => {\n        floorValueStateRef.current = data;\n        _setFloorValue(data);\n    };\n\n    const setUnitValue = (data: string) => {\n        unitValueStateRef.current = data;\n        _setUnitValue(data);\n    };\n\n    const setCurrentFocus = (data: FieldType) => {\n        currentFocusStateRef.current = data;\n        _setCurrentFocus(data);\n    };\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        // Auto focus feature\n        if (\n            currentFocus === \"floor\" &&\n            floorValue.length === 3 &&\n            unitInputRef.current\n        ) {\n            unitInputRef.current.focus();\n        }\n    }, [floorValue]);\n\n    useEffect(() => {\n        updateValues(value);\n    }, [value]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n        setCurrentFocus(event.target.name as FieldType);\n        event.target.select();\n    };\n\n    const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n        const targetName = event.target.name as FieldType;\n        const targetValue = event.target.value;\n        const formattedInput = formatInput(targetValue);\n\n        if (targetName === \"floor\") {\n            setFloorValue(formattedInput);\n            if (formattedInput !== floorValue) {\n                performOnChangeHandler(formattedInput, targetName);\n            }\n        } else if (targetName === \"unit\") {\n            setUnitValue(formattedInput);\n            if (formattedInput !== unitValue) {\n                performOnChangeHandler(formattedInput, targetName);\n            }\n        }\n    };\n\n    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        const targetName = event.target.name as FieldType;\n\n        if (targetName === \"floor\") {\n            const nextInputState = getNextFloorInputState();\n            if (!nextInputState) return;\n\n            const { nextValue, updateCaretPosition } = nextInputState;\n            updateCaretPosition();\n            setFloorValue(nextValue);\n            performOnChangeHandler(nextValue, targetName);\n        } else if (targetName === \"unit\") {\n            const nextInputState = getNextUnitInputState();\n            if (!nextInputState) return;\n\n            const { nextValue, updateCaretPosition } = nextInputState;\n            updateCaretPosition();\n            setUnitValue(nextValue);\n            performOnChangeHandler(nextValue, targetName);\n        }\n    };\n\n    const handleNodeClick = () => {\n        if (currentFocus === \"none\" && floorInputRef.current) {\n            floorInputRef.current.focus();\n        }\n    };\n\n    const handleNodeBlur = (event: React.FocusEvent) => {\n        if (nodeRef.current && nodeRef.current.contains(event.relatedTarget)) {\n            // internal element received focus\n            return;\n        }\n        if (currentFocusStateRef.current !== \"none\") {\n            setCurrentFocus(\"none\");\n            performOnBlurHandler();\n        }\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n        /**\n         * Allow going to the field before if user presses Backspace\n         * on an empty field\n         */\n        if (event.code === \"Backspace\" || event.key === \"Backspace\") {\n            if (currentFocus === \"unit\" && unitValue.length === 0) {\n                floorInputRef.current?.focus();\n            }\n        }\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const formatInput = (value: string) => {\n        return /^[0-9]$/.test(value)\n            ? StringHelper.padValue(value, true)\n            : value.toLocaleUpperCase();\n    };\n\n    const updateValues = (value: string | undefined) => {\n        if (value === INVALID_VALUE) {\n            return;\n        } else if (value === undefined || value.length === 0) {\n            setFloorValue(\"\");\n            setUnitValue(\"\");\n        } else {\n            const valueArr = value.split(\"-\");\n            if (valueArr.length === 2) {\n                // Valid value\n                const floor = valueArr[0];\n                const unit = valueArr[1];\n                setFloorValue(\n                    currentFocus === \"floor\" ? floor : formatInput(floor)\n                );\n                setUnitValue(\n                    currentFocus === \"unit\" ? unit : formatInput(unit)\n                );\n            }\n        }\n    };\n\n    const performOnChangeHandler = (\n        changeValue: string,\n        field: ValueFieldTypes\n    ) => {\n        if (!onChange && !onChangeRaw) {\n            return;\n        }\n\n        const values: Record<ValueFieldTypes, string> = {\n            floor: floorValueStateRef.current,\n            unit: unitValueStateRef.current,\n        };\n\n        // Update the specific field value\n        values[field] = changeValue;\n\n        if (onChange) {\n            const returnValue = getFormattedValue(values);\n            onChange(returnValue);\n        }\n\n        if (onChangeRaw) {\n            onChangeRaw([values.floor, values.unit]);\n        }\n    };\n\n    const performOnBlurHandler = () => {\n        if (!onBlur && !onBlurRaw) {\n            return;\n        }\n\n        const values: Record<ValueFieldTypes, string> = {\n            floor: formatInput(floorValueStateRef.current),\n            unit: formatInput(unitValueStateRef.current),\n        };\n\n        if (onBlur) {\n            const returnValue = getFormattedValue(values);\n            onBlur(returnValue);\n        }\n\n        if (onBlurRaw) {\n            onBlurRaw([values.floor, values.unit]);\n        }\n    };\n\n    const getFormattedValue = (values: Record<ValueFieldTypes, string>) => {\n        const valueArr = [values.floor, values.unit];\n\n        if (values.floor.length > 0 && values.unit.length > 0) {\n            return valueArr.join(\"-\");\n        } else if (valueArr.every((value) => value === \"\")) {\n            return \"\";\n        } else {\n            return INVALID_VALUE;\n        }\n    };\n\n    const getPlaceholder = (value: string) => {\n        return value.split(\"-\");\n    };\n\n    function formatPhraseWithPrefix(prefix: string, v: string) {\n        return v ? `${prefix} ${Array.from(v).join(\" \")}` : \"\";\n    }\n\n    // =============================================================================\n    // RENDER FUNCTION\n    // =============================================================================\n    const renderInputs = () => (\n        <>\n            <Input\n                name=\"floor\"\n                maxLength={3}\n                value={floorValue}\n                ref={floorInputRef}\n                onFocus={handleFocus}\n                onBlur={handleBlur}\n                onChange={handleChange}\n                disabled={disabled}\n                readOnly={readOnly}\n                type=\"text\"\n                pattern=\"[0-9A-Z]{2,3}\"\n                data-testid=\"floor-input\"\n                aria-labelledby={concatIds(ariaLabelledBy, floorLabelId)}\n                aria-describedby={concatIds(ariaDescribedBy, liveMessageId)}\n                aria-invalid={ariaInvalid}\n                placeholder={\n                    currentFocus === \"floor\" && !readOnly && !disabled\n                        ? \"\"\n                        : getPlaceholder(placeholder)[0]\n                }\n                autoComplete={autoComplete}\n                styleType=\"no-border\"\n                className={clsx(styles.input, styles.floorInput)}\n            />\n            <VisuallyHidden aria-hidden id={floorLabelId}>\n                Enter floor number\n            </VisuallyHidden>\n            <Typography.BodyBL\n                className={clsx(\n                    styles.unitNumberDivider,\n                    floorValue.length === 0 && styles.unitNumberDividerInactive\n                )}\n            >\n                -\n            </Typography.BodyBL>\n            <Input\n                name=\"unit\"\n                maxLength={5}\n                value={unitValue}\n                ref={unitInputRef}\n                onFocus={handleFocus}\n                onBlur={handleBlur}\n                onChange={handleChange}\n                onKeyDown={handleKeyDown}\n                disabled={disabled}\n                readOnly={readOnly}\n                type=\"text\"\n                pattern=\"[0-9A-Z]{2,5}\"\n                data-testid=\"unit-input\"\n                aria-labelledby={concatIds(ariaLabelledBy, unitLabelId)}\n                aria-describedby={concatIds(ariaDescribedBy, liveMessageId)}\n                aria-invalid={ariaInvalid}\n                placeholder={\n                    currentFocus === \"unit\" && !readOnly && !disabled\n                        ? \"\"\n                        : getPlaceholder(placeholder)[1]\n                }\n                autoComplete={autoComplete}\n                styleType=\"no-border\"\n                className={clsx(\n                    styles.input,\n                    styles.floorInput,\n                    styles.unitInput\n                )}\n            />\n            <VisuallyHidden aria-hidden id={unitLabelId}>\n                Enter unit number\n            </VisuallyHidden>\n            {/** Live message for AT reader to read with the combination of prefix and current value for both floor input and unit input */}\n            <VisuallyHidden id={liveMessageId} aria-live=\"polite\">\n                {liveMessage}\n            </VisuallyHidden>\n        </>\n    );\n\n    const renderReadOnly = (displayValue: string) => {\n        const displayValueArr = displayValue.split(\"-\");\n        const liveMessageForReadOnly = [\n            formatPhraseWithPrefix(\"Hash\", displayValueArr[0]),\n            formatPhraseWithPrefix(\"Dash\", displayValueArr[1]),\n        ].join(\" \");\n\n        return (\n            <div\n                data-testid=\"readonly-display\"\n                tabIndex={0}\n                role=\"textbox\"\n                aria-readonly\n                aria-labelledby={ariaLabelledBy}\n                aria-describedby={ariaDescribedBy}\n                aria-invalid={ariaInvalid}\n                className={styles.readOnlyContainer}\n            >\n                <Typography.BodyBL>{displayValueArr[0]}</Typography.BodyBL>\n                <Typography.BodyBL className={styles.unitNumberDivider}>\n                    -\n                </Typography.BodyBL>\n                <Typography.BodyBL>{displayValueArr[1]}</Typography.BodyBL>\n                <VisuallyHidden>{liveMessageForReadOnly}</VisuallyHidden>\n            </div>\n        );\n    };\n\n    return (\n        <InputWrapper\n            {...otherProps}\n            ref={nodeRef}\n            onClick={handleNodeClick}\n            disabled={disabled}\n            error={error}\n            readOnly={readOnly}\n            tabIndex={-1}\n            onBlur={handleNodeBlur}\n            className={className}\n        >\n            <div\n                data-testid=\"addon\"\n                className={clsx(\n                    styles.hashContainer,\n                    inputGroupStyles.labelAddonContainer\n                )}\n                data-disabled={disabled}\n                data-read-only={readOnly}\n            >\n                #\n            </div>\n            {readOnly && value ? renderReadOnly(value) : renderInputs()}\n        </InputWrapper>\n    );\n};\n\n// =============================================================================\n// CONSTANTS\n// =============================================================================\nconst INVALID_VALUE = \"Invalid unit number\";\n"],"names":["INVALID_VALUE","_a","disabled","error","value","onChange","onBlur","onChangeRaw","onBlurRaw","readOnly","placeholder","autoComplete","ariaLabelledBy","ariaDescribedBy","ariaInvalid","className","otherProps","__rest","floorValue","_setFloorValue","useState","unitValue","_setUnitValue","currentFocus","_setCurrentFocus","internalId","useId","floorLabelId","unitLabelId","liveMessageId","nodeRef","useRef","floorInputRef","unitInputRef","floorValueStateRef","unitValueStateRef","currentFocusStateRef","formatter","toLocaleUpperCase","replace","getNextFloorInputState","useNextInputState","ref","getNextUnitInputState","liveMessage","useMemo","msg","floorMsg","formatPhraseWithPrefix","unitMsg","join","setFloorValue","data","current","setUnitValue","setCurrentFocus","useEffect","length","focus","updateValues","handleFocus","event","target","name","select","handleBlur","targetName","targetValue","formattedInput","formatInput","performOnChangeHandler","handleChange","nextInputState","nextValue","updateCaretPosition","handleKeyDown","code","key","test","StringHelper","padValue","undefined","valueArr","split","floor","unit","changeValue","field","values","returnValue","getFormattedValue","performOnBlurHandler","every","getPlaceholder","prefix","v","Array","from","_jsxs","InputWrapper","Object","assign","onClick","tabIndex","contains","relatedTarget","children","_jsx","clsx","styles.hashContainer","inputGroupStyles.labelAddonContainer","displayValue","displayValueArr","liveMessageForReadOnly","role","styles.readOnlyContainer","Typography","BodyBL","styles.unitNumberDivider","VisuallyHidden","renderReadOnly","_Fragment","Input","maxLength","onFocus","type","pattern","concatIds","styleType","styles.input","styles.floorInput","id","styles.unitNumberDividerInactive","onKeyDown","styles.unitInput"],"mappings":"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"}
+{"version":3,"file":"unit-number-input.js","sources":["../../../src/unit-number/unit-number-input.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport type React from \"react\";\nimport { useEffect, useMemo, useRef, useState } from \"react\";\n\nimport { Input } from \"../input\";\nimport * as inputGroupStyles from \"../input-group/input-group.styles\";\nimport { concatIds, VisuallyHidden } from \"../shared/accessibility\";\nimport { InputWrapper } from \"../shared/input-wrapper\";\nimport { Typography } from \"../typography\";\nimport { StringHelper, useId, useNextInputState } from \"../util\";\nimport type { UnitNumberInputProps } from \"./types\";\nimport * as styles from \"./unit-number-input.styles\";\n\ntype FieldType = \"floor\" | \"unit\" | \"none\";\ntype ValueFieldTypes = Exclude<FieldType, \"none\">;\n\n// @catalog\n/**\n * A two-field input for entering Singapore-style unit numbers in `floor-unit` format.\n *\n * Use `UnitNumberInput` when you need a structured unit number entry that splits\n * floor and unit into separate fields.\n */\nexport const UnitNumberInput = ({\n    disabled,\n    error,\n    value,\n    onChange,\n    onBlur,\n    onChangeRaw,\n    onBlurRaw,\n    readOnly,\n    placeholder = \"00-8888\",\n    autoComplete,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    \"aria-invalid\": ariaInvalid,\n    className,\n    ...otherProps\n}: UnitNumberInputProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [floorValue, _setFloorValue] = useState<string>(\"\");\n    const [unitValue, _setUnitValue] = useState<string>(\"\");\n    const [currentFocus, _setCurrentFocus] = useState<FieldType>(\"none\");\n    const internalId = useId();\n    const floorLabelId = `${internalId}-floor-label`;\n    const unitLabelId = `${internalId}-unit-label`;\n    const liveMessageId = `${internalId}-live-message`;\n\n    const nodeRef = useRef<HTMLDivElement>(null);\n    const floorInputRef = useRef<HTMLInputElement>(null);\n    const unitInputRef = useRef<HTMLInputElement>(null);\n\n    /**\n     * Have to use refs to allow the state values to be accessible\n     * by the event listener callback functions\n     * Reference:\n     * https://stackoverflow.com/questions/55265255/react-usestate-hook-event-handler-using-initial-state\n     */\n\n    const floorValueStateRef = useRef<string>(floorValue);\n    const unitValueStateRef = useRef<string>(unitValue);\n    const currentFocusStateRef = useRef<FieldType>(currentFocus);\n\n    const formatter = (value: string) =>\n        value.toLocaleUpperCase().replace(/[^0-9A-Za-z]/g, \"\");\n    const getNextFloorInputState = useNextInputState({\n        ref: floorInputRef,\n        formatter,\n    });\n    const getNextUnitInputState = useNextInputState({\n        ref: unitInputRef,\n        formatter,\n    });\n\n    const liveMessage = useMemo(() => {\n        let msg = \"\";\n        const floorMsg = formatPhraseWithPrefix(\"Hash\", floorValue);\n        const unitMsg = formatPhraseWithPrefix(\"Dash\", unitValue);\n        switch (currentFocus) {\n            case \"floor\":\n                msg = floorMsg;\n                break;\n            case \"unit\":\n                msg = floorValue ? [floorMsg, unitMsg].join(\" \") : unitMsg;\n                break;\n            default:\n                msg = \"\";\n        }\n        return msg;\n    }, [currentFocus, floorValue, unitValue]);\n\n    // =============================================================================\n    // REF FUNCTIONS\n    // =============================================================================\n    const setFloorValue = (data: string) => {\n        floorValueStateRef.current = data;\n        _setFloorValue(data);\n    };\n\n    const setUnitValue = (data: string) => {\n        unitValueStateRef.current = data;\n        _setUnitValue(data);\n    };\n\n    const setCurrentFocus = (data: FieldType) => {\n        currentFocusStateRef.current = data;\n        _setCurrentFocus(data);\n    };\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        // Auto focus feature\n        if (\n            currentFocus === \"floor\" &&\n            floorValue.length === 3 &&\n            unitInputRef.current\n        ) {\n            unitInputRef.current.focus();\n        }\n    }, [floorValue]);\n\n    useEffect(() => {\n        updateValues(value);\n    }, [value]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n        setCurrentFocus(event.target.name as FieldType);\n        event.target.select();\n    };\n\n    const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n        const targetName = event.target.name as FieldType;\n        const targetValue = event.target.value;\n        const formattedInput = formatInput(targetValue);\n\n        if (targetName === \"floor\") {\n            setFloorValue(formattedInput);\n            if (formattedInput !== floorValue) {\n                performOnChangeHandler(formattedInput, targetName);\n            }\n        } else if (targetName === \"unit\") {\n            setUnitValue(formattedInput);\n            if (formattedInput !== unitValue) {\n                performOnChangeHandler(formattedInput, targetName);\n            }\n        }\n    };\n\n    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        const targetName = event.target.name as FieldType;\n\n        if (targetName === \"floor\") {\n            const nextInputState = getNextFloorInputState();\n            if (!nextInputState) return;\n\n            const { nextValue, updateCaretPosition } = nextInputState;\n            updateCaretPosition();\n            setFloorValue(nextValue);\n            performOnChangeHandler(nextValue, targetName);\n        } else if (targetName === \"unit\") {\n            const nextInputState = getNextUnitInputState();\n            if (!nextInputState) return;\n\n            const { nextValue, updateCaretPosition } = nextInputState;\n            updateCaretPosition();\n            setUnitValue(nextValue);\n            performOnChangeHandler(nextValue, targetName);\n        }\n    };\n\n    const handleNodeClick = () => {\n        if (currentFocus === \"none\" && floorInputRef.current) {\n            floorInputRef.current.focus();\n        }\n    };\n\n    const handleNodeBlur = (event: React.FocusEvent) => {\n        if (nodeRef.current && nodeRef.current.contains(event.relatedTarget)) {\n            // internal element received focus\n            return;\n        }\n        if (currentFocusStateRef.current !== \"none\") {\n            setCurrentFocus(\"none\");\n            performOnBlurHandler();\n        }\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n        /**\n         * Allow going to the field before if user presses Backspace\n         * on an empty field\n         */\n        if (event.code === \"Backspace\" || event.key === \"Backspace\") {\n            if (currentFocus === \"unit\" && unitValue.length === 0) {\n                floorInputRef.current?.focus();\n            }\n        }\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const formatInput = (value: string) => {\n        return /^[0-9]$/.test(value)\n            ? StringHelper.padValue(value, true)\n            : value.toLocaleUpperCase();\n    };\n\n    const updateValues = (value: string | undefined) => {\n        if (value === INVALID_VALUE) {\n            return;\n        } else if (value === undefined || value.length === 0) {\n            setFloorValue(\"\");\n            setUnitValue(\"\");\n        } else {\n            const valueArr = value.split(\"-\");\n            if (valueArr.length === 2) {\n                // Valid value\n                const floor = valueArr[0];\n                const unit = valueArr[1];\n                setFloorValue(\n                    currentFocus === \"floor\" ? floor : formatInput(floor)\n                );\n                setUnitValue(\n                    currentFocus === \"unit\" ? unit : formatInput(unit)\n                );\n            }\n        }\n    };\n\n    const performOnChangeHandler = (\n        changeValue: string,\n        field: ValueFieldTypes\n    ) => {\n        if (!onChange && !onChangeRaw) {\n            return;\n        }\n\n        const values: Record<ValueFieldTypes, string> = {\n            floor: floorValueStateRef.current,\n            unit: unitValueStateRef.current,\n        };\n\n        // Update the specific field value\n        values[field] = changeValue;\n\n        if (onChange) {\n            const returnValue = getFormattedValue(values);\n            onChange(returnValue);\n        }\n\n        if (onChangeRaw) {\n            onChangeRaw([values.floor, values.unit]);\n        }\n    };\n\n    const performOnBlurHandler = () => {\n        if (!onBlur && !onBlurRaw) {\n            return;\n        }\n\n        const values: Record<ValueFieldTypes, string> = {\n            floor: formatInput(floorValueStateRef.current),\n            unit: formatInput(unitValueStateRef.current),\n        };\n\n        if (onBlur) {\n            const returnValue = getFormattedValue(values);\n            onBlur(returnValue);\n        }\n\n        if (onBlurRaw) {\n            onBlurRaw([values.floor, values.unit]);\n        }\n    };\n\n    const getFormattedValue = (values: Record<ValueFieldTypes, string>) => {\n        const valueArr = [values.floor, values.unit];\n\n        if (values.floor.length > 0 && values.unit.length > 0) {\n            return valueArr.join(\"-\");\n        } else if (valueArr.every((value) => value === \"\")) {\n            return \"\";\n        } else {\n            return INVALID_VALUE;\n        }\n    };\n\n    const getPlaceholder = (value: string) => {\n        return value.split(\"-\");\n    };\n\n    function formatPhraseWithPrefix(prefix: string, v: string) {\n        return v ? `${prefix} ${Array.from(v).join(\" \")}` : \"\";\n    }\n\n    // =============================================================================\n    // RENDER FUNCTION\n    // =============================================================================\n    const renderInputs = () => (\n        <>\n            <Input\n                name=\"floor\"\n                maxLength={3}\n                value={floorValue}\n                ref={floorInputRef}\n                onFocus={handleFocus}\n                onBlur={handleBlur}\n                onChange={handleChange}\n                disabled={disabled}\n                readOnly={readOnly}\n                type=\"text\"\n                pattern=\"[0-9A-Z]{2,3}\"\n                data-testid=\"floor-input\"\n                aria-labelledby={concatIds(ariaLabelledBy, floorLabelId)}\n                aria-describedby={concatIds(ariaDescribedBy, liveMessageId)}\n                aria-invalid={ariaInvalid}\n                placeholder={\n                    currentFocus === \"floor\" && !readOnly && !disabled\n                        ? \"\"\n                        : getPlaceholder(placeholder)[0]\n                }\n                autoComplete={autoComplete}\n                styleType=\"no-border\"\n                className={clsx(styles.input, styles.floorInput)}\n            />\n            <VisuallyHidden aria-hidden id={floorLabelId}>\n                Enter floor number\n            </VisuallyHidden>\n            <Typography.BodyBL\n                className={clsx(\n                    styles.unitNumberDivider,\n                    floorValue.length === 0 && styles.unitNumberDividerInactive\n                )}\n            >\n                -\n            </Typography.BodyBL>\n            <Input\n                name=\"unit\"\n                maxLength={5}\n                value={unitValue}\n                ref={unitInputRef}\n                onFocus={handleFocus}\n                onBlur={handleBlur}\n                onChange={handleChange}\n                onKeyDown={handleKeyDown}\n                disabled={disabled}\n                readOnly={readOnly}\n                type=\"text\"\n                pattern=\"[0-9A-Z]{2,5}\"\n                data-testid=\"unit-input\"\n                aria-labelledby={concatIds(ariaLabelledBy, unitLabelId)}\n                aria-describedby={concatIds(ariaDescribedBy, liveMessageId)}\n                aria-invalid={ariaInvalid}\n                placeholder={\n                    currentFocus === \"unit\" && !readOnly && !disabled\n                        ? \"\"\n                        : getPlaceholder(placeholder)[1]\n                }\n                autoComplete={autoComplete}\n                styleType=\"no-border\"\n                className={clsx(\n                    styles.input,\n                    styles.floorInput,\n                    styles.unitInput\n                )}\n            />\n            <VisuallyHidden aria-hidden id={unitLabelId}>\n                Enter unit number\n            </VisuallyHidden>\n            {/** Live message for AT reader to read with the combination of prefix and current value for both floor input and unit input */}\n            <VisuallyHidden id={liveMessageId} aria-live=\"polite\">\n                {liveMessage}\n            </VisuallyHidden>\n        </>\n    );\n\n    const renderReadOnly = (displayValue: string) => {\n        const displayValueArr = displayValue.split(\"-\");\n        const liveMessageForReadOnly = [\n            formatPhraseWithPrefix(\"Hash\", displayValueArr[0]),\n            formatPhraseWithPrefix(\"Dash\", displayValueArr[1]),\n        ].join(\" \");\n\n        return (\n            <div\n                data-testid=\"readonly-display\"\n                tabIndex={0}\n                role=\"textbox\"\n                aria-readonly\n                aria-labelledby={ariaLabelledBy}\n                aria-describedby={ariaDescribedBy}\n                aria-invalid={ariaInvalid}\n                className={styles.readOnlyContainer}\n            >\n                <Typography.BodyBL>{displayValueArr[0]}</Typography.BodyBL>\n                <Typography.BodyBL className={styles.unitNumberDivider}>\n                    -\n                </Typography.BodyBL>\n                <Typography.BodyBL>{displayValueArr[1]}</Typography.BodyBL>\n                <VisuallyHidden>{liveMessageForReadOnly}</VisuallyHidden>\n            </div>\n        );\n    };\n\n    return (\n        <InputWrapper\n            {...otherProps}\n            ref={nodeRef}\n            onClick={handleNodeClick}\n            disabled={disabled}\n            error={error}\n            readOnly={readOnly}\n            tabIndex={-1}\n            onBlur={handleNodeBlur}\n            className={className}\n        >\n            <div\n                data-testid=\"addon\"\n                className={clsx(\n                    styles.hashContainer,\n                    inputGroupStyles.labelAddonContainer\n                )}\n                data-disabled={disabled}\n                data-read-only={readOnly}\n            >\n                #\n            </div>\n            {readOnly && value ? renderReadOnly(value) : renderInputs()}\n        </InputWrapper>\n    );\n};\n\n// =============================================================================\n// CONSTANTS\n// =============================================================================\nconst INVALID_VALUE = \"Invalid unit number\";\n"],"names":["INVALID_VALUE","_a","disabled","error","value","onChange","onBlur","onChangeRaw","onBlurRaw","readOnly","placeholder","autoComplete","ariaLabelledBy","ariaDescribedBy","ariaInvalid","className","otherProps","__rest","floorValue","_setFloorValue","useState","unitValue","_setUnitValue","currentFocus","_setCurrentFocus","internalId","useId","floorLabelId","unitLabelId","liveMessageId","nodeRef","useRef","floorInputRef","unitInputRef","floorValueStateRef","unitValueStateRef","currentFocusStateRef","formatter","toLocaleUpperCase","replace","getNextFloorInputState","useNextInputState","ref","getNextUnitInputState","liveMessage","useMemo","msg","floorMsg","formatPhraseWithPrefix","unitMsg","join","setFloorValue","data","current","setUnitValue","setCurrentFocus","useEffect","length","focus","updateValues","handleFocus","event","target","name","select","handleBlur","targetName","targetValue","formattedInput","formatInput","performOnChangeHandler","handleChange","nextInputState","nextValue","updateCaretPosition","handleKeyDown","code","key","test","StringHelper","padValue","undefined","valueArr","split","floor","unit","changeValue","field","values","returnValue","getFormattedValue","performOnBlurHandler","every","getPlaceholder","prefix","v","Array","from","_jsxs","InputWrapper","Object","assign","onClick","tabIndex","contains","relatedTarget","children","_jsx","clsx","styles.hashContainer","inputGroupStyles.labelAddonContainer","displayValue","displayValueArr","liveMessageForReadOnly","role","styles.readOnlyContainer","Typography","BodyBL","styles.unitNumberDivider","VisuallyHidden","renderReadOnly","_Fragment","Input","maxLength","onFocus","type","pattern","concatIds","styleType","styles.input","styles.floorInput","id","styles.unitNumberDividerInactive","onKeyDown","styles.unitInput"],"mappings":"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"}

package/cjs/util/merge-refs.js.map

@@ -1 +1 @@
-{"version":3,"file":"merge-refs.js","sources":["../../../src/util/merge-refs.ts"],"sourcesContent":["import type { MutableRefObject, Ref } from \"react\";\n\nimport { isReact19 } from \"./version\";\n\nexport const mergeRefs = <T>(...refs: Ref<T>[]) => {\n    return (value: T | null) => {\n        const cleanups: (() => void)[] = [];\n\n        for (const ref of refs) {\n            if (typeof ref === \"function\") {\n                const cleanup = ref(value);\n                const isCleanup = typeof cleanup === \"function\";\n                cleanups.push(isCleanup ? cleanup : () => ref(null));\n            } else if (ref) {\n                (ref as MutableRefObject<T | null>).current = value;\n                cleanups.push(() => {\n                    (ref as MutableRefObject<T | null>).current = null;\n                });\n            }\n        }\n\n        if (isReact19()) {\n            return () => {\n                for (const cleanup of cleanups) cleanup();\n            };\n        }\n    };\n};\n"],"names":["refs","value","cleanups","ref","cleanup","isCleanup","push","current","isReact19"],"mappings":"6DAIyB,IAAOA,IACpBC,IACJ,MAAMC,EAA2B,GAEjC,IAAK,MAAMC,KAAOH,EACd,GAAmB,mBAARG,EAAoB,CAC3B,MAAMC,EAAUD,EAAIF,GACdI,EAA+B,mBAAZD,EACzBF,EAASI,KAAKD,EAAYD,EAAU,IAAMD,EAAI,MAClD,MAAWA,IACNA,EAAmCI,QAAUN,EAC9CC,EAASI,MAAK,KACTH,EAAmCI,QAAU,IAAI,KAK9D,GAAIC,EAAAA,YACA,MAAO,KACH,IAAK,MAAMJ,KAAWF,EAAUE,GAAS,CAEjD"}
+{"version":3,"file":"merge-refs.js","sources":["../../../src/util/merge-refs.ts"],"sourcesContent":["import type { MutableRefObject, Ref } from \"react\";\n\nimport { isReact19 } from \"./version\";\n\nexport const mergeRefs = <T>(...refs: (Ref<T> | undefined)[]) => {\n    return (value: T | null) => {\n        const cleanups: (() => void)[] = [];\n\n        for (const ref of refs) {\n            if (typeof ref === \"function\") {\n                const cleanup = ref(value);\n                const isCleanup = typeof cleanup === \"function\";\n                cleanups.push(isCleanup ? cleanup : () => ref(null));\n            } else if (ref) {\n                (ref as MutableRefObject<T | null>).current = value;\n                cleanups.push(() => {\n                    (ref as MutableRefObject<T | null>).current = null;\n                });\n            }\n        }\n\n        if (isReact19()) {\n            return () => {\n                for (const cleanup of cleanups) cleanup();\n            };\n        }\n    };\n};\n"],"names":["refs","value","cleanups","ref","cleanup","isCleanup","push","current","isReact19"],"mappings":"6DAIyB,IAAOA,IACpBC,IACJ,MAAMC,EAA2B,GAEjC,IAAK,MAAMC,KAAOH,EACd,GAAmB,mBAARG,EAAoB,CAC3B,MAAMC,EAAUD,EAAIF,GACdI,EAA+B,mBAAZD,EACzBF,EAASI,KAAKD,EAAYD,EAAU,IAAMD,EAAI,MAClD,MAAWA,IACNA,EAAmCI,QAAUN,EAC9CC,EAASI,MAAK,KACTH,EAAmCI,QAAU,IAAI,KAK9D,GAAIC,EAAAA,YACA,MAAO,KACH,IAAK,MAAMJ,KAAWF,EAAUE,GAAS,CAEjD"}

package/cjs/util/use-throttle.js

@@ -0,0 +1,2 @@
+"use strict";var e=require("react");exports.useThrottle=function(r,u){const t=e.useRef(r),n=e.useRef(0),c=e.useRef(null);return e.useEffect((()=>{t.current=r}),[r]),e.useEffect((()=>()=>{null!==c.current&&clearTimeout(c.current)}),[]),e.useCallback(((...e)=>{const r=Date.now(),l=r-n.current;null!==c.current&&(clearTimeout(c.current),c.current=null),l>=u?(n.current=r,t.current(...e)):c.current=setTimeout((()=>{n.current=Date.now(),c.current=null,t.current(...e)}),u-l)}),[u])};
+//# sourceMappingURL=use-throttle.js.map

package/cjs/util/use-throttle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-throttle.js","sources":["../../../src/util/use-throttle.ts"],"sourcesContent":["import { useCallback, useEffect, useRef } from \"react\";\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport function useThrottle<T extends (...args: any[]) => any>(\n    callback: T,\n    wait: number\n): T {\n    const callbackRef = useRef<T>(callback);\n    const lastCalledRef = useRef<number>(0);\n    const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n    useEffect(() => {\n        callbackRef.current = callback;\n    }, [callback]);\n\n    useEffect(() => {\n        return () => {\n            if (timeoutRef.current !== null) {\n                clearTimeout(timeoutRef.current);\n            }\n        };\n    }, []);\n\n    return useCallback(\n        (...args: Parameters<T>) => {\n            const now = Date.now();\n            const elapsed = now - lastCalledRef.current;\n\n            if (timeoutRef.current !== null) {\n                clearTimeout(timeoutRef.current);\n                timeoutRef.current = null;\n            }\n\n            if (elapsed >= wait) {\n                lastCalledRef.current = now;\n                callbackRef.current(...args);\n            } else {\n                timeoutRef.current = setTimeout(() => {\n                    lastCalledRef.current = Date.now();\n                    timeoutRef.current = null;\n                    callbackRef.current(...args);\n                }, wait - elapsed);\n            }\n        },\n        [wait]\n    ) as T;\n}\n"],"names":["callback","wait","callbackRef","useRef","lastCalledRef","timeoutRef","useEffect","current","clearTimeout","useCallback","args","now","Date","elapsed","setTimeout"],"mappings":"wDAGM,SACFA,EACAC,GAEA,MAAMC,EAAcC,EAAAA,OAAUH,GACxBI,EAAgBD,EAAAA,OAAe,GAC/BE,EAAaF,EAAAA,OAA6C,MAchE,OAZAG,EAAAA,WAAU,KACNJ,EAAYK,QAAUP,CAAQ,GAC/B,CAACA,IAEJM,EAAAA,WAAU,IACC,KACwB,OAAvBD,EAAWE,SACXC,aAAaH,EAAWE,QAC5B,GAEL,IAEIE,EAAAA,aACH,IAAIC,KACA,MAAMC,EAAMC,KAAKD,MACXE,EAAUF,EAAMP,EAAcG,QAET,OAAvBF,EAAWE,UACXC,aAAaH,EAAWE,SACxBF,EAAWE,QAAU,MAGrBM,GAAWZ,GACXG,EAAcG,QAAUI,EACxBT,EAAYK,WAAWG,IAEvBL,EAAWE,QAAUO,YAAW,KAC5BV,EAAcG,QAAUK,KAAKD,MAC7BN,EAAWE,QAAU,KACrBL,EAAYK,WAAWG,EAAK,GAC7BT,EAAOY,EACd,GAEJ,CAACZ,GAET"}