npm - @lifesg/react-design-system - Versions diffs - 4.0.0-alpha.2 → 4.0.0-alpha.4 - Mend

@lifesg/react-design-system 4.0.0-alpha.2 → 4.0.0-alpha.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2426) hide show

package/time-slot-week-view/time-slot-week-days.js.map CHANGED Viewed

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

package/time-slot-week-view/time-slot-week-days.styles.d.ts ADDED Viewed

@@ -0,0 +1,14 @@
+export declare const tokens: {
+    timeSlotText: {
+        color: string;
+    };
+};
+export declare const headerCellWeek: import("@linaria/core").LinariaClassName;
+export declare const headerRow: import("@linaria/core").LinariaClassName;
+export declare const dayLabel: import("@linaria/core").LinariaClassName;
+export declare const dayLabelDisabled: import("@linaria/core").LinariaClassName;
+export declare const wrapper: import("@linaria/core").LinariaClassName;
+export declare const columnWeekCell: import("@linaria/core").LinariaClassName;
+export declare const timeSlotText: import("@linaria/core").LinariaClassName;
+export declare const timeSlotComponent: import("@linaria/core").LinariaClassName;
+export declare const timeSlotWrapper: import("@linaria/core").LinariaClassName;

package/time-slot-week-view/time-slot-week-days.styles.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import"./time-slot-week-days.styles_1h21vyw.css";const e={timeSlotText:{color:"--fds-internal-timeSlotWeekDays-timeSlotText-color"}},t="h1u5a4vg",o="hi684jn",i="d4p8eye",l="dl9xaeu",s="w1jgoij2",y="c1fvren",c="tiecbfv",m="t1nixg7y",n="t17yohj6";export{y as columnWeekCell,i as dayLabel,l as dayLabelDisabled,t as headerCellWeek,o as headerRow,m as timeSlotComponent,c as timeSlotText,n as timeSlotWrapper,e as tokens,s as wrapper};
2	+ //# sourceMappingURL=time-slot-week-days.styles.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"time-slot-week-days.styles.js","sources":["../../src/time-slot-week-view/time-slot-week-days.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font } from \"../theme\";\n\n// =============================================================================\n// TOKENS\n// =============================================================================\nexport const tokens = {\n timeSlotText: {\n color: \"--fds-internal-timeSlotWeekDays-timeSlotText-color\",\n },\n};\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const headerCellWeek = css`\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n user-select: none;\n margin-bottom: 0.188rem;\n`;\n\nexport const headerRow = css`\n grid-column: 1 / -1;\n display: grid;\n grid-template-columns: repeat(7, 1fr);\n`;\n\nexport const dayLabel = css`\n ${Font[\"body-xs-semibold\"]}\n color: ${Colour[\"text\"]};\n`;\n\nexport const dayLabelDisabled = css`\n color: ${Colour[\"text-disabled-subtlest\"]};\n`;\n\nexport const wrapper = css`\n width: 100%;\n display: grid;\n grid-template-columns: repeat(7, 1fr);\n`;\n\nexport const columnWeekCell = css`\n grid-column: 1 / -1;\n display: flex;\n min-height: 7.625rem;\n`;\n\nexport const timeSlotText = css`\n ${tokens.timeSlotText.color}: initial;\n\n ${Font[\"body-xs-semibold\"]}\n margin: 1rem 0rem;\n display: flex;\n flex-direction: column;\n align-items: center;\n text-align: center;\n max-width: 2.5rem;\n color: var(${tokens.timeSlotText.color}, ${Colour[\"text\"]});\n`;\n\nexport const timeSlotComponent = css`\n display: flex;\n flex-grow: 1;\n align-items: center;\n justify-content: center;\n margin: 1px 0px;\n position: relative;\n\n &:focus-within {\n outline: 2px solid ${Colour[\"focus-ring\"]};\n outline-offset: 2px;\n z-index: 1;\n }\n`;\n\nexport const timeSlotWrapper = css`\n display: flex;\n flex-direction: column;\n flex: 1;\n margin: 1px;\n`;\n"],"names":["tokens","timeSlotText","color","headerCellWeek","headerRow","dayLabel","dayLabelDisabled","wrapper","columnWeekCell","timeSlotComponent","timeSlotWrapper"],"mappings":"oFAOO,MAAMA,EAAS,CAClBC,aAAc,CACVC,MAAO,uDAOFC,EAAc,WASdC,EAAS,UAMTC,EAAQ,UAKRC,EAAgB,UAIhBC,EAAO,WAMPC,EAAc,UAMdP,EAAY,UAaZQ,EAAiB,WAejBC,EAAe"}

package/time-slot-week-view/time-slot-week-days.styles_1h21vyw.css ADDED Viewed

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

package/time-slot-week-view/time-slot-week-view.js CHANGED Viewed

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

package/time-slot-week-view/time-slot-week-view.js.map CHANGED Viewed

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

package/time-slot-week-view/time-slot-week-view.styles.d.ts CHANGED Viewed

	@@ -1 +1 @@
1	- export declare const ~~Wrapper~~: import("~~styled-components~~/~~dist/types~~").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
1	+ export declare const wrapper: import("@linaria/core").LinariaClassName;

package/time-slot-week-view/time-slot-week-view.styles.js CHANGED Viewed

@@ -1,10 +1,2 @@
-import e from"styled-components";import{V3_MediaQuery as t}from"../v3_theme/index.js";const m=e.div`
-    --header-bottom-spacing: 0.5rem;
-    ${t.MaxWidth.sm} {
-        --header-horizontal-inset: 1.25rem;
-    }
-    min-width: 18.5rem;
-`;export{m as Wrapper};
+import"./time-slot-week-view.styles_gqgsw2.css";const e="wgz4q8s";export{e as wrapper};
 //# sourceMappingURL=time-slot-week-view.styles.js.map

package/time-slot-week-view/time-slot-week-view.styles.js.map CHANGED Viewed

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

package/time-slot-week-view/time-slot-week-view.styles_gqgsw2.css ADDED Viewed

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

package/timeline/timeline.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{createElement as e}from"react";import{jsxs as t,jsx as i,Fragment as r}from"react/jsx-runtime";import{ExclamationCircleFillIcon as a,TickIcon as n}from"@lifesg/react-icons";import{VisuallyHidden as c}from"../shared/accessibility/index.js";import{Typography as s}from"../typography/index.js";import{TimelineWrapper as l,TimelineTitle as d,TimelineItem as o,TimelineIndicators as m,CircleIndicator as p,LineIndicator as u,TimelineItemContent as h,TimelinePills as f,TimelineItemTitle as v,TimelinePill as g}from"./timeline.style.js";const y=({items:y,className:$,id:b,title:w,startCol:N,colSpan:j,"data-base-indicator-testid":x,"data-testid":C="timeline",headingLevel:S=2,counterOffset:A=0})=>{const O=e=>"string"==typeof e?i(s.BodyMD,{className:"timeline-item-content-text",children:e}):i(r,{children:e}),U=(e,t)=>"string"==typeof e?i(v,{forwardedAs:"h3","aria-level":t,weight:"semibold",className:"timeline-item-title",children:e}):i(r,{children:e}),_=t=>t.slice(0,2).map(((t,i)=>e(g,Object.assign({},t,{type:t.type,key:`status-pill-${i}`,"data-testid":"status-pill",className:"timeline-status-pill"}),t.children))),k=(e,t)=>{switch(e){case"completed":return i(n,{"aria-hidden":!0});case"error":return i(a,{"aria-hidden":!0});case"numeric":return i("span",{"aria-hidden":!0,children:t+1+A});default:return null}},q=(e,t)=>{switch(e){case"current":return"Current step";case"completed":return"Completed step";case"upcoming-active":return"Upcoming active step";case"upcoming-inactive":return"Upcoming inactive step";case"disabled":return"Inactive step";case"error":return"Current step, action required";case"numeric":return`Step number ${t+1+A}`;default:return""}};return t(l,{className:$,id:b,"data-testid":C,$startCol:N,$colSpan:j,children:[i(d,{forwardedAs:"h2","aria-level":S,"data-testid":"timeline-title",weight:"bold",children:w}),i("div",{role:"list",children:y.map(((e,r)=>{const{title:a,content:n,statuses:s,variant:l}=e,d=l||(0===r?"current":"upcoming-active");return t(o,{role:"listitem",children:[t(m,{children:[t(p,{"data-testid":x?`circleindicator${r+1}_div_${x}`:"circleindicator",$variant:d,children:[i(c,{children:q(d,r)}),k(d,r)]}),i(u,{$variant:d})]}),t(h,{className:"timeline-item-content",children:[U(a,S+1),s&&i(f,{children:_(s)}),O(n)]})]},`timeline-item-${r}`)}))})]})};export{y as Timeline};
+import{useRef as e,createElement as t}from"react";import{jsxs as i,jsx as r,Fragment as s}from"react/jsx-runtime";import{ExclamationCircleFillIcon as a,TickIcon as n}from"@lifesg/react-icons";import l from"clsx";import{Pill as c}from"../pill/pill.js";import{VisuallyHidden as m}from"../shared/accessibility/index.js";import"../theme/theme-provider/index.js";import"../theme/theme-provider/context.js";import"../theme/tokens/border.js";import"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import{useApplyStyle as d}from"../theme/utils/use-apply-styles.js";import"../theme/utils/use-media-query.js";import{Typography as o}from"../typography/index.js";import{tokens as p,timelineTitle as u,timelineWrapper as h,timelineItem as v,timelineIndicators as f,circleIndicator as g,lineIndicator as j,timelinePills as y,timelineItemContent as N,timelineItemTitle as b}from"./timeline.styles.js";const x=({items:x,className:w,id:k,title:C,startCol:S,colSpan:$,"data-base-indicator-testid":q,"data-testid":H="timeline",headingLevel:M=2,counterOffset:O=0})=>{const U=e(null);d(U,{[p.wrapper.startCol]:S,[p.wrapper.colSpan]:$});const _=e=>"string"==typeof e?r(o.BodyMD,{className:"timeline-item-content-text",children:e}):r(s,{children:e}),B=(e,t)=>"string"==typeof e?r(o.HeadingXS,{as:"h3","aria-level":t,weight:"semibold",className:l(b,"timeline-item-title"),children:e}):r(s,{children:e}),D=e=>e.slice(0,2).map(((e,i)=>t(c,Object.assign({},e,{type:e.type,key:`status-pill-${i}`,"data-testid":"status-pill",className:"timeline-status-pill"}),e.children))),I=(e,t)=>{switch(e){case"completed":return r(n,{"aria-hidden":!0});case"error":return r(a,{"aria-hidden":!0});case"numeric":return r("span",{"aria-hidden":!0,children:t+1+O});default:return null}},L=(e,t)=>{switch(e){case"current":return"Current step";case"completed":return"Completed step";case"upcoming-active":return"Upcoming active step";case"upcoming-inactive":return"Upcoming inactive step";case"disabled":return"Inactive step";case"error":return"Current step, action required";case"numeric":return`Step number ${t+1+O}`;default:return""}};return i("div",{ref:U,className:l(h,w),id:k,"data-testid":H,children:[r(o.HeadingSM,{as:"h2","aria-level":M,"data-testid":"timeline-title",weight:"bold",className:u,children:C}),r("div",{role:"list",children:x.map(((e,t)=>{const{title:s,content:a,statuses:n,variant:c}=e,d=c||(0===t?"current":"upcoming-active");return i("div",{role:"listitem",className:v,children:[i("div",{className:f,children:[i("div",{"data-testid":q?`circleindicator${t+1}_div_${q}`:"circleindicator",className:g,"data-variant":d,children:[r(m,{children:L(d,t)}),I(d,t)]}),r("div",{className:j,"data-variant":d})]}),i("div",{className:l(N,"timeline-item-content"),children:[B(s,M+1),n&&r("div",{className:y,children:D(n)}),_(a)]})]},`timeline-item-${t}`)}))})]})};export{x as Timeline};
 //# sourceMappingURL=timeline.js.map

package/timeline/timeline.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"timeline.js","sources":["../../src/timeline/timeline.tsx"],"sourcesContent":["import { ExclamationCircleFillIcon, TickIcon } from \"@lifesg/react-icons\";\n\nimport type { PillProps } from \"../pill\";\nimport { VisuallyHidden } from \"../shared/accessibility\";\nimport { ~~Typography~~ } from \"../~~typography~~\";\nimport {\n CircleIndicator,\n LineIndicator,\n TimelineIndicators,\n TimelineItem,\n TimelineItemContent,\n TimelineItemTitle,\n TimelinePill,\n TimelinePills,\n TimelineTitle,\n TimelineWrapper,\n} from \"./timeline.~~style~~\";\nimport type { TimelineItemProps, TimelineProps, Variant } from \"./types\";\n\nexport const Timeline = ({\n items,\n className,\n id,\n title,\n startCol,\n colSpan,\n \"data-base-indicator-testid\": baseIndicatorTestId,\n \"data-testid\": testId = \"timeline\",\n headingLevel = 2,\n counterOffset = 0,\n}: TimelineProps): JSX.Element => {\n // ===========================================================================\n // RENDER\n // ===========================================================================\n const renderContent = (content: string \| JSX.Element): JSX.Element => {\n if (typeof content === \"string\") {\n return (\n <Typography.BodyMD className=\"timeline-item-content-text\">\n {content}\n </Typography.BodyMD>\n );\n }\n\n return <>{content}</>;\n };\n\n const renderTitle = (\n title: string \| JSX.Element,\n level: number\n ): JSX.Element => {\n if (typeof title === \"string\") {\n return (\n <~~TimelineItemTitle~~\n ~~forwardedAs~~=\"h3\"\n aria-level={level}\n weight=\"semibold\"\n className=\"timeline-item-title\"\n >\n {title}\n </~~TimelineItemTitle~~>\n );\n }\n\n return <>{title}</>;\n };\n\n const renderStatusPills = (statuses: PillProps[]): JSX.Element[] => {\n // maximum 2 pills allowed\n const renderableStatuses = statuses.slice(0, 2);\n return renderableStatuses.map((status: PillProps, index) => {\n return (\n <~~TimelinePill~~\n {...status}\n type={status.type}\n key={`status-pill-${index}`}\n data-testid=\"status-pill\"\n className=\"timeline-status-pill\"\n >\n {status.children}\n </~~TimelinePill~~>\n );\n });\n };\n\n const renderIcon = (variant: Variant, index: number) => {\n switch (variant) {\n case \"completed\":\n return <TickIcon aria-hidden />;\n case \"error\":\n return <ExclamationCircleFillIcon aria-hidden />;\n case \"numeric\":\n return <span aria-hidden>{index + 1 + counterOffset}</span>;\n default:\n return null;\n }\n };\n\n const getStatus = (variant: Variant, index: number) => {\n switch (variant) {\n case \"current\":\n return \"Current step\";\n case \"completed\":\n return \"Completed step\";\n case \"upcoming-active\":\n return \"Upcoming active step\";\n case \"upcoming-inactive\":\n return \"Upcoming inactive step\";\n case \"disabled\":\n return \"Inactive step\";\n case \"error\":\n return \"Current step, action required\";\n case \"numeric\":\n return `Step number ${index + 1 + counterOffset}`;\n default:\n return \"\";\n }\n };\n\n const renderItems = () =>\n items.map((item: TimelineItemProps, index) => {\n const { title, content, statuses, variant: _variant } = item;\n const circleIndicatorTestId = baseIndicatorTestId\n ? `circleindicator${index + 1}_div_${baseIndicatorTestId}`\n : \"circleindicator\";\n const variant =\n _variant \|\| (index === 0 ? \"current\" : \"upcoming-active\");\n\n return (\n <~~TimelineItem~~ key={`timeline-item-${index}`} role=\"listitem\">\n <~~TimelineIndicators~~>\n <~~CircleIndicator~~\n data-testid={circleIndicatorTestId}\n $variant={variant}\n >\n <VisuallyHidden>\n {getStatus(variant, index)}\n </VisuallyHidden>\n {renderIcon(variant, index)}\n </~~CircleIndicator~~>\n <~~LineIndicator $~~variant={variant} />\n </~~TimelineIndicators~~>\n <~~TimelineItemContent~~ className=\"timeline-item-content\">\n {renderTitle(title, headingLevel + 1)}\n {statuses && (\n <~~TimelinePills~~>\n {renderStatusPills(statuses)}\n </~~TimelinePills~~>\n )}\n {renderContent(content)}\n </~~TimelineItemContent~~>\n </~~TimelineItem~~>\n );\n });\n\n return (\n <~~TimelineWrapper~~\n className={className}\n id={id}\n data-testid={testId}\n ~~$startCol={startCol}\n $colSpan={colSpan}\n~~ >\n <~~TimelineTitle~~\n ~~forwardedAs~~=\"h2\"\n aria-level={headingLevel}\n data-testid=\"timeline-title\"\n weight=\"bold\"\n >\n {title}\n </~~TimelineTitle~~>\n <div role=\"list\">{renderItems()}</div>\n </~~TimelineWrapper~~>\n );\n};\n"],"names":["Timeline","items","className","id","title","startCol","colSpan","baseIndicatorTestId","testId","headingLevel","counterOffset","renderContent","content","_jsx","Typography","BodyMD","children","_Fragment","renderTitle","level","~~TimelineItemTitle~~","~~forwardedAs~~","weight","renderStatusPills","statuses","slice","map","status","index","_createElement","~~TimelinePill~~","Object","assign","type","key","renderIcon","variant","TickIcon","ExclamationCircleFillIcon","getStatus","_jsxs","~~TimelineWrapper~~","~~$colSpan~~","~~TimelineTitle~~","role","item","_variant","~~TimelineItem~~","~~TimelineIndicators~~","~~CircleIndicator~~","~~$variant","~~VisuallyHidden","~~LineIndicator~~","~~TimelineItemContent~~","~~TimelinePills~~"],"mappings":"~~0hBAmBO~~,MAAMA,EAAW,EACpBC,QACAC,YACAC,KACAC,QACAC,WACAC,UACA,6BAA8BC,EAC9B,cAAeC,EAAS,WACxBC,eAAe,EACfC,gBAAgB,~~MAKhB~~,MAAMC,EAAiBC,GACI,iBAAZA,EAEHC,EAACC,EAAWC,OAAM,~~CAACb~~,UAAU,~~6BAA4Bc~~,SACpDJ,IAKNC,EAAAI,EAAA,CAAAD,SAAGJ,IAGRM,EAAc,~~CAChBd~~,~~EACAe~~,IAEqB,~~iBAAVf~~,~~EAEHS~~,~~EAACO~~,~~EAAiB~~,~~CACdC~~,~~YAAY~~,~~kBACAF~~,EACZG,OAAO,~~WACPpB~~,~~UAAU~~,~~sBAAqBc~~,~~SAE9BZ~~,~~IAKNS~~,EAAAI,EAAA,CAAAD,~~SAAGZ~~,~~IAGRmB~~,EAAqBC,GAEIA,EAASC,MAAM,EAAG,GACnBC,KAAI,CAACC,EAAmBC,IAE1CC,EAACC,~~EAAYC~~,OAAAC,OAAA,~~GACLL~~,EAAM,CACVM,KAAMN,EAAOM,KACbC,IAAK,eAAeN,IAAO,cACf,~~cACZ1B~~,UAAU,~~yBAETyB~~,~~EAAOX~~,~~YAMlBmB~~,EAAa,CAACC,EAAkBR,KAClC,OAAQQ,GACJ,IAAK,YACD,~~OAAOvB~~,~~EAACwB~~,EAAQ,CAAA,eAAA,IACpB,IAAK,QACD,~~OAAOxB~~,~~EAACyB~~,EAAyB,CAAA,eAAA,IACrC,IAAK,UACD,~~OAAOzB~~,~~oCAAmBe~~,EAAQ,~~EAAIlB~~,IAC1C,QACI,OAAO,~~OAIb6B~~,EAAY,CAACH,EAAkBR,KACjC,OAAQQ,GACJ,IAAK,UACD,MAAO,eACX,IAAK,YACD,MAAO,iBACX,IAAK,kBACD,MAAO,uBACX,IAAK,oBACD,MAAO,yBACX,IAAK,WACD,MAAO,gBACX,IAAK,QACD,MAAO,gCACX,IAAK,UACD,MAAO,eAAeR,EAAQ,~~EAAIlB~~,IACtC,QACI,MAAO,~~KAwCnB~~,~~OACI8B~~,~~EAACC~~,~~EAAe~~,~~CACZvC~~,~~UAAWA~~,~~EACXC~~,GAAIA,EAAE,cACOK,~~YACFH~~,~~EAAQqC~~,~~SACTpC~~,~~EAAOU~~,~~SAAA~~,~~CAEjBH~~,~~EAAC8B~~,~~EAAa~~,~~CACVtB~~,~~YAAY~~,~~KAAI~~,~~aACJZ~~,~~gBACA~~,~~iBACZa,~~OAAO,~~gBAENlB~~,~~IAELS~~,EAAA,MAAA,~~CAAK+B~~,KAAK,~~OAAM5B~~,~~SAnDpBf~~,~~EAAMyB~~,KAAI,~~CAACmB~~,~~EAAyBjB~~,KAChC,~~MAAMxB~~,MAAEA,~~EAAKQ~~,QAAEA,~~EAAOY~~,SAAEA,EAAUY,~~QAASU~~,GAAaD,~~EAIlDT~~,~~EACFU~~,IAAuB,~~IAAVlB~~,EAAc,UAAY,mBAE3C,OACIY,~~EAACO~~,~~GAA4CH~~,KAAK,~~WAAU5B~~,SAAA,~~CACxDwB~~,~~EAACQ~~,~~EAAkB~~,~~CAAAhC~~,SAAA,~~CACfwB~~,~~EAACS~~,~~EAAe,CAAA,cATE1C,~~EACxB,~~kBAAkBqB~~,EAAQ,~~SAASrB~~,IACnC,~~kBAQ4C2C~~,~~SACxBd~~,~~YAEVvB~~,~~EAACsC~~,EAAc,~~CAAAnC~~,~~SACVuB~~,EAAUH,EAASR,KAEvBO,EAAWC,EAASR,~~MAEzBf~~,~~EAACuC~~,~~YAAwBhB~~,~~OAE7BI~~,~~EAACa~~,~~EAAmB~~,~~CAACnD~~,~~UAAU~~,~~kCAC1BgB~~,~~EAAYd~~,EAAOK,EAAe,~~GAClCe~~,~~GACGX~~,~~EAACyC~~,~~EAAa~~,~~CAAAtC~~,~~SACTO~~,EAAkBC,~~KAG1Bb~~,EAAcC,~~QApBJ~~,~~iBAAiBgB~~,~~IAsBrB~~,~~QAqBL~~"}
1	+ {"version":3,"file":"timeline.js","sources":["../../src/timeline/timeline.tsx"],"sourcesContent":["import { ExclamationCircleFillIcon, TickIcon } from \"@lifesg/react-icons\";\nimport clsx from \"clsx\";\nimport { useRef } from \"react\";\n\nimport type { PillProps } from \"../pill\";\nimport { Pill } from \"../pill\";\nimport { VisuallyHidden } from \"../shared/accessibility\";\nimport { useApplyStyle } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport * as styles from \"./timeline.styles\";\nimport type { TimelineItemProps, TimelineProps, Variant } from \"./types\";\n\nexport const Timeline = ({\n items,\n className,\n id,\n title,\n startCol,\n colSpan,\n \"data-base-indicator-testid\": baseIndicatorTestId,\n \"data-testid\": testId = \"timeline\",\n headingLevel = 2,\n counterOffset = 0,\n}: TimelineProps): JSX.Element => {\n const wrapperRef = useRef<HTMLDivElement>(null);\n\n useApplyStyle(wrapperRef, {\n [styles.tokens.wrapper.startCol]: startCol,\n [styles.tokens.wrapper.colSpan]: colSpan,\n });\n\n // ===========================================================================\n // RENDER\n // ===========================================================================\n const renderContent = (content: string \| JSX.Element): JSX.Element => {\n if (typeof content === \"string\") {\n return (\n <Typography.BodyMD className=\"timeline-item-content-text\">\n {content}\n </Typography.BodyMD>\n );\n }\n\n return <>{content}</>;\n };\n\n const renderTitle = (\n title: string \| JSX.Element,\n level: number\n ): JSX.Element => {\n if (typeof title === \"string\") {\n return (\n <Typography.HeadingXS\n as=\"h3\"\n aria-level={level}\n weight=\"semibold\"\n className={clsx(\n styles.timelineItemTitle,\n \"timeline-item-title\"\n )}\n >\n {title}\n </Typography.HeadingXS>\n );\n }\n\n return <>{title}</>;\n };\n\n const renderStatusPills = (statuses: PillProps[]): JSX.Element[] => {\n // maximum 2 pills allowed\n const renderableStatuses = statuses.slice(0, 2);\n return renderableStatuses.map((status: PillProps, index) => {\n return (\n <Pill\n {...status}\n type={status.type}\n key={`status-pill-${index}`}\n data-testid=\"status-pill\"\n className=\"timeline-status-pill\"\n >\n {status.children}\n </Pill>\n );\n });\n };\n\n const renderIcon = (variant: Variant, index: number) => {\n switch (variant) {\n case \"completed\":\n return <TickIcon aria-hidden />;\n case \"error\":\n return <ExclamationCircleFillIcon aria-hidden />;\n case \"numeric\":\n return <span aria-hidden>{index + 1 + counterOffset}</span>;\n default:\n return null;\n }\n };\n\n const getStatus = (variant: Variant, index: number) => {\n switch (variant) {\n case \"current\":\n return \"Current step\";\n case \"completed\":\n return \"Completed step\";\n case \"upcoming-active\":\n return \"Upcoming active step\";\n case \"upcoming-inactive\":\n return \"Upcoming inactive step\";\n case \"disabled\":\n return \"Inactive step\";\n case \"error\":\n return \"Current step, action required\";\n case \"numeric\":\n return `Step number ${index + 1 + counterOffset}`;\n default:\n return \"\";\n }\n };\n\n const renderItems = () =>\n items.map((item: TimelineItemProps, index) => {\n const { title, content, statuses, variant: _variant } = item;\n const circleIndicatorTestId = baseIndicatorTestId\n ? `circleindicator${index + 1}_div_${baseIndicatorTestId}`\n : \"circleindicator\";\n const variant =\n _variant \|\| (index === 0 ? \"current\" : \"upcoming-active\");\n\n return (\n <div\n key={`timeline-item-${index}`}\n role=\"listitem\"\n className={styles.timelineItem}\n >\n <div className={styles.timelineIndicators}>\n <div\n data-testid={circleIndicatorTestId}\n className={styles.circleIndicator}\n data-variant={variant}\n >\n <VisuallyHidden>\n {getStatus(variant, index)}\n </VisuallyHidden>\n {renderIcon(variant, index)}\n </div>\n <div\n className={styles.lineIndicator}\n data-variant={variant}\n />\n </div>\n <div\n className={clsx(\n styles.timelineItemContent,\n \"timeline-item-content\"\n )}\n >\n {renderTitle(title, headingLevel + 1)}\n {statuses && (\n <div className={styles.timelinePills}>\n {renderStatusPills(statuses)}\n </div>\n )}\n {renderContent(content)}\n </div>\n </div>\n );\n });\n\n return (\n <div\n ref={wrapperRef}\n className={clsx(styles.timelineWrapper, className)}\n id={id}\n data-testid={testId}\n >\n <Typography.HeadingSM\n as=\"h2\"\n aria-level={headingLevel}\n data-testid=\"timeline-title\"\n weight=\"bold\"\n className={styles.timelineTitle}\n >\n {title}\n </Typography.HeadingSM>\n <div role=\"list\">{renderItems()}</div>\n </div>\n );\n};\n"],"names":["Timeline","items","className","id","title","startCol","colSpan","baseIndicatorTestId","testId","headingLevel","counterOffset","wrapperRef","useRef","useApplyStyle","styles.tokens","wrapper","renderContent","content","_jsx","Typography","BodyMD","children","_Fragment","renderTitle","level","HeadingXS","as","weight","clsx","styles.timelineItemTitle","renderStatusPills","statuses","slice","map","status","index","_createElement","Pill","Object","assign","type","key","renderIcon","variant","TickIcon","ExclamationCircleFillIcon","getStatus","_jsxs","ref","styles.timelineWrapper","HeadingSM","styles.timelineTitle","role","item","_variant","styles.timelineItem","styles.timelineIndicators","styles.circleIndicator","VisuallyHidden","styles.lineIndicator","styles.timelineItemContent","styles.timelinePills"],"mappings":"w6BAYO,MAAMA,EAAW,EACpBC,QACAC,YACAC,KACAC,QACAC,WACAC,UACA,6BAA8BC,EAC9B,cAAeC,EAAS,WACxBC,eAAe,EACfC,gBAAgB,MAEhB,MAAMC,EAAaC,EAAuB,MAE1CC,EAAcF,EAAY,CACtB,CAACG,EAAcC,QAAQV,UAAWA,EAClC,CAACS,EAAcC,QAAQT,SAAUA,IAMrC,MAAMU,EAAiBC,GACI,iBAAZA,EAEHC,EAACC,EAAWC,OAAM,CAAClB,UAAU,6BAA4BmB,SACpDJ,IAKNC,EAAAI,EAAA,CAAAD,SAAGJ,IAGRM,EAAc,CAChBnB,EACAoB,IAEqB,iBAAVpB,EAEHc,EAACC,EAAWM,UAAS,CACjBC,GAAG,KAAI,aACKF,EACZG,OAAO,WACPzB,UAAW0B,EACPC,EACA,uBACHR,SAEAjB,IAKNc,EAAAI,EAAA,CAAAD,SAAGjB,IAGR0B,EAAqBC,GAEIA,EAASC,MAAM,EAAG,GACnBC,KAAI,CAACC,EAAmBC,IAE1CC,EAACC,EAAIC,OAAAC,OAAA,GACGL,EAAM,CACVM,KAAMN,EAAOM,KACbC,IAAK,eAAeN,IAAO,cACf,cACZjC,UAAU,yBAETgC,EAAOb,YAMlBqB,EAAa,CAACC,EAAkBR,KAClC,OAAQQ,GACJ,IAAK,YACD,OAAOzB,EAAC0B,EAAQ,CAAA,eAAA,IACpB,IAAK,QACD,OAAO1B,EAAC2B,EAAyB,CAAA,eAAA,IACrC,IAAK,UACD,OAAO3B,oCAAmBiB,EAAQ,EAAIzB,IAC1C,QACI,OAAO,OAIboC,EAAY,CAACH,EAAkBR,KACjC,OAAQQ,GACJ,IAAK,UACD,MAAO,eACX,IAAK,YACD,MAAO,iBACX,IAAK,kBACD,MAAO,uBACX,IAAK,oBACD,MAAO,yBACX,IAAK,WACD,MAAO,gBACX,IAAK,QACD,MAAO,gCACX,IAAK,UACD,MAAO,eAAeR,EAAQ,EAAIzB,IACtC,QACI,MAAO,KAqDnB,OACIqC,EAAA,MAAA,CACIC,IAAKrC,EACLT,UAAW0B,EAAKqB,EAAwB/C,GACxCC,GAAIA,EAAE,cACOK,EAAMa,SAAA,CAEnBH,EAACC,EAAW+B,UAAS,CACjBxB,GAAG,KAAI,aACKjB,EAAY,cACZ,iBACZkB,OAAO,OACPzB,UAAWiD,EAAoB9B,SAE9BjB,IAELc,EAAA,MAAA,CAAKkC,KAAK,OAAM/B,SAhEpBpB,EAAMgC,KAAI,CAACoB,EAAyBlB,KAChC,MAAM/B,MAAEA,EAAKa,QAAEA,EAAOc,SAAEA,EAAUY,QAASW,GAAaD,EAIlDV,EACFW,IAAuB,IAAVnB,EAAc,UAAY,mBAE3C,OACIY,EAAA,MAAA,CAEIK,KAAK,WACLlD,UAAWqD,EAAmBlC,SAAA,CAE9B0B,SAAK7C,UAAWsD,EAAyBnC,SAAA,CACrC0B,uBAbkBxC,EACxB,kBAAkB4B,EAAQ,SAAS5B,IACnC,kBAaUL,UAAWuD,EAAsB,eACnBd,EAAOtB,SAAA,CAErBH,EAACwC,EAAc,CAAArC,SACVyB,EAAUH,EAASR,KAEvBO,EAAWC,EAASR,MAEzBjB,EAAA,MAAA,CACIhB,UAAWyD,EAAoB,eACjBhB,OAGtBI,EAAA,MAAA,CACI7C,UAAW0B,EACPgC,EACA,yBACHvC,SAAA,CAEAE,EAAYnB,EAAOK,EAAe,GAClCsB,GACGb,EAAA,MAAA,CAAKhB,UAAW2D,EAAoBxC,SAC/BS,EAAkBC,KAG1Bf,EAAcC,QAhCd,iBAAiBkB,IAkCpB,QAqBR"}

package/timeline/timeline.styles.d.ts ADDED Viewed

@@ -0,0 +1,15 @@
+export declare const tokens: {
+    readonly wrapper: {
+        readonly startCol: "--fds-internal-timeline-wrapper-startCol";
+        readonly colSpan: "--fds-internal-timeline-wrapper-colSpan";
+    };
+};
+export declare const circleIndicator: import("@linaria/core").LinariaClassName;
+export declare const lineIndicator: import("@linaria/core").LinariaClassName;
+export declare const timelineIndicators: import("@linaria/core").LinariaClassName;
+export declare const timelineWrapper: import("@linaria/core").LinariaClassName;
+export declare const timelineTitle: import("@linaria/core").LinariaClassName;
+export declare const timelineItemTitle: import("@linaria/core").LinariaClassName;
+export declare const timelineItem: import("@linaria/core").LinariaClassName;
+export declare const timelineItemContent: import("@linaria/core").LinariaClassName;
+export declare const timelinePills: import("@linaria/core").LinariaClassName;

package/timeline/timeline.styles.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import"./timeline.styles_1jxzik4.css";const t={wrapper:{startCol:"--fds-internal-timeline-wrapper-startCol",colSpan:"--fds-internal-timeline-wrapper-colSpan"}},e="c1epf9wu",p="l1ff2pyq",l="t1qzwom7",a="tuaspcp",i="tfsmff8",r="t1qpo82v",n="t1d2q33u",s="tvlbvjk",f="t1afag3x";export{e as circleIndicator,p as lineIndicator,l as timelineIndicators,n as timelineItem,s as timelineItemContent,r as timelineItemTitle,f as timelinePills,i as timelineTitle,a as timelineWrapper,t as tokens};
2	+ //# sourceMappingURL=timeline.styles.js.map

package/timeline/timeline.styles.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"timeline.styles.js","sources":["../../src/timeline/timeline.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font, MediaQuery, Radius } from \"../theme\";\n\n// =============================================================================\n// TOKENS\n// =============================================================================\nexport const tokens = {\n wrapper: {\n startCol: \"--fds-internal-timeline-wrapper-startCol\",\n colSpan: \"--fds-internal-timeline-wrapper-colSpan\",\n },\n} as const;\n\nexport const circleIndicator = css`\n display: flex;\n justify-content: center;\n align-items: center;\n width: 1.5rem;\n height: 1.5rem;\n border-radius: 100%;\n\n &[data-variant=\"current\"] {\n background-color: ${Colour[\"icon-primary-subtle\"]};\n }\n\n &[data-variant=\"upcoming-active\"] {\n border: 4px solid ${Colour[\"icon-primary-subtle\"]};\n }\n\n &[data-variant=\"upcoming-inactive\"] {\n border: 4px solid ${Colour[\"icon-subtle\"]};\n }\n\n &[data-variant=\"disabled\"] {\n background-color: ${Colour[\"icon-disabled-subtle\"]};\n }\n\n &[data-variant=\"completed\"] {\n background-color: ${Colour[\"icon-success\"]};\n\n svg {\n color: ${Colour[\"icon-inverse\"]};\n }\n }\n\n &[data-variant=\"numeric\"] {\n background-color: ${Colour[\"icon-info\"]};\n color: ${Colour[\"text-inverse\"]};\n ${Font[\"body-sm-bold\"]}\n }\n\n &[data-variant=\"error\"] {\n width: 1.8rem;\n height: 1.8rem;\n margin: -0.15rem 0 -0.15rem -0.15rem;\n\n svg {\n color: ${Colour[\"icon-error\"]};\n height: 100%;\n width: 100%;\n }\n }\n`;\n\nexport const lineIndicator = css`\n width: 4px;\n flex-grow: 1;\n margin-top: 0.5rem;\n margin-bottom: 0.5rem;\n border-radius: ${Radius[\"full\"]};\n\n &[data-variant=\"completed\"] {\n background-color: ${Colour[\"icon-success\"]};\n }\n\n &[data-variant=\"current\"],\n &[data-variant=\"upcoming-active\"] {\n background-color: ${Colour[\"icon-primary-subtle\"]};\n }\n\n &[data-variant=\"upcoming-inactive\"] {\n background-color: ${Colour[\"icon-subtle\"]};\n }\n\n &[data-variant=\"disabled\"] {\n background-color: ${Colour[\"icon-disabled-subtle\"]};\n }\n\n &[data-variant=\"numeric\"] {\n background-color: ${Colour[\"icon-info\"]};\n }\n\n &[data-variant=\"error\"] {\n margin-left: -0.15rem;\n background-color: ${Colour[\"icon-error\"]};\n }\n`;\n\nexport const timelineIndicators = css`\n display: flex;\n flex-direction: column;\n align-items: center;\n margin-right: 1rem;\n`;\n\nexport const timelineWrapper = css`\n ${tokens.wrapper.startCol}: initial;\n ${tokens.wrapper.colSpan}: initial;\n grid-column: var(${tokens.wrapper.startCol}, 3) / span\n var(${tokens.wrapper.colSpan}, 8);\n\n ${MediaQuery.MaxWidth.lg} {\n grid-column: span 8;\n }\n\n ${MediaQuery.MaxWidth.sm} {\n grid-column: span 8;\n }\n`;\n\nexport const timelineTitle = css`\n margin-bottom: 1rem;\n\n ${MediaQuery.MaxWidth.lg} {\n margin-bottom: 1.5rem;\n }\n`;\n\nexport const timelineItemTitle = css`\n margin-top: -0.125rem;\n margin-bottom: 0.5rem;\n`;\n\n// default is 2-8-2 on desktop\nexport const timelineItem = css`\n display: flex;\n\n &:last-of-type .${lineIndicator} {\n margin-bottom: 0;\n }\n`;\n\nexport const timelineItemContent = css`\n margin-bottom: 2rem;\n width: 100%;\n`;\n\nexport const timelinePills = css`\n display: flex;\n flex-wrap: wrap;\n margin-bottom: 0.5rem;\n gap: 0.5rem;\n`;\n"],"names":["tokens","wrapper","startCol","colSpan","circleIndicator","lineIndicator","timelineIndicators","timelineWrapper","timelineTitle","timelineItemTitle","timelineItem","timelineItemContent","timelinePills"],"mappings":"8DAOO,MAAMA,EAAS,CAClBC,QAAS,CACLC,SAAU,2CACVC,QAAS,4CAIJC,EAAe,WAmDfC,EAAa,WAkCbC,EAAkB,WAOlBC,EAAe,UAefC,EAAa,UAQbC,EAAiB,WAMjBC,EAAY,WAQZC,EAAmB,UAKnBC,EAAa"}

package/timeline/timeline.styles_1jxzik4.css ADDED Viewed

@@ -0,0 +1,9 @@
+.c1epf9wu{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:1.5rem;height:1.5rem;border-radius:100%;}.c1epf9wu[data-variant="current"]{background-color:var(--fds-colour-icon-primary-subtle);}.c1epf9wu[data-variant="upcoming-active"]{border:4px solid var(--fds-colour-icon-primary-subtle);}.c1epf9wu[data-variant="upcoming-inactive"]{border:4px solid var(--fds-colour-icon-subtle);}.c1epf9wu[data-variant="disabled"]{background-color:var(--fds-colour-icon-disabled-subtle);}.c1epf9wu[data-variant="completed"]{background-color:var(--fds-colour-icon-success);}.c1epf9wu[data-variant="completed"] svg{color:var(--fds-colour-icon-inverse);}.c1epf9wu[data-variant="numeric"]{background-color:var(--fds-colour-icon-info);color:var(--fds-colour-text-inverse);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-bold);line-height:var(--fds-font-body-lh-sm);letter-spacing:var(--fds-font-body-ls-sm);}.c1epf9wu[data-variant="error"]{width:1.8rem;height:1.8rem;margin:-0.15rem 0 -0.15rem -0.15rem;}.c1epf9wu[data-variant="error"] svg{color:var(--fds-colour-icon-error);height:100%;width:100%;}
+.l1ff2pyq{width:4px;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;margin-top:0.5rem;margin-bottom:0.5rem;border-radius:var(--fds-radius-full);}.l1ff2pyq[data-variant="completed"]{background-color:var(--fds-colour-icon-success);}.l1ff2pyq[data-variant="current"],.l1ff2pyq[data-variant="upcoming-active"]{background-color:var(--fds-colour-icon-primary-subtle);}.l1ff2pyq[data-variant="upcoming-inactive"]{background-color:var(--fds-colour-icon-subtle);}.l1ff2pyq[data-variant="disabled"]{background-color:var(--fds-colour-icon-disabled-subtle);}.l1ff2pyq[data-variant="numeric"]{background-color:var(--fds-colour-icon-info);}.l1ff2pyq[data-variant="error"]{margin-left:-0.15rem;background-color:var(--fds-colour-icon-error);}
+.t1qzwom7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-right:1rem;}
+.tuaspcp{--fds-internal-timeline-wrapper-startCol:initial;--fds-internal-timeline-wrapper-colSpan:initial;grid-column:var(--fds-internal-timeline-wrapper-startCol, 3)/span var(--fds-internal-timeline-wrapper-colSpan, 8);}:where(body.fds-breakpoint-lg-max) .tuaspcp{grid-column:span 8;}:where(body.fds-breakpoint-sm-max) .tuaspcp{grid-column:span 8;}
+.tfsmff8{margin-bottom:1rem;}:where(body.fds-breakpoint-lg-max) .tfsmff8{margin-bottom:1.5rem;}
+.t1qpo82v{margin-top:-0.125rem;margin-bottom:0.5rem;}
+.t1d2q33u{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}.t1d2q33u:last-of-type .l1ff2pyq{margin-bottom:0;}
+.tvlbvjk{margin-bottom:2rem;width:100%;}
+.t1afag3x{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-bottom:0.5rem;gap:0.5rem;}

package/timepicker/timepicker.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{__rest as e}from"../_virtual/_tslib.js";import{jsx as r}from"react/jsx-runtime";import{useState as o,useRef as a,useCallback as l}from"react";import{ElementWithDropdown as n}from"../shared/dropdown-wrapper/element-with-dropdown.js";import{InputWrapper as i,BasicInput as d}from"../shared/input-wrapper/input-wrapper.js";import{TimepickerDropdown as t}from"../shared/timepicker-dropdown/timepicker-dropdown.js";import{TimeHelper as s}from"../util/time-helper.js";import{inputSelectorElement as p}from"./timepicker.styles.js";const m=m=>{var{id:c,disabled:u=!1,readOnly:b=!1,error:f,value:y,placeholder:v,format:w="24hr",onChange:h,onFocus:g,onBlur:k,alignment:j,dropdownZIndex:O,dropdownRootNode:x,className:N,"aria-labelledby":C,"aria-describedby":D}=m,F=e(m,["id","disabled","readOnly","error","value","placeholder","format","onChange","onFocus","onBlur","alignment","dropdownZIndex","dropdownRootNode","className","aria-labelledby","aria-describedby"]);const[H,M]=o(!1),B=a(null),I=a(null),R=l((()=>"12hr"===w?"HH:MMam":"HH:MM"),[w]),Z=()=>{var e;null===(e=I.current)||void 0===e||e.focus({preventScroll:!0})},E=()=>{u||b||M(!0)},T=()=>{M(!1),Z()},_=e=>{null==h||h(e),M(!1),Z()},A=()=>{null==g||g()},K=e=>{var r;if(H)return;const o=e.relatedTarget;o&&(null===(r=B.current)||void 0===r?void 0:r.contains(o))||null==k||k()},P=e=>{u||b||"Enter"!==e.key&&" "!==e.key&&"ArrowDown"!==e.key||(e.preventDefault(),E())};return r(n,{enabled:!b&&!u,isOpen:H,renderElement:()=>r(i,Object.assign({ref:B,role:"group",readOnly:b,disabled:u,focused:H,error:f,className:N},F,{children:r(d,{ref:I,readOnly:!0,placeholder:v||R(),value:s.formatDisplayValue(y,w),role:"combobox","aria-invalid":f||void 0,"aria-disabled":u||void 0,"aria-readonly":b||void 0,"aria-labelledby":C,"aria-describedby":D,"aria-expanded":!u&&!b&&H,"data-testid":c?`${c}-timepicker-selector`:"timepicker-selector",className:p,onFocus:A,onClick:E,onKeyDown:P,onBlur:K})})),renderDropdown:({styles:e,setFloatingRef:o,getFloatingProps:a})=>r("div",Object.assign({ref:o,style:e,role:"dialog","aria-label":"Time picker"},a(),{children:r(t,{id:c,show:H,value:y,format:w,onCancel:T,onChange:_})})),onOpen:E,onClose:()=>{M(!1),null==k||k()},onDismiss:T,offset:8,alignment:j,customZIndex:O,rootNode:x})};export{m as Timepicker};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsx as r}from"react/jsx-runtime";import{useState as o,useRef as a,useCallback as l}from"react";import{ElementWithDropdown as n}from"../shared/dropdown-wrapper/element-with-dropdown.js";import{InputWrapper as i,BasicInput as d}from"../shared/input-wrapper/input-wrapper.js";import{TimepickerDropdown as t}from"../shared/timepicker-dropdown/timepicker-dropdown.js";import{TimeHelper as s}from"../util/time-helper.js";import{inputSelectorElement as p}from"./timepicker.styles.js";const m=m=>{var{id:c,disabled:u=!1,readOnly:b=!1,error:f,value:y,placeholder:v,format:w="24hr",onChange:h,onFocus:g,onBlur:k,alignment:j,dropdownZIndex:O,dropdownRootNode:x,className:N,"aria-labelledby":C,"aria-describedby":D}=m,F=e(m,["id","disabled","readOnly","error","value","placeholder","format","onChange","onFocus","onBlur","alignment","dropdownZIndex","dropdownRootNode","className","aria-labelledby","aria-describedby"]);const[H,M]=o(!1),B=a(null),I=a(null),R=l((()=>"12hr"===w?"HH:MMam":"HH:MM"),[w]),Z=()=>{var e;null===(e=I.current)||void 0===e||e.focus({preventScroll:!0})},E=()=>{u||b||M(!0)},T=()=>{M(!1),Z()},_=e=>{null==h||h(e),M(!1),Z()},A=()=>{u||null==g||g()},K=e=>{var r;if(H||u)return;const o=e.relatedTarget;o&&(null===(r=B.current)||void 0===r?void 0:r.contains(o))||null==k||k()},P=e=>{u||b||"Enter"!==e.key&&" "!==e.key&&"ArrowDown"!==e.key||(e.preventDefault(),E())};return r(n,{enabled:!b&&!u,isOpen:H,renderElement:()=>r(i,Object.assign({ref:B,role:"group",readOnly:b,disabled:u,focused:H,error:f,className:N},F,{children:r(d,{ref:I,readOnly:!0,placeholder:v||R(),value:s.formatDisplayValue(y,w),role:"combobox","aria-invalid":f||void 0,"aria-disabled":u||void 0,"aria-readonly":b||void 0,"aria-labelledby":C,"aria-describedby":D,"aria-expanded":!u&&!b&&H,"data-testid":c?`${c}-timepicker-selector`:"timepicker-selector",className:p,onFocus:A,onClick:E,onKeyDown:P,onBlur:K})})),renderDropdown:({styles:e,setFloatingRef:o,getFloatingProps:a})=>r("div",Object.assign({ref:o,style:e,role:"dialog","aria-label":"Time picker"},a(),{children:r(t,{id:c,show:H,value:y,format:w,onCancel:T,onChange:_})})),onOpen:E,onClose:()=>{M(!1),null==k||k()},onDismiss:T,offset:8,alignment:j,customZIndex:O,rootNode:x})};export{m as Timepicker};
 //# sourceMappingURL=timepicker.js.map

package/timepicker/timepicker.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"timepicker.js","sources":["../../src/timepicker/timepicker.tsx"],"sourcesContent":["import { useCallback, useRef, useState } from \"react\";\n\nimport type { DropdownRenderProps } from \"../shared/dropdown-wrapper\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport { BasicInput, InputWrapper } from \"../shared/input-wrapper\";\nimport { TimepickerDropdown } from \"../shared/timepicker-dropdown/timepicker-dropdown\";\nimport { TimeHelper } from \"../util/time-helper\";\nimport * as styles from \"./timepicker.styles\";\nimport type { TimepickerProps } from \"./types\";\n\nexport const Timepicker = ({\n id,\n disabled = false,\n readOnly = false,\n error,\n value,\n placeholder,\n format = \"24hr\",\n onChange,\n onFocus,\n onBlur,\n alignment,\n dropdownZIndex,\n dropdownRootNode,\n className,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-describedby\": ariaDescribedBy,\n ...otherProps\n}: TimepickerProps) => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const [isOpen, setIsOpen] = useState(false);\n const wrapperRef = useRef<HTMLDivElement>(null);\n const selectorRef = useRef<HTMLInputElement>(null);\n\n // =============================================================================\n // HELPER FUNCTIONS\n // =============================================================================\n const getPlaceholderValue = useCallback(() => {\n switch (format) {\n case \"12hr\":\n return \"HH:MMam\";\n case \"24hr\":\n default:\n return \"HH:MM\";\n }\n }, [format]);\n\n const restoreFocusToSelector = () => {\n selectorRef.current?.focus({ preventScroll: true });\n };\n\n // =============================================================================\n // EVENT LISTENERS\n // =============================================================================\n const handleOpen = () => {\n if (disabled \|\| readOnly) return;\n setIsOpen(true);\n };\n\n const handleClose = () => {\n setIsOpen(false);\n onBlur?.();\n };\n\n const handleDismiss = () => {\n setIsOpen(false);\n restoreFocusToSelector();\n };\n\n const handleChange = (v: string) => {\n onChange?.(v);\n setIsOpen(false);\n restoreFocusToSelector();\n };\n\n const handleFocus = () => {\n onFocus?.();\n };\n\n const handleSelectorBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n if (isOpen) return;\n\n const next = e.relatedTarget as Node \| null;\n if (next && wrapperRef.current?.contains(next)) return;\n\n onBlur?.();\n };\n\n const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n if (disabled \|\| readOnly) {\n return;\n }\n\n if (e.key === \"Enter\" \|\| e.key === \" \" \|\| e.key === \"ArrowDown\") {\n e.preventDefault();\n handleOpen();\n }\n };\n\n // =============================================================================\n // RENDER\n // =============================================================================\n const renderElement = () => (\n <InputWrapper\n ref={wrapperRef}\n role=\"group\"\n readOnly={readOnly}\n disabled={disabled}\n focused={isOpen}\n error={error}\n className={className}\n {...otherProps}\n >\n <BasicInput\n ref={selectorRef}\n readOnly\n placeholder={placeholder \|\| getPlaceholderValue()}\n value={TimeHelper.formatDisplayValue(value, format)}\n role=\"combobox\"\n aria-invalid={error \|\| undefined}\n aria-disabled={disabled \|\| undefined}\n aria-readonly={readOnly \|\| undefined}\n aria-labelledby={ariaLabelledBy}\n aria-describedby={ariaDescribedBy}\n aria-expanded={!disabled && !readOnly ? isOpen : false}\n data-testid={\n id ? `${id}-timepicker-selector` : \"timepicker-selector\"\n }\n className={styles.inputSelectorElement}\n onFocus={handleFocus}\n onClick={handleOpen}\n onKeyDown={handleKeyDown}\n onBlur={handleSelectorBlur}\n />\n </InputWrapper>\n );\n\n const renderDropdown = ({\n styles,\n setFloatingRef,\n getFloatingProps,\n }: DropdownRenderProps) => (\n <div\n ref={setFloatingRef}\n style={styles}\n role=\"dialog\"\n aria-label=\"Time picker\"\n {...getFloatingProps()}\n >\n <TimepickerDropdown\n id={id}\n show={isOpen}\n value={value}\n format={format}\n onCancel={handleDismiss}\n onChange={handleChange}\n />\n </div>\n );\n\n return (\n <ElementWithDropdown\n enabled={!readOnly && !disabled}\n isOpen={isOpen}\n renderElement={renderElement}\n renderDropdown={renderDropdown}\n onOpen={handleOpen}\n onClose={handleClose}\n onDismiss={handleDismiss}\n offset={8}\n alignment={alignment}\n customZIndex={dropdownZIndex}\n rootNode={dropdownRootNode}\n />\n );\n};\n"],"names":["Timepicker","_a","id","disabled","readOnly","error","value","placeholder","format","onChange","onFocus","onBlur","alignment","dropdownZIndex","dropdownRootNode","className","ariaLabelledBy","ariaDescribedBy","otherProps","__rest","isOpen","setIsOpen","useState","wrapperRef","useRef","selectorRef","getPlaceholderValue","useCallback","restoreFocusToSelector","current","focus","preventScroll","handleOpen","handleDismiss","handleChange","v","handleFocus","handleSelectorBlur","e","next","relatedTarget","contains","handleKeyDown","key","preventDefault","_jsx","ElementWithDropdown","enabled","renderElement","InputWrapper","Object","assign","ref","role","focused","children","BasicInput","TimeHelper","formatDisplayValue","undefined","styles.inputSelectorElement","onClick","onKeyDown","renderDropdown","styles","setFloatingRef","getFloatingProps","style","TimepickerDropdown","show","onCancel","onOpen","onClose","onDismiss","offset","customZIndex","rootNode"],"mappings":"mhBAUO,MAAMA,EAAcC,QAAAC,GACvBA,EAAEC,SACFA,GAAW,EAAKC,SAChBA,GAAW,EAAKC,MAChBA,EAAKC,MACLA,EAAKC,YACLA,EAAWC,OACXA,EAAS,OAAMC,SACfA,EAAQC,QACRA,EAAOC,OACPA,EAAMC,UACNA,EAASC,eACTA,EAAcC,iBACdA,EAAgBC,UAChBA,EACA,kBAAmBC,EACnB,mBAAoBC,KACjBC,EAAUC,EAAAlB,EAjBU,CAAA,KAAA,WAAA,WAAA,QAAA,QAAA,cAAA,SAAA,WAAA,UAAA,SAAA,YAAA,iBAAA,mBAAA,YAAA,kBAAA,qBAsBvB,MAAOmB,EAAQC,GAAaC,GAAS,GAC/BC,EAAaC,EAAuB,MACpCC,EAAcD,EAAyB,MAKvCE,EAAsBC,GAAY,IAE3B,SADDnB,EAEO,UAGA,SAEhB,CAACA,IAEEoB,EAAyB,WACR,QAAnB3B,EAAAwB,EAAYI,eAAO,IAAA5B,GAAAA,EAAE6B,MAAM,CAAEC,eAAe,GAAO,EAMjDC,EAAa,KACX7B,GAAYC,GAChBiB,GAAU,EAAK,EAQbY,EAAgB,KAClBZ,GAAU,GACVO,GAAwB,EAGtBM,EAAgBC,IAClB1B,SAAAA,EAAW0B,GACXd,GAAU,GACVO,GAAwB,EAGtBQ,EAAc,~~KAChB1B~~,SAAAA,GAAW,EAGT2B,EAAsBC,UACxB,GAAIlB,~~EAAQ~~,~~OAEZ~~,~~MAAMmB~~,EAAOD,EAAEE,cACXD,IAA0B,QAAlBtC,EAAAsB,EAAWM,eAAO,IAAA5B,OAAA,EAAAA,EAAEwC,SAASF,KAEzC5B,SAAAA,GAAU,EAGR+B,EAAiBJ,IACfnC,GAAYC,GAIF,UAAVkC,EAAEK,KAA6B,MAAVL,EAAEK,KAAyB,cAAVL,EAAEK,MACxCL,EAAEM,iBACFZ,IACJ,EAgEJ,OACIa,EAACC,EAAmB,CAChBC,SAAU3C,IAAaD,EACvBiB,OAAQA,EACR4B,cA9Dc,IAClBH,EAACI,EAAYC,OAAAC,OAAA,CACTC,IAAK7B,EACL8B,KAAK,QACLjD,SAAUA,EACVD,SAAUA,EACVmD,QAASlC,EACTf,MAAOA,EACPU,UAAWA,GACPG,EAAU,CAAAqC,SAEdV,EAACW,EAAU,CACPJ,IAAK3B,EACLrB,YACAG,YAAaA,GAAemB,IAC5BpB,MAAOmD,EAAWC,mBAAmBpD,EAAOE,GAC5C6C,KAAK,WAAU,eACDhD,QAASsD,EAAS,gBACjBxD,QAAYwD,EAAS,gBACrBvD,QAAYuD,EAAS,kBACnB3C,EAAc,mBACbC,EAAe,iBACjBd,IAAaC,GAAWgB,EAAc,cAElDlB,EAAK,GAAGA,wBAA2B,sBAEvCa,UAAW6C,EACXlD,QAAS0B,EACTyB,QAAS7B,EACT8B,UAAWpB,EACX/B,OAAQ0B,OAiCZ0B,eA5Be,EACnBC,SACAC,iBACAC,sBAEArB,EAAA,MAAAK,OAAAC,OAAA,CACIC,IAAKa,EACLE,MAAOH,EACPX,KAAK,SAAQ,aACF,eACPa,IAAkB,CAAAX,SAEtBV,EAACuB,EAAkB,CACflE,GAAIA,EACJmE,KAAMjD,EACNd,MAAOA,EACPE,OAAQA,EACR8D,SAAUrC,EACVxB,SAAUyB,OAWdqC,OAAQvC,EACRwC,~~QA5GY~~,KAChBnD,GAAU,GACVV,SAAAA,GAAU,~~EA2GN8D~~,UAAWxC,EACXyC,OAAQ,EACR9D,UAAWA,EACX+D,aAAc9D,EACd+D,SAAU9D,GACZ"}
1	+ {"version":3,"file":"timepicker.js","sources":["../../src/timepicker/timepicker.tsx"],"sourcesContent":["import { useCallback, useRef, useState } from \"react\";\n\nimport type { DropdownRenderProps } from \"../shared/dropdown-wrapper\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport { BasicInput, InputWrapper } from \"../shared/input-wrapper\";\nimport { TimepickerDropdown } from \"../shared/timepicker-dropdown/timepicker-dropdown\";\nimport { TimeHelper } from \"../util/time-helper\";\nimport * as styles from \"./timepicker.styles\";\nimport type { TimepickerProps } from \"./types\";\n\nexport const Timepicker = ({\n id,\n disabled = false,\n readOnly = false,\n error,\n value,\n placeholder,\n format = \"24hr\",\n onChange,\n onFocus,\n onBlur,\n alignment,\n dropdownZIndex,\n dropdownRootNode,\n className,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-describedby\": ariaDescribedBy,\n ...otherProps\n}: TimepickerProps) => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const [isOpen, setIsOpen] = useState(false);\n const wrapperRef = useRef<HTMLDivElement>(null);\n const selectorRef = useRef<HTMLInputElement>(null);\n\n // =============================================================================\n // HELPER FUNCTIONS\n // =============================================================================\n const getPlaceholderValue = useCallback(() => {\n switch (format) {\n case \"12hr\":\n return \"HH:MMam\";\n case \"24hr\":\n default:\n return \"HH:MM\";\n }\n }, [format]);\n\n const restoreFocusToSelector = () => {\n selectorRef.current?.focus({ preventScroll: true });\n };\n\n // =============================================================================\n // EVENT LISTENERS\n // =============================================================================\n const handleOpen = () => {\n if (disabled \|\| readOnly) return;\n setIsOpen(true);\n };\n\n const handleClose = () => {\n setIsOpen(false);\n onBlur?.();\n };\n\n const handleDismiss = () => {\n setIsOpen(false);\n restoreFocusToSelector();\n };\n\n const handleChange = (v: string) => {\n onChange?.(v);\n setIsOpen(false);\n restoreFocusToSelector();\n };\n\n const handleFocus = () => {\n if (disabled) return;\n onFocus?.();\n };\n\n const handleSelectorBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n if (isOpen \|\| disabled) return;\n\n const next = e.relatedTarget as Node \| null;\n if (next && wrapperRef.current?.contains(next)) return;\n\n onBlur?.();\n };\n\n const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n if (disabled \|\| readOnly) {\n return;\n }\n\n if (e.key === \"Enter\" \|\| e.key === \" \" \|\| e.key === \"ArrowDown\") {\n e.preventDefault();\n handleOpen();\n }\n };\n\n // =============================================================================\n // RENDER\n // =============================================================================\n const renderElement = () => (\n <InputWrapper\n ref={wrapperRef}\n role=\"group\"\n readOnly={readOnly}\n disabled={disabled}\n focused={isOpen}\n error={error}\n className={className}\n {...otherProps}\n >\n <BasicInput\n ref={selectorRef}\n readOnly\n placeholder={placeholder \|\| getPlaceholderValue()}\n value={TimeHelper.formatDisplayValue(value, format)}\n role=\"combobox\"\n aria-invalid={error \|\| undefined}\n aria-disabled={disabled \|\| undefined}\n aria-readonly={readOnly \|\| undefined}\n aria-labelledby={ariaLabelledBy}\n aria-describedby={ariaDescribedBy}\n aria-expanded={!disabled && !readOnly ? isOpen : false}\n data-testid={\n id ? `${id}-timepicker-selector` : \"timepicker-selector\"\n }\n className={styles.inputSelectorElement}\n onFocus={handleFocus}\n onClick={handleOpen}\n onKeyDown={handleKeyDown}\n onBlur={handleSelectorBlur}\n />\n </InputWrapper>\n );\n\n const renderDropdown = ({\n styles,\n setFloatingRef,\n getFloatingProps,\n }: DropdownRenderProps) => (\n <div\n ref={setFloatingRef}\n style={styles}\n role=\"dialog\"\n aria-label=\"Time picker\"\n {...getFloatingProps()}\n >\n <TimepickerDropdown\n id={id}\n show={isOpen}\n value={value}\n format={format}\n onCancel={handleDismiss}\n onChange={handleChange}\n />\n </div>\n );\n\n return (\n <ElementWithDropdown\n enabled={!readOnly && !disabled}\n isOpen={isOpen}\n renderElement={renderElement}\n renderDropdown={renderDropdown}\n onOpen={handleOpen}\n onClose={handleClose}\n onDismiss={handleDismiss}\n offset={8}\n alignment={alignment}\n customZIndex={dropdownZIndex}\n rootNode={dropdownRootNode}\n />\n );\n};\n"],"names":["Timepicker","_a","id","disabled","readOnly","error","value","placeholder","format","onChange","onFocus","onBlur","alignment","dropdownZIndex","dropdownRootNode","className","ariaLabelledBy","ariaDescribedBy","otherProps","__rest","isOpen","setIsOpen","useState","wrapperRef","useRef","selectorRef","getPlaceholderValue","useCallback","restoreFocusToSelector","current","focus","preventScroll","handleOpen","handleDismiss","handleChange","v","handleFocus","handleSelectorBlur","e","next","relatedTarget","contains","handleKeyDown","key","preventDefault","_jsx","ElementWithDropdown","enabled","renderElement","InputWrapper","Object","assign","ref","role","focused","children","BasicInput","TimeHelper","formatDisplayValue","undefined","styles.inputSelectorElement","onClick","onKeyDown","renderDropdown","styles","setFloatingRef","getFloatingProps","style","TimepickerDropdown","show","onCancel","onOpen","onClose","onDismiss","offset","customZIndex","rootNode"],"mappings":"mhBAUO,MAAMA,EAAcC,QAAAC,GACvBA,EAAEC,SACFA,GAAW,EAAKC,SAChBA,GAAW,EAAKC,MAChBA,EAAKC,MACLA,EAAKC,YACLA,EAAWC,OACXA,EAAS,OAAMC,SACfA,EAAQC,QACRA,EAAOC,OACPA,EAAMC,UACNA,EAASC,eACTA,EAAcC,iBACdA,EAAgBC,UAChBA,EACA,kBAAmBC,EACnB,mBAAoBC,KACjBC,EAAUC,EAAAlB,EAjBU,CAAA,KAAA,WAAA,WAAA,QAAA,QAAA,cAAA,SAAA,WAAA,UAAA,SAAA,YAAA,iBAAA,mBAAA,YAAA,kBAAA,qBAsBvB,MAAOmB,EAAQC,GAAaC,GAAS,GAC/BC,EAAaC,EAAuB,MACpCC,EAAcD,EAAyB,MAKvCE,EAAsBC,GAAY,IAE3B,SADDnB,EAEO,UAGA,SAEhB,CAACA,IAEEoB,EAAyB,WACR,QAAnB3B,EAAAwB,EAAYI,eAAO,IAAA5B,GAAAA,EAAE6B,MAAM,CAAEC,eAAe,GAAO,EAMjDC,EAAa,KACX7B,GAAYC,GAChBiB,GAAU,EAAK,EAQbY,EAAgB,KAClBZ,GAAU,GACVO,GAAwB,EAGtBM,EAAgBC,IAClB1B,SAAAA,EAAW0B,GACXd,GAAU,GACVO,GAAwB,EAGtBQ,EAAc,KACZjC,GACJO,SAAAA,GAAW,EAGT2B,EAAsBC,UACxB,GAAIlB,GAAUjB,EAAU,OAExB,MAAMoC,EAAOD,EAAEE,cACXD,IAA0B,QAAlBtC,EAAAsB,EAAWM,eAAO,IAAA5B,OAAA,EAAAA,EAAEwC,SAASF,KAEzC5B,SAAAA,GAAU,EAGR+B,EAAiBJ,IACfnC,GAAYC,GAIF,UAAVkC,EAAEK,KAA6B,MAAVL,EAAEK,KAAyB,cAAVL,EAAEK,MACxCL,EAAEM,iBACFZ,IACJ,EAgEJ,OACIa,EAACC,EAAmB,CAChBC,SAAU3C,IAAaD,EACvBiB,OAAQA,EACR4B,cA9Dc,IAClBH,EAACI,EAAYC,OAAAC,OAAA,CACTC,IAAK7B,EACL8B,KAAK,QACLjD,SAAUA,EACVD,SAAUA,EACVmD,QAASlC,EACTf,MAAOA,EACPU,UAAWA,GACPG,EAAU,CAAAqC,SAEdV,EAACW,EAAU,CACPJ,IAAK3B,EACLrB,YACAG,YAAaA,GAAemB,IAC5BpB,MAAOmD,EAAWC,mBAAmBpD,EAAOE,GAC5C6C,KAAK,WAAU,eACDhD,QAASsD,EAAS,gBACjBxD,QAAYwD,EAAS,gBACrBvD,QAAYuD,EAAS,kBACnB3C,EAAc,mBACbC,EAAe,iBACjBd,IAAaC,GAAWgB,EAAc,cAElDlB,EAAK,GAAGA,wBAA2B,sBAEvCa,UAAW6C,EACXlD,QAAS0B,EACTyB,QAAS7B,EACT8B,UAAWpB,EACX/B,OAAQ0B,OAiCZ0B,eA5Be,EACnBC,SACAC,iBACAC,sBAEArB,EAAA,MAAAK,OAAAC,OAAA,CACIC,IAAKa,EACLE,MAAOH,EACPX,KAAK,SAAQ,aACF,eACPa,IAAkB,CAAAX,SAEtBV,EAACuB,EAAkB,CACflE,GAAIA,EACJmE,KAAMjD,EACNd,MAAOA,EACPE,OAAQA,EACR8D,SAAUrC,EACVxB,SAAUyB,OAWdqC,OAAQvC,EACRwC,QA7GY,KAChBnD,GAAU,GACVV,SAAAA,GAAU,EA4GN8D,UAAWxC,EACXyC,OAAQ,EACR9D,UAAWA,EACX+D,aAAc9D,EACd+D,SAAU9D,GACZ"}

package/timepicker/timepicker.styles.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import"./timepicker.styles_zmkhl8.css";const e="ixpxnsh";export{e as inputSelectorElement};
+import"./timepicker.styles_1jm33yw.css";const e="ixpxnsh";export{e as inputSelectorElement};
 //# sourceMappingURL=timepicker.styles.js.map

package/timepicker/timepicker.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"timepicker.styles.js","sources":["../../src/timepicker/timepicker.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const inputSelectorElement = css`\n height: calc(3rem - 2px); /* exclude top and bottom borders */\n`;\n"],"names":["inputSelectorElement"],"mappings":"~~iEAKO~~,MAAMA,EAAoB"}
1	+ {"version":3,"file":"timepicker.styles.js","sources":["../../src/timepicker/timepicker.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const inputSelectorElement = css`\n height: calc(3rem - 2px); /* exclude top and bottom borders */\n cursor: inherit;\n`;\n"],"names":["inputSelectorElement"],"mappings":"kEAKO,MAAMA,EAAoB"}

package/timepicker/timepicker.styles_1jm33yw.css ADDED Viewed

	@@ -0,0 +1 @@
1	+ .ixpxnsh{height:calc(3rem - 2px);cursor:inherit;}

package/timetable/const.js CHANGED Viewed

@@ -1,2 +1,2 @@
-const F=["#FFE6BB","#D8EFEB","#E6EAFE","#FAE4E5","#D3EEFC"],E=2,D=15,B=21,o=252,t=68,A=84,C=["#FFF2DD","#EBF7F5","#F2F4FE","#FCF1F2","#E9F6FD"];export{A as MIN_HOURLY_INTERVAL_WIDTH,B as MIN_INTERVAL_WIDTH,C as ROW_BAR_COLOR_ALTERNATE_COLOR,F as ROW_BAR_COLOR_SEQUENCE,E as ROW_CELL_GAP,o as ROW_HEADER_WIDTH,t as ROW_HEIGHT,D as ROW_INTERVAL};
+const F=["#FFE6BB","#D8EFEB","#E6EAFE","#FAE4E5","#D3EEFC"],E=2,D=15,B=21,o=252,t=["#FFF2DD","#EBF7F5","#F2F4FE","#FCF1F2","#E9F6FD"];export{B as MIN_INTERVAL_WIDTH,t as ROW_BAR_COLOR_ALTERNATE_COLOR,F as ROW_BAR_COLOR_SEQUENCE,E as ROW_CELL_GAP,o as ROW_HEADER_WIDTH,D as ROW_INTERVAL};
 //# sourceMappingURL=const.js.map

package/timetable/const.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"const.js","sources":["../../src/timetable/const.ts"],"sourcesContent":["export const ROW_BAR_COLOR_SEQUENCE = [\n \"#FFE6BB\",\n \"#D8EFEB\",\n \"#E6EAFE\",\n \"#FAE4E5\",\n \"#D3EEFC\",\n] as const; // Assert to be a readonly tuple\nexport type RowBarMainColors = (typeof ROW_BAR_COLOR_SEQUENCE)[number];\nexport const ROW_CELL_GAP = 2;\nexport const ROW_INTERVAL = 15;\nexport const MIN_INTERVAL_WIDTH = 21;\nexport const ROW_HEADER_WIDTH = 252;\nexport const ROW_HEIGHT = 68;\nexport const MIN_HOURLY_INTERVAL_WIDTH = 84;\nexport const ROW_BAR_COLOR_ALTERNATE_COLOR = [\n \"#FFF2DD\",\n \"#EBF7F5\",\n \"#F2F4FE\",\n \"#FCF1F2\",\n \"#E9F6FD\",\n] as const;\nexport type RowBarAlternateColors =\n (typeof ROW_BAR_COLOR_ALTERNATE_COLOR)[number];\n"],"names":["ROW_BAR_COLOR_SEQUENCE","ROW_CELL_GAP","ROW_INTERVAL","MIN_INTERVAL_WIDTH","ROW_HEADER_WIDTH","~~ROW_HEIGHT","MIN_HOURLY_INTERVAL_WIDTH","~~ROW_BAR_COLOR_ALTERNATE_COLOR"],"mappings":"AAAO,MAAMA,EAAyB,CAClC,UACA,UACA,UACA,UACA,WAGSC,EAAe,EACfC,EAAe,GACfC,EAAqB,GACrBC,EAAmB,~~IACnBC~~,~~EAAa,GACbC,EAA4B,GAC5BC,~~EAAgC,CACzC,UACA,UACA,UACA,UACA"}
1	+ {"version":3,"file":"const.js","sources":["../../src/timetable/const.ts"],"sourcesContent":["export const ROW_BAR_COLOR_SEQUENCE = [\n \"#FFE6BB\",\n \"#D8EFEB\",\n \"#E6EAFE\",\n \"#FAE4E5\",\n \"#D3EEFC\",\n] as const; // Assert to be a readonly tuple\nexport type RowBarMainColors = (typeof ROW_BAR_COLOR_SEQUENCE)[number];\nexport const ROW_CELL_GAP = 2;\nexport const ROW_INTERVAL = 15;\nexport const MIN_INTERVAL_WIDTH = 21;\nexport const ROW_HEADER_WIDTH = 252;\nexport const ROW_HEIGHT = 68;\nexport const MIN_HOURLY_INTERVAL_WIDTH = 84;\nexport const ROW_BAR_COLOR_ALTERNATE_COLOR = [\n \"#FFF2DD\",\n \"#EBF7F5\",\n \"#F2F4FE\",\n \"#FCF1F2\",\n \"#E9F6FD\",\n] as const;\nexport type RowBarAlternateColors =\n (typeof ROW_BAR_COLOR_ALTERNATE_COLOR)[number];\n"],"names":["ROW_BAR_COLOR_SEQUENCE","ROW_CELL_GAP","ROW_INTERVAL","MIN_INTERVAL_WIDTH","ROW_HEADER_WIDTH","ROW_BAR_COLOR_ALTERNATE_COLOR"],"mappings":"AAAO,MAAMA,EAAyB,CAClC,UACA,UACA,UACA,UACA,WAGSC,EAAe,EACfC,EAAe,GACfC,EAAqB,GACrBC,EAAmB,IAGnBC,EAAgC,CACzC,UACA,UACA,UACA,UACA"}

package/timetable/timetable-header/timetable-header.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{__rest as e}from"../../_virtual/_tslib.js";import{jsxs as t,jsx as r,Fragment as l}from"react/jsx-runtime";import{RefreshIcon as o}from"@lifesg/react-icons";import{NavigationHeaderWrapper as a,StyledDateNavigator as i,NavigationHeaderSubtitleWrapper as n,StyledResultText as s,StyledRefreshButton as c}from"./timetable-header.style.js";const d=d=>{var{selectedDate:m,loading:f,tableContainerRef:b,totalRecords:C,onPreviousDayClick:h,onNextDayClick:u,onRefresh:D,onCalendarDateSelect:g}=d,p=e(d,["selectedDate","loading","tableContainerRef","totalRecords","onPreviousDayClick","onNextDayClick","onRefresh","onCalendarDateSelect"]);const y=()=>{b.current&&(b.current.scrollTop=0)},R=()=>{D&&(y(),D())};return t(a,{children:[r(i,Object.assign({selectedDate:m,loading:f},p,{onRightArrowClick:e=>{y(),u(e)},onLeftArrowClick:e=>{y(),h(e)},onCalendarDateSelect:g})),void 0===C?r(l,{}):t(n,{children:[t(s,{"data-testid":"timetable-records-results",weight:"semibold",children:[C," results found"]}),D&&r(c,{"data-testid":"timetable-records-refresh-btn","aria-label":"Refresh timetable records",styleType:"light",sizeType:"small",disabled:f,onClick:R,$loading:f,icon:r(o,{})})]})]})};export{d as TimeTableHeader};
+import{__rest as e}from"../../_virtual/_tslib.js";import{jsxs as t,jsx as r,Fragment as a}from"react/jsx-runtime";import{RefreshIcon as o}from"@lifesg/react-icons";import l from"clsx";import{Button as s}from"../../button/button.js";import{DateNavigator as i}from"../../date-navigator/date-navigator.js";import{Typography as n}from"../../typography/index.js";import{navigationHeaderWrapper as c,dateNavigator as d,navigationHeaderSubtitleWrapper as m,resultText as f,refreshButton as b,refreshButtonLoading as p}from"./timetable-header.styles.js";const h=h=>{var{selectedDate:u,loading:C,tableContainerRef:g,totalRecords:y,onPreviousDayClick:D,onNextDayClick:v,onRefresh:R,onCalendarDateSelect:j}=h,k=e(h,["selectedDate","loading","tableContainerRef","totalRecords","onPreviousDayClick","onNextDayClick","onRefresh","onCalendarDateSelect"]);const N=()=>{g.current&&(g.current.scrollTop=0)},x=()=>{R&&(N(),R())};return t("div",{className:c,children:[r(i,Object.assign({className:d,selectedDate:u,loading:C},k,{onRightArrowClick:e=>{N(),v(e)},onLeftArrowClick:e=>{N(),D(e)},onCalendarDateSelect:j})),void 0===y?r(a,{}):t("div",{className:m,children:[t(n.BodySM,{className:f,"data-testid":"timetable-records-results",weight:"semibold",children:[y," result",1!==y?"s":""," found"]}),R&&r(s,{"data-testid":"timetable-records-refresh-btn","aria-label":"Refresh timetable records",styleType:"light",sizeType:"small",disabled:C,onClick:x,className:l(b,C&&p),icon:r(o,{})})]})]})};export{h as TimeTableHeader};
 //# sourceMappingURL=timetable-header.js.map

package/timetable/timetable-header/timetable-header.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"timetable-header.js","sources":["../../../src/timetable/timetable-header/timetable-header.tsx"],"sourcesContent":["import { RefreshIcon } from \"@lifesg/react-icons\";\nimport type { RefObject } from \"react\";\n\nimport {\~~n NavigationHeaderSubtitleWrapper,\n NavigationHeaderWrapper,\n StyledDateNavigator,\n StyledRefreshButton,\n StyledResultText,\n~~} from \"./timetable-header.~~style~~\";\n\ninterface TimeTableHeaderProps {\n selectedDate: string;\n loading: boolean;\n tableContainerRef: RefObject<HTMLDivElement>;\n minDate?: string \| undefined;\n maxDate?: string \| undefined;\n totalRecords?: number \| undefined;\n showDateAsShortForm?: boolean \| undefined;\n showCurrentDateAsToday?: boolean \| undefined;\n onPreviousDayClick: (currentDate: string) => void \| undefined;\n onNextDayClick: (currentDate: string) => void \| undefined;\n onRefresh?: (() => void) \| undefined;\n onCalendarDateSelect?: ((currentDate: string) => void) \| undefined;\n}\n\nexport const TimeTableHeader = ({\n selectedDate,\n loading,\n tableContainerRef,\n totalRecords,\n onPreviousDayClick,\n onNextDayClick,\n onRefresh,\n onCalendarDateSelect,\n ...otherProps\n}: TimeTableHeaderProps) => {\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n\n const scrollToTop = () => {\n if (tableContainerRef.current) {\n tableContainerRef.current.scrollTop = 0;\n }\n };\n\n const handleRefresh = () => {\n if (!onRefresh) return;\n scrollToTop();\n onRefresh();\n };\n\n const handleRightArrowClick = (date: string) => {\n scrollToTop();\n onNextDayClick(date);\n };\n\n const handleLeftArrowClick = (date: string) => {\n scrollToTop();\n onPreviousDayClick(date);\n };\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n const renderRecordsSection = () => {\n if (totalRecords === undefined) return <></>;\n return (\n <~~NavigationHeaderSubtitleWrapper~~>\n <~~StyledResultText~~\n data-testid=\"timetable-records-results\"\n weight={\"semibold\"}\n >\n {totalRecords} ~~results~~ found\n </~~StyledResultText~~>\n {onRefresh && (\n <~~StyledRefreshButton~~\n data-testid=\"timetable-records-refresh-btn\"\n aria-label=\"Refresh timetable records\"\n styleType=\"light\"\n sizeType=\"small\"\n disabled={loading}\n onClick={handleRefresh}\n ~~$loading~~={loading}\n icon={<RefreshIcon />}\n />\n )}\n </~~NavigationHeaderSubtitleWrapper~~>\n );\n };\n\n return (\n <~~NavigationHeaderWrapper~~>\n <~~StyledDateNavigator~~\n selectedDate={selectedDate}\n loading={loading}\n {...otherProps}\n onRightArrowClick={handleRightArrowClick}\n onLeftArrowClick={handleLeftArrowClick}\n onCalendarDateSelect={onCalendarDateSelect}\n />\n {renderRecordsSection()}\n </~~NavigationHeaderWrapper~~>\n );\n};\n"],"names":["TimeTableHeader","_a","selectedDate","loading","tableContainerRef","totalRecords","onPreviousDayClick","onNextDayClick","onRefresh","onCalendarDateSelect","otherProps","__rest","scrollToTop","current","scrollTop","handleRefresh","_jsxs","~~NavigationHeaderWrapper~~","~~children~~","_jsx","~~StyledDateNavigator~~","~~Object~~","~~assign","~~onRightArrowClick","date","onLeftArrowClick","undefined","~~NavigationHeaderSubtitleWrapper~~","~~StyledResultText~~","weight","~~StyledRefreshButton~~","styleType","sizeType","disabled","onClick","~~$loading~~","icon","RefreshIcon"],"mappings":"~~uVA0BO~~,MAAMA,EAAmBC,QAAAC,aAC5BA,EAAYC,QACZA,EAAOC,kBACPA,EAAiBC,aACjBA,EAAYC,mBACZA,EAAkBC,eAClBA,EAAcC,UACdA,EAASC,qBACTA,GAAoBR,EACjBS,EAAUC,EAAAV,EATe,wIAe5B,MAAMW,EAAc,KACZR,EAAkBS,UAClBT,EAAkBS,QAAQC,UAAY,EAC1C,EAGEC,EAAgB,KACbP,IACLI,IACAJ,IAAW,~~EA0Cf~~,OACIQ,~~EAACC~~,~~EAAuB~~,~~CAAAC~~,~~SAAA,CACpBC,~~EAACC,~~EAAmBC~~,~~OAAAC~~,~~OAAA~~,~~CAChBpB,~~aAAcA,EACdC,QAASA,GACLO,EAAU,~~CACda~~,~~kBA7CmBC~~,~~IAC3BZ~~,IACAL,~~EAAeiB~~,EAAK,~~EA4CZC~~,~~iBAzCkBD~~,~~IAC1BZ~~,IACAN,~~EAAmBkB~~,EAAK,~~EAwChBf~~,qBAAsBA,~~UAjCTiB~~,~~IAAjBrB~~,EAAmCc,QAEnCH,~~EAACW~~,~~EAA+B~~,~~CAAAT~~,SAAA,~~CAC5BF~~,EAACY,~~EAAgB~~,~~CAAA~~,~~cACD~~,4BACZC,OAAQ,~~qBAEPxB~~,EAAY,~~oBAEhBG~~,GACGW,~~EAACW~~,~~EAAmB~~,CAAA,~~cACJ~~,~~gCAA+B~~,~~aAChC,~~4BACXC,UAAU,QACVC,SAAS,QACTC,~~SAAU9B~~,~~EACV+B~~,~~QAASnB~~,~~EAAaoB~~,~~SACZhC~~,~~EACViC~~,~~KAAMjB~~,~~EAACkB~~,EAAW,~~WAkBR~~"}
1	+ {"version":3,"file":"timetable-header.js","sources":["../../../src/timetable/timetable-header/timetable-header.tsx"],"sourcesContent":["import { RefreshIcon } from \"@lifesg/react-icons\";\nimport clsx from \"clsx\";\nimport type { RefObject } from \"react\";\n\nimport { Button } from \"../../button\";\nimport { DateNavigator } from \"../../date-navigator\";\nimport { Typography } from \"../../typography\";\nimport * as styles from \"./timetable-header.styles\";\n\ninterface TimeTableHeaderProps {\n selectedDate: string;\n loading: boolean;\n tableContainerRef: RefObject<HTMLDivElement>;\n minDate?: string \| undefined;\n maxDate?: string \| undefined;\n totalRecords?: number \| undefined;\n showDateAsShortForm?: boolean \| undefined;\n showCurrentDateAsToday?: boolean \| undefined;\n onPreviousDayClick: (currentDate: string) => void \| undefined;\n onNextDayClick: (currentDate: string) => void \| undefined;\n onRefresh?: (() => void) \| undefined;\n onCalendarDateSelect?: ((currentDate: string) => void) \| undefined;\n}\n\nexport const TimeTableHeader = ({\n selectedDate,\n loading,\n tableContainerRef,\n totalRecords,\n onPreviousDayClick,\n onNextDayClick,\n onRefresh,\n onCalendarDateSelect,\n ...otherProps\n}: TimeTableHeaderProps) => {\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n\n const scrollToTop = () => {\n if (tableContainerRef.current) {\n tableContainerRef.current.scrollTop = 0;\n }\n };\n\n const handleRefresh = () => {\n if (!onRefresh) return;\n scrollToTop();\n onRefresh();\n };\n\n const handleRightArrowClick = (date: string) => {\n scrollToTop();\n onNextDayClick(date);\n };\n\n const handleLeftArrowClick = (date: string) => {\n scrollToTop();\n onPreviousDayClick(date);\n };\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n const renderRecordsSection = () => {\n if (totalRecords === undefined) return <></>;\n return (\n <div className={styles.navigationHeaderSubtitleWrapper}>\n <Typography.BodySM\n className={styles.resultText}\n data-testid=\"timetable-records-results\"\n weight={\"semibold\"}\n >\n {totalRecords} result{totalRecords !== 1 ? \"s\" : \"\"} found\n </Typography.BodySM>\n {onRefresh && (\n <Button\n data-testid=\"timetable-records-refresh-btn\"\n aria-label=\"Refresh timetable records\"\n styleType=\"light\"\n sizeType=\"small\"\n disabled={loading}\n onClick={handleRefresh}\n className={clsx(\n styles.refreshButton,\n loading && styles.refreshButtonLoading\n )}\n icon={<RefreshIcon />}\n />\n )}\n </div>\n );\n };\n\n return (\n <div className={styles.navigationHeaderWrapper}>\n <DateNavigator\n className={styles.dateNavigator}\n selectedDate={selectedDate}\n loading={loading}\n {...otherProps}\n onRightArrowClick={handleRightArrowClick}\n onLeftArrowClick={handleLeftArrowClick}\n onCalendarDateSelect={onCalendarDateSelect}\n />\n {renderRecordsSection()}\n </div>\n );\n};\n"],"names":["TimeTableHeader","_a","selectedDate","loading","tableContainerRef","totalRecords","onPreviousDayClick","onNextDayClick","onRefresh","onCalendarDateSelect","otherProps","__rest","scrollToTop","current","scrollTop","handleRefresh","_jsxs","className","styles.navigationHeaderWrapper","_jsx","DateNavigator","styles.dateNavigator","onRightArrowClick","date","onLeftArrowClick","undefined","styles.navigationHeaderSubtitleWrapper","children","Typography","BodySM","styles.resultText","weight","Button","styleType","sizeType","disabled","onClick","clsx","styles.refreshButton","styles.refreshButtonLoading","icon","RefreshIcon"],"mappings":"kiBAwBO,MAAMA,EAAmBC,QAAAC,aAC5BA,EAAYC,QACZA,EAAOC,kBACPA,EAAiBC,aACjBA,EAAYC,mBACZA,EAAkBC,eAClBA,EAAcC,UACdA,EAASC,qBACTA,GAAoBR,EACjBS,EAAUC,EAAAV,EATe,wIAe5B,MAAMW,EAAc,KACZR,EAAkBS,UAClBT,EAAkBS,QAAQC,UAAY,EAC1C,EAGEC,EAAgB,KACbP,IACLI,IACAJ,IAAW,EA8Cf,OACIQ,SAAKC,UAAWC,YACZC,EAACC,iBACGH,UAAWI,EACXnB,aAAcA,EACdC,QAASA,GACLO,EAAU,CACdY,kBAlDmBC,IAC3BX,IACAL,EAAegB,EAAK,EAiDZC,iBA9CkBD,IAC1BX,IACAN,EAAmBiB,EAAK,EA6ChBd,qBAAsBA,UAtCTgB,IAAjBpB,EAAmCc,QAEnCH,EAAA,MAAA,CAAKC,UAAWS,EAAsCC,SAAA,CAClDX,EAACY,EAAWC,QACRZ,UAAWa,gBACC,4BACZC,OAAQ,qBAEP1B,EAAY,UAA0B,IAAjBA,EAAqB,IAAM,GAAE,YAEtDG,GACGW,EAACa,EAAM,CAAA,cACS,6CACD,4BACXC,UAAU,QACVC,SAAS,QACTC,SAAUhC,EACViC,QAASrB,EACTE,UAAWoB,EACPC,EACAnC,GAAWoC,GAEfC,KAAMrB,EAACsB,EAAW,CAAA,UAmB5B"}

package/timetable/timetable-header/timetable-header.styles.d.ts ADDED Viewed

@@ -0,0 +1,6 @@
+export declare const refreshButton: import("@linaria/core").LinariaClassName;
+export declare const refreshButtonLoading: import("@linaria/core").LinariaClassName;
+export declare const navigationHeaderWrapper: import("@linaria/core").LinariaClassName;
+export declare const navigationHeaderSubtitleWrapper: import("@linaria/core").LinariaClassName;
+export declare const resultText: import("@linaria/core").LinariaClassName;
+export declare const dateNavigator: import("@linaria/core").LinariaClassName;

package/timetable/timetable-header/timetable-header.styles.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import"./timetable-header.styles_11gl1h4.css";const e="r1dkvl6z",t="r1u01cjw",s="n17unxsd",l="n1oy278s",r="r64l2hv",a="d13zs1sk";export{a as dateNavigator,l as navigationHeaderSubtitleWrapper,s as navigationHeaderWrapper,e as refreshButton,t as refreshButtonLoading,r as resultText};
2	+ //# sourceMappingURL=timetable-header.styles.js.map

package/timetable/timetable-header/timetable-header.styles.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"timetable-header.styles.js","sources":["../../../src/timetable/timetable-header/timetable-header.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Spacing } from \"../../theme\";\n\nexport const refreshButton = css`\n color: ${Colour[\"icon\"]};\n\n @keyframes timetable-refresh-icon-spin {\n 100% {\n -webkit-transform: rotate(360deg);\n transform: rotate(360deg);\n }\n }\n`;\n\nexport const refreshButtonLoading = css`\n svg {\n animation: timetable-refresh-icon-spin 4s linear infinite;\n }\n`;\n\nexport const navigationHeaderWrapper = css`\n display: flex;\n padding-bottom: ${Spacing[\"spacing-16\"]};\n justify-content: space-between;\n gap: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const navigationHeaderSubtitleWrapper = css`\n display: flex;\n align-items: center;\n justify-content: center;\n gap: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const resultText = css`\n color: ${Colour[\"text-subtler\"]};\n`;\n\nexport const dateNavigator = css`\n width: 400px;\n`;\n"],"names":["refreshButton","refreshButtonLoading","navigationHeaderWrapper","navigationHeaderSubtitleWrapper","resultText","dateNavigator"],"mappings":"wFAIO,MAAMA,EAAa,WAWbC,EAAoB,WAMpBC,EAAuB,WAOvBC,EAA+B,WAO/BC,EAAU,UAIVC,EAAa"}

package/timetable/timetable-header/timetable-header.styles_11gl1h4.css ADDED Viewed

@@ -0,0 +1,6 @@
+.r1dkvl6z{color:var(--fds-colour-icon);}@-webkit-keyframes timetable-refresh-icon-spin-r1dkvl6z{100%{-webkit-transform:rotate(360deg);-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}@keyframes timetable-refresh-icon-spin-r1dkvl6z{100%{-webkit-transform:rotate(360deg);-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}
+.r1u01cjw svg{-webkit-animation:timetable-refresh-icon-spin 4s linear infinite;animation:timetable-refresh-icon-spin 4s linear infinite;}
+.n17unxsd{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding-bottom:var(--fds-spacing-16);-webkit-box-pack:justify;-ms-flex-pack:space-between;-webkit-justify-content:space-between;justify-content:space-between;gap:var(--fds-spacing-8);}
+.n1oy278s{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;gap:var(--fds-spacing-8);}
+.r64l2hv{color:var(--fds-colour-text-subtler);}
+.d13zs1sk{width:400px;}