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

package/cjs/shared/internal-calendar/standard/standard-calendar-day-view.js.map

@@ -1 +1 @@
-{"version":3,"file":"standard-calendar-day-view.js","sources":["../../../../../src/shared/internal-calendar/standard/standard-calendar-day-view.tsx"],"sourcesContent":["import type { Dayjs } from \"dayjs\";\nimport dayjs from \"dayjs\";\nimport isBetween from \"dayjs/plugin/isBetween\";\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\n\nimport { CalendarHelper } from \"../../../util/calendar-helper\";\nimport type { CommonCalendarProps, FocusType } from \"../types\";\nimport {\n    HeaderCell,\n    RowDayCell,\n    Wrapper,\n} from \"./standard-calendar-day-view.style\";\nimport { StandardCell } from \"./standard-cell\";\n\ndayjs.extend(isBetween);\n\n// TODO: to remove after all references have been cleaned up\nexport type DayVariant = \"default\" | \"other-month\" | \"today\";\n\ninterface CalendarDayViewProps extends CommonCalendarProps {\n    selectedStartDate: string | undefined;\n    selectedEndDate: string | undefined;\n    calendarDate: Dayjs;\n    currentFocus?: FocusType | undefined;\n    isNewSelection: boolean;\n    onSelect: (value: Dayjs) => void;\n    onHover: (value: string) => void;\n    setCalendarDate?: ((date: string | undefined) => void) | undefined;\n}\n\nexport const StandardCalendarDayView = ({\n    calendarDate,\n    currentFocus,\n    disabledDates,\n    selectedStartDate,\n    selectedEndDate,\n    onSelect,\n    onHover,\n    isNewSelection,\n    minDate,\n    maxDate,\n    allowDisabledSelection,\n    showActiveMonthDaysOnly,\n    setCalendarDate,\n}: CalendarDayViewProps) => {\n    // =============================================================================\n    // REFS, EFFECTS\n    // =============================================================================\n    const pendingFocusRef = useRef<string | null>(null);\n\n    useEffect(() => {\n        if (pendingFocusRef.current) {\n            const next = pendingFocusRef.current;\n            pendingFocusRef.current = null;\n            setFocusValue(next);\n        }\n    }, [calendarDate]);\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const getDateToFocus = useCallback(() => {\n        // As specified in the Grid Pattern, only one element in the calendar grid is in the Tab sequence.\n        // This function determines which date should be focused based on the state of the calendar.\n\n        // Selected start date is in the current month\n        if (\n            selectedStartDate &&\n            dayjs(selectedStartDate).isSame(calendarDate, \"month\")\n        ) {\n            return dayjs(selectedStartDate);\n        }\n        // Selected end date is in the current month\n        if (\n            selectedEndDate &&\n            dayjs(selectedEndDate).isSame(calendarDate, \"month\")\n        ) {\n            return dayjs(selectedEndDate);\n        }\n\n        // Today is in the current month\n        if (dayjs().isSame(calendarDate, \"month\")) {\n            return dayjs();\n        }\n\n        // Choose min date if it is in the current month\n        if (minDate && calendarDate.isSame(dayjs(minDate), \"month\")) {\n            return dayjs(minDate);\n        }\n\n        // Otherwise, return the first day of the month\n        return dayjs(calendarDate).startOf(\"month\");\n    }, [selectedStartDate, calendarDate, selectedEndDate, minDate]);\n\n    const setFocusCell = (value: string) => {\n        const valueDayjs = dayjs(value);\n\n        if (\n            CalendarHelper.isWithinRange(\n                valueDayjs,\n                minDate ? dayjs(minDate) : undefined,\n                maxDate ? dayjs(maxDate) : undefined\n            )\n        ) {\n            if (!valueDayjs.isSame(calendarDate, \"month\")) {\n                setCalendarDate?.(value);\n                pendingFocusRef.current = value;\n                return;\n            }\n            setFocusValue(value);\n        }\n    };\n\n    // =============================================================================\n    // CONST, STATE\n    // =============================================================================\n    const weeksOfTheMonth = useMemo(\n        (): Dayjs[][] => CalendarHelper.generateDays(calendarDate),\n        [calendarDate]\n    );\n\n    const dateToFocus = useMemo(\n        (): Dayjs => getDateToFocus(),\n        [getDateToFocus]\n    );\n\n    const [focusValue, setFocusValue] = useState<string>(\"\");\n    const [hoverValue, setHoverValue] = useState<string>(\"\");\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleDayClick = (value: Dayjs, isDisabled: boolean) => {\n        if (isDisabled && !allowDisabledSelection) return;\n\n        onSelect(value);\n    };\n\n    const handleHoverCell = (value: string, isDisabled: boolean) => {\n        if (isDisabled && !allowDisabledSelection) return;\n\n        setHoverValue(value);\n        onHover(value);\n    };\n\n    const handleFocusCell = (value: string) => {\n        // Always hover the cell when it is focused\n        setHoverValue(value);\n        onHover(value);\n    };\n\n    const handleMouseLeaveCell = () => {\n        setHoverValue(\"\");\n        onHover(\"\");\n    };\n\n    const handleOnBlur = (e: React.FocusEvent<HTMLDivElement>) => {\n        if (e.currentTarget.contains(e.relatedTarget as Node)) {\n            return;\n        }\n\n        // Reset focus date when the component loses focus\n        setFocusValue(\"\");\n        setHoverValue(\"\");\n        onHover(\"\");\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderHeader = () => {\n        return weeksOfTheMonth[0].map((day, index) => (\n            <HeaderCell key={`week-day-${index}`} aria-hidden>\n                {dayjs(day).format(\"ddd\")}\n            </HeaderCell>\n        ));\n    };\n\n    const renderDayCells = () => {\n        return weeksOfTheMonth.map((week, weekIndex) => {\n            return (\n                <RowDayCell\n                    role=\"row\"\n                    aria-label={`Week ${weekIndex + 1}`}\n                    key={weekIndex}\n                    onMouseLeave={handleMouseLeaveCell}\n                >\n                    {week.map((day, dayIndex) => {\n                        return (\n                            <StandardCell\n                                key={`day-${dayIndex}`}\n                                date={day}\n                                calendarDate={calendarDate}\n                                startDate={selectedStartDate}\n                                endDate={selectedEndDate}\n                                hoverDate={hoverValue}\n                                focusDate={focusValue}\n                                currentFocus={currentFocus}\n                                minDate={minDate}\n                                maxDate={maxDate}\n                                disabledDates={disabledDates}\n                                allowDisabledSelection={allowDisabledSelection}\n                                isNewSelection={isNewSelection}\n                                showActiveMonthDaysOnly={\n                                    showActiveMonthDaysOnly\n                                }\n                                onSelect={handleDayClick}\n                                onHover={handleHoverCell}\n                                onFocus={handleFocusCell}\n                                setFocusCell={setFocusCell}\n                                tabIndex={\n                                    day.isSame(dateToFocus, \"day\") ? 0 : -1\n                                }\n                            />\n                        );\n                    })}\n                </RowDayCell>\n            );\n        });\n    };\n\n    return (\n        <Wrapper\n            role=\"grid\"\n            aria-label=\"Date grid\"\n            data-testid=\"calendar-content\"\n            onBlur={handleOnBlur}\n        >\n            {renderHeader()}\n            {renderDayCells()}\n        </Wrapper>\n    );\n};\n"],"names":["dayjs","extend","isBetween","calendarDate","currentFocus","disabledDates","selectedStartDate","selectedEndDate","onSelect","onHover","isNewSelection","minDate","maxDate","allowDisabledSelection","showActiveMonthDaysOnly","setCalendarDate","pendingFocusRef","useRef","useEffect","current","next","setFocusValue","getDateToFocus","useCallback","isSame","startOf","setFocusCell","value","valueDayjs","CalendarHelper","isWithinRange","undefined","weeksOfTheMonth","useMemo","generateDays","dateToFocus","focusValue","useState","hoverValue","setHoverValue","handleDayClick","isDisabled","handleHoverCell","handleFocusCell","handleMouseLeaveCell","_jsxs","Wrapper","role","onBlur","e","currentTarget","contains","relatedTarget","children","map","day","index","_jsx","HeaderCell","format","week","weekIndex","RowDayCell","onMouseLeave","dayIndex","StandardCell","date","startDate","endDate","hoverDate","focusDate","onFocus","tabIndex"],"mappings":"+SAcAA,EAAAA,QAAMC,OAAOC,EAAAA,yCAgB0B,EACnCC,eACAC,eACAC,gBACAC,oBACAC,kBACAC,WACAC,UACAC,iBACAC,UACAC,UACAC,yBACAC,0BACAC,sBAKA,MAAMC,EAAkBC,EAAAA,OAAsB,MAE9CC,EAAAA,WAAU,KACN,GAAIF,EAAgBG,QAAS,CACzB,MAAMC,EAAOJ,EAAgBG,QAC7BH,EAAgBG,QAAU,KAC1BE,EAAcD,EAClB,IACD,CAACjB,IAKJ,MAAMmB,EAAiBC,EAAAA,aAAY,IAM3BjB,GACAN,EAAAA,QAAMM,GAAmBkB,OAAOrB,EAAc,SAEvCH,EAAAA,QAAMM,GAIbC,GACAP,EAAAA,QAAMO,GAAiBiB,OAAOrB,EAAc,SAErCH,EAAAA,QAAMO,GAIbP,EAAAA,UAAQwB,OAAOrB,EAAc,SACtBH,YAIPW,GAAWR,EAAaqB,OAAOxB,EAAAA,QAAMW,GAAU,SACxCX,EAAAA,QAAMW,GAIVX,UAAMG,GAAcsB,QAAQ,UACpC,CAACnB,EAAmBH,EAAcI,EAAiBI,IAEhDe,EAAgBC,IAClB,MAAMC,EAAa5B,EAAAA,QAAM2B,GAEzB,GACIE,EAAAA,eAAeC,cACXF,EACAjB,EAAUX,EAAAA,QAAMW,QAAWoB,EAC3BnB,EAAUZ,EAAAA,QAAMY,QAAWmB,GAEjC,CACE,IAAKH,EAAWJ,OAAOrB,EAAc,SAGjC,OAFAY,SAAAA,EAAkBY,QAClBX,EAAgBG,QAAUQ,GAG9BN,EAAcM,EAClB,GAMEK,EAAkBC,EAAAA,SACpB,IAAiBJ,EAAAA,eAAeK,aAAa/B,IAC7C,CAACA,IAGCgC,EAAcF,EAAAA,SAChB,IAAaX,KACb,CAACA,KAGEc,EAAYf,GAAiBgB,EAAAA,SAAiB,KAC9CC,EAAYC,GAAiBF,EAAAA,SAAiB,IAK/CG,EAAiB,CAACb,EAAcc,KAC9BA,IAAe5B,GAEnBL,EAASmB,EAAM,EAGbe,EAAkB,CAACf,EAAec,KAChCA,IAAe5B,IAEnB0B,EAAcZ,GACdlB,EAAQkB,GAAM,EAGZgB,EAAmBhB,IAErBY,EAAcZ,GACdlB,EAAQkB,EAAM,EAGZiB,EAAuB,KACzBL,EAAc,IACd9B,EAAQ,GAAG,EAoEf,OACIoC,EAAAA,KAACC,EAAAA,QAAO,CACJC,KAAK,OAAM,aACA,YAAW,cACV,mBACZC,OAtEcC,IACdA,EAAEC,cAAcC,SAASF,EAAEG,iBAK/B/B,EAAc,IACdkB,EAAc,IACd9B,EAAQ,IAAG,EA8Da4C,SAAA,CAvDjBrB,EAAgB,GAAGsB,KAAI,CAACC,EAAKC,IAChCC,EAAAA,IAACC,aAAU,CAAA,eAAA,EAAAL,SACNrD,UAAMuD,GAAKI,OAAO,QADN,YAAYH,OAO1BxB,EAAgBsB,KAAI,CAACM,EAAMC,IAE1BJ,EAAAA,IAACK,EAAAA,WAAU,CACPf,KAAK,MAAK,aACE,QAAQc,EAAY,IAEhCE,aAAcnB,EAAoBS,SAEjCO,EAAKN,KAAI,CAACC,EAAKS,IAERP,MAACQ,EAAAA,aAAY,CAETC,KAAMX,EACNpD,aAAcA,EACdgE,UAAW7D,EACX8D,QAAS7D,EACT8D,UAAW/B,EACXgC,UAAWlC,EACXhC,aAAcA,EACdO,QAASA,EACTC,QAASA,EACTP,cAAeA,EACfQ,uBAAwBA,EACxBH,eAAgBA,EAChBI,wBACIA,EAEJN,SAAUgC,EACV/B,QAASiC,EACT6B,QAAS5B,EACTjB,aAAcA,EACd8C,SACIjB,EAAI/B,OAAOW,EAAa,OAAS,GAAI,GArBpC,OAAO6B,QANnBH,OA8CP"}
+{"version":3,"file":"standard-calendar-day-view.js","sources":["../../../../../src/shared/internal-calendar/standard/standard-calendar-day-view.tsx"],"sourcesContent":["import type { Dayjs } from \"dayjs\";\nimport dayjs from \"dayjs\";\nimport isBetween from \"dayjs/plugin/isBetween\";\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\n\nimport { CalendarHelper } from \"../../../util/calendar-helper\";\nimport type { CommonCalendarProps, FocusType } from \"../types\";\nimport * as styles from \"./standard-calendar-day-view.styles\";\nimport { StandardCell } from \"./standard-cell\";\n\ndayjs.extend(isBetween);\n\ninterface CalendarDayViewProps extends CommonCalendarProps {\n    selectedStartDate: string | undefined;\n    selectedEndDate: string | undefined;\n    calendarDate: Dayjs;\n    currentFocus?: FocusType | undefined;\n    isNewSelection: boolean;\n    onSelect: (value: Dayjs) => void;\n    onHover: (value: string) => void;\n    setCalendarDate?: ((date: string | undefined) => void) | undefined;\n}\n\nexport const StandardCalendarDayView = ({\n    calendarDate,\n    currentFocus,\n    disabledDates,\n    selectedStartDate,\n    selectedEndDate,\n    onSelect,\n    onHover,\n    isNewSelection,\n    minDate,\n    maxDate,\n    allowDisabledSelection,\n    showActiveMonthDaysOnly,\n    setCalendarDate,\n}: CalendarDayViewProps) => {\n    // =============================================================================\n    // REFS, EFFECTS\n    // =============================================================================\n    const pendingFocusRef = useRef<string | null>(null);\n\n    useEffect(() => {\n        if (pendingFocusRef.current) {\n            const next = pendingFocusRef.current;\n            pendingFocusRef.current = null;\n            setFocusValue(next);\n        }\n    }, [calendarDate]);\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const getDateToFocus = useCallback(() => {\n        // As specified in the Grid Pattern, only one element in the calendar grid is in the Tab sequence.\n        // This function determines which date should be focused based on the state of the calendar.\n\n        // Selected start date is in the current month\n        if (\n            selectedStartDate &&\n            dayjs(selectedStartDate).isSame(calendarDate, \"month\")\n        ) {\n            return dayjs(selectedStartDate);\n        }\n        // Selected end date is in the current month\n        if (\n            selectedEndDate &&\n            dayjs(selectedEndDate).isSame(calendarDate, \"month\")\n        ) {\n            return dayjs(selectedEndDate);\n        }\n\n        // Today is in the current month\n        if (dayjs().isSame(calendarDate, \"month\")) {\n            return dayjs();\n        }\n\n        // Choose min date if it is in the current month\n        if (minDate && calendarDate.isSame(dayjs(minDate), \"month\")) {\n            return dayjs(minDate);\n        }\n\n        // Otherwise, return the first day of the month\n        return dayjs(calendarDate).startOf(\"month\");\n    }, [selectedStartDate, calendarDate, selectedEndDate, minDate]);\n\n    const setFocusCell = (value: string) => {\n        const valueDayjs = dayjs(value);\n\n        if (\n            CalendarHelper.isWithinRange(\n                valueDayjs,\n                minDate ? dayjs(minDate) : undefined,\n                maxDate ? dayjs(maxDate) : undefined\n            )\n        ) {\n            if (!valueDayjs.isSame(calendarDate, \"month\")) {\n                setCalendarDate?.(value);\n                pendingFocusRef.current = value;\n                return;\n            }\n            setFocusValue(value);\n        }\n    };\n\n    // =============================================================================\n    // CONST, STATE\n    // =============================================================================\n    const weeksOfTheMonth = useMemo(\n        (): Dayjs[][] => CalendarHelper.generateDays(calendarDate),\n        [calendarDate]\n    );\n\n    const dateToFocus = useMemo(\n        (): Dayjs => getDateToFocus(),\n        [getDateToFocus]\n    );\n\n    const [focusValue, setFocusValue] = useState<string>(\"\");\n    const [hoverValue, setHoverValue] = useState<string>(\"\");\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleDayClick = (value: Dayjs, isDisabled: boolean) => {\n        if (isDisabled && !allowDisabledSelection) return;\n\n        onSelect(value);\n    };\n\n    const handleHoverCell = (value: string, isDisabled: boolean) => {\n        if (isDisabled && !allowDisabledSelection) return;\n\n        setHoverValue(value);\n        onHover(value);\n    };\n\n    const handleFocusCell = (value: string) => {\n        // Always hover the cell when it is focused\n        setHoverValue(value);\n        onHover(value);\n    };\n\n    const handleMouseLeaveCell = () => {\n        setHoverValue(\"\");\n        onHover(\"\");\n    };\n\n    const handleOnBlur = (e: React.FocusEvent<HTMLDivElement>) => {\n        if (e.currentTarget.contains(e.relatedTarget as Node)) {\n            return;\n        }\n\n        // Reset focus date when the component loses focus\n        setFocusValue(\"\");\n        setHoverValue(\"\");\n        onHover(\"\");\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderHeader = () => {\n        return weeksOfTheMonth[0].map((day, index) => (\n            <div\n                key={`week-day-${index}`}\n                className={styles.headerCell}\n                aria-hidden\n            >\n                {dayjs(day).format(\"ddd\")}\n            </div>\n        ));\n    };\n\n    const renderDayCells = () => {\n        return weeksOfTheMonth.map((week, weekIndex) => {\n            return (\n                <div\n                    role=\"row\"\n                    aria-label={`Week ${weekIndex + 1}`}\n                    key={weekIndex}\n                    onMouseLeave={handleMouseLeaveCell}\n                    className={styles.rowDayCell}\n                >\n                    {week.map((day, dayIndex) => {\n                        return (\n                            <StandardCell\n                                key={`day-${dayIndex}`}\n                                date={day}\n                                calendarDate={calendarDate}\n                                startDate={selectedStartDate}\n                                endDate={selectedEndDate}\n                                hoverDate={hoverValue}\n                                focusDate={focusValue}\n                                currentFocus={currentFocus}\n                                minDate={minDate}\n                                maxDate={maxDate}\n                                disabledDates={disabledDates}\n                                allowDisabledSelection={allowDisabledSelection}\n                                isNewSelection={isNewSelection}\n                                showActiveMonthDaysOnly={\n                                    showActiveMonthDaysOnly\n                                }\n                                onSelect={handleDayClick}\n                                onHover={handleHoverCell}\n                                onFocus={handleFocusCell}\n                                setFocusCell={setFocusCell}\n                                tabIndex={\n                                    day.isSame(dateToFocus, \"day\") ? 0 : -1\n                                }\n                            />\n                        );\n                    })}\n                </div>\n            );\n        });\n    };\n\n    return (\n        <div\n            role=\"grid\"\n            aria-label=\"Date grid\"\n            data-testid=\"calendar-content\"\n            onBlur={handleOnBlur}\n            className={styles.wrapper}\n        >\n            {renderHeader()}\n            {renderDayCells()}\n        </div>\n    );\n};\n"],"names":["dayjs","extend","isBetween","calendarDate","currentFocus","disabledDates","selectedStartDate","selectedEndDate","onSelect","onHover","isNewSelection","minDate","maxDate","allowDisabledSelection","showActiveMonthDaysOnly","setCalendarDate","pendingFocusRef","useRef","useEffect","current","next","setFocusValue","getDateToFocus","useCallback","isSame","startOf","setFocusCell","value","valueDayjs","CalendarHelper","isWithinRange","undefined","weeksOfTheMonth","useMemo","generateDays","dateToFocus","focusValue","useState","hoverValue","setHoverValue","handleDayClick","isDisabled","handleHoverCell","handleFocusCell","handleMouseLeaveCell","_jsxs","role","onBlur","e","currentTarget","contains","relatedTarget","className","styles.wrapper","children","map","day","index","_jsx","styles.headerCell","format","week","weekIndex","onMouseLeave","styles.rowDayCell","dayIndex","StandardCell","date","startDate","endDate","hoverDate","focusDate","onFocus","tabIndex"],"mappings":"gTAUAA,EAAAA,QAAMC,OAAOC,EAAAA,yCAa0B,EACnCC,eACAC,eACAC,gBACAC,oBACAC,kBACAC,WACAC,UACAC,iBACAC,UACAC,UACAC,yBACAC,0BACAC,sBAKA,MAAMC,EAAkBC,EAAAA,OAAsB,MAE9CC,EAAAA,WAAU,KACN,GAAIF,EAAgBG,QAAS,CACzB,MAAMC,EAAOJ,EAAgBG,QAC7BH,EAAgBG,QAAU,KAC1BE,EAAcD,EAClB,IACD,CAACjB,IAKJ,MAAMmB,EAAiBC,EAAAA,aAAY,IAM3BjB,GACAN,EAAAA,QAAMM,GAAmBkB,OAAOrB,EAAc,SAEvCH,EAAAA,QAAMM,GAIbC,GACAP,EAAAA,QAAMO,GAAiBiB,OAAOrB,EAAc,SAErCH,EAAAA,QAAMO,GAIbP,EAAAA,UAAQwB,OAAOrB,EAAc,SACtBH,YAIPW,GAAWR,EAAaqB,OAAOxB,EAAAA,QAAMW,GAAU,SACxCX,EAAAA,QAAMW,GAIVX,UAAMG,GAAcsB,QAAQ,UACpC,CAACnB,EAAmBH,EAAcI,EAAiBI,IAEhDe,EAAgBC,IAClB,MAAMC,EAAa5B,EAAAA,QAAM2B,GAEzB,GACIE,EAAAA,eAAeC,cACXF,EACAjB,EAAUX,EAAAA,QAAMW,QAAWoB,EAC3BnB,EAAUZ,EAAAA,QAAMY,QAAWmB,GAEjC,CACE,IAAKH,EAAWJ,OAAOrB,EAAc,SAGjC,OAFAY,SAAAA,EAAkBY,QAClBX,EAAgBG,QAAUQ,GAG9BN,EAAcM,EAClB,GAMEK,EAAkBC,EAAAA,SACpB,IAAiBJ,EAAAA,eAAeK,aAAa/B,IAC7C,CAACA,IAGCgC,EAAcF,EAAAA,SAChB,IAAaX,KACb,CAACA,KAGEc,EAAYf,GAAiBgB,EAAAA,SAAiB,KAC9CC,EAAYC,GAAiBF,EAAAA,SAAiB,IAK/CG,EAAiB,CAACb,EAAcc,KAC9BA,IAAe5B,GAEnBL,EAASmB,EAAM,EAGbe,EAAkB,CAACf,EAAec,KAChCA,IAAe5B,IAEnB0B,EAAcZ,GACdlB,EAAQkB,GAAM,EAGZgB,EAAmBhB,IAErBY,EAAcZ,GACdlB,EAAQkB,EAAM,EAGZiB,EAAuB,KACzBL,EAAc,IACd9B,EAAQ,GAAG,EAyEf,OACIoC,EAAAA,KAAA,MAAA,CACIC,KAAK,OAAM,aACA,YAAW,cACV,mBACZC,OA3EcC,IACdA,EAAEC,cAAcC,SAASF,EAAEG,iBAK/B9B,EAAc,IACdkB,EAAc,IACd9B,EAAQ,IAAG,EAoEP2C,UAAWC,EAAAA,QAAcC,SAAA,CA7DtBtB,EAAgB,GAAGuB,KAAI,CAACC,EAAKC,IAChCC,MAAA,MAAA,CAEIN,UAAWO,EAAAA,qCAGV3D,EAAAA,QAAMwD,GAAKI,OAAO,QAJd,YAAYH,OAUlBzB,EAAgBuB,KAAI,CAACM,EAAMC,IAE1BJ,EAAAA,IAAA,MAAA,CACIZ,KAAK,MAAK,aACE,QAAQgB,EAAY,IAEhCC,aAAcnB,EACdQ,UAAWY,sBAEVH,EAAKN,KAAI,CAACC,EAAKS,IAERP,MAACQ,EAAAA,aAAY,CAETC,KAAMX,EACNrD,aAAcA,EACdiE,UAAW9D,EACX+D,QAAS9D,EACT+D,UAAWhC,EACXiC,UAAWnC,EACXhC,aAAcA,EACdO,QAASA,EACTC,QAASA,EACTP,cAAeA,EACfQ,uBAAwBA,EACxBH,eAAgBA,EAChBI,wBACIA,EAEJN,SAAUgC,EACV/B,QAASiC,EACT8B,QAAS7B,EACTjB,aAAcA,EACd+C,SACIjB,EAAIhC,OAAOW,EAAa,OAAS,GAAI,GArBpC,OAAO8B,QAPnBH,OAgDX"}

package/cjs/shared/internal-calendar/standard/standard-calendar-day-view.styles.js

@@ -0,0 +1,2 @@
+"use strict";require("./standard-calendar-day-view.styles_1bw26au.css");exports.headerCell="hd5h60i",exports.rowDayCell="r7m17b5",exports.wrapper="w1fb9dn4";
+//# sourceMappingURL=standard-calendar-day-view.styles.js.map

package/cjs/shared/internal-calendar/standard/standard-calendar-day-view.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"standard-calendar-day-view.styles.js","sources":["../../../../../src/shared/internal-calendar/standard/standard-calendar-day-view.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font } from \"../../../theme\";\n\nexport const wrapper = css`\n    width: 100%;\n    display: grid;\n    grid-template-columns: repeat(7, 1fr);\n    row-gap: 0.25rem;\n`;\n\nexport const headerCell = css`\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: 2.5rem;\n    pointer-events: none;\n    user-select: none;\n\n    ${Font[\"body-sm-semibold\"]}\n    color: ${Colour[\"text\"]};\n`;\n\nexport const rowDayCell = css`\n    grid-column: 1 / -1;\n    display: flex;\n`;\n"],"names":[],"mappings":"4IAWuB,6BAYA,0BAnBH"}

package/cjs/shared/internal-calendar/standard/standard-calendar-day-view.styles_1bw26au.css

@@ -0,0 +1,3 @@
+@layer fds{.w1fb9dn4{width:100%;display:-ms-grid;display:grid;-ms-grid-columns:repeat(7, 1fr);grid-template-columns:repeat(7, 1fr);row-gap:0.25rem;}
+.hd5h60i{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;height:2.5rem;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-sm);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-sm);letter-spacing:var(--fds-font-body-ls-sm);color:var(--fds-colour-text);}
+.r7m17b5{-ms-grid-column:1/-1;grid-column:1/-1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}}

package/cjs/shared/internal-calendar/standard/standard-cell.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),t=require("../../../external/dayjs/dayjs.min.js"),a=require("../../../util/calendar-helper.js");require("react"),require("../../../util/string-helper.js");var r=require("../day-cell/day-cell.js");exports.StandardCell=({date:l,calendarDate:n,startDate:o,endDate:s,currentFocus:i,hoverDate:d,focusDate:c,minDate:u,maxDate:y,disabledDates:h,allowDisabledSelection:f,isNewSelection:v,showActiveMonthDaysOnly:b,onSelect:D,onHover:p,onFocus:m,setFocusCell:S,tabIndex:g})=>{const w=a.CalendarHelper.isDisabledDay(l,h,u,y),Y=!w||f,T=()=>{D(l,!Y)},j=()=>{const e=t.default(d),a=e.isBefore(s,"day"),r=e.isAfter(o,"day");let l,n,c,u;return"start"===i&&s&&a&&(o&&r?(c=d,u=s):(l=d,n=o||s)),"end"===i&&o&&r&&(s&&a?(c=o,u=d):(l=s||o,n=d)),{hoverStart:l,hoverEnd:n,overlapStart:c,overlapEnd:u}},x={date:l,calendarDate:n,disabled:w,interactive:Y,currentDateIndicator:!0,onSelect:T,onHover:()=>{p(l.format("YYYY-MM-DD"),!Y)},onFocus:()=>{m(l.format("YYYY-MM-DD"))},onKeyDown:e=>{const t=e.key;if("Enter"===t||" "===t)return e.preventDefault(),void(Y&&T());(e=>{let t;const a={ArrowLeft:()=>l.subtract(1,"day"),ArrowRight:()=>l.add(1,"day"),ArrowUp:()=>l.subtract(7,"day"),ArrowDown:()=>l.add(7,"day"),Home:()=>l.startOf("week"),End:()=>l.endOf("week"),PageUp:()=>e.shiftKey?l.subtract(1,"year"):l.subtract(1,"month"),PageDown:()=>e.shiftKey?l.add(1,"year"):l.add(1,"month")}[e.key];a&&(e.preventDefault(),t=a(),S(t.format("YYYY-MM-DD")))})(e)},role:"gridcell",focusDate:t.default(c),tabIndex:g};return e.jsx(r.DayCell,Object.assign({},x,(()=>{const e={};if(n.month()!==l.month())e.labelType=b?"hidden":"unavailable";else if(t.default().isSame(l,"day")&&!w)e.labelType="current";else if(v){const t="end"===i&&o&&l.isBefore(o),a="start"===i&&s&&l.isAfter(s);(t||a)&&(e.labelType="unavailable")}return e})(),(()=>{const e={},t=l.isSame(o,"day"),a=l.isSame(s,"day");return b&&n.month()!==l.month()?(e.labelType="hidden",e):((o&&t||s&&a)&&(e.labelType="selected",e.circleLeft="selected-outline",e.circleRight="selected-outline"),o&&s&&l.isBetween(o,s,"day","[]")&&(e.labelType="selected",t||(e.bgLeft="selected-outline-subtle"),a||(e.bgRight="selected-outline-subtle")),e)})(),(()=>{if(!d)return{};const e={},t=l.isSame(d,"day"),{hoverStart:a,hoverEnd:r,overlapStart:n,overlapEnd:i}=j();if(t){const t=l.isSame(o,"day"),a=l.isSame(s,"day");t||a?(e.labelType="selected-hover",e.circleLeft="selected-hover-outline",e.circleRight="selected-hover-outline"):(e.labelType="hover",e.circleLeft="hover",e.circleRight="hover")}if(a&&r){if(l.isBetween(a,r,"day","[]")){const t=l.isSame(a,"day"),n=l.isSame(r,"day");t||(e.labelType="hover",e.bgLeft="hover-outline"),n||(e.labelType="hover",e.bgRight="hover-outline")}return e}return n&&i?(l.isBetween(n,i,"day","[]")&&t&&(e.labelType="selected-hover",e.circleLeft="selected-hover",e.circleRight="selected-hover"),e):e})()))};
+"use strict";var e=require("react/jsx-runtime"),t=require("../../../external/dayjs/dayjs.min.js"),r=require("../../../util/calendar-helper.js");require("react"),require("../../../util/simple-id-generator.js"),require("../../../util/string-helper.js"),require("@react-aria/live-announcer");var a=require("../day-cell/day-cell.js");exports.StandardCell=({date:l,calendarDate:i,startDate:n,endDate:o,currentFocus:s,hoverDate:d,focusDate:c,minDate:u,maxDate:y,disabledDates:h,allowDisabledSelection:v,isNewSelection:f,showActiveMonthDaysOnly:b,onSelect:D,onHover:p,onFocus:m,setFocusCell:g,tabIndex:S})=>{const w=r.CalendarHelper.isDisabledDay(l,h,u,y),Y=!w||v,T=()=>{D(l,!Y)},j=()=>{const e=t.default(d),r=e.isBefore(o,"day"),a=e.isAfter(n,"day");let l,i,c,u;return"start"===s&&o&&r&&(n&&a?(c=d,u=o):(l=d,i=n||o)),"end"===s&&n&&a&&(o&&r?(c=n,u=d):(l=o||n,i=d)),{hoverStart:l,hoverEnd:i,overlapStart:c,overlapEnd:u}},q={date:l,calendarDate:i,disabled:w,interactive:Y,currentDateIndicator:!0,onSelect:T,onHover:()=>{p(l.format("YYYY-MM-DD"),!Y)},onFocus:()=>{m(l.format("YYYY-MM-DD"))},onKeyDown:e=>{const t=e.key;if("Enter"===t||" "===t)return e.preventDefault(),void(Y&&T());(e=>{let t;const r={ArrowLeft:()=>l.subtract(1,"day"),ArrowRight:()=>l.add(1,"day"),ArrowUp:()=>l.subtract(7,"day"),ArrowDown:()=>l.add(7,"day"),Home:()=>l.startOf("week"),End:()=>l.endOf("week"),PageUp:()=>e.shiftKey?l.subtract(1,"year"):l.subtract(1,"month"),PageDown:()=>e.shiftKey?l.add(1,"year"):l.add(1,"month")}[e.key];r&&(e.preventDefault(),t=r(),g(t.format("YYYY-MM-DD")))})(e)},role:"gridcell",focusDate:t.default(c),tabIndex:S};return e.jsx(a.DayCell,Object.assign({},q,(()=>{const e={};if(i.month()!==l.month())e.labelType=b?"hidden":"unavailable";else if(t.default().isSame(l,"day")&&!w)e.labelType="current";else if(f){const t="end"===s&&n&&l.isBefore(n),r="start"===s&&o&&l.isAfter(o);(t||r)&&(e.labelType="unavailable")}return e})(),(()=>{const e={},t=l.isSame(n,"day"),r=l.isSame(o,"day");return b&&i.month()!==l.month()?(e.labelType="hidden",e):((n&&t||o&&r)&&(e.labelType="selected",e.circleLeft="selected-outline",e.circleRight="selected-outline"),n&&o&&l.isBetween(n,o,"day","[]")&&(e.labelType="selected",t||(e.bgLeft="selected-outline-subtle"),r||(e.bgRight="selected-outline-subtle")),e)})(),(()=>{if(!d)return{};const e={},t=l.isSame(d,"day"),{hoverStart:r,hoverEnd:a,overlapStart:i,overlapEnd:s}=j();if(t){const t=l.isSame(n,"day"),r=l.isSame(o,"day");t||r?(e.labelType="selected-hover",e.circleLeft="selected-hover-outline",e.circleRight="selected-hover-outline"):(e.labelType="hover",e.circleLeft="hover",e.circleRight="hover")}if(r&&a){if(l.isBetween(r,a,"day","[]")){const t=l.isSame(r,"day"),i=l.isSame(a,"day");t||(e.labelType="hover",e.bgLeft="hover-outline"),i||(e.labelType="hover",e.bgRight="hover-outline")}return e}return i&&s?(l.isBetween(i,s,"day","[]")&&t&&(e.labelType="selected-hover",e.circleLeft="selected-hover",e.circleRight="selected-hover"),e):e})()))};
 //# sourceMappingURL=standard-cell.js.map

package/cjs/shared/internal-calendar/standard/standard-cell.js.map

@@ -1 +1 @@
-{"version":3,"file":"standard-cell.js","sources":["../../../../../src/shared/internal-calendar/standard/standard-cell.tsx"],"sourcesContent":["import type { Dayjs } from \"dayjs\";\nimport dayjs from \"dayjs\";\n\nimport { CalendarHelper } from \"../../../util\";\nimport { DayCell } from \"../day-cell/day-cell\";\nimport type { CellStyleProps, DayCellProps } from \"../day-cell/types\";\nimport type { FocusType } from \"../types\";\n\ninterface Props {\n    date: Dayjs;\n    calendarDate: Dayjs;\n    startDate: string | undefined;\n    endDate: string | undefined;\n    hoverDate: string;\n    focusDate: string;\n    minDate?: string | undefined;\n    maxDate?: string | undefined;\n    disabledDates?: string[] | undefined;\n    allowDisabledSelection?: boolean | undefined;\n    isNewSelection?: boolean | undefined;\n    currentFocus?: FocusType | undefined;\n    showActiveMonthDaysOnly?: boolean | undefined;\n    onSelect: (value: Dayjs, disabled: boolean) => void;\n    onHover: (value: string, disabled: boolean) => void;\n    onFocus: (value: string) => void;\n    setFocusCell: (value: string) => void;\n    tabIndex: number;\n}\n\nexport const StandardCell = ({\n    date,\n    calendarDate,\n    startDate,\n    endDate,\n    currentFocus,\n    hoverDate,\n    focusDate,\n    minDate,\n    maxDate,\n    disabledDates,\n    allowDisabledSelection,\n    isNewSelection,\n    showActiveMonthDaysOnly,\n    onSelect,\n    onHover,\n    onFocus,\n    setFocusCell,\n    tabIndex,\n}: Props) => {\n    // =========================================================================\n    // CONSTS\n    // =========================================================================\n    const disabled = CalendarHelper.isDisabledDay(\n        date,\n        disabledDates,\n        minDate,\n        maxDate\n    );\n    const interactive = !disabled || allowDisabledSelection;\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleSelect = () => {\n        onSelect(date, !interactive);\n    };\n\n    const handleHover = () => {\n        onHover(date.format(\"YYYY-MM-DD\"), !interactive);\n    };\n\n    const handleFocus = () => {\n        onFocus(date.format(\"YYYY-MM-DD\"));\n    };\n\n    const handleKeyNavigation = (event: React.KeyboardEvent) => {\n        let newFocusSelection: Dayjs | undefined;\n\n        const keyActions: Record<string, () => dayjs.Dayjs> = {\n            ArrowLeft: () => date.subtract(1, \"day\"),\n            ArrowRight: () => date.add(1, \"day\"),\n            ArrowUp: () => date.subtract(7, \"day\"),\n            ArrowDown: () => date.add(7, \"day\"),\n            Home: () => date.startOf(\"week\"),\n            End: () => date.endOf(\"week\"),\n            PageUp: () => {\n                return event.shiftKey\n                    ? date.subtract(1, \"year\")\n                    : date.subtract(1, \"month\");\n            },\n            PageDown: () => {\n                return event.shiftKey\n                    ? date.add(1, \"year\")\n                    : date.add(1, \"month\");\n            },\n        };\n\n        const action = keyActions[event.key];\n        if (action) {\n            event.preventDefault();\n            newFocusSelection = action();\n            setFocusCell(newFocusSelection.format(\"YYYY-MM-DD\"));\n        }\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent) => {\n        const keyboardEvent = event as React.KeyboardEvent<HTMLInputElement>;\n        const selectedKey = keyboardEvent.key;\n\n        if (selectedKey === \"Enter\" || selectedKey === \" \") {\n            event.preventDefault();\n            if (interactive) {\n                handleSelect();\n            }\n            return;\n        }\n\n        handleKeyNavigation(event);\n    };\n\n    // =========================================================================\n    // HELPERS\n    // =========================================================================\n    const getCellStyle = () => {\n        const props: CellStyleProps = {};\n\n        if (calendarDate.month() !== date.month()) {\n            props.labelType = showActiveMonthDaysOnly\n                ? \"hidden\"\n                : \"unavailable\";\n        } else if (dayjs().isSame(date, \"day\") && !disabled) {\n            props.labelType = \"current\";\n        } else if (isNewSelection) {\n            const beforeStart =\n                currentFocus === \"end\" && startDate && date.isBefore(startDate);\n            const afterEnd =\n                currentFocus === \"start\" && endDate && date.isAfter(endDate);\n\n            if (beforeStart || afterEnd) {\n                props.labelType = \"unavailable\";\n            }\n        }\n\n        return props;\n    };\n\n    const getSelectedStyle = (): CellStyleProps => {\n        const props: CellStyleProps = {};\n\n        const isStart = date.isSame(startDate, \"day\");\n        const isEnd = date.isSame(endDate, \"day\");\n\n        if (showActiveMonthDaysOnly && calendarDate.month() !== date.month()) {\n            props.labelType = \"hidden\";\n            return props;\n        }\n\n        if ((startDate && isStart) || (endDate && isEnd)) {\n            props.labelType = \"selected\";\n            props.circleLeft = \"selected-outline\";\n            props.circleRight = \"selected-outline\";\n        }\n\n        if (\n            startDate &&\n            endDate &&\n            date.isBetween(startDate, endDate, \"day\", \"[]\")\n        ) {\n            props.labelType = \"selected\";\n\n            if (!isStart) {\n                props.bgLeft = \"selected-outline-subtle\";\n            }\n            if (!isEnd) {\n                props.bgRight = \"selected-outline-subtle\";\n            }\n        }\n\n        return props;\n    };\n\n    const getHoverStyle = (): CellStyleProps => {\n        if (!hoverDate) {\n            return {};\n        }\n\n        const props: CellStyleProps = {};\n\n        const isHover = date.isSame(hoverDate, \"day\");\n\n        const { hoverStart, hoverEnd, overlapStart, overlapEnd } =\n            getHoverRange();\n\n        if (isHover) {\n            const isStart = date.isSame(startDate, \"day\");\n            const isEnd = date.isSame(endDate, \"day\");\n            if (isStart || isEnd) {\n                props.labelType = \"selected-hover\";\n                props.circleLeft = \"selected-hover-outline\";\n                props.circleRight = \"selected-hover-outline\";\n            } else {\n                props.labelType = \"hover\";\n                props.circleLeft = \"hover\";\n                props.circleRight = \"hover\";\n            }\n        }\n\n        if (hoverStart && hoverEnd) {\n            if (date.isBetween(hoverStart, hoverEnd, \"day\", \"[]\")) {\n                const isStart = date.isSame(hoverStart, \"day\");\n                const isEnd = date.isSame(hoverEnd, \"day\");\n\n                if (!isStart) {\n                    props.labelType = \"hover\";\n                    props.bgLeft = \"hover-outline\";\n                }\n                if (!isEnd) {\n                    props.labelType = \"hover\";\n                    props.bgRight = \"hover-outline\";\n                }\n            }\n\n            return props;\n        }\n\n        if (overlapStart && overlapEnd) {\n            if (date.isBetween(overlapStart, overlapEnd, \"day\", \"[]\")) {\n                if (isHover) {\n                    props.labelType = \"selected-hover\";\n                    props.circleLeft = \"selected-hover\";\n                    props.circleRight = \"selected-hover\";\n                }\n            }\n\n            return props;\n        }\n\n        return props;\n    };\n\n    const getHoverRange = () => {\n        const hoverDay = dayjs(hoverDate);\n        const isBeforeEnd = hoverDay.isBefore(endDate, \"day\");\n        const isAfterStart = hoverDay.isAfter(startDate, \"day\");\n\n        let hoverStart: string | undefined, hoverEnd: string | undefined;\n        let overlapStart: string | undefined, overlapEnd: string | undefined;\n\n        // [s h e] => overlap\n        // [h s e] => hover\n        // [h e]   => hover\n        if (currentFocus === \"start\" && endDate && isBeforeEnd) {\n            if (startDate && isAfterStart) {\n                overlapStart = hoverDate;\n                overlapEnd = endDate;\n            } else {\n                hoverStart = hoverDate;\n                hoverEnd = startDate || endDate;\n            }\n        }\n\n        // [s h e] => overlap\n        // [s e h] => hover\n        // [s h]   => hover\n        if (currentFocus === \"end\" && startDate && isAfterStart) {\n            if (endDate && isBeforeEnd) {\n                overlapStart = startDate;\n                overlapEnd = hoverDate;\n            } else {\n                hoverStart = endDate || startDate;\n                hoverEnd = hoverDate;\n            }\n        }\n\n        return {\n            hoverStart,\n            hoverEnd,\n            overlapStart,\n            overlapEnd,\n        };\n    };\n\n    // =============================================================================\n    // RENDER FUNCTION\n    // =============================================================================\n\n    const commonProps: DayCellProps = {\n        date,\n        calendarDate,\n        disabled,\n        interactive,\n        currentDateIndicator: true,\n        onSelect: handleSelect,\n        onHover: handleHover,\n        onFocus: handleFocus,\n        onKeyDown: handleKeyDown,\n        role: \"gridcell\",\n        focusDate: dayjs(focusDate),\n        tabIndex,\n    };\n\n    return (\n        <DayCell\n            {...commonProps}\n            {...getCellStyle()}\n            {...getSelectedStyle()}\n            {...getHoverStyle()}\n        />\n    );\n};\n"],"names":["date","calendarDate","startDate","endDate","currentFocus","hoverDate","focusDate","minDate","maxDate","disabledDates","allowDisabledSelection","isNewSelection","showActiveMonthDaysOnly","onSelect","onHover","onFocus","setFocusCell","tabIndex","disabled","CalendarHelper","isDisabledDay","interactive","handleSelect","getHoverRange","hoverDay","dayjs","isBeforeEnd","isBefore","isAfterStart","isAfter","hoverStart","hoverEnd","overlapStart","overlapEnd","commonProps","currentDateIndicator","format","onKeyDown","event","selectedKey","key","preventDefault","newFocusSelection","action","ArrowLeft","subtract","ArrowRight","add","ArrowUp","ArrowDown","Home","startOf","End","endOf","PageUp","shiftKey","PageDown","handleKeyNavigation","role","_jsx","DayCell","Object","assign","props","month","labelType","isSame","beforeStart","afterEnd","getCellStyle","isStart","isEnd","circleLeft","circleRight","isBetween","bgLeft","bgRight","getSelectedStyle","isHover","getHoverStyle"],"mappings":"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"}
+{"version":3,"file":"standard-cell.js","sources":["../../../../../src/shared/internal-calendar/standard/standard-cell.tsx"],"sourcesContent":["import type { Dayjs } from \"dayjs\";\nimport dayjs from \"dayjs\";\n\nimport { CalendarHelper } from \"../../../util\";\nimport { DayCell } from \"../day-cell/day-cell\";\nimport type { CellStyleProps, DayCellProps } from \"../day-cell/types\";\nimport type { FocusType } from \"../types\";\n\ninterface Props {\n    date: Dayjs;\n    calendarDate: Dayjs;\n    startDate: string | undefined;\n    endDate: string | undefined;\n    hoverDate: string;\n    focusDate: string;\n    minDate?: string | undefined;\n    maxDate?: string | undefined;\n    disabledDates?: string[] | undefined;\n    allowDisabledSelection?: boolean | undefined;\n    isNewSelection?: boolean | undefined;\n    currentFocus?: FocusType | undefined;\n    showActiveMonthDaysOnly?: boolean | undefined;\n    onSelect: (value: Dayjs, disabled: boolean) => void;\n    onHover: (value: string, disabled: boolean) => void;\n    onFocus: (value: string) => void;\n    setFocusCell: (value: string) => void;\n    tabIndex: number;\n}\n\nexport const StandardCell = ({\n    date,\n    calendarDate,\n    startDate,\n    endDate,\n    currentFocus,\n    hoverDate,\n    focusDate,\n    minDate,\n    maxDate,\n    disabledDates,\n    allowDisabledSelection,\n    isNewSelection,\n    showActiveMonthDaysOnly,\n    onSelect,\n    onHover,\n    onFocus,\n    setFocusCell,\n    tabIndex,\n}: Props) => {\n    // =========================================================================\n    // CONSTS\n    // =========================================================================\n    const disabled = CalendarHelper.isDisabledDay(\n        date,\n        disabledDates,\n        minDate,\n        maxDate\n    );\n    const interactive = !disabled || allowDisabledSelection;\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleSelect = () => {\n        onSelect(date, !interactive);\n    };\n\n    const handleHover = () => {\n        onHover(date.format(\"YYYY-MM-DD\"), !interactive);\n    };\n\n    const handleFocus = () => {\n        onFocus(date.format(\"YYYY-MM-DD\"));\n    };\n\n    const handleKeyNavigation = (event: React.KeyboardEvent) => {\n        let newFocusSelection: Dayjs | undefined;\n\n        const keyActions: Record<string, () => dayjs.Dayjs> = {\n            ArrowLeft: () => date.subtract(1, \"day\"),\n            ArrowRight: () => date.add(1, \"day\"),\n            ArrowUp: () => date.subtract(7, \"day\"),\n            ArrowDown: () => date.add(7, \"day\"),\n            Home: () => date.startOf(\"week\"),\n            End: () => date.endOf(\"week\"),\n            PageUp: () => {\n                return event.shiftKey\n                    ? date.subtract(1, \"year\")\n                    : date.subtract(1, \"month\");\n            },\n            PageDown: () => {\n                return event.shiftKey\n                    ? date.add(1, \"year\")\n                    : date.add(1, \"month\");\n            },\n        };\n\n        const action = keyActions[event.key];\n        if (action) {\n            event.preventDefault();\n            newFocusSelection = action();\n            setFocusCell(newFocusSelection.format(\"YYYY-MM-DD\"));\n        }\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent) => {\n        const keyboardEvent = event as React.KeyboardEvent<HTMLInputElement>;\n        const selectedKey = keyboardEvent.key;\n\n        if (selectedKey === \"Enter\" || selectedKey === \" \") {\n            event.preventDefault();\n            if (interactive) {\n                handleSelect();\n            }\n            return;\n        }\n\n        handleKeyNavigation(event);\n    };\n\n    // =========================================================================\n    // HELPERS\n    // =========================================================================\n    const getCellStyle = () => {\n        const props: CellStyleProps = {};\n\n        if (calendarDate.month() !== date.month()) {\n            props.labelType = showActiveMonthDaysOnly\n                ? \"hidden\"\n                : \"unavailable\";\n        } else if (dayjs().isSame(date, \"day\") && !disabled) {\n            props.labelType = \"current\";\n        } else if (isNewSelection) {\n            const beforeStart =\n                currentFocus === \"end\" && startDate && date.isBefore(startDate);\n            const afterEnd =\n                currentFocus === \"start\" && endDate && date.isAfter(endDate);\n\n            if (beforeStart || afterEnd) {\n                props.labelType = \"unavailable\";\n            }\n        }\n\n        return props;\n    };\n\n    const getSelectedStyle = (): CellStyleProps => {\n        const props: CellStyleProps = {};\n\n        const isStart = date.isSame(startDate, \"day\");\n        const isEnd = date.isSame(endDate, \"day\");\n\n        if (showActiveMonthDaysOnly && calendarDate.month() !== date.month()) {\n            props.labelType = \"hidden\";\n            return props;\n        }\n\n        if ((startDate && isStart) || (endDate && isEnd)) {\n            props.labelType = \"selected\";\n            props.circleLeft = \"selected-outline\";\n            props.circleRight = \"selected-outline\";\n        }\n\n        if (\n            startDate &&\n            endDate &&\n            date.isBetween(startDate, endDate, \"day\", \"[]\")\n        ) {\n            props.labelType = \"selected\";\n\n            if (!isStart) {\n                props.bgLeft = \"selected-outline-subtle\";\n            }\n            if (!isEnd) {\n                props.bgRight = \"selected-outline-subtle\";\n            }\n        }\n\n        return props;\n    };\n\n    const getHoverStyle = (): CellStyleProps => {\n        if (!hoverDate) {\n            return {};\n        }\n\n        const props: CellStyleProps = {};\n\n        const isHover = date.isSame(hoverDate, \"day\");\n\n        const { hoverStart, hoverEnd, overlapStart, overlapEnd } =\n            getHoverRange();\n\n        if (isHover) {\n            const isStart = date.isSame(startDate, \"day\");\n            const isEnd = date.isSame(endDate, \"day\");\n            if (isStart || isEnd) {\n                props.labelType = \"selected-hover\";\n                props.circleLeft = \"selected-hover-outline\";\n                props.circleRight = \"selected-hover-outline\";\n            } else {\n                props.labelType = \"hover\";\n                props.circleLeft = \"hover\";\n                props.circleRight = \"hover\";\n            }\n        }\n\n        if (hoverStart && hoverEnd) {\n            if (date.isBetween(hoverStart, hoverEnd, \"day\", \"[]\")) {\n                const isStart = date.isSame(hoverStart, \"day\");\n                const isEnd = date.isSame(hoverEnd, \"day\");\n\n                if (!isStart) {\n                    props.labelType = \"hover\";\n                    props.bgLeft = \"hover-outline\";\n                }\n                if (!isEnd) {\n                    props.labelType = \"hover\";\n                    props.bgRight = \"hover-outline\";\n                }\n            }\n\n            return props;\n        }\n\n        if (overlapStart && overlapEnd) {\n            if (date.isBetween(overlapStart, overlapEnd, \"day\", \"[]\")) {\n                if (isHover) {\n                    props.labelType = \"selected-hover\";\n                    props.circleLeft = \"selected-hover\";\n                    props.circleRight = \"selected-hover\";\n                }\n            }\n\n            return props;\n        }\n\n        return props;\n    };\n\n    const getHoverRange = () => {\n        const hoverDay = dayjs(hoverDate);\n        const isBeforeEnd = hoverDay.isBefore(endDate, \"day\");\n        const isAfterStart = hoverDay.isAfter(startDate, \"day\");\n\n        let hoverStart: string | undefined, hoverEnd: string | undefined;\n        let overlapStart: string | undefined, overlapEnd: string | undefined;\n\n        // [s h e] => overlap\n        // [h s e] => hover\n        // [h e]   => hover\n        if (currentFocus === \"start\" && endDate && isBeforeEnd) {\n            if (startDate && isAfterStart) {\n                overlapStart = hoverDate;\n                overlapEnd = endDate;\n            } else {\n                hoverStart = hoverDate;\n                hoverEnd = startDate || endDate;\n            }\n        }\n\n        // [s h e] => overlap\n        // [s e h] => hover\n        // [s h]   => hover\n        if (currentFocus === \"end\" && startDate && isAfterStart) {\n            if (endDate && isBeforeEnd) {\n                overlapStart = startDate;\n                overlapEnd = hoverDate;\n            } else {\n                hoverStart = endDate || startDate;\n                hoverEnd = hoverDate;\n            }\n        }\n\n        return {\n            hoverStart,\n            hoverEnd,\n            overlapStart,\n            overlapEnd,\n        };\n    };\n\n    // =============================================================================\n    // RENDER FUNCTION\n    // =============================================================================\n\n    const commonProps: DayCellProps = {\n        date,\n        calendarDate,\n        disabled,\n        interactive,\n        currentDateIndicator: true,\n        onSelect: handleSelect,\n        onHover: handleHover,\n        onFocus: handleFocus,\n        onKeyDown: handleKeyDown,\n        role: \"gridcell\",\n        focusDate: dayjs(focusDate),\n        tabIndex,\n    };\n\n    return (\n        <DayCell\n            {...commonProps}\n            {...getCellStyle()}\n            {...getSelectedStyle()}\n            {...getHoverStyle()}\n        />\n    );\n};\n"],"names":["date","calendarDate","startDate","endDate","currentFocus","hoverDate","focusDate","minDate","maxDate","disabledDates","allowDisabledSelection","isNewSelection","showActiveMonthDaysOnly","onSelect","onHover","onFocus","setFocusCell","tabIndex","disabled","CalendarHelper","isDisabledDay","interactive","handleSelect","getHoverRange","hoverDay","dayjs","isBeforeEnd","isBefore","isAfterStart","isAfter","hoverStart","hoverEnd","overlapStart","overlapEnd","commonProps","currentDateIndicator","format","onKeyDown","event","selectedKey","key","preventDefault","newFocusSelection","action","ArrowLeft","subtract","ArrowRight","add","ArrowUp","ArrowDown","Home","startOf","End","endOf","PageUp","shiftKey","PageDown","handleKeyNavigation","role","_jsx","DayCell","Object","assign","props","month","labelType","isSame","beforeStart","afterEnd","getCellStyle","isStart","isEnd","circleLeft","circleRight","isBetween","bgLeft","bgRight","getSelectedStyle","isHover","getHoverStyle"],"mappings":"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"}

package/cjs/shared/internal-calendar/week/week-calendar-day-view.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),a=require("../../../external/dayjs/dayjs.min.js"),t=require("react"),r=require("../../../util/calendar-helper.js");require("../standard/standard-calendar-day-view.js");var l=require("../standard/standard-calendar-day-view.style.js"),d=require("./week-day-cell.js");exports.WeekCalendarDayView=({calendarDate:n,disabledDates:s,selectedStartDate:i,onSelect:u,onHover:o,minDate:c,maxDate:f,allowDisabledSelection:m,setCalendarDate:D})=>{const h=t.useRef(null);t.useEffect((()=>{if(h.current){const e=h.current;h.current=null,w(e)}}),[n]);const y=t.useCallback((()=>i&&a.default(i).isSame(n,"month")?a.default(i):a.default().isSame(n,"month")?a.default().startOf("week"):c&&n.isSame(a.default(c),"month")?a.default(c):a.default(n).startOf("month")),[i,n,c]),S=e=>{const t=a.default(e);if(r.CalendarHelper.isWithinRange(t,c?a.default(c):void 0,f?a.default(f):void 0)){if(!t.isSame(n,"month"))return null==D||D(e),void(h.current=e);w(e)}},j=t.useMemo((()=>r.CalendarHelper.generateDays(n)),[n]),v=t.useMemo((()=>y()),[y]),[p,w]=t.useState(""),[x,C]=t.useState(""),k=(e,t)=>{if(t&&!m)return;const r=e.startOf("week");u(r),e&&!a.default(e).isSame(r,"month")&&C("")},b=(e,a)=>{a&&!m||(C(e),o(e))},q=e=>{C(e),o(e)},g=()=>{C(""),o("")};return e.jsxs(l.Wrapper,{"data-testid":"calendar-content",onBlur:e=>{e.currentTarget.contains(e.relatedTarget)||(w(""),C(""),o(""))},"aria-label":"Week selection",children:[j[0].map(((t,r)=>e.jsx(l.HeaderCell,{"aria-hidden":!0,children:a.default(t).format("ddd")},`week-day-${r}`))),j.map(((t,r)=>e.jsx(l.RowDayCell,{onMouseLeave:g,role:"group",children:t.map(((t,r)=>e.jsx(d.WeekDayCell,{date:t,calendarDate:n,selectedDate:i,hoverDate:x,focusDate:p,minDate:c,maxDate:f,disabledDates:s,allowDisabledSelection:m,onSelect:k,onHover:b,onFocus:q,setFocusCell:S,tabIndex:a.default(t).isSame(v,"day")?0:-1},`day-${r}`)))},r)))]})};
+"use strict";var e=require("react/jsx-runtime"),a=require("../../../external/dayjs/dayjs.min.js"),t=require("react"),r=require("../../../util/calendar-helper.js"),l=require("../standard/standard-calendar-day-view.styles.js"),s=require("./week-day-cell.js");exports.WeekCalendarDayView=({calendarDate:d,disabledDates:n,selectedStartDate:i,onSelect:u,onHover:o,minDate:c,maxDate:m,allowDisabledSelection:f,setCalendarDate:D})=>{const h=t.useRef(null);t.useEffect((()=>{if(h.current){const e=h.current;h.current=null,w(e)}}),[d]);const S=t.useCallback((()=>i&&a.default(i).isSame(d,"month")?a.default(i):a.default().isSame(d,"month")?a.default().startOf("week"):c&&d.isSame(a.default(c),"month")?a.default(c):a.default(d).startOf("month")),[i,d,c]),v=e=>{const t=a.default(e);if(r.CalendarHelper.isWithinRange(t,c?a.default(c):void 0,m?a.default(m):void 0)){if(!t.isSame(d,"month"))return null==D||D(e),void(h.current=e);w(e)}},y=t.useMemo((()=>r.CalendarHelper.generateDays(d)),[d]),j=t.useMemo((()=>S()),[S]),[p,w]=t.useState(""),[x,C]=t.useState(""),k=(e,t)=>{if(t&&!f)return;const r=e.startOf("week");u(r),e&&!a.default(e).isSame(r,"month")&&C("")},b=(e,a)=>{a&&!f||(C(e),o(e))},q=e=>{C(e),o(e)},g=()=>{C(""),o("")};return e.jsxs("div",{"data-testid":"calendar-content",onBlur:e=>{e.currentTarget.contains(e.relatedTarget)||(w(""),C(""),o(""))},"aria-label":"Week selection",className:l.wrapper,children:[y[0].map(((t,r)=>e.jsx("div",{className:l.headerCell,"aria-hidden":!0,children:a.default(t).format("ddd")},`week-day-${r}`))),y.map(((t,r)=>e.jsx("div",{onMouseLeave:g,role:"group",className:l.rowDayCell,children:t.map(((t,r)=>e.jsx(s.WeekDayCell,{date:t,calendarDate:d,selectedDate:i,hoverDate:x,focusDate:p,minDate:c,maxDate:m,disabledDates:n,allowDisabledSelection:f,onSelect:k,onHover:b,onFocus:q,setFocusCell:v,tabIndex:a.default(t).isSame(j,"day")?0:-1},`day-${r}`)))},r)))]})};
 //# sourceMappingURL=week-calendar-day-view.js.map

package/cjs/shared/internal-calendar/week/week-calendar-day-view.js.map

@@ -1 +1 @@
-{"version":3,"file":"week-calendar-day-view.js","sources":["../../../../../src/shared/internal-calendar/week/week-calendar-day-view.tsx"],"sourcesContent":["import type { Dayjs } from \"dayjs\";\nimport dayjs from \"dayjs\";\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\n\nimport { CalendarHelper } from \"../../../util/calendar-helper\";\nimport { HeaderCell, RowDayCell, Wrapper } from \"../standard\";\nimport type { CommonCalendarProps } from \"../types\";\nimport { WeekDayCell } from \"./week-day-cell\";\n\ninterface WeekCalendarDayViewProps extends CommonCalendarProps {\n    selectedStartDate: string | undefined;\n    calendarDate: Dayjs;\n    onSelect: (value: Dayjs) => void;\n    onHover: (value: string) => void;\n    setCalendarDate?: ((date: string | undefined) => void) | undefined;\n}\n\nexport const WeekCalendarDayView = ({\n    calendarDate,\n    disabledDates,\n    selectedStartDate,\n    onSelect,\n    onHover,\n    minDate,\n    maxDate,\n    allowDisabledSelection,\n    setCalendarDate,\n}: WeekCalendarDayViewProps) => {\n    // =============================================================================\n    // REFS, EFFECTS\n    // =============================================================================\n    const pendingFocusRef = useRef<string | null>(null);\n\n    useEffect(() => {\n        if (pendingFocusRef.current) {\n            const next = pendingFocusRef.current;\n            pendingFocusRef.current = null;\n            setFocusValue(next);\n        }\n    }, [calendarDate]);\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const getDateToFocus = useCallback(() => {\n        // As specified in the Grid Pattern, only one element in the calendar grid is in the Tab sequence.\n        // This function determines which date should be focused based on the state of the calendar.\n\n        // Selected start date is in the current month\n        if (\n            selectedStartDate &&\n            dayjs(selectedStartDate).isSame(calendarDate, \"month\")\n        ) {\n            return dayjs(selectedStartDate);\n        }\n\n        // Today is in the current month\n        if (dayjs().isSame(calendarDate, \"month\")) {\n            // Choose first day of the week of today\n            return dayjs().startOf(\"week\");\n        }\n\n        // Choose min date if it is in the current month\n        if (minDate && calendarDate.isSame(dayjs(minDate), \"month\")) {\n            return dayjs(minDate);\n        }\n\n        // Otherwise, return the first day of the month\n        return dayjs(calendarDate).startOf(\"month\");\n    }, [selectedStartDate, calendarDate, minDate]);\n\n    const setFocusCell = (value: string) => {\n        const valueDayjs = dayjs(value);\n\n        if (\n            CalendarHelper.isWithinRange(\n                valueDayjs,\n                minDate ? dayjs(minDate) : undefined,\n                maxDate ? dayjs(maxDate) : undefined\n            )\n        ) {\n            if (!valueDayjs.isSame(calendarDate, \"month\")) {\n                setCalendarDate?.(value);\n                pendingFocusRef.current = value;\n                return;\n            }\n            setFocusValue(value);\n        }\n    };\n\n    // =============================================================================\n    // CONST, STATE\n    // =============================================================================\n    const weeksOfTheMonth = useMemo(\n        (): Dayjs[][] => CalendarHelper.generateDays(calendarDate),\n        [calendarDate]\n    );\n    const dateToFocus = useMemo(\n        (): Dayjs => getDateToFocus(),\n        [getDateToFocus]\n    );\n\n    const [focusValue, setFocusValue] = useState<string>(\"\");\n    const [hoverValue, setHoverValue] = useState<string>(\"\");\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleDayClick = (value: Dayjs, isDisabled: boolean) => {\n        if (isDisabled && !allowDisabledSelection) return;\n        const firstDayOfWeek = value.startOf(\"week\");\n\n        onSelect(firstDayOfWeek);\n\n        if (!!value && !dayjs(value).isSame(firstDayOfWeek, \"month\")) {\n            setHoverValue(\"\");\n        }\n    };\n\n    const handleHoverCell = (value: string, isDisabled: boolean) => {\n        if (isDisabled && !allowDisabledSelection) return;\n\n        setHoverValue(value);\n        onHover(value);\n    };\n\n    const handleFocusCell = (value: string) => {\n        // Always hover the cell when it is focused\n        setHoverValue(value);\n        onHover(value);\n    };\n\n    const handleMouseLeaveCell = () => {\n        setHoverValue(\"\");\n        onHover(\"\");\n    };\n\n    const handleOnBlur = (e: React.FocusEvent<HTMLDivElement>) => {\n        if (e.currentTarget.contains(e.relatedTarget as Node)) {\n            return;\n        }\n\n        // Reset focus date when the component loses focus\n        setFocusValue(\"\");\n        setHoverValue(\"\");\n        onHover(\"\");\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderHeader = () => {\n        return weeksOfTheMonth[0].map((day, index) => (\n            <HeaderCell key={`week-day-${index}`} aria-hidden>\n                {dayjs(day).format(\"ddd\")}\n            </HeaderCell>\n        ));\n    };\n\n    const renderDayCells = () => {\n        return weeksOfTheMonth.map((week, weekIndex) => {\n            return (\n                <RowDayCell\n                    key={weekIndex}\n                    onMouseLeave={handleMouseLeaveCell}\n                    role=\"group\"\n                >\n                    {week.map((day, dayIndex) => {\n                        return (\n                            <WeekDayCell\n                                key={`day-${dayIndex}`}\n                                date={day}\n                                calendarDate={calendarDate}\n                                selectedDate={selectedStartDate}\n                                hoverDate={hoverValue}\n                                focusDate={focusValue}\n                                minDate={minDate}\n                                maxDate={maxDate}\n                                disabledDates={disabledDates}\n                                allowDisabledSelection={allowDisabledSelection}\n                                onSelect={handleDayClick}\n                                onHover={handleHoverCell}\n                                onFocus={handleFocusCell}\n                                setFocusCell={setFocusCell}\n                                tabIndex={\n                                    dayjs(day).isSame(dateToFocus, \"day\")\n                                        ? 0\n                                        : -1\n                                }\n                            />\n                        );\n                    })}\n                </RowDayCell>\n            );\n        });\n    };\n\n    return (\n        <Wrapper\n            data-testid=\"calendar-content\"\n            onBlur={handleOnBlur}\n            aria-label=\"Week selection\"\n        >\n            {renderHeader()}\n            {renderDayCells()}\n        </Wrapper>\n    );\n};\n"],"names":["calendarDate","disabledDates","selectedStartDate","onSelect","onHover","minDate","maxDate","allowDisabledSelection","setCalendarDate","pendingFocusRef","useRef","useEffect","current","next","setFocusValue","getDateToFocus","useCallback","dayjs","isSame","startOf","setFocusCell","value","valueDayjs","CalendarHelper","isWithinRange","undefined","weeksOfTheMonth","useMemo","generateDays","dateToFocus","focusValue","useState","hoverValue","setHoverValue","handleDayClick","isDisabled","firstDayOfWeek","handleHoverCell","handleFocusCell","handleMouseLeaveCell","_jsxs","Wrapper","onBlur","e","currentTarget","contains","relatedTarget","children","map","day","index","_jsx","HeaderCell","format","week","weekIndex","RowDayCell","onMouseLeave","role","dayIndex","WeekDayCell","date","selectedDate","hoverDate","focusDate","onFocus","tabIndex"],"mappings":"qVAiBmC,EAC/BA,eACAC,gBACAC,oBACAC,WACAC,UACAC,UACAC,UACAC,yBACAC,sBAKA,MAAMC,EAAkBC,EAAAA,OAAsB,MAE9CC,EAAAA,WAAU,KACN,GAAIF,EAAgBG,QAAS,CACzB,MAAMC,EAAOJ,EAAgBG,QAC7BH,EAAgBG,QAAU,KAC1BE,EAAcD,EAClB,IACD,CAACb,IAKJ,MAAMe,EAAiBC,EAAAA,aAAY,IAM3Bd,GACAe,EAAAA,QAAMf,GAAmBgB,OAAOlB,EAAc,SAEvCiB,EAAAA,QAAMf,GAIbe,EAAAA,UAAQC,OAAOlB,EAAc,SAEtBiB,EAAAA,UAAQE,QAAQ,QAIvBd,GAAWL,EAAakB,OAAOD,EAAAA,QAAMZ,GAAU,SACxCY,EAAAA,QAAMZ,GAIVY,UAAMjB,GAAcmB,QAAQ,UACpC,CAACjB,EAAmBF,EAAcK,IAE/Be,EAAgBC,IAClB,MAAMC,EAAaL,EAAAA,QAAMI,GAEzB,GACIE,EAAAA,eAAeC,cACXF,EACAjB,EAAUY,EAAAA,QAAMZ,QAAWoB,EAC3BnB,EAAUW,EAAAA,QAAMX,QAAWmB,GAEjC,CACE,IAAKH,EAAWJ,OAAOlB,EAAc,SAGjC,OAFAQ,SAAAA,EAAkBa,QAClBZ,EAAgBG,QAAUS,GAG9BP,EAAcO,EAClB,GAMEK,EAAkBC,EAAAA,SACpB,IAAiBJ,EAAAA,eAAeK,aAAa5B,IAC7C,CAACA,IAEC6B,EAAcF,EAAAA,SAChB,IAAaZ,KACb,CAACA,KAGEe,EAAYhB,GAAiBiB,EAAAA,SAAiB,KAC9CC,EAAYC,GAAiBF,EAAAA,SAAiB,IAK/CG,EAAiB,CAACb,EAAcc,KAClC,GAAIA,IAAe5B,EAAwB,OAC3C,MAAM6B,EAAiBf,EAAMF,QAAQ,QAErChB,EAASiC,GAEHf,IAAUJ,EAAAA,QAAMI,GAAOH,OAAOkB,EAAgB,UAChDH,EAAc,GAClB,EAGEI,EAAkB,CAAChB,EAAec,KAChCA,IAAe5B,IAEnB0B,EAAcZ,GACdjB,EAAQiB,GAAM,EAGZiB,EAAmBjB,IAErBY,EAAcZ,GACdjB,EAAQiB,EAAM,EAGZkB,EAAuB,KACzBN,EAAc,IACd7B,EAAQ,GAAG,EA+Df,OACIoC,EAAAA,KAACC,EAAAA,uBACe,mBACZC,OA/DcC,IACdA,EAAEC,cAAcC,SAASF,EAAEG,iBAK/BhC,EAAc,IACdmB,EAAc,IACd7B,EAAQ,IAAG,eAwDI,iBAAgB2C,SAAA,CAjDxBrB,EAAgB,GAAGsB,KAAI,CAACC,EAAKC,IAChCC,EAAAA,IAACC,aAAU,CAAA,eAAA,EAAAL,SACN9B,UAAMgC,GAAKI,OAAO,QADN,YAAYH,OAO1BxB,EAAgBsB,KAAI,CAACM,EAAMC,IAE1BJ,EAAAA,IAACK,EAAAA,WAAU,CAEPC,aAAclB,EACdmB,KAAK,QAAOX,SAEXO,EAAKN,KAAI,CAACC,EAAKU,IAERR,EAAAA,IAACS,EAAAA,YAAW,CAERC,KAAMZ,EACNjD,aAAcA,EACd8D,aAAc5D,EACd6D,UAAW/B,EACXgC,UAAWlC,EACXzB,QAASA,EACTC,QAASA,EACTL,cAAeA,EACfM,uBAAwBA,EACxBJ,SAAU+B,EACV9B,QAASiC,EACT4B,QAAS3B,EACTlB,aAAcA,EACd8C,SACIjD,EAAAA,QAAMgC,GAAK/B,OAAOW,EAAa,OACzB,GACA,GAjBL,OAAO8B,QAPnBJ,OA0CP"}
+{"version":3,"file":"week-calendar-day-view.js","sources":["../../../../../src/shared/internal-calendar/week/week-calendar-day-view.tsx"],"sourcesContent":["import type { Dayjs } from \"dayjs\";\nimport dayjs from \"dayjs\";\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\n\nimport { CalendarHelper } from \"../../../util/calendar-helper\";\nimport * as styles from \"../standard/standard-calendar-day-view.styles\";\nimport type { CommonCalendarProps } from \"../types\";\nimport { WeekDayCell } from \"./week-day-cell\";\n\ninterface WeekCalendarDayViewProps extends CommonCalendarProps {\n    selectedStartDate: string | undefined;\n    calendarDate: Dayjs;\n    onSelect: (value: Dayjs) => void;\n    onHover: (value: string) => void;\n    setCalendarDate?: ((date: string | undefined) => void) | undefined;\n}\n\nexport const WeekCalendarDayView = ({\n    calendarDate,\n    disabledDates,\n    selectedStartDate,\n    onSelect,\n    onHover,\n    minDate,\n    maxDate,\n    allowDisabledSelection,\n    setCalendarDate,\n}: WeekCalendarDayViewProps) => {\n    // =============================================================================\n    // REFS, EFFECTS\n    // =============================================================================\n    const pendingFocusRef = useRef<string | null>(null);\n\n    useEffect(() => {\n        if (pendingFocusRef.current) {\n            const next = pendingFocusRef.current;\n            pendingFocusRef.current = null;\n            setFocusValue(next);\n        }\n    }, [calendarDate]);\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const getDateToFocus = useCallback(() => {\n        // As specified in the Grid Pattern, only one element in the calendar grid is in the Tab sequence.\n        // This function determines which date should be focused based on the state of the calendar.\n\n        // Selected start date is in the current month\n        if (\n            selectedStartDate &&\n            dayjs(selectedStartDate).isSame(calendarDate, \"month\")\n        ) {\n            return dayjs(selectedStartDate);\n        }\n\n        // Today is in the current month\n        if (dayjs().isSame(calendarDate, \"month\")) {\n            // Choose first day of the week of today\n            return dayjs().startOf(\"week\");\n        }\n\n        // Choose min date if it is in the current month\n        if (minDate && calendarDate.isSame(dayjs(minDate), \"month\")) {\n            return dayjs(minDate);\n        }\n\n        // Otherwise, return the first day of the month\n        return dayjs(calendarDate).startOf(\"month\");\n    }, [selectedStartDate, calendarDate, minDate]);\n\n    const setFocusCell = (value: string) => {\n        const valueDayjs = dayjs(value);\n\n        if (\n            CalendarHelper.isWithinRange(\n                valueDayjs,\n                minDate ? dayjs(minDate) : undefined,\n                maxDate ? dayjs(maxDate) : undefined\n            )\n        ) {\n            if (!valueDayjs.isSame(calendarDate, \"month\")) {\n                setCalendarDate?.(value);\n                pendingFocusRef.current = value;\n                return;\n            }\n            setFocusValue(value);\n        }\n    };\n\n    // =============================================================================\n    // CONST, STATE\n    // =============================================================================\n    const weeksOfTheMonth = useMemo(\n        (): Dayjs[][] => CalendarHelper.generateDays(calendarDate),\n        [calendarDate]\n    );\n    const dateToFocus = useMemo(\n        (): Dayjs => getDateToFocus(),\n        [getDateToFocus]\n    );\n\n    const [focusValue, setFocusValue] = useState<string>(\"\");\n    const [hoverValue, setHoverValue] = useState<string>(\"\");\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleDayClick = (value: Dayjs, isDisabled: boolean) => {\n        if (isDisabled && !allowDisabledSelection) return;\n        const firstDayOfWeek = value.startOf(\"week\");\n\n        onSelect(firstDayOfWeek);\n\n        if (!!value && !dayjs(value).isSame(firstDayOfWeek, \"month\")) {\n            setHoverValue(\"\");\n        }\n    };\n\n    const handleHoverCell = (value: string, isDisabled: boolean) => {\n        if (isDisabled && !allowDisabledSelection) return;\n\n        setHoverValue(value);\n        onHover(value);\n    };\n\n    const handleFocusCell = (value: string) => {\n        // Always hover the cell when it is focused\n        setHoverValue(value);\n        onHover(value);\n    };\n\n    const handleMouseLeaveCell = () => {\n        setHoverValue(\"\");\n        onHover(\"\");\n    };\n\n    const handleOnBlur = (e: React.FocusEvent<HTMLDivElement>) => {\n        if (e.currentTarget.contains(e.relatedTarget as Node)) {\n            return;\n        }\n\n        // Reset focus date when the component loses focus\n        setFocusValue(\"\");\n        setHoverValue(\"\");\n        onHover(\"\");\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderHeader = () => {\n        return weeksOfTheMonth[0].map((day, index) => (\n            <div\n                key={`week-day-${index}`}\n                className={styles.headerCell}\n                aria-hidden\n            >\n                {dayjs(day).format(\"ddd\")}\n            </div>\n        ));\n    };\n\n    const renderDayCells = () => {\n        return weeksOfTheMonth.map((week, weekIndex) => {\n            return (\n                <div\n                    key={weekIndex}\n                    onMouseLeave={handleMouseLeaveCell}\n                    role=\"group\"\n                    className={styles.rowDayCell}\n                >\n                    {week.map((day, dayIndex) => {\n                        return (\n                            <WeekDayCell\n                                key={`day-${dayIndex}`}\n                                date={day}\n                                calendarDate={calendarDate}\n                                selectedDate={selectedStartDate}\n                                hoverDate={hoverValue}\n                                focusDate={focusValue}\n                                minDate={minDate}\n                                maxDate={maxDate}\n                                disabledDates={disabledDates}\n                                allowDisabledSelection={allowDisabledSelection}\n                                onSelect={handleDayClick}\n                                onHover={handleHoverCell}\n                                onFocus={handleFocusCell}\n                                setFocusCell={setFocusCell}\n                                tabIndex={\n                                    dayjs(day).isSame(dateToFocus, \"day\")\n                                        ? 0\n                                        : -1\n                                }\n                            />\n                        );\n                    })}\n                </div>\n            );\n        });\n    };\n\n    return (\n        <div\n            data-testid=\"calendar-content\"\n            onBlur={handleOnBlur}\n            aria-label=\"Week selection\"\n            className={styles.wrapper}\n        >\n            {renderHeader()}\n            {renderDayCells()}\n        </div>\n    );\n};\n"],"names":["calendarDate","disabledDates","selectedStartDate","onSelect","onHover","minDate","maxDate","allowDisabledSelection","setCalendarDate","pendingFocusRef","useRef","useEffect","current","next","setFocusValue","getDateToFocus","useCallback","dayjs","isSame","startOf","setFocusCell","value","valueDayjs","CalendarHelper","isWithinRange","undefined","weeksOfTheMonth","useMemo","generateDays","dateToFocus","focusValue","useState","hoverValue","setHoverValue","handleDayClick","isDisabled","firstDayOfWeek","handleHoverCell","handleFocusCell","handleMouseLeaveCell","_jsxs","onBlur","e","currentTarget","contains","relatedTarget","className","styles.wrapper","children","map","day","index","_jsx","styles.headerCell","format","week","weekIndex","onMouseLeave","role","styles.rowDayCell","dayIndex","WeekDayCell","date","selectedDate","hoverDate","focusDate","onFocus","tabIndex"],"mappings":"6RAiBmC,EAC/BA,eACAC,gBACAC,oBACAC,WACAC,UACAC,UACAC,UACAC,yBACAC,sBAKA,MAAMC,EAAkBC,EAAAA,OAAsB,MAE9CC,EAAAA,WAAU,KACN,GAAIF,EAAgBG,QAAS,CACzB,MAAMC,EAAOJ,EAAgBG,QAC7BH,EAAgBG,QAAU,KAC1BE,EAAcD,EAClB,IACD,CAACb,IAKJ,MAAMe,EAAiBC,EAAAA,aAAY,IAM3Bd,GACAe,EAAAA,QAAMf,GAAmBgB,OAAOlB,EAAc,SAEvCiB,EAAAA,QAAMf,GAIbe,EAAAA,UAAQC,OAAOlB,EAAc,SAEtBiB,EAAAA,UAAQE,QAAQ,QAIvBd,GAAWL,EAAakB,OAAOD,EAAAA,QAAMZ,GAAU,SACxCY,EAAAA,QAAMZ,GAIVY,UAAMjB,GAAcmB,QAAQ,UACpC,CAACjB,EAAmBF,EAAcK,IAE/Be,EAAgBC,IAClB,MAAMC,EAAaL,EAAAA,QAAMI,GAEzB,GACIE,EAAAA,eAAeC,cACXF,EACAjB,EAAUY,EAAAA,QAAMZ,QAAWoB,EAC3BnB,EAAUW,EAAAA,QAAMX,QAAWmB,GAEjC,CACE,IAAKH,EAAWJ,OAAOlB,EAAc,SAGjC,OAFAQ,SAAAA,EAAkBa,QAClBZ,EAAgBG,QAAUS,GAG9BP,EAAcO,EAClB,GAMEK,EAAkBC,EAAAA,SACpB,IAAiBJ,EAAAA,eAAeK,aAAa5B,IAC7C,CAACA,IAEC6B,EAAcF,EAAAA,SAChB,IAAaZ,KACb,CAACA,KAGEe,EAAYhB,GAAiBiB,EAAAA,SAAiB,KAC9CC,EAAYC,GAAiBF,EAAAA,SAAiB,IAK/CG,EAAiB,CAACb,EAAcc,KAClC,GAAIA,IAAe5B,EAAwB,OAC3C,MAAM6B,EAAiBf,EAAMF,QAAQ,QAErChB,EAASiC,GAEHf,IAAUJ,EAAAA,QAAMI,GAAOH,OAAOkB,EAAgB,UAChDH,EAAc,GAClB,EAGEI,EAAkB,CAAChB,EAAec,KAChCA,IAAe5B,IAEnB0B,EAAcZ,GACdjB,EAAQiB,GAAM,EAGZiB,EAAmBjB,IAErBY,EAAcZ,GACdjB,EAAQiB,EAAM,EAGZkB,EAAuB,KACzBN,EAAc,IACd7B,EAAQ,GAAG,EAoEf,OACIoC,EAAAA,0BACgB,mBACZC,OApEcC,IACdA,EAAEC,cAAcC,SAASF,EAAEG,iBAK/B/B,EAAc,IACdmB,EAAc,IACd7B,EAAQ,IAAG,EA4Da,aACT,iBACX0C,UAAWC,EAAAA,QAAcC,SAAA,CAvDtBtB,EAAgB,GAAGuB,KAAI,CAACC,EAAKC,IAChCC,MAAA,MAAA,CAEIN,UAAWO,EAAAA,qCAGVpC,EAAAA,QAAMiC,GAAKI,OAAO,QAJd,YAAYH,OAUlBzB,EAAgBuB,KAAI,CAACM,EAAMC,IAE1BJ,EAAAA,IAAA,MAAA,CAEIK,aAAclB,EACdmB,KAAK,QACLZ,UAAWa,EAAAA,WAAiBX,SAE3BO,EAAKN,KAAI,CAACC,EAAKU,IAERR,EAAAA,IAACS,EAAAA,YAAW,CAERC,KAAMZ,EACNlD,aAAcA,EACd+D,aAAc7D,EACd8D,UAAWhC,EACXiC,UAAWnC,EACXzB,QAASA,EACTC,QAASA,EACTL,cAAeA,EACfM,uBAAwBA,EACxBJ,SAAU+B,EACV9B,QAASiC,EACT6B,QAAS5B,EACTlB,aAAcA,EACd+C,SACIlD,EAAAA,QAAMiC,GAAKhC,OAAOW,EAAa,OACzB,GACA,GAjBL,OAAO+B,QARnBJ,OA4CX"}

package/cjs/shared/internal-calendar/week/week-day-cell.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),t=require("../../../external/dayjs/dayjs.min.js"),a=require("../../../util/calendar-helper.js"),r=require("../../../util/date-helper.js");require("react"),require("../../../util/string-helper.js");var l=require("../day-cell/day-cell.js");exports.WeekDayCell=({date:n,calendarDate:d,selectedDate:s,hoverDate:o,focusDate:i,minDate:c,maxDate:u,disabledDates:D,allowDisabledSelection:y,onSelect:m,onHover:b,onFocus:f,setFocusCell:p,tabIndex:v})=>{const h=a.CalendarHelper.isDisabledDay(n,D,c,u),M=!h||y,{start:j,end:S}=a.CalendarHelper.getWeekStartEnd(r.DateHelper.toDayjs(s)),{start:Y,end:g}=a.CalendarHelper.getWeekStartEnd(r.DateHelper.toDayjs(o)),{start:w,end:H}=a.CalendarHelper.getWeekStartEnd(n),k=n.isSame(w,"day"),q=s&&n.isBetween(j,S,"day","[]"),x=o&&n.isBetween(Y,g,"day","[]"),C=q&&n.isSame(j)||x&&n.isSame(Y),E=q&&n.isSame(S)||x&&n.isSame(g),F=`From ${t.default(w).format("D MMMM")} to ${t.default(H).format("D MMMM")}, ${h?"Unavailable":"Available"}`,W=()=>{m(n,!M)},A={date:n,calendarDate:d,disabled:h,interactive:M,currentDateIndicator:!0,onSelect:W,onHover:()=>{b(n.format("YYYY-MM-DD"),!M)},onFocus:()=>{f(n.format("YYYY-MM-DD"))},onKeyDown:e=>{const t=e.key;if("Enter"===t||" "===t)return e.preventDefault(),void(M&&W());(e=>{let t;const a={ArrowUp:()=>n.subtract(7,"day"),ArrowDown:()=>n.add(7,"day"),Home:()=>n.startOf("week"),End:()=>n.endOf("week"),PageUp:()=>e.shiftKey?n.subtract(1,"year"):n.subtract(1,"month"),PageDown:()=>e.shiftKey?n.add(1,"year"):n.add(1,"month")}[e.key];a&&(e.preventDefault(),t=a(),p(t.format("YYYY-MM-DD")))})(e)},focusDate:t.default(i),tabIndex:v,label:F,ariaHidden:!k||void 0,role:k?"button":"none"};return e.jsx(l.DayCell,Object.assign({},A,(()=>{const e={};return d.month()!==n.month()?e.labelType="unavailable":t.default().isSame(n,"day")&&!h&&(e.labelType="current"),e})(),(()=>{const e={};let t,a;return q&&x?(t="selected-hover-outline",a="selected-hover"):q?(t="selected-outline",a="selected"):x&&(t="hover",a="hover"),t&&(e.labelType=a,C?e.circleLeft=t:e.bgLeft=t,E?e.circleRight=t:e.bgRight=t),e})()))};
+"use strict";var e=require("react/jsx-runtime"),a=require("../../../external/dayjs/dayjs.min.js"),t=require("../../../util/calendar-helper.js"),r=require("../../../util/date-helper.js");require("react"),require("../../../util/simple-id-generator.js"),require("../../../util/string-helper.js"),require("@react-aria/live-announcer");var l=require("../day-cell/day-cell.js");exports.WeekDayCell=({date:n,calendarDate:s,selectedDate:d,hoverDate:i,focusDate:o,minDate:c,maxDate:u,disabledDates:D,allowDisabledSelection:y,onSelect:m,onHover:b,onFocus:f,setFocusCell:p,tabIndex:v})=>{const h=t.CalendarHelper.isDisabledDay(n,D,c,u),M=!h||y,{start:j,end:g}=t.CalendarHelper.getWeekStartEnd(r.DateHelper.toDayjs(d)),{start:S,end:Y}=t.CalendarHelper.getWeekStartEnd(r.DateHelper.toDayjs(i)),{start:w,end:H}=t.CalendarHelper.getWeekStartEnd(n),q=n.isSame(w,"day"),k=d&&n.isBetween(j,g,"day","[]"),x=i&&n.isBetween(S,Y,"day","[]"),C=k&&n.isSame(j)||x&&n.isSame(S),E=k&&n.isSame(g)||x&&n.isSame(Y),F=`From ${a.default(w).format("D MMMM")} to ${a.default(H).format("D MMMM")}, ${h?"Unavailable":"Available"}`,W=()=>{m(n,!M)},A={date:n,calendarDate:s,disabled:h,interactive:M,currentDateIndicator:!0,onSelect:W,onHover:()=>{b(n.format("YYYY-MM-DD"),!M)},onFocus:()=>{f(n.format("YYYY-MM-DD"))},onKeyDown:e=>{const a=e.key;if("Enter"===a||" "===a)return e.preventDefault(),void(M&&W());(e=>{let a;const t={ArrowUp:()=>n.subtract(7,"day"),ArrowDown:()=>n.add(7,"day"),Home:()=>n.startOf("week"),End:()=>n.endOf("week"),PageUp:()=>e.shiftKey?n.subtract(1,"year"):n.subtract(1,"month"),PageDown:()=>e.shiftKey?n.add(1,"year"):n.add(1,"month")}[e.key];t&&(e.preventDefault(),a=t(),p(a.format("YYYY-MM-DD")))})(e)},focusDate:a.default(o),tabIndex:v,label:F,ariaHidden:!q||void 0,role:q?"button":"none"};return e.jsx(l.DayCell,Object.assign({},A,(()=>{const e={};return s.month()!==n.month()?e.labelType="unavailable":a.default().isSame(n,"day")&&!h&&(e.labelType="current"),e})(),(()=>{const e={};let a,t;return k&&x?(a="selected-hover-outline",t="selected-hover"):k?(a="selected-outline",t="selected"):x&&(a="hover",t="hover"),a&&(e.labelType=t,C?e.circleLeft=a:e.bgLeft=a,E?e.circleRight=a:e.bgRight=a),e})()))};
 //# sourceMappingURL=week-day-cell.js.map

package/cjs/shared/internal-calendar/week/week-day-cell.js.map

@@ -1 +1 @@
-{"version":3,"file":"week-day-cell.js","sources":["../../../../../src/shared/internal-calendar/week/week-day-cell.tsx"],"sourcesContent":["import type { Dayjs } from \"dayjs\";\nimport dayjs from \"dayjs\";\n\nimport { CalendarHelper, DateHelper } from \"../../../util\";\nimport type {\n    CellStyleProps,\n    CellType,\n    DayCellProps,\n    LabelType,\n} from \"../day-cell\";\nimport { DayCell } from \"../day-cell\";\n\ninterface Props {\n    date: Dayjs;\n    calendarDate: Dayjs;\n    selectedDate: string | undefined;\n    hoverDate: string;\n    focusDate: string;\n    minDate?: string | undefined;\n    maxDate?: string | undefined;\n    disabledDates?: string[] | undefined;\n    allowDisabledSelection?: boolean | undefined;\n    onSelect: (value: Dayjs, disabled: boolean) => void;\n    onHover: (value: string, disabled: boolean) => void;\n    onFocus: (value: string) => void;\n    setFocusCell: (value: string) => void;\n    tabIndex: number;\n}\n\nexport const WeekDayCell = ({\n    date,\n    calendarDate,\n    selectedDate,\n    hoverDate,\n    focusDate,\n    minDate,\n    maxDate,\n    disabledDates,\n    allowDisabledSelection,\n    onSelect,\n    onHover,\n    onFocus,\n    setFocusCell,\n    tabIndex,\n}: Props) => {\n    // =========================================================================\n    // CONSTS\n    // =========================================================================\n    const disabled = CalendarHelper.isDisabledDay(\n        date,\n        disabledDates,\n        minDate,\n        maxDate\n    );\n    const interactive = !disabled || allowDisabledSelection;\n    const { start: selectedStart, end: selectedEnd } =\n        CalendarHelper.getWeekStartEnd(DateHelper.toDayjs(selectedDate));\n    const { start: hoverStart, end: hoverEnd } = CalendarHelper.getWeekStartEnd(\n        DateHelper.toDayjs(hoverDate)\n    );\n\n    const { start: weekStart, end: weekEnd } =\n        CalendarHelper.getWeekStartEnd(date);\n    const isFirstDayOfWeek = date.isSame(weekStart, \"day\");\n\n    const isSelected =\n        selectedDate && date.isBetween(selectedStart, selectedEnd, \"day\", \"[]\");\n    const isHover =\n        hoverDate && date.isBetween(hoverStart, hoverEnd, \"day\", \"[]\");\n    const isStart =\n        (isSelected && date.isSame(selectedStart)) ||\n        (isHover && date.isSame(hoverStart));\n    const isEnd =\n        (isSelected && date.isSame(selectedEnd)) ||\n        (isHover && date.isSame(hoverEnd));\n\n    // For accessible label\n    const label = `From ${dayjs(weekStart).format(\"D MMMM\")} to ${dayjs(\n        weekEnd\n    ).format(\"D MMMM\")}, ${disabled ? \"Unavailable\" : \"Available\"}`;\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleSelect = () => {\n        onSelect(date, !interactive);\n    };\n\n    const handleHover = () => {\n        onHover(date.format(\"YYYY-MM-DD\"), !interactive);\n    };\n\n    const handleFocus = () => {\n        onFocus(date.format(\"YYYY-MM-DD\"));\n    };\n\n    const handleKeyNavigation = (event: React.KeyboardEvent) => {\n        let newFocusSelection: Dayjs | undefined;\n\n        // No left and right arrow keys for week view\n        const keyActions: Record<string, () => dayjs.Dayjs> = {\n            ArrowUp: () => date.subtract(7, \"day\"),\n            ArrowDown: () => date.add(7, \"day\"),\n            Home: () => date.startOf(\"week\"),\n            End: () => date.endOf(\"week\"),\n            PageUp: () => {\n                return event.shiftKey\n                    ? date.subtract(1, \"year\")\n                    : date.subtract(1, \"month\");\n            },\n            PageDown: () => {\n                return event.shiftKey\n                    ? date.add(1, \"year\")\n                    : date.add(1, \"month\");\n            },\n        };\n\n        const action = keyActions[event.key];\n        if (action) {\n            event.preventDefault();\n            newFocusSelection = action();\n            setFocusCell(newFocusSelection.format(\"YYYY-MM-DD\"));\n        }\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent) => {\n        const keyboardEvent = event as React.KeyboardEvent<HTMLInputElement>;\n        const selectedKey = keyboardEvent.key;\n\n        if (selectedKey === \"Enter\" || selectedKey === \" \") {\n            event.preventDefault();\n            if (interactive) {\n                handleSelect();\n            }\n            return;\n        }\n\n        handleKeyNavigation(event);\n    };\n\n    // =========================================================================\n    // HELPERS\n    // =========================================================================\n    const getRangeStyle = (): CellStyleProps => {\n        const props: CellStyleProps = {};\n\n        let type: CellType | undefined = undefined;\n        let labelType: LabelType | undefined = undefined;\n        if (isSelected && isHover) {\n            type = \"selected-hover-outline\";\n            labelType = \"selected-hover\";\n        } else if (isSelected) {\n            type = \"selected-outline\";\n            labelType = \"selected\";\n        } else if (isHover) {\n            type = \"hover\";\n            labelType = \"hover\";\n        }\n\n        if (type) {\n            props.labelType = labelType;\n\n            if (isStart) {\n                props.circleLeft = type;\n            } else {\n                props.bgLeft = type;\n            }\n\n            if (isEnd) {\n                props.circleRight = type;\n            } else {\n                props.bgRight = type;\n            }\n        }\n\n        return props;\n    };\n\n    const getCellStyle = () => {\n        const props: CellStyleProps = {};\n\n        if (calendarDate.month() !== date.month()) {\n            props.labelType = \"unavailable\";\n        } else if (dayjs().isSame(date, \"day\") && !disabled) {\n            props.labelType = \"current\";\n        }\n\n        return props;\n    };\n\n    // =============================================================================\n    // RENDER FUNCTION\n    // =============================================================================\n\n    const commonProps: DayCellProps = {\n        date,\n        calendarDate,\n        disabled,\n        interactive,\n        currentDateIndicator: true,\n        onSelect: handleSelect,\n        onHover: handleHover,\n        onFocus: handleFocus,\n        onKeyDown: handleKeyDown,\n        focusDate: dayjs(focusDate),\n        tabIndex,\n        label,\n        // Aria hidden for all but the first day of the week\n        // To ensure the same labels dont show in accessibility tree\n        ariaHidden: isFirstDayOfWeek ? undefined : true,\n        role: isFirstDayOfWeek ? \"button\" : \"none\",\n    };\n\n    return (\n        <DayCell {...commonProps} {...getCellStyle()} {...getRangeStyle()} />\n    );\n};\n"],"names":["date","calendarDate","selectedDate","hoverDate","focusDate","minDate","maxDate","disabledDates","allowDisabledSelection","onSelect","onHover","onFocus","setFocusCell","tabIndex","disabled","CalendarHelper","isDisabledDay","interactive","start","selectedStart","end","selectedEnd","getWeekStartEnd","DateHelper","toDayjs","hoverStart","hoverEnd","weekStart","weekEnd","isFirstDayOfWeek","isSame","isSelected","isBetween","isHover","isStart","isEnd","label","dayjs","format","handleSelect","commonProps","currentDateIndicator","onKeyDown","event","selectedKey","key","preventDefault","newFocusSelection","action","ArrowUp","subtract","ArrowDown","add","Home","startOf","End","endOf","PageUp","shiftKey","PageDown","handleKeyNavigation","ariaHidden","undefined","role","_jsx","DayCell","Object","assign","props","month","labelType","getCellStyle","type","circleLeft","bgLeft","circleRight","bgRight","getRangeStyle"],"mappings":"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"}
+{"version":3,"file":"week-day-cell.js","sources":["../../../../../src/shared/internal-calendar/week/week-day-cell.tsx"],"sourcesContent":["import type { Dayjs } from \"dayjs\";\nimport dayjs from \"dayjs\";\n\nimport { CalendarHelper, DateHelper } from \"../../../util\";\nimport type {\n    CellStyleProps,\n    CellType,\n    DayCellProps,\n    LabelType,\n} from \"../day-cell\";\nimport { DayCell } from \"../day-cell\";\n\ninterface Props {\n    date: Dayjs;\n    calendarDate: Dayjs;\n    selectedDate: string | undefined;\n    hoverDate: string;\n    focusDate: string;\n    minDate?: string | undefined;\n    maxDate?: string | undefined;\n    disabledDates?: string[] | undefined;\n    allowDisabledSelection?: boolean | undefined;\n    onSelect: (value: Dayjs, disabled: boolean) => void;\n    onHover: (value: string, disabled: boolean) => void;\n    onFocus: (value: string) => void;\n    setFocusCell: (value: string) => void;\n    tabIndex: number;\n}\n\nexport const WeekDayCell = ({\n    date,\n    calendarDate,\n    selectedDate,\n    hoverDate,\n    focusDate,\n    minDate,\n    maxDate,\n    disabledDates,\n    allowDisabledSelection,\n    onSelect,\n    onHover,\n    onFocus,\n    setFocusCell,\n    tabIndex,\n}: Props) => {\n    // =========================================================================\n    // CONSTS\n    // =========================================================================\n    const disabled = CalendarHelper.isDisabledDay(\n        date,\n        disabledDates,\n        minDate,\n        maxDate\n    );\n    const interactive = !disabled || allowDisabledSelection;\n    const { start: selectedStart, end: selectedEnd } =\n        CalendarHelper.getWeekStartEnd(DateHelper.toDayjs(selectedDate));\n    const { start: hoverStart, end: hoverEnd } = CalendarHelper.getWeekStartEnd(\n        DateHelper.toDayjs(hoverDate)\n    );\n\n    const { start: weekStart, end: weekEnd } =\n        CalendarHelper.getWeekStartEnd(date);\n    const isFirstDayOfWeek = date.isSame(weekStart, \"day\");\n\n    const isSelected =\n        selectedDate && date.isBetween(selectedStart, selectedEnd, \"day\", \"[]\");\n    const isHover =\n        hoverDate && date.isBetween(hoverStart, hoverEnd, \"day\", \"[]\");\n    const isStart =\n        (isSelected && date.isSame(selectedStart)) ||\n        (isHover && date.isSame(hoverStart));\n    const isEnd =\n        (isSelected && date.isSame(selectedEnd)) ||\n        (isHover && date.isSame(hoverEnd));\n\n    // For accessible label\n    const label = `From ${dayjs(weekStart).format(\"D MMMM\")} to ${dayjs(\n        weekEnd\n    ).format(\"D MMMM\")}, ${disabled ? \"Unavailable\" : \"Available\"}`;\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleSelect = () => {\n        onSelect(date, !interactive);\n    };\n\n    const handleHover = () => {\n        onHover(date.format(\"YYYY-MM-DD\"), !interactive);\n    };\n\n    const handleFocus = () => {\n        onFocus(date.format(\"YYYY-MM-DD\"));\n    };\n\n    const handleKeyNavigation = (event: React.KeyboardEvent) => {\n        let newFocusSelection: Dayjs | undefined;\n\n        // No left and right arrow keys for week view\n        const keyActions: Record<string, () => dayjs.Dayjs> = {\n            ArrowUp: () => date.subtract(7, \"day\"),\n            ArrowDown: () => date.add(7, \"day\"),\n            Home: () => date.startOf(\"week\"),\n            End: () => date.endOf(\"week\"),\n            PageUp: () => {\n                return event.shiftKey\n                    ? date.subtract(1, \"year\")\n                    : date.subtract(1, \"month\");\n            },\n            PageDown: () => {\n                return event.shiftKey\n                    ? date.add(1, \"year\")\n                    : date.add(1, \"month\");\n            },\n        };\n\n        const action = keyActions[event.key];\n        if (action) {\n            event.preventDefault();\n            newFocusSelection = action();\n            setFocusCell(newFocusSelection.format(\"YYYY-MM-DD\"));\n        }\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent) => {\n        const keyboardEvent = event as React.KeyboardEvent<HTMLInputElement>;\n        const selectedKey = keyboardEvent.key;\n\n        if (selectedKey === \"Enter\" || selectedKey === \" \") {\n            event.preventDefault();\n            if (interactive) {\n                handleSelect();\n            }\n            return;\n        }\n\n        handleKeyNavigation(event);\n    };\n\n    // =========================================================================\n    // HELPERS\n    // =========================================================================\n    const getRangeStyle = (): CellStyleProps => {\n        const props: CellStyleProps = {};\n\n        let type: CellType | undefined = undefined;\n        let labelType: LabelType | undefined = undefined;\n        if (isSelected && isHover) {\n            type = \"selected-hover-outline\";\n            labelType = \"selected-hover\";\n        } else if (isSelected) {\n            type = \"selected-outline\";\n            labelType = \"selected\";\n        } else if (isHover) {\n            type = \"hover\";\n            labelType = \"hover\";\n        }\n\n        if (type) {\n            props.labelType = labelType;\n\n            if (isStart) {\n                props.circleLeft = type;\n            } else {\n                props.bgLeft = type;\n            }\n\n            if (isEnd) {\n                props.circleRight = type;\n            } else {\n                props.bgRight = type;\n            }\n        }\n\n        return props;\n    };\n\n    const getCellStyle = () => {\n        const props: CellStyleProps = {};\n\n        if (calendarDate.month() !== date.month()) {\n            props.labelType = \"unavailable\";\n        } else if (dayjs().isSame(date, \"day\") && !disabled) {\n            props.labelType = \"current\";\n        }\n\n        return props;\n    };\n\n    // =============================================================================\n    // RENDER FUNCTION\n    // =============================================================================\n\n    const commonProps: DayCellProps = {\n        date,\n        calendarDate,\n        disabled,\n        interactive,\n        currentDateIndicator: true,\n        onSelect: handleSelect,\n        onHover: handleHover,\n        onFocus: handleFocus,\n        onKeyDown: handleKeyDown,\n        focusDate: dayjs(focusDate),\n        tabIndex,\n        label,\n        // Aria hidden for all but the first day of the week\n        // To ensure the same labels dont show in accessibility tree\n        ariaHidden: isFirstDayOfWeek ? undefined : true,\n        role: isFirstDayOfWeek ? \"button\" : \"none\",\n    };\n\n    return (\n        <DayCell {...commonProps} {...getCellStyle()} {...getRangeStyle()} />\n    );\n};\n"],"names":["date","calendarDate","selectedDate","hoverDate","focusDate","minDate","maxDate","disabledDates","allowDisabledSelection","onSelect","onHover","onFocus","setFocusCell","tabIndex","disabled","CalendarHelper","isDisabledDay","interactive","start","selectedStart","end","selectedEnd","getWeekStartEnd","DateHelper","toDayjs","hoverStart","hoverEnd","weekStart","weekEnd","isFirstDayOfWeek","isSame","isSelected","isBetween","isHover","isStart","isEnd","label","dayjs","format","handleSelect","commonProps","currentDateIndicator","onKeyDown","event","selectedKey","key","preventDefault","newFocusSelection","action","ArrowUp","subtract","ArrowDown","add","Home","startOf","End","endOf","PageUp","shiftKey","PageDown","handleKeyNavigation","ariaHidden","undefined","role","_jsx","DayCell","Object","assign","props","month","labelType","getCellStyle","type","circleLeft","bgLeft","circleRight","bgRight","getRangeStyle"],"mappings":"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"}

package/cjs/shared/progress-bar/progress-bar.js

@@ -1,33 +1,2 @@
-"use strict";var t=require("react/jsx-runtime"),e=require("styled-components"),r=require("../../v3_theme/index.js");function o(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}const s=o(e).default.div`
-    position: relative;
-    width: 100%;
-    height: 8px;
-    background: transparent;
-
-    progress {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        opacity: 0;
-    }
-
-    ${t=>{const{$color:o}=t;let s;return s=o&&"string"==typeof o?o:o?o(t):r.V3_Colour["icon-primary-subtle"](t),e.css`
-            border: ${r.V3_Border["width-010"]} ${r.V3_Border.solid}
-                ${s};
-            border-radius: ${r.V3_Radius.sm};
-
-            &:after {
-                content: "";
-                position: absolute;
-                top: 0;
-                bottom: 0;
-                left: 0;
-                border-radius: inherit;
-                background: ${s};
-                width: ${100*t.$innerWidth}%;
-            }
-        `}}
-`;exports.ProgressBar=({className:e,progress:r,color:o,"data-testid":i})=>t.jsx(s,{className:e,$innerWidth:r,$color:o,"data-testid":i,children:t.jsx("progress",{value:100*r,max:100})});
+"use strict";var e=require("react/jsx-runtime"),r=require("clsx"),s=require("react");require("../../theme/theme-provider/index.js"),require("../../theme/theme-provider/context.js"),require("../../theme/tokens/border.js");var t=require("../../theme/tokens/colour.js");require("../../theme/tokens/font.js"),require("../../theme/tokens/media-query.js");var u=require("../../theme/utils/use-apply-styles.js");require("../../theme/utils/use-media-query.js");var i=require("./progress-bar.styles.js");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=a(r);exports.ProgressBar=({className:r,progress:a,colour:l,"data-testid":n})=>{const m=null!=l?l:t.Colour["icon-primary-subtle"],d=s.useRef(null);return u.useApplyStyle(d,{[i.tokens.barColour]:m,[i.tokens.barWidth]:100*a+"%"}),e.jsx("div",{className:o.default(i.bar,r),"data-testid":n,ref:d,children:e.jsx("progress",{value:100*a,max:100})})};
 //# sourceMappingURL=progress-bar.js.map

package/cjs/shared/progress-bar/progress-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"progress-bar.js","sources":["../../../../src/shared/progress-bar/progress-bar.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { V3_Border, V3_Colour, V3_Radius } from \"../../v3_theme\";\nimport type { getPrimitiveColour } from \"../../v3_theme/colour-primitive/theme-helper\";\nimport type { getSemanticColour } from \"../../v3_theme/colour-semantic/theme-helper\";\n\ntype ThemeColorFunctions = ReturnType<\n    typeof getSemanticColour | typeof getPrimitiveColour\n>;\n\ninterface Props {\n    className?: string | undefined;\n    /** Progress from 0 to 1 */\n    progress: number;\n    color?: string | ThemeColorFunctions | undefined;\n    \"data-testid\"?: string | undefined;\n}\n\nexport const ProgressBar = ({\n    className,\n    progress,\n    color,\n    \"data-testid\": testId,\n}: Props) => (\n    <Bar\n        className={className}\n        $innerWidth={progress}\n        $color={color}\n        data-testid={testId}\n    >\n        <progress value={progress * 100} max={100} />\n    </Bar>\n);\n\n// =============================================================================\n// STYLE INTERFACE\n// =============================================================================\ninterface StyleProps {\n    $color?: string | ThemeColorFunctions | undefined;\n    $innerWidth: number;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nconst Bar = styled.div<StyleProps>`\n    position: relative;\n    width: 100%;\n    height: 8px;\n    background: transparent;\n\n    progress {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        opacity: 0;\n    }\n\n    ${(props) => {\n        const { $color: color } = props;\n        let colorToUse: string;\n        if (color && typeof color === \"string\") {\n            colorToUse = color;\n        } else if (color) {\n            colorToUse = (color as ThemeColorFunctions)(props);\n        } else {\n            colorToUse = V3_Colour[\"icon-primary-subtle\"](props);\n        }\n\n        return css`\n            border: ${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]}\n                ${colorToUse};\n            border-radius: ${V3_Radius[\"sm\"]};\n\n            &:after {\n                content: \"\";\n                position: absolute;\n                top: 0;\n                bottom: 0;\n                left: 0;\n                border-radius: inherit;\n                background: ${colorToUse};\n                width: ${props.$innerWidth * 100}%;\n            }\n        `;\n    }}\n`;\n"],"names":["Bar","styled","div","props","$color","color","colorToUse","V3_Colour","css","V3_Border","V3_Radius","$innerWidth","className","progress","testId","_jsx","value","max"],"mappings":"kMA6CMA,OAAMC,QAAOC,GAAe;;;;;;;;;;;;;;;MAe3BC,IACC,MAAQC,OAAQC,GAAUF,EAC1B,IAAIG,EASJ,OAPIA,EADAD,GAA0B,iBAAVA,EACHA,EACNA,EACOA,EAA8BF,GAE/BI,EAAAA,UAAU,uBAAuBJ,GAG3CK,KAAG;sBACIC,EAAAA,UAAU,gBAAgBA,EAAAA,UAAiB;kBAC/CH;6BACWI,EAAAA,UAAc;;;;;;;;;8BASbJ;yBACe,IAApBH,EAAMQ;;SAEtB;sBApEkB,EACvBC,YACAC,WACAR,QACA,cAAeS,KAEfC,EAAAA,IAACf,EAAG,CACAY,UAAWA,cACEC,EAAQT,OACbC,EAAK,cACAS,WAEbC,EAAAA,IAAA,WAAA,CAAUC,MAAkB,IAAXH,EAAgBI,IAAK"}
+{"version":3,"file":"progress-bar.js","sources":["../../../../src/shared/progress-bar/progress-bar.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useRef } from \"react\";\n\nimport type { ColourCSSVariableString } from \"../../theme\";\nimport { Colour, useApplyStyle } from \"../../theme\";\nimport * as styles from \"./progress-bar.styles\";\n\ninterface Props {\n    className?: string | undefined;\n    /** Progress from 0 to 1 */\n    progress: number;\n    colour?: string | ColourCSSVariableString | undefined;\n    \"data-testid\"?: string | undefined;\n}\n\nexport const ProgressBar = ({\n    className,\n    progress,\n    colour,\n    \"data-testid\": testId,\n}: Props) => {\n    const colourToUse = colour ?? Colour[\"icon-primary-subtle\"];\n\n    const barRef = useRef<HTMLDivElement>(null);\n\n    useApplyStyle(barRef, {\n        [styles.tokens.barColour]: colourToUse,\n        [styles.tokens.barWidth]: `${progress * 100}%`,\n    });\n\n    return (\n        <div\n            className={clsx(styles.bar, className)}\n            data-testid={testId}\n            ref={barRef}\n        >\n            <progress value={progress * 100} max={100} />\n        </div>\n    );\n};\n"],"names":["className","progress","colour","testId","colourToUse","Colour","barRef","useRef","useApplyStyle","styles.tokens","barColour","barWidth","_jsx","clsx","styles.bar","ref","children","value","max"],"mappings":"slBAe2B,EACvBA,YACAC,WAAQC,OACRA,EACA,cAAeC,MAEf,MAAMC,EAAcF,QAAAA,EAAUG,EAAAA,OAAO,uBAE/BC,EAASC,EAAAA,OAAuB,MAOtC,OALAC,EAAAA,cAAcF,EAAQ,CAClB,CAACG,EAAAA,OAAcC,WAAYN,EAC3B,CAACK,EAAAA,OAAcE,UAAyB,IAAXV,EAAH,MAI1BW,EAAAA,IAAA,MAAA,CACIZ,UAAWa,EAAAA,QAAKC,EAAAA,IAAYd,GAAU,cACzBG,EACbY,IAAKT,EAAMU,SAEXJ,EAAAA,IAAA,WAAA,CAAUK,MAAkB,IAAXhB,EAAgBiB,IAAK,OACpC"}

package/cjs/shared/progress-bar/progress-bar.styles.js

@@ -0,0 +1,2 @@
+"use strict";require("./progress-bar.styles_125ri7a.css");exports.bar="b1gldp2k",exports.tokens={barColour:"--fds-internal-progressBar-colour",barWidth:"--fds-internal-progressBar-width"};
+//# sourceMappingURL=progress-bar.styles.js.map

package/cjs/shared/progress-bar/progress-bar.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress-bar.styles.js","sources":["../../../../src/shared/progress-bar/progress-bar.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Radius } from \"../../theme\";\n\nexport const tokens = {\n    barColour: \"--fds-internal-progressBar-colour\",\n    barWidth: \"--fds-internal-progressBar-width\",\n};\n\nexport const bar = css`\n    position: relative;\n    width: 100%;\n    height: 8px;\n    background: transparent;\n\n    border-style: ${Border[\"solid\"]};\n    border-width: ${Border[\"width-010\"]};\n    border-radius: ${Radius[\"sm\"]};\n    border-color: var(${tokens.barColour});\n\n    progress {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        opacity: 0;\n    }\n\n    &:after {\n        content: \"\";\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        left: 0;\n        border-radius: inherit;\n        background: var(${tokens.barColour});\n        width: var(${tokens.barWidth});\n    }\n`;\n"],"names":["barColour","barWidth"],"mappings":"yGASgB,0BALM,CAClBA,UAAW,oCACXC,SAAU"}

package/cjs/shared/progress-bar/progress-bar.styles_125ri7a.css

@@ -0,0 +1 @@
+@layer fds{.b1gldp2k{position:relative;width:100%;height:8px;background:transparent;border-style:var(--fds-border-style-solid);border-width:var(--fds-border-width-010);border-radius:var(--fds-radius-sm);border-color:var(--fds-internal-progressBar-colour);}.b1gldp2k progress{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;}.b1gldp2k:after{content:"";position:absolute;top:0;bottom:0;left:0;border-radius:inherit;background:var(--fds-internal-progressBar-colour);width:var(--fds-internal-progressBar-width);}}

package/cjs/shared/range-input-inner-container/range-input-inner-container.js

@@ -1,2 +1,2 @@
-"use strict";var r=require("react/jsx-runtime"),e=require("./range-input-inner-container.styles.js");exports.RangeInputInnerContainer=({children:n,currentActive:a,error:t,className:i,wrap:s})=>{const[c,o]=n;return r.jsxs(e.Wrapper,{className:i,$wrap:s,children:[r.jsx(e.ElementContainer,{"data-id":"range-container-elem1-container",children:c}),r.jsx(e.ArrowRight,{}),s&&r.jsx(e.Break,{}),r.jsx(e.ElementContainer,{"data-id":"range-container-elem2-container",children:o}),r.jsx(e.Indicator,{"data-id":"range-container-indicator",$position:a,$error:t,$wrap:s})]})};
+"use strict";var e=require("react/jsx-runtime"),r=require("@lifesg/react-icons"),a=require("clsx"),n=require("./range-input-inner-container.styles.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var t=i(a);exports.RangeInputInnerContainer=({children:a,currentActive:i,error:s,className:c,wrap:d})=>{const[o,l]=a;return e.jsxs("div",{className:t.default(n.wrapper,d&&n.wrapperWrap,c),children:[e.jsx("div",{className:n.elementContainer,"data-id":"range-container-elem1-container",children:o}),e.jsx(r.ArrowRightIcon,{"aria-hidden":"true",className:n.arrowRight}),d&&e.jsx("div",{className:n.lineBreak}),e.jsx("div",{className:n.elementContainer,"data-id":"range-container-elem2-container",children:l}),e.jsx("div",{className:t.default(n.indicator,s&&n.indicatorError,d&&n.indicatorWrap),"data-id":"range-container-indicator","data-position":i})]})};
 //# sourceMappingURL=range-input-inner-container.js.map

package/cjs/shared/range-input-inner-container/range-input-inner-container.js.map

@@ -1 +1 @@
-{"version":3,"file":"range-input-inner-container.js","sources":["../../../../src/shared/range-input-inner-container/range-input-inner-container.tsx"],"sourcesContent":["import {\n    ArrowRight,\n    Break,\n    ElementContainer,\n    Indicator,\n    Wrapper,\n} from \"./range-input-inner-container.styles\";\nimport type { RangeInputInnerContainerProps } from \"./types\";\n\n/**\n * This component allows for input fields to be added within the containers\n * and renders the slider based on the focused element.\n */\nexport const RangeInputInnerContainer = ({\n    children,\n    currentActive,\n    error,\n    className,\n    wrap,\n}: RangeInputInnerContainerProps) => {\n    // =========================================================================\n    // CONST, STATE\n    // =========================================================================\n    const [elem1, elem2] = children;\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    return (\n        <Wrapper className={className} $wrap={wrap}>\n            <ElementContainer data-id=\"range-container-elem1-container\">\n                {elem1}\n            </ElementContainer>\n            <ArrowRight />\n            {wrap && <Break />}\n            <ElementContainer data-id=\"range-container-elem2-container\">\n                {elem2}\n            </ElementContainer>\n            <Indicator\n                data-id=\"range-container-indicator\"\n                $position={currentActive}\n                $error={error}\n                $wrap={wrap}\n            />\n        </Wrapper>\n    );\n};\n"],"names":["children","currentActive","error","className","wrap","elem1","elem2","_jsxs","Wrapper","$wrap","_jsx","ElementContainer","ArrowRight","Break","Indicator","$position","$error"],"mappings":"sIAawC,EACpCA,WACAC,gBACAC,QACAC,YACAC,WAKA,MAAOC,EAAOC,GAASN,EAKvB,OACIO,EAAAA,KAACC,UAAO,CAACL,UAAWA,EAASM,MAASL,EAAIJ,SAAA,CACtCU,MAACC,EAAAA,iBAAgB,CAAA,UAAS,2CACrBN,IAELK,EAAAA,IAACE,aAAU,CAAA,GACVR,GAAQM,EAAAA,IAACG,EAAAA,MAAK,IACfH,MAACC,EAAAA,4BAAyB,kCAAiCX,SACtDM,IAELI,MAACI,EAAAA,UAAS,CAAA,UACE,4BAA2BC,UACxBd,EAAae,OAChBd,QACDE,MAEL"}
+{"version":3,"file":"range-input-inner-container.js","sources":["../../../../src/shared/range-input-inner-container/range-input-inner-container.tsx"],"sourcesContent":["import { ArrowRightIcon } from \"@lifesg/react-icons\";\nimport clsx from \"clsx\";\n\nimport * as styles from \"./range-input-inner-container.styles\";\nimport type { RangeInputInnerContainerProps } from \"./types\";\n\n/**\n * This component allows for input fields to be added within the containers\n * and renders the slider based on the focused element.\n */\nexport const RangeInputInnerContainer = ({\n    children,\n    currentActive,\n    error,\n    className,\n    wrap,\n}: RangeInputInnerContainerProps) => {\n    // =========================================================================\n    // CONST, STATE\n    // =========================================================================\n    const [elem1, elem2] = children;\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    return (\n        <div\n            className={clsx(\n                styles.wrapper,\n                wrap && styles.wrapperWrap,\n                className\n            )}\n        >\n            <div\n                className={styles.elementContainer}\n                data-id=\"range-container-elem1-container\"\n            >\n                {elem1}\n            </div>\n            <ArrowRightIcon aria-hidden=\"true\" className={styles.arrowRight} />\n            {wrap && <div className={styles.lineBreak} />}\n            <div\n                className={styles.elementContainer}\n                data-id=\"range-container-elem2-container\"\n            >\n                {elem2}\n            </div>\n            <div\n                className={clsx(\n                    styles.indicator,\n                    error && styles.indicatorError,\n                    wrap && styles.indicatorWrap\n                )}\n                data-id=\"range-container-indicator\"\n                data-position={currentActive}\n            />\n        </div>\n    );\n};\n"],"names":["children","currentActive","error","className","wrap","elem1","elem2","_jsxs","clsx","styles.wrapper","styles.wrapperWrap","_jsx","styles.elementContainer","ArrowRightIcon","styles.arrowRight","styles.lineBreak","styles.indicator","styles.indicatorError","styles.indicatorWrap"],"mappings":"4QAUwC,EACpCA,WACAC,gBACAC,QACAC,YACAC,WAKA,MAAOC,EAAOC,GAASN,EAKvB,OACIO,EAAAA,YACIJ,UAAWK,EAAAA,QACPC,EAAAA,QACAL,GAAQM,EAAAA,YACRP,GACHH,SAAA,CAEDW,EAAAA,WACIR,UAAWS,EAAAA,2BACH,kCAAiCZ,SAExCK,IAELM,EAAAA,IAACE,EAAAA,eAAc,CAAA,cAAa,OAAOV,UAAWW,EAAAA,aAC7CV,GAAQO,EAAAA,IAAA,MAAA,CAAKR,UAAWY,EAAAA,YACzBJ,EAAAA,IAAA,MAAA,CACIR,UAAWS,EAAAA,iBAAuB,UAC1B,2CAEPN,IAELK,EAAAA,IAAA,MAAA,CACIR,UAAWK,EAAAA,QACPQ,EAAAA,UACAd,GAASe,EAAAA,eACTb,GAAQc,EAAAA,eACX,UACO,4CACOjB,MAEjB"}

package/cjs/shared/range-input-inner-container/range-input-inner-container.styles.js

@@ -1,65 +1,2 @@
-"use strict";var e=require("@lifesg/react-icons"),t=require("styled-components"),n=require("../../v3_theme/index.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=i(t);const o=a.default.div`
-    position: relative;
-    height: 100%;
-    display: flex;
-    flex: 1;
-
-    ${e=>{if(e.$wrap)return t.css`
-                /* Parent container need to provide space */
-                flex-wrap: wrap;
-
-                [data-id="range-container-elem1-container"],
-                [data-id="range-container-elem2-container"] {
-                    // 100% - Icon size - 2padding
-                    max-width: calc(
-                        100% - ${n.V3_Font.Spec["body-size-baseline"]} -
-                            ${n.V3_Spacing["spacing-16"]}
-                    );
-                    flex: unset;
-                }
-
-                [data-id="range-container-elem2-container"] {
-                    margin-top: ${n.V3_Spacing["spacing-8"]};
-                }
-            `}}
-`,r=a.default.div`
-    width: 100%; // Force next flex item to break to next line
-`,s=a.default.div`
-    display: flex;
-    flex: 1;
-    align-items: center;
-`,c=a.default(e.ArrowRightIcon)`
-    color: ${n.V3_Colour.icon};
-    width: ${n.V3_Font.Spec["body-size-baseline"]};
-    height: ${n.V3_Font.Spec["body-size-baseline"]};
-    flex-shrink: 0;
-    margin: 0 ${n.V3_Spacing["spacing-8"]};
-    align-self: center;
-`,d=a.default.div`
-    position: absolute;
-    background: ${e=>e.$error?n.V3_Colour["border-error-focus-strong"]:n.V3_Colour["border-focus-strong"]};
-    height: 2px;
-    // half - half padding - half icon width
-    width: calc(
-        50% - ${n.V3_Spacing["spacing-8"]} -
-            (${n.V3_Font.Spec["body-size-baseline"]} / 2)
-    );
-    transition: left ${n.V3_Motion["duration-350"]} ${n.V3_Motion["ease-standard"]},
-        opacity ${n.V3_Motion["duration-350"]} ${n.V3_Motion["ease-standard"]};
-    left: 0;
-    bottom: 0;
-
-    ${e=>{switch(e.$position){case"start":return t.css`
-                    opacity: 1;
-                `;case"end":return t.css`
-                    left: calc(50% + ${n.V3_Spacing["spacing-16"]});
-                    opacity: 1;
-                `;case"none":return t.css`
-                    opacity: 0;
-                `}}}
-
-    ${e=>{if(e.$wrap)return t.css`
-                display: none;
-            `}}
-`;exports.ArrowRight=c,exports.Break=r,exports.ElementContainer=s,exports.Indicator=d,exports.Wrapper=o;
+"use strict";require("./range-input-inner-container.styles_1v61utg.css");exports.arrowRight="a1uc2vum",exports.elementContainer="e13aheiu",exports.indicator="i1c4xw6e",exports.indicatorError="i1gifs7v",exports.indicatorWrap="i175ocg1",exports.lineBreak="lk3rj3g",exports.wrapper="w1i0lopf",exports.wrapperWrap="ws05n6a";
 //# sourceMappingURL=range-input-inner-container.styles.js.map

package/cjs/shared/range-input-inner-container/range-input-inner-container.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"range-input-inner-container.styles.js","sources":["../../../../src/shared/range-input-inner-container/range-input-inner-container.styles.tsx"],"sourcesContent":["import { ArrowRightIcon } from \"@lifesg/react-icons\";\nimport styled, { css } from \"styled-components\";\n\nimport { V3_Colour, V3_Font, V3_Motion, V3_Spacing } from \"../../v3_theme\";\n\n// =============================================================================\n// STYLE INTERFACE\n// =============================================================================\ninterface GeneralStyleProps {\n    $wrap?: boolean;\n}\n\ninterface IndicatorStyleProps extends GeneralStyleProps {\n    $position: \"start\" | \"end\" | \"none\";\n    $error: boolean | undefined;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\n\nexport const Wrapper = styled.div<GeneralStyleProps>`\n    position: relative;\n    height: 100%;\n    display: flex;\n    flex: 1;\n\n    ${(props) => {\n        if (props.$wrap) {\n            return css`\n                /* Parent container need to provide space */\n                flex-wrap: wrap;\n\n                [data-id=\"range-container-elem1-container\"],\n                [data-id=\"range-container-elem2-container\"] {\n                    // 100% - Icon size - 2padding\n                    max-width: calc(\n                        100% - ${V3_Font.Spec[\"body-size-baseline\"]} -\n                            ${V3_Spacing[\"spacing-16\"]}\n                    );\n                    flex: unset;\n                }\n\n                [data-id=\"range-container-elem2-container\"] {\n                    margin-top: ${V3_Spacing[\"spacing-8\"]};\n                }\n            `;\n        }\n    }}\n`;\n\nexport const Break = styled.div`\n    width: 100%; // Force next flex item to break to next line\n`;\n\nexport const ElementContainer = styled.div`\n    display: flex;\n    flex: 1;\n    align-items: center;\n`;\n\nexport const ArrowRight = styled(ArrowRightIcon)`\n    color: ${V3_Colour[\"icon\"]};\n    width: ${V3_Font.Spec[\"body-size-baseline\"]};\n    height: ${V3_Font.Spec[\"body-size-baseline\"]};\n    flex-shrink: 0;\n    margin: 0 ${V3_Spacing[\"spacing-8\"]};\n    align-self: center;\n`;\n\nexport const Indicator = styled.div<IndicatorStyleProps>`\n    position: absolute;\n    background: ${(props) =>\n        props.$error\n            ? V3_Colour[\"border-error-focus-strong\"]\n            : V3_Colour[\"border-focus-strong\"]};\n    height: 2px;\n    // half - half padding - half icon width\n    width: calc(\n        50% - ${V3_Spacing[\"spacing-8\"]} -\n            (${V3_Font.Spec[\"body-size-baseline\"]} / 2)\n    );\n    transition: left ${V3_Motion[\"duration-350\"]} ${V3_Motion[\"ease-standard\"]},\n        opacity ${V3_Motion[\"duration-350\"]} ${V3_Motion[\"ease-standard\"]};\n    left: 0;\n    bottom: 0;\n\n    ${(props) => {\n        switch (props.$position) {\n            case \"start\":\n                return css`\n                    opacity: 1;\n                `;\n            case \"end\":\n                return css`\n                    left: calc(50% + ${V3_Spacing[\"spacing-16\"]});\n                    opacity: 1;\n                `;\n            case \"none\":\n                return css`\n                    opacity: 0;\n                `;\n        }\n    }}\n\n    ${(props) => {\n        if (props.$wrap) {\n            return css`\n                display: none;\n            `;\n        }\n    }}\n`;\n"],"names":["Wrapper","styled","div","props","$wrap","css","V3_Font","Spec","V3_Spacing","Break","ElementContainer","ArrowRight","ArrowRightIcon","V3_Colour","Indicator","$error","V3_Motion","$position"],"mappings":"yMAqBO,MAAMA,EAAUC,EAAAA,QAAOC,GAAsB;;;;;;MAM7CC,IACC,GAAIA,EAAMC,MACN,OAAOC,KAAG;;;;;;;;iCAQWC,EAAAA,QAAQC,KAAK;8BAChBC,EAAAA,WAAW;;;;;;kCAMPA,EAAAA,WAAW;;aAGrC;EAIKC,EAAQR,EAAAA,QAAOC,GAAG;;EAIlBQ,EAAmBT,EAAAA,QAAOC,GAAG;;;;EAM7BS,EAAaV,EAAAA,QAAOW,EAAAA,eAAe;aACnCC,EAAAA,UAAgB;aAChBP,EAAAA,QAAQC,KAAK;cACZD,EAAAA,QAAQC,KAAK;;gBAEXC,EAAAA,WAAW;;EAIdM,EAAYb,EAAAA,QAAOC,GAAwB;;kBAErCC,GACXA,EAAMY,OACAF,EAAAA,UAAU,6BACVA,EAAAA,UAAU;;;;gBAIRL,EAAAA,WAAW;eACZF,EAAAA,QAAQC,KAAK;;uBAELS,EAAAA,UAAU,mBAAmBA,EAAAA,UAAU;kBAC5CA,EAAAA,UAAU,mBAAmBA,EAAAA,UAAU;;;;MAIlDb,IACC,OAAQA,EAAMc,WACV,IAAK,QACD,OAAOZ,KAAG;;kBAGd,IAAK,MACD,OAAOA,KAAG;uCACaG,EAAAA,WAAW;;kBAGtC,IAAK,OACD,OAAOH,KAAG;;;;MAMnBF,IACC,GAAIA,EAAMC,MACN,OAAOC,KAAG;;aAGd;"}
+{"version":3,"file":"range-input-inner-container.styles.js","sources":["../../../../src/shared/range-input-inner-container/range-input-inner-container.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font, Motion, Spacing } from \"../../theme\";\n\nexport const wrapper = css`\n    position: relative;\n    height: 100%;\n    display: flex;\n    flex: 1;\n`;\n\nexport const wrapperWrap = css`\n    /* Parent container need to provide space */\n    flex-wrap: wrap;\n\n    [data-id=\"range-container-elem1-container\"],\n    [data-id=\"range-container-elem2-container\"] {\n        // 100% - Icon size - 2padding\n        max-width: calc(\n            100% - ${Font.Spec[\"body-size-baseline\"]} - ${Spacing[\"spacing-16\"]}\n        );\n        flex: unset;\n    }\n\n    [data-id=\"range-container-elem2-container\"] {\n        margin-top: ${Spacing[\"spacing-8\"]};\n    }\n`;\n\nexport const elementContainer = css`\n    display: flex;\n    flex: 1;\n    align-items: center;\n`;\n\nexport const arrowRight = css`\n    color: ${Colour[\"icon\"]};\n    width: ${Font.Spec[\"body-size-baseline\"]};\n    height: ${Font.Spec[\"body-size-baseline\"]};\n    flex-shrink: 0;\n    margin: 0 ${Spacing[\"spacing-8\"]};\n    align-self: center;\n`;\n\nexport const lineBreak = css`\n    width: 100%; // Force next flex item to break to next line\n`;\n\nexport const indicator = css`\n    position: absolute;\n    background: ${Colour[\"border-focus-strong\"]};\n    height: 2px;\n    // half - half padding - half icon width\n    width: calc(\n        50% - ${Spacing[\"spacing-8\"]} - (${Font.Spec[\"body-size-baseline\"]} / 2)\n    );\n    transition: left ${Motion[\"duration-350\"]} ${Motion[\"ease-standard\"]},\n        opacity ${Motion[\"duration-350\"]} ${Motion[\"ease-standard\"]};\n    left: 0;\n    bottom: 0;\n    opacity: 0;\n\n    &[data-position=\"start\"] {\n        opacity: 1;\n    }\n\n    &[data-position=\"end\"] {\n        left: calc(50% + ${Spacing[\"spacing-16\"]});\n        opacity: 1;\n    }\n`;\n\nexport const indicatorError = css`\n    background: ${Colour[\"border-error-focus-strong\"]};\n`;\n\nexport const indicatorWrap = css`\n    display: none;\n`;\n"],"names":[],"mappings":"8IAmCuB,oCANM,6BAmBP,kCAwBK,iCAID,6BAhCJ,0BAxCF,+BAOI"}

package/cjs/shared/range-input-inner-container/range-input-inner-container.styles_1v61utg.css

@@ -0,0 +1,12 @@
+@layer fds{.w1i0lopf{position:relative;height:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:1;-ms-flex:1;flex:1;}
+.ws05n6a{-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;}.ws05n6a [data-id="range-container-elem1-container"],.ws05n6a [data-id="range-container-elem2-container"]{max-width:calc(
+            100% - var(--fds-font-body-size-baseline) - var(--fds-spacing-16)
+        );-webkit-flex:unset;-ms-flex:unset;flex:unset;}.ws05n6a [data-id="range-container-elem2-container"]{margin-top:var(--fds-spacing-8);}
+.e13aheiu{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
+.a1uc2vum{color:var(--fds-colour-icon);width:var(--fds-font-body-size-baseline);height:var(--fds-font-body-size-baseline);-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin:0 var(--fds-spacing-8);-webkit-align-self:center;-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center;}
+.lk3rj3g{width:100%;}
+.i1c4xw6e{position:absolute;background:var(--fds-colour-border-focus-strong);height:2px;width:calc(
+        50% - var(--fds-spacing-8) - (var(--fds-font-body-size-baseline) / 2)
+    );-webkit-transition:left var(--fds-motion-duration-350) var(--fds-motion-timing-ease-standard),opacity var(--fds-motion-duration-350) var(--fds-motion-timing-ease-standard);transition:left var(--fds-motion-duration-350) var(--fds-motion-timing-ease-standard),opacity var(--fds-motion-duration-350) var(--fds-motion-timing-ease-standard);left:0;bottom:0;opacity:0;}.i1c4xw6e[data-position="start"]{opacity:1;}.i1c4xw6e[data-position="end"]{left:calc(50% + var(--fds-spacing-16));opacity:1;}
+.i1gifs7v{background:var(--fds-colour-border-error-focus-strong);}
+.i175ocg1{display:none;}}