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

package/cjs/time-slot-bar/time-slot-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"time-slot-bar.js","sources":["../../../src/time-slot-bar/time-slot-bar.tsx"],"sourcesContent":["import type { Dayjs } from \"dayjs\";\nimport dayjs from \"dayjs\";\nimport {\n    forwardRef,\n    useEffect,\n    useImperativeHandle,\n    useRef,\n    useState,\n} from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { TimeHelper } from \"../util/time-helper\";\nimport { TimeSlotBarHelper } from \"./helper\";\nimport {\n    ArrowButton,\n    ArrowIconLeft,\n    ArrowIconRight,\n    CellText,\n    Container,\n    getCellWidth,\n    TimeLabel,\n    TimeMarker,\n    TimeMarkerWrapper,\n    TimeSlot,\n    TimeSlotBarContainer,\n    TimeSlotBorder,\n    TimeSlotWrapper,\n} from \"./time-slot-bar.styles\";\nimport type {\n    Direction,\n    TimeSlotBarProps,\n    TimeSlotBarRef,\n    TimeSlotBarVariant,\n} from \"./types\";\n\nconst CELL_DURATION = 30; // In minutes\n\nconst Component = (props: TimeSlotBarProps, ref: React.Ref<TimeSlotBarRef>) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const {\n        \"data-testid\": testId,\n        className,\n        variant = \"default\",\n        startTime,\n        endTime,\n        slots,\n        onSlotClick,\n        onClick,\n        styleAttributes,\n        initialScrollTime,\n        roundInitialScrollTime = true,\n    } = props;\n    const barRef = useRef<HTMLDivElement>(null);\n    const [scrollPosition, setScrollPosition] = useState<number>(0);\n    const [clientWidth, setClientWidth] = useState<number>(0);\n    const cellWidth = getCellWidth(variant);\n\n    const adjustedStartTime = TimeSlotBarHelper.adjustTimeForMarker(\n        startTime,\n        \"start\"\n    );\n    const adjustedEndTime = TimeSlotBarHelper.adjustTimeForMarker(\n        endTime,\n        \"end\"\n    );\n\n    const SCROLL_INCREMENT = cellWidth * 2.5; // In px. Each scroll increment corresponds to 75mins\n\n    // Expose imperative handle\n    useImperativeHandle(ref, () => ({\n        resetScroll,\n    }));\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n\n    useEffect(() => {\n        const container = barRef.current;\n        if (container) {\n            container.addEventListener(\"scroll\", handleScroll);\n            // Initialize clientWidth on mount\n            setClientWidth(container.clientWidth);\n        }\n\n        return () => {\n            if (container) {\n                container.removeEventListener(\"scroll\", handleScroll);\n            }\n        };\n    }, []);\n\n    // Initial scroll on mount and when dependencies change\n    useEffect(() => {\n        resetScroll();\n    }, [initialScrollTime, cellWidth, startTime, endTime]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n\n    const handleScroll = () => {\n        if (barRef.current) {\n            setScrollPosition(barRef.current.scrollLeft);\n        }\n    };\n\n    const handleArrowButtonClick = (direction: Direction) => {\n        if (barRef.current) {\n            barRef.current.scrollBy({\n                left:\n                    direction === \"left\" ? -SCROLL_INCREMENT : SCROLL_INCREMENT,\n                behavior: \"smooth\",\n            });\n        }\n    };\n\n    const handleResize = () => {\n        if (barRef.current) {\n            setClientWidth(barRef.current.clientWidth);\n        }\n    };\n\n    useResizeDetector({\n        onResize: handleResize,\n        targetRef: barRef,\n        refreshMode: \"debounce\",\n        refreshRate: 50,\n    });\n\n    // ===========================================================================\n    // HELPER FUNCTIONS\n    // ===========================================================================\n    /**\n     * NOTE: Special condition\n     * Show ellipsis only if the slotWidth is smaller or equal to\n     * 15min interval\n     */\n    const showFullEllipsis = (slotWidth: number) => {\n        return slotWidth <= cellWidth / 2;\n    };\n\n    const getDataTestId = (subStr: string) => {\n        if (!testId) return undefined;\n        return `${testId}-${subStr}`;\n    };\n\n    /**\n     * Function to determine if a long time marker should be displayed\n     * For minified variant the long time marker is displayed every alternate hour\n     */\n    const shouldDisplayLongTimeMarker = (\n        currentTime: Dayjs,\n        isStartHourEven: boolean, // To determine if the first hour is even or odd for minified\n        variant: TimeSlotBarVariant\n    ) => {\n        const isHour = currentTime.minute() === 0;\n\n        if (variant === \"default\") {\n            return isHour;\n        }\n\n        const isAlternateHour =\n            isHour &&\n            (isStartHourEven\n                ? currentTime.hour() % 2 === 0\n                : currentTime.hour() % 2 === 1);\n\n        return isAlternateHour;\n    };\n\n    // Function to reset scroll to initialScrollTime\n    const resetScroll = () => {\n        if (initialScrollTime && barRef.current && cellWidth > 0) {\n            const scrollPosition = TimeHelper.calculateScrollPosition({\n                scrollTime: initialScrollTime,\n                minTime: adjustedStartTime,\n                maxTime: adjustedEndTime,\n                interval: CELL_DURATION,\n                intervalWidth: cellWidth,\n                options: {\n                    roundToInterval: roundInitialScrollTime,\n                },\n            });\n\n            if (scrollPosition !== null) {\n                barRef.current.scrollLeft = scrollPosition;\n            }\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n\n    // Render time markers\n    const renderTimeMarkers = () => {\n        const timeMarkers = [];\n        const startTimeFormatted = dayjs(adjustedStartTime, \"HH:mm\");\n        const endTimeFormatted = dayjs(adjustedEndTime, \"HH:mm\");\n\n        const isStartHourEven = startTimeFormatted.hour() % 2 === 0;\n\n        for (\n            let currentTime = startTimeFormatted;\n            currentTime.isBefore(endTimeFormatted);\n            currentTime = currentTime.add(CELL_DURATION, \"minute\")\n        ) {\n            const displayLongTimeMarker = shouldDisplayLongTimeMarker(\n                currentTime,\n                isStartHourEven,\n                variant\n            );\n\n            timeMarkers.push(\n                <TimeMarker\n                    data-testid={`${currentTime.format(\"HH:mm\")}-marker`}\n                    key={currentTime.format(\"HH:mm\")}\n                    $isLongMarker={displayLongTimeMarker}\n                    $variant={variant}\n                >\n                    {displayLongTimeMarker && (\n                        <TimeLabel weight=\"semibold\">\n                            {TimeSlotBarHelper.formatHourlyDisplay(\n                                currentTime.format(\"HH:mm\")\n                            )}\n                        </TimeLabel>\n                    )}\n                </TimeMarker>\n            );\n        }\n        return timeMarkers;\n    };\n\n    // Render default time slot (aka background)\n    const renderDefaultTimeSlots = () => {\n        if (!styleAttributes) return;\n\n        const {\n            backgroundColor,\n            backgroundColor2,\n            styleType = \"default\",\n        } = styleAttributes;\n\n        const slotWidth = TimeSlotBarHelper.calculateWidth(\n            adjustedStartTime,\n            adjustedEndTime,\n            cellWidth\n        );\n\n        const isClickable = !!onClick && variant === \"default\";\n\n        return (\n            <>\n                <TimeSlotBorder $variant={variant} />\n                <TimeSlot\n                    key={\"default-timeslot\"}\n                    data-testid={getDataTestId(\"default-timeslot\")}\n                    $width={slotWidth}\n                    $variant={variant}\n                    $left={0}\n                    $styleType={styleType}\n                    $bgColor={backgroundColor}\n                    $bgColor2={backgroundColor2}\n                    $clickable={isClickable}\n                    onClick={isClickable ? onClick : undefined}\n                />\n            </>\n        );\n    };\n\n    // Render time slots\n    const renderTimeSlots = () => {\n        return slots.map((slot) => {\n            const {\n                id,\n                startTime: slotStartTime,\n                endTime: slotEndTime,\n                label,\n                clickable = true,\n                styleAttributes,\n            } = slot;\n\n            const {\n                color,\n                styleType = \"default\",\n                backgroundColor,\n                backgroundColor2,\n            } = styleAttributes;\n\n            const slotWidth = TimeSlotBarHelper.calculateWidth(\n                slotStartTime,\n                slotEndTime,\n                cellWidth\n            );\n            const slotOffset = TimeSlotBarHelper.calculateWidth(\n                adjustedStartTime,\n                slotStartTime,\n                cellWidth\n            );\n\n            const isClickable = clickable && variant === \"default\";\n\n            return (\n                <div key={id}>\n                    <TimeSlotBorder\n                        $variant={variant}\n                        style={{\n                            left: `${slotOffset}px`,\n                        }}\n                    />\n                    <TimeSlot\n                        data-testid={getDataTestId(`${id}-timeslot`)}\n                        $width={slotWidth}\n                        $left={slotOffset}\n                        $styleType={styleType}\n                        $variant={variant}\n                        $bgColor={backgroundColor}\n                        $bgColor2={backgroundColor2}\n                        $clickable={isClickable}\n                        onClick={() => isClickable && onSlotClick(slot)}\n                    >\n                        {label && variant === \"default\" && (\n                            <CellText\n                                $slotWidth={slotWidth}\n                                $color={color}\n                                weight={\"semibold\"}\n                            >\n                                {showFullEllipsis(slotWidth) ? \"...\" : label}\n                            </CellText>\n                        )}\n                    </TimeSlot>\n                    {endTime !== slotEndTime && (\n                        <TimeSlotBorder\n                            $variant={variant}\n                            style={{\n                                left: `${slotOffset + slotWidth}px`,\n                            }}\n                        />\n                    )}\n                </div>\n            );\n        });\n    };\n\n    const renderArrowButtonLeft = () => {\n        return (\n            <>\n                {/* Show the left ArrowButton when the scroll position is greater than 0 */}\n                {scrollPosition > 0 && (\n                    <ArrowButton\n                        data-testid={getDataTestId(\"arrow-left\")}\n                        $direction={\"left\"}\n                        $variant={variant}\n                        focusHighlight={false}\n                        focusOutline=\"none\"\n                        onClick={() => {\n                            handleArrowButtonClick(\"left\");\n                        }}\n                    >\n                        <ArrowIconLeft />\n                    </ArrowButton>\n                )}\n            </>\n        );\n    };\n\n    const renderArrowButtonRight = () => {\n        // Show the right ArrowButton when the scroll position is less than the maximum possible scroll value\n        if (\n            scrollPosition + clientWidth <\n            TimeSlotBarHelper.calculateWidth(\n                adjustedStartTime,\n                adjustedEndTime,\n                cellWidth\n            )\n        ) {\n            return (\n                <ArrowButton\n                    data-testid={getDataTestId(\"arrow-right\")}\n                    $direction={\"right\"}\n                    $variant={variant}\n                    focusHighlight={false}\n                    focusOutline=\"none\"\n                    onClick={() => {\n                        handleArrowButtonClick(\"right\");\n                    }}\n                >\n                    <ArrowIconRight />\n                </ArrowButton>\n            );\n        }\n\n        return <></>;\n    };\n\n    return (\n        <Container className={className}>\n            <TimeSlotBarContainer\n                data-testid={testId}\n                ref={barRef}\n                $variant={variant}\n            >\n                <TimeMarkerWrapper\n                    data-testid={getDataTestId(\"time-marker-wrapper\")}\n                    data-id=\"marker-wrapper\"\n                >\n                    {renderTimeMarkers()}\n                </TimeMarkerWrapper>\n                <TimeSlotWrapper\n                    data-testid={getDataTestId(\"time-slot-wrapper\")}\n                    data-id=\"slot-wrapper\"\n                >\n                    {renderDefaultTimeSlots()}\n                    {renderTimeSlots()}\n                </TimeSlotWrapper>\n            </TimeSlotBarContainer>\n            {renderArrowButtonLeft()}\n            {renderArrowButtonRight()}\n        </Container>\n    );\n};\n\nexport const TimeSlotBar = forwardRef<TimeSlotBarRef, TimeSlotBarProps>(\n    Component\n);\n"],"names":["TimeSlotBar","forwardRef","props","ref","testId","className","variant","startTime","endTime","slots","onSlotClick","onClick","styleAttributes","initialScrollTime","roundInitialScrollTime","barRef","useRef","scrollPosition","setScrollPosition","useState","clientWidth","setClientWidth","cellWidth","getCellWidth","adjustedStartTime","TimeSlotBarHelper","adjustTimeForMarker","adjustedEndTime","SCROLL_INCREMENT","useImperativeHandle","resetScroll","useEffect","container","current","addEventListener","handleScroll","removeEventListener","scrollLeft","handleArrowButtonClick","direction","scrollBy","left","behavior","useResizeDetector","onResize","targetRef","refreshMode","refreshRate","showFullEllipsis","slotWidth","getDataTestId","subStr","shouldDisplayLongTimeMarker","currentTime","isStartHourEven","isHour","minute","hour","TimeHelper","calculateScrollPosition","scrollTime","minTime","maxTime","interval","intervalWidth","options","roundToInterval","_jsxs","Container","children","TimeSlotBarContainer","$variant","_jsx","TimeMarkerWrapper","timeMarkers","startTimeFormatted","dayjs","endTimeFormatted","isBefore","add","displayLongTimeMarker","push","TimeMarker","format","$isLongMarker","TimeLabel","weight","formatHourlyDisplay","renderTimeMarkers","TimeSlotWrapper","backgroundColor","backgroundColor2","styleType","calculateWidth","isClickable","TimeSlotBorder","TimeSlot","$width","$left","$styleType","$bgColor2","$clickable","undefined","renderDefaultTimeSlots","map","slot","id","slotStartTime","slotEndTime","label","clickable","color","slotOffset","style","$bgColor","CellText","$slotWidth","_Fragment","ArrowButton","$direction","focusHighlight","focusOutline","ArrowIconLeft","ArrowIconRight"],"mappings":"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"}
+{"version":3,"file":"time-slot-bar.js","sources":["../../../src/time-slot-bar/time-slot-bar.tsx"],"sourcesContent":["import { ChevronLeftIcon } from \"@lifesg/react-icons/chevron-left\";\nimport { ChevronRightIcon } from \"@lifesg/react-icons/chevron-right\";\nimport clsx from \"clsx\";\nimport dayjs, { type Dayjs } from \"dayjs\";\nimport {\n    forwardRef,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n} from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { VisuallyHidden } from \"../shared/accessibility\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { TimeSlot } from \"../shared/time-slot\";\nimport { Typography } from \"../typography\";\nimport { TimeHelper } from \"../util/time-helper\";\nimport { getCellWidth, TimeSlotBarHelper } from \"./helper\";\nimport type { Direction } from \"./internal-types\";\nimport * as styles from \"./time-slot-bar.styles\";\nimport TimeSlotDivider from \"./time-slot-divider\";\nimport TimeSlotItem from \"./time-slot-item\";\nimport type {\n    TimeSlot as TTimeSlot,\n    TimeSlotBarProps,\n    TimeSlotBarRef,\n    TimeSlotBarVariant,\n} from \"./types\";\n\nconst CELL_DURATION = 30; // In minutes\n\nconst Component = (props: TimeSlotBarProps, ref: React.Ref<TimeSlotBarRef>) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const {\n        \"data-testid\": testId,\n        className,\n        variant = \"default\",\n        startTime,\n        endTime,\n        slots,\n        onSlotClick,\n        onClick,\n        styleAttributes,\n        initialScrollTime,\n        roundInitialScrollTime = true,\n    } = props;\n    const barRef = useRef<HTMLDivElement>(null);\n    const [scrollPosition, setScrollPosition] = useState<number>(0);\n    const [clientWidth, setClientWidth] = useState<number>(0);\n    const cellWidth = getCellWidth(variant);\n\n    const adjustedStartTime = TimeSlotBarHelper.adjustTimeForMarker(\n        startTime,\n        \"start\"\n    );\n    const adjustedEndTime = TimeSlotBarHelper.adjustTimeForMarker(\n        endTime,\n        \"end\"\n    );\n\n    const SCROLL_INCREMENT = cellWidth * 2.5; // In px. Each scroll increment corresponds to 75mins\n\n    // Expose imperative handle\n    useImperativeHandle(ref, () => ({\n        resetScroll,\n    }));\n\n    const { summary: slotsSummary, computedSlots: allSlots } = useMemo(() => {\n        return TimeSlotBarHelper.processSlots(\n            { start: adjustedStartTime, end: adjustedEndTime },\n            slots,\n            variant\n        );\n    }, [adjustedStartTime, adjustedEndTime, slots, variant]);\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n\n    useEffect(() => {\n        const container = barRef.current;\n        if (container) {\n            container.addEventListener(\"scroll\", handleScroll);\n            // Initialize clientWidth on mount\n            setClientWidth(container.clientWidth);\n        }\n\n        return () => {\n            if (container) {\n                container.removeEventListener(\"scroll\", handleScroll);\n            }\n        };\n    }, []);\n\n    // Initial scroll on mount and when dependencies change\n    useEffect(() => {\n        resetScroll();\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [initialScrollTime, cellWidth, startTime, endTime]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n\n    const handleScroll = () => {\n        if (barRef.current) {\n            setScrollPosition(barRef.current.scrollLeft);\n        }\n    };\n\n    const handleArrowButtonClick = (direction: Direction) => {\n        if (barRef.current) {\n            barRef.current.scrollBy({\n                left:\n                    direction === \"left\" ? -SCROLL_INCREMENT : SCROLL_INCREMENT,\n                behavior: \"smooth\",\n            });\n        }\n    };\n\n    const handleResize = () => {\n        if (barRef.current) {\n            setClientWidth(barRef.current.clientWidth);\n        }\n    };\n\n    useResizeDetector({\n        onResize: handleResize,\n        targetRef: barRef,\n        refreshMode: \"debounce\",\n        refreshRate: 50,\n    });\n\n    // ===========================================================================\n    // HELPER FUNCTIONS\n    // ===========================================================================\n    /**\n     * NOTE: Special condition\n     * Show ellipsis only if the slotWidth is smaller or equal to\n     * 15min interval\n     */\n    const showFullEllipsis = (slotWidth: number) => {\n        return slotWidth <= cellWidth / 2;\n    };\n\n    const getDataTestId = (subStr: string) => {\n        if (!testId) return undefined;\n        return `${testId}-${subStr}`;\n    };\n\n    /**\n     * Function to determine if a long time marker should be displayed\n     * For minified variant the long time marker is displayed every alternate hour\n     */\n    const shouldDisplayLongTimeMarker = (\n        currentTime: Dayjs,\n        isStartHourEven: boolean, // To determine if the first hour is even or odd for minified\n        variant: TimeSlotBarVariant\n    ) => {\n        const isHour = currentTime.minute() === 0;\n\n        if (variant === \"default\") {\n            return isHour;\n        }\n\n        const isAlternateHour =\n            isHour &&\n            (isStartHourEven\n                ? currentTime.hour() % 2 === 0\n                : currentTime.hour() % 2 === 1);\n\n        return isAlternateHour;\n    };\n\n    // Function to reset scroll to initialScrollTime\n    const resetScroll = () => {\n        if (initialScrollTime && barRef.current && cellWidth > 0) {\n            const scrollPosition = TimeHelper.calculateScrollPosition({\n                scrollTime: initialScrollTime,\n                minTime: adjustedStartTime,\n                maxTime: adjustedEndTime,\n                interval: CELL_DURATION,\n                intervalWidth: cellWidth,\n                options: {\n                    roundToInterval: roundInitialScrollTime,\n                },\n            });\n\n            if (scrollPosition !== null) {\n                barRef.current.scrollLeft = scrollPosition;\n            }\n        }\n    };\n\n    const isVariant = (v: TimeSlotBarVariant) => {\n        if (variant === v) return true;\n        return false;\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n\n    // Render time markers\n    const renderTimeMarkers = () => {\n        const timeMarkers = [];\n        const startTimeFormatted = dayjs(adjustedStartTime, \"HH:mm\");\n        const endTimeFormatted = dayjs(adjustedEndTime, \"HH:mm\");\n\n        const isStartHourEven = startTimeFormatted.hour() % 2 === 0;\n\n        for (\n            let currentTime = startTimeFormatted;\n            currentTime.isBefore(endTimeFormatted);\n            currentTime = currentTime.add(CELL_DURATION, \"minute\")\n        ) {\n            const displayLongTimeMarker = shouldDisplayLongTimeMarker(\n                currentTime,\n                isStartHourEven,\n                variant\n            );\n\n            timeMarkers.push(\n                <div\n                    data-testid={`${currentTime.format(\"HH:mm\")}-marker`}\n                    key={currentTime.format(\"HH:mm\")}\n                    className={clsx(\n                        styles.timeMarker,\n                        variant === \"default\"\n                            ? styles.timeMarkerDefault\n                            : styles.timeMarkerMinified,\n                        displayLongTimeMarker && styles.timeMarkerLong\n                    )}\n                >\n                    {displayLongTimeMarker && (\n                        <Typography.BodyXS\n                            className={styles.timeLabel}\n                            weight=\"semibold\"\n                        >\n                            {TimeSlotBarHelper.formatHourlyDisplay(\n                                currentTime.format(\"HH:mm\")\n                            )}\n                        </Typography.BodyXS>\n                    )}\n                </div>\n            );\n        }\n        return timeMarkers;\n    };\n\n    // Render default time slot (aka background)\n    const renderDefaultTimeSlots = () => {\n        if (!styleAttributes) return;\n\n        const {\n            backgroundColor,\n            backgroundColor2,\n            hoverBackgroundColor,\n            hoverBackgroundColor2,\n            styleType = \"default\",\n        } = styleAttributes;\n\n        const slotWidth = TimeSlotBarHelper.calculateWidth(\n            adjustedStartTime,\n            adjustedEndTime,\n            cellWidth\n        );\n\n        const isClickable = !!onClick && isVariant(\"default\");\n\n        return (\n            <>\n                <TimeSlotDivider variant={variant} />\n                <TimeSlotItem\n                    key={\"default-timeslot\"}\n                    variant={variant}\n                    dataTestId={getDataTestId(\"default-timeslot\")}\n                    slotWidth={slotWidth}\n                    slotOffset={0}\n                    onClick={isClickable ? onClick : undefined}\n                >\n                    <TimeSlot\n                        className={styles.timeSlotItemContent}\n                        styleType={styleType}\n                        bgColor={backgroundColor}\n                        bgColor2={backgroundColor2}\n                        hoverBgColor={hoverBackgroundColor}\n                        hoverBgColor2={hoverBackgroundColor2}\n                        clickable={isClickable}\n                    />\n                </TimeSlotItem>\n            </>\n        );\n    };\n\n    // Render time slots\n    const renderTimeSlots = () => {\n        return allSlots.map((slot) => {\n            const {\n                id,\n                startTime: slotStartTime,\n                endTime: slotEndTime,\n                label,\n                clickable = true,\n                styleAttributes,\n                ariaLabel,\n            } = slot;\n\n            const {\n                color,\n                styleType = \"default\",\n                backgroundColor,\n                backgroundColor2,\n                hoverBackgroundColor,\n                hoverBackgroundColor2,\n            } = styleAttributes;\n\n            const slotWidth = TimeSlotBarHelper.calculateWidth(\n                slotStartTime,\n                slotEndTime,\n                cellWidth\n            );\n            const slotOffset = TimeSlotBarHelper.calculateWidth(\n                adjustedStartTime,\n                slotStartTime,\n                cellWidth\n            );\n\n            const isClickable = clickable && variant === \"default\";\n            const showLabel = isVariant(\"default\") && label;\n\n            const handleSlotClick =\n                (clickedSlot: TTimeSlot & { ariaLabel?: string }) =>\n                (evt: React.MouseEvent<HTMLElement>) => {\n                    evt.stopPropagation();\n\n                    const { ariaLabel: _, ...slot } = clickedSlot;\n                    if (isClickable) onSlotClick(slot);\n                };\n\n            return (\n                <div key={id} role=\"gridcell\">\n                    <TimeSlotDivider\n                        variant={variant}\n                        left={slotOffset}\n                        dataTestId=\"start-border\"\n                    />\n                    <TimeSlotItem\n                        variant={variant}\n                        dataTestId={getDataTestId(`${id}-timeslot`)}\n                        slotWidth={slotWidth}\n                        slotOffset={slotOffset}\n                        color={color}\n                        onClick={handleSlotClick(slot)}\n                    >\n                        <TimeSlot\n                            className={styles.timeSlotItemContent}\n                            styleType={styleType}\n                            bgColor={backgroundColor}\n                            bgColor2={backgroundColor2}\n                            hoverBgColor={hoverBackgroundColor}\n                            hoverBgColor2={hoverBackgroundColor2}\n                            clickable={isClickable}\n                        >\n                            {!!ariaLabel && (\n                                <VisuallyHidden>\n                                    <button\n                                        type=\"button\" // overrides default type=\"submit\" when used with <form>\n                                        aria-disabled={!isClickable}\n                                        aria-label={ariaLabel}\n                                        onClick={handleSlotClick(slot)} // use `button` element native keyboard activation handling\n                                    />\n                                </VisuallyHidden>\n                            )}\n\n                            {showLabel && (\n                                <Typography.BodyXS\n                                    className={styles.cellText}\n                                    weight={\"semibold\"}\n                                    aria-hidden={!ariaLabel}\n                                >\n                                    {showFullEllipsis(slotWidth)\n                                        ? \"...\"\n                                        : label}\n                                </Typography.BodyXS>\n                            )}\n                        </TimeSlot>\n                    </TimeSlotItem>\n                    {endTime !== slotEndTime && (\n                        <TimeSlotDivider\n                            variant={variant}\n                            dataTestId=\"end-border\"\n                            left={slotOffset + slotWidth}\n                        />\n                    )}\n                </div>\n            );\n        });\n    };\n\n    const renderArrowButton = (direction: Direction) => {\n        const isLeft = direction === \"left\";\n        const totalScrollableWidth = TimeSlotBarHelper.calculateWidth(\n            adjustedStartTime,\n            adjustedEndTime,\n            cellWidth\n        );\n        const hasContentOnLeft = scrollPosition > 0;\n        const hasContentOnRight =\n            scrollPosition + clientWidth < totalScrollableWidth;\n        const shouldShowArrow = isLeft ? hasContentOnLeft : hasContentOnRight;\n\n        if (!shouldShowArrow) return null;\n\n        const directionClass = isLeft\n            ? styles.arrowButtonLeft\n            : styles.arrowButtonRight;\n        const variantClass =\n            variant === \"default\"\n                ? styles.arrowButtonDefault\n                : styles.arrowButtonMinified;\n        const arrowIcon = isLeft ? (\n            <ChevronLeftIcon className={styles.arrowIcon} />\n        ) : (\n            <ChevronRightIcon className={styles.arrowIcon} />\n        );\n\n        return (\n            <ClickableIcon\n                data-testid={getDataTestId(`arrow-${direction}`)}\n                aria-hidden\n                tabIndex={-1}\n                className={clsx(\n                    styles.arrowButton,\n                    directionClass,\n                    variantClass\n                )}\n                focusHighlight={false}\n                focusOutline=\"none\"\n                onClick={() => {\n                    handleArrowButtonClick(direction);\n                }}\n            >\n                {arrowIcon}\n            </ClickableIcon>\n        );\n    };\n\n    return (\n        <div className={clsx(styles.container, className)}>\n            <div\n                data-testid={testId}\n                ref={barRef}\n                className={clsx(\n                    styles.timeSlotBarContainer,\n                    variant === \"default\"\n                        ? styles.containerDefault\n                        : styles.containerMinified\n                )}\n            >\n                <div\n                    className={styles.timeMarkerWrapper}\n                    data-testid={getDataTestId(\"time-marker-wrapper\")}\n                    data-id=\"marker-wrapper\"\n                >\n                    {renderTimeMarkers()}\n                </div>\n                <div role=\"grid\" aria-label={slotsSummary} tabIndex={0}>\n                    <div\n                        className={styles.timeSlotWrapper}\n                        data-testid={getDataTestId(\"time-slot-wrapper\")}\n                        data-id=\"slot-wrapper\"\n                        role=\"row\"\n                    >\n                        {renderDefaultTimeSlots()}\n                        {renderTimeSlots()}\n                    </div>\n                </div>\n            </div>\n            {renderArrowButton(\"left\")}\n            {renderArrowButton(\"right\")}\n        </div>\n    );\n};\n\n// @catalog\n/**\n * A horizontally scrollable timeline bar that visualises time slots across a\n * defined time range.\n *\n * Use `TimeSlotBar` to display availability, bookings, or schedule occupancy\n * as coloured cells on a shared time axis.\n * @keywords availability, booking, occupancy, reservation, schedule\n */\nexport const TimeSlotBar = forwardRef<TimeSlotBarRef, TimeSlotBarProps>(\n    Component\n);\n"],"names":["TimeSlotBar","forwardRef","props","ref","testId","className","variant","startTime","endTime","slots","onSlotClick","onClick","styleAttributes","initialScrollTime","roundInitialScrollTime","barRef","useRef","scrollPosition","setScrollPosition","useState","clientWidth","setClientWidth","cellWidth","getCellWidth","adjustedStartTime","TimeSlotBarHelper","adjustTimeForMarker","adjustedEndTime","SCROLL_INCREMENT","useImperativeHandle","resetScroll","summary","slotsSummary","computedSlots","allSlots","useMemo","processSlots","start","end","useEffect","container","current","addEventListener","handleScroll","removeEventListener","scrollLeft","useResizeDetector","onResize","targetRef","refreshMode","refreshRate","showFullEllipsis","slotWidth","getDataTestId","subStr","shouldDisplayLongTimeMarker","currentTime","isStartHourEven","isHour","minute","hour","TimeHelper","calculateScrollPosition","scrollTime","minTime","maxTime","interval","intervalWidth","options","roundToInterval","isVariant","v","renderArrowButton","direction","isLeft","totalScrollableWidth","calculateWidth","directionClass","styles.arrowButtonLeft","styles.arrowButtonRight","variantClass","styles.arrowButtonDefault","styles.arrowButtonMinified","arrowIcon","_jsx","ChevronLeftIcon","styles.arrowIcon","ChevronRightIcon","ClickableIcon","tabIndex","clsx","styles.arrowButton","focusHighlight","focusOutline","scrollBy","left","behavior","handleArrowButtonClick","children","_jsxs","styles.container","styles.timeSlotBarContainer","styles.containerDefault","styles.containerMinified","styles.timeMarkerWrapper","timeMarkers","startTimeFormatted","dayjs","endTimeFormatted","isBefore","add","displayLongTimeMarker","push","format","styles.timeMarker","styles.timeMarkerDefault","styles.timeMarkerMinified","styles.timeMarkerLong","Typography","BodyXS","styles.timeLabel","weight","formatHourlyDisplay","renderTimeMarkers","role","styles.timeSlotWrapper","backgroundColor","backgroundColor2","hoverBackgroundColor","hoverBackgroundColor2","styleType","isClickable","_Fragment","TimeSlotDivider","TimeSlotItem","dataTestId","slotOffset","undefined","TimeSlot","styles.timeSlotItemContent","bgColor","bgColor2","hoverBgColor","hoverBgColor2","clickable","renderDefaultTimeSlots","map","slot","id","slotStartTime","slotEndTime","label","ariaLabel","color","showLabel","handleSlotClick","clickedSlot","evt","stopPropagation","_","__rest","VisuallyHidden","type","styles.cellText"],"mappings":"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"}

package/cjs/time-slot-bar/time-slot-bar.styles.js

@@ -1,108 +1,2 @@
-"use strict";var e=require("@lifesg/react-icons/chevron-left"),r=require("@lifesg/react-icons/chevron-right"),o=require("styled-components"),t=require("../shared/clickable-icon/clickable-icon.js"),i=require("../typography/index.js"),l=require("../v3_theme/index.js");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s=a(o);const n=1.25,d=e=>"minified"===e?12:40,p=e=>"minified"===e?12:40,c=s.default.div`
-    position: relative;
-    display: flex;
-    align-items: center;
-`,g=s.default(t.ClickableIcon)`
-    z-index: 2;
-    position: absolute;
-    bottom: ${({$variant:e})=>"default"===e?"0.25rem":"0rem"};
-    background-color: ${l.V3_Colour.bg};
-    box-shadow: ${l.V3_Shadow["md-strong"]};
-    border-radius: 100%;
-    padding: 0.5rem;
-    width: 2rem;
-    height: 2rem;
-
-    ${e=>"right"===e.$direction?o.css`
-                  right: 0;
-              `:o.css`
-                  left: 0;
-              `}
-
-    > div {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
-
-    &:focus {
-        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-    }
-`,$=s.default(r.ChevronRightIcon)`
-    width: 1rem;
-    height: 1rem;
-    color: ${l.V3_Colour["icon-primary"]};
-`,u=s.default(e.ChevronLeftIcon)`
-    font-size: 1rem;
-    color: ${l.V3_Colour["icon-primary"]};
-`,h=s.default.div`
-    overflow: hidden;
-    flex-grow: 1;
-    position: relative;
-    height: ${({$variant:e})=>`${20+p(e)}px`};
-`,f=s.default.div`
-    position: relative;
-    white-space: nowrap;
-    height: ${n}rem;
-`,x=s.default.div`
-    display: flex;
-    white-space: nowrap;
-`,b=s.default.div`
-    display: inline-block;
-    width: ${({$variant:e})=>`${d(e)}px`};
-    position: relative;
-    border-left: ${l.V3_Border["width-010"]} ${l.V3_Border.solid}
-        ${l.V3_Colour["border-stronger"]};
-    ${e=>{let r=0;switch(e.$variant){case"default":r=e.$isLongMarker?n:.625;break;case"minified":r=e.$isLongMarker?n:0;break;default:r=0}return o.css`
-            height: ${r}rem;
-        `}}
-`,m=s.default(i.Typography.BodyXS)`
-    color: ${l.V3_Colour["text-subtle"]};
-    position: absolute;
-    bottom: 10%;
-    left: 10%;
-`,v=s.default.div`
-    ${e=>"vertical"===e.$type?o.css`
-                display: flex;
-                flex-grow: 1;
-                align-items: center;
-                justify-content: center;
-                width: 100%;
-                margin: 1px 0px;
-            `:o.css`
-                position: absolute;
-                height: ${p(e.$variant)}px;
-                width: ${e.$width}px;
-                left: ${e.$left}px;
-            `}
-    background-color: ${({$bgColor:e})=>e};
-    cursor: ${({$clickable:e})=>e?"pointer":"default"};
-
-    ${e=>"stripes"===e.$styleType&&o.css`
-            background: repeating-linear-gradient(
-                135deg,
-                ${e.$bgColor2||l.V3_Colour["bg-strongest"]} 0px,
-                ${e.$bgColor2||l.V3_Colour["bg-strongest"]} 10px,
-                ${e.$bgColor||l.V3_Colour["bg-stronger"]} 10px,
-                ${e.$bgColor||l.V3_Colour["bg-stronger"]} 20px
-            );
-        `}
-`,w=s.default.div`
-    position: absolute;
-    top: ${n}rem;
-    height: ${({$variant:e})=>`${p(e)}px`};
-    z-index: 1;
-    border-right: ${l.V3_Border["width-010"]} ${l.V3_Border.solid}
-        ${l.V3_Colour["border-stronger"]};
-`,C=s.default(i.Typography.BodyXS)`
-    color: ${e=>e.$color||l.V3_Colour.text(e)};
-    position: absolute;
-    bottom: 0;
-    padding-left: 4px;
-    padding-bottom: 4px;
-    width: 100%;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-`;exports.ArrowButton=g,exports.ArrowIconLeft=u,exports.ArrowIconRight=$,exports.CellText=C,exports.Container=c,exports.TimeLabel=m,exports.TimeMarker=b,exports.TimeMarkerWrapper=f,exports.TimeSlot=v,exports.TimeSlotBarContainer=h,exports.TimeSlotBorder=w,exports.TimeSlotWrapper=x,exports.getCellHeight=p,exports.getCellWidth=d;
+"use strict";require("./time-slot-bar.styles_wigbyd.css");exports.DEFAULT_CELL_SIZE=40,exports.MINIFIED_CELL_SIZE=12,exports.arrowButton="a18tsztd",exports.arrowButtonDefault="a9mraed",exports.arrowButtonLeft="av3ykv8",exports.arrowButtonMinified="aljok3x",exports.arrowButtonRight="as5dred",exports.arrowIcon="a195ar7o",exports.cellText="c1yanpy9",exports.container="cleto2",exports.containerDefault="c1w55l7b",exports.containerMinified="cqcczbk",exports.timeLabel="te99x8g",exports.timeMarker="t1iag8mt",exports.timeMarkerDefault="t1iopuc",exports.timeMarkerLong="t7d7vtm",exports.timeMarkerMinified="tbp961o",exports.timeMarkerWrapper="t10z816e",exports.timeSlotBarContainer="t1dmizys",exports.timeSlotBorder="t1e383ch",exports.timeSlotBorderDefault="tyac3mh",exports.timeSlotBorderMinified="twiecck",exports.timeSlotItem="tfycdxa",exports.timeSlotItemContent="t11y98ca",exports.timeSlotItemDefault="t1kzvg2s",exports.timeSlotItemMinified="t4axcvt",exports.timeSlotWrapper="t1ukhl9h",exports.tokens={item:{width:"--fds-internal-timeSlotBar-item-width",left:"--fds-internal-timeSlotBar-item-left",color:"--fds-internal-timeSlotBar-item-color"},border:{left:"--fds-internal-timeSlotBar-border-left"}};
 //# sourceMappingURL=time-slot-bar.styles.js.map

package/cjs/time-slot-bar/time-slot-bar.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"time-slot-bar.styles.js","sources":["../../../src/time-slot-bar/time-slot-bar.styles.tsx"],"sourcesContent":["import { ChevronLeftIcon } from \"@lifesg/react-icons/chevron-left\";\nimport { ChevronRightIcon } from \"@lifesg/react-icons/chevron-right\";\nimport styled, { css } from \"styled-components\";\n\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { Typography } from \"../typography\";\nimport { V3_Border, V3_Colour, V3_Shadow } from \"../v3_theme\";\nimport type { V3_ThemeStyleProps } from \"../v3_theme/types\";\nimport type { Direction, SlotStyle, TimeSlotBarVariant } from \"./types\";\n\nconst MAX_LINE_HEIGHT = 1.25; // NOTE in rem\n\n// =============================================================================\n// STYLING HELPERS\n// =============================================================================\n\n// Function to get the width of a cell in px\nexport const getCellWidth = (variant: TimeSlotBarVariant) => {\n    if (variant === \"minified\") {\n        return 12;\n    } else {\n        return 40;\n    }\n};\n\n// Function to get the height of a cell in px\nexport const getCellHeight = (variant: TimeSlotBarVariant) => {\n    if (variant === \"minified\") {\n        return 12;\n    } else {\n        return 40;\n    }\n};\n\n// =============================================================================\n// STYLE INTERFACE, transient props are denoted with $\n// See more https://styled-components.com/docs/api#transient-props\n// =============================================================================\n\ninterface ArrowStyleProps {\n    $direction?: Direction;\n    $variant: TimeSlotBarVariant;\n}\n\nexport interface TimeSlotStyleProps {\n    $type?: \"default\" | \"vertical\";\n    $variant: TimeSlotBarVariant;\n    $width?: number;\n    $left?: number;\n    $styleType: SlotStyle;\n    $bgColor: string | ((props: V3_ThemeStyleProps) => string);\n    $bgColor2?: string | ((props: V3_ThemeStyleProps) => string);\n    $clickable?: boolean;\n}\n\ninterface CellTextStyleProps {\n    $slotWidth: number;\n    $color?: string;\n}\n\ninterface TimeMarkerStyleProps {\n    $isLongMarker: boolean;\n    $variant: TimeSlotBarVariant;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const Container = styled.div`\n    position: relative;\n    display: flex;\n    align-items: center;\n`;\n\nexport const ArrowButton = styled(ClickableIcon)<ArrowStyleProps>`\n    z-index: 2;\n    position: absolute;\n    bottom: ${({ $variant }) => ($variant === \"default\" ? \"0.25rem\" : \"0rem\")};\n    background-color: ${V3_Colour.bg};\n    box-shadow: ${V3_Shadow[\"md-strong\"]};\n    border-radius: 100%;\n    padding: 0.5rem;\n    width: 2rem;\n    height: 2rem;\n\n    ${(props) =>\n        props.$direction === \"right\"\n            ? css`\n                  right: 0;\n              `\n            : css`\n                  left: 0;\n              `}\n\n    > div {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n    }\n\n    &:focus {\n        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n    }\n`;\n\nexport const ArrowIconRight = styled(ChevronRightIcon)`\n    width: 1rem;\n    height: 1rem;\n    color: ${V3_Colour[\"icon-primary\"]};\n`;\n\nexport const ArrowIconLeft = styled(ChevronLeftIcon)`\n    font-size: 1rem;\n    color: ${V3_Colour[\"icon-primary\"]};\n`;\n\nexport const TimeSlotBarContainer = styled.div<{\n    $variant: TimeSlotBarVariant;\n}>`\n    overflow: hidden;\n    flex-grow: 1;\n    position: relative;\n    height: ${({ $variant }) =>\n        `${MAX_LINE_HEIGHT * 16 + getCellHeight($variant)}px`};\n`;\n\nexport const TimeMarkerWrapper = styled.div`\n    position: relative;\n    white-space: nowrap;\n    height: ${MAX_LINE_HEIGHT}rem;\n`;\n\nexport const TimeSlotWrapper = styled.div`\n    display: flex;\n    white-space: nowrap;\n`;\n\nexport const TimeMarker = styled.div<TimeMarkerStyleProps>`\n    display: inline-block;\n    width: ${({ $variant }) => `${getCellWidth($variant)}px`};\n    position: relative;\n    border-left: ${V3_Border[\"width-010\"]} ${V3_Border.solid}\n        ${V3_Colour[\"border-stronger\"]};\n    ${(props) => {\n        let markerHeight = 0;\n\n        switch (props.$variant) {\n            case \"default\":\n                markerHeight = props.$isLongMarker ? MAX_LINE_HEIGHT : 0.625;\n                break;\n            case \"minified\":\n                markerHeight = props.$isLongMarker ? MAX_LINE_HEIGHT : 0;\n                break;\n            default:\n                markerHeight = 0;\n                break;\n        }\n\n        return css`\n            height: ${markerHeight}rem;\n        `;\n    }}\n`;\n\nexport const TimeLabel = styled(Typography.BodyXS)`\n    color: ${V3_Colour[\"text-subtle\"]};\n    position: absolute;\n    bottom: 10%;\n    left: 10%;\n`;\n\nexport const TimeSlot = styled.div<TimeSlotStyleProps>`\n    ${(props) => {\n        if (props.$type === \"vertical\") {\n            return css`\n                display: flex;\n                flex-grow: 1;\n                align-items: center;\n                justify-content: center;\n                width: 100%;\n                margin: 1px 0px;\n            `;\n        } else {\n            return css`\n                position: absolute;\n                height: ${getCellHeight(props.$variant)}px;\n                width: ${props.$width}px;\n                left: ${props.$left}px;\n            `;\n        }\n    }}\n    background-color: ${({ $bgColor }) => $bgColor};\n    cursor: ${({ $clickable }) => ($clickable ? \"pointer\" : \"default\")};\n\n    ${(props) =>\n        props.$styleType === \"stripes\" &&\n        css`\n            background: repeating-linear-gradient(\n                135deg,\n                ${props.$bgColor2 || V3_Colour[\"bg-strongest\"]} 0px,\n                ${props.$bgColor2 || V3_Colour[\"bg-strongest\"]} 10px,\n                ${props.$bgColor || V3_Colour[\"bg-stronger\"]} 10px,\n                ${props.$bgColor || V3_Colour[\"bg-stronger\"]} 20px\n            );\n        `}\n`;\n\nexport const TimeSlotBorder = styled.div<{ $variant: TimeSlotBarVariant }>`\n    position: absolute;\n    top: ${MAX_LINE_HEIGHT}rem;\n    height: ${({ $variant }) => `${getCellHeight($variant)}px`};\n    z-index: 1;\n    border-right: ${V3_Border[\"width-010\"]} ${V3_Border.solid}\n        ${V3_Colour[\"border-stronger\"]};\n`;\n\nexport const CellText = styled(Typography.BodyXS)<CellTextStyleProps>`\n    color: ${(props) => props.$color || V3_Colour.text(props)};\n    position: absolute;\n    bottom: 0;\n    padding-left: 4px;\n    padding-bottom: 4px;\n    width: 100%;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n`;\n"],"names":["MAX_LINE_HEIGHT","getCellWidth","variant","getCellHeight","Container","styled","div","ArrowButton","ClickableIcon","$variant","V3_Colour","bg","V3_Shadow","props","$direction","css","ArrowIconRight","ChevronRightIcon","ArrowIconLeft","ChevronLeftIcon","TimeSlotBarContainer","TimeMarkerWrapper","TimeSlotWrapper","TimeMarker","V3_Border","solid","markerHeight","$isLongMarker","TimeLabel","Typography","BodyXS","TimeSlot","$type","$width","$left","$bgColor","$clickable","$styleType","$bgColor2","TimeSlotBorder","CellText","$color","text"],"mappings":"8VAUA,MAAMA,EAAkB,KAOXC,EAAgBC,GACT,aAAZA,EACO,GAEA,GAKFC,EAAiBD,GACV,aAAZA,EACO,GAEA,GAsCFE,EAAYC,EAAAA,QAAOC,GAAG;;;;EAMtBC,EAAcF,EAAAA,QAAOG,EAAAA,cAA+B;;;cAGnD,EAAGC,cAA6B,YAAbA,EAAyB,UAAY;wBAC9CC,EAAAA,UAAUC;kBAChBC,EAAAA,UAAU;;;;;;MAMrBC,GACsB,UAArBA,EAAMC,WACAC,KAAG;;gBAGHA,KAAG;;;;;;;;;;;;;EAeJC,EAAiBX,EAAAA,QAAOY,EAAAA,iBAAiB;;;aAGzCP,EAAAA,UAAU;EAGVQ,EAAgBb,EAAAA,QAAOc,EAAAA,gBAAgB;;aAEvCT,EAAAA,UAAU;EAGVU,EAAuBf,EAAAA,QAAOC,GAEzC;;;;cAIY,EAAGG,cACT,GAAGT,GAAuBG,EAAcM;EAGnCY,EAAoBhB,EAAAA,QAAOC,GAAG;;;cAG7BN;EAGDsB,EAAkBjB,EAAAA,QAAOC,GAAG;;;EAK5BiB,EAAalB,EAAAA,QAAOC,GAAyB;;aAE7C,EAAGG,cAAe,GAAGR,EAAaQ;;mBAE5Be,EAAAA,UAAU,gBAAgBA,EAAAA,UAAUC;UAC7Cf,EAAAA,UAAU;MACbG,IACC,IAAIa,EAAe,EAEnB,OAAQb,EAAMJ,UACV,IAAK,UACDiB,EAAeb,EAAMc,cAAgB3B,EAAkB,KACvD,MACJ,IAAK,WACD0B,EAAeb,EAAMc,cAAgB3B,EAAkB,EACvD,MACJ,QACI0B,EAAe,EAIvB,OAAOX,KAAG;sBACIW;SACb;EAIIE,EAAYvB,EAAAA,QAAOwB,aAAWC,OAAO;aACrCpB,EAAAA,UAAU;;;;EAMVqB,EAAW1B,EAAAA,QAAOC,GAAuB;MAC/CO,GACqB,aAAhBA,EAAMmB,MACCjB,KAAG;;;;;;;cASHA,KAAG;;0BAEIZ,EAAcU,EAAMJ;yBACrBI,EAAMoB;wBACPpB,EAAMqB;;wBAIN,EAAGC,cAAeA;cAC5B,EAAGC,gBAAkBA,EAAa,UAAY;;MAErDvB,GACsB,YAArBA,EAAMwB,YACNtB,KAAG;;;kBAGOF,EAAMyB,WAAa5B,EAAAA,UAAU;kBAC7BG,EAAMyB,WAAa5B,EAAAA,UAAU;kBAC7BG,EAAMsB,UAAYzB,EAAAA,UAAU;kBAC5BG,EAAMsB,UAAYzB,EAAAA,UAAU;;;EAKjC6B,EAAiBlC,EAAAA,QAAOC,GAAqC;;WAE/DN;cACG,EAAGS,cAAe,GAAGN,EAAcM;;oBAE7Be,EAAAA,UAAU,gBAAgBA,EAAAA,UAAUC;UAC9Cf,EAAAA,UAAU;EAGP8B,EAAWnC,EAAAA,QAAOwB,aAAWC,OAA2B;aACvDjB,GAAUA,EAAM4B,QAAU/B,EAAAA,UAAUgC,KAAK7B;;;;;;;;;"}
+{"version":3,"file":"time-slot-bar.styles.js","sources":["../../../src/time-slot-bar/time-slot-bar.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour, Shadow } from \"../theme\";\n\nconst MAX_LINE_HEIGHT = 1.25; // NOTE in rem\nexport const DEFAULT_CELL_SIZE = 40;\nexport const MINIFIED_CELL_SIZE = 12;\n\nexport const tokens = {\n    item: {\n        width: \"--fds-internal-timeSlotBar-item-width\",\n        left: \"--fds-internal-timeSlotBar-item-left\",\n        color: \"--fds-internal-timeSlotBar-item-color\",\n    },\n    border: {\n        left: \"--fds-internal-timeSlotBar-border-left\",\n    },\n} as const;\n\nexport const container = css`\n    position: relative;\n    display: flex;\n    align-items: center;\n`;\n\nexport const arrowButton = css`\n    z-index: 2;\n    position: absolute;\n    bottom: 0rem;\n    background-color: ${Colour.bg};\n    box-shadow: ${Shadow[\"md-strong\"]};\n    border-radius: 100%;\n    padding: 0.5rem;\n    width: 2rem;\n    height: 2rem;\n\n    > div {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n    }\n\n    &:focus {\n        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n    }\n`;\n\nexport const arrowButtonDefault = css`\n    bottom: 0.25rem;\n`;\n\nexport const arrowButtonMinified = css`\n    bottom: 0rem;\n`;\n\nexport const arrowButtonLeft = css`\n    left: 0;\n`;\n\nexport const arrowButtonRight = css`\n    right: 0;\n`;\n\nexport const arrowIcon = css`\n    width: 1rem;\n    height: 1rem;\n    color: ${Colour[\"icon-primary\"]};\n`;\n\nexport const timeSlotBarContainer = css`\n    overflow: hidden;\n    flex-grow: 1;\n    position: relative;\n`;\n\nexport const containerDefault = css`\n    height: ${MAX_LINE_HEIGHT * 16 + DEFAULT_CELL_SIZE}px;\n`;\n\nexport const containerMinified = css`\n    height: ${MAX_LINE_HEIGHT * 16 + MINIFIED_CELL_SIZE}px;\n`;\n\nexport const timeMarkerWrapper = css`\n    position: relative;\n    white-space: nowrap;\n    height: ${MAX_LINE_HEIGHT}rem;\n`;\n\nexport const timeSlotWrapper = css`\n    display: flex;\n    white-space: nowrap;\n`;\n\nexport const timeMarker = css`\n    display: inline-block;\n    position: relative;\n    border-left: ${Border[\"width-010\"]} ${Border.solid}\n        ${Colour[\"border-stronger\"]};\n`;\n\nexport const timeMarkerDefault = css`\n    width: ${DEFAULT_CELL_SIZE}px;\n    height: 0.625rem;\n`;\n\nexport const timeMarkerMinified = css`\n    width: ${MINIFIED_CELL_SIZE}px;\n    height: 0rem;\n`;\n\nexport const timeMarkerLong = css`\n    height: ${MAX_LINE_HEIGHT}rem;\n`;\n\nexport const timeLabel = css`\n    color: ${Colour[\"text-subtle\"]};\n    position: absolute;\n    bottom: 10%;\n    left: 10%;\n`;\n\nexport const timeSlotBorder = css`\n    /* reset variable to prevent leaking to child components */\n    ${tokens.border.left}: initial;\n\n    position: absolute;\n    top: ${MAX_LINE_HEIGHT}rem;\n    z-index: 1;\n    left: var(${tokens.border.left});\n    border-right: ${Border[\"width-010\"]} ${Border.solid}\n        ${Colour[\"border-stronger\"]};\n`;\n\nexport const timeSlotBorderDefault = css`\n    height: ${DEFAULT_CELL_SIZE}px;\n`;\n\nexport const timeSlotBorderMinified = css`\n    height: ${MINIFIED_CELL_SIZE}px;\n`;\n\nexport const cellText = css`\n    position: absolute;\n    bottom: 0;\n    padding-left: 4px;\n    padding-bottom: 4px;\n    width: 100%;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    color: inherit;\n`;\n\nexport const timeSlotItem = css`\n    /* reset variables to prevent leaking to child components */\n    ${tokens.item.left}: initial;\n    ${tokens.item.width}: initial;\n    ${tokens.item.color}: initial;\n\n    position: absolute;\n    color: var(${tokens.item.color});\n    left: var(${tokens.item.left});\n    width: var(${tokens.item.width});\n`;\n\nexport const timeSlotItemContent = css`\n    width: 100%;\n    height: 100%;\n`;\n\nexport const timeSlotItemDefault = css`\n    height: ${DEFAULT_CELL_SIZE}px;\n`;\n\nexport const timeSlotItemMinified = css`\n    height: ${MINIFIED_CELL_SIZE}px;\n`;\n"],"names":["item","width","left","color","border"],"mappings":"iHAKiC,8BACC,uBAmBV,sCAsBO,kCAQH,sCAJI,mCAQH,4BAIP,4BA+ED,6BA3HC,kCAwDO,qCAIC,4BAoCR,6BArBC,qCAOO,iCAUH,qCALI,oCAvBD,wCAdG,kCAqDN,yCAYO,yCAIC,+BAgBV,sCAYO,uCAKA,wCAIC,kCAtFL,0BAjFN,CAClBA,KAAM,CACFC,MAAO,wCACPC,KAAM,uCACNC,MAAO,yCAEXC,OAAQ,CACJF,KAAM"}

package/cjs/time-slot-bar/time-slot-bar.styles_wigbyd.css

@@ -0,0 +1,25 @@
+@layer fds{.cleto2{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
+.a18tsztd{z-index:2;position:absolute;bottom:0rem;background-color:var(--fds-colour-bg);box-shadow:var(--fds-shadow-md-strong);border-radius:100%;padding:0.5rem;width:2rem;height:2rem;}.a18tsztd >div{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}.a18tsztd:focus{-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}
+.a9mraed{bottom:0.25rem;}
+.aljok3x{bottom:0rem;}
+.av3ykv8{left:0;}
+.as5dred{right:0;}
+.a195ar7o{width:1rem;height:1rem;color:var(--fds-colour-icon-primary);}
+.t1dmizys{overflow:hidden;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;position:relative;}
+.c1w55l7b{height:60px;}
+.cqcczbk{height:32px;}
+.t10z816e{position:relative;white-space:nowrap;height:1.25rem;}
+.t1ukhl9h{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;white-space:nowrap;}
+.t1iag8mt{display:inline-block;position:relative;border-left:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border-stronger);}
+.t1iopuc{width:40px;height:0.625rem;}
+.tbp961o{width:12px;height:0rem;}
+.t7d7vtm{height:1.25rem;}
+.te99x8g{color:var(--fds-colour-text-subtle);position:absolute;bottom:10%;left:10%;}
+.t1e383ch{--fds-internal-timeSlotBar-border-left:initial;position:absolute;top:1.25rem;z-index:1;left:var(--fds-internal-timeSlotBar-border-left);border-right:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border-stronger);}
+.tyac3mh{height:40px;}
+.twiecck{height:12px;}
+.c1yanpy9{position:absolute;bottom:0;padding-left:4px;padding-bottom:4px;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:inherit;}
+.tfycdxa{--fds-internal-timeSlotBar-item-left:initial;--fds-internal-timeSlotBar-item-width:initial;--fds-internal-timeSlotBar-item-color:initial;position:absolute;color:var(--fds-internal-timeSlotBar-item-color);left:var(--fds-internal-timeSlotBar-item-left);width:var(--fds-internal-timeSlotBar-item-width);}
+.t11y98ca{width:100%;height:100%;}
+.t1kzvg2s{height:40px;}
+.t4axcvt{height:12px;}}

package/cjs/time-slot-bar/time-slot-divider.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("clsx"),t=require("react");require("../theme/theme-provider/index.js");var s=require("../theme/utils/css-variable.js");require("../theme/theme-provider/context.js"),require("../theme/tokens/border.js"),require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js");var i=require("../theme/utils/use-apply-styles.js");require("../theme/utils/use-media-query.js");var u=require("./time-slot-bar.styles.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=o(r);exports.default=({variant:r,left:o,dataTestId:l})=>{const d=t.useRef(null);return i.useApplyStyle(d,{[u.tokens.border.left]:void 0===o?void 0:s.formatUnitValue(o,"px")}),e.jsx("div",{ref:d,"data-testid":l,className:a.default(u.timeSlotBorder,"default"===r?u.timeSlotBorderDefault:u.timeSlotBorderMinified)})};
+//# sourceMappingURL=time-slot-divider.js.map

package/cjs/time-slot-bar/time-slot-divider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-slot-divider.js","sources":["../../../src/time-slot-bar/time-slot-divider.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useRef } from \"react\";\n\nimport { formatUnitValue, useApplyStyle } from \"../theme\";\nimport * as styles from \"./time-slot-bar.styles\";\nimport type { TimeSlotBarVariant } from \"./types\";\n\ninterface TimeSlotDividerProps {\n    variant: TimeSlotBarVariant;\n    left?: number;\n    dataTestId?: string;\n}\n\nconst TimeSlotDivider = ({\n    variant,\n    left,\n    dataTestId,\n}: TimeSlotDividerProps) => {\n    const dividerRef = useRef<HTMLDivElement>(null);\n\n    useApplyStyle(dividerRef, {\n        [styles.tokens.border.left]:\n            left === undefined ? undefined : formatUnitValue(left, \"px\"),\n    });\n\n    return (\n        <div\n            ref={dividerRef}\n            data-testid={dataTestId}\n            className={clsx(\n                styles.timeSlotBorder,\n                variant === \"default\"\n                    ? styles.timeSlotBorderDefault\n                    : styles.timeSlotBorderMinified\n            )}\n        />\n    );\n};\n\nexport default TimeSlotDivider;\n"],"names":["variant","left","dataTestId","dividerRef","useRef","useApplyStyle","styles.tokens","border","undefined","formatUnitValue","_jsx","ref","className","clsx","styles.timeSlotBorder","styles.timeSlotBorderDefault","styles.timeSlotBorderMinified"],"mappings":"4pBAawB,EACpBA,UACAC,OACAC,iBAEA,MAAMC,EAAaC,EAAAA,OAAuB,MAO1C,OALAC,EAAAA,cAAcF,EAAY,CACtB,CAACG,EAAAA,OAAcC,OAAON,WACTO,IAATP,OAAqBO,EAAYC,EAAAA,gBAAgBR,EAAM,QAI3DS,MAAA,MAAA,CACIC,IAAKR,EAAU,cACFD,EACbU,UAAWC,UACPC,EAAAA,eACY,YAAZd,EACMe,EAAAA,sBACAC,EAAAA,yBAEZ"}

package/cjs/time-slot-bar/time-slot-item.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("clsx"),r=require("react");require("../theme/theme-provider/index.js");var i=require("../theme/utils/css-variable.js");require("../theme/theme-provider/context.js"),require("../theme/tokens/border.js");var s=require("../theme/tokens/colour.js");require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js");var u=require("../theme/utils/use-apply-styles.js");require("../theme/utils/use-media-query.js");var l=require("./time-slot-bar.styles.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=o(t);exports.default=({children:t,color:o,dataTestId:m,onClick:n,slotOffset:d,slotWidth:c,variant:f})=>{const h=r.useRef(null);return u.useApplyStyle(h,{[l.tokens.item.width]:i.formatUnitValue(c,"px"),[l.tokens.item.left]:i.formatUnitValue(d,"px"),[l.tokens.item.color]:o||s.Colour.text}),e.jsx("div",{ref:h,"data-testid":m,className:a.default(l.timeSlotItem,"default"===f?l.timeSlotItemDefault:l.timeSlotItemMinified),onClick:n,children:t})};
+//# sourceMappingURL=time-slot-item.js.map

package/cjs/time-slot-bar/time-slot-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-slot-item.js","sources":["../../../src/time-slot-bar/time-slot-item.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { type MouseEvent, useRef } from \"react\";\n\nimport { Colour, formatUnitValue, useApplyStyle } from \"../theme\";\nimport * as styles from \"./time-slot-bar.styles\";\nimport type { TimeSlotBarVariant } from \"./types\";\n\ninterface TimeSlotItemProps {\n    children: React.ReactNode;\n    color?: string;\n    dataTestId?: string;\n    onClick?: (() => void) | ((evt: MouseEvent<HTMLElement>) => void);\n    slotOffset: number;\n    slotWidth: number;\n    variant: TimeSlotBarVariant;\n}\n\nconst TimeSlotItem = ({\n    children,\n    color,\n    dataTestId,\n    onClick,\n    slotOffset,\n    slotWidth,\n    variant,\n}: TimeSlotItemProps) => {\n    const itemRef = useRef<HTMLDivElement>(null);\n\n    useApplyStyle(itemRef, {\n        [styles.tokens.item.width]: formatUnitValue(slotWidth, \"px\"),\n        [styles.tokens.item.left]: formatUnitValue(slotOffset, \"px\"),\n        [styles.tokens.item.color]: color || Colour.text,\n    });\n\n    return (\n        <div\n            ref={itemRef}\n            data-testid={dataTestId}\n            className={clsx(\n                styles.timeSlotItem,\n                variant === \"default\"\n                    ? styles.timeSlotItemDefault\n                    : styles.timeSlotItemMinified\n            )}\n            onClick={onClick}\n        >\n            {children}\n        </div>\n    );\n};\n\nexport default TimeSlotItem;\n"],"names":["children","color","dataTestId","onClick","slotOffset","slotWidth","variant","itemRef","useRef","useApplyStyle","styles.tokens","item","width","formatUnitValue","left","Colour","text","_jsx","ref","className","clsx","styles.timeSlotItem","styles.timeSlotItemDefault","styles.timeSlotItemMinified"],"mappings":"kqBAiBqB,EACjBA,WACAC,QACAC,aACAC,UACAC,aACAC,YACAC,cAEA,MAAMC,EAAUC,EAAAA,OAAuB,MAQvC,OANAC,EAAAA,cAAcF,EAAS,CACnB,CAACG,EAAAA,OAAcC,KAAKC,OAAQC,EAAAA,gBAAgBR,EAAW,MACvD,CAACK,EAAAA,OAAcC,KAAKG,MAAOD,EAAAA,gBAAgBT,EAAY,MACvD,CAACM,EAAAA,OAAcC,KAAKV,OAAQA,GAASc,EAAAA,OAAOC,OAI5CC,MAAA,MAAA,CACIC,IAAKX,EAAO,cACCL,EACbiB,UAAWC,UACPC,EAAAA,aACY,YAAZf,EACMgB,EAAAA,oBACAC,EAAAA,sBAEVpB,QAASA,EAAOH,SAEfA,GACC"}

package/cjs/time-slot-bar-week/consts.js

@@ -0,0 +1,2 @@
+"use strict";exports.ROW_HEIGHT=16,exports.SLOT_GAP=4,exports.SLOT_HEIGHT=12;
+//# sourceMappingURL=consts.js.map

package/cjs/time-slot-bar-week/consts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"consts.js","sources":["../../../src/time-slot-bar-week/consts.ts"],"sourcesContent":["export const SLOT_HEIGHT = 12; // px\nexport const SLOT_GAP = 4; // px\nexport const ROW_HEIGHT = SLOT_HEIGHT + SLOT_GAP;\n"],"names":["SLOT_HEIGHT"],"mappings":"gCAE0BA,oBADF,sBADG"}

package/cjs/time-slot-bar-week/time-slot-bar-week-days.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),t=require("@react-spring/web"),l=require("../external/dayjs/dayjs.min.js"),r=require("../external/lodash/isEmpty.js"),i=require("../external/lodash/maxBy.js"),a=require("../external/lodash/minBy.js"),n=require("react"),s=require("../external/react-resize-detector/build/index.esm.js"),o=require("../shared/internal-calendar/day-cell/day-cell.js"),d=require("../util/calendar-helper.js"),c=require("../util/date-helper.js");require("../util/string-helper.js");var u=require("../v3_theme/index.js"),m=require("./time-slot-bar-week-days.style.js");exports.TimeSlotBarWeekDays=({calendarDate:h,disabledDates:f,selectedDate:p,onSelect:g,minDate:v,maxDate:b,startTime:x,endTime:j,maxVisibleCellHeight:T,slots:y,interval:C=30,variant:D="flexible",enableSelection:$=!0,onSlotClick:k})=>{var M,H,q,S;const W="YYYY-MM-DD",[w,L]=n.useState(!1),[O,E]=n.useState(),A=n.useMemo((()=>d.CalendarHelper.generateDaysForCurrentWeek(h)),[h]),I=Object.values(null!=y?y:{}).flat(),R=null!==(H=null!=x?x:null===(M=a.default(I,"startTime"))||void 0===M?void 0:M.startTime)&&void 0!==H?H:"00:00",B=null!==(S=null!=j?j:null===(q=i.default(I,"endTime"))||void 0===q?void 0:q.endTime)&&void 0!==S?S:"24:00",F=Math.ceil(c.DateHelper.getTimeDiffInMinutes(R,B)/C),{height:Y=0,ref:z}=s.useResizeDetector(),V=T?Y<T||w?Y:T:Y,_=t.useSpring({height:V}),G=n.useMemo((()=>{if(y){const e={};return Object.entries(y).forEach((([t,l])=>{const i=function(e){const t=Array(F).fill({});return e.forEach((e=>{const l=Math.max(0,c.DateHelper.getTimeDiffInMinutes(R,e.startTime)/C),i=Math.min(F,c.DateHelper.getTimeDiffInMinutes(R,e.endTime)/C),a=Math.ceil(i)-Math.floor(l);switch(D){case"fixed":t[Math.floor(l)]=Object.assign(Object.assign({},e),{cellLength:i-l});break;case"flexible":for(let n=0;n<a;n++){const s=c.DateHelper.addMinutesToTime(R,Math.floor(l+n)*C),o=c.DateHelper.addMinutesToTime(s,C);let d;r.default(t[Math.floor(l+n)])?0===n&&l%1!=0?d="top":n===a-1&&i%1!=0&&(d="bottom"):d=void 0,t[Math.floor(l+n)]=Object.assign(Object.assign({},e),{id:`${e.id}-${n}`,startTime:s,endTime:o,cellLength:1,halfFill:d})}}})),t}(l);e[t]=function(e){var t,l,i,a;let n=0;switch(D){case"fixed":for(e=e.reduce(((e,t)=>{const l=e.length>0?e[e.length-1]:e[0];return r.default(t)&&r.default(l)?e:[...e,t]}),[{}]);n<e.length;){if(r.default(e[n])){const r=null!==(l=null===(t=e[n-1])||void 0===t?void 0:t.endTime)&&void 0!==l?l:R,s=null!==(a=null===(i=e[n+1])||void 0===i?void 0:i.startTime)&&void 0!==a?a:B;if(r!==s){const t=c.DateHelper.getTimeDiffInMinutes(r,s)/C;e[n]=Object.assign(Object.assign({},Q(n)),{startTime:r,endTime:s,cellLength:t})}}n++}break;case"flexible":for(;n<e.length;)r.default(e[n])?(e[n]=Q(n),n++):n+=e[n].cellLength}return e.filter((e=>!r.default(e)&&e.cellLength>0))}(i)})),e}return{}}),[y]),J=e=>{E(e)},K=()=>{E(void 0)},N=e=>{e.preventDefault(),L((e=>!e))},P=e=>{var t;const r=d.CalendarHelper.isWithinRange(e,v?l.default(v):void 0,b?l.default(b):void 0),i=null!==(t=f&&f.includes(e.format(W)))&&void 0!==t&&t;return!r||i};function Q(e,t=1){return{id:`${e.toString()}-${(new Date).getTime()}`,startTime:"",endTime:"",clickable:!1,styleAttributes:{backgroundColor:u.V3_Colour["bg-stronger"]},cellLength:t}}return e.jsxs(m.Wrapper,{children:[e.jsx(m.HeaderCellWeekColumn,{children:A.map(((t,r)=>{const i=(e=>{const t=e.format(W),l=P(e),r={},i=$&&!l;l&&(r.disabled=!0),r.interactive=$?i:null;const a=i&&O&&e.isSame(O,"day"),n=[p].includes(t);return n&&a?(r.labelType="selected-hover",r.circleLeft="selected-hover-outline",r.circleRight="selected-hover-outline"):n?(r.labelType="selected",r.circleLeft="selected-outline",r.circleRight="selected-outline"):a&&(r.labelType="hover",r.circleLeft="hover-subtle",r.circleRight="hover-subtle"),r})(t);return e.jsx(o.DayCell,Object.assign({date:t,calendarDate:l.default(p),onSelect:()=>{((e,t)=>{!t&&$&&g(e)})(t,!i.interactive)},onHover:J,onHoverEnd:K},i),`day-${r}`)}))}),e.jsx(m.HeaderCellWeekColumn,{children:A.map(((t,r)=>e.jsx(m.HeaderCellWeek,{children:e.jsx(m.CellWeekText,{weight:"semibold",$disabled:P(t),children:l.default(t).format("ddd")})},`week-day-${r}`)))}),(()=>{let t=!1;const r=e=>{const r=l.default(R,"HH:mm").add(4*e*C,"minutes"),i=r.format("h"),a=r.format("mm"),n=r.format("a");let s=`${i}${"00"!==a?` ${a}`:""}`;return t||"pm"!==n||"00"!==a||(s+=` ${n}`,t=!0),s};return e.jsx(m.TimeColumn,{$height:V,children:Array(Math.ceil(F/4)).fill(void 0).map(((t,l)=>e.jsx(m.TimeColumnWrapper,{children:e.jsx(m.TimeColumnText,{children:r(l)})},`time-${l}`)))})})(),e.jsx(m.Expandable,{style:_,children:e.jsx(m.ColumnWeekCell,{ref:z,children:A.map(((t,l)=>{var r;const i=t.format(W),a=null!==(r=G[i])&&void 0!==r?r:Array("flexible"===D?F:1).fill(void 0).map(((e,t)=>Q(t,"fixed"===D?F:void 0)));return e.jsx(m.TimeSlotWrapper,{children:a.map((t=>{const{id:l,clickable:r=!0,styleAttributes:a,cellLength:n,halfFill:s}=t,{styleType:o="default",backgroundColor:d,backgroundColor2:c}=a;return e.jsx(m.TimeSlotComponent,{$type:"vertical",$variant:"default",$styleType:o,$bgColor:d,$bgColor2:c,$halfFill:s,$clickable:r,$height:"fixed"===D?12*n+4*(n-1):12,onClick:()=>r&&((e,t)=>{null==k||k(e,t)})(i,t)},l)}))},`wrapper-${l}`)}))},`week-cell-${h.format(W)}`)}),(()=>{if(T&&z.current&&!(Y&&Y<T))return e.jsx(m.CollapseExpandAllWrapper,{children:e.jsxs(m.CollapseExpandAllButton,{"data-testid":"time-bar-expand-collapse-button",styleType:"light",onClick:N,children:[e.jsx(m.ChevronIcon,{$isExpanded:w}),(w?"Hide":"Show")+" later times"]})})})()]})};
+"use strict";var e=require("react/jsx-runtime"),t=require("@lifesg/react-icons"),r=require("@react-spring/web"),l=require("clsx"),a=require("../external/dayjs/dayjs.min.js"),i=require("../external/lodash/isEmpty.js"),n=require("../external/lodash/maxBy.js"),s=require("../external/lodash/minBy.js"),o=require("react"),d=require("../external/react-resize-detector/build/index.esm.js"),u=require("../button/button.js"),c=require("../shared/internal-calendar/day-cell/day-cell.js");require("../theme/theme-provider/index.js");var m=require("../theme/utils/css-variable.js");require("../theme/theme-provider/context.js"),require("../theme/tokens/border.js");var f=require("../theme/tokens/colour.js");require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js");var h=require("../theme/utils/use-apply-styles.js");require("../theme/utils/use-media-query.js");var v=require("../typography/index.js"),p=require("../util/calendar-helper.js"),x=require("../util/date-helper.js");require("../util/simple-id-generator.js");var g=require("../util/string-helper.js");require("@react-aria/live-announcer");var j=require("../util/use-mount.js"),b=require("../util/time-helper.js"),y=require("./consts.js"),T=require("./time-slot-bar-week-days.styles.js"),k=require("./time-slot-cell.js");function D(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var q=D(l);exports.TimeSlotBarWeekDays=({calendarDate:l,disabledDates:D,selectedDate:w,onSelect:M,minDate:C,maxDate:S,startTime:A,endTime:H,maxVisibleCellHeight:I,slots:N,interval:W=30,variant:$="flexible",enableSelection:L=!0,onSlotClick:O})=>{var R,E,B,Y;const P="YYYY-MM-DD",[U,G]=o.useState(!1),[_,z]=o.useState(),F=j.useIsMounted(),V=o.useRef({}),K=o.useRef(null),X=o.useMemo((()=>p.CalendarHelper.generateDaysForCurrentWeek(l)),[l]),J=Object.values(null!=N?N:{}).flat(),Q=null!==(E=null!=A?A:null===(R=s.default(J,"startTime"))||void 0===R?void 0:R.startTime)&&void 0!==E?E:"00:00",Z=null!==(Y=null!=H?H:null===(B=n.default(J,"endTime"))||void 0===B?void 0:B.endTime)&&void 0!==Y?Y:"24:00",ee=Math.ceil(x.DateHelper.getTimeDiffInMinutes(Q,Z)/W),{height:te=0,ref:re}=d.useResizeDetector(),le=!!I&&te>I,ae=void 0!==I?Math.max(1,Math.floor((I+y.SLOT_GAP)/y.ROW_HEIGHT)):0,ie=ae>0?ae*y.ROW_HEIGHT-y.SLOT_GAP:I,ne=I?!le||U?te:ie:te,se=r.useSpring({height:ne}),oe=o.useMemo((()=>{if(N){const e={};return Object.entries(N).forEach((([t,r])=>{const l=function(e){const t=Array(ee).fill({});return e.forEach((e=>{const r=Math.max(0,x.DateHelper.getTimeDiffInMinutes(Q,e.startTime)/W),l=Math.min(ee,x.DateHelper.getTimeDiffInMinutes(Q,e.endTime)/W),a=Math.ceil(l)-Math.floor(r);switch($){case"fixed":t[Math.floor(r)]=Object.assign(Object.assign({},e),{isActualSlot:!0,rowIndex:Math.floor(r),cellLength:l-r});break;case"flexible":for(let n=0;n<a;n++){const s=x.DateHelper.addMinutesToTime(Q,Math.floor(r+n)*W),o=x.DateHelper.addMinutesToTime(s,W);let d;d=i.default(t[Math.floor(r+n)])?0===n&&r%1!=0?"top":n===a-1&&l%1!=0?"bottom":"default":"default",t[Math.floor(r+n)]=Object.assign(Object.assign({},e),{id:`${e.id}-${n}`,startTime:s,endTime:o,isActualSlot:!0,rowIndex:Math.floor(r+n),cellLength:1,halfFill:d})}}})),t}(r);e[t]=function(e){var t,r,l,a;let n=0;switch($){case"fixed":for(e=e.reduce(((e,t)=>{const r=e.length>0?e[e.length-1]:e[0];return i.default(t)&&i.default(r)?e:[...e,t]}),[{}]);n<e.length;){if(i.default(e[n])){const i=null!==(r=null===(t=e[n-1])||void 0===t?void 0:t.endTime)&&void 0!==r?r:Q,s=null!==(a=null===(l=e[n+1])||void 0===l?void 0:l.startTime)&&void 0!==a?a:Z;if(i!==s){const t=x.DateHelper.getTimeDiffInMinutes(i,s)/W;e[n]=Object.assign(Object.assign({},xe(n)),{startTime:i,endTime:s,cellLength:t})}}n++}break;case"flexible":for(;n<e.length;)i.default(e[n])?(e[n]=xe(n),n++):n+=e[n].cellLength}return e.filter((e=>!i.default(e)&&e.cellLength>0))}(l)})),e}return{}}),[N]),de=o.useMemo((()=>X.reduce(((e,t)=>{const r=t.format(P);return e[r]=je(r).filter((e=>!!e.isActualSlot&&void 0!==e.rowIndex)).map((e=>({key:`${r}-${e.id}`,date:r,rowIndex:e.rowIndex}))).sort(((e,t)=>e.rowIndex-t.rowIndex)),e}),{})),[X,oe]);h.useApplyStyle(K,{[T.tokens.timeColumn.height]:m.formatUnitValue(ne,"px")});const ue=e=>{z(e)},ce=()=>{z(void 0)},me=(e,t)=>{null==O||O(e,t)},fe=(e,t)=>r=>{r.stopPropagation(),me(e,t)},he=e=>{e.preventDefault(),G((e=>!e))},ve=(e,t)=>{var r;const l=null!==(r=de[t.date])&&void 0!==r?r:[],a=e=>{var t;e&&(null===(t=V.current[e.key])||void 0===t||t.focus())};switch(e.key){case"ArrowRight":case"ArrowDown":{e.preventDefault();const r=l.findIndex((e=>e.key===t.key));a(l[r+1]);break}case"ArrowLeft":case"ArrowUp":{e.preventDefault();const r=l.findIndex((e=>e.key===t.key));a(l[r-1]);break}case"Home":case"PageUp":e.preventDefault(),a(l[0]);break;case"End":e.preventDefault(),a(l[l.length-1]);break;case"PageDown":if(e.preventDefault(),le&&!U){G(!0);const e=[...l].reverse().find((e=>e.rowIndex<ae));a(null!=e?e:l[0]);break}a(l[l.length-1])}},pe=e=>{var t;const r=p.CalendarHelper.isWithinRange(e,C?a.default(C):void 0,S?a.default(S):void 0),l=null!==(t=D&&D.includes(e.format(P)))&&void 0!==t&&t;return!r||l};function xe(e,t=1){return{id:`${e.toString()}-${(new Date).getTime()}`,startTime:"",endTime:"",clickable:!1,isActualSlot:!1,styleAttributes:{backgroundColor:f.Colour["bg-stronger"]},cellLength:t}}function ge(e,t){var r;const{startTime:l,endTime:i}=t;return g.StringHelper.joinNonEmptyStrings([a.default(e).format("D MMMM YYYY dddd"),l&&i?b.TimeHelper.formatTimeRange(l,i):void 0,t.label,null===(r=t.clickable)||void 0===r||r?"Available":"Unavailable"])}function je(e){var t;return null!==(t=oe[e])&&void 0!==t?t:Array("flexible"===$?ee:1).fill(void 0).map(((e,t)=>xe(t,"fixed"===$?ee:void 0)))}return e.jsxs("div",{className:T.wrapper,children:[e.jsxs("div",{className:T.gridWrapper,role:"grid",children:[e.jsx("div",{className:T.headerCellWeekColumn,role:"row",onBlur:ce,children:X.map(((t,r)=>{const l=(e=>{const t=e.format(P),r=pe(e),l={},a=L&&!r;r&&(l.disabled=!0),l.interactive=!!L&&a;const i=a&&_&&e.isSame(_,"day"),n=[w].includes(t);return n&&i?(l.labelType="selected-hover",l.circleLeft="selected-hover-outline",l.circleRight="selected-hover-outline"):n?(l.labelType="selected",l.circleLeft="selected-outline",l.circleRight="selected-outline"):i&&(l.labelType="hover",l.circleLeft="hover-subtle",l.circleRight="hover-subtle"),l})(t);return e.jsx(c.DayCell,Object.assign({date:t,calendarDate:a.default(w),role:"columnheader",tabIndex:l.interactive?0:-1,onSelect:()=>{((e,t)=>{!t&&L&&M(e)})(t,!l.interactive)},onHover:ue,onHoverEnd:ce,onFocus:ue},l),`day-${r}`)}))}),e.jsx("div",{className:T.headerCellWeekColumn,role:"row",children:X.map(((t,r)=>e.jsx("div",{className:T.headerCellWeek,role:"gridcell",children:e.jsx(v.Typography.BodyXS,{weight:"semibold",className:q.default(pe(t)&&T.cellWeekTextDisabled),children:a.default(t).format("ddd")})},`week-day-${r}`)))}),(()=>{let t=!1;const r=e=>{const r=a.default(Q,"HH:mm").add(4*e*W,"minutes"),l=r.format("h"),i=r.format("mm"),n=r.format("a");let s=`${l}${"00"!==i?` ${i}`:""}`;return t||"pm"!==n||"00"!==i||(s+=` ${n}`,t=!0),s};return e.jsx("div",{className:T.timeColumn,ref:K,"aria-hidden":!0,children:Array(Math.ceil(ee/4)).fill(void 0).map(((t,l)=>e.jsx("div",{className:T.timeColumnWrapper,children:e.jsx("div",{className:T.timeColumnText,children:r(l)})},`time-${l}`)))})})(),e.jsx(r.animated.div,{className:T.expandable,style:F?se:void 0,role:"row",children:e.jsx("div",{className:T.columnWeekCell,ref:re,children:X.map(((t,r)=>{const l=t.format(P),a=je(l);return e.jsx("div",{className:T.timeSlotWrapper,role:"gridcell",children:a.map((t=>((t,r)=>e.jsx(k.WeekTimeSlotCell,{formattedDate:t,slot:r,variant:$,hasCollapsedContent:le,expandAll:U,visibleRowCount:ae,onSlotClick:me,getSlotAriaLabel:ge,onSlotKeyDown:ve,onSlotButtonClick:fe,slotButtonRefs:V},r.id))(l,t)))},`wrapper-${r}`)}))},`week-cell-${l.format(P)}`)})]}),(()=>{if(I&&re.current)return e.jsx("div",{className:T.collapseExpandAllWrapper,children:e.jsx(u.Button,{"data-testid":"time-bar-expand-collapse-button",styleType:"light",sizeType:"small","aria-expanded":U,onClick:he,className:T.collapseExpandAllButton,children:e.jsxs("span",{className:T.collapseExpandAllButtonContent,children:[e.jsx(t.ChevronUpIcon,{className:q.default(T.chevronIcon,U&&T.chevronIconExpanded)}),(U?"Hide":"Show")+" later times"]})})})})()]})};
 //# sourceMappingURL=time-slot-bar-week-days.js.map

package/cjs/time-slot-bar-week/time-slot-bar-week-days.js.map

@@ -1 +1 @@
-{"version":3,"file":"time-slot-bar-week-days.js","sources":["../../../src/time-slot-bar-week/time-slot-bar-week-days.tsx"],"sourcesContent":["import { useSpring } from \"@react-spring/web\";\nimport type { Dayjs } from \"dayjs\";\nimport dayjs from \"dayjs\";\nimport isEmpty from \"lodash/isEmpty\";\nimport maxBy from \"lodash/maxBy\";\nimport minBy from \"lodash/minBy\";\nimport type React from \"react\";\nimport { useMemo, useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport type { InternalCalendarProps } from \"../shared/internal-calendar\";\nimport type { CellStyleProps } from \"../shared/internal-calendar/day-cell\";\nimport { DayCell } from \"../shared/internal-calendar/day-cell\";\nimport type { TimeSlot } from \"../time-slot-bar/types\";\nimport { DateHelper } from \"../util\";\nimport { CalendarHelper } from \"../util/calendar-helper\";\nimport { V3_Colour } from \"../v3_theme\";\nimport {\n    CellWeekText,\n    ChevronIcon,\n    CollapseExpandAllButton,\n    CollapseExpandAllWrapper,\n    ColumnWeekCell,\n    Expandable,\n    HeaderCellWeek,\n    HeaderCellWeekColumn,\n    TimeColumn,\n    TimeColumnText,\n    TimeColumnWrapper,\n    TimeSlotComponent,\n    TimeSlotWrapper,\n    Wrapper,\n} from \"./time-slot-bar-week-days.style\";\nimport type { TimeSlotCellsVariant } from \"./types\";\n\nexport type DayVariant = \"default\" | \"other-month\" | \"today\";\ninterface TimeSlotWeekDaysProps\n    extends Pick<\n        InternalCalendarProps,\n        \"disabledDates\" | \"minDate\" | \"maxDate\"\n    > {\n    selectedDate: string | undefined;\n    calendarDate: Dayjs;\n    onSelect: (value: Dayjs) => void;\n    slots: { [date: string]: TimeSlot[] };\n    startTime?: string | undefined;\n    endTime?: string | undefined;\n    maxVisibleCellHeight?: number | undefined;\n    interval?: number | undefined;\n    variant?: TimeSlotCellsVariant | undefined;\n    enableSelection?: boolean | undefined;\n    onSlotClick?: ((date: string, timeSlot: TimeSlot) => void) | undefined;\n}\n\ninterface TimeSlotCell extends TimeSlot {\n    cellLength: number;\n    halfFill?: \"top\" | \"bottom\" | undefined;\n}\n\nexport const TimeSlotBarWeekDays = ({\n    calendarDate,\n    disabledDates,\n    selectedDate,\n    onSelect,\n    minDate,\n    maxDate,\n    startTime,\n    endTime,\n    maxVisibleCellHeight,\n    slots: daySlots,\n    interval = 30,\n    variant = \"flexible\",\n    enableSelection = true,\n    onSlotClick,\n}: TimeSlotWeekDaysProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const dateFormat = \"YYYY-MM-DD\";\n    const [expandAll, setExpandAll] = useState<boolean>(false);\n    const [hoverDay, setHoverDay] = useState<Dayjs>();\n    const currentCalendarWeek = useMemo((): Dayjs[] => {\n        return CalendarHelper.generateDaysForCurrentWeek(calendarDate);\n    }, [calendarDate]);\n\n    const flattenedSlots = Object.values(daySlots ?? {}).flat();\n    const minStartTime =\n        startTime ?? minBy(flattenedSlots, \"startTime\")?.startTime ?? \"00:00\";\n    const maxEndTime =\n        endTime ?? maxBy(flattenedSlots, \"endTime\")?.endTime ?? \"24:00\";\n    const numberOfCells = Math.ceil(\n        DateHelper.getTimeDiffInMinutes(minStartTime, maxEndTime) / interval\n    );\n\n    // React spring animation configuration\n    const { height: actualHeight = 0, ref: cellsRef } = useResizeDetector();\n    const height = maxVisibleCellHeight\n        ? actualHeight < maxVisibleCellHeight || expandAll\n            ? actualHeight\n            : maxVisibleCellHeight\n        : actualHeight;\n    const expandableStyles = useSpring({ height });\n\n    const generatedDaySlots = useMemo((): {\n        [date: string]: TimeSlotCell[];\n    } => {\n        if (daySlots) {\n            const transformedDaySlots: Record<string, TimeSlotCell[]> = {};\n            Object.entries(daySlots).forEach(([key, slots]) => {\n                const cellsArray = initializeAndFillSlots(slots);\n                transformedDaySlots[key] = populateEmptyCells(cellsArray);\n            });\n            return transformedDaySlots;\n        }\n        return {};\n    }, [daySlots]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleDayClick = (value: Dayjs, isDisabled: boolean) => {\n        if (isDisabled || !enableSelection) return;\n\n        onSelect(value);\n    };\n\n    const handleDayHover = (value: Dayjs) => {\n        setHoverDay(value);\n    };\n\n    const handleDayMouseout = () => {\n        setHoverDay(undefined);\n    };\n\n    const handleSlotClick = (date: string, slot: TimeSlot) => {\n        onSlotClick?.(date, slot);\n    };\n\n    const handleExpandCollapseClick = (event: React.MouseEvent) => {\n        event.preventDefault();\n        setExpandAll((prevExpandValue) => !prevExpandValue);\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const isDisabled = (day: Dayjs): boolean => {\n        const isWithinRange = CalendarHelper.isWithinRange(\n            day,\n            minDate ? dayjs(minDate) : undefined,\n            maxDate ? dayjs(maxDate) : undefined\n        );\n\n        const isDisabledDate =\n            (disabledDates && disabledDates.includes(day.format(dateFormat))) ??\n            false;\n\n        return !isWithinRange || isDisabledDate;\n    };\n\n    const generateStyleProps = (day: Dayjs) => {\n        const dateStartWithYear = day.format(dateFormat);\n        const disabled = isDisabled(day);\n        const dayCellStyleProps: CellStyleProps = {};\n        const isHoverEnabled = enableSelection && !disabled;\n\n        if (disabled) {\n            dayCellStyleProps.disabled = true;\n        }\n\n        dayCellStyleProps.interactive = !enableSelection\n            ? null\n            : isHoverEnabled;\n\n        const isHover =\n            isHoverEnabled && hoverDay && day.isSame(hoverDay, \"day\");\n        const isSelected = [selectedDate].includes(dateStartWithYear);\n\n        if (isSelected && isHover) {\n            dayCellStyleProps.labelType = \"selected-hover\";\n            dayCellStyleProps.circleLeft = \"selected-hover-outline\";\n            dayCellStyleProps.circleRight = \"selected-hover-outline\";\n        } else if (isSelected) {\n            dayCellStyleProps.labelType = \"selected\";\n            dayCellStyleProps.circleLeft = \"selected-outline\";\n            dayCellStyleProps.circleRight = \"selected-outline\";\n        } else if (isHover) {\n            dayCellStyleProps.labelType = \"hover\";\n            dayCellStyleProps.circleLeft = \"hover-subtle\";\n            dayCellStyleProps.circleRight = \"hover-subtle\";\n        }\n\n        return dayCellStyleProps;\n    };\n\n    function generateFallbackCell(\n        prefix: string | number,\n        cellLength = 1\n    ): TimeSlotCell {\n        return {\n            id: `${prefix.toString()}-${new Date().getTime()}`,\n            startTime: \"\",\n            endTime: \"\",\n            clickable: false,\n            styleAttributes: {\n                backgroundColor: V3_Colour[\"bg-stronger\"],\n            },\n            cellLength,\n        };\n    }\n\n    function initializeAndFillSlots(slots: TimeSlot[]): TimeSlotCell[] {\n        const cellsArray = Array(numberOfCells).fill({});\n\n        slots.forEach((slot) => {\n            const startIndex = Math.max(\n                0,\n                DateHelper.getTimeDiffInMinutes(minStartTime, slot.startTime) /\n                    interval\n            );\n            const endIndex = Math.min(\n                numberOfCells,\n                DateHelper.getTimeDiffInMinutes(minStartTime, slot.endTime) /\n                    interval\n            );\n            const cellLength = Math.ceil(endIndex) - Math.floor(startIndex);\n\n            switch (variant) {\n                case \"fixed\":\n                    // Keep fixed slots as 1 long cell\n                    cellsArray[Math.floor(startIndex)] = {\n                        ...slot,\n                        cellLength: endIndex - startIndex,\n                    };\n                    break;\n                case \"flexible\":\n                    // Split long slot into multiple cells of length 1\n                    for (let i = 0; i < cellLength; i++) {\n                        const startTime = DateHelper.addMinutesToTime(\n                            minStartTime,\n                            Math.floor(startIndex + i) * interval\n                        );\n                        const endTime = DateHelper.addMinutesToTime(\n                            startTime,\n                            interval\n                        );\n\n                        let halfFill: string | undefined;\n\n                        if (!isEmpty(cellsArray[Math.floor(startIndex + i)])) {\n                            // Previous cell extends into current cell, fill entire cell\n                            halfFill = undefined;\n                        } else if (i === 0 && startIndex % 1 !== 0) {\n                            halfFill = \"top\";\n                        } else if (i === cellLength - 1 && endIndex % 1 !== 0) {\n                            halfFill = \"bottom\";\n                        }\n\n                        cellsArray[Math.floor(startIndex + i)] = {\n                            ...slot,\n                            id: `${slot.id}-${i}`,\n                            startTime,\n                            endTime,\n                            cellLength: 1,\n                            halfFill,\n                        };\n                    }\n                    break;\n            }\n        });\n        return cellsArray;\n    }\n\n    function populateEmptyCells(cellsArray: any[]): TimeSlotCell[] {\n        let i = 0;\n        switch (variant) {\n            case \"fixed\":\n                // Truncate consecutive empty cells into 1 [{},{},{...},{},{}] -> [{},{...},{}]\n                cellsArray = cellsArray.reduce(\n                    (result, obj) => {\n                        const lastObj =\n                            result.length > 0\n                                ? result[result.length - 1]\n                                : result[0];\n                        if (isEmpty(obj) && isEmpty(lastObj)) {\n                            return result;\n                        }\n                        return [...result, obj];\n                    },\n                    [{}]\n                );\n\n                // Fill in empty cells with timings & corresponding cell lengths\n                while (i < cellsArray.length) {\n                    if (isEmpty(cellsArray[i])) {\n                        const startTime =\n                            cellsArray[i - 1]?.endTime ?? minStartTime;\n                        const endTime =\n                            cellsArray[i + 1]?.startTime ?? maxEndTime;\n                        if (startTime !== endTime) {\n                            const cellLength =\n                                DateHelper.getTimeDiffInMinutes(\n                                    startTime,\n                                    endTime\n                                ) / interval;\n                            cellsArray[i] = {\n                                ...generateFallbackCell(i),\n                                startTime,\n                                endTime,\n                                cellLength,\n                            };\n                        }\n                    }\n                    i++;\n                }\n                break;\n            case \"flexible\":\n                // Fill in individual empty cell with interval timings\n                while (i < cellsArray.length) {\n                    if (isEmpty(cellsArray[i])) {\n                        cellsArray[i] = generateFallbackCell(i);\n                        i++;\n                    } else {\n                        i += cellsArray[i].cellLength;\n                    }\n                }\n                break;\n        }\n        return cellsArray.filter(\n            (slot) => !isEmpty(slot) && slot.cellLength > 0\n        );\n    }\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderWeek = () => {\n        return (\n            <HeaderCellWeekColumn>\n                {currentCalendarWeek.map((day, index) => (\n                    <HeaderCellWeek key={`week-day-${index}`}>\n                        <CellWeekText\n                            weight={\"semibold\"}\n                            $disabled={isDisabled(day)}\n                        >\n                            {dayjs(day).format(\"ddd\")}\n                        </CellWeekText>\n                    </HeaderCellWeek>\n                ))}\n            </HeaderCellWeekColumn>\n        );\n    };\n\n    const renderHeader = () => {\n        return (\n            <HeaderCellWeekColumn>\n                {currentCalendarWeek.map((day, dayIndex) => {\n                    const dayCellStyleProps = generateStyleProps(day);\n\n                    return (\n                        <DayCell\n                            key={`day-${dayIndex}`}\n                            date={day}\n                            calendarDate={dayjs(selectedDate)}\n                            onSelect={() => {\n                                handleDayClick(\n                                    day,\n                                    !dayCellStyleProps.interactive\n                                );\n                            }}\n                            onHover={handleDayHover}\n                            onHoverEnd={handleDayMouseout}\n                            {...dayCellStyleProps}\n                        ></DayCell>\n                    );\n                })}\n            </HeaderCellWeekColumn>\n        );\n    };\n\n    const renderTimeColumn = () => {\n        let hasSetFirstAfternoonHour = false;\n\n        const formatTime = (index: number) => {\n            const parsedTime = dayjs(minStartTime, \"HH:mm\").add(\n                index * 4 * interval,\n                \"minutes\"\n            );\n            const hour = parsedTime.format(\"h\");\n            const minutes = parsedTime.format(\"mm\");\n            const amPm = parsedTime.format(\"a\");\n\n            let formattedTime = `${hour}${\n                minutes !== \"00\" ? ` ${minutes}` : \"\"\n            }`;\n\n            if (\n                !hasSetFirstAfternoonHour &&\n                amPm === \"pm\" &&\n                minutes === \"00\"\n            ) {\n                formattedTime += ` ${amPm}`;\n                hasSetFirstAfternoonHour = true;\n            }\n\n            return formattedTime;\n        };\n\n        return (\n            <TimeColumn $height={height}>\n                {Array(Math.ceil(numberOfCells / 4))\n                    .fill(undefined)\n                    .map((_, index) => (\n                        <TimeColumnWrapper key={`time-${index}`}>\n                            <TimeColumnText>{formatTime(index)}</TimeColumnText>\n                        </TimeColumnWrapper>\n                    ))}\n            </TimeColumn>\n        );\n    };\n\n    const renderTimeSlotBarCells = () => {\n        return (\n            <Expandable style={expandableStyles}>\n                <ColumnWeekCell\n                    ref={cellsRef}\n                    key={`week-cell-${calendarDate.format(dateFormat)}`}\n                >\n                    {currentCalendarWeek.map((day, dayIndex) => {\n                        const formattedDate = day.format(dateFormat);\n                        const cellsArray =\n                            generatedDaySlots[formattedDate] ??\n                            Array(variant === \"flexible\" ? numberOfCells : 1)\n                                .fill(undefined)\n                                .map((_, index) =>\n                                    generateFallbackCell(\n                                        index,\n                                        variant === \"fixed\"\n                                            ? numberOfCells\n                                            : undefined\n                                    )\n                                );\n                        return (\n                            <TimeSlotWrapper key={`wrapper-${dayIndex}`}>\n                                {cellsArray.map((slot) => {\n                                    const {\n                                        id,\n                                        clickable = true,\n                                        styleAttributes,\n                                        cellLength,\n                                        halfFill,\n                                    } = slot;\n                                    const {\n                                        styleType = \"default\",\n                                        backgroundColor,\n                                        backgroundColor2,\n                                    } = styleAttributes;\n                                    return (\n                                        <TimeSlotComponent\n                                            $type=\"vertical\"\n                                            $variant=\"default\"\n                                            key={id}\n                                            $styleType={styleType}\n                                            $bgColor={backgroundColor}\n                                            $bgColor2={backgroundColor2}\n                                            $halfFill={halfFill}\n                                            $clickable={clickable}\n                                            $height={\n                                                variant === \"fixed\"\n                                                    ? cellLength * 12 +\n                                                      (cellLength - 1) * 4\n                                                    : 12\n                                            }\n                                            onClick={() =>\n                                                clickable &&\n                                                handleSlotClick(\n                                                    formattedDate,\n                                                    slot\n                                                )\n                                            }\n                                        ></TimeSlotComponent>\n                                    );\n                                })}\n                            </TimeSlotWrapper>\n                        );\n                    })}\n                </ColumnWeekCell>\n            </Expandable>\n        );\n    };\n\n    const renderCollapseExpandAll = () => {\n        if (\n            !maxVisibleCellHeight ||\n            !cellsRef.current ||\n            (actualHeight && actualHeight < maxVisibleCellHeight)\n        )\n            return;\n        return (\n            <CollapseExpandAllWrapper>\n                <CollapseExpandAllButton\n                    data-testid=\"time-bar-expand-collapse-button\"\n                    styleType=\"light\"\n                    onClick={handleExpandCollapseClick}\n                >\n                    <ChevronIcon $isExpanded={expandAll} />\n                    {`${expandAll ? \"Hide\" : \"Show\"} later times`}\n                </CollapseExpandAllButton>\n            </CollapseExpandAllWrapper>\n        );\n    };\n\n    return (\n        <Wrapper>\n            {renderHeader()}\n            {renderWeek()}\n            {renderTimeColumn()}\n            {renderTimeSlotBarCells()}\n            {renderCollapseExpandAll()}\n        </Wrapper>\n    );\n};\n"],"names":["calendarDate","disabledDates","selectedDate","onSelect","minDate","maxDate","startTime","endTime","maxVisibleCellHeight","slots","daySlots","interval","variant","enableSelection","onSlotClick","dateFormat","expandAll","setExpandAll","useState","hoverDay","setHoverDay","currentCalendarWeek","useMemo","CalendarHelper","generateDaysForCurrentWeek","flattenedSlots","Object","values","flat","minStartTime","_b","_a","minBy","maxEndTime","_d","_c","maxBy","numberOfCells","Math","ceil","DateHelper","getTimeDiffInMinutes","height","actualHeight","ref","cellsRef","useResizeDetector","expandableStyles","useSpring","generatedDaySlots","transformedDaySlots","entries","forEach","key","cellsArray","Array","fill","slot","startIndex","max","endIndex","min","cellLength","floor","assign","i","addMinutesToTime","halfFill","isEmpty","undefined","id","initializeAndFillSlots","reduce","result","obj","lastObj","length","generateFallbackCell","filter","populateEmptyCells","handleDayHover","value","handleDayMouseout","handleExpandCollapseClick","event","preventDefault","prevExpandValue","isDisabled","day","isWithinRange","dayjs","isDisabledDate","includes","format","prefix","toString","Date","getTime","clickable","styleAttributes","backgroundColor","V3_Colour","_jsxs","Wrapper","children","_jsx","HeaderCellWeekColumn","map","dayIndex","dayCellStyleProps","dateStartWithYear","disabled","isHoverEnabled","interactive","isHover","isSame","isSelected","labelType","circleLeft","circleRight","generateStyleProps","DayCell","date","handleDayClick","onHover","onHoverEnd","index","HeaderCellWeek","CellWeekText","weight","hasSetFirstAfternoonHour","formatTime","parsedTime","add","hour","minutes","amPm","formattedTime","TimeColumn","$height","_","TimeColumnWrapper","TimeColumnText","renderTimeColumn","Expandable","style","ColumnWeekCell","formattedDate","TimeSlotWrapper","styleType","backgroundColor2","TimeSlotComponent","$type","$variant","$bgColor","$bgColor2","$clickable","onClick","handleSlotClick","current","CollapseExpandAllWrapper","CollapseExpandAllButton","ChevronIcon","$isExpanded","renderCollapseExpandAll"],"mappings":"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"}
+{"version":3,"file":"time-slot-bar-week-days.js","sources":["../../../src/time-slot-bar-week/time-slot-bar-week-days.tsx"],"sourcesContent":["import { ChevronUpIcon } from \"@lifesg/react-icons\";\nimport { animated, useSpring } from \"@react-spring/web\";\nimport clsx from \"clsx\";\nimport type { Dayjs } from \"dayjs\";\nimport dayjs from \"dayjs\";\nimport isEmpty from \"lodash/isEmpty\";\nimport maxBy from \"lodash/maxBy\";\nimport minBy from \"lodash/minBy\";\nimport { useMemo, useRef, useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { Button } from \"../button\";\nimport type { InternalCalendarProps } from \"../shared/internal-calendar\";\nimport type { CellStyleProps } from \"../shared/internal-calendar/day-cell\";\nimport { DayCell } from \"../shared/internal-calendar/day-cell\";\nimport { Colour, formatUnitValue, useApplyStyle } from \"../theme\";\nimport type { TimeSlot } from \"../time-slot-bar/types\";\nimport { Typography } from \"../typography\";\nimport { DateHelper, useIsMounted } from \"../util\";\nimport { CalendarHelper } from \"../util/calendar-helper\";\nimport { StringHelper } from \"../util/string-helper\";\nimport { TimeHelper } from \"../util/time-helper\";\nimport { ROW_HEIGHT, SLOT_GAP } from \"./consts\";\nimport * as styles from \"./time-slot-bar-week-days.styles\";\nimport type { FocusableSlotMeta, TimeSlotCell } from \"./time-slot-cell\";\nimport { WeekTimeSlotCell } from \"./time-slot-cell\";\nimport type { TimeSlotCellsVariant } from \"./types\";\n\ninterface TimeSlotWeekDaysProps\n    extends Pick<\n        InternalCalendarProps,\n        \"disabledDates\" | \"minDate\" | \"maxDate\"\n    > {\n    selectedDate: string | undefined;\n    calendarDate: Dayjs;\n    onSelect: (value: Dayjs) => void;\n    slots: { [date: string]: TimeSlot[] };\n    startTime?: string | undefined;\n    endTime?: string | undefined;\n    maxVisibleCellHeight?: number | undefined;\n    interval?: number | undefined;\n    variant?: TimeSlotCellsVariant | undefined;\n    enableSelection?: boolean | undefined;\n    onSlotClick?: ((date: string, timeSlot: TimeSlot) => void) | undefined;\n}\n\nexport const TimeSlotBarWeekDays = ({\n    calendarDate,\n    disabledDates,\n    selectedDate,\n    onSelect,\n    minDate,\n    maxDate,\n    startTime,\n    endTime,\n    maxVisibleCellHeight,\n    slots: daySlots,\n    interval = 30,\n    variant = \"flexible\",\n    enableSelection = true,\n    onSlotClick,\n}: TimeSlotWeekDaysProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const dateFormat = \"YYYY-MM-DD\";\n    const [expandAll, setExpandAll] = useState<boolean>(false);\n    const [hoverDay, setHoverDay] = useState<Dayjs>();\n    const isMounted = useIsMounted();\n    const slotButtonRefs = useRef<Record<string, HTMLButtonElement | null>>({});\n    const timeColumnRef = useRef<HTMLDivElement>(null);\n    const currentCalendarWeek = useMemo((): Dayjs[] => {\n        return CalendarHelper.generateDaysForCurrentWeek(calendarDate);\n    }, [calendarDate]);\n\n    const flattenedSlots = Object.values(daySlots ?? {}).flat();\n    const minStartTime =\n        startTime ?? minBy(flattenedSlots, \"startTime\")?.startTime ?? \"00:00\";\n    const maxEndTime =\n        endTime ?? maxBy(flattenedSlots, \"endTime\")?.endTime ?? \"24:00\";\n    const numberOfCells = Math.ceil(\n        DateHelper.getTimeDiffInMinutes(minStartTime, maxEndTime) / interval\n    );\n\n    // React spring animation configuration\n    const { height: actualHeight = 0, ref: cellsRef } = useResizeDetector();\n    const hasCollapsedContent =\n        !!maxVisibleCellHeight && actualHeight > maxVisibleCellHeight;\n    const visibleRowCount =\n        maxVisibleCellHeight !== undefined\n            ? Math.max(\n                  1,\n                  Math.floor((maxVisibleCellHeight + SLOT_GAP) / ROW_HEIGHT)\n              )\n            : 0;\n    const collapsedHeight =\n        visibleRowCount > 0\n            ? visibleRowCount * ROW_HEIGHT - SLOT_GAP\n            : maxVisibleCellHeight;\n    const height = maxVisibleCellHeight\n        ? !hasCollapsedContent || expandAll\n            ? actualHeight\n            : collapsedHeight\n        : actualHeight;\n    const expandableStyles = useSpring({ height });\n\n    const generatedDaySlots = useMemo((): {\n        [date: string]: TimeSlotCell[];\n    } => {\n        if (daySlots) {\n            const transformedDaySlots: Record<string, TimeSlotCell[]> = {};\n            Object.entries(daySlots).forEach(([key, slots]) => {\n                const cellsArray = initializeAndFillSlots(slots);\n                transformedDaySlots[key] = populateEmptyCells(cellsArray);\n            });\n            return transformedDaySlots;\n        }\n        return {};\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [daySlots]);\n\n    const focusableSlotsByDate = useMemo(() => {\n        return currentCalendarWeek.reduce<Record<string, FocusableSlotMeta[]>>(\n            (result, day) => {\n                const formattedDate = day.format(dateFormat);\n\n                result[formattedDate] = getCellsForDate(formattedDate)\n                    .filter(\n                        (\n                            slot\n                        ): slot is TimeSlotCell & {\n                            isActualSlot: true;\n                            rowIndex: number;\n                        } => !!slot.isActualSlot && slot.rowIndex !== undefined\n                    )\n                    .map((slot) => ({\n                        key: `${formattedDate}-${slot.id}`,\n                        date: formattedDate,\n                        rowIndex: slot.rowIndex,\n                    }))\n                    .sort((a, b) => a.rowIndex - b.rowIndex);\n\n                return result;\n            },\n            {}\n        );\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [currentCalendarWeek, generatedDaySlots]);\n\n    useApplyStyle(timeColumnRef, {\n        [styles.tokens.timeColumn.height]: formatUnitValue(height, \"px\"),\n    });\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleDayClick = (value: Dayjs, isDisabled: boolean) => {\n        if (isDisabled || !enableSelection) return;\n\n        onSelect(value);\n    };\n\n    const handleDayHover = (value: Dayjs) => {\n        setHoverDay(value);\n    };\n\n    const handleDayHoverClear = () => {\n        setHoverDay(undefined);\n    };\n\n    const handleSlotClick = (date: string, slot: TimeSlot) => {\n        onSlotClick?.(date, slot);\n    };\n\n    const handleSlotButtonClick =\n        (date: string, slot: TimeSlot) =>\n        (event: React.MouseEvent<HTMLButtonElement>) => {\n            event.stopPropagation();\n\n            handleSlotClick(date, slot);\n        };\n\n    const handleExpandCollapseClick = (event: React.MouseEvent) => {\n        event.preventDefault();\n        setExpandAll((prevExpandValue) => !prevExpandValue);\n    };\n\n    const handleSlotKeyDown = (\n        event: React.KeyboardEvent<HTMLButtonElement>,\n        currentSlot: FocusableSlotMeta\n    ) => {\n        const sameColumnSlots = focusableSlotsByDate[currentSlot.date] ?? [];\n\n        const focusSlot = (slot?: FocusableSlotMeta) => {\n            if (!slot) return;\n            slotButtonRefs.current[slot.key]?.focus();\n        };\n\n        switch (event.key) {\n            case \"ArrowRight\":\n            case \"ArrowDown\": {\n                event.preventDefault();\n                const currentIndex = sameColumnSlots.findIndex(\n                    (slot) => slot.key === currentSlot.key\n                );\n                focusSlot(sameColumnSlots[currentIndex + 1]);\n                break;\n            }\n            case \"ArrowLeft\":\n            case \"ArrowUp\": {\n                event.preventDefault();\n                const currentIndex = sameColumnSlots.findIndex(\n                    (slot) => slot.key === currentSlot.key\n                );\n                focusSlot(sameColumnSlots[currentIndex - 1]);\n                break;\n            }\n            case \"Home\":\n                event.preventDefault();\n                focusSlot(sameColumnSlots[0]);\n                break;\n            case \"End\":\n                event.preventDefault();\n                focusSlot(sameColumnSlots[sameColumnSlots.length - 1]);\n                break;\n            case \"PageUp\":\n                event.preventDefault();\n                focusSlot(sameColumnSlots[0]);\n                break;\n            case \"PageDown\": {\n                event.preventDefault();\n                if (hasCollapsedContent && !expandAll) {\n                    setExpandAll(true);\n                    const lastVisibleSlot = [...sameColumnSlots]\n                        .reverse()\n                        .find((slot) => slot.rowIndex < visibleRowCount);\n                    focusSlot(lastVisibleSlot ?? sameColumnSlots[0]);\n                    break;\n                }\n\n                focusSlot(sameColumnSlots[sameColumnSlots.length - 1]);\n                break;\n            }\n            default:\n                break;\n        }\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const isDisabled = (day: Dayjs): boolean => {\n        const isWithinRange = CalendarHelper.isWithinRange(\n            day,\n            minDate ? dayjs(minDate) : undefined,\n            maxDate ? dayjs(maxDate) : undefined\n        );\n\n        const isDisabledDate =\n            (disabledDates && disabledDates.includes(day.format(dateFormat))) ??\n            false;\n\n        return !isWithinRange || isDisabledDate;\n    };\n\n    const generateStyleProps = (day: Dayjs) => {\n        const dateStartWithYear = day.format(dateFormat);\n        const disabled = isDisabled(day);\n        const dayCellStyleProps: CellStyleProps = {};\n        const isHoverEnabled = enableSelection && !disabled;\n\n        if (disabled) {\n            dayCellStyleProps.disabled = true;\n        }\n\n        dayCellStyleProps.interactive = enableSelection\n            ? isHoverEnabled\n            : false;\n\n        const isHover =\n            isHoverEnabled && hoverDay && day.isSame(hoverDay, \"day\");\n        const isSelected = [selectedDate].includes(dateStartWithYear);\n\n        if (isSelected && isHover) {\n            dayCellStyleProps.labelType = \"selected-hover\";\n            dayCellStyleProps.circleLeft = \"selected-hover-outline\";\n            dayCellStyleProps.circleRight = \"selected-hover-outline\";\n        } else if (isSelected) {\n            dayCellStyleProps.labelType = \"selected\";\n            dayCellStyleProps.circleLeft = \"selected-outline\";\n            dayCellStyleProps.circleRight = \"selected-outline\";\n        } else if (isHover) {\n            dayCellStyleProps.labelType = \"hover\";\n            dayCellStyleProps.circleLeft = \"hover-subtle\";\n            dayCellStyleProps.circleRight = \"hover-subtle\";\n        }\n\n        return dayCellStyleProps;\n    };\n\n    function generateFallbackCell(\n        prefix: string | number,\n        cellLength = 1\n    ): TimeSlotCell {\n        return {\n            id: `${prefix.toString()}-${new Date().getTime()}`,\n            startTime: \"\",\n            endTime: \"\",\n            clickable: false,\n            isActualSlot: false,\n            styleAttributes: {\n                backgroundColor: Colour[\"bg-stronger\"],\n            },\n            cellLength,\n        };\n    }\n\n    function getSlotAriaLabel(date: string, slot: TimeSlot) {\n        const { startTime: slotStartTime, endTime: slotEndTime } = slot;\n\n        return StringHelper.joinNonEmptyStrings([\n            dayjs(date).format(\"D MMMM YYYY dddd\"),\n            slotStartTime && slotEndTime\n                ? TimeHelper.formatTimeRange(slotStartTime, slotEndTime)\n                : undefined,\n            slot.label,\n            slot.clickable ?? true ? \"Available\" : \"Unavailable\",\n        ]);\n    }\n\n    function initializeAndFillSlots(slots: TimeSlot[]): TimeSlotCell[] {\n        const cellsArray = Array(numberOfCells).fill({});\n\n        slots.forEach((slot) => {\n            const startIndex = Math.max(\n                0,\n                DateHelper.getTimeDiffInMinutes(minStartTime, slot.startTime) /\n                    interval\n            );\n            const endIndex = Math.min(\n                numberOfCells,\n                DateHelper.getTimeDiffInMinutes(minStartTime, slot.endTime) /\n                    interval\n            );\n            const cellLength = Math.ceil(endIndex) - Math.floor(startIndex);\n\n            switch (variant) {\n                case \"fixed\":\n                    // Keep fixed slots as 1 long cell\n                    cellsArray[Math.floor(startIndex)] = {\n                        ...slot,\n                        isActualSlot: true,\n                        rowIndex: Math.floor(startIndex),\n                        cellLength: endIndex - startIndex,\n                    };\n                    break;\n                case \"flexible\":\n                    // Split long slot into multiple cells of length 1\n                    for (let i = 0; i < cellLength; i++) {\n                        const startTime = DateHelper.addMinutesToTime(\n                            minStartTime,\n                            Math.floor(startIndex + i) * interval\n                        );\n                        const endTime = DateHelper.addMinutesToTime(\n                            startTime,\n                            interval\n                        );\n\n                        let halfFill: \"default\" | \"top\" | \"bottom\";\n\n                        if (!isEmpty(cellsArray[Math.floor(startIndex + i)])) {\n                            // Previous cell extends into current cell, fill entire cell\n                            halfFill = \"default\";\n                        } else if (i === 0 && startIndex % 1 !== 0) {\n                            halfFill = \"top\";\n                        } else if (i === cellLength - 1 && endIndex % 1 !== 0) {\n                            halfFill = \"bottom\";\n                        } else {\n                            halfFill = \"default\";\n                        }\n\n                        cellsArray[Math.floor(startIndex + i)] = {\n                            ...slot,\n                            id: `${slot.id}-${i}`,\n                            startTime,\n                            endTime,\n                            isActualSlot: true,\n                            rowIndex: Math.floor(startIndex + i),\n                            cellLength: 1,\n                            halfFill,\n                        };\n                    }\n                    break;\n            }\n        });\n        return cellsArray;\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    function populateEmptyCells(cellsArray: any[]): TimeSlotCell[] {\n        let i = 0;\n        switch (variant) {\n            case \"fixed\":\n                // Truncate consecutive empty cells into 1 [{},{},{...},{},{}] -> [{},{...},{}]\n                cellsArray = cellsArray.reduce(\n                    (result, obj) => {\n                        const lastObj =\n                            result.length > 0\n                                ? result[result.length - 1]\n                                : result[0];\n                        if (isEmpty(obj) && isEmpty(lastObj)) {\n                            return result;\n                        }\n                        return [...result, obj];\n                    },\n                    [{}]\n                );\n\n                // Fill in empty cells with timings & corresponding cell lengths\n                while (i < cellsArray.length) {\n                    if (isEmpty(cellsArray[i])) {\n                        const startTime =\n                            cellsArray[i - 1]?.endTime ?? minStartTime;\n                        const endTime =\n                            cellsArray[i + 1]?.startTime ?? maxEndTime;\n                        if (startTime !== endTime) {\n                            const cellLength =\n                                DateHelper.getTimeDiffInMinutes(\n                                    startTime,\n                                    endTime\n                                ) / interval;\n                            cellsArray[i] = {\n                                ...generateFallbackCell(i),\n                                startTime,\n                                endTime,\n                                cellLength,\n                            };\n                        }\n                    }\n                    i++;\n                }\n                break;\n            case \"flexible\":\n                // Fill in individual empty cell with interval timings\n                while (i < cellsArray.length) {\n                    if (isEmpty(cellsArray[i])) {\n                        cellsArray[i] = generateFallbackCell(i);\n                        i++;\n                    } else {\n                        i += cellsArray[i].cellLength;\n                    }\n                }\n                break;\n        }\n        return cellsArray.filter(\n            (slot) => !isEmpty(slot) && slot.cellLength > 0\n        );\n    }\n\n    function getCellsForDate(formattedDate: string) {\n        return (\n            generatedDaySlots[formattedDate] ??\n            Array(variant === \"flexible\" ? numberOfCells : 1)\n                .fill(undefined)\n                .map((_, index) =>\n                    generateFallbackCell(\n                        index,\n                        variant === \"fixed\" ? numberOfCells : undefined\n                    )\n                )\n        );\n    }\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderWeek = () => {\n        return (\n            <div className={styles.headerCellWeekColumn} role=\"row\">\n                {currentCalendarWeek.map((day, index) => (\n                    <div\n                        key={`week-day-${index}`}\n                        className={styles.headerCellWeek}\n                        role=\"gridcell\"\n                    >\n                        <Typography.BodyXS\n                            weight={\"semibold\"}\n                            className={clsx(\n                                isDisabled(day) && styles.cellWeekTextDisabled\n                            )}\n                        >\n                            {dayjs(day).format(\"ddd\")}\n                        </Typography.BodyXS>\n                    </div>\n                ))}\n            </div>\n        );\n    };\n\n    const renderHeader = () => {\n        return (\n            <div\n                className={styles.headerCellWeekColumn}\n                role=\"row\"\n                onBlur={handleDayHoverClear}\n            >\n                {currentCalendarWeek.map((day, dayIndex) => {\n                    const dayCellStyleProps = generateStyleProps(day);\n\n                    return (\n                        <DayCell\n                            key={`day-${dayIndex}`}\n                            date={day}\n                            calendarDate={dayjs(selectedDate)}\n                            role=\"columnheader\"\n                            tabIndex={dayCellStyleProps.interactive ? 0 : -1}\n                            onSelect={() => {\n                                handleDayClick(\n                                    day,\n                                    !dayCellStyleProps.interactive\n                                );\n                            }}\n                            onHover={handleDayHover}\n                            onHoverEnd={handleDayHoverClear}\n                            onFocus={handleDayHover}\n                            {...dayCellStyleProps}\n                        ></DayCell>\n                    );\n                })}\n            </div>\n        );\n    };\n\n    const renderTimeColumn = () => {\n        let hasSetFirstAfternoonHour = false;\n\n        const formatTime = (index: number) => {\n            const parsedTime = dayjs(minStartTime, \"HH:mm\").add(\n                index * 4 * interval,\n                \"minutes\"\n            );\n            const hour = parsedTime.format(\"h\");\n            const minutes = parsedTime.format(\"mm\");\n            const amPm = parsedTime.format(\"a\");\n\n            let formattedTime = `${hour}${\n                minutes !== \"00\" ? ` ${minutes}` : \"\"\n            }`;\n\n            if (\n                !hasSetFirstAfternoonHour &&\n                amPm === \"pm\" &&\n                minutes === \"00\"\n            ) {\n                formattedTime += ` ${amPm}`;\n                hasSetFirstAfternoonHour = true;\n            }\n\n            return formattedTime;\n        };\n\n        return (\n            <div className={styles.timeColumn} ref={timeColumnRef} aria-hidden>\n                {Array(Math.ceil(numberOfCells / 4))\n                    .fill(undefined)\n                    .map((_, index) => (\n                        <div\n                            key={`time-${index}`}\n                            className={styles.timeColumnWrapper}\n                        >\n                            <div className={styles.timeColumnText}>\n                                {formatTime(index)}\n                            </div>\n                        </div>\n                    ))}\n            </div>\n        );\n    };\n\n    const renderSlotCell = (formattedDate: string, slot: TimeSlotCell) => {\n        return (\n            <WeekTimeSlotCell\n                key={slot.id}\n                formattedDate={formattedDate}\n                slot={slot}\n                variant={variant}\n                hasCollapsedContent={hasCollapsedContent}\n                expandAll={expandAll}\n                visibleRowCount={visibleRowCount}\n                onSlotClick={handleSlotClick}\n                getSlotAriaLabel={getSlotAriaLabel}\n                onSlotKeyDown={handleSlotKeyDown}\n                onSlotButtonClick={handleSlotButtonClick}\n                slotButtonRefs={slotButtonRefs}\n            />\n        );\n    };\n\n    const renderTimeSlotBarCells = () => {\n        return (\n            <animated.div\n                className={styles.expandable}\n                style={isMounted ? expandableStyles : undefined}\n                role=\"row\"\n            >\n                <div\n                    className={styles.columnWeekCell}\n                    ref={cellsRef}\n                    key={`week-cell-${calendarDate.format(dateFormat)}`}\n                >\n                    {currentCalendarWeek.map((day, dayIndex) => {\n                        const formattedDate = day.format(dateFormat);\n                        const cellsArray = getCellsForDate(formattedDate);\n                        return (\n                            <div\n                                key={`wrapper-${dayIndex}`}\n                                className={styles.timeSlotWrapper}\n                                role=\"gridcell\"\n                            >\n                                {cellsArray.map((slot) =>\n                                    renderSlotCell(formattedDate, slot)\n                                )}\n                            </div>\n                        );\n                    })}\n                </div>\n            </animated.div>\n        );\n    };\n\n    const renderCollapseExpandAll = () => {\n        if (!maxVisibleCellHeight || !cellsRef.current) return;\n        return (\n            <div className={styles.collapseExpandAllWrapper}>\n                <Button\n                    data-testid=\"time-bar-expand-collapse-button\"\n                    styleType=\"light\"\n                    sizeType=\"small\"\n                    aria-expanded={expandAll}\n                    onClick={handleExpandCollapseClick}\n                    className={styles.collapseExpandAllButton}\n                >\n                    <span className={styles.collapseExpandAllButtonContent}>\n                        <ChevronUpIcon\n                            className={clsx(\n                                styles.chevronIcon,\n                                expandAll && styles.chevronIconExpanded\n                            )}\n                        />\n                        {`${expandAll ? \"Hide\" : \"Show\"} later times`}\n                    </span>\n                </Button>\n            </div>\n        );\n    };\n\n    return (\n        <div className={styles.wrapper}>\n            <div className={styles.gridWrapper} role=\"grid\">\n                {renderHeader()}\n                {renderWeek()}\n                {renderTimeColumn()}\n                {renderTimeSlotBarCells()}\n            </div>\n            {renderCollapseExpandAll()}\n        </div>\n    );\n};\n"],"names":["calendarDate","disabledDates","selectedDate","onSelect","minDate","maxDate","startTime","endTime","maxVisibleCellHeight","slots","daySlots","interval","variant","enableSelection","onSlotClick","dateFormat","expandAll","setExpandAll","useState","hoverDay","setHoverDay","isMounted","useIsMounted","slotButtonRefs","useRef","timeColumnRef","currentCalendarWeek","useMemo","CalendarHelper","generateDaysForCurrentWeek","flattenedSlots","Object","values","flat","minStartTime","_b","_a","minBy","maxEndTime","_d","_c","maxBy","numberOfCells","Math","ceil","DateHelper","getTimeDiffInMinutes","height","actualHeight","ref","cellsRef","useResizeDetector","hasCollapsedContent","visibleRowCount","undefined","max","floor","SLOT_GAP","ROW_HEIGHT","collapsedHeight","expandableStyles","useSpring","generatedDaySlots","transformedDaySlots","entries","forEach","key","cellsArray","Array","fill","slot","startIndex","endIndex","min","cellLength","assign","isActualSlot","rowIndex","i","addMinutesToTime","halfFill","isEmpty","id","initializeAndFillSlots","reduce","result","obj","lastObj","length","generateFallbackCell","filter","populateEmptyCells","focusableSlotsByDate","day","formattedDate","format","getCellsForDate","map","date","sort","a","b","useApplyStyle","styles.tokens","timeColumn","formatUnitValue","handleDayHover","value","handleDayHoverClear","handleSlotClick","handleSlotButtonClick","event","stopPropagation","handleExpandCollapseClick","preventDefault","prevExpandValue","handleSlotKeyDown","currentSlot","sameColumnSlots","focusSlot","current","focus","currentIndex","findIndex","lastVisibleSlot","reverse","find","isDisabled","isWithinRange","dayjs","isDisabledDate","includes","prefix","toString","Date","getTime","clickable","styleAttributes","backgroundColor","Colour","getSlotAriaLabel","slotStartTime","slotEndTime","StringHelper","joinNonEmptyStrings","TimeHelper","formatTimeRange","label","_","index","_jsxs","className","styles.wrapper","children","styles.gridWrapper","role","_jsx","styles.headerCellWeekColumn","onBlur","dayIndex","dayCellStyleProps","dateStartWithYear","disabled","isHoverEnabled","interactive","isHover","isSame","isSelected","labelType","circleLeft","circleRight","generateStyleProps","DayCell","tabIndex","handleDayClick","onHover","onHoverEnd","onFocus","styles.headerCellWeek","Typography","BodyXS","weight","clsx","styles.cellWeekTextDisabled","hasSetFirstAfternoonHour","formatTime","parsedTime","add","hour","minutes","amPm","formattedTime","styles.timeColumn","styles.timeColumnWrapper","styles.timeColumnText","renderTimeColumn","animated","div","styles.expandable","style","styles.columnWeekCell","styles.timeSlotWrapper","WeekTimeSlotCell","onSlotKeyDown","onSlotButtonClick","renderSlotCell","styles.collapseExpandAllWrapper","Button","styleType","sizeType","onClick","styles.collapseExpandAllButton","styles.collapseExpandAllButtonContent","ChevronUpIcon","styles.chevronIcon","styles.chevronIconExpanded","renderCollapseExpandAll"],"mappings":"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"}

package/cjs/time-slot-bar-week/time-slot-bar-week-days.styles.js

@@ -0,0 +1,2 @@
+"use strict";require("./time-slot-bar-week-days.styles_evdvs9.css");exports.cellWeekTextDisabled="cm1jktd",exports.chevronIcon="cfi87m2",exports.chevronIconExpanded="ctpwme7",exports.collapseExpandAllButton="c5f9kvb",exports.collapseExpandAllButtonContent="c1hid59d",exports.collapseExpandAllWrapper="cyddonb",exports.columnWeekCell="crbcp6c",exports.expandable="eljtyj8",exports.gridWrapper="g1ijsvx5",exports.headerCellWeek="h1pfybo4",exports.headerCellWeekColumn="hfnrvvn",exports.timeColumn="t13lf4s5",exports.timeColumnText="t1v9il5y",exports.timeColumnWrapper="t4v35lv",exports.timeSlotComponent="t1wrn5bg",exports.timeSlotWrapper="t1xo1xfl",exports.tokens={timeColumn:{height:"--fds-internal-timeSlotBarWeek-timeColumn-height"},timeSlot:{height:"--fds-internal-timeSlotBarWeek-timeSlotComponent-height"}},exports.wrapper="w10itm92";
+//# sourceMappingURL=time-slot-bar-week-days.styles.js.map

package/cjs/time-slot-bar-week/time-slot-bar-week-days.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-slot-bar-week-days.styles.js","sources":["../../../src/time-slot-bar-week/time-slot-bar-week-days.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font, Motion, Radius, Spacing } from \"../theme\";\n\nexport const tokens = {\n    timeColumn: {\n        height: \"--fds-internal-timeSlotBarWeek-timeColumn-height\",\n    },\n    timeSlot: {\n        height: \"--fds-internal-timeSlotBarWeek-timeSlotComponent-height\",\n    },\n};\n\nexport const headerCellWeek = css`\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    pointer-events: none;\n    user-select: none;\n    margin-bottom: ${Spacing[\"spacing-8\"]};\n    flex: 1;\n`;\n\nexport const cellWeekTextDisabled = css`\n    color: ${Colour[\"text-disabled-subtlest\"]};\n`;\n\nexport const headerCellWeekColumn = css`\n    grid-column: 2 / -1;\n    display: flex;\n`;\n\nexport const wrapper = css`\n    width: 100%;\n`;\n\nexport const gridWrapper = css`\n    width: 100%;\n    display: grid;\n    grid-template-columns: auto repeat(7, 1fr);\n    column-gap: ${Spacing[\"spacing-4\"]};\n`;\n\nexport const expandable = css`\n    grid-column: 2 / -1;\n    overflow: hidden;\n`;\n\nexport const columnWeekCell = css`\n    display: flex;\n    gap: ${Spacing[\"spacing-4\"]};\n    transition: all ${Motion[\"duration-250\"]} ${Motion[\"ease-default\"]};\n    overflow: hidden;\n`;\n\nexport const timeColumn = css`\n    ${tokens.timeColumn.height}: initial;\n    display: flex;\n    flex-direction: column;\n    grid-row: 3 / auto;\n    gap: ${Spacing[\"spacing-4\"]};\n    width: 1.375rem;\n    transition: all ${Motion[\"duration-250\"]} ${Motion[\"ease-default\"]};\n    overflow: hidden;\n    height: var(${tokens.timeColumn.height});\n`;\n\nexport const timeColumnWrapper = css`\n    min-height: 60px;\n\n    &:last-child {\n        min-height: 0;\n    }\n`;\n\nexport const timeColumnText = css`\n    ${Font[\"body-xs-bold\"]}\n    color: ${Colour[\"text-subtler\"]};\n    text-align: center;\n    line-height: 12px; // align with cell on the same row\n\n    &:first-line {\n        font-size: ${Font.Spec[\"body-size-sm\"]};\n    }\n`;\n\nexport const timeSlotWrapper = css`\n    display: flex;\n    flex-direction: column;\n    flex: 1;\n    gap: ${Spacing[\"spacing-4\"]};\n`;\n\nexport const collapseExpandAllWrapper = css`\n    display: flex;\n    margin-top: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const collapseExpandAllButton = css`\n    width: 100%;\n    height: 2.5rem;\n`;\n\nexport const collapseExpandAllButtonContent = css`\n    display: flex;\n    align-items: center;\n    gap: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const chevronIcon = css`\n    transform: rotate(180deg);\n    transition: transform ${Motion[\"duration-250\"]} ${Motion[\"ease-default\"]};\n`;\n\nexport const chevronIconExpanded = css`\n    transform: rotate(0deg);\n`;\n\nexport const timeSlotComponent = css`\n    ${tokens.timeSlot.height}: initial;\n    flex-grow: 1;\n    max-width: 200px;\n    height: var(${tokens.timeSlot.height});\n    min-height: var(${tokens.timeSlot.height});\n    border-radius: ${Radius.xs};\n\n    &:focus-within {\n        outline: 2px solid ${Colour[\"focus-ring\"]};\n        outline-offset: 1px;\n    }\n`;\n"],"names":["timeColumn","height","timeSlot"],"mappings":"mIAuBiC,8BAsFT,sCAKQ,0CAhBI,iDAKO,4CAVN,iCA7CV,6BALJ,8BAPC,kCAvBG,wCAcM,6BA4BV,kCAoBI,qCARG,oCAmDA,mCAhCF,0BAlFN,CAClBA,WAAY,CACRC,OAAQ,oDAEZC,SAAU,CACND,OAAQ,4EAuBI"}