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

package/time-range-picker/combobox-picker/combobox-picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"combobox-picker.js","sources":["../../../src/time-range-picker/combobox-picker/combobox-picker.tsx"],"sourcesContent":["import type { OpenChangeReason } from \"@floating-ui/react\";\nimport clsx from \"clsx\";\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\n\nimport { FormErrorMessage } from \"../../form/form-label\";\nimport { concatIds, VisuallyHidden } from \"../../shared/accessibility\";\nimport { DropdownListState } from \"../../shared/dropdown-list\";\nimport { DropdownList } from \"../../shared/dropdown-list/dropdown-list\";\nimport { ElementWithDropdown } from \"../../shared/dropdown-wrapper\";\nimport {\n    BasicInput,\n    ClearButton,\n    InputWrapper,\n} from \"../../shared/input-wrapper\";\nimport * as inputWrapperStyles from \"../../shared/input-wrapper/input-wrapper.styles\";\nimport { RangeInputInnerContainer } from \"../../shared/range-input-inner-container\";\nimport { useId } from \"../../util\";\nimport { TimeHelper } from \"../../util/time-helper\";\nimport * as commonStyles from \"../common.styles\";\nimport type { TimeRangePickerProps, TimeRangePickerValue } from \"../types\";\nimport * as styles from \"./combobox-picker.styles\";\n\ntype TimeRangeInputType = \"start\" | \"end\";\ninterface TimeChangeOptions {\n    goToNextInput?: boolean | undefined;\n    triggerOnBlur?: boolean | undefined;\n}\n\nexport const ComboboxPicker = ({\n    id,\n    disabled = false,\n    error,\n    value,\n    format = \"12hr\",\n    readOnly,\n    onChange,\n    onFocus,\n    onBlur,\n    alignment = \"left\",\n    dropdownZIndex,\n    startLimit,\n    endLimit,\n    initialScrollStartTime,\n    initialScrollEndTime,\n    interval = 15,\n    dropdownRootNode,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    \"aria-invalid\": ariaInvalid,\n    ...otherProps\n}: TimeRangePickerProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const internalId = useId();\n    const [activeTimeSelector, setActiveTimeSelector] =\n        useState<TimeRangeInputType | null>(null);\n    const [dropdownOpen, setDropdownOpen] = useState<boolean>(false);\n    const [validationError, setValidationError] = useState<string>(\"\");\n\n    const [startTimeVal, setStartTimeVal] = useState<string>(\"\");\n    const [endTimeVal, setEndTimeVal] = useState<string>(\"\");\n    const [initialStartTimeVal, setInitialStartTimeVal] = useState<string>(\"\");\n    const [initialEndTimeVal, setInitialEndTimeVal] = useState<string>(\"\");\n\n    const nodeRef = useRef<HTMLDivElement>(null);\n    const startInputRef = useRef<HTMLInputElement>(null);\n    const endInputRef = useRef<HTMLInputElement>(null);\n\n    const listboxId = `${internalId}-listbox`;\n    const startLabelId = `${internalId}-start-label`;\n    const endLabelId = `${internalId}-end-label`;\n    const errorId = `${internalId}-error-message`;\n\n    const startOptions = useMemo(\n        () =>\n            TimeHelper.generateTimings(interval, format, startLimit, endLimit),\n        [interval, format, startLimit, endLimit]\n    );\n    const endOptions = useMemo(() => {\n        if (initialStartTimeVal === \"\") return startOptions;\n\n        const flooredStartVal = TimeHelper.findClosestFlooredTime(\n            initialStartTimeVal,\n            startOptions\n        );\n        return flooredStartVal\n            ? startOptions.slice(startOptions.indexOf(flooredStartVal))\n            : [];\n    }, [startOptions, initialStartTimeVal]);\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    const parseInput = useCallback(\n        (input: string | undefined): string | undefined => {\n            return TimeHelper.parseInput(input, format);\n        },\n        [format]\n    );\n\n    const parsedInitialStartScrollTime = useMemo(\n        () => parseInput(initialScrollStartTime) ?? \"\",\n        [initialScrollStartTime, parseInput]\n    );\n\n    const parsedInitialEndScrollTime = useMemo(\n        () => parseInput(initialScrollEndTime) ?? \"\",\n        [initialScrollEndTime, parseInput]\n    );\n\n    useEffect(() => {\n        if (value) {\n            const start = parseInput(value.start) ?? \"\";\n            const end = parseInput(value.end) ?? \"\";\n\n            setStartTimeVal(start);\n            setEndTimeVal(end);\n            setInitialStartTimeVal(start);\n            setInitialEndTimeVal(end);\n        }\n    }, [value, parseInput]);\n\n    // Validation for keyboard input\n    useEffect(() => {\n        if (error) {\n            setDropdownOpen(false);\n            return;\n        }\n\n        const start = parseInput(startTimeVal);\n        const end = parseInput(endTimeVal);\n\n        if (start === undefined) {\n            setValidationError(\"Invalid start time\");\n        } else if (end === undefined) {\n            setValidationError(\"Invalid end time\");\n        } else if (\n            start !== \"\" &&\n            end !== \"\" &&\n            TimeHelper.to24Hour(end) < TimeHelper.to24Hour(start)\n        ) {\n            setValidationError(\"End time must be after start time\");\n        } else {\n            setValidationError(\"\");\n            // Re-open dropdown if error was corrected\n            if (\n                document.activeElement === startInputRef.current ||\n                document.activeElement === endInputRef.current\n            ) {\n                setDropdownOpen(true);\n            }\n            return;\n        }\n\n        // Hide dropdown so error message is visible\n        setDropdownOpen(false);\n    }, [startTimeVal, endTimeVal, parseInput, error]);\n\n    // =============================================================================\n    // HELPERS\n    // =============================================================================\n    const getDropdownAriaLabel = () => {\n        if (activeTimeSelector === \"start\") {\n            return \"Selecting for: Start time\";\n        }\n\n        if (activeTimeSelector === \"end\") {\n            return \"Selecting for: End time\";\n        }\n\n        return undefined;\n    };\n\n    const getInputLabelledBy = (type: TimeRangeInputType) => {\n        return concatIds(\n            ariaLabelledBy,\n            type === \"start\" ? startLabelId : endLabelId\n        );\n    };\n\n    const getInputDescribedBy = () => {\n        return concatIds(\n            ariaDescribedBy,\n            !error && validationError ? errorId : undefined\n        );\n    };\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleInputFocus = (selector: TimeRangeInputType) => {\n        if (disabled || readOnly) return;\n\n        // Only run onFocus if not already focused\n        if (!activeTimeSelector && !dropdownOpen) onFocus?.();\n\n        setActiveTimeSelector(selector);\n        setDropdownOpen(true);\n    };\n\n    const handleInputClick = (selector: TimeRangeInputType) => {\n        if (disabled || readOnly) return;\n\n        setActiveTimeSelector(selector);\n        setDropdownOpen(true);\n        (selector === \"start\" ? startInputRef : endInputRef).current?.select();\n    };\n\n    function handleKeyDownEvent(event: React.KeyboardEvent<HTMLInputElement>) {\n        switch (event.code) {\n            case \"Enter\":\n                if (activeTimeSelector === \"start\") {\n                    handleStartTime(startTimeVal);\n                } else if (activeTimeSelector === \"end\") {\n                    // Let handleBlur call handleTimeChange instead\n                    if (dropdownOpen) handleEndTime(endTimeVal);\n                    endInputRef.current?.blur();\n                }\n                break;\n            case \"Tab\":\n                handleTimeChange(startTimeVal, endTimeVal, {});\n                break;\n            default:\n                break;\n        }\n    }\n\n    const handleStartTime = (input: string) => {\n        handleTimeChange(input, endTimeVal, { goToNextInput: true });\n    };\n\n    const handleEndTime = (input: string) => {\n        handleTimeChange(startTimeVal, input, { triggerOnBlur: true });\n    };\n\n    const handleTimeChange = (\n        startInput: string,\n        endInput: string,\n        {\n            goToNextInput, // Used by handleStart to move to end input automatically\n            triggerOnBlur, // Used by handleEnd/handleClear to trigger onBlur\n        }: TimeChangeOptions\n    ) => {\n        const start = parseInput(startInput) ?? initialStartTimeVal;\n        const end = parseInput(endInput) ?? initialEndTimeVal;\n\n        setStartTimeVal(start);\n        setEndTimeVal(end);\n\n        const timeValue: TimeRangePickerValue = { start, end };\n\n        // Trigger onChange if values have changed\n        if (start !== initialStartTimeVal || end !== initialEndTimeVal) {\n            onChange?.(timeValue);\n        }\n\n        // Go to end input only if start is a valid time\n        if (goToNextInput && parseInput(startInput) !== undefined) {\n            setActiveTimeSelector(\"end\");\n            endInputRef.current?.select();\n        }\n\n        if (triggerOnBlur) {\n            setActiveTimeSelector(null);\n            setDropdownOpen(false);\n            onBlur?.();\n        }\n\n        setInitialStartTimeVal(start);\n        setInitialEndTimeVal(end);\n    };\n\n    const handleClear = (event: React.MouseEvent) => {\n        event.stopPropagation();\n        setStartTimeVal(\"\");\n        setEndTimeVal(\"\");\n        setInitialStartTimeVal(\"\");\n        setInitialEndTimeVal(\"\");\n\n        const timeValue: TimeRangePickerValue = {\n            start: \"\",\n            end: \"\",\n        };\n\n        onChange?.(timeValue);\n        setActiveTimeSelector(null);\n        setDropdownOpen(false);\n    };\n\n    const handleDismiss = () => {\n        (activeTimeSelector === \"start\"\n            ? startInputRef\n            : endInputRef\n        ).current?.focus();\n        setDropdownOpen(false);\n    };\n\n    const handleBlur = (event: React.FocusEvent<HTMLDivElement, Element>) => {\n        const target = event.relatedTarget as HTMLElement;\n\n        const isFloatingElement =\n            target?.matches?.(\"[data-floating-ui-focusable]\") ||\n            target?.matches?.(\"[data-floating-ui-focus-guard]\");\n        const isInsideNode =\n            nodeRef.current && nodeRef.current.contains(target);\n\n        // Condition when the calendar is closed and focus moved outside the component\n        const shouldBlurWhenClosed =\n            activeTimeSelector &&\n            !dropdownOpen &&\n            !isInsideNode &&\n            !isFloatingElement;\n\n        if (shouldBlurWhenClosed) {\n            handleTimeChange(startTimeVal, endTimeVal, { triggerOnBlur: true });\n        }\n    };\n\n    // NOTE: Dropdown dismissal (esc) does not trigger onClose\n    const handleClose = (reason: OpenChangeReason | undefined) => {\n        if (reason === \"outside-press\") {\n            // No handleTimeChange to avoid duplicate call from handleBlur\n            setActiveTimeSelector(null);\n            setDropdownOpen(false);\n            onBlur?.();\n        } else {\n            // Dropdown closed via exiting component (eg. tab)\n            handleTimeChange(startTimeVal, endTimeVal, { triggerOnBlur: true });\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderClearButton = () => {\n        if (\n            !readOnly &&\n            !disabled &&\n            (startTimeVal?.length > 0 || endTimeVal?.length > 0)\n        ) {\n            return (\n                <div className={inputWrapperStyles.clearButtonContainer}>\n                    <ClearButton\n                        onClick={handleClear}\n                        type=\"button\"\n                        aria-label=\"Clear\"\n                    />\n                </div>\n            );\n        }\n    };\n\n    const renderDropdown = () => {\n        if (activeTimeSelector === \"start\") {\n            // Prioritise start time value. If non existent, use initial scroll time\n            // If both are non existent, DropdownList will default to first option\n            const startScrollTime =\n                parseInput(startTimeVal) || parsedInitialStartScrollTime;\n\n            return (\n                <DropdownList\n                    listItems={startOptions}\n                    onSelectItem={handleStartTime}\n                    selectedItems={[startTimeVal]}\n                    topScrollItem={TimeHelper.findClosestFlooredTime(\n                        startScrollTime,\n                        startOptions\n                    )}\n                    listboxId={listboxId}\n                    ariaLabel={getDropdownAriaLabel()}\n                    disableItemFocus\n                    matchElementWidth\n                />\n            );\n        } else {\n            const endScrollTime =\n                parseInput(endTimeVal) || parsedInitialEndScrollTime;\n\n            return (\n                <DropdownList\n                    listItems={endOptions}\n                    onSelectItem={handleEndTime}\n                    selectedItems={[endTimeVal]}\n                    topScrollItem={TimeHelper.findClosestFlooredTime(\n                        endScrollTime,\n                        endOptions\n                    )}\n                    listboxId={listboxId}\n                    ariaLabel={getDropdownAriaLabel()}\n                    disableItemFocus\n                    matchElementWidth\n                />\n            );\n        }\n    };\n\n    const renderElement = () => (\n        <InputWrapper\n            ref={nodeRef}\n            disabled={disabled}\n            error={error || !!validationError}\n            readOnly={readOnly}\n            onBlur={handleBlur}\n            role=\"group\"\n            data-testid=\"timepicker-container\"\n            className={styles.timeFieldContainer}\n        >\n            <VisuallyHidden id={startLabelId}>Start time</VisuallyHidden>\n            <VisuallyHidden id={endLabelId}>End time</VisuallyHidden>\n\n            <RangeInputInnerContainer\n                error={error || !!validationError}\n                currentActive={\n                    activeTimeSelector === null ? \"none\" : activeTimeSelector\n                }\n            >\n                {/* From */}\n                <BasicInput\n                    ref={startInputRef}\n                    onFocus={() => handleInputFocus(\"start\")}\n                    placeholder={\n                        activeTimeSelector === \"start\" ? \"hh:mm\" : \"From\"\n                    }\n                    onChange={(e) => setStartTimeVal(e.target.value)}\n                    value={startTimeVal}\n                    readOnly={readOnly || disabled}\n                    data-testid={\n                        otherProps[\"data-testid\"]\n                            ? `${otherProps[\"data-testid\"]}-timepicker-selector-start`\n                            : \"timepicker-selector-start\"\n                    }\n                    onClick={() => handleInputClick(\"start\")}\n                    onKeyDown={handleKeyDownEvent}\n                    autoComplete=\"off\"\n                    type=\"text\"\n                    role=\"combobox\"\n                    aria-labelledby={getInputLabelledBy(\"start\")}\n                    aria-describedby={getInputDescribedBy()}\n                    aria-expanded={\n                        dropdownOpen && activeTimeSelector === \"start\"\n                    }\n                    aria-controls={listboxId}\n                    aria-autocomplete=\"list\"\n                    aria-invalid={error || ariaInvalid || !!validationError}\n                    aria-disabled={disabled}\n                    aria-readonly={readOnly}\n                    className={clsx(\n                        commonStyles.selectorInput,\n                        disabled && commonStyles.selectorInputDisabled\n                    )}\n                />\n                {/* To */}\n                <BasicInput\n                    ref={endInputRef}\n                    onFocus={() => handleInputFocus(\"end\")}\n                    placeholder={activeTimeSelector === \"end\" ? \"hh:mm\" : \"To\"}\n                    onChange={(e) => setEndTimeVal(e.target.value)}\n                    value={endTimeVal}\n                    readOnly={readOnly || disabled}\n                    data-testid={\n                        otherProps[\"data-testid\"]\n                            ? `${otherProps[\"data-testid\"]}-timepicker-selector-end`\n                            : \"timepicker-selector-end\"\n                    }\n                    onClick={() => handleInputClick(\"end\")}\n                    onKeyDown={handleKeyDownEvent}\n                    autoComplete=\"off\"\n                    type=\"text\"\n                    role=\"combobox\"\n                    aria-labelledby={getInputLabelledBy(\"end\")}\n                    aria-describedby={getInputDescribedBy()}\n                    aria-expanded={dropdownOpen && activeTimeSelector === \"end\"}\n                    aria-controls={listboxId}\n                    aria-autocomplete=\"list\"\n                    aria-invalid={\n                        error || ariaInvalid || !!validationError || undefined\n                    }\n                    aria-disabled={disabled || undefined}\n                    aria-readonly={readOnly || undefined}\n                    className={clsx(\n                        commonStyles.selectorInput,\n                        disabled && commonStyles.selectorInputDisabled\n                    )}\n                />\n            </RangeInputInnerContainer>\n            {renderClearButton()}\n        </InputWrapper>\n    );\n\n    const renderError = () =>\n        // Only display internal error message if user does not provide one\n        !error &&\n        validationError && (\n            <FormErrorMessage\n                id={errorId}\n                tabIndex={0}\n                data-testid={id ? `${id}-error-message` : \"error-message\"}\n            >\n                {validationError}\n            </FormErrorMessage>\n        );\n\n    return (\n        <div\n            id={id}\n            {...otherProps}\n            className={clsx(commonStyles.wrapper, otherProps.className)}\n        >\n            <DropdownListState>\n                <ElementWithDropdown\n                    enabled={!readOnly && !disabled}\n                    isOpen={dropdownOpen}\n                    renderElement={renderElement}\n                    renderDropdown={renderDropdown}\n                    onClose={handleClose}\n                    onDismiss={handleDismiss}\n                    offset={8}\n                    alignment={alignment}\n                    fitAvailableHeight\n                    customZIndex={dropdownZIndex}\n                    rootNode={dropdownRootNode}\n                />\n            </DropdownListState>\n            {renderError()}\n        </div>\n    );\n};\n"],"names":["ComboboxPicker","_a","id","disabled","error","value","format","readOnly","onChange","onFocus","onBlur","alignment","dropdownZIndex","startLimit","endLimit","initialScrollStartTime","initialScrollEndTime","interval","dropdownRootNode","ariaLabelledBy","ariaDescribedBy","ariaInvalid","otherProps","__rest","internalId","useId","activeTimeSelector","setActiveTimeSelector","useState","dropdownOpen","setDropdownOpen","validationError","setValidationError","startTimeVal","setStartTimeVal","endTimeVal","setEndTimeVal","initialStartTimeVal","setInitialStartTimeVal","initialEndTimeVal","setInitialEndTimeVal","nodeRef","useRef","startInputRef","endInputRef","listboxId","startLabelId","endLabelId","errorId","startOptions","useMemo","TimeHelper","generateTimings","endOptions","flooredStartVal","findClosestFlooredTime","slice","indexOf","parseInput","useCallback","input","parsedInitialStartScrollTime","parsedInitialEndScrollTime","useEffect","start","end","_b","undefined","to24Hour","document","activeElement","current","getDropdownAriaLabel","getInputLabelledBy","type","concatIds","getInputDescribedBy","handleInputFocus","selector","handleInputClick","select","handleKeyDownEvent","event","code","handleStartTime","handleEndTime","blur","handleTimeChange","goToNextInput","triggerOnBlur","startInput","endInput","_c","handleClear","stopPropagation","handleBlur","target","relatedTarget","isFloatingElement","matches","call","isInsideNode","contains","renderClearButton","length","_jsx","className","inputWrapperStyles.clearButtonContainer","children","ClearButton","onClick","_jsxs","Object","assign","clsx","commonStyles.wrapper","DropdownListState","ElementWithDropdown","enabled","isOpen","renderElement","InputWrapper","ref","role","styles.timeFieldContainer","VisuallyHidden","RangeInputInnerContainer","currentActive","BasicInput","placeholder","e","onKeyDown","autoComplete","commonStyles.selectorInput","commonStyles.selectorInputDisabled","renderDropdown","startScrollTime","DropdownList","listItems","onSelectItem","selectedItems","topScrollItem","ariaLabel","disableItemFocus","matchElementWidth","endScrollTime","onClose","reason","onDismiss","focus","offset","fitAvailableHeight","customZIndex","rootNode","FormErrorMessage","tabIndex"],"mappings":"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"}
+{"version":3,"file":"combobox-picker.js","sources":["../../../src/time-range-picker/combobox-picker/combobox-picker.tsx"],"sourcesContent":["import type { OpenChangeReason } from \"@floating-ui/react\";\nimport clsx from \"clsx\";\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\n\nimport { FormErrorMessage } from \"../../form/form-label\";\nimport { concatIds, VisuallyHidden } from \"../../shared/accessibility\";\nimport { DropdownListState } from \"../../shared/dropdown-list\";\nimport { DropdownList } from \"../../shared/dropdown-list/dropdown-list\";\nimport { ElementWithDropdown } from \"../../shared/dropdown-wrapper\";\nimport {\n    BasicInput,\n    ClearButton,\n    InputWrapper,\n} from \"../../shared/input-wrapper\";\nimport * as inputWrapperStyles from \"../../shared/input-wrapper/input-wrapper.styles\";\nimport { RangeInputInnerContainer } from \"../../shared/range-input-inner-container\";\nimport { useId } from \"../../util\";\nimport { TimeHelper } from \"../../util/time-helper\";\nimport * as commonStyles from \"../common.styles\";\nimport type { TimeRangePickerProps, TimeRangePickerValue } from \"../types\";\nimport * as styles from \"./combobox-picker.styles\";\n\ntype TimeRangeInputType = \"start\" | \"end\";\ninterface TimeChangeOptions {\n    goToNextInput?: boolean | undefined;\n    triggerOnBlur?: boolean | undefined;\n}\n\nexport const ComboboxPicker = ({\n    id,\n    disabled = false,\n    error,\n    value,\n    format = \"12hr\",\n    readOnly,\n    onChange,\n    onFocus,\n    onBlur,\n    alignment = \"left\",\n    dropdownZIndex,\n    startLimit,\n    endLimit,\n    initialScrollStartTime,\n    initialScrollEndTime,\n    interval = 15,\n    dropdownRootNode,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    \"aria-invalid\": ariaInvalid,\n    ...otherProps\n}: TimeRangePickerProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const internalId = useId();\n    const [activeTimeSelector, setActiveTimeSelector] =\n        useState<TimeRangeInputType | null>(null);\n    const [dropdownOpen, setDropdownOpen] = useState<boolean>(false);\n    const [validationError, setValidationError] = useState<string>(\"\");\n\n    const [startTimeVal, setStartTimeVal] = useState<string>(\"\");\n    const [endTimeVal, setEndTimeVal] = useState<string>(\"\");\n    const [initialStartTimeVal, setInitialStartTimeVal] = useState<string>(\"\");\n    const [initialEndTimeVal, setInitialEndTimeVal] = useState<string>(\"\");\n\n    const nodeRef = useRef<HTMLDivElement>(null);\n    const startInputRef = useRef<HTMLInputElement>(null);\n    const endInputRef = useRef<HTMLInputElement>(null);\n\n    const listboxId = `${internalId}-listbox`;\n    const startLabelId = `${internalId}-start-label`;\n    const endLabelId = `${internalId}-end-label`;\n    const errorId = `${internalId}-error-message`;\n\n    const startOptions = useMemo(\n        () =>\n            TimeHelper.generateTimings(interval, format, startLimit, endLimit),\n        [interval, format, startLimit, endLimit]\n    );\n    const endOptions = useMemo(() => {\n        if (initialStartTimeVal === \"\") return startOptions;\n\n        const flooredStartVal = TimeHelper.findClosestFlooredTime(\n            initialStartTimeVal,\n            startOptions\n        );\n        return flooredStartVal\n            ? startOptions.slice(startOptions.indexOf(flooredStartVal))\n            : [];\n    }, [startOptions, initialStartTimeVal]);\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    const parseInput = useCallback(\n        (input: string | undefined): string | undefined => {\n            return TimeHelper.parseInput(input, format);\n        },\n        [format]\n    );\n\n    const parsedInitialStartScrollTime = useMemo(\n        () => parseInput(initialScrollStartTime) ?? \"\",\n        [initialScrollStartTime, parseInput]\n    );\n\n    const parsedInitialEndScrollTime = useMemo(\n        () => parseInput(initialScrollEndTime) ?? \"\",\n        [initialScrollEndTime, parseInput]\n    );\n\n    useEffect(() => {\n        if (value) {\n            const start = parseInput(value.start) ?? \"\";\n            const end = parseInput(value.end) ?? \"\";\n\n            setStartTimeVal(start);\n            setEndTimeVal(end);\n            setInitialStartTimeVal(start);\n            setInitialEndTimeVal(end);\n        }\n    }, [value, parseInput]);\n\n    // Validation for keyboard input\n    useEffect(() => {\n        if (error) {\n            setDropdownOpen(false);\n            return;\n        }\n\n        const start = parseInput(startTimeVal);\n        const end = parseInput(endTimeVal);\n\n        if (start === undefined) {\n            setValidationError(\"Invalid start time\");\n        } else if (end === undefined) {\n            setValidationError(\"Invalid end time\");\n        } else if (\n            start !== \"\" &&\n            end !== \"\" &&\n            TimeHelper.to24Hour(end) < TimeHelper.to24Hour(start)\n        ) {\n            setValidationError(\"End time must be after start time\");\n        } else {\n            setValidationError(\"\");\n            // Re-open dropdown if error was corrected\n            if (\n                document.activeElement === startInputRef.current ||\n                document.activeElement === endInputRef.current\n            ) {\n                setDropdownOpen(true);\n            }\n            return;\n        }\n\n        // Hide dropdown so error message is visible\n        setDropdownOpen(false);\n    }, [startTimeVal, endTimeVal, parseInput, error]);\n\n    // =============================================================================\n    // HELPERS\n    // =============================================================================\n    const getDropdownAriaLabel = () => {\n        if (activeTimeSelector === \"start\") {\n            return \"Selecting for: Start time\";\n        }\n\n        if (activeTimeSelector === \"end\") {\n            return \"Selecting for: End time\";\n        }\n\n        return undefined;\n    };\n\n    const getInputLabelledBy = (type: TimeRangeInputType) => {\n        return concatIds(\n            ariaLabelledBy,\n            type === \"start\" ? startLabelId : endLabelId\n        );\n    };\n\n    const getInputDescribedBy = () => {\n        return concatIds(\n            ariaDescribedBy,\n            !error && validationError ? errorId : undefined\n        );\n    };\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleInputFocus = (selector: TimeRangeInputType) => {\n        if (disabled || readOnly) return;\n\n        // Only run onFocus if not already focused\n        if (!activeTimeSelector && !dropdownOpen) onFocus?.();\n\n        setActiveTimeSelector(selector);\n        setDropdownOpen(true);\n    };\n\n    const handleInputClick = (selector: TimeRangeInputType) => {\n        if (disabled || readOnly) return;\n\n        setActiveTimeSelector(selector);\n        setDropdownOpen(true);\n        (selector === \"start\" ? startInputRef : endInputRef).current?.select();\n    };\n\n    function handleKeyDownEvent(event: React.KeyboardEvent<HTMLInputElement>) {\n        switch (event.code) {\n            case \"Enter\":\n                if (activeTimeSelector === \"start\") {\n                    handleStartTime(startTimeVal);\n                } else if (activeTimeSelector === \"end\") {\n                    // Let handleBlur call handleTimeChange instead\n                    if (dropdownOpen) handleEndTime(endTimeVal);\n                    endInputRef.current?.blur();\n                }\n                break;\n            case \"Tab\":\n                handleTimeChange(startTimeVal, endTimeVal, {});\n                break;\n            default:\n                break;\n        }\n    }\n\n    const handleStartTime = (input: string) => {\n        handleTimeChange(input, endTimeVal, { goToNextInput: true });\n    };\n\n    const handleEndTime = (input: string) => {\n        handleTimeChange(startTimeVal, input, { triggerOnBlur: true });\n    };\n\n    const handleTimeChange = (\n        startInput: string,\n        endInput: string,\n        {\n            goToNextInput, // Used by handleStart to move to end input automatically\n            triggerOnBlur, // Used by handleEnd/handleClear to trigger onBlur\n        }: TimeChangeOptions\n    ) => {\n        const start = parseInput(startInput) ?? initialStartTimeVal;\n        const end = parseInput(endInput) ?? initialEndTimeVal;\n\n        setStartTimeVal(start);\n        setEndTimeVal(end);\n\n        const timeValue: TimeRangePickerValue = { start, end };\n\n        // Trigger onChange if values have changed\n        if (start !== initialStartTimeVal || end !== initialEndTimeVal) {\n            onChange?.(timeValue);\n        }\n\n        // Go to end input only if start is a valid time\n        if (goToNextInput && parseInput(startInput) !== undefined) {\n            setActiveTimeSelector(\"end\");\n            endInputRef.current?.select();\n        }\n\n        if (triggerOnBlur) {\n            setActiveTimeSelector(null);\n            setDropdownOpen(false);\n            onBlur?.();\n        }\n\n        setInitialStartTimeVal(start);\n        setInitialEndTimeVal(end);\n    };\n\n    const handleClear = (event: React.MouseEvent) => {\n        event.stopPropagation();\n        setStartTimeVal(\"\");\n        setEndTimeVal(\"\");\n        setInitialStartTimeVal(\"\");\n        setInitialEndTimeVal(\"\");\n\n        const timeValue: TimeRangePickerValue = {\n            start: \"\",\n            end: \"\",\n        };\n\n        onChange?.(timeValue);\n        setActiveTimeSelector(null);\n        setDropdownOpen(false);\n    };\n\n    const handleDismiss = () => {\n        (activeTimeSelector === \"start\"\n            ? startInputRef\n            : endInputRef\n        ).current?.focus();\n        setDropdownOpen(false);\n    };\n\n    const handleBlur = (event: React.FocusEvent<HTMLDivElement, Element>) => {\n        const target = event.relatedTarget as HTMLElement;\n\n        const isFloatingElement =\n            target?.matches?.(\"[data-floating-ui-focusable]\") ||\n            target?.matches?.(\"[data-floating-ui-focus-guard]\");\n        const isInsideNode =\n            nodeRef.current && nodeRef.current.contains(target);\n\n        // Condition when the calendar is closed and focus moved outside the component\n        const shouldBlurWhenClosed =\n            activeTimeSelector &&\n            !dropdownOpen &&\n            !isInsideNode &&\n            !isFloatingElement;\n\n        if (shouldBlurWhenClosed) {\n            handleTimeChange(startTimeVal, endTimeVal, { triggerOnBlur: true });\n        }\n    };\n\n    // NOTE: Dropdown dismissal (esc) does not trigger onClose\n    const handleClose = (reason: OpenChangeReason | undefined) => {\n        if (reason === \"outside-press\") {\n            // No handleTimeChange to avoid duplicate call from handleBlur\n            setActiveTimeSelector(null);\n            setDropdownOpen(false);\n            onBlur?.();\n        } else {\n            // Dropdown closed via exiting component (eg. tab)\n            handleTimeChange(startTimeVal, endTimeVal, { triggerOnBlur: true });\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderClearButton = () => {\n        if (\n            !readOnly &&\n            !disabled &&\n            (startTimeVal?.length > 0 || endTimeVal?.length > 0)\n        ) {\n            return (\n                <div className={inputWrapperStyles.clearButtonContainer}>\n                    <ClearButton\n                        onClick={handleClear}\n                        type=\"button\"\n                        aria-label=\"Clear\"\n                    />\n                </div>\n            );\n        }\n    };\n\n    const renderDropdown = () => {\n        if (activeTimeSelector === \"start\") {\n            // Prioritise start time value. If non existent, use initial scroll time\n            // If both are non existent, DropdownList will default to first option\n            const startScrollTime =\n                parseInput(startTimeVal) || parsedInitialStartScrollTime;\n\n            return (\n                <DropdownList\n                    listItems={startOptions}\n                    onSelectItem={handleStartTime}\n                    selectedItems={[startTimeVal]}\n                    topScrollItem={TimeHelper.findClosestFlooredTime(\n                        startScrollTime,\n                        startOptions\n                    )}\n                    listboxId={listboxId}\n                    ariaLabel={getDropdownAriaLabel()}\n                    disableItemFocus\n                    matchElementWidth\n                />\n            );\n        } else {\n            const endScrollTime =\n                parseInput(endTimeVal) || parsedInitialEndScrollTime;\n\n            return (\n                <DropdownList\n                    listItems={endOptions}\n                    onSelectItem={handleEndTime}\n                    selectedItems={[endTimeVal]}\n                    topScrollItem={TimeHelper.findClosestFlooredTime(\n                        endScrollTime,\n                        endOptions\n                    )}\n                    listboxId={listboxId}\n                    ariaLabel={getDropdownAriaLabel()}\n                    disableItemFocus\n                    matchElementWidth\n                />\n            );\n        }\n    };\n\n    const renderElement = () => (\n        <InputWrapper\n            ref={nodeRef}\n            disabled={disabled}\n            error={error || !!validationError}\n            readOnly={readOnly}\n            onBlur={handleBlur}\n            role=\"group\"\n            data-testid=\"timepicker-container\"\n            className={styles.timeFieldContainer}\n        >\n            <VisuallyHidden id={startLabelId}>Start time</VisuallyHidden>\n            <VisuallyHidden id={endLabelId}>End time</VisuallyHidden>\n\n            <RangeInputInnerContainer\n                error={error || !!validationError}\n                currentActive={\n                    activeTimeSelector === null ? \"none\" : activeTimeSelector\n                }\n            >\n                {/* From */}\n                <BasicInput\n                    ref={startInputRef}\n                    onFocus={() => handleInputFocus(\"start\")}\n                    placeholder={\n                        activeTimeSelector === \"start\" ? \"hh:mm\" : \"From\"\n                    }\n                    onChange={(e) => setStartTimeVal(e.target.value)}\n                    value={startTimeVal}\n                    readOnly={readOnly || disabled}\n                    data-testid={\n                        otherProps[\"data-testid\"]\n                            ? `${otherProps[\"data-testid\"]}-timepicker-selector-start`\n                            : \"timepicker-selector-start\"\n                    }\n                    onClick={() => handleInputClick(\"start\")}\n                    onKeyDown={handleKeyDownEvent}\n                    autoComplete=\"off\"\n                    type=\"text\"\n                    role=\"combobox\"\n                    aria-labelledby={getInputLabelledBy(\"start\")}\n                    aria-describedby={getInputDescribedBy()}\n                    aria-expanded={\n                        dropdownOpen && activeTimeSelector === \"start\"\n                    }\n                    aria-controls={listboxId}\n                    aria-autocomplete=\"list\"\n                    aria-invalid={error || ariaInvalid || !!validationError}\n                    aria-disabled={disabled}\n                    aria-readonly={readOnly}\n                    className={clsx(\n                        commonStyles.selectorInput,\n                        disabled && commonStyles.selectorInputDisabled\n                    )}\n                />\n                {/* To */}\n                <BasicInput\n                    ref={endInputRef}\n                    onFocus={() => handleInputFocus(\"end\")}\n                    placeholder={activeTimeSelector === \"end\" ? \"hh:mm\" : \"To\"}\n                    onChange={(e) => setEndTimeVal(e.target.value)}\n                    value={endTimeVal}\n                    readOnly={readOnly || disabled}\n                    data-testid={\n                        otherProps[\"data-testid\"]\n                            ? `${otherProps[\"data-testid\"]}-timepicker-selector-end`\n                            : \"timepicker-selector-end\"\n                    }\n                    onClick={() => handleInputClick(\"end\")}\n                    onKeyDown={handleKeyDownEvent}\n                    autoComplete=\"off\"\n                    type=\"text\"\n                    role=\"combobox\"\n                    aria-labelledby={getInputLabelledBy(\"end\")}\n                    aria-describedby={getInputDescribedBy()}\n                    aria-expanded={dropdownOpen && activeTimeSelector === \"end\"}\n                    aria-controls={listboxId}\n                    aria-autocomplete=\"list\"\n                    aria-invalid={\n                        error || ariaInvalid || !!validationError || undefined\n                    }\n                    aria-disabled={disabled || undefined}\n                    aria-readonly={readOnly || undefined}\n                    className={clsx(\n                        commonStyles.selectorInput,\n                        disabled && commonStyles.selectorInputDisabled\n                    )}\n                />\n            </RangeInputInnerContainer>\n            {renderClearButton()}\n        </InputWrapper>\n    );\n\n    const renderError = () =>\n        // Only display internal error message if user does not provide one\n        !error &&\n        validationError && (\n            <FormErrorMessage\n                id={errorId}\n                tabIndex={0}\n                data-testid={id ? `${id}-error-message` : \"error-message\"}\n            >\n                {validationError}\n            </FormErrorMessage>\n        );\n\n    return (\n        <div\n            id={id}\n            {...otherProps}\n            className={clsx(commonStyles.wrapper, otherProps.className)}\n        >\n            <DropdownListState>\n                <ElementWithDropdown\n                    enabled={!readOnly && !disabled}\n                    isOpen={dropdownOpen}\n                    renderElement={renderElement}\n                    renderDropdown={renderDropdown}\n                    onClose={handleClose}\n                    onDismiss={handleDismiss}\n                    offset={8}\n                    alignment={alignment}\n                    fitAvailableHeight\n                    customZIndex={dropdownZIndex}\n                    rootNode={dropdownRootNode}\n                />\n            </DropdownListState>\n            {renderError()}\n        </div>\n    );\n};\n"],"names":["ComboboxPicker","_a","id","disabled","error","value","format","readOnly","onChange","onFocus","onBlur","alignment","dropdownZIndex","startLimit","endLimit","initialScrollStartTime","initialScrollEndTime","interval","dropdownRootNode","ariaLabelledBy","ariaDescribedBy","ariaInvalid","otherProps","__rest","internalId","useId","activeTimeSelector","setActiveTimeSelector","useState","dropdownOpen","setDropdownOpen","validationError","setValidationError","startTimeVal","setStartTimeVal","endTimeVal","setEndTimeVal","initialStartTimeVal","setInitialStartTimeVal","initialEndTimeVal","setInitialEndTimeVal","nodeRef","useRef","startInputRef","endInputRef","listboxId","startLabelId","endLabelId","errorId","startOptions","useMemo","TimeHelper","generateTimings","endOptions","flooredStartVal","findClosestFlooredTime","slice","indexOf","parseInput","useCallback","input","parsedInitialStartScrollTime","parsedInitialEndScrollTime","useEffect","start","end","_b","undefined","to24Hour","document","activeElement","current","getDropdownAriaLabel","getInputLabelledBy","type","concatIds","getInputDescribedBy","handleInputFocus","selector","handleInputClick","select","handleKeyDownEvent","event","code","handleStartTime","handleEndTime","blur","handleTimeChange","goToNextInput","triggerOnBlur","startInput","endInput","_c","handleClear","stopPropagation","handleBlur","target","relatedTarget","isFloatingElement","matches","call","isInsideNode","contains","renderClearButton","length","_jsx","className","inputWrapperStyles.clearButtonContainer","children","ClearButton","onClick","_jsxs","Object","assign","clsx","commonStyles.wrapper","DropdownListState","ElementWithDropdown","enabled","isOpen","renderElement","InputWrapper","ref","role","styles.timeFieldContainer","VisuallyHidden","RangeInputInnerContainer","currentActive","BasicInput","placeholder","e","onKeyDown","autoComplete","commonStyles.selectorInput","commonStyles.selectorInputDisabled","renderDropdown","startScrollTime","DropdownList","listItems","onSelectItem","selectedItems","topScrollItem","ariaLabel","disableItemFocus","matchElementWidth","endScrollTime","onClose","reason","onDismiss","focus","offset","fitAvailableHeight","customZIndex","rootNode","FormErrorMessage","tabIndex"],"mappings":"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"}

package/time-range-picker/time-range-picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"time-range-picker.js","sources":["../../src/time-range-picker/time-range-picker.tsx"],"sourcesContent":["import { ComboboxPicker } from \"./combobox-picker/combobox-picker\";\nimport { DialPicker } from \"./dial-picker/dial-picker\";\nimport type { TimeRangePickerProps } from \"./types\";\n\n/**\n * A two-field time picker for selecting a start and end time.\n *\n * Use `TimeRangePicker` when users need to define a time range.\n */\nexport const TimeRangePicker = ({\n    variant = \"dial\",\n    ...otherProps\n}: TimeRangePickerProps) => {\n    if (variant === \"combobox\") {\n        return <ComboboxPicker {...otherProps} />;\n    } else {\n        return <DialPicker {...otherProps} />;\n    }\n};\n"],"names":["TimeRangePicker","_a","variant","otherProps","__rest","_jsx","ComboboxPicker","DialPicker","Object","assign"],"mappings":"uNASO,MAAMA,EAAmBC,QAAAC,QAC5BA,EAAU,QAAMD,EACbE,EAAUC,EAAAH,EAFe,aAI5B,OACWI,EADK,aAAZH,EACQI,EAEAC,EAFcC,OAAAC,OAAA,CAAA,EAAKN,GAG/B"}
+{"version":3,"file":"time-range-picker.js","sources":["../../src/time-range-picker/time-range-picker.tsx"],"sourcesContent":["import { ComboboxPicker } from \"./combobox-picker/combobox-picker\";\nimport { DialPicker } from \"./dial-picker/dial-picker\";\nimport type { TimeRangePickerProps } from \"./types\";\n\n// @catalog\n/**\n * A two-field time picker for selecting a start and end time.\n *\n * Use `TimeRangePicker` when users need to define a time range.\n */\nexport const TimeRangePicker = ({\n    variant = \"dial\",\n    ...otherProps\n}: TimeRangePickerProps) => {\n    if (variant === \"combobox\") {\n        return <ComboboxPicker {...otherProps} />;\n    } else {\n        return <DialPicker {...otherProps} />;\n    }\n};\n"],"names":["TimeRangePicker","_a","variant","otherProps","__rest","_jsx","ComboboxPicker","DialPicker","Object","assign"],"mappings":"uNAUO,MAAMA,EAAmBC,QAAAC,QAC5BA,EAAU,QAAMD,EACbE,EAAUC,EAAAH,EAFe,aAI5B,OACWI,EADK,aAAZH,EACQI,EAEAC,EAFcC,OAAAC,OAAA,CAAA,EAAKN,GAG/B"}

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

@@ -115,7 +115,7 @@ export interface TimeRangePickerProps {
      * Note: if a parent of the trigger has a higher `z-index` than the dropdown,
      * the dropdown may be obscured.
      *
-     * @default `document.body`
+     * @default document.body
      */
     dropdownRootNode?: RefObject<HTMLElement> | undefined;
     /**

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 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":"82CA+BA,MAgdaA,EAAcC,GA9cT,CAACC,EAAyBC,KAIxC,MACI,cAAeC,EAAMC,UACrBA,EAASC,QACTA,EAAU,UAASC,UACnBA,EAASC,QACTA,EAAOC,MACPA,EAAKC,YACLA,EAAWC,QACXA,EAAOC,gBACPA,EAAeC,kBACfA,EAAiBC,uBACjBA,IAAyB,GACzBZ,EACEa,GAASC,EAAuB,OAC/BC,GAAgBC,IAAqBC,EAAiB,IACtDC,GAAaC,IAAkBF,EAAiB,GACjDG,GAAYC,EAAajB,GAEzBkB,GAAoBC,EAAkBC,oBACxCnB,EACA,SAEEoB,GAAkBF,EAAkBC,oBACtClB,EACA,OAGEoB,GAA+B,IAAZN,GAGzBO,EAAoB1B,GAAK,KAAA,CACrB2B,mBAGJ,MAAQC,QAASC,GAAcC,cAAeC,IAAaC,GAAQ,IACxDV,EAAkBW,aACrB,CAAEC,MAAOb,GAAmBc,IAAKX,IACjClB,EACAH,IAEL,CAACkB,GAAmBG,GAAiBlB,EAAOH,IAM/CiC,GAAU,KACN,MAAMC,EAAYzB,GAAO0B,QAOzB,OANID,IACAA,EAAUE,iBAAiB,SAAUC,IAErCtB,GAAemB,EAAUpB,cAGtB,KACCoB,GACAA,EAAUI,oBAAoB,SAAUD,GAC5C,CACH,GACF,IAGHJ,GAAU,KACNT,IAAa,GACd,CAACjB,EAAmBS,GAAWf,EAAWC,IAM7C,MAAMmC,GAAe,KACb5B,GAAO0B,SACPvB,GAAkBH,GAAO0B,QAAQI,WACrC,EAmBJC,EAAkB,CACdC,SAPiB,KACbhC,GAAO0B,SACPpB,GAAeN,GAAO0B,QAAQrB,YAClC,EAKA4B,UAAWjC,GACXkC,YAAa,WACbC,YAAa,KAWjB,MAAMC,GAAoBC,GACfA,GAAa9B,GAAY,EAG9B+B,GAAiBC,IACnB,GAAKlD,EACL,MAAO,GAAGA,KAAUkD,GAAQ,EAO1BC,GAA8B,CAChCC,EACAC,EACAnD,KAEA,MAAMoD,EAAkC,IAAzBF,EAAYG,SAE3B,GAAgB,YAAZrD,EACA,OAAOoD,EASX,OALIA,IACCD,EACKD,EAAYI,OAAS,GAAM,EAC3BJ,EAAYI,OAAS,GAAM,EAEf,EAIpB9B,GAAc,KAChB,GAAIjB,GAAqBE,GAAO0B,SAAWnB,GAAY,EAAG,CACtD,MAAML,EAAiB4C,EAAWC,wBAAwB,CACtDC,WAAYlD,EACZmD,QAASxC,GACTyC,QAAStC,GACTuC,SAzJM,GA0JNC,cAAe7C,GACf8C,QAAS,CACLC,gBAAiBvD,MAIF,OAAnBG,IACAF,GAAO0B,QAAQI,WAAa5B,EAEpC,GAGEqD,GAAaC,GACXjE,IAAYiE,EA6MdC,GAAqBC,IACvB,MAAMC,EAAuB,SAAdD,EACTE,EAAuBlD,EAAkBmD,eAC3CpD,GACAG,GACAL,IAOJ,KAFwBoD,EAHCzD,GAAiB,EAEtCA,GAAiBG,GAAcuD,GAGb,OAAO,KAE7B,MAAME,EAAiBH,EACjBI,EACAC,EACAC,EACU,YAAZ1E,EACM2E,EACAC,EACJC,EACFC,EADcV,EACbW,EAEAC,EAFe,CAACjF,UAAWkF,IAKhC,OACIH,EAACI,iBACgBnC,GAAc,SAASoB,KAAY,eAAA,EAEhDgB,UAAU,EACVpF,UAAWqF,EACPC,EACAd,EACAG,GAEJY,gBAAgB,EAChBC,aAAa,OACblF,QAAS,KAzUU,CAAC8D,IACxB1D,GAAO0B,SACP1B,GAAO0B,QAAQqD,SAAS,CACpBC,KACkB,SAAdtB,GAAwB7C,GAAmBA,GAC/CoE,SAAU,UAElB,EAmUYC,CAAuBxB,EAAU,EACpCyB,SAEAf,GACW,EAIxB,OACIgB,EAAA,MAAA,CAAK9F,UAAWqF,EAAKU,EAAkB/F,aACnC8F,EAAA,MAAA,CAAA,cACiB/F,EACbD,IAAKY,GACLV,UAAWqF,EACPW,EACY,YAAZ/F,EACMgG,EACAC,GACTL,SAAA,CAEDd,EAAA,MAAA,CACI/E,UAAWmG,EAAwB,cACtBnD,GAAc,uBAAsB,UACzC,iBAAgB6C,SAnQd,MACtB,MAAMO,EAAc,GACdC,EAAqBC,EAAMnF,GAAmB,SAC9CoF,EAAmBD,EAAMhF,GAAiB,SAE1C8B,EAAkBiD,EAAmB9C,OAAS,GAAM,EAE1D,IACI,IAAIJ,EAAckD,EAClBlD,EAAYqD,SAASD,GACrBpD,EAAcA,EAAYsD,IA1LhB,GA0LmC,UAC/C,CACE,MAAMC,EAAwBxD,GAC1BC,EACAC,EACAnD,GAGJmG,EAAYO,KACR5B,EAAA,MAAA,CAAA,cACiB,GAAG5B,EAAYyD,OAAO,kBAEnC5G,UAAWqF,EACPwB,EACY,YAAZ5G,EACM6G,EACAC,EACNL,GAAyBM,GAC5BnB,SAEAa,GACG3B,EAACkC,EAAWC,QACRlH,UAAWmH,EACXC,OAAO,WAAUvB,SAEhBzE,EAAkBiG,oBACflE,EAAYyD,OAAO,aAf1BzD,EAAYyD,OAAO,UAqBpC,CACA,OAAOR,CAAW,EA0NLkB,KAELvC,EAAA,MAAA,CAAKwC,KAAK,oBAAmB5F,GAAcyD,SAAU,EAACS,SAClDC,EAAA,MAAA,CACI9F,UAAWwH,EAAsB,cACpBxE,GAAc,qBAAoB,UACvC,eACRuE,KAAK,gBA7NM,MAC3B,IAAKhH,EAAiB,OAEtB,MAAMkH,gBACFA,EAAeC,iBACfA,EAAgBC,qBAChBA,EAAoBC,sBACpBA,EAAqBC,UACrBA,EAAY,WACZtH,EAEEwC,EAAY3B,EAAkBmD,eAChCpD,GACAG,GACAL,IAGE6G,IAAgBxH,GAAW2D,GAAU,WAE3C,OACI6B,EAAAiC,EAAA,CAAAlC,SAAA,CACId,EAACiD,EAAe,CAAC/H,QAASA,IAC1B8E,EAACkD,EAAY,CAEThI,QAASA,EACTiI,WAAYlF,GAAc,oBAC1BD,UAAWA,EACXoF,WAAY,EACZ7H,QAASwH,EAAcxH,OAAU8H,WAEjCrD,EAACsD,EAAQ,CACLrI,UAAWsI,EACXT,UAAWA,EACXU,QAASd,EACTe,SAAUd,EACVe,aAAcd,EACde,cAAed,EACfe,UAAWb,KAdV,sBAiBV,EAuLUc,GAjLV/G,GAASgH,KAAKC,IACjB,MAAMC,GACFA,EACA7I,UAAW8I,EACX7I,QAAS8I,EAAWC,MACpBA,EAAKP,UACLA,GAAY,EAAIpI,gBAChBA,EAAe4I,UACfA,GACAL,GAEEM,MACFA,EAAKvB,UACLA,EAAY,UAASJ,gBACrBA,EAAeC,iBACfA,EAAgBC,qBAChBA,EAAoBC,sBACpBA,GACArH,EAEEwC,EAAY3B,EAAkBmD,eAChCyE,EACAC,EACAhI,IAEEkH,EAAa/G,EAAkBmD,eACjCpD,GACA6H,EACA/H,IAGE6G,EAAca,GAAyB,YAAZ1I,EAC3BoJ,EAAYpF,GAAU,YAAciF,EAEpCI,EACDC,GACAC,IACGA,EAAIC,kBAEJ,MAAQN,UAAWO,GAAeH,EAATT,EAAIa,EAAKJ,EAA5B,CAAA,cACFzB,GAAazH,EAAYyI,EAAK,EAG1C,OACIhD,SAAcyB,KAAK,WAAU1B,SAAA,CACzBd,EAACiD,EAAe,CACZ/H,QAASA,EACTyF,KAAMyC,EACND,WAAW,iBAEfnD,EAACkD,GACGhI,QAASA,EACTiI,WAAYlF,GAAc,GAAG+F,cAC7BhG,UAAWA,EACXoF,WAAYA,EACZiB,MAAOA,EACP9I,QAASgJ,EAAgBR,GAAKjD,SAE9BC,EAACuC,EAAQ,CACLrI,UAAWsI,EACXT,UAAWA,EACXU,QAASd,EACTe,SAAUd,EACVe,aAAcd,EACde,cAAed,EACfe,UAAWb,EAAWjC,SAAA,GAEnBsD,GACCpE,EAAC6E,EAAc,CAAA/D,SACXd,YACI8E,KAAK,SACU,iBAAC/B,EAAW,aACfqB,EACZ7I,QAASgJ,EAAgBR,OAKpCO,GACGtE,EAACkC,EAAWC,QACRlH,UAAW8J,EACX1C,OAAQ,0BACM+B,WAEbrG,GAAiBC,GACZ,MACAmG,SAKrB/I,IAAY8I,GACTlE,EAACiD,GACG/H,QAASA,EACTiI,WAAW,aACXxC,KAAMyC,EAAapF,MAnDrBgG,EAsDJ,YAoFT5E,GAAkB,QAClBA,GAAkB,WACjB"}
+{"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// @catalog\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

@@ -9,7 +9,6 @@ export type TimeSlotBarVariant = "minified" | "default";
 export type { SlotStyle } from "../shared/time-slot/types";
 /**
  * Imperative handle returned by `TimeSlotBar` via `ref`.
- *
  */
 export interface TimeSlotBarRef {
     /**
@@ -22,6 +21,11 @@ export interface TimeSlotBarRef {
  * Visual styling attributes applied to an individual time slot or the bar background.
  */
 interface TimeSlotBarStyleAttributes {
+    /**
+     * Visual style for the slot fill.
+     *
+     * @default "default"
+     */
     styleType?: SlotStyle | undefined;
     /** Text color for the slot label. */
     color?: string | undefined;

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\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"}
+{"version":3,"file":"time-slot-bar-week.js","sources":["../../src/time-slot-bar-week/time-slot-bar-week.tsx"],"sourcesContent":["import type { Dayjs } from \"dayjs\";\nimport dayjs from \"dayjs\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport type { CalendarManagerRef } from \"../shared/internal-calendar\";\nimport { CalendarManager } from \"../shared/internal-calendar/calendar-manager\";\nimport type { TimeSlot } from \"../time-slot-bar\";\nimport { DateHelper } from \"../util\";\nimport * as styles from \"./time-slot-bar-week.styles\";\nimport { TimeSlotBarWeekDays } from \"./time-slot-bar-week-days\";\nimport type { TimeSlotBarWeekProps } from \"./types\";\n\nconst DATE_FORMAT = \"YYYY-MM-DD\";\n\n// @catalog\n/**\n * A week calendar grid with a time axis, rendering detailed slot bars within\n * each day column.\n *\n * Use `TimeSlotBarWeek` for detailed time-of-day scheduling where each cell\n * represents a configurable time interval. For a simpler day-level overview\n * without a time axis, use `TimeSlotWeekView` instead.\n */\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,aAWPC,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"}

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

@@ -36,10 +36,14 @@ export interface TimeSlotBarWeekProps extends CommonCalendarProps {
     value?: string | undefined;
     /**
      * Duration in minutes that each time slot cell represents.
+     *
+     * @default 30
      */
     interval?: number | undefined;
     /**
      * Controls how time slot cells are sized within each day column.
+     *
+     * @default "flexible"
      */
     variant?: TimeSlotCellsVariant | undefined;
     /**
@@ -57,6 +61,8 @@ export interface TimeSlotBarWeekProps extends CommonCalendarProps {
     /**
      * When `true`, the user can click a day column to select that date,
      * triggering `onChange`.
+     *
+     * @default true
      */
     enableSelection?: boolean | undefined;
     /**

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

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

package/time-slot-week-view/types.d.ts

@@ -29,6 +29,8 @@ export interface TimeSlotWeekViewProps extends CommonCalendarProps {
     /**
      * When `true`, the user can click a day column to select that date,
      * triggering `onChange`
+     *
+     * @default true
      */
     enableSelection?: boolean | undefined;
     /**

package/timeline/timeline.js.map

@@ -1 +1 @@
-{"version":3,"file":"timeline.js","sources":["../../src/timeline/timeline.tsx"],"sourcesContent":["import { ExclamationCircleFillIcon, TickIcon } from \"@lifesg/react-icons\";\nimport clsx from \"clsx\";\nimport { useRef } from \"react\";\n\nimport type { PillProps } from \"../pill\";\nimport { Pill } from \"../pill\";\nimport { VisuallyHidden } from \"../shared/accessibility\";\nimport { useApplyStyle } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport * as styles from \"./timeline.styles\";\nimport type { TimelineItemProps, TimelineProps, Variant } from \"./types\";\n\n/**\n * A vertically ordered list of steps with visual state indicators.\n *\n * Use `Timeline` to communicate multi-step progress such as application stages\n * or process flows.\n */\nexport const Timeline = ({\n    items,\n    className,\n    id,\n    title,\n    startCol,\n    colSpan,\n    \"data-base-indicator-testid\": baseIndicatorTestId,\n    \"data-testid\": testId = \"timeline\",\n    headingLevel = 2,\n    counterOffset = 0,\n}: TimelineProps): JSX.Element => {\n    const wrapperRef = useRef<HTMLDivElement>(null);\n\n    useApplyStyle(wrapperRef, {\n        [styles.tokens.wrapper.startCol]: startCol,\n        [styles.tokens.wrapper.colSpan]: colSpan,\n    });\n\n    // ===========================================================================\n    // RENDER\n    // ===========================================================================\n    const renderContent = (content: string | JSX.Element): JSX.Element => {\n        if (typeof content === \"string\") {\n            return (\n                <Typography.BodyMD className=\"timeline-item-content-text\">\n                    {content}\n                </Typography.BodyMD>\n            );\n        }\n\n        return <>{content}</>;\n    };\n\n    const renderTitle = (\n        title: string | JSX.Element,\n        level: number\n    ): JSX.Element => {\n        if (typeof title === \"string\") {\n            return (\n                <Typography.HeadingXS\n                    as=\"h3\"\n                    aria-level={level}\n                    weight=\"semibold\"\n                    className={clsx(\n                        styles.timelineItemTitle,\n                        \"timeline-item-title\"\n                    )}\n                >\n                    {title}\n                </Typography.HeadingXS>\n            );\n        }\n\n        return <>{title}</>;\n    };\n\n    const renderStatusPills = (statuses: PillProps[]): JSX.Element[] => {\n        // maximum 2 pills allowed\n        const renderableStatuses = statuses.slice(0, 2);\n        return renderableStatuses.map((status: PillProps, index) => {\n            return (\n                <Pill\n                    {...status}\n                    type={status.type}\n                    key={`status-pill-${index}`}\n                    data-testid=\"status-pill\"\n                    className=\"timeline-status-pill\"\n                >\n                    {status.children}\n                </Pill>\n            );\n        });\n    };\n\n    const renderIcon = (variant: Variant, index: number) => {\n        switch (variant) {\n            case \"completed\":\n                return <TickIcon aria-hidden />;\n            case \"error\":\n                return <ExclamationCircleFillIcon aria-hidden />;\n            case \"numeric\":\n                return <span aria-hidden>{index + 1 + counterOffset}</span>;\n            default:\n                return null;\n        }\n    };\n\n    const getStatus = (variant: Variant, index: number) => {\n        switch (variant) {\n            case \"current\":\n                return \"Current step\";\n            case \"completed\":\n                return \"Completed step\";\n            case \"upcoming-active\":\n                return \"Upcoming active step\";\n            case \"upcoming-inactive\":\n                return \"Upcoming inactive step\";\n            case \"disabled\":\n                return \"Inactive step\";\n            case \"error\":\n                return \"Current step, action required\";\n            case \"numeric\":\n                return `Step number ${index + 1 + counterOffset}`;\n            default:\n                return \"\";\n        }\n    };\n\n    const renderItems = () =>\n        items.map((item: TimelineItemProps, index) => {\n            const { title, content, statuses, variant: _variant } = item;\n            const circleIndicatorTestId = baseIndicatorTestId\n                ? `circleindicator${index + 1}_div_${baseIndicatorTestId}`\n                : \"circleindicator\";\n            const variant =\n                _variant || (index === 0 ? \"current\" : \"upcoming-active\");\n\n            return (\n                <div\n                    key={`timeline-item-${index}`}\n                    role=\"listitem\"\n                    className={styles.timelineItem}\n                >\n                    <div className={styles.timelineIndicators}>\n                        <div\n                            data-testid={circleIndicatorTestId}\n                            className={styles.circleIndicator}\n                            data-variant={variant}\n                        >\n                            <VisuallyHidden>\n                                {getStatus(variant, index)}\n                            </VisuallyHidden>\n                            {renderIcon(variant, index)}\n                        </div>\n                        <div\n                            className={styles.lineIndicator}\n                            data-variant={variant}\n                        />\n                    </div>\n                    <div\n                        className={clsx(\n                            styles.timelineItemContent,\n                            \"timeline-item-content\"\n                        )}\n                    >\n                        {renderTitle(title, headingLevel + 1)}\n                        {statuses && (\n                            <div className={styles.timelinePills}>\n                                {renderStatusPills(statuses)}\n                            </div>\n                        )}\n                        {renderContent(content)}\n                    </div>\n                </div>\n            );\n        });\n\n    return (\n        <div\n            ref={wrapperRef}\n            className={clsx(styles.timelineWrapper, className)}\n            id={id}\n            data-testid={testId}\n        >\n            <Typography.HeadingSM\n                as=\"h2\"\n                aria-level={headingLevel}\n                data-testid=\"timeline-title\"\n                weight=\"bold\"\n                className={styles.timelineTitle}\n            >\n                {title}\n            </Typography.HeadingSM>\n            <div role=\"list\">{renderItems()}</div>\n        </div>\n    );\n};\n"],"names":["Timeline","items","className","id","title","startCol","colSpan","baseIndicatorTestId","testId","headingLevel","counterOffset","wrapperRef","useRef","useApplyStyle","styles.tokens","wrapper","renderContent","content","_jsx","Typography","BodyMD","children","_Fragment","renderTitle","level","HeadingXS","as","weight","clsx","styles.timelineItemTitle","renderStatusPills","statuses","slice","map","status","index","_createElement","Pill","Object","assign","type","key","renderIcon","variant","TickIcon","ExclamationCircleFillIcon","getStatus","_jsxs","ref","styles.timelineWrapper","HeadingSM","styles.timelineTitle","role","item","_variant","styles.timelineItem","styles.timelineIndicators","styles.circleIndicator","VisuallyHidden","styles.lineIndicator","styles.timelineItemContent","styles.timelinePills"],"mappings":"w6BAkBO,MAAMA,EAAW,EACpBC,QACAC,YACAC,KACAC,QACAC,WACAC,UACA,6BAA8BC,EAC9B,cAAeC,EAAS,WACxBC,eAAe,EACfC,gBAAgB,MAEhB,MAAMC,EAAaC,EAAuB,MAE1CC,EAAcF,EAAY,CACtB,CAACG,EAAcC,QAAQV,UAAWA,EAClC,CAACS,EAAcC,QAAQT,SAAUA,IAMrC,MAAMU,EAAiBC,GACI,iBAAZA,EAEHC,EAACC,EAAWC,OAAM,CAAClB,UAAU,6BAA4BmB,SACpDJ,IAKNC,EAAAI,EAAA,CAAAD,SAAGJ,IAGRM,EAAc,CAChBnB,EACAoB,IAEqB,iBAAVpB,EAEHc,EAACC,EAAWM,UAAS,CACjBC,GAAG,KAAI,aACKF,EACZG,OAAO,WACPzB,UAAW0B,EACPC,EACA,uBACHR,SAEAjB,IAKNc,EAAAI,EAAA,CAAAD,SAAGjB,IAGR0B,EAAqBC,GAEIA,EAASC,MAAM,EAAG,GACnBC,KAAI,CAACC,EAAmBC,IAE1CC,EAACC,EAAIC,OAAAC,OAAA,GACGL,EAAM,CACVM,KAAMN,EAAOM,KACbC,IAAK,eAAeN,IAAO,cACf,cACZjC,UAAU,yBAETgC,EAAOb,YAMlBqB,EAAa,CAACC,EAAkBR,KAClC,OAAQQ,GACJ,IAAK,YACD,OAAOzB,EAAC0B,EAAQ,CAAA,eAAA,IACpB,IAAK,QACD,OAAO1B,EAAC2B,EAAyB,CAAA,eAAA,IACrC,IAAK,UACD,OAAO3B,oCAAmBiB,EAAQ,EAAIzB,IAC1C,QACI,OAAO,OAIboC,EAAY,CAACH,EAAkBR,KACjC,OAAQQ,GACJ,IAAK,UACD,MAAO,eACX,IAAK,YACD,MAAO,iBACX,IAAK,kBACD,MAAO,uBACX,IAAK,oBACD,MAAO,yBACX,IAAK,WACD,MAAO,gBACX,IAAK,QACD,MAAO,gCACX,IAAK,UACD,MAAO,eAAeR,EAAQ,EAAIzB,IACtC,QACI,MAAO,KAqDnB,OACIqC,EAAA,MAAA,CACIC,IAAKrC,EACLT,UAAW0B,EAAKqB,EAAwB/C,GACxCC,GAAIA,EAAE,cACOK,EAAMa,SAAA,CAEnBH,EAACC,EAAW+B,UAAS,CACjBxB,GAAG,KAAI,aACKjB,EAAY,cACZ,iBACZkB,OAAO,OACPzB,UAAWiD,EAAoB9B,SAE9BjB,IAELc,EAAA,MAAA,CAAKkC,KAAK,OAAM/B,SAhEpBpB,EAAMgC,KAAI,CAACoB,EAAyBlB,KAChC,MAAM/B,MAAEA,EAAKa,QAAEA,EAAOc,SAAEA,EAAUY,QAASW,GAAaD,EAIlDV,EACFW,IAAuB,IAAVnB,EAAc,UAAY,mBAE3C,OACIY,EAAA,MAAA,CAEIK,KAAK,WACLlD,UAAWqD,EAAmBlC,SAAA,CAE9B0B,SAAK7C,UAAWsD,EAAyBnC,SAAA,CACrC0B,uBAbkBxC,EACxB,kBAAkB4B,EAAQ,SAAS5B,IACnC,kBAaUL,UAAWuD,EAAsB,eACnBd,EAAOtB,SAAA,CAErBH,EAACwC,EAAc,CAAArC,SACVyB,EAAUH,EAASR,KAEvBO,EAAWC,EAASR,MAEzBjB,EAAA,MAAA,CACIhB,UAAWyD,EAAoB,eACjBhB,OAGtBI,EAAA,MAAA,CACI7C,UAAW0B,EACPgC,EACA,yBACHvC,SAAA,CAEAE,EAAYnB,EAAOK,EAAe,GAClCsB,GACGb,EAAA,MAAA,CAAKhB,UAAW2D,EAAoBxC,SAC/BS,EAAkBC,KAG1Bf,EAAcC,QAhCd,iBAAiBkB,IAkCpB,QAqBR"}
+{"version":3,"file":"timeline.js","sources":["../../src/timeline/timeline.tsx"],"sourcesContent":["import { ExclamationCircleFillIcon, TickIcon } from \"@lifesg/react-icons\";\nimport clsx from \"clsx\";\nimport { useRef } from \"react\";\n\nimport type { PillProps } from \"../pill\";\nimport { Pill } from \"../pill\";\nimport { VisuallyHidden } from \"../shared/accessibility\";\nimport { useApplyStyle } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport * as styles from \"./timeline.styles\";\nimport type { TimelineItemProps, TimelineProps, Variant } from \"./types\";\n\n// @catalog\n/**\n * A vertically ordered list of steps with visual state indicators.\n *\n * Use `Timeline` to communicate multi-step progress such as application stages\n * or process flows.\n */\nexport const Timeline = ({\n    items,\n    className,\n    id,\n    title,\n    startCol,\n    colSpan,\n    \"data-base-indicator-testid\": baseIndicatorTestId,\n    \"data-testid\": testId = \"timeline\",\n    headingLevel = 2,\n    counterOffset = 0,\n}: TimelineProps): JSX.Element => {\n    const wrapperRef = useRef<HTMLDivElement>(null);\n\n    useApplyStyle(wrapperRef, {\n        [styles.tokens.wrapper.startCol]: startCol,\n        [styles.tokens.wrapper.colSpan]: colSpan,\n    });\n\n    // ===========================================================================\n    // RENDER\n    // ===========================================================================\n    const renderContent = (content: string | JSX.Element): JSX.Element => {\n        if (typeof content === \"string\") {\n            return (\n                <Typography.BodyMD className=\"timeline-item-content-text\">\n                    {content}\n                </Typography.BodyMD>\n            );\n        }\n\n        return <>{content}</>;\n    };\n\n    const renderTitle = (\n        title: string | JSX.Element,\n        level: number\n    ): JSX.Element => {\n        if (typeof title === \"string\") {\n            return (\n                <Typography.HeadingXS\n                    as=\"h3\"\n                    aria-level={level}\n                    weight=\"semibold\"\n                    className={clsx(\n                        styles.timelineItemTitle,\n                        \"timeline-item-title\"\n                    )}\n                >\n                    {title}\n                </Typography.HeadingXS>\n            );\n        }\n\n        return <>{title}</>;\n    };\n\n    const renderStatusPills = (statuses: PillProps[]): JSX.Element[] => {\n        // maximum 2 pills allowed\n        const renderableStatuses = statuses.slice(0, 2);\n        return renderableStatuses.map((status: PillProps, index) => {\n            return (\n                <Pill\n                    {...status}\n                    type={status.type}\n                    key={`status-pill-${index}`}\n                    data-testid=\"status-pill\"\n                    className=\"timeline-status-pill\"\n                >\n                    {status.children}\n                </Pill>\n            );\n        });\n    };\n\n    const renderIcon = (variant: Variant, index: number) => {\n        switch (variant) {\n            case \"completed\":\n                return <TickIcon aria-hidden />;\n            case \"error\":\n                return <ExclamationCircleFillIcon aria-hidden />;\n            case \"numeric\":\n                return <span aria-hidden>{index + 1 + counterOffset}</span>;\n            default:\n                return null;\n        }\n    };\n\n    const getStatus = (variant: Variant, index: number) => {\n        switch (variant) {\n            case \"current\":\n                return \"Current step\";\n            case \"completed\":\n                return \"Completed step\";\n            case \"upcoming-active\":\n                return \"Upcoming active step\";\n            case \"upcoming-inactive\":\n                return \"Upcoming inactive step\";\n            case \"disabled\":\n                return \"Inactive step\";\n            case \"error\":\n                return \"Current step, action required\";\n            case \"numeric\":\n                return `Step number ${index + 1 + counterOffset}`;\n            default:\n                return \"\";\n        }\n    };\n\n    const renderItems = () =>\n        items.map((item: TimelineItemProps, index) => {\n            const { title, content, statuses, variant: _variant } = item;\n            const circleIndicatorTestId = baseIndicatorTestId\n                ? `circleindicator${index + 1}_div_${baseIndicatorTestId}`\n                : \"circleindicator\";\n            const variant =\n                _variant || (index === 0 ? \"current\" : \"upcoming-active\");\n\n            return (\n                <div\n                    key={`timeline-item-${index}`}\n                    role=\"listitem\"\n                    className={styles.timelineItem}\n                >\n                    <div className={styles.timelineIndicators}>\n                        <div\n                            data-testid={circleIndicatorTestId}\n                            className={styles.circleIndicator}\n                            data-variant={variant}\n                        >\n                            <VisuallyHidden>\n                                {getStatus(variant, index)}\n                            </VisuallyHidden>\n                            {renderIcon(variant, index)}\n                        </div>\n                        <div\n                            className={styles.lineIndicator}\n                            data-variant={variant}\n                        />\n                    </div>\n                    <div\n                        className={clsx(\n                            styles.timelineItemContent,\n                            \"timeline-item-content\"\n                        )}\n                    >\n                        {renderTitle(title, headingLevel + 1)}\n                        {statuses && (\n                            <div className={styles.timelinePills}>\n                                {renderStatusPills(statuses)}\n                            </div>\n                        )}\n                        {renderContent(content)}\n                    </div>\n                </div>\n            );\n        });\n\n    return (\n        <div\n            ref={wrapperRef}\n            className={clsx(styles.timelineWrapper, className)}\n            id={id}\n            data-testid={testId}\n        >\n            <Typography.HeadingSM\n                as=\"h2\"\n                aria-level={headingLevel}\n                data-testid=\"timeline-title\"\n                weight=\"bold\"\n                className={styles.timelineTitle}\n            >\n                {title}\n            </Typography.HeadingSM>\n            <div role=\"list\">{renderItems()}</div>\n        </div>\n    );\n};\n"],"names":["Timeline","items","className","id","title","startCol","colSpan","baseIndicatorTestId","testId","headingLevel","counterOffset","wrapperRef","useRef","useApplyStyle","styles.tokens","wrapper","renderContent","content","_jsx","Typography","BodyMD","children","_Fragment","renderTitle","level","HeadingXS","as","weight","clsx","styles.timelineItemTitle","renderStatusPills","statuses","slice","map","status","index","_createElement","Pill","Object","assign","type","key","renderIcon","variant","TickIcon","ExclamationCircleFillIcon","getStatus","_jsxs","ref","styles.timelineWrapper","HeadingSM","styles.timelineTitle","role","item","_variant","styles.timelineItem","styles.timelineIndicators","styles.circleIndicator","VisuallyHidden","styles.lineIndicator","styles.timelineItemContent","styles.timelinePills"],"mappings":"w6BAmBO,MAAMA,EAAW,EACpBC,QACAC,YACAC,KACAC,QACAC,WACAC,UACA,6BAA8BC,EAC9B,cAAeC,EAAS,WACxBC,eAAe,EACfC,gBAAgB,MAEhB,MAAMC,EAAaC,EAAuB,MAE1CC,EAAcF,EAAY,CACtB,CAACG,EAAcC,QAAQV,UAAWA,EAClC,CAACS,EAAcC,QAAQT,SAAUA,IAMrC,MAAMU,EAAiBC,GACI,iBAAZA,EAEHC,EAACC,EAAWC,OAAM,CAAClB,UAAU,6BAA4BmB,SACpDJ,IAKNC,EAAAI,EAAA,CAAAD,SAAGJ,IAGRM,EAAc,CAChBnB,EACAoB,IAEqB,iBAAVpB,EAEHc,EAACC,EAAWM,UAAS,CACjBC,GAAG,KAAI,aACKF,EACZG,OAAO,WACPzB,UAAW0B,EACPC,EACA,uBACHR,SAEAjB,IAKNc,EAAAI,EAAA,CAAAD,SAAGjB,IAGR0B,EAAqBC,GAEIA,EAASC,MAAM,EAAG,GACnBC,KAAI,CAACC,EAAmBC,IAE1CC,EAACC,EAAIC,OAAAC,OAAA,GACGL,EAAM,CACVM,KAAMN,EAAOM,KACbC,IAAK,eAAeN,IAAO,cACf,cACZjC,UAAU,yBAETgC,EAAOb,YAMlBqB,EAAa,CAACC,EAAkBR,KAClC,OAAQQ,GACJ,IAAK,YACD,OAAOzB,EAAC0B,EAAQ,CAAA,eAAA,IACpB,IAAK,QACD,OAAO1B,EAAC2B,EAAyB,CAAA,eAAA,IACrC,IAAK,UACD,OAAO3B,oCAAmBiB,EAAQ,EAAIzB,IAC1C,QACI,OAAO,OAIboC,EAAY,CAACH,EAAkBR,KACjC,OAAQQ,GACJ,IAAK,UACD,MAAO,eACX,IAAK,YACD,MAAO,iBACX,IAAK,kBACD,MAAO,uBACX,IAAK,oBACD,MAAO,yBACX,IAAK,WACD,MAAO,gBACX,IAAK,QACD,MAAO,gCACX,IAAK,UACD,MAAO,eAAeR,EAAQ,EAAIzB,IACtC,QACI,MAAO,KAqDnB,OACIqC,EAAA,MAAA,CACIC,IAAKrC,EACLT,UAAW0B,EAAKqB,EAAwB/C,GACxCC,GAAIA,EAAE,cACOK,EAAMa,SAAA,CAEnBH,EAACC,EAAW+B,UAAS,CACjBxB,GAAG,KAAI,aACKjB,EAAY,cACZ,iBACZkB,OAAO,OACPzB,UAAWiD,EAAoB9B,SAE9BjB,IAELc,EAAA,MAAA,CAAKkC,KAAK,OAAM/B,SAhEpBpB,EAAMgC,KAAI,CAACoB,EAAyBlB,KAChC,MAAM/B,MAAEA,EAAKa,QAAEA,EAAOc,SAAEA,EAAUY,QAASW,GAAaD,EAIlDV,EACFW,IAAuB,IAAVnB,EAAc,UAAY,mBAE3C,OACIY,EAAA,MAAA,CAEIK,KAAK,WACLlD,UAAWqD,EAAmBlC,SAAA,CAE9B0B,SAAK7C,UAAWsD,EAAyBnC,SAAA,CACrC0B,uBAbkBxC,EACxB,kBAAkB4B,EAAQ,SAAS5B,IACnC,kBAaUL,UAAWuD,EAAsB,eACnBd,EAAOtB,SAAA,CAErBH,EAACwC,EAAc,CAAArC,SACVyB,EAAUH,EAASR,KAEvBO,EAAWC,EAASR,MAEzBjB,EAAA,MAAA,CACIhB,UAAWyD,EAAoB,eACjBhB,OAGtBI,EAAA,MAAA,CACI7C,UAAW0B,EACPgC,EACA,yBACHvC,SAAA,CAEAE,EAAYnB,EAAOK,EAAe,GAClCsB,GACGb,EAAA,MAAA,CAAKhB,UAAW2D,EAAoBxC,SAC/BS,EAAkBC,KAG1Bf,EAAcC,QAhCd,iBAAiBkB,IAkCpB,QAqBR"}

package/timeline/types.d.ts

@@ -27,7 +27,7 @@ export interface TimelineItemProps {
     /**
      * Visual state of this step.
      *
-     * @default `"current"` for the first item and `"upcoming-active"` for all subsequent items.
+     * @default "current" for the first item and "upcoming-active" for all subsequent items.
      */
     variant?: Variant | undefined;
 }

package/timepicker/timepicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"timepicker.js","sources":["../../src/timepicker/timepicker.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useCallback, useRef, useState } from \"react\";\n\nimport type { DropdownRenderProps } from \"../shared/dropdown-wrapper\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport { BasicInput, InputWrapper } from \"../shared/input-wrapper\";\nimport { TimepickerDropdown } from \"../shared/timepicker-dropdown/timepicker-dropdown\";\nimport { TimeHelper } from \"../util/time-helper\";\nimport * as styles from \"./timepicker.styles\";\nimport type { TimepickerProps } from \"./types\";\n\n/**\n * A form input for selecting a time value through a dropdown interface.\n *\n * Use `Timepicker` when a user needs to choose a specific time.\n */\nexport const Timepicker = ({\n    id,\n    disabled = false,\n    readOnly = false,\n    error,\n    value,\n    placeholder,\n    format = \"24hr\",\n    onChange,\n    onFocus,\n    onBlur,\n    alignment,\n    dropdownZIndex,\n    dropdownRootNode,\n    className,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    ...otherProps\n}: TimepickerProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [isOpen, setIsOpen] = useState(false);\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const selectorRef = useRef<HTMLInputElement>(null);\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const getPlaceholderValue = useCallback(() => {\n        switch (format) {\n            case \"12hr\":\n                return \"HH:MMam\";\n            case \"24hr\":\n            default:\n                return \"HH:MM\";\n        }\n    }, [format]);\n\n    const restoreFocusToSelector = () => {\n        selectorRef.current?.focus({ preventScroll: true });\n    };\n\n    // =============================================================================\n    // EVENT LISTENERS\n    // =============================================================================\n    const handleOpen = () => {\n        if (disabled || readOnly) return;\n        setIsOpen(true);\n    };\n\n    const handleClose = () => {\n        setIsOpen(false);\n        onBlur?.();\n    };\n\n    const handleDismiss = () => {\n        setIsOpen(false);\n        restoreFocusToSelector();\n    };\n\n    const handleChange = (v: string) => {\n        onChange?.(v);\n        setIsOpen(false);\n        restoreFocusToSelector();\n    };\n\n    const handleFocus = () => {\n        if (disabled) return;\n        onFocus?.();\n    };\n\n    const handleSelectorBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n        if (isOpen || disabled) return;\n\n        const next = e.relatedTarget as Node | null;\n        if (next && wrapperRef.current?.contains(next)) return;\n\n        onBlur?.();\n    };\n\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n        if (disabled || readOnly) {\n            return;\n        }\n\n        if (e.key === \"Enter\" || e.key === \" \" || e.key === \"ArrowDown\") {\n            e.preventDefault();\n            handleOpen();\n        }\n    };\n\n    // =============================================================================\n    // RENDER\n    // =============================================================================\n    const renderElement = () => (\n        <InputWrapper\n            ref={wrapperRef}\n            role=\"group\"\n            readOnly={readOnly}\n            disabled={disabled}\n            focused={isOpen}\n            error={error}\n            className={className}\n            {...otherProps}\n        >\n            <BasicInput\n                ref={selectorRef}\n                readOnly\n                placeholder={placeholder || getPlaceholderValue()}\n                value={TimeHelper.formatDisplayValue(value, format)}\n                role=\"combobox\"\n                aria-invalid={error || undefined}\n                aria-disabled={disabled || undefined}\n                aria-readonly={readOnly || undefined}\n                aria-labelledby={ariaLabelledBy}\n                aria-describedby={ariaDescribedBy}\n                aria-expanded={!disabled && !readOnly ? isOpen : false}\n                data-testid={\n                    id ? `${id}-timepicker-selector` : \"timepicker-selector\"\n                }\n                className={clsx(\n                    styles.inputSelectorElement,\n                    disabled && styles.inputSelectorElementDisabled\n                )}\n                onFocus={handleFocus}\n                onClick={handleOpen}\n                onKeyDown={handleKeyDown}\n                onBlur={handleSelectorBlur}\n            />\n        </InputWrapper>\n    );\n\n    const renderDropdown = ({\n        styles,\n        setFloatingRef,\n        getFloatingProps,\n    }: DropdownRenderProps) => (\n        <div\n            ref={setFloatingRef}\n            style={styles}\n            role=\"dialog\"\n            aria-label=\"Time picker\"\n            {...getFloatingProps()}\n        >\n            <TimepickerDropdown\n                id={id}\n                show={isOpen}\n                value={value}\n                format={format}\n                onCancel={handleDismiss}\n                onChange={handleChange}\n            />\n        </div>\n    );\n\n    return (\n        <ElementWithDropdown\n            enabled={!readOnly && !disabled}\n            isOpen={isOpen}\n            renderElement={renderElement}\n            renderDropdown={renderDropdown}\n            onOpen={handleOpen}\n            onClose={handleClose}\n            onDismiss={handleDismiss}\n            offset={8}\n            alignment={alignment}\n            customZIndex={dropdownZIndex}\n            rootNode={dropdownRootNode}\n        />\n    );\n};\n"],"names":["Timepicker","_a","id","disabled","readOnly","error","value","placeholder","format","onChange","onFocus","onBlur","alignment","dropdownZIndex","dropdownRootNode","className","ariaLabelledBy","ariaDescribedBy","otherProps","__rest","isOpen","setIsOpen","useState","wrapperRef","useRef","selectorRef","getPlaceholderValue","useCallback","restoreFocusToSelector","current","focus","preventScroll","handleOpen","handleDismiss","handleChange","v","handleFocus","handleSelectorBlur","e","next","relatedTarget","contains","handleKeyDown","key","preventDefault","_jsx","ElementWithDropdown","enabled","renderElement","InputWrapper","Object","assign","ref","role","focused","children","BasicInput","TimeHelper","formatDisplayValue","undefined","clsx","styles.inputSelectorElement","styles.inputSelectorElementDisabled","onClick","onKeyDown","renderDropdown","styles","setFloatingRef","getFloatingProps","style","TimepickerDropdown","show","onCancel","onOpen","onClose","onDismiss","offset","customZIndex","rootNode"],"mappings":"ykBAgBO,MAAMA,EAAcC,QAAAC,GACvBA,EAAEC,SACFA,GAAW,EAAKC,SAChBA,GAAW,EAAKC,MAChBA,EAAKC,MACLA,EAAKC,YACLA,EAAWC,OACXA,EAAS,OAAMC,SACfA,EAAQC,QACRA,EAAOC,OACPA,EAAMC,UACNA,EAASC,eACTA,EAAcC,iBACdA,EAAgBC,UAChBA,EACA,kBAAmBC,EACnB,mBAAoBC,KACjBC,EAAUC,EAAAlB,EAjBU,CAAA,KAAA,WAAA,WAAA,QAAA,QAAA,cAAA,SAAA,WAAA,UAAA,SAAA,YAAA,iBAAA,mBAAA,YAAA,kBAAA,qBAsBvB,MAAOmB,EAAQC,GAAaC,GAAS,GAC/BC,EAAaC,EAAuB,MACpCC,EAAcD,EAAyB,MAKvCE,EAAsBC,GAAY,IAE3B,SADDnB,EAEO,UAGA,SAEhB,CAACA,IAEEoB,EAAyB,WACR,QAAnB3B,EAAAwB,EAAYI,eAAO,IAAA5B,GAAAA,EAAE6B,MAAM,CAAEC,eAAe,GAAO,EAMjDC,EAAa,KACX7B,GAAYC,GAChBiB,GAAU,EAAK,EAQbY,EAAgB,KAClBZ,GAAU,GACVO,GAAwB,EAGtBM,EAAgBC,IAClB1B,SAAAA,EAAW0B,GACXd,GAAU,GACVO,GAAwB,EAGtBQ,EAAc,KACZjC,GACJO,SAAAA,GAAW,EAGT2B,EAAsBC,UACxB,GAAIlB,GAAUjB,EAAU,OAExB,MAAMoC,EAAOD,EAAEE,cACXD,IAA0B,QAAlBtC,EAAAsB,EAAWM,eAAO,IAAA5B,OAAA,EAAAA,EAAEwC,SAASF,KAEzC5B,SAAAA,GAAU,EAGR+B,EAAiBJ,IACfnC,GAAYC,GAIF,UAAVkC,EAAEK,KAA6B,MAAVL,EAAEK,KAAyB,cAAVL,EAAEK,MACxCL,EAAEM,iBACFZ,IACJ,EAmEJ,OACIa,EAACC,EAAmB,CAChBC,SAAU3C,IAAaD,EACvBiB,OAAQA,EACR4B,cAjEc,IAClBH,EAACI,EAAYC,OAAAC,OAAA,CACTC,IAAK7B,EACL8B,KAAK,QACLjD,SAAUA,EACVD,SAAUA,EACVmD,QAASlC,EACTf,MAAOA,EACPU,UAAWA,GACPG,EAAU,CAAAqC,SAEdV,EAACW,GACGJ,IAAK3B,EACLrB,UAAQ,EACRG,YAAaA,GAAemB,IAC5BpB,MAAOmD,EAAWC,mBAAmBpD,EAAOE,GAC5C6C,KAAK,0BACShD,QAASsD,EAAS,gBACjBxD,QAAYwD,EAAS,gBACrBvD,QAAYuD,EAAS,kBACnB3C,EAAc,mBACbC,EAAe,iBACjBd,IAAaC,GAAWgB,EAAc,cAElDlB,EAAK,GAAGA,wBAA2B,sBAEvCa,UAAW6C,EACPC,EACA1D,GAAY2D,GAEhBpD,QAAS0B,EACT2B,QAAS/B,EACTgC,UAAWtB,EACX/B,OAAQ0B,OAiCZ4B,eA5Be,EACnBC,SACAC,iBACAC,sBAEAvB,EAAA,MAAAK,OAAAC,OAAA,CACIC,IAAKe,EACLE,MAAOH,EACPb,KAAK,SAAQ,aACF,eACPe,IAAkB,CAAAb,SAEtBV,EAACyB,EAAkB,CACfpE,GAAIA,EACJqE,KAAMnD,EACNd,MAAOA,EACPE,OAAQA,EACRgE,SAAUvC,EACVxB,SAAUyB,OAWduC,OAAQzC,EACR0C,QAhHY,KAChBrD,GAAU,GACVV,SAAAA,GAAU,EA+GNgE,UAAW1C,EACX2C,OAAQ,EACRhE,UAAWA,EACXiE,aAAchE,EACdiE,SAAUhE,GACZ"}
+{"version":3,"file":"timepicker.js","sources":["../../src/timepicker/timepicker.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useCallback, useRef, useState } from \"react\";\n\nimport type { DropdownRenderProps } from \"../shared/dropdown-wrapper\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport { BasicInput, InputWrapper } from \"../shared/input-wrapper\";\nimport { TimepickerDropdown } from \"../shared/timepicker-dropdown/timepicker-dropdown\";\nimport { TimeHelper } from \"../util/time-helper\";\nimport * as styles from \"./timepicker.styles\";\nimport type { TimepickerProps } from \"./types\";\n\n// @catalog\n/**\n * A form input for selecting a time value through a dropdown interface.\n *\n * Use `Timepicker` when a user needs to choose a specific time.\n */\nexport const Timepicker = ({\n    id,\n    disabled = false,\n    readOnly = false,\n    error,\n    value,\n    placeholder,\n    format = \"24hr\",\n    onChange,\n    onFocus,\n    onBlur,\n    alignment,\n    dropdownZIndex,\n    dropdownRootNode,\n    className,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    ...otherProps\n}: TimepickerProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [isOpen, setIsOpen] = useState(false);\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const selectorRef = useRef<HTMLInputElement>(null);\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const getPlaceholderValue = useCallback(() => {\n        switch (format) {\n            case \"12hr\":\n                return \"HH:MMam\";\n            case \"24hr\":\n            default:\n                return \"HH:MM\";\n        }\n    }, [format]);\n\n    const restoreFocusToSelector = () => {\n        selectorRef.current?.focus({ preventScroll: true });\n    };\n\n    // =============================================================================\n    // EVENT LISTENERS\n    // =============================================================================\n    const handleOpen = () => {\n        if (disabled || readOnly) return;\n        setIsOpen(true);\n    };\n\n    const handleClose = () => {\n        setIsOpen(false);\n        onBlur?.();\n    };\n\n    const handleDismiss = () => {\n        setIsOpen(false);\n        restoreFocusToSelector();\n    };\n\n    const handleChange = (v: string) => {\n        onChange?.(v);\n        setIsOpen(false);\n        restoreFocusToSelector();\n    };\n\n    const handleFocus = () => {\n        if (disabled) return;\n        onFocus?.();\n    };\n\n    const handleSelectorBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n        if (isOpen || disabled) return;\n\n        const next = e.relatedTarget as Node | null;\n        if (next && wrapperRef.current?.contains(next)) return;\n\n        onBlur?.();\n    };\n\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n        if (disabled || readOnly) {\n            return;\n        }\n\n        if (e.key === \"Enter\" || e.key === \" \" || e.key === \"ArrowDown\") {\n            e.preventDefault();\n            handleOpen();\n        }\n    };\n\n    // =============================================================================\n    // RENDER\n    // =============================================================================\n    const renderElement = () => (\n        <InputWrapper\n            ref={wrapperRef}\n            role=\"group\"\n            readOnly={readOnly}\n            disabled={disabled}\n            focused={isOpen}\n            error={error}\n            className={className}\n            {...otherProps}\n        >\n            <BasicInput\n                ref={selectorRef}\n                readOnly\n                placeholder={placeholder || getPlaceholderValue()}\n                value={TimeHelper.formatDisplayValue(value, format)}\n                role=\"combobox\"\n                aria-invalid={error || undefined}\n                aria-disabled={disabled || undefined}\n                aria-readonly={readOnly || undefined}\n                aria-labelledby={ariaLabelledBy}\n                aria-describedby={ariaDescribedBy}\n                aria-expanded={!disabled && !readOnly ? isOpen : false}\n                data-testid={\n                    id ? `${id}-timepicker-selector` : \"timepicker-selector\"\n                }\n                className={clsx(\n                    styles.inputSelectorElement,\n                    disabled && styles.inputSelectorElementDisabled\n                )}\n                onFocus={handleFocus}\n                onClick={handleOpen}\n                onKeyDown={handleKeyDown}\n                onBlur={handleSelectorBlur}\n            />\n        </InputWrapper>\n    );\n\n    const renderDropdown = ({\n        styles,\n        setFloatingRef,\n        getFloatingProps,\n    }: DropdownRenderProps) => (\n        <div\n            ref={setFloatingRef}\n            style={styles}\n            role=\"dialog\"\n            aria-label=\"Time picker\"\n            {...getFloatingProps()}\n        >\n            <TimepickerDropdown\n                id={id}\n                show={isOpen}\n                value={value}\n                format={format}\n                onCancel={handleDismiss}\n                onChange={handleChange}\n            />\n        </div>\n    );\n\n    return (\n        <ElementWithDropdown\n            enabled={!readOnly && !disabled}\n            isOpen={isOpen}\n            renderElement={renderElement}\n            renderDropdown={renderDropdown}\n            onOpen={handleOpen}\n            onClose={handleClose}\n            onDismiss={handleDismiss}\n            offset={8}\n            alignment={alignment}\n            customZIndex={dropdownZIndex}\n            rootNode={dropdownRootNode}\n        />\n    );\n};\n"],"names":["Timepicker","_a","id","disabled","readOnly","error","value","placeholder","format","onChange","onFocus","onBlur","alignment","dropdownZIndex","dropdownRootNode","className","ariaLabelledBy","ariaDescribedBy","otherProps","__rest","isOpen","setIsOpen","useState","wrapperRef","useRef","selectorRef","getPlaceholderValue","useCallback","restoreFocusToSelector","current","focus","preventScroll","handleOpen","handleDismiss","handleChange","v","handleFocus","handleSelectorBlur","e","next","relatedTarget","contains","handleKeyDown","key","preventDefault","_jsx","ElementWithDropdown","enabled","renderElement","InputWrapper","Object","assign","ref","role","focused","children","BasicInput","TimeHelper","formatDisplayValue","undefined","clsx","styles.inputSelectorElement","styles.inputSelectorElementDisabled","onClick","onKeyDown","renderDropdown","styles","setFloatingRef","getFloatingProps","style","TimepickerDropdown","show","onCancel","onOpen","onClose","onDismiss","offset","customZIndex","rootNode"],"mappings":"ykBAiBO,MAAMA,EAAcC,QAAAC,GACvBA,EAAEC,SACFA,GAAW,EAAKC,SAChBA,GAAW,EAAKC,MAChBA,EAAKC,MACLA,EAAKC,YACLA,EAAWC,OACXA,EAAS,OAAMC,SACfA,EAAQC,QACRA,EAAOC,OACPA,EAAMC,UACNA,EAASC,eACTA,EAAcC,iBACdA,EAAgBC,UAChBA,EACA,kBAAmBC,EACnB,mBAAoBC,KACjBC,EAAUC,EAAAlB,EAjBU,CAAA,KAAA,WAAA,WAAA,QAAA,QAAA,cAAA,SAAA,WAAA,UAAA,SAAA,YAAA,iBAAA,mBAAA,YAAA,kBAAA,qBAsBvB,MAAOmB,EAAQC,GAAaC,GAAS,GAC/BC,EAAaC,EAAuB,MACpCC,EAAcD,EAAyB,MAKvCE,EAAsBC,GAAY,IAE3B,SADDnB,EAEO,UAGA,SAEhB,CAACA,IAEEoB,EAAyB,WACR,QAAnB3B,EAAAwB,EAAYI,eAAO,IAAA5B,GAAAA,EAAE6B,MAAM,CAAEC,eAAe,GAAO,EAMjDC,EAAa,KACX7B,GAAYC,GAChBiB,GAAU,EAAK,EAQbY,EAAgB,KAClBZ,GAAU,GACVO,GAAwB,EAGtBM,EAAgBC,IAClB1B,SAAAA,EAAW0B,GACXd,GAAU,GACVO,GAAwB,EAGtBQ,EAAc,KACZjC,GACJO,SAAAA,GAAW,EAGT2B,EAAsBC,UACxB,GAAIlB,GAAUjB,EAAU,OAExB,MAAMoC,EAAOD,EAAEE,cACXD,IAA0B,QAAlBtC,EAAAsB,EAAWM,eAAO,IAAA5B,OAAA,EAAAA,EAAEwC,SAASF,KAEzC5B,SAAAA,GAAU,EAGR+B,EAAiBJ,IACfnC,GAAYC,GAIF,UAAVkC,EAAEK,KAA6B,MAAVL,EAAEK,KAAyB,cAAVL,EAAEK,MACxCL,EAAEM,iBACFZ,IACJ,EAmEJ,OACIa,EAACC,EAAmB,CAChBC,SAAU3C,IAAaD,EACvBiB,OAAQA,EACR4B,cAjEc,IAClBH,EAACI,EAAYC,OAAAC,OAAA,CACTC,IAAK7B,EACL8B,KAAK,QACLjD,SAAUA,EACVD,SAAUA,EACVmD,QAASlC,EACTf,MAAOA,EACPU,UAAWA,GACPG,EAAU,CAAAqC,SAEdV,EAACW,GACGJ,IAAK3B,EACLrB,UAAQ,EACRG,YAAaA,GAAemB,IAC5BpB,MAAOmD,EAAWC,mBAAmBpD,EAAOE,GAC5C6C,KAAK,0BACShD,QAASsD,EAAS,gBACjBxD,QAAYwD,EAAS,gBACrBvD,QAAYuD,EAAS,kBACnB3C,EAAc,mBACbC,EAAe,iBACjBd,IAAaC,GAAWgB,EAAc,cAElDlB,EAAK,GAAGA,wBAA2B,sBAEvCa,UAAW6C,EACPC,EACA1D,GAAY2D,GAEhBpD,QAAS0B,EACT2B,QAAS/B,EACTgC,UAAWtB,EACX/B,OAAQ0B,OAiCZ4B,eA5Be,EACnBC,SACAC,iBACAC,sBAEAvB,EAAA,MAAAK,OAAAC,OAAA,CACIC,IAAKe,EACLE,MAAOH,EACPb,KAAK,SAAQ,aACF,eACPe,IAAkB,CAAAb,SAEtBV,EAACyB,EAAkB,CACfpE,GAAIA,EACJqE,KAAMnD,EACNd,MAAOA,EACPE,OAAQA,EACRgE,SAAUvC,EACVxB,SAAUyB,OAWduC,OAAQzC,EACR0C,QAhHY,KAChBrD,GAAU,GACVV,SAAAA,GAAU,EA+GNgE,UAAW1C,EACX2C,OAAQ,EACRhE,UAAWA,EACXiE,aAAchE,EACdiE,SAAUhE,GACZ"}

package/timepicker/types.d.ts

@@ -33,7 +33,7 @@ export interface TimepickerProps {
     /**
      * Placeholder text shown when no value is selected.
      *
-     * @default `"hh:mm"` for 24-hour format or `"hh:mmA"` for 12-hour format.
+     * @default "hh:mm" for 24-hour format or "hh:mmA" for 12-hour format.
      */
     placeholder?: string | undefined;
     /**
@@ -62,7 +62,7 @@ export interface TimepickerProps {
      * Note: if a parent of the trigger has a higher `z-index` than the dropdown,
      * the dropdown may be obscured.
      *
-     * @default `document.body`
+     * @default document.body
      */
     dropdownRootNode?: RefObject<HTMLElement> | undefined;
     /**