@lifesg/react-design-system 4.0.0-alpha.5 → 4.0.0-alpha.6

package/time-range-picker/types.d.ts

@@ -1,76 +1,136 @@
 import type { RefObject } from "react";
 import type { DropdownAlignmentType } from "../shared/dropdown-wrapper";
+/** Time display format: 12-hour clock or 24-hour clock. */
 export type TimeRangePickerFormat = "12hr" | "24hr";
+/**
+ * Picker interaction style.
+ *
+ * - `"dial"` renders a dial spinner input picker.
+ * - `"combobox"` renders scrollable dropdowns with configurable intervals.
+ */
 export type TimeRangePickerVariant = "dial" | "combobox";
+/**
+ * A selected time range represented as `start` and `end` time strings.
+ *
+ * Each field is either an empty string (no selection) or a formatted time
+ * string.
+ *
+ * - 24 hour uses "hh:mm" e.g. `{ start: "13:00", end: "14:00" }`
+ * - 12 hour uses "hh:mmA" e.g. `{ start: "01:00PM", end: "02:00PM" }`
+ *
+ * Note: combobox variant uses "h:mma" instead.
+ */
 export interface TimeRangePickerValue {
     start: string;
     end: string;
 }
+/**
+ * Props for the `TimeRangePicker` component.
+ */
 export interface TimeRangePickerProps {
     className?: string | undefined;
     id?: string | undefined;
     style?: React.CSSProperties | undefined;
+    /**
+     * ID of an element that labels both start and end time inputs.
+     */
     "aria-labelledby"?: string | undefined;
+    /**
+     * ID of an element that describes both start and end time inputs.
+     */
     "aria-describedby"?: string | undefined;
     "aria-invalid"?: boolean | undefined;
     "data-testid"?: string | undefined;
     /**
      * An object with `start` and `end` values as an empty string or a
      * string based format.
-     *
-     * 24 hour uses "hh:mm" e.g. `{ start: "13:00", end: "14:00" }`
-     *
-     * 12 hour uses "hh:mmA" e.g. `{ start: "01:00PM", end: "02:00PM" }`
-     *
-     * Note: combobox variant uses "h:mma" instead.
      */
     value?: TimeRangePickerValue | undefined;
     /**
-     * The time input format in `12hr` or `24hr`. Defaults to `24hr`
+     * The time display and input format.
+     *
+     * @default "24hr"
      */
     format?: TimeRangePickerFormat | undefined;
     disabled?: boolean | undefined;
     readOnly?: boolean | undefined;
     error?: boolean | undefined;
-    /** Specifies the variant for the time range picker */
+    /**
+     * The picker interaction style.
+     *
+     * @default "dial"
+     */
     variant?: TimeRangePickerVariant | undefined;
     /**
-     * Combobox variant specific attributes
+     * Minute interval between each option in the combobox dropdowns.
+     *
+     * @remarks Only applies when `variant` is `"combobox"`.
      */
-    /** Specifies the interval (minutes) between each dropdown option */
     interval?: number | undefined;
-    /** Specifies the starting time for the dropdown options */
+    /**
+     * Earliest selectable time shown in the combobox dropdowns.
+     *
+     * @remarks Only applies when `variant` is `"combobox"`.
+     */
     startLimit?: string | undefined;
-    /** Specifies the ending time for the dropdown options */
+    /**
+     * Latest selectable time shown in the combobox dropdowns.
+     *
+     * @remarks Only applies when `variant` is `"combobox"`.
+     */
     endLimit?: string | undefined;
-    /** Specifies the initial start time to scroll to when the start dropdown opens */
+    /**
+     * The time that the start field dropdown scrolls to on open..
+     *
+     * @remarks Only applies when `variant` is `"combobox"`.
+     */
     initialScrollStartTime?: string | undefined;
-    /** Specifies the initial end time to scroll to when the end dropdown opens */
+    /**
+     * The time that the end field dropdown scrolls to on open.
+     *
+     * @remarks Only applies when `variant` is `"combobox"`.
+     */
     initialScrollEndTime?: string | undefined;
-    /** Specifies the alignment of the dropdown to the left or right of the reference element */
+    /**
+     * Aligns the dropdown relative to the trigger element.
+     *
+     * @remarks Only applies when `variant` is `"combobox"`.
+     */
     alignment?: DropdownAlignmentType | undefined;
-    /** Specifies the z-index of the dropdown element */
+    /**
+     * CSS `z-index` applied to the dropdown overlay.
+     *
+     * @remarks Only applies when `variant` is `"combobox"`.
+     */
     dropdownZIndex?: number | undefined;
     /**
-     * Use this when the parent container has a higher z-index
-     * and the dropdown would otherwise be hidden.
+     * The root element that contains the dropdown element.
+     *
+     * @remarks
+     * Only applies when `variant` is `"combobox"`.
+     *
+     * Specify this if you need to change the parent of the dropdown in the HTML DOM.
+     * Possible use case: sharing a stacking context.
+     *
+     * Note: if a parent of the trigger has a higher `z-index` than the dropdown,
+     * the dropdown may be obscured.
+     *
+     * @default `document.body`
      */
     dropdownRootNode?: RefObject<HTMLElement> | undefined;
     /**
-     * Called when a selection is made. Returns an object with `start` and
-     * `end` values as an empty string or a string based format.
-     *
-     * 24 hour returns "hh:mm" e.g. `{ start: "13:00", end: "14:00" }`
+     * Called when the selected time range changes.
      *
-     * 12 hour returns "hh:mmA" e.g. `{ start: "01:00PM", end: "02:00PM" }`
+     * @param value The current `start` and `end` time strings. Each field is
+     * either an empty string or a formatted time string based on `format`.
      */
     onChange?: ((value: TimeRangePickerValue) => void) | undefined;
     /**
-     * Called when the field is focused
+     * Called when the field receives focus.
      */
     onFocus?: (() => void) | undefined;
     /**
-     * Called when a defocus is made on the field
+     * Called when the field loses focus.
      */
     onBlur?: (() => void) | undefined;
 }

package/time-slot-bar/internal-types.d.ts

@@ -0,0 +1 @@
+export type Direction = "right" | "left";

package/time-slot-bar/time-slot-bar.d.ts

@@ -1,2 +1,9 @@
 import type { TimeSlotBarProps, TimeSlotBarRef } from "./types";
+/**
+ * A horizontally scrollable timeline bar that visualises time slots across a
+ * defined time range.
+ *
+ * Use `TimeSlotBar` to display availability, bookings, or schedule occupancy
+ * as coloured cells on a shared time axis.
+ */
 export declare const TimeSlotBar: (props: TimeSlotBarProps & import("react").RefAttributes<TimeSlotBarRef>) => React.ReactElement | null;

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

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

@@ -1,55 +1,147 @@
 import type { SlotStyle } from "../shared/time-slot/types";
+/**
+ * Visual density variant for `TimeSlotBar`.
+ *
+ * - `"default"` — full-height bar; slots show labels and are clickable.
+ * - `"minified"` — compact bar; slot labels and click interactions are disabled.
+ */
 export type TimeSlotBarVariant = "minified" | "default";
-export type Direction = "right" | "left";
 export type { SlotStyle } from "../shared/time-slot/types";
+/**
+ * Imperative handle returned by `TimeSlotBar` via `ref`.
+ *
+ */
 export interface TimeSlotBarRef {
-    /** Resets the scroll position to the initialScrollTime if provided */
+    /**
+     * Scrolls the bar back to `initialScrollTime`,
+     * or to the start if `initialScrollTime` is not set.
+     */
     resetScroll: () => void;
 }
+/**
+ * Visual styling attributes applied to an individual time slot or the bar background.
+ */
 interface TimeSlotBarStyleAttributes {
-    /** The type of style of the time slot. Values: "default" | "stripes"  */
     styleType?: SlotStyle | undefined;
-    /** The label color */
+    /** Text color for the slot label. */
     color?: string | undefined;
-    /** The background color */
+    /** Primary fill color of the slot. */
     backgroundColor: string;
-    /** The secondary background color. Used in conjunction if styleType is "stripes" */
+    /**
+     * Secondary fill color used for the alternating stripe.
+     *
+     * @remarks Only applies when `styleType` is `"stripes"`.
+     */
     backgroundColor2?: string | undefined;
-    /** The background color on hover */
+    /** Primary fill color of the slot on hover. */
     hoverBackgroundColor?: string | undefined;
-    /** The secondary background color on hover. Used in conjunction if styleType is "stripes" */
+    /**
+     * Secondary fill color on hover when `styleType` is `"stripes"`.
+     *
+     * @remarks Only applies when `styleType` is `"stripes"`.
+     */
     hoverBackgroundColor2?: string | undefined;
 }
+/**
+ * Props for the `TimeSlotBar` component.
+ */
 export interface TimeSlotBarProps {
     "data-testid"?: string | undefined;
     className?: string | undefined;
-    /** The display variant of the component. Values: "minified" | "default" */
+    /**
+     * Visual density of the bar.
+     *
+     * @default "default"
+     */
     variant?: TimeSlotBarVariant;
-    /** The start time of time slot bar. Format in HH:mm. Note: Minutes can be 00, 15, 30, 45 */
+    /**
+     * Start of the visible time range in `HH:mm` format.
+     *
+     * @remarks Minutes must be one of `00`, `15`, `30`, or `45`.
+     */
     startTime: string;
-    /** The end time of time slot bar. Format in HH:mm. Note: Minutes can be 00, 15, 30, 45 */
+    /**
+     * End of the visible time range in `HH:mm` format.
+     *
+     * @remarks Minutes must be one of `00`, `15`, `30`, or `45`.
+     */
     endTime: string;
-    /** Initial scroll position in HH:mm format (e.g., "09:00" will scroll to 9am on mount) */
+    /**
+     * Time position the bar scrolls to on mount, in `HH:mm` format.
+     *
+     * When `roundInitialScrollTime` is `true`, the value is
+     * rounded down to the nearest 30-minute interval before scrolling.
+     */
     initialScrollTime?: string | undefined;
+    /**
+     * The individual time slots shown within the configured time range.
+     *
+     * @remarks Slots outside the `startTime`–`endTime` range are clipped.
+     */
     slots: TimeSlot[];
-    /** Callback function when user clicks on the time slot */
+    /**
+     * Called when the user clicks a slot cell.
+     *
+     * @param timeSlot The clicked `TimeSlot` object.
+     */
     onSlotClick: (timeSlot: TimeSlot) => void;
-    /** The default click behaviour when no time slot is specified for the time period */
+    /**
+     * Called when the user clicks an empty slot.
+     *
+     * @remarks Only active in the `"default"` variant.
+     */
     onClick?: () => void;
-    /** The default styling attributes when no time slot is specified for the time period */
+    /**
+     * Styling applied to the bar background region not covered by any slot.
+     * Required to make the background region visible or interactive.
+     */
     styleAttributes?: TimeSlotBarStyleAttributes | undefined;
-    /** Rounds initial scroll time to the nearest interval, e.g 6:30 will be clamped to 6:00 when interval = 60. Default is true */
+    /**
+     * When `true`, `initialScrollTime` is rounded down to the nearest
+     * 30-minute interval before the bar scrolls to it.
+     *
+     * @default true
+     */
     roundInitialScrollTime?: boolean | undefined;
 }
+/**
+ * A single bookable or occupied slot rendered within a `TimeSlotBar`.
+ *
+ */
 export interface TimeSlot {
+    /** Unique identifier for this slot. */
     id: string;
-    /** The start time of time slot. Format in HH:mm. Note: Minutes can be 00, 15, 30, 45 */
+    /**
+     * Start boundary of the slot in `HH:mm` format.
+     *
+     * @remarks Minutes must be one of `00`, `15`, `30`, or `45`.
+     */
     startTime: string;
-    /** The end time of time slot. Format in HH:mm. Note: Minutes can be 00, 15, 30, 45 */
+    /**
+     * End boundary of the slot in `HH:mm` format.
+     *
+     * @remarks Minutes must be one of `00`, `15`, `30`, or `45`.
+     */
     endTime: string;
-    /** The slot cell label */
+    /**
+     * Text rendered inside the slot cell.
+     * Replaced with `"..."` when the cell is too narrow to display the full label.
+     *
+     * @remarks Only displayed in the `"default"` variant.
+     */
     label?: string | undefined;
-    /** Specifies if the slot cell is clickable */
+    /**
+     * Whether the slot responds to clicks.
+     *
+     * @remarks Only active in the `"default"` variant.
+     *
+     * @default true
+     */
     clickable?: boolean | undefined;
+    /** Visual styling for the slot. */
     styleAttributes: TimeSlotBarStyleAttributes;
+    /**
+     * Accessible label for this slot.
+     */
+    ariaLabel?: string | undefined;
 }

package/time-slot-bar-week/time-slot-bar-week.d.ts

@@ -1,2 +1,10 @@
 import type { TimeSlotBarWeekProps } from "./types";
+/**
+ * A week calendar grid with a time axis, rendering detailed slot bars within
+ * each day column.
+ *
+ * Use `TimeSlotBarWeek` for detailed time-of-day scheduling where each cell
+ * represents a configurable time interval. For a simpler day-level overview
+ * without a time axis, use `TimeSlotWeekView` instead.
+ */
 export declare const TimeSlotBarWeek: ({ disabledDates, onWeekDisplayChange, onChange, value, minDate, maxDate, startTime, endTime, slots, interval, variant, maxVisibleCellHeight, showNavigationHeader, enableSelection, onSlotClick, currentCalendarDate, ...otherProps }: TimeSlotBarWeekProps) => import("react/jsx-runtime").JSX.Element;

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

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