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

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"}

package/cjs/time-slot-bar-week/time-slot-bar-week-days.styles_evdvs9.css

@@ -0,0 +1,17 @@
+@layer fds{.h1pfybo4{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;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin-bottom:var(--fds-spacing-8);-webkit-flex:1;-ms-flex:1;flex:1;}
+.cm1jktd{color:var(--fds-colour-text-disabled-subtlest);}
+.hfnrvvn{-ms-grid-column:2/-1;grid-column:2/-1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
+.w10itm92{width:100%;}
+.g1ijsvx5{width:100%;display:-ms-grid;display:grid;-ms-grid-columns:auto repeat(7, 1fr);grid-template-columns:auto repeat(7, 1fr);-webkit-column-gap:var(--fds-spacing-4);column-gap:var(--fds-spacing-4);}
+.eljtyj8{-ms-grid-column:2/-1;grid-column:2/-1;overflow:hidden;}
+.crbcp6c{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:var(--fds-spacing-4);-webkit-transition:all var(--fds-motion-duration-250) var(--fds-motion-timing-ease-default);transition:all var(--fds-motion-duration-250) var(--fds-motion-timing-ease-default);overflow:hidden;}
+.t13lf4s5{--fds-internal-timeSlotBarWeek-timeColumn-height:initial;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-ms-grid-row:3/auto;grid-row:3/auto;gap:var(--fds-spacing-4);width:1.375rem;-webkit-transition:all var(--fds-motion-duration-250) var(--fds-motion-timing-ease-default);transition:all var(--fds-motion-duration-250) var(--fds-motion-timing-ease-default);overflow:hidden;height:var(--fds-internal-timeSlotBarWeek-timeColumn-height);}
+.t4v35lv{min-height:60px;}.t4v35lv:last-child{min-height:0;}
+.t1v9il5y{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-xs);font-weight:var(--fds-font-weight-bold);line-height:var(--fds-font-body-lh-xs);letter-spacing:var(--fds-font-body-ls-xs);color:var(--fds-colour-text-subtler);text-align:center;line-height:12px;}.t1v9il5y:first-line{font-size:var(--fds-font-body-size-sm);}
+.t1xo1xfl{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex:1;-ms-flex:1;flex:1;gap:var(--fds-spacing-4);}
+.cyddonb{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin-top:var(--fds-spacing-8);}
+.c5f9kvb{width:100%;height:2.5rem;}
+.c1hid59d{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;gap:var(--fds-spacing-8);}
+.cfi87m2{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);-webkit-transition:-webkit-transform var(--fds-motion-duration-250) var(--fds-motion-timing-ease-default);transition:transform var(--fds-motion-duration-250) var(--fds-motion-timing-ease-default);}
+.ctpwme7{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}
+.t1wrn5bg{--fds-internal-timeSlotBarWeek-timeSlotComponent-height:initial;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;max-width:200px;height:var(--fds-internal-timeSlotBarWeek-timeSlotComponent-height);min-height:var(--fds-internal-timeSlotBarWeek-timeSlotComponent-height);border-radius:var(--fds-radius-xs);}.t1wrn5bg:focus-within{outline:2px solid var(--fds-colour-focus-ring);outline-offset:1px;}}

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

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),a=require("react/jsx-runtime"),t=require("../external/dayjs/dayjs.min.js"),r=require("react"),i=require("../shared/internal-calendar/calendar-manager.js");require("../util/calendar-helper.js");var l=require("../util/date-helper.js");require("../util/string-helper.js");var n=require("./time-slot-bar-week.style.js"),s=require("./time-slot-bar-week-days.js");const o="YYYY-MM-DD";exports.TimeSlotBarWeek=d=>{var{disabledDates:u,onWeekDisplayChange:c,onChange:m,value:D,minDate:f,maxDate:k,startTime:h,endTime:g,slots:w,interval:b,variant:v,maxVisibleCellHeight:j,showNavigationHeader:C=!0,enableSelection:x,onSlotClick:y,currentCalendarDate:S}=d,q=e.__rest(d,["disabledDates","onWeekDisplayChange","onChange","value","minDate","maxDate","startTime","endTime","slots","interval","variant","maxVisibleCellHeight","showNavigationHeader","enableSelection","onSlotClick","currentCalendarDate"]);const[H,p]=r.useState(D),Y=r.useRef(null),O=r.useRef(void 0);r.useEffect((()=>{p(D)}),[D]);const T=e=>{const a=e.format(o);p(a),null==m||m(a)},M=(e,a)=>{y&&y(e,a)},W=e=>{if(c){const a={week:{firstDayOfWeek:e.startOf("week").format(o),lastDayOfWeek:e.endOf("week").format(o)},month:e.month()+1,year:e.year()};c(a)}};return a.jsx(n.Wrapper,Object.assign({},q,{children:a.jsx(i.CalendarManager,{ref:Y,dynamicHeight:!0,initialCalendarDate:l.DateHelper.toDayjs(H||S).endOf("week").format(o),selectedStartDate:H,getLeftArrowDate:e=>e.subtract(1,"week"),getRightArrowDate:e=>e.add(1,"week"),isLeftArrowDisabled:e=>!!f&&t.default(e).subtract(1,"week").isBefore(f,"week"),isRightArrowDisabled:e=>!!k&&t.default(e).add(1,"week").isAfter(k,"week"),onCalendarDateChange:e=>{O.current&&O.current.isSame(e,"week")||W(e),O.current=e},showNavigationHeader:C,minDate:f,maxDate:k,getMonthHeaderLabel:e=>t.default(e).endOf("week").format("MMM"),getYearHeaderLabel:e=>t.default(e).endOf("week").format("YYYY"),children:({calendarDate:e})=>(e=>a.jsx(s.TimeSlotBarWeekDays,{calendarDate:e,disabledDates:u,selectedDate:H,minDate:f,maxDate:k,startTime:h,endTime:g,onSelect:T,slots:w,interval:b,variant:v,maxVisibleCellHeight:j,enableSelection:x,onSlotClick:M}))(e)})}))};
+"use strict";var e=require("../_virtual/_tslib.js"),a=require("react/jsx-runtime"),t=require("../external/dayjs/dayjs.min.js"),r=require("react"),i=require("../shared/internal-calendar/calendar-manager.js");require("../util/calendar-helper.js");var l=require("../util/date-helper.js");require("../util/simple-id-generator.js"),require("../util/string-helper.js"),require("@react-aria/live-announcer");var n=require("./time-slot-bar-week.styles.js"),s=require("./time-slot-bar-week-days.js");const o="YYYY-MM-DD";exports.TimeSlotBarWeek=d=>{var{disabledDates:u,onWeekDisplayChange:c,onChange:m,value:D,minDate:f,maxDate:k,startTime:g,endTime:h,slots:w,interval:b,variant:v,maxVisibleCellHeight:j,showNavigationHeader:C=!0,enableSelection:x,onSlotClick:y,currentCalendarDate:q}=d,S=e.__rest(d,["disabledDates","onWeekDisplayChange","onChange","value","minDate","maxDate","startTime","endTime","slots","interval","variant","maxVisibleCellHeight","showNavigationHeader","enableSelection","onSlotClick","currentCalendarDate"]);const[p,H]=r.useState(D),Y=r.useRef(null),O=r.useRef(void 0);r.useEffect((()=>{H(D)}),[D]);const T=e=>{const a=e.format(o);H(a),null==m||m(a)},M=(e,a)=>{y&&y(e,a)},W=e=>{if(c){const a={week:{firstDayOfWeek:e.startOf("week").format(o),lastDayOfWeek:e.endOf("week").format(o)},month:e.month()+1,year:e.year()};c(a)}};return a.jsx("div",Object.assign({className:n.wrapper},S,{children:a.jsx(i.CalendarManager,{ref:Y,dynamicHeight:!0,initialCalendarDate:l.DateHelper.toDayjs(p||q).endOf("week").format(o),selectedStartDate:p,getLeftArrowDate:e=>e.subtract(1,"week"),getRightArrowDate:e=>e.add(1,"week"),isLeftArrowDisabled:e=>!!f&&t.default(e).subtract(1,"week").isBefore(f,"week"),isRightArrowDisabled:e=>!!k&&t.default(e).add(1,"week").isAfter(k,"week"),onCalendarDateChange:e=>{O.current&&O.current.isSame(e,"week")||W(e),O.current=e},showNavigationHeader:C,minDate:f,maxDate:k,getMonthHeaderLabel:e=>t.default(e).endOf("week").format("MMM"),getYearHeaderLabel:e=>t.default(e).endOf("week").format("YYYY"),isFocusable:!0,children:({calendarDate:e})=>(e=>a.jsx(s.TimeSlotBarWeekDays,{calendarDate:e,disabledDates:u,selectedDate:p,minDate:f,maxDate:k,startTime:g,endTime:h,onSelect:T,slots:w,interval:b,variant:v,maxVisibleCellHeight:j,enableSelection:x,onSlotClick:M}))(e)})}))};
 //# sourceMappingURL=time-slot-bar-week.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"time-slot-bar-week.js","sources":["../../../src/time-slot-bar-week/time-slot-bar-week.tsx"],"sourcesContent":["import type { Dayjs } from \"dayjs\";\nimport dayjs from \"dayjs\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport type { CalendarManagerRef } from \"../shared/internal-calendar\";\nimport { CalendarManager } from \"../shared/internal-calendar/calendar-manager\";\nimport type { TimeSlot } from \"../time-slot-bar\";\nimport { DateHelper } from \"../util\";\nimport { Wrapper } from \"./time-slot-bar-week.style\";\nimport { TimeSlotBarWeekDays } from \"./time-slot-bar-week-days\";\nimport type { TimeSlotBarWeekProps } from \"./types\";\n\nconst DATE_FORMAT = \"YYYY-MM-DD\";\n\nexport const TimeSlotBarWeek = ({\n    disabledDates,\n    onWeekDisplayChange,\n    onChange,\n    value,\n    minDate,\n    maxDate,\n    startTime,\n    endTime,\n    slots,\n    interval,\n    variant,\n    maxVisibleCellHeight,\n    showNavigationHeader = true,\n    enableSelection,\n    onSlotClick,\n    currentCalendarDate,\n    ...otherProps\n}: TimeSlotBarWeekProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [selectedDate, setSelectedDate] = useState<string | undefined>(value); // YYYY-MM-DD\n    const calendarManagerRef = useRef<CalendarManagerRef>(null);\n    const previousCalendarDate = useRef<Dayjs | undefined>(undefined);\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        setSelectedDate(value);\n    }, [value]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n\n    const handleDateSelect = (value: Dayjs) => {\n        const stringValue = value.format(DATE_FORMAT);\n        setSelectedDate(stringValue);\n        onChange?.(stringValue);\n    };\n\n    const handleOnSlotClick = (date: string, slot: TimeSlot) => {\n        if (onSlotClick) {\n            onSlotClick(date, slot);\n        }\n    };\n\n    const handleOnCalendarDateChange = (value: Dayjs) => {\n        if (\n            !previousCalendarDate.current ||\n            !previousCalendarDate.current.isSame(value, \"week\")\n        ) {\n            performDisplayChangeHandler(value);\n        }\n        previousCalendarDate.current = value;\n    };\n\n    // =============================================================================\n    // HELPERS\n    // =============================================================================\n\n    const performDisplayChangeHandler = (value: Dayjs) => {\n        if (onWeekDisplayChange) {\n            const returnValue = {\n                week: {\n                    firstDayOfWeek: value.startOf(\"week\").format(DATE_FORMAT),\n                    lastDayOfWeek: value.endOf(\"week\").format(DATE_FORMAT),\n                },\n                month: value.month() + 1,\n                year: value.year(),\n            };\n\n            onWeekDisplayChange(returnValue);\n        }\n    };\n\n    const getInitialCalendarDate = () => {\n        return DateHelper.toDayjs(selectedDate || currentCalendarDate)\n            .endOf(\"week\")\n            .format(DATE_FORMAT);\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderTimeSlotWeekDays = (calendarDate: dayjs.Dayjs) => {\n        return (\n            <TimeSlotBarWeekDays\n                calendarDate={calendarDate}\n                disabledDates={disabledDates}\n                selectedDate={selectedDate}\n                minDate={minDate}\n                maxDate={maxDate}\n                startTime={startTime}\n                endTime={endTime}\n                onSelect={handleDateSelect}\n                slots={slots}\n                interval={interval}\n                variant={variant}\n                maxVisibleCellHeight={maxVisibleCellHeight}\n                enableSelection={enableSelection}\n                onSlotClick={handleOnSlotClick}\n            />\n        );\n    };\n\n    return (\n        <Wrapper {...otherProps}>\n            <CalendarManager\n                ref={calendarManagerRef}\n                dynamicHeight\n                initialCalendarDate={getInitialCalendarDate()}\n                selectedStartDate={selectedDate}\n                getLeftArrowDate={(day) => day.subtract(1, \"week\")}\n                getRightArrowDate={(day) => day.add(1, \"week\")}\n                isLeftArrowDisabled={(calendarDate) =>\n                    !!minDate &&\n                    dayjs(calendarDate)\n                        .subtract(1, \"week\")\n                        .isBefore(minDate, \"week\")\n                }\n                isRightArrowDisabled={(calendarDate) =>\n                    !!maxDate &&\n                    dayjs(calendarDate).add(1, \"week\").isAfter(maxDate, \"week\")\n                }\n                onCalendarDateChange={handleOnCalendarDateChange}\n                showNavigationHeader={showNavigationHeader}\n                minDate={minDate}\n                maxDate={maxDate}\n                getMonthHeaderLabel={(calendarDate) =>\n                    dayjs(calendarDate).endOf(\"week\").format(\"MMM\")\n                }\n                getYearHeaderLabel={(calendarDate) =>\n                    dayjs(calendarDate).endOf(\"week\").format(\"YYYY\")\n                }\n            >\n                {({ calendarDate }) => {\n                    return renderTimeSlotWeekDays(calendarDate);\n                }}\n            </CalendarManager>\n        </Wrapper>\n    );\n};\n"],"names":["DATE_FORMAT","_a","disabledDates","onWeekDisplayChange","onChange","value","minDate","maxDate","startTime","endTime","slots","interval","variant","maxVisibleCellHeight","showNavigationHeader","enableSelection","onSlotClick","currentCalendarDate","otherProps","__rest","selectedDate","setSelectedDate","useState","calendarManagerRef","useRef","previousCalendarDate","undefined","useEffect","handleDateSelect","stringValue","format","handleOnSlotClick","date","slot","performDisplayChangeHandler","returnValue","week","firstDayOfWeek","startOf","lastDayOfWeek","endOf","month","year","_jsx","Wrapper","Object","assign","children","CalendarManager","ref","dynamicHeight","initialCalendarDate","DateHelper","toDayjs","selectedStartDate","getLeftArrowDate","day","subtract","getRightArrowDate","add","isLeftArrowDisabled","calendarDate","dayjs","isBefore","isRightArrowDisabled","isAfter","onCalendarDateChange","current","isSame","getMonthHeaderLabel","getYearHeaderLabel","TimeSlotBarWeekDays","onSelect","renderTimeSlotWeekDays"],"mappings":"0ZAYA,MAAMA,EAAc,qCAEYC,IAAA,IAAAC,cAC5BA,EAAaC,oBACbA,EAAmBC,SACnBA,EAAQC,MACRA,EAAKC,QACLA,EAAOC,QACPA,EAAOC,UACPA,EAASC,QACTA,EAAOC,MACPA,EAAKC,SACLA,EAAQC,QACRA,EAAOC,qBACPA,EAAoBC,qBACpBA,GAAuB,EAAIC,gBAC3BA,EAAeC,YACfA,EAAWC,oBACXA,GAAmBhB,EAChBiB,EAAUC,SAAAlB,EAjBe,uOAsB5B,MAAOmB,EAAcC,GAAmBC,EAAAA,SAA6BjB,GAC/DkB,EAAqBC,EAAAA,OAA2B,MAChDC,EAAuBD,EAAAA,YAA0BE,GAKvDC,EAAAA,WAAU,KACNN,EAAgBhB,EAAM,GACvB,CAACA,IAMJ,MAAMuB,EAAoBvB,IACtB,MAAMwB,EAAcxB,EAAMyB,OAAO9B,GACjCqB,EAAgBQ,GAChBzB,SAAAA,EAAWyB,EAAY,EAGrBE,EAAoB,CAACC,EAAcC,KACjCjB,GACAA,EAAYgB,EAAMC,EACtB,EAiBEC,EAA+B7B,IACjC,GAAIF,EAAqB,CACrB,MAAMgC,EAAc,CAChBC,KAAM,CACFC,eAAgBhC,EAAMiC,QAAQ,QAAQR,OAAO9B,GAC7CuC,cAAelC,EAAMmC,MAAM,QAAQV,OAAO9B,IAE9CyC,MAAOpC,EAAMoC,QAAU,EACvBC,KAAMrC,EAAMqC,QAGhBvC,EAAoBgC,EACxB,GAiCJ,OACIQ,EAAAA,IAACC,EAAAA,QAAOC,OAAAC,OAAA,GAAK5B,EAAU,CAAA6B,SACnBJ,EAAAA,IAACK,EAAAA,gBAAe,CACZC,IAAK1B,EACL2B,eAAa,EACbC,oBAlCDC,EAAAA,WAAWC,QAAQjC,GAAgBH,GACrCuB,MAAM,QACNV,OAAO9B,GAiCJsD,kBAAmBlC,EACnBmC,iBAAmBC,GAAQA,EAAIC,SAAS,EAAG,QAC3CC,kBAAoBF,GAAQA,EAAIG,IAAI,EAAG,QACvCC,oBAAsBC,KAChBvD,GACFwD,EAAAA,QAAMD,GACDJ,SAAS,EAAG,QACZM,SAASzD,EAAS,QAE3B0D,qBAAuBH,KACjBtD,GACFuD,UAAMD,GAAcF,IAAI,EAAG,QAAQM,QAAQ1D,EAAS,QAExD2D,qBA9EwB7D,IAE3BoB,EAAqB0C,SACrB1C,EAAqB0C,QAAQC,OAAO/D,EAAO,SAE5C6B,EAA4B7B,GAEhCoB,EAAqB0C,QAAU9D,CAAK,EAwE5BS,qBAAsBA,EACtBR,QAASA,EACTC,QAASA,EACT8D,oBAAsBR,GAClBC,EAAAA,QAAMD,GAAcrB,MAAM,QAAQV,OAAO,OAE7CwC,mBAAqBT,GACjBC,EAAAA,QAAMD,GAAcrB,MAAM,QAAQV,OAAO,QAAOiB,SAGnD,EAAGc,kBAnDe,CAACA,GAExBlB,EAAAA,IAAC4B,EAAAA,oBAAmB,CAChBV,aAAcA,EACd3D,cAAeA,EACfkB,aAAcA,EACdd,QAASA,EACTC,QAASA,EACTC,UAAWA,EACXC,QAASA,EACT+D,SAAU5C,EACVlB,MAAOA,EACPC,SAAUA,EACVC,QAASA,EACTC,qBAAsBA,EACtBE,gBAAiBA,EACjBC,YAAae,IAoCF0C,CAAuBZ,OAGhC"}
+{"version":3,"file":"time-slot-bar-week.js","sources":["../../../src/time-slot-bar-week/time-slot-bar-week.tsx"],"sourcesContent":["import type { Dayjs } from \"dayjs\";\nimport dayjs from \"dayjs\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport type { CalendarManagerRef } from \"../shared/internal-calendar\";\nimport { CalendarManager } from \"../shared/internal-calendar/calendar-manager\";\nimport type { TimeSlot } from \"../time-slot-bar\";\nimport { DateHelper } from \"../util\";\nimport * as styles from \"./time-slot-bar-week.styles\";\nimport { TimeSlotBarWeekDays } from \"./time-slot-bar-week-days\";\nimport type { TimeSlotBarWeekProps } from \"./types\";\n\nconst DATE_FORMAT = \"YYYY-MM-DD\";\n\n// @catalog\n/**\n * A week calendar grid with a time axis, rendering detailed slot bars within\n * each day column.\n *\n * Use `TimeSlotBarWeek` for detailed time-of-day scheduling where each cell\n * represents a configurable time interval. For a simpler day-level overview\n * without a time axis, use `TimeSlotWeekView` instead.\n * @keywords availability, calendar, scheduling, weekly\n */\nexport const TimeSlotBarWeek = ({\n    disabledDates,\n    onWeekDisplayChange,\n    onChange,\n    value,\n    minDate,\n    maxDate,\n    startTime,\n    endTime,\n    slots,\n    interval,\n    variant,\n    maxVisibleCellHeight,\n    showNavigationHeader = true,\n    enableSelection,\n    onSlotClick,\n    currentCalendarDate,\n    ...otherProps\n}: TimeSlotBarWeekProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [selectedDate, setSelectedDate] = useState<string | undefined>(value); // YYYY-MM-DD\n    const calendarManagerRef = useRef<CalendarManagerRef>(null);\n    const previousCalendarDate = useRef<Dayjs | undefined>(undefined);\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        setSelectedDate(value);\n    }, [value]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n\n    const handleDateSelect = (value: Dayjs) => {\n        const stringValue = value.format(DATE_FORMAT);\n        setSelectedDate(stringValue);\n        onChange?.(stringValue);\n    };\n\n    const handleOnSlotClick = (date: string, slot: TimeSlot) => {\n        if (onSlotClick) {\n            onSlotClick(date, slot);\n        }\n    };\n\n    const handleOnCalendarDateChange = (value: Dayjs) => {\n        if (\n            !previousCalendarDate.current ||\n            !previousCalendarDate.current.isSame(value, \"week\")\n        ) {\n            performDisplayChangeHandler(value);\n        }\n        previousCalendarDate.current = value;\n    };\n\n    // =============================================================================\n    // HELPERS\n    // =============================================================================\n\n    const performDisplayChangeHandler = (value: Dayjs) => {\n        if (onWeekDisplayChange) {\n            const returnValue = {\n                week: {\n                    firstDayOfWeek: value.startOf(\"week\").format(DATE_FORMAT),\n                    lastDayOfWeek: value.endOf(\"week\").format(DATE_FORMAT),\n                },\n                month: value.month() + 1,\n                year: value.year(),\n            };\n\n            onWeekDisplayChange(returnValue);\n        }\n    };\n\n    const getInitialCalendarDate = () => {\n        return DateHelper.toDayjs(selectedDate || currentCalendarDate)\n            .endOf(\"week\")\n            .format(DATE_FORMAT);\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderTimeSlotWeekDays = (calendarDate: dayjs.Dayjs) => {\n        return (\n            <TimeSlotBarWeekDays\n                calendarDate={calendarDate}\n                disabledDates={disabledDates}\n                selectedDate={selectedDate}\n                minDate={minDate}\n                maxDate={maxDate}\n                startTime={startTime}\n                endTime={endTime}\n                onSelect={handleDateSelect}\n                slots={slots}\n                interval={interval}\n                variant={variant}\n                maxVisibleCellHeight={maxVisibleCellHeight}\n                enableSelection={enableSelection}\n                onSlotClick={handleOnSlotClick}\n            />\n        );\n    };\n\n    return (\n        <div className={styles.wrapper} {...otherProps}>\n            <CalendarManager\n                ref={calendarManagerRef}\n                dynamicHeight\n                initialCalendarDate={getInitialCalendarDate()}\n                selectedStartDate={selectedDate}\n                getLeftArrowDate={(day) => day.subtract(1, \"week\")}\n                getRightArrowDate={(day) => day.add(1, \"week\")}\n                isLeftArrowDisabled={(calendarDate) =>\n                    !!minDate &&\n                    dayjs(calendarDate)\n                        .subtract(1, \"week\")\n                        .isBefore(minDate, \"week\")\n                }\n                isRightArrowDisabled={(calendarDate) =>\n                    !!maxDate &&\n                    dayjs(calendarDate).add(1, \"week\").isAfter(maxDate, \"week\")\n                }\n                onCalendarDateChange={handleOnCalendarDateChange}\n                showNavigationHeader={showNavigationHeader}\n                minDate={minDate}\n                maxDate={maxDate}\n                getMonthHeaderLabel={(calendarDate) =>\n                    dayjs(calendarDate).endOf(\"week\").format(\"MMM\")\n                }\n                getYearHeaderLabel={(calendarDate) =>\n                    dayjs(calendarDate).endOf(\"week\").format(\"YYYY\")\n                }\n                isFocusable={true}\n            >\n                {({ calendarDate }) => {\n                    return renderTimeSlotWeekDays(calendarDate);\n                }}\n            </CalendarManager>\n        </div>\n    );\n};\n"],"names":["DATE_FORMAT","_a","disabledDates","onWeekDisplayChange","onChange","value","minDate","maxDate","startTime","endTime","slots","interval","variant","maxVisibleCellHeight","showNavigationHeader","enableSelection","onSlotClick","currentCalendarDate","otherProps","__rest","selectedDate","setSelectedDate","useState","calendarManagerRef","useRef","previousCalendarDate","undefined","useEffect","handleDateSelect","stringValue","format","handleOnSlotClick","date","slot","performDisplayChangeHandler","returnValue","week","firstDayOfWeek","startOf","lastDayOfWeek","endOf","month","year","_jsx","Object","assign","className","styles.wrapper","children","CalendarManager","ref","dynamicHeight","initialCalendarDate","DateHelper","toDayjs","selectedStartDate","getLeftArrowDate","day","subtract","getRightArrowDate","add","isLeftArrowDisabled","calendarDate","dayjs","isBefore","isRightArrowDisabled","isAfter","onCalendarDateChange","current","isSame","getMonthHeaderLabel","getYearHeaderLabel","isFocusable","TimeSlotBarWeekDays","onSelect","renderTimeSlotWeekDays"],"mappings":"2eAYA,MAAMA,EAAc,qCAYYC,IAAA,IAAAC,cAC5BA,EAAaC,oBACbA,EAAmBC,SACnBA,EAAQC,MACRA,EAAKC,QACLA,EAAOC,QACPA,EAAOC,UACPA,EAASC,QACTA,EAAOC,MACPA,EAAKC,SACLA,EAAQC,QACRA,EAAOC,qBACPA,EAAoBC,qBACpBA,GAAuB,EAAIC,gBAC3BA,EAAeC,YACfA,EAAWC,oBACXA,GAAmBhB,EAChBiB,EAAUC,SAAAlB,EAjBe,uOAsB5B,MAAOmB,EAAcC,GAAmBC,EAAAA,SAA6BjB,GAC/DkB,EAAqBC,EAAAA,OAA2B,MAChDC,EAAuBD,EAAAA,YAA0BE,GAKvDC,EAAAA,WAAU,KACNN,EAAgBhB,EAAM,GACvB,CAACA,IAMJ,MAAMuB,EAAoBvB,IACtB,MAAMwB,EAAcxB,EAAMyB,OAAO9B,GACjCqB,EAAgBQ,GAChBzB,SAAAA,EAAWyB,EAAY,EAGrBE,EAAoB,CAACC,EAAcC,KACjCjB,GACAA,EAAYgB,EAAMC,EACtB,EAiBEC,EAA+B7B,IACjC,GAAIF,EAAqB,CACrB,MAAMgC,EAAc,CAChBC,KAAM,CACFC,eAAgBhC,EAAMiC,QAAQ,QAAQR,OAAO9B,GAC7CuC,cAAelC,EAAMmC,MAAM,QAAQV,OAAO9B,IAE9CyC,MAAOpC,EAAMoC,QAAU,EACvBC,KAAMrC,EAAMqC,QAGhBvC,EAAoBgC,EACxB,GAiCJ,OACIQ,EAAAA,IAAA,MAAAC,OAAAC,OAAA,CAAKC,UAAWC,EAAAA,SAAoB7B,EAAU,CAAA8B,SAC1CL,MAACM,EAAAA,gBAAe,CACZC,IAAK3B,EACL4B,eAAa,EACbC,oBAlCDC,EAAAA,WAAWC,QAAQlC,GAAgBH,GACrCuB,MAAM,QACNV,OAAO9B,GAiCJuD,kBAAmBnC,EACnBoC,iBAAmBC,GAAQA,EAAIC,SAAS,EAAG,QAC3CC,kBAAoBF,GAAQA,EAAIG,IAAI,EAAG,QACvCC,oBAAsBC,KAChBxD,GACFyD,EAAAA,QAAMD,GACDJ,SAAS,EAAG,QACZM,SAAS1D,EAAS,QAE3B2D,qBAAuBH,KACjBvD,GACFwD,UAAMD,GAAcF,IAAI,EAAG,QAAQM,QAAQ3D,EAAS,QAExD4D,qBA9EwB9D,IAE3BoB,EAAqB2C,SACrB3C,EAAqB2C,QAAQC,OAAOhE,EAAO,SAE5C6B,EAA4B7B,GAEhCoB,EAAqB2C,QAAU/D,CAAK,EAwE5BS,qBAAsBA,EACtBR,QAASA,EACTC,QAASA,EACT+D,oBAAsBR,GAClBC,EAAAA,QAAMD,GAActB,MAAM,QAAQV,OAAO,OAE7CyC,mBAAqBT,GACjBC,EAAAA,QAAMD,GAActB,MAAM,QAAQV,OAAO,QAE7C0C,aAAa,EAAIxB,SAEhB,EAAGc,kBApDe,CAACA,GAExBnB,EAAAA,IAAC8B,EAAAA,oBAAmB,CAChBX,aAAcA,EACd5D,cAAeA,EACfkB,aAAcA,EACdd,QAASA,EACTC,QAASA,EACTC,UAAWA,EACXC,QAASA,EACTiE,SAAU9C,EACVlB,MAAOA,EACPC,SAAUA,EACVC,QAASA,EACTC,qBAAsBA,EACtBE,gBAAiBA,EACjBC,YAAae,IAqCF4C,CAAuBb,OAGpC"}

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

@@ -0,0 +1,2 @@
+"use strict";require("./time-slot-bar-week.styles_11ybf42.css");exports.wrapper="w1qkct16";
+//# sourceMappingURL=time-slot-bar-week.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"time-slot-bar-week.styles.js","sources":["../../../src/time-slot-bar-week/time-slot-bar-week.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport * as calendarDropdownStyles from \"../shared/internal-calendar/calendar-dropdown.styles\";\nimport { MediaQuery, Spacing } from \"../theme\";\n\nexport const wrapper = css`\n    ${calendarDropdownStyles.tokens.headerBottomSpacing}: ${Spacing[\n        \"spacing-8\"\n    ]};\n\n    ${MediaQuery.MaxWidth.sm} {\n        ${calendarDropdownStyles.tokens.horizontalInset}: ${Spacing[\n            \"spacing-20\"\n        ]};\n    }\n\n    min-width: 18.5rem;\n`;\n"],"names":[],"mappings":"kHAKoB"}

package/cjs/time-slot-bar-week/time-slot-bar-week.styles_11ybf42.css

@@ -0,0 +1 @@
+@layer fds{.w1qkct16{--fds-internal-calendarDropdown-headerBottomSpacing:var(--fds-spacing-8);min-width:18.5rem;}:where(body.fds-breakpoint-sm-max) .w1qkct16{--fds-internal-calendarDropdown-horizontalInset:var(--fds-spacing-20);}}

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

@@ -0,0 +1,2 @@
+"use strict";var e=require("react/jsx-runtime"),t=require("react"),r=require("../shared/accessibility/index.js"),l=require("../shared/time-slot/time-slot.js");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"),require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js");var o=require("../theme/utils/use-apply-styles.js");require("../theme/utils/use-media-query.js");var s=require("./consts.js"),n=require("./time-slot-bar-week-days.styles.js");exports.WeekTimeSlotCell=({formattedDate:a,slot:u,variant:d,hasCollapsedContent:c,expandAll:m,visibleRowCount:h,onSlotClick:y,getSlotAriaLabel:b,onSlotKeyDown:j,onSlotButtonClick:q,slotButtonRefs:k})=>{var p;const{id:v,clickable:x=!0,isActualSlot:C,styleAttributes:S,cellLength:f,halfFill:T}=u,{styleType:g="default",backgroundColor:w,backgroundColor2:A}=S,H=`${a}-${v}`,I=c&&!m&&(null!==(p=u.rowIndex)&&void 0!==p?p:0)>=h,L="fixed"===d?f*s.SLOT_HEIGHT+(f-1)*s.SLOT_GAP:s.SLOT_HEIGHT,D=t.useRef(null);return o.useApplyStyle(D,{[n.tokens.timeSlot.height]:i.formatUnitValue(L,"px")}),e.jsx(l.TimeSlot,{ref:D,styleType:g,bgColor:w,bgColor2:A,clickable:x,fill:T,className:n.timeSlotComponent,onClick:()=>x&&y(a,u),children:C&&e.jsx(r.VisuallyHidden,{inert:r.inertValue(I),children:e.jsx("button",{type:"button",ref:e=>{k.current[H]=e},"aria-disabled":!x,"aria-label":b(a,u),onKeyDown:e=>{var t;return j(e,{key:H,date:a,rowIndex:null!==(t=u.rowIndex)&&void 0!==t?t:0})},onClick:x?q(a,u):void 0})})})};
+//# sourceMappingURL=time-slot-cell.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"time-slot-cell.js","sources":["../../../src/time-slot-bar-week/time-slot-cell.tsx"],"sourcesContent":["import type React from \"react\";\nimport { useRef } from \"react\";\n\nimport { inertValue, VisuallyHidden } from \"../shared/accessibility\";\nimport { TimeSlot as TimeSlotComponent } from \"../shared/time-slot\";\nimport { formatUnitValue, useApplyStyle } from \"../theme\";\nimport type { TimeSlot } from \"../time-slot-bar/types\";\nimport { SLOT_GAP, SLOT_HEIGHT } from \"./consts\";\nimport * as styles from \"./time-slot-bar-week-days.styles\";\nimport type { TimeSlotCellsVariant } from \"./types\";\n\nexport interface TimeSlotCell extends TimeSlot {\n    cellLength: number;\n    halfFill?: \"default\" | \"top\" | \"bottom\" | undefined;\n    isActualSlot?: boolean | undefined;\n    rowIndex?: number | undefined;\n}\n\nexport interface FocusableSlotMeta {\n    key: string;\n    date: string;\n    rowIndex: number;\n}\n\nexport interface WeekTimeSlotCellProps {\n    formattedDate: string;\n    slot: TimeSlotCell;\n    variant: TimeSlotCellsVariant;\n    hasCollapsedContent: boolean;\n    expandAll: boolean;\n    visibleRowCount: number;\n    onSlotClick: (date: string, slot: TimeSlot) => void;\n    getSlotAriaLabel: (date: string, slot: TimeSlot) => string;\n    onSlotKeyDown: (\n        event: React.KeyboardEvent<HTMLButtonElement>,\n        meta: FocusableSlotMeta\n    ) => void;\n    onSlotButtonClick: (\n        date: string,\n        slot: TimeSlot\n    ) => (event: React.MouseEvent<HTMLButtonElement>) => void;\n    slotButtonRefs: React.MutableRefObject<\n        Record<string, HTMLButtonElement | null>\n    >;\n}\n\nexport const WeekTimeSlotCell = ({\n    formattedDate,\n    slot,\n    variant,\n    hasCollapsedContent,\n    expandAll,\n    visibleRowCount,\n    onSlotClick,\n    getSlotAriaLabel,\n    onSlotKeyDown,\n    onSlotButtonClick,\n    slotButtonRefs,\n}: WeekTimeSlotCellProps) => {\n    const {\n        id,\n        clickable = true,\n        isActualSlot,\n        styleAttributes,\n        cellLength,\n        halfFill,\n    } = slot;\n    const {\n        styleType = \"default\",\n        backgroundColor,\n        backgroundColor2,\n    } = styleAttributes;\n    const slotId = `${formattedDate}-${id}`;\n    const isCollapsedSlot =\n        hasCollapsedContent &&\n        !expandAll &&\n        (slot.rowIndex ?? 0) >= visibleRowCount;\n\n    const slotHeight =\n        variant === \"fixed\"\n            ? cellLength * SLOT_HEIGHT + (cellLength - 1) * SLOT_GAP\n            : SLOT_HEIGHT;\n\n    const slotRef = useRef<HTMLDivElement>(null);\n    useApplyStyle(slotRef, {\n        [styles.tokens.timeSlot.height]: formatUnitValue(slotHeight, \"px\"),\n    });\n\n    return (\n        <TimeSlotComponent\n            ref={slotRef}\n            styleType={styleType}\n            bgColor={backgroundColor}\n            bgColor2={backgroundColor2}\n            clickable={clickable}\n            fill={halfFill}\n            className={styles.timeSlotComponent}\n            onClick={() => clickable && onSlotClick(formattedDate, slot)}\n        >\n            {isActualSlot && (\n                <VisuallyHidden inert={inertValue(isCollapsedSlot)}>\n                    <button\n                        type=\"button\"\n                        ref={(element) => {\n                            slotButtonRefs.current[slotId] = element;\n                        }}\n                        aria-disabled={!clickable}\n                        aria-label={getSlotAriaLabel(formattedDate, slot)}\n                        onKeyDown={(event) =>\n                            onSlotKeyDown(event, {\n                                key: slotId,\n                                date: formattedDate,\n                                rowIndex: slot.rowIndex ?? 0,\n                            })\n                        }\n                        onClick={\n                            clickable\n                                ? onSlotButtonClick(formattedDate, slot)\n                                : undefined\n                        }\n                    />\n                </VisuallyHidden>\n            )}\n        </TimeSlotComponent>\n    );\n};\n"],"names":["formattedDate","slot","variant","hasCollapsedContent","expandAll","visibleRowCount","onSlotClick","getSlotAriaLabel","onSlotKeyDown","onSlotButtonClick","slotButtonRefs","id","clickable","isActualSlot","styleAttributes","cellLength","halfFill","styleType","backgroundColor","backgroundColor2","slotId","isCollapsedSlot","_a","rowIndex","slotHeight","SLOT_HEIGHT","SLOT_GAP","slotRef","useRef","useApplyStyle","styles.tokens","timeSlot","height","formatUnitValue","_jsx","TimeSlotComponent","ref","bgColor","bgColor2","fill","className","styles.timeSlotComponent","onClick","children","VisuallyHidden","inert","inertValue","type","element","current","onKeyDown","event","key","date","undefined"],"mappings":"woBA8CgC,EAC5BA,gBACAC,OACAC,UACAC,sBACAC,YACAC,kBACAC,cACAC,mBACAC,gBACAC,oBACAC,2BAEA,MAAMC,GACFA,EAAEC,UACFA,GAAY,EAAIC,aAChBA,EAAYC,gBACZA,EAAeC,WACfA,EAAUC,SACVA,GACAf,GACEgB,UACFA,EAAY,UAASC,gBACrBA,EAAeC,iBACfA,GACAL,EACEM,EAAS,GAAGpB,KAAiBW,IAC7BU,EACFlB,IACCC,YACAkB,EAAArB,EAAKsB,wBAAY,IAAMlB,EAEtBmB,EACU,UAAZtB,EACMa,EAAaU,EAAAA,aAAeV,EAAa,GAAKW,EAAAA,SAC9CD,EAAAA,YAEJE,EAAUC,EAAAA,OAAuB,MAKvC,OAJAC,EAAAA,cAAcF,EAAS,CACnB,CAACG,EAAAA,OAAcC,SAASC,QAASC,EAAAA,gBAAgBT,EAAY,QAI7DU,EAAAA,IAACC,EAAAA,SAAiB,CACdC,IAAKT,EACLV,UAAWA,EACXoB,QAASnB,EACToB,SAAUnB,EACVP,UAAWA,EACX2B,KAAMvB,EACNwB,UAAWC,EAAAA,kBACXC,QAAS,IAAM9B,GAAaN,EAAYN,EAAeC,GAAK0C,SAE3D9B,GACGqB,MAACU,EAAAA,eAAc,CAACC,MAAOC,EAAAA,WAAWzB,YAC9Ba,EAAAA,IAAA,SAAA,CACIa,KAAK,SACLX,IAAMY,IACFtC,EAAeuC,QAAQ7B,GAAU4B,CAAO,mBAE5BpC,EAAS,aACbL,EAAiBP,EAAeC,GAC5CiD,UAAYC,UACR,OAAA3C,EAAc2C,EAAO,CACjBC,IAAKhC,EACLiC,KAAMrD,EACNuB,iBAAUD,EAAArB,EAAKsB,wBAAY,GAC7B,EAENmB,QACI9B,EACMH,EAAkBT,EAAeC,QACjCqD,OAKN"}

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

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),l=require("../external/dayjs/dayjs.min.js"),r=require("../external/dayjs/plugin/isBetween.js"),t=require("react"),a=require("../shared/internal-calendar/day-cell/day-cell.js"),s=require("../time-slot-bar/time-slot-bar.styles.js"),i=require("../util/calendar-helper.js"),o=require("../v3_theme/index.js"),n=require("./time-slot-week-days.style.js");l.default.extend(r.default);const c="YYYY-MM-DD",d={id:"1",startTime:"",endTime:"",clickable:!1,styleAttributes:{color:"",styleType:"stripes",backgroundColor:o.V3_Colour["bg-stronger"],backgroundColor2:o.V3_Colour["bg-strongest"]}};exports.TimeSlotWeekDays=({calendarDate:r,disabledDates:o,selectedDate:u,onSelect:b,minDate:y,maxDate:m,slots:p,enableSelection:h=!0,onSlotClick:j})=>{const v=t.useMemo((()=>i.CalendarHelper.generateDaysForCurrentWeek(r)),[r]),[x,C]=t.useState(),T=e=>{C(e)},g=()=>{C(void 0)},f=e=>{const r=e.format(c),t=(e=>{const r=i.CalendarHelper.isWithinRange(e,y?l.default(y):void 0,m?l.default(m):void 0),t=!!o&&o.includes(e.format(c));return!r||t})(e),a=h&&!t,s=a&&x&&e.isSame(x,"day"),n=[u].includes(r),d={labelType:"available",interactive:h?a:null};return t&&(d.disabled=!0,d.labelType="unavailable"),n&&s?(d.labelType="selected-hover",d.circleLeft="selected-hover-outline",d.circleRight="selected-hover-outline"):n?(d.labelType="selected",d.circleLeft="selected-outline",d.circleRight="selected-outline"):s&&(d.labelType="hover",d.circleLeft="hover-subtle",d.circleRight="hover-subtle"),d};return e.jsxs(n.Wrapper,{children:[v.map(((r,t)=>{const s=f(r);return e.jsxs(n.HeaderCellWeek,{children:[e.jsx(a.DayCell,Object.assign({date:r,calendarDate:l.default(u),onSelect:()=>{((e,l)=>{!l&&h&&b(e)})(r,!s.interactive)},onHover:T,onHoverEnd:g},s),`day-${t}`),e.jsx(n.DayLabel,{$disabled:s.disabled,children:l.default(r).format("ddd")})]},`week-day-${t}`)})),e.jsx(n.ColumnWeekCell,{children:v.map(((l,r)=>{const t=l.format(c),a=p&&(p[t]?p[t]:[d]);return e.jsx(n.TimeSlotWrapper,{children:a&&a.map((l=>{const{id:r,startTime:a,endTime:o,clickable:c=!0,styleAttributes:d}=l,{color:u,styleType:b="default",backgroundColor:y,backgroundColor2:m}=d;return e.jsx(s.TimeSlot,{$type:"vertical",$variant:"default",$styleType:b,$bgColor:y,$bgColor2:m,$clickable:c,onClick:()=>c&&((e,l)=>{null==j||j(e,l)})(t,l),children:e.jsxs(n.TimeSlotText,{style:{color:u},children:[e.jsx("span",{children:i.CalendarHelper.convertTo12HourFormat(a)}),o&&a&&e.jsx("span",{children:"-"}),e.jsx("span",{children:i.CalendarHelper.convertTo12HourFormat(o)})]})},r)}))},`wrapper-${r}`)}))},`week-cell-${r.format(c)}`)]})};
+"use strict";var e=require("react/jsx-runtime"),r=require("clsx"),l=require("../external/dayjs/dayjs.min.js"),t=require("../external/dayjs/plugin/isBetween.js"),a=require("react"),s=require("../shared/accessibility/index.js"),i=require("../shared/internal-calendar/day-cell/day-cell.js"),o=require("../shared/time-slot/time-slot.js");require("../theme/theme-provider/index.js"),require("../theme/theme-provider/context.js"),require("../theme/tokens/border.js");var n=require("../theme/tokens/colour.js");require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js");var d=require("../theme/utils/use-apply-styles.js");require("../theme/utils/use-media-query.js");var c=require("../util/calendar-helper.js"),u=require("../util/time-helper.js"),m=require("./time-slot-week-days.styles.js");function v(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var p=v(r);l.default.extend(t.default);const y="YYYY-MM-DD",b={id:"1",startTime:"",endTime:"",clickable:!1,styleAttributes:{color:"",styleType:"stripes",backgroundColor:n.Colour["bg-stronger"],backgroundColor2:n.Colour["bg-strongest"]}},h=({color:r,children:l})=>{const t=a.useRef(null);return d.useApplyStyle(t,{[m.tokens.timeSlotText.color]:r}),e.jsx("div",{ref:t,className:m.timeSlotText,children:l})};exports.TimeSlotWeekDays=({calendarDate:r,disabledDates:t,selectedDate:n,onSelect:d,minDate:v,maxDate:j,slots:f,enableSelection:k=!0,onSlotClick:x})=>{const g=a.useMemo((()=>c.CalendarHelper.generateDaysForCurrentWeek(r)),[r]),[T,q]=a.useState(),C=a.useRef({}),D=(e,r)=>{null==x||x(e,r)},w=(e,r)=>l=>{var t;l.stopPropagation(),(null===(t=r.clickable)||void 0===t||t)&&D(e,r)},S=e=>{q(e)},H=()=>{q(void 0)},R=e=>{const r=e.format(y),a=(e=>{const r=c.CalendarHelper.isWithinRange(e,v?l.default(v):void 0,j?l.default(j):void 0),a=!!t&&t.includes(e.format(y));return!r||a})(e),s=k&&!a,i=s&&T&&e.isSame(T,"day"),o=[n].includes(r),d={labelType:"available",interactive:!!k&&s};return a&&(d.disabled=!0,d.labelType="unavailable"),o&&i?(d.labelType="selected-hover",d.circleLeft="selected-hover-outline",d.circleRight="selected-hover-outline"):o?(d.labelType="selected",d.circleLeft="selected-outline",d.circleRight="selected-outline"):i&&(d.labelType="hover",d.circleLeft="hover-subtle",d.circleRight="hover-subtle"),d},A=(e,r)=>{const l=(t=r.date,(null!==(a=null==f?void 0:f[t])&&void 0!==a?a:[]).map(((e,r)=>({key:`${t}-${e.id}`,date:t,rowIndex:r}))));var t,a;const s=e=>{var r;e&&(null===(r=C.current[e.key])||void 0===r||r.focus())};switch(e.key){case"ArrowRight":case"ArrowDown":{e.preventDefault();const t=l.findIndex((e=>e.key===r.key));s(l[t+1]);break}case"ArrowLeft":case"ArrowUp":{e.preventDefault();const t=l.findIndex((e=>e.key===r.key));s(l[t-1]);break}case"Home":case"PageUp":e.preventDefault(),s(l[0]);break;case"End":case"PageDown":e.preventDefault(),s(l[l.length-1])}},N=(e,r)=>{var t;const{startTime:a,endTime:i}=r;return s.concatIds(l.default(e).format("D MMMM YYYY dddd"),a&&i?u.TimeHelper.formatTimeRange(a,i):void 0,r.label,null===(t=r.clickable)||void 0===t||t?"Available":"Unavailable")};return e.jsxs("div",{className:m.wrapper,role:"grid",children:[e.jsx("div",{className:m.headerRow,role:"row",onBlur:H,children:g.map(((r,t)=>{const a=R(r);return e.jsxs("div",{className:m.headerCellWeek,role:"presentation",children:[e.jsx(i.DayCell,Object.assign({date:r,calendarDate:l.default(n),onSelect:()=>{((e,r)=>{!r&&k&&d(e)})(r,!a.interactive)},onHover:S,onHoverEnd:H,onFocus:S,role:"columnheader",tabIndex:a.interactive?0:-1},a),`day-${t}`),e.jsx("div",{"aria-hidden":!0,className:p.default(m.dayLabel,a.disabled&&m.dayLabelDisabled),children:l.default(r).format("ddd")})]},`week-day-${t}`)}))}),e.jsx("div",{className:m.columnWeekCell,role:"row",children:g.map(((r,l)=>{var t;const a=r.format(y),i=null!==(t=null==f?void 0:f[a])&&void 0!==t?t:[b];return e.jsx("div",{className:m.timeSlotWrapper,role:"gridcell",children:i&&i.map(((r,l)=>{const{id:t,startTime:i,endTime:n,clickable:d=!0,styleAttributes:u}=r,{color:v,styleType:p="default",backgroundColor:y,backgroundColor2:j}=u,f=`${a}-${t}`,k=r!==b;return e.jsxs(o.TimeSlot,{className:m.timeSlotComponent,styleType:p,bgColor:y,bgColor2:j,clickable:d,onClick:()=>d&&D(a,r),children:[e.jsxs(h,{color:v,children:[e.jsx("span",{children:c.CalendarHelper.convertTo12HourFormat(i)}),n&&i&&e.jsx("span",{children:"-"}),e.jsx("span",{children:c.CalendarHelper.convertTo12HourFormat(n)})]}),k&&e.jsx(s.VisuallyHidden,{children:e.jsx("button",{type:"button",ref:e=>{C.current[f]=e},"aria-disabled":!d,"aria-label":N(a,r),onKeyDown:e=>A(e,{key:f,date:a}),onClick:w(a,r)})})]},t)}))},`wrapper-${l}`)}))},`week-cell-${r.format(y)}`)]})};
 //# sourceMappingURL=time-slot-week-days.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"time-slot-week-days.js","sources":["../../../src/time-slot-week-view/time-slot-week-days.tsx"],"sourcesContent":["import type { Dayjs } from \"dayjs\";\nimport dayjs from \"dayjs\";\nimport isBetween from \"dayjs/plugin/isBetween\";\nimport { useMemo, useState } from \"react\";\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 { TimeSlot as TimeSlotComponent } from \"../time-slot-bar/time-slot-bar.styles\";\nimport type { TimeSlot } from \"../time-slot-bar/types\";\nimport { CalendarHelper } from \"../util/calendar-helper\";\nimport { V3_Colour } from \"../v3_theme\";\nimport {\n    ColumnWeekCell,\n    DayLabel,\n    HeaderCellWeek,\n    TimeSlotText,\n    TimeSlotWrapper,\n    Wrapper,\n} from \"./time-slot-week-days.style\";\n\ndayjs.extend(isBetween);\n\nexport type DayVariant = \"default\" | \"other-month\" | \"today\";\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[] } | undefined;\n    enableSelection?: boolean | undefined;\n    onSlotClick?: ((date: string, timeSlot: TimeSlot) => void) | undefined;\n}\n\nconst dateFormat = \"YYYY-MM-DD\";\n\nconst fallbackSlot: TimeSlot = {\n    id: \"1\",\n    startTime: \"\",\n    endTime: \"\",\n    clickable: false,\n    styleAttributes: {\n        color: \"\",\n        styleType: \"stripes\",\n        backgroundColor: V3_Colour[\"bg-stronger\"],\n        backgroundColor2: V3_Colour[\"bg-strongest\"],\n    },\n};\n\nexport const TimeSlotWeekDays = ({\n    calendarDate,\n    disabledDates,\n    selectedDate,\n    onSelect,\n    minDate,\n    maxDate,\n    slots: daySlots,\n    enableSelection = true,\n    onSlotClick,\n}: TimeSlotWeekDaysProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const currentCalendarWeek = useMemo((): Dayjs[] => {\n        return CalendarHelper.generateDaysForCurrentWeek(calendarDate);\n    }, [calendarDate]);\n    const [hoverDay, setHoverDay] = useState<Dayjs>();\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 handleSlotClick = (date: string, slot: TimeSlot) => {\n        onSlotClick?.(date, slot);\n    };\n\n    const handleDayHover = (value: Dayjs) => {\n        setHoverDay(value);\n    };\n\n    const handleDayMouseout = () => {\n        setHoverDay(undefined);\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\n        return !isWithinRange || isDisabledDate;\n    };\n\n    const generateStyleProps = (day: Dayjs) => {\n        const dateStartWithYear = day.format(dateFormat);\n        const disabled = isDisabled(day);\n        const isHoverEnabled = enableSelection && !disabled;\n        const isHover =\n            isHoverEnabled && hoverDay && day.isSame(hoverDay, \"day\");\n        const isSelected = [selectedDate].includes(dateStartWithYear);\n\n        const dayCellStyleProps: CellStyleProps = {\n            labelType: \"available\",\n            interactive: !enableSelection ? null : isHoverEnabled,\n        };\n\n        if (disabled) {\n            dayCellStyleProps.disabled = true;\n            dayCellStyleProps.labelType = \"unavailable\";\n        }\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    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderHeader = () => {\n        return currentCalendarWeek.map((day, index) => {\n            const dayCellStyleProps = generateStyleProps(day);\n\n            return (\n                <HeaderCellWeek key={`week-day-${index}`}>\n                    <DayCell\n                        key={`day-${index}`}\n                        date={day}\n                        calendarDate={dayjs(selectedDate)}\n                        onSelect={() => {\n                            handleDayClick(day, !dayCellStyleProps.interactive);\n                        }}\n                        onHover={handleDayHover}\n                        onHoverEnd={handleDayMouseout}\n                        {...dayCellStyleProps}\n                    />\n                    <DayLabel $disabled={dayCellStyleProps.disabled}>\n                        {dayjs(day).format(\"ddd\")}\n                    </DayLabel>\n                </HeaderCellWeek>\n            );\n        });\n    };\n\n    const renderTimeSlotBarCells = () => {\n        return (\n            <ColumnWeekCell\n                key={`week-cell-${calendarDate.format(dateFormat)}`}\n            >\n                {currentCalendarWeek.map((day, dayIndex) => {\n                    const formattedDate = day.format(dateFormat);\n                    const slots =\n                        daySlots &&\n                        (daySlots[formattedDate]\n                            ? daySlots[formattedDate]\n                            : [fallbackSlot]);\n\n                    return (\n                        <TimeSlotWrapper key={`wrapper-${dayIndex}`}>\n                            {slots &&\n                                slots.map((slot) => {\n                                    const {\n                                        id,\n                                        startTime: slotStartTime,\n                                        endTime: slotEndTime,\n                                        clickable = true,\n                                        styleAttributes,\n                                    } = slot;\n                                    const {\n                                        color,\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                                            $clickable={clickable}\n                                            onClick={() =>\n                                                clickable &&\n                                                handleSlotClick(\n                                                    formattedDate,\n                                                    slot\n                                                )\n                                            }\n                                        >\n                                            <TimeSlotText\n                                                style={{ color: color }}\n                                            >\n                                                <span>\n                                                    {CalendarHelper.convertTo12HourFormat(\n                                                        slotStartTime\n                                                    )}\n                                                </span>\n                                                {slotEndTime &&\n                                                    slotStartTime && (\n                                                        <span>-</span>\n                                                    )}\n                                                <span>\n                                                    {CalendarHelper.convertTo12HourFormat(\n                                                        slotEndTime\n                                                    )}\n                                                </span>\n                                            </TimeSlotText>\n                                        </TimeSlotComponent>\n                                    );\n                                })}\n                        </TimeSlotWrapper>\n                    );\n                })}\n            </ColumnWeekCell>\n        );\n    };\n\n    return (\n        <Wrapper>\n            {renderHeader()}\n            {renderTimeSlotBarCells()}\n        </Wrapper>\n    );\n};\n"],"names":["dayjs","extend","isBetween","dateFormat","fallbackSlot","id","startTime","endTime","clickable","styleAttributes","color","styleType","backgroundColor","V3_Colour","backgroundColor2","calendarDate","disabledDates","selectedDate","onSelect","minDate","maxDate","slots","daySlots","enableSelection","onSlotClick","currentCalendarWeek","useMemo","CalendarHelper","generateDaysForCurrentWeek","hoverDay","setHoverDay","useState","handleDayHover","value","handleDayMouseout","undefined","generateStyleProps","day","dateStartWithYear","format","disabled","isWithinRange","isDisabledDate","includes","isDisabled","isHoverEnabled","isHover","isSame","isSelected","dayCellStyleProps","labelType","interactive","circleLeft","circleRight","_jsxs","Wrapper","children","map","index","HeaderCellWeek","_jsx","DayCell","Object","assign","date","handleDayClick","onHover","onHoverEnd","DayLabel","$disabled","ColumnWeekCell","dayIndex","formattedDate","TimeSlotWrapper","slot","slotStartTime","slotEndTime","TimeSlotComponent","$type","$variant","$bgColor","$bgColor2","onClick","handleSlotClick","TimeSlotText","style","convertTo12HourFormat"],"mappings":"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"}
+{"version":3,"file":"time-slot-week-days.js","sources":["../../../src/time-slot-week-view/time-slot-week-days.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport type { Dayjs } from \"dayjs\";\nimport dayjs from \"dayjs\";\nimport isBetween from \"dayjs/plugin/isBetween\";\nimport type React from \"react\";\nimport { useMemo, useRef, useState } from \"react\";\n\nimport { concatIds, VisuallyHidden } from \"../shared/accessibility\";\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 { TimeSlot as TimeSlotComponent } from \"../shared/time-slot\";\nimport { Colour, useApplyStyle } from \"../theme\";\nimport type { TimeSlot } from \"../time-slot-bar/types\";\nimport { CalendarHelper } from \"../util/calendar-helper\";\nimport { TimeHelper } from \"../util/time-helper\";\nimport * as styles from \"./time-slot-week-days.styles\";\n\ndayjs.extend(isBetween);\n\ninterface FocusableSlotMeta {\n    key: string;\n    date: string;\n    rowIndex: number;\n}\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[] } | undefined;\n    enableSelection?: boolean | undefined;\n    onSlotClick?: ((date: string, timeSlot: TimeSlot) => void) | undefined;\n}\n\nconst dateFormat = \"YYYY-MM-DD\";\n\nconst fallbackSlot: TimeSlot = {\n    id: \"1\",\n    startTime: \"\",\n    endTime: \"\",\n    clickable: false,\n    styleAttributes: {\n        color: \"\",\n        styleType: \"stripes\",\n        backgroundColor: Colour[\"bg-stronger\"],\n        backgroundColor2: Colour[\"bg-strongest\"],\n    },\n};\n\nconst TimeSlotTextWithColor = ({\n    color,\n    children,\n}: {\n    color: string | undefined;\n    children: React.ReactNode;\n}) => {\n    const ref = useRef<HTMLDivElement>(null);\n\n    useApplyStyle(ref, {\n        [styles.tokens.timeSlotText.color]: color,\n    });\n\n    return (\n        <div ref={ref} className={styles.timeSlotText}>\n            {children}\n        </div>\n    );\n};\n\nexport const TimeSlotWeekDays = ({\n    calendarDate,\n    disabledDates,\n    selectedDate,\n    onSelect,\n    minDate,\n    maxDate,\n    slots: daySlots,\n    enableSelection = true,\n    onSlotClick,\n}: TimeSlotWeekDaysProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const currentCalendarWeek = useMemo((): Dayjs[] => {\n        return CalendarHelper.generateDaysForCurrentWeek(calendarDate);\n    }, [calendarDate]);\n    const [hoverDay, setHoverDay] = useState<Dayjs>();\n    const slotButtonRefs = useRef<Record<string, HTMLButtonElement | null>>({});\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleDayClick = (value: Dayjs, isDisabled: boolean) => {\n        if (isDisabled || !enableSelection) return;\n        onSelect(value);\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            if (slot.clickable ?? true) {\n                handleSlotClick(date, slot);\n            }\n        };\n\n    const handleDayHover = (value: Dayjs) => {\n        setHoverDay(value);\n    };\n\n    const handleDayHoverClear = () => {\n        setHoverDay(undefined);\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\n        return !isWithinRange || isDisabledDate;\n    };\n\n    const generateStyleProps = (day: Dayjs) => {\n        const dateStartWithYear = day.format(dateFormat);\n        const disabled = isDisabled(day);\n        const isHoverEnabled = enableSelection && !disabled;\n        const isHover =\n            isHoverEnabled && hoverDay && day.isSame(hoverDay, \"day\");\n        const isSelected = [selectedDate].includes(dateStartWithYear);\n\n        const dayCellStyleProps: CellStyleProps = {\n            labelType: \"available\",\n            interactive: enableSelection ? isHoverEnabled : false,\n        };\n\n        if (disabled) {\n            dayCellStyleProps.disabled = true;\n            dayCellStyleProps.labelType = \"unavailable\";\n        }\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    const getFocusableSlotsForDate = (\n        formattedDate: string\n    ): FocusableSlotMeta[] => {\n        return (daySlots?.[formattedDate] ?? []).map((slot, index) => ({\n            key: `${formattedDate}-${slot.id}`,\n            date: formattedDate,\n            rowIndex: index,\n        }));\n    };\n\n    const handleSlotKeyDown = (\n        event: React.KeyboardEvent<HTMLButtonElement>,\n        currentSlot: FocusableSlotMeta\n    ) => {\n        const sameColumnSlots = getFocusableSlotsForDate(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            case \"PageUp\":\n                event.preventDefault();\n                focusSlot(sameColumnSlots[0]);\n                break;\n            case \"End\":\n            case \"PageDown\":\n                event.preventDefault();\n                focusSlot(sameColumnSlots[sameColumnSlots.length - 1]);\n                break;\n            default:\n                break;\n        }\n    };\n\n    const getSlotAriaLabel = (date: string, slot: TimeSlot) => {\n        const { startTime: slotStartTime, endTime: slotEndTime } = slot;\n\n        return concatIds(\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    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderHeader = () => {\n        return (\n            <div\n                className={styles.headerRow}\n                role=\"row\"\n                onBlur={handleDayHoverClear}\n            >\n                {currentCalendarWeek.map((day, index) => {\n                    const dayCellStyleProps = generateStyleProps(day);\n\n                    return (\n                        <div\n                            className={styles.headerCellWeek}\n                            key={`week-day-${index}`}\n                            role=\"presentation\"\n                        >\n                            <DayCell\n                                key={`day-${index}`}\n                                date={day}\n                                calendarDate={dayjs(selectedDate)}\n                                onSelect={() => {\n                                    handleDayClick(\n                                        day,\n                                        !dayCellStyleProps.interactive\n                                    );\n                                }}\n                                onHover={handleDayHover}\n                                onHoverEnd={handleDayHoverClear}\n                                onFocus={handleDayHover}\n                                role=\"columnheader\"\n                                tabIndex={\n                                    dayCellStyleProps.interactive ? 0 : -1\n                                }\n                                {...dayCellStyleProps}\n                            />\n                            <div\n                                aria-hidden\n                                className={clsx(\n                                    styles.dayLabel,\n                                    dayCellStyleProps.disabled &&\n                                        styles.dayLabelDisabled\n                                )}\n                            >\n                                {dayjs(day).format(\"ddd\")}\n                            </div>\n                        </div>\n                    );\n                })}\n            </div>\n        );\n    };\n\n    const renderTimeSlotBarCells = () => {\n        return (\n            <div\n                className={styles.columnWeekCell}\n                key={`week-cell-${calendarDate.format(dateFormat)}`}\n                role=\"row\"\n            >\n                {currentCalendarWeek.map((day, dayIndex) => {\n                    const formattedDate = day.format(dateFormat);\n                    const slots = daySlots?.[formattedDate] ?? [fallbackSlot];\n\n                    return (\n                        <div\n                            className={styles.timeSlotWrapper}\n                            key={`wrapper-${dayIndex}`}\n                            role=\"gridcell\"\n                        >\n                            {slots &&\n                                slots.map((slot, rowIndex) => {\n                                    const {\n                                        id,\n                                        startTime: slotStartTime,\n                                        endTime: slotEndTime,\n                                        clickable = true,\n                                        styleAttributes,\n                                    } = slot;\n                                    const {\n                                        color,\n                                        styleType = \"default\",\n                                        backgroundColor,\n                                        backgroundColor2,\n                                    } = styleAttributes;\n                                    const slotKey = `${formattedDate}-${id}`;\n                                    const isActualSlot = slot !== fallbackSlot;\n\n                                    return (\n                                        <TimeSlotComponent\n                                            key={id}\n                                            className={styles.timeSlotComponent}\n                                            styleType={styleType}\n                                            bgColor={backgroundColor}\n                                            bgColor2={backgroundColor2}\n                                            clickable={clickable}\n                                            onClick={() =>\n                                                clickable &&\n                                                handleSlotClick(\n                                                    formattedDate,\n                                                    slot\n                                                )\n                                            }\n                                        >\n                                            <TimeSlotTextWithColor\n                                                color={color}\n                                            >\n                                                <span>\n                                                    {CalendarHelper.convertTo12HourFormat(\n                                                        slotStartTime\n                                                    )}\n                                                </span>\n                                                {slotEndTime &&\n                                                    slotStartTime && (\n                                                        <span>-</span>\n                                                    )}\n                                                <span>\n                                                    {CalendarHelper.convertTo12HourFormat(\n                                                        slotEndTime\n                                                    )}\n                                                </span>\n                                            </TimeSlotTextWithColor>\n                                            {isActualSlot && (\n                                                <VisuallyHidden>\n                                                    <button\n                                                        type=\"button\"\n                                                        ref={(element) => {\n                                                            slotButtonRefs.current[\n                                                                slotKey\n                                                            ] = element;\n                                                        }}\n                                                        aria-disabled={\n                                                            !clickable\n                                                        }\n                                                        aria-label={getSlotAriaLabel(\n                                                            formattedDate,\n                                                            slot\n                                                        )}\n                                                        onKeyDown={(event) =>\n                                                            handleSlotKeyDown(\n                                                                event,\n                                                                {\n                                                                    key: slotKey,\n                                                                    date: formattedDate,\n                                                                    rowIndex,\n                                                                }\n                                                            )\n                                                        }\n                                                        onClick={handleSlotButtonClick(\n                                                            formattedDate,\n                                                            slot\n                                                        )}\n                                                    />\n                                                </VisuallyHidden>\n                                            )}\n                                        </TimeSlotComponent>\n                                    );\n                                })}\n                        </div>\n                    );\n                })}\n            </div>\n        );\n    };\n\n    return (\n        <div className={styles.wrapper} role=\"grid\">\n            {renderHeader()}\n            {renderTimeSlotBarCells()}\n        </div>\n    );\n};\n"],"names":["dayjs","extend","isBetween","dateFormat","fallbackSlot","id","startTime","endTime","clickable","styleAttributes","color","styleType","backgroundColor","Colour","backgroundColor2","TimeSlotTextWithColor","children","ref","useRef","useApplyStyle","styles.tokens","timeSlotText","_jsx","className","styles.timeSlotText","calendarDate","disabledDates","selectedDate","onSelect","minDate","maxDate","slots","daySlots","enableSelection","onSlotClick","currentCalendarWeek","useMemo","CalendarHelper","generateDaysForCurrentWeek","hoverDay","setHoverDay","useState","slotButtonRefs","handleSlotClick","date","slot","handleSlotButtonClick","event","stopPropagation","_a","handleDayHover","value","handleDayHoverClear","undefined","generateStyleProps","day","dateStartWithYear","format","disabled","isWithinRange","isDisabledDate","includes","isDisabled","isHoverEnabled","isHover","isSame","isSelected","dayCellStyleProps","labelType","interactive","circleLeft","circleRight","handleSlotKeyDown","currentSlot","sameColumnSlots","formattedDate","map","index","key","rowIndex","focusSlot","current","focus","preventDefault","currentIndex","findIndex","length","getSlotAriaLabel","slotStartTime","slotEndTime","concatIds","TimeHelper","formatTimeRange","label","_jsxs","styles.wrapper","role","styles.headerRow","onBlur","styles.headerCellWeek","DayCell","Object","assign","handleDayClick","onHover","onHoverEnd","onFocus","tabIndex","clsx","styles.dayLabel","styles.dayLabelDisabled","styles.columnWeekCell","dayIndex","styles.timeSlotWrapper","slotKey","isActualSlot","TimeSlotComponent","styles.timeSlotComponent","bgColor","bgColor2","onClick","convertTo12HourFormat","VisuallyHidden","type","element","onKeyDown"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+"use strict";require("./time-slot-week-days.styles_1h21vyw.css");exports.columnWeekCell="c1fvren",exports.dayLabel="d4p8eye",exports.dayLabelDisabled="dl9xaeu",exports.headerCellWeek="h1u5a4vg",exports.headerRow="hi684jn",exports.timeSlotComponent="t1nixg7y",exports.timeSlotText="tiecbfv",exports.timeSlotWrapper="t17yohj6",exports.tokens={timeSlotText:{color:"--fds-internal-timeSlotWeekDays-timeSlotText-color"}},exports.wrapper="w1jgoij2";
+//# sourceMappingURL=time-slot-week-days.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"time-slot-week-days.styles.js","sources":["../../../src/time-slot-week-view/time-slot-week-days.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font } from \"../theme\";\n\n// =============================================================================\n// TOKENS\n// =============================================================================\nexport const tokens = {\n    timeSlotText: {\n        color: \"--fds-internal-timeSlotWeekDays-timeSlotText-color\",\n    },\n};\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const headerCellWeek = css`\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    user-select: none;\n    margin-bottom: 0.188rem;\n`;\n\nexport const headerRow = css`\n    grid-column: 1 / -1;\n    display: grid;\n    grid-template-columns: repeat(7, 1fr);\n`;\n\nexport const dayLabel = css`\n    ${Font[\"body-xs-semibold\"]}\n    color: ${Colour[\"text\"]};\n`;\n\nexport const dayLabelDisabled = css`\n    color: ${Colour[\"text-disabled-subtlest\"]};\n`;\n\nexport const wrapper = css`\n    width: 100%;\n    display: grid;\n    grid-template-columns: repeat(7, 1fr);\n`;\n\nexport const columnWeekCell = css`\n    grid-column: 1 / -1;\n    display: flex;\n    min-height: 7.625rem;\n`;\n\nexport const timeSlotText = css`\n    ${tokens.timeSlotText.color}: initial;\n\n    ${Font[\"body-xs-semibold\"]}\n    margin: 1rem 0rem;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    text-align: center;\n    max-width: 2.5rem;\n    color: var(${tokens.timeSlotText.color}, ${Colour[\"text\"]});\n`;\n\nexport const timeSlotComponent = css`\n    display: flex;\n    flex-grow: 1;\n    align-items: center;\n    justify-content: center;\n    margin: 1px 0px;\n    position: relative;\n\n    &:focus-within {\n        outline: 2px solid ${Colour[\"focus-ring\"]};\n        outline-offset: 2px;\n        z-index: 1;\n    }\n`;\n\nexport const timeSlotWrapper = css`\n    display: flex;\n    flex-direction: column;\n    flex: 1;\n    margin: 1px;\n`;\n"],"names":["timeSlotText","color"],"mappings":"2HA8C2B,2BAfN,mCAKQ,iCApBF,6BASL,oCAwCQ,gCAbL,kCA4BG,0BAzEN,CAClBA,aAAc,CACVC,MAAO,uEA+BK"}

package/cjs/time-slot-week-view/time-slot-week-days.styles_1h21vyw.css

@@ -0,0 +1,9 @@
+@layer fds{.h1u5a4vg{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin-bottom:0.188rem;}
+.hi684jn{-ms-grid-column:1/-1;grid-column:1/-1;display:-ms-grid;display:grid;-ms-grid-columns:repeat(7, 1fr);grid-template-columns:repeat(7, 1fr);}
+.d4p8eye{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-xs);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-xs);letter-spacing:var(--fds-font-body-ls-xs);color:var(--fds-colour-text);}
+.dl9xaeu{color:var(--fds-colour-text-disabled-subtlest);}
+.w1jgoij2{width:100%;display:-ms-grid;display:grid;-ms-grid-columns:repeat(7, 1fr);grid-template-columns:repeat(7, 1fr);}
+.c1fvren{-ms-grid-column:1/-1;grid-column:1/-1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;min-height:7.625rem;}
+.tiecbfv{--fds-internal-timeSlotWeekDays-timeSlotText-color:initial;font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-xs);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-xs);letter-spacing:var(--fds-font-body-ls-xs);margin:1rem 0rem;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;text-align:center;max-width:2.5rem;color:var(--fds-internal-timeSlotWeekDays-timeSlotText-color, var(--fds-colour-text));}
+.t1nixg7y{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;-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;margin:1px 0px;position:relative;}.t1nixg7y:focus-within{outline:2px solid var(--fds-colour-focus-ring);outline-offset:2px;z-index:1;}
+.t17yohj6{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex:1;-ms-flex:1;flex:1;margin:1px;}}

package/cjs/time-slot-week-view/time-slot-week-view.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),a=require("react/jsx-runtime"),t=require("../external/dayjs/dayjs.min.js"),r=require("react"),n=require("../shared/internal-calendar/calendar-manager.js");require("../util/calendar-helper.js");var s=require("../util/date-helper.js");require("../util/string-helper.js");var i=require("./time-slot-week-days.js"),l=require("./time-slot-week-view.styles.js");const o="YYYY-MM-DD";exports.TimeSlotWeekView=d=>{var{disabledDates:u,onWeekDisplayChange:c,onChange:D,value:f,minDate:m,maxDate:k,slots:w,showNavigationHeader:h=!0,enableSelection:g,onSlotClick:j,currentCalendarDate:b}=d,y=e.__rest(d,["disabledDates","onWeekDisplayChange","onChange","value","minDate","maxDate","slots","showNavigationHeader","enableSelection","onSlotClick","currentCalendarDate"]);const[C,v]=r.useState(f),S=r.useRef(null),q=r.useRef(void 0);r.useEffect((()=>{v(f)}),[f]);const x=e=>{const a=e.format(o);v(a),null==D||D(a)},p=(e,a)=>{j&&j(e,a)},Y=e=>{if(c){const a={week:{firstDayOfWeek:e.startOf("week").format(o),lastDayOfWeek:e.endOf("week").format(o)},month:e.month()+1,year:e.year()};c(a)}};return a.jsx(l.Wrapper,Object.assign({},y,{children:a.jsx(n.CalendarManager,{ref:S,dynamicHeight:!0,initialCalendarDate:s.DateHelper.toDayjs(C||b).endOf("week").format(o),selectedStartDate:C,getLeftArrowDate:e=>e.subtract(1,"week"),getRightArrowDate:e=>e.add(1,"week"),isLeftArrowDisabled:e=>!!m&&t.default(e).subtract(1,"week").isBefore(m,"week"),isRightArrowDisabled:e=>!!k&&t.default(e).add(1,"week").isAfter(k,"week"),onCalendarDateChange:e=>{q.current&&q.current.isSame(e,"week")||Y(e),q.current=e},showNavigationHeader:h,minDate:m,maxDate:k,getMonthHeaderLabel:e=>t.default(e).endOf("week").format("MMM"),getYearHeaderLabel:e=>t.default(e).endOf("week").format("YYYY"),children:({calendarDate:e})=>a.jsx(i.TimeSlotWeekDays,{calendarDate:e,disabledDates:u,selectedDate:C,minDate:m,maxDate:k,onSelect:x,slots:w,enableSelection:g,onSlotClick:p})})}))};
+"use strict";var e=require("../_virtual/_tslib.js"),a=require("react/jsx-runtime"),t=require("../external/dayjs/dayjs.min.js"),r=require("react"),i=require("../shared/internal-calendar/calendar-manager.js");require("../util/calendar-helper.js");var s=require("../util/date-helper.js");require("../util/simple-id-generator.js"),require("../util/string-helper.js"),require("@react-aria/live-announcer");var n=require("./time-slot-week-days.js"),l=require("./time-slot-week-view.styles.js");const o="YYYY-MM-DD";exports.TimeSlotWeekView=d=>{var{disabledDates:u,onWeekDisplayChange:c,onChange:D,value:f,minDate:m,maxDate:w,slots:k,showNavigationHeader:g=!0,enableSelection:h,onSlotClick:j,currentCalendarDate:b}=d,v=e.__rest(d,["disabledDates","onWeekDisplayChange","onChange","value","minDate","maxDate","slots","showNavigationHeader","enableSelection","onSlotClick","currentCalendarDate"]);const[y,C]=r.useState(f),q=r.useRef(null),S=r.useRef(void 0);r.useEffect((()=>{C(f)}),[f]);const p=e=>{const a=e.format(o);C(a),null==D||D(a)},x=(e,a)=>{j&&j(e,a)},Y=e=>{if(c){const a={week:{firstDayOfWeek:e.startOf("week").format(o),lastDayOfWeek:e.endOf("week").format(o)},month:e.month()+1,year:e.year()};c(a)}};return a.jsx("div",Object.assign({className:l.wrapper},v,{children:a.jsx(i.CalendarManager,{ref:q,dynamicHeight:!0,initialCalendarDate:s.DateHelper.toDayjs(y||b).endOf("week").format(o),selectedStartDate:y,getLeftArrowDate:e=>e.subtract(1,"week"),getRightArrowDate:e=>e.add(1,"week"),isLeftArrowDisabled:e=>!!m&&t.default(e).subtract(1,"week").isBefore(m,"week"),isRightArrowDisabled:e=>!!w&&t.default(e).add(1,"week").isAfter(w,"week"),onCalendarDateChange:e=>{S.current&&S.current.isSame(e,"week")||Y(e),S.current=e},showNavigationHeader:g,minDate:m,maxDate:w,getMonthHeaderLabel:e=>t.default(e).endOf("week").format("MMM"),getYearHeaderLabel:e=>t.default(e).endOf("week").format("YYYY"),isFocusable:!0,children:({calendarDate:e})=>a.jsx(n.TimeSlotWeekDays,{calendarDate:e,disabledDates:u,selectedDate:y,minDate:m,maxDate:w,onSelect:p,slots:k,enableSelection:h,onSlotClick:x})})}))};
 //# sourceMappingURL=time-slot-week-view.js.map

package/cjs/time-slot-week-view/time-slot-week-view.js.map

@@ -1 +1 @@
-{"version":3,"file":"time-slot-week-view.js","sources":["../../../src/time-slot-week-view/time-slot-week-view.tsx"],"sourcesContent":["import type { Dayjs } from \"dayjs\";\nimport dayjs from \"dayjs\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport type { CalendarManagerRef } from \"../shared/internal-calendar\";\nimport { CalendarManager } from \"../shared/internal-calendar/calendar-manager\";\nimport type { TimeSlot } from \"../time-slot-bar\";\nimport { DateHelper } from \"../util\";\nimport { TimeSlotWeekDays } from \"./time-slot-week-days\";\nimport { Wrapper } from \"./time-slot-week-view.styles\";\nimport type { TimeSlotWeekViewProps } from \"./types\";\n\nconst DATE_FORMAT = \"YYYY-MM-DD\";\n\nexport const TimeSlotWeekView = ({\n    disabledDates,\n    onWeekDisplayChange,\n    onChange,\n    value,\n    minDate,\n    maxDate,\n    slots,\n    showNavigationHeader = true,\n    enableSelection,\n    onSlotClick,\n    currentCalendarDate,\n    ...otherProps\n}: TimeSlotWeekViewProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [selectedDate, setSelectedDate] = useState<string | undefined>(value); // YYYY-MM-DD\n    const calendarManagerRef = useRef<CalendarManagerRef>(null);\n    const previousCalendarDate = useRef<Dayjs | undefined>(undefined);\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        setSelectedDate(value);\n    }, [value]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n\n    const handleDateSelect = (value: Dayjs) => {\n        const stringValue = value.format(DATE_FORMAT);\n        setSelectedDate(stringValue);\n        onChange?.(stringValue);\n    };\n\n    const handleOnSlotClick = (date: string, slot: TimeSlot) => {\n        if (onSlotClick) {\n            onSlotClick(date, slot);\n        }\n    };\n\n    const handleOnCalendarDateChange = (value: Dayjs) => {\n        if (\n            !previousCalendarDate.current ||\n            !previousCalendarDate.current.isSame(value, \"week\")\n        ) {\n            performDisplayChangeHandler(value);\n        }\n        previousCalendarDate.current = value;\n    };\n\n    // =============================================================================\n    // HELPERS\n    // =============================================================================\n\n    const performDisplayChangeHandler = (value: Dayjs) => {\n        if (onWeekDisplayChange) {\n            const returnValue = {\n                week: {\n                    firstDayOfWeek: value.startOf(\"week\").format(DATE_FORMAT),\n                    lastDayOfWeek: value.endOf(\"week\").format(DATE_FORMAT),\n                },\n                month: value.month() + 1,\n                year: value.year(),\n            };\n\n            onWeekDisplayChange(returnValue);\n        }\n    };\n\n    const getInitialCalendarDate = () => {\n        return DateHelper.toDayjs(selectedDate || currentCalendarDate)\n            .endOf(\"week\")\n            .format(DATE_FORMAT);\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n\n    return (\n        <Wrapper {...otherProps}>\n            <CalendarManager\n                ref={calendarManagerRef}\n                dynamicHeight\n                initialCalendarDate={getInitialCalendarDate()}\n                selectedStartDate={selectedDate}\n                getLeftArrowDate={(day) => day.subtract(1, \"week\")}\n                getRightArrowDate={(day) => day.add(1, \"week\")}\n                isLeftArrowDisabled={(calendarDate) =>\n                    !!minDate &&\n                    dayjs(calendarDate)\n                        .subtract(1, \"week\")\n                        .isBefore(minDate, \"week\")\n                }\n                isRightArrowDisabled={(calendarDate) =>\n                    !!maxDate &&\n                    dayjs(calendarDate).add(1, \"week\").isAfter(maxDate, \"week\")\n                }\n                onCalendarDateChange={handleOnCalendarDateChange}\n                showNavigationHeader={showNavigationHeader}\n                minDate={minDate}\n                maxDate={maxDate}\n                getMonthHeaderLabel={(calendarDate) =>\n                    dayjs(calendarDate).endOf(\"week\").format(\"MMM\")\n                }\n                getYearHeaderLabel={(calendarDate) =>\n                    dayjs(calendarDate).endOf(\"week\").format(\"YYYY\")\n                }\n            >\n                {({ calendarDate }) => {\n                    return (\n                        <TimeSlotWeekDays\n                            calendarDate={calendarDate}\n                            disabledDates={disabledDates}\n                            selectedDate={selectedDate}\n                            minDate={minDate}\n                            maxDate={maxDate}\n                            onSelect={handleDateSelect}\n                            slots={slots}\n                            enableSelection={enableSelection}\n                            onSlotClick={handleOnSlotClick}\n                        />\n                    );\n                }}\n            </CalendarManager>\n        </Wrapper>\n    );\n};\n"],"names":["DATE_FORMAT","_a","disabledDates","onWeekDisplayChange","onChange","value","minDate","maxDate","slots","showNavigationHeader","enableSelection","onSlotClick","currentCalendarDate","otherProps","__rest","selectedDate","setSelectedDate","useState","calendarManagerRef","useRef","previousCalendarDate","undefined","useEffect","handleDateSelect","stringValue","format","handleOnSlotClick","date","slot","performDisplayChangeHandler","returnValue","week","firstDayOfWeek","startOf","lastDayOfWeek","endOf","month","year","_jsx","Wrapper","Object","assign","children","CalendarManager","ref","dynamicHeight","initialCalendarDate","DateHelper","toDayjs","selectedStartDate","getLeftArrowDate","day","subtract","getRightArrowDate","add","isLeftArrowDisabled","calendarDate","dayjs","isBefore","isRightArrowDisabled","isAfter","onCalendarDateChange","current","isSame","getMonthHeaderLabel","getYearHeaderLabel","TimeSlotWeekDays","onSelect"],"mappings":"wZAYA,MAAMA,EAAc,sCAEaC,IAAA,IAAAC,cAC7BA,EAAaC,oBACbA,EAAmBC,SACnBA,EAAQC,MACRA,EAAKC,QACLA,EAAOC,QACPA,EAAOC,MACPA,EAAKC,qBACLA,GAAuB,EAAIC,gBAC3BA,EAAeC,YACfA,EAAWC,oBACXA,GAAmBX,EAChBY,EAAUC,EAAAA,OAAAb,EAZgB,CAAA,gBAAA,sBAAA,WAAA,QAAA,UAAA,UAAA,QAAA,uBAAA,kBAAA,cAAA,wBAiB7B,MAAOc,EAAcC,GAAmBC,EAAAA,SAA6BZ,GAC/Da,EAAqBC,EAAAA,OAA2B,MAChDC,EAAuBD,EAAAA,YAA0BE,GAKvDC,EAAAA,WAAU,KACNN,EAAgBX,EAAM,GACvB,CAACA,IAMJ,MAAMkB,EAAoBlB,IACtB,MAAMmB,EAAcnB,EAAMoB,OAAOzB,GACjCgB,EAAgBQ,GAChBpB,SAAAA,EAAWoB,EAAY,EAGrBE,EAAoB,CAACC,EAAcC,KACjCjB,GACAA,EAAYgB,EAAMC,EACtB,EAiBEC,EAA+BxB,IACjC,GAAIF,EAAqB,CACrB,MAAM2B,EAAc,CAChBC,KAAM,CACFC,eAAgB3B,EAAM4B,QAAQ,QAAQR,OAAOzB,GAC7CkC,cAAe7B,EAAM8B,MAAM,QAAQV,OAAOzB,IAE9CoC,MAAO/B,EAAM+B,QAAU,EACvBC,KAAMhC,EAAMgC,QAGhBlC,EAAoB2B,EACxB,GAaJ,OACIQ,EAAAA,IAACC,EAAAA,QAAOC,OAAAC,OAAA,GAAK5B,EAAU,CAAA6B,SACnBJ,EAAAA,IAACK,EAAAA,gBAAe,CACZC,IAAK1B,EACL2B,eAAa,EACbC,oBAdDC,EAAAA,WAAWC,QAAQjC,GAAgBH,GACrCuB,MAAM,QACNV,OAAOzB,GAaJiD,kBAAmBlC,EACnBmC,iBAAmBC,GAAQA,EAAIC,SAAS,EAAG,QAC3CC,kBAAoBF,GAAQA,EAAIG,IAAI,EAAG,QACvCC,oBAAsBC,KAChBlD,GACFmD,EAAAA,QAAMD,GACDJ,SAAS,EAAG,QACZM,SAASpD,EAAS,QAE3BqD,qBAAuBH,KACjBjD,GACFkD,UAAMD,GAAcF,IAAI,EAAG,QAAQM,QAAQrD,EAAS,QAExDsD,qBA1DwBxD,IAE3Be,EAAqB0C,SACrB1C,EAAqB0C,QAAQC,OAAO1D,EAAO,SAE5CwB,EAA4BxB,GAEhCe,EAAqB0C,QAAUzD,CAAK,EAoD5BI,qBAAsBA,EACtBH,QAASA,EACTC,QAASA,EACTyD,oBAAsBR,GAClBC,EAAAA,QAAMD,GAAcrB,MAAM,QAAQV,OAAO,OAE7CwC,mBAAqBT,GACjBC,EAAAA,QAAMD,GAAcrB,MAAM,QAAQV,OAAO,QAAOiB,SAGnD,EAAGc,kBAEIlB,EAAAA,IAAC4B,oBACGV,aAAcA,EACdtD,cAAeA,EACfa,aAAcA,EACdT,QAASA,EACTC,QAASA,EACT4D,SAAU5C,EACVf,MAAOA,EACPE,gBAAiBA,EACjBC,YAAae,QAKvB"}
+{"version":3,"file":"time-slot-week-view.js","sources":["../../../src/time-slot-week-view/time-slot-week-view.tsx"],"sourcesContent":["import type { Dayjs } from \"dayjs\";\nimport dayjs from \"dayjs\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport type { CalendarManagerRef } from \"../shared/internal-calendar\";\nimport { CalendarManager } from \"../shared/internal-calendar/calendar-manager\";\nimport type { TimeSlot } from \"../time-slot-bar\";\nimport { DateHelper } from \"../util\";\nimport { TimeSlotWeekDays } from \"./time-slot-week-days\";\nimport * as styles from \"./time-slot-week-view.styles\";\nimport type { TimeSlotWeekViewProps } from \"./types\";\n\nconst DATE_FORMAT = \"YYYY-MM-DD\";\n\n// @catalog\n/**\n * A week calendar grid that displays slot availability within each day column.\n *\n * Use `TimeSlotWeekView` for a day-level overview of slot availability across\n * a week. For detailed time-of-day scheduling with a time axis, use\n * `TimeSlotBarWeek` instead.\n * @keywords availability, calendar, scheduling, weekly\n */\nexport const TimeSlotWeekView = ({\n    disabledDates,\n    onWeekDisplayChange,\n    onChange,\n    value,\n    minDate,\n    maxDate,\n    slots,\n    showNavigationHeader = true,\n    enableSelection,\n    onSlotClick,\n    currentCalendarDate,\n    ...otherProps\n}: TimeSlotWeekViewProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [selectedDate, setSelectedDate] = useState<string | undefined>(value); // YYYY-MM-DD\n    const calendarManagerRef = useRef<CalendarManagerRef>(null);\n    const previousCalendarDate = useRef<Dayjs | undefined>(undefined);\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        setSelectedDate(value);\n    }, [value]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n\n    const handleDateSelect = (value: Dayjs) => {\n        const stringValue = value.format(DATE_FORMAT);\n        setSelectedDate(stringValue);\n        onChange?.(stringValue);\n    };\n\n    const handleOnSlotClick = (date: string, slot: TimeSlot) => {\n        if (onSlotClick) {\n            onSlotClick(date, slot);\n        }\n    };\n\n    const handleOnCalendarDateChange = (value: Dayjs) => {\n        if (\n            !previousCalendarDate.current ||\n            !previousCalendarDate.current.isSame(value, \"week\")\n        ) {\n            performDisplayChangeHandler(value);\n        }\n        previousCalendarDate.current = value;\n    };\n\n    // =============================================================================\n    // HELPERS\n    // =============================================================================\n\n    const performDisplayChangeHandler = (value: Dayjs) => {\n        if (onWeekDisplayChange) {\n            const returnValue = {\n                week: {\n                    firstDayOfWeek: value.startOf(\"week\").format(DATE_FORMAT),\n                    lastDayOfWeek: value.endOf(\"week\").format(DATE_FORMAT),\n                },\n                month: value.month() + 1,\n                year: value.year(),\n            };\n\n            onWeekDisplayChange(returnValue);\n        }\n    };\n\n    const getInitialCalendarDate = () => {\n        return DateHelper.toDayjs(selectedDate || currentCalendarDate)\n            .endOf(\"week\")\n            .format(DATE_FORMAT);\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n\n    return (\n        <div className={styles.wrapper} {...otherProps}>\n            <CalendarManager\n                ref={calendarManagerRef}\n                dynamicHeight\n                initialCalendarDate={getInitialCalendarDate()}\n                selectedStartDate={selectedDate}\n                getLeftArrowDate={(day) => day.subtract(1, \"week\")}\n                getRightArrowDate={(day) => day.add(1, \"week\")}\n                isLeftArrowDisabled={(calendarDate) =>\n                    !!minDate &&\n                    dayjs(calendarDate)\n                        .subtract(1, \"week\")\n                        .isBefore(minDate, \"week\")\n                }\n                isRightArrowDisabled={(calendarDate) =>\n                    !!maxDate &&\n                    dayjs(calendarDate).add(1, \"week\").isAfter(maxDate, \"week\")\n                }\n                onCalendarDateChange={handleOnCalendarDateChange}\n                showNavigationHeader={showNavigationHeader}\n                minDate={minDate}\n                maxDate={maxDate}\n                getMonthHeaderLabel={(calendarDate) =>\n                    dayjs(calendarDate).endOf(\"week\").format(\"MMM\")\n                }\n                getYearHeaderLabel={(calendarDate) =>\n                    dayjs(calendarDate).endOf(\"week\").format(\"YYYY\")\n                }\n                isFocusable={true}\n            >\n                {({ calendarDate }) => {\n                    return (\n                        <TimeSlotWeekDays\n                            calendarDate={calendarDate}\n                            disabledDates={disabledDates}\n                            selectedDate={selectedDate}\n                            minDate={minDate}\n                            maxDate={maxDate}\n                            onSelect={handleDateSelect}\n                            slots={slots}\n                            enableSelection={enableSelection}\n                            onSlotClick={handleOnSlotClick}\n                        />\n                    );\n                }}\n            </CalendarManager>\n        </div>\n    );\n};\n"],"names":["DATE_FORMAT","_a","disabledDates","onWeekDisplayChange","onChange","value","minDate","maxDate","slots","showNavigationHeader","enableSelection","onSlotClick","currentCalendarDate","otherProps","__rest","selectedDate","setSelectedDate","useState","calendarManagerRef","useRef","previousCalendarDate","undefined","useEffect","handleDateSelect","stringValue","format","handleOnSlotClick","date","slot","performDisplayChangeHandler","returnValue","week","firstDayOfWeek","startOf","lastDayOfWeek","endOf","month","year","_jsx","Object","assign","className","styles.wrapper","children","CalendarManager","ref","dynamicHeight","initialCalendarDate","DateHelper","toDayjs","selectedStartDate","getLeftArrowDate","day","subtract","getRightArrowDate","add","isLeftArrowDisabled","calendarDate","dayjs","isBefore","isRightArrowDisabled","isAfter","onCalendarDateChange","current","isSame","getMonthHeaderLabel","getYearHeaderLabel","isFocusable","TimeSlotWeekDays","onSelect"],"mappings":"weAYA,MAAMA,EAAc,sCAWaC,IAAA,IAAAC,cAC7BA,EAAaC,oBACbA,EAAmBC,SACnBA,EAAQC,MACRA,EAAKC,QACLA,EAAOC,QACPA,EAAOC,MACPA,EAAKC,qBACLA,GAAuB,EAAIC,gBAC3BA,EAAeC,YACfA,EAAWC,oBACXA,GAAmBX,EAChBY,EAAUC,EAAAA,OAAAb,EAZgB,CAAA,gBAAA,sBAAA,WAAA,QAAA,UAAA,UAAA,QAAA,uBAAA,kBAAA,cAAA,wBAiB7B,MAAOc,EAAcC,GAAmBC,EAAAA,SAA6BZ,GAC/Da,EAAqBC,EAAAA,OAA2B,MAChDC,EAAuBD,EAAAA,YAA0BE,GAKvDC,EAAAA,WAAU,KACNN,EAAgBX,EAAM,GACvB,CAACA,IAMJ,MAAMkB,EAAoBlB,IACtB,MAAMmB,EAAcnB,EAAMoB,OAAOzB,GACjCgB,EAAgBQ,GAChBpB,SAAAA,EAAWoB,EAAY,EAGrBE,EAAoB,CAACC,EAAcC,KACjCjB,GACAA,EAAYgB,EAAMC,EACtB,EAiBEC,EAA+BxB,IACjC,GAAIF,EAAqB,CACrB,MAAM2B,EAAc,CAChBC,KAAM,CACFC,eAAgB3B,EAAM4B,QAAQ,QAAQR,OAAOzB,GAC7CkC,cAAe7B,EAAM8B,MAAM,QAAQV,OAAOzB,IAE9CoC,MAAO/B,EAAM+B,QAAU,EACvBC,KAAMhC,EAAMgC,QAGhBlC,EAAoB2B,EACxB,GAaJ,OACIQ,EAAAA,IAAA,MAAAC,OAAAC,OAAA,CAAKC,UAAWC,EAAAA,SAAoB7B,EAAU,CAAA8B,SAC1CL,MAACM,EAAAA,gBAAe,CACZC,IAAK3B,EACL4B,eAAa,EACbC,oBAdDC,EAAAA,WAAWC,QAAQlC,GAAgBH,GACrCuB,MAAM,QACNV,OAAOzB,GAaJkD,kBAAmBnC,EACnBoC,iBAAmBC,GAAQA,EAAIC,SAAS,EAAG,QAC3CC,kBAAoBF,GAAQA,EAAIG,IAAI,EAAG,QACvCC,oBAAsBC,KAChBnD,GACFoD,EAAAA,QAAMD,GACDJ,SAAS,EAAG,QACZM,SAASrD,EAAS,QAE3BsD,qBAAuBH,KACjBlD,GACFmD,UAAMD,GAAcF,IAAI,EAAG,QAAQM,QAAQtD,EAAS,QAExDuD,qBA1DwBzD,IAE3Be,EAAqB2C,SACrB3C,EAAqB2C,QAAQC,OAAO3D,EAAO,SAE5CwB,EAA4BxB,GAEhCe,EAAqB2C,QAAU1D,CAAK,EAoD5BI,qBAAsBA,EACtBH,QAASA,EACTC,QAASA,EACT0D,oBAAsBR,GAClBC,EAAAA,QAAMD,GAActB,MAAM,QAAQV,OAAO,OAE7CyC,mBAAqBT,GACjBC,EAAAA,QAAMD,GAActB,MAAM,QAAQV,OAAO,QAE7C0C,aAAa,EAAIxB,SAEhB,EAAGc,kBAEInB,EAAAA,IAAC8B,oBACGX,aAAcA,EACdvD,cAAeA,EACfa,aAAcA,EACdT,QAASA,EACTC,QAASA,EACT8D,SAAU9C,EACVf,MAAOA,EACPE,gBAAiBA,EACjBC,YAAae,QAK3B"}

package/cjs/time-slot-week-view/time-slot-week-view.styles.js

@@ -1,10 +1,2 @@
-"use strict";var e=require("styled-components"),t=require("../v3_theme/index.js");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const i=r(e).default.div`
-    --header-bottom-spacing: 0.5rem;
-
-    ${t.V3_MediaQuery.MaxWidth.sm} {
-        --header-horizontal-inset: 1.25rem;
-    }
-
-    min-width: 18.5rem;
-`;exports.Wrapper=i;
+"use strict";require("./time-slot-week-view.styles_gqgsw2.css");exports.wrapper="wgz4q8s";
 //# sourceMappingURL=time-slot-week-view.styles.js.map

package/cjs/time-slot-week-view/time-slot-week-view.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"time-slot-week-view.styles.js","sources":["../../../src/time-slot-week-view/time-slot-week-view.styles.tsx"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { V3_MediaQuery } from \"../v3_theme\";\n\nexport const Wrapper = styled.div`\n    --header-bottom-spacing: 0.5rem;\n\n    ${V3_MediaQuery.MaxWidth.sm} {\n        --header-horizontal-inset: 1.25rem;\n    }\n\n    min-width: 18.5rem;\n`;\n"],"names":["Wrapper","styled","div","V3_MediaQuery","MaxWidth","sm"],"mappings":"0JAIO,MAAMA,OAAUC,QAAOC,GAAG;;;MAG3BC,EAAAA,cAAcC,SAASC;;;;;"}
+{"version":3,"file":"time-slot-week-view.styles.js","sources":["../../../src/time-slot-week-view/time-slot-week-view.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport * as calendarDropdownStyles from \"../shared/internal-calendar/calendar-dropdown.styles\";\nimport { Spacing } from \"../theme\";\n\nexport const wrapper = css`\n    ${calendarDropdownStyles.tokens.headerBottomSpacing}: ${Spacing[\n        \"spacing-8\"\n    ]};\n    min-width: 18.5rem;\n`;\n"],"names":[],"mappings":"mHAKoB"}

package/cjs/time-slot-week-view/time-slot-week-view.styles_gqgsw2.css

@@ -0,0 +1 @@
+@layer fds{.wgz4q8s{--fds-internal-calendarDropdown-headerBottomSpacing:var(--fds-spacing-8);min-width:18.5rem;}}