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/cjs/time-slot-bar/time-slot-bar.js.map CHANGED Viewed

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1 @@

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

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

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

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

@@ -0,0 +1 @@

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

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

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

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

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

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

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