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

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 { CrossIcon } from \"@lifesg/react-icons/cross\";\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\n\nimport { FormErrorMessage } from \"../../form/form-label\";\nimport { clearIcon } from \"../../input/input.styles\";\nimport { ClearIconContainer } from \"../../input-range-select/input-range-select.style\";\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 { RangeInputInnerContainer } from \"../../shared/range-input-inner-container\";\nimport { useId } from \"../../util\";\nimport { TimeHelper } from \"../../util/time-helper\";\nimport { SelectorInput, Wrapper } 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                <ClearIconContainer\n                    onClick={handleClear}\n                    type=\"button\"\n                    aria-label=\"Clear\"\n                >\n                    <CrossIcon className={clearIcon} aria-hidden />\n                </ClearIconContainer>\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        <styles.TimeFieldContainer\n            ref={nodeRef}\n            disabled={disabled}\n            error={error || !!validationError}\n            readOnly={readOnly}\n            onBlur={handleBlur}\n            role=\"group\"\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                <SelectorInput\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}\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                />\n                {/* To */}\n                <SelectorInput\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}\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                />\n            </RangeInputInnerContainer>\n            {renderClearButton()}\n        </styles.TimeFieldContainer>\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        <Wrapper id={id} {...otherProps}>\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        </Wrapper>\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","ClearIconContainer","onClick","children","CrossIcon","className","clearIcon","_jsxs","Wrapper","Object","assign","DropdownListState","ElementWithDropdown","enabled","isOpen","renderElement","styles.TimeFieldContainer","ref","role","VisuallyHidden","RangeInputInnerContainer","currentActive","SelectorInput","placeholder","e","onKeyDown","autoComplete","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}\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={commonStyles.selectorInput}\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}\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={commonStyles.selectorInput}\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","renderDropdown","startScrollTime","DropdownList","listItems","onSelectItem","selectedItems","topScrollItem","ariaLabel","disableItemFocus","matchElementWidth","endScrollTime","onClose","reason","onDismiss","focus","offset","fitAvailableHeight","customZIndex","rootNode","FormErrorMessage","tabIndex"],"mappings":"+tFA4BO,MAAMA,EAAkBC,QAAAC,GAC3BA,EAAEC,SACFA,GAAW,EAAKC,MAChBA,EAAKC,MACLA,EAAKC,OACLA,EAAS,OAAMC,SACfA,EAAQC,SACRA,EAAQC,QACRA,EAAOC,OACPA,EAAMC,UACNA,EAAY,OAAMC,eAClBA,EAAcC,WACdA,EAAUC,SACVA,EAAQC,uBACRA,EAAsBC,qBACtBA,EAAoBC,SACpBA,EAAW,GAAEC,iBACbA,EACA,kBAAmBC,EACnB,mBAAoBC,EACpB,eAAgBC,GAAWpB,EACxBqB,EAAUC,EAAAtB,EArBc,CAAA,KAAA,WAAA,QAAA,QAAA,SAAA,WAAA,WAAA,UAAA,SAAA,YAAA,iBAAA,aAAA,WAAA,yBAAA,uBAAA,WAAA,mBAAA,kBAAA,mBAAA,iBA0B3B,MAAMuB,EAAaC,KACZC,EAAoBC,GACvBC,EAAoC,OACjCC,EAAcC,GAAmBF,GAAkB,IACnDG,EAAiBC,GAAsBJ,EAAiB,KAExDK,GAAcC,IAAmBN,EAAiB,KAClDO,GAAYC,IAAiBR,EAAiB,KAC9CS,GAAqBC,IAA0BV,EAAiB,KAChEW,GAAmBC,IAAwBZ,EAAiB,IAE7Da,GAAUC,EAAuB,MACjCC,GAAgBD,EAAyB,MACzCE,GAAcF,EAAyB,MAEvCG,GAAY,GAAGrB,YACfsB,GAAe,GAAGtB,gBAClBuB,GAAa,GAAGvB,cAChBwB,GAAU,GAAGxB,kBAEbyB,GAAeC,GACjB,IACIC,EAAWC,gBAAgBnC,EAAUX,EAAQO,EAAYC,IAC7D,CAACG,EAAUX,EAAQO,EAAYC,IAE7BuC,GAAaH,GAAQ,KACvB,GAA4B,KAAxBb,GAA4B,OAAOY,GAEvC,MAAMK,EAAkBH,EAAWI,uBAC/BlB,GACAY,IAEJ,OAAOK,EACDL,GAAaO,MAAMP,GAAaQ,QAAQH,IACxC,EAAE,GACT,CAACL,GAAcZ,KAKZqB,GAAaC,GACdC,GACUT,EAAWO,WAAWE,EAAOtD,IAExC,CAACA,IAGCuD,GAA+BX,GACjC,KAAK,IAAAjD,EAAC,OAAkC,QAAlCA,EAAAyD,GAAW3C,UAAuB,IAAAd,EAAAA,EAAI,EAAE,GAC9C,CAACc,EAAwB2C,KAGvBI,GAA6BZ,GAC/B,KAAK,IAAAjD,EAAC,OAAgC,QAAhCA,EAAAyD,GAAW1C,UAAqB,IAAAf,EAAAA,EAAI,EAAE,GAC5C,CAACe,EAAsB0C,KAG3BK,GAAU,aACN,GAAI1D,EAAO,CACP,MAAM2D,EAA+B,QAAvB/D,EAAAyD,GAAWrD,EAAM2D,cAAM,IAAA/D,EAAAA,EAAI,GACnCgE,EAA2B,QAArBC,EAAAR,GAAWrD,EAAM4D,YAAI,IAAAC,EAAAA,EAAI,GAErChC,GAAgB8B,GAChB5B,GAAc6B,GACd3B,GAAuB0B,GACvBxB,GAAqByB,EACzB,IACD,CAAC5D,EAAOqD,KAGXK,GAAU,KACN,GAAI3D,EAEA,YADA0B,GAAgB,GAIpB,MAAMkC,EAAQN,GAAWzB,IACnBgC,EAAMP,GAAWvB,IAEvB,QAAcgC,IAAVH,EACAhC,EAAmB,2BAChB,QAAYmC,IAARF,EACPjC,EAAmB,wBAChB,MACO,KAAVgC,GACQ,KAARC,GACAd,EAAWiB,SAASH,GAAOd,EAAWiB,SAASJ,IAY/C,OARAhC,EAAmB,SAGfqC,SAASC,gBAAkB3B,GAAc4B,SACzCF,SAASC,gBAAkB1B,GAAY2B,SAEvCzC,GAAgB,IARpBE,EAAmB,oCAWvB,CAGAF,GAAgB,EAAM,GACvB,CAACG,GAAcE,GAAYuB,GAAYtD,IAK1C,MAAMoE,GAAuB,IACE,UAAvB9C,EACO,4BAGgB,QAAvBA,EACO,+BADX,EAOE+C,GAAsBC,GACjBC,EACHxD,EACS,UAATuD,EAAmB5B,GAAeC,IAIpC6B,GAAsB,IACjBD,EACHvD,GACChB,GAAS2B,EAAkBiB,QAAUmB,GAOxCU,GAAoBC,IAClB3E,GAAYI,IAGXmB,GAAuBG,GAAcpB,SAAAA,IAE1CkB,EAAsBmD,GACtBhD,GAAgB,GAAK,EAGnBiD,GAAoBD,UAClB3E,GAAYI,IAEhBoB,EAAsBmD,GACtBhD,GAAgB,GAC4C,QAA5D7B,GAAc,UAAb6E,EAAuBnC,GAAgBC,IAAa2B,eAAO,IAAAtE,GAAAA,EAAE+E,SAAQ,EAG1E,SAASC,GAAmBC,SACxB,OAAQA,EAAMC,MACV,IAAK,QAC0B,UAAvBzD,EACA0D,GAAgBnD,IACc,QAAvBP,IAEHG,GAAcwD,GAAclD,IACb,QAAnBlC,EAAA2C,GAAY2B,eAAO,IAAAtE,GAAAA,EAAEqF,QAEzB,MACJ,IAAK,MACDC,GAAiBtD,GAAcE,GAAY,IAKvD,CAEA,MAAMiD,GAAmBxB,IACrB2B,GAAiB3B,EAAOzB,GAAY,CAAEqD,eAAe,GAAO,EAG1DH,GAAiBzB,IACnB2B,GAAiBtD,GAAc2B,EAAO,CAAE6B,eAAe,GAAO,EAG5DF,GAAmB,CACrBG,EACAC,GAEIH,gBACAC,8BAGJ,MAAMzB,EAA8B,QAAtB/D,EAAAyD,GAAWgC,UAAW,IAAAzF,EAAAA,EAAIoC,GAClC4B,EAA0B,QAApBC,EAAAR,GAAWiC,UAAS,IAAAzB,EAAAA,EAAI3B,GAEpCL,GAAgB8B,GAChB5B,GAAc6B,GAKVD,IAAU3B,IAAuB4B,IAAQ1B,IACzC/B,SAAAA,EAJoC,CAAEwD,QAAOC,QAQ7CuB,QAA4CrB,IAA3BT,GAAWgC,KAC5B/D,EAAsB,OACH,QAAnBiE,EAAAhD,GAAY2B,eAAO,IAAAqB,GAAAA,EAAEZ,UAGrBS,IACA9D,EAAsB,MACtBG,GAAgB,GAChBpB,SAAAA,KAGJ4B,GAAuB0B,GACvBxB,GAAqByB,EAAI,EAGvB4B,GAAeX,IACjBA,EAAMY,kBACN5D,GAAgB,IAChBE,GAAc,IACdE,GAAuB,IACvBE,GAAqB,IAOrBhC,SAAAA,EALwC,CACpCwD,MAAO,GACPC,IAAK,KAITtC,EAAsB,MACtBG,GAAgB,EAAM,EAWpBiE,GAAcb,YAChB,MAAMc,EAASd,EAAMe,cAEfC,GACa,QAAfjG,EAAA+F,aAAM,EAANA,EAAQG,eAAO,IAAAlG,OAAA,EAAAA,EAAAmG,KAAAJ,EAAG,mCACH,QAAf9B,EAAA8B,aAAM,EAANA,EAAQG,eAAO,IAAAjC,OAAA,EAAAA,EAAAkC,KAAAJ,EAAG,mCAChBK,EACF5D,GAAQ8B,SAAW9B,GAAQ8B,QAAQ+B,SAASN,GAI5CtE,IACCG,IACAwE,IACAH,GAGDX,GAAiBtD,GAAcE,GAAY,CAAEsD,eAAe,GAChE,EAmBEc,GAAoB,KACtB,IACKhG,IACAJ,KACA8B,gBAAAA,GAAcuE,QAAS,IAAKrE,cAAU,EAAVA,GAAYqE,QAAS,GAElD,OACIC,SAAKC,UAAWC,EAAuCC,SACnDH,EAACI,EAAW,CACRC,QAASjB,GACTnB,KAAK,sBACM,WAI3B,EAmJJ,OACIqC,EAAA,MAAAC,OAAAC,OAAA,CACI/G,GAAIA,GACAoB,EAAU,CACdoF,UAAWQ,EAAKC,EAAsB7F,EAAWoF,qBAEjDD,EAACW,EAAiB,CAAAR,SACdH,EAACY,EAAmB,CAChBC,SAAU/G,IAAaJ,EACvBoH,OAAQ1F,EACR2F,cA9GM,IAClBT,EAACU,EAAY,CACTC,IAAKjF,GACLtC,SAAUA,EACVC,MAAOA,KAAW2B,EAClBxB,SAAUA,EACVG,OAAQqF,GACR4B,KAAK,QAAO,cACA,uBACZjB,UAAWkB,EAAyBhB,SAAA,CAEpCH,EAACoB,EAAc,CAAC3H,GAAI4C,GAAY8D,SAAA,eAChCH,EAACoB,EAAc,CAAC3H,GAAI6C,yBAEpBgE,EAACe,EAAwB,CACrB1H,MAAOA,KAAW2B,EAClBgG,cAC2B,OAAvBrG,EAA8B,OAASA,EAAkBkF,SAAA,CAI7DH,EAACuB,EAAU,CACPN,IAAK/E,GACLlC,QAAS,IAAMoE,GAAiB,SAChCoD,YAC2B,UAAvBvG,EAAiC,QAAU,OAE/ClB,SAAW0H,GAAMhG,GAAgBgG,EAAElC,OAAO3F,OAC1CA,MAAO4B,GACP1B,SAAUA,EAAQ,cAEde,EAAW,eACL,GAAGA,EAAW,2CACd,4BAEVwF,QAAS,IAAM/B,GAAiB,SAChCoD,UAAWlD,GACXmD,aAAa,MACb1D,KAAK,OACLiD,KAAK,WAAU,kBACElD,GAAmB,SAAQ,mBAC1BG,KAAqB,gBAEnC/C,GAAuC,UAAvBH,EAA8B,gBAEnCmB,GAAS,oBACN,OAAM,eACVzC,GAASiB,KAAiBU,EAAe,gBACxC5B,EAAQ,gBACRI,EACfmG,UAAW2B,IAGf5B,EAACuB,EAAU,CACPN,IAAK9E,GACLnC,QAAS,IAAMoE,GAAiB,OAChCoD,YAAoC,QAAvBvG,EAA+B,QAAU,KACtDlB,SAAW0H,GAAM9F,GAAc8F,EAAElC,OAAO3F,OACxCA,MAAO8B,GACP5B,SAAUA,EAAQ,cAEde,EAAW,eACL,GAAGA,EAAW,yCACd,0BAEVwF,QAAS,IAAM/B,GAAiB,OAChCoD,UAAWlD,GACXmD,aAAa,MACb1D,KAAK,OACLiD,KAAK,WAAU,kBACElD,GAAmB,OAAM,mBACxBG,KAAqB,gBACxB/C,GAAuC,QAAvBH,EAA4B,gBAC5CmB,GAAS,oBACN,OAAM,eAEpBzC,GAASiB,KAAiBU,QAAmBoC,EAAS,gBAE3ChE,QAAYgE,kBACZ5D,QAAY4D,EAC3BuC,UAAW2B,OAGlB9B,QA4BO+B,eA3JO,KACnB,GAA2B,UAAvB5G,EAAgC,CAGhC,MAAM6G,EACF7E,GAAWzB,KAAiB4B,GAEhC,OACI4C,EAAC+B,GACGC,UAAWxF,GACXyF,aAActD,GACduD,cAAe,CAAC1G,IAChB2G,cAAezF,EAAWI,uBACtBgF,EACAtF,IAEJJ,UAAWA,GACXgG,UAAWrE,KACXsE,oBACAC,mBAAiB,GAG7B,CAAO,CACH,MAAMC,EACFtF,GAAWvB,KAAe2B,GAE9B,OACI2C,EAAC+B,GACGC,UAAWpF,GACXqF,aAAcrD,GACdsD,cAAe,CAACxG,IAChByG,cAAezF,EAAWI,uBACtByF,EACA3F,IAEJR,UAAWA,GACXgG,UAAWrE,KACXsE,oBACAC,mBAAiB,GAG7B,GAmHYE,QA7LKC,IACF,kBAAXA,GAEAvH,EAAsB,MACtBG,GAAgB,GAChBpB,SAAAA,KAGA6E,GAAiBtD,GAAcE,GAAY,CAAEsD,eAAe,GAChE,EAqLY0D,UA5NM,WAIT,QAHTlJ,GAAwB,UAAvByB,EACKiB,GACAC,IACJ2B,eAAO,IAAAtE,GAAAA,EAAEmJ,QACXtH,GAAgB,EAAM,EAwNVuH,OAAQ,EACR1I,UAAWA,EACX2I,oBAAkB,EAClBC,aAAc3I,EACd4I,SAAUtI,OA7BrBd,GACD2B,GACI0E,EAACgD,EAAgB,CACbvJ,GAAI8C,GACJ0G,SAAU,EAAC,cACExJ,EAAK,GAAGA,kBAAqB,gBAAe0G,SAExD7E,OA0BH"}

package/time-range-picker/combobox-picker/combobox-picker.styles.d.ts

@@ -1 +1 @@
-export declare const TimeFieldContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../../shared/input-wrapper").InputWrapperProps & import("react").RefAttributes<HTMLDivElement>, never> & Partial<Pick<import("../../shared/input-wrapper").InputWrapperProps & import("react").RefAttributes<HTMLDivElement>, never>>> & string & Omit<(props: import("../../shared/input-wrapper").InputWrapperProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
+export declare const timeFieldContainer: import("@linaria/core").LinariaClassName;

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

@@ -1,7 +1,2 @@
-import r from"styled-components";import{InputWrapper as p}from"../../shared/input-wrapper/input-wrapper.js";import{V3_Spacing as e}from"../../v3_theme/index.js";const i=r(p)`
-    height: 3rem;
-    gap: ${e["spacing-8"]};
-    // space for clear icon
-    padding-right: calc(1.25rem + ${e["spacing-20"]});
-`;export{i as TimeFieldContainer};
+import"./combobox-picker.styles_7i9vso.css";const o="t1wpl53s";export{o as timeFieldContainer};
 //# sourceMappingURL=combobox-picker.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"combobox-picker.styles.js","sources":["../../../src/time-range-picker/combobox-picker/combobox-picker.styles.tsx"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { InputWrapper } from \"../../shared/input-wrapper\";\nimport { V3_Spacing } from \"../../v3_theme\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const TimeFieldContainer = styled(InputWrapper)`\n    height: 3rem;\n    gap: ${V3_Spacing[\"spacing-8\"]};\n    // space for clear icon\n    padding-right: calc(1.25rem + ${V3_Spacing[\"spacing-20\"]});\n`;\n"],"names":["TimeFieldContainer","styled","InputWrapper","V3_Spacing"],"mappings":"uKAQaA,EAAqBC,EAAOC,EAAa;;WAE3CC,EAAW;;oCAEcA,EAAW;"}
+{"version":3,"file":"combobox-picker.styles.js","sources":["../../../src/time-range-picker/combobox-picker/combobox-picker.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Spacing } from \"../../theme\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const timeFieldContainer = css`\n    height: 3rem;\n    gap: ${Spacing[\"spacing-8\"]};\n    /* space for clear icon */\n    padding-right: calc(1.25rem + ${Spacing[\"spacing-20\"]});\n`;\n"],"names":["timeFieldContainer"],"mappings":"6FAOO,MAAMA,EAAkB"}

package/time-range-picker/combobox-picker/combobox-picker.styles_7i9vso.css

@@ -0,0 +1 @@
+.t1wpl53s{height:3rem;gap:var(--fds-spacing-8);padding-right:calc(1.25rem + var(--fds-spacing-20));}

package/time-range-picker/common.styles.d.ts

@@ -1,3 +1,3 @@
-export declare const Wrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
-export declare const TimeContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../shared/input-wrapper").InputWrapperProps & import("react").RefAttributes<HTMLDivElement>, never> & Partial<Pick<import("../shared/input-wrapper").InputWrapperProps & import("react").RefAttributes<HTMLDivElement>, never>>> & string & Omit<(props: import("../shared/input-wrapper").InputWrapperProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
-export declare const SelectorInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../shared/input-wrapper").BasicInputProps & import("react").RefAttributes<HTMLInputElement>, never> & Partial<Pick<import("../shared/input-wrapper").BasicInputProps & import("react").RefAttributes<HTMLInputElement>, never>>> & string & Omit<(props: import("../shared/input-wrapper").BasicInputProps & import("react").RefAttributes<HTMLInputElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
+export declare const wrapper: import("@linaria/core").LinariaClassName;
+export declare const timeContainer: import("@linaria/core").LinariaClassName;
+export declare const selectorInput: import("@linaria/core").LinariaClassName;

package/time-range-picker/common.styles.js

@@ -1,11 +1,2 @@
-import p from"styled-components";import{InputWrapper as e,BasicInput as i}from"../shared/input-wrapper/input-wrapper.js";import{V3_Spacing as r}from"../v3_theme/index.js";const t=p.div`
-    position: relative;
-`,o=p(e)`
-    height: 3rem;
-    gap: ${r["spacing-8"]};
-`,m=p(i)`
-    display: block;
-    width: 100%;
-    flex: 1;
-`;export{m as SelectorInput,o as TimeContainer,t as Wrapper};
+import"./common.styles_1qwp4xa.css";const s="wfddsjt",t="t102z5ub",e="svbkfs2";export{e as selectorInput,t as timeContainer,s as wrapper};
 //# sourceMappingURL=common.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"common.styles.js","sources":["../../src/time-range-picker/common.styles.tsx"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { BasicInput, InputWrapper } from \"../shared/input-wrapper\";\nimport { V3_Spacing } from \"../v3_theme\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const Wrapper = styled.div`\n    position: relative;\n`;\n\nexport const TimeContainer = styled(InputWrapper)`\n    height: 3rem;\n    gap: ${V3_Spacing[\"spacing-8\"]};\n`;\n\nexport const SelectorInput = styled(BasicInput)`\n    display: block;\n    width: 100%;\n    flex: 1;\n`;\n"],"names":["Wrapper","styled","div","TimeContainer","InputWrapper","V3_Spacing","SelectorInput","BasicInput"],"mappings":"2KAQO,MAAMA,EAAUC,EAAOC,GAAG;;EAIpBC,EAAgBF,EAAOG,EAAa;;WAEtCC,EAAW;EAGTC,EAAgBL,EAAOM,EAAW;;;;"}
+{"version":3,"file":"common.styles.js","sources":["../../src/time-range-picker/common.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Spacing } from \"../theme\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const wrapper = css`\n    position: relative;\n`;\n\nexport const timeContainer = css`\n    height: 3rem;\n    gap: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const selectorInput = css`\n    display: block;\n    width: 100%;\n    flex: 1;\n`;\n"],"names":["wrapper","timeContainer","selectorInput"],"mappings":"qEAOO,MAAMA,EAAO,UAIPC,EAAa,WAKbC,EAAa"}

package/time-range-picker/common.styles_1qwp4xa.css

@@ -0,0 +1,3 @@
+.wfddsjt{position:relative;}
+.t102z5ub{height:3rem;gap:var(--fds-spacing-8);}
+.svbkfs2{display:block;width:100%;-webkit-flex:1;-ms-flex:1;flex:1;}

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

@@ -1,2 +1,2 @@
-import{__rest as e}from"../../_virtual/_tslib.js";import{jsx as r,jsxs as a}from"react/jsx-runtime";import{useState as o,useRef as i,useEffect as t}from"react";import{concatIds as l}from"../../shared/accessibility/index.js";import{ElementWithDropdown as n}from"../../shared/dropdown-wrapper/element-with-dropdown.js";import{RangeInputInnerContainer as d}from"../../shared/range-input-inner-container/range-input-inner-container.js";import{TimepickerDropdown as s}from"../../shared/timepicker-dropdown/timepicker-dropdown.js";import"../../util/calendar-helper.js";import"../../external/dayjs/dayjs.min.js";import{useId as c}from"../../util/simple-id-generator.js";import"../../util/string-helper.js";import"@react-aria/live-announcer";import{TimeHelper as u}from"../../util/time-helper.js";import{Wrapper as m,TimeContainer as p,SelectorInput as b}from"../common.styles.js";const v=v=>{var{id:f,disabled:g=!1,error:h,value:y,format:j="24hr",readOnly:k,onChange:w,onFocus:x,onBlur:F,alignment:C="left",dropdownZIndex:O,dropdownRootNode:$,"aria-labelledby":B,"aria-describedby":D,"aria-invalid":I}=v,T=e(v,["id","disabled","error","value","format","readOnly","onChange","onFocus","onBlur","alignment","dropdownZIndex","dropdownRootNode","aria-labelledby","aria-describedby","aria-invalid"]);const[N,R]=o(!1),[S,Z]=o("none"),[E,V]=o(""),[_,A]=o(""),[P,q]=o(!1),z=!k&&!g,G=i(null),H=c(),J=`${H}-start-label`,K=`${H}-end-label`,L=e=>l(B,"start"===e?J:K),M=()=>l(D);t((()=>{y&&(V(y.start),A(y.end))}),[y]);const Q=e=>{z&&(P||N||null==x||x(),q(!0),Z(e),R(!0))},U=e=>{var r,a;const o=!!(null==e?void 0:e.keepFocus),i=null!==(r=null==e?void 0:e.triggerBlur)&&void 0!==r?r:!o;R(!1),Z("none"),q(o),i&&(null==F||F()),o&&(null===(a=G.current)||void 0===a||a.focus())},W=e=>{var r,a,o;if(!P||N)return;const i=e.relatedTarget,t=(null===(r=null==i?void 0:i.matches)||void 0===r?void 0:r.call(i,"[data-floating-ui-focusable]"))||(null===(a=null==i?void 0:i.matches)||void 0===a?void 0:a.call(i,"[data-floating-ui-focus-guard]"));!(!i||!(null===(o=G.current)||void 0===o?void 0:o.contains(i)))||t||(q(!1),null==F||F())},X=e=>{V(e),null==w||w({start:e,end:_}),Z("end"),R(!0),q(!0)},Y=e=>{A(e),null==w||w({start:E,end:e}),""===E?(Z("start"),R(!0),q(!0)):U({keepFocus:!0})};return r(m,Object.assign({id:f},T,{children:r(n,{enabled:z,isOpen:N,renderElement:()=>r(p,{ref:G,tabIndex:-1,onBlur:W,"data-testid":"timepicker-container",role:"group",disabled:g,error:h,readOnly:k,focused:P,children:a(d,{error:h,currentActive:S,children:[r(b,{onFocus:()=>Q("start"),onClick:()=>Q("start"),readOnly:!0,placeholder:"From",value:u.formatDisplayValue(E,j),"data-testid":T["data-testid"]?`${T["data-testid"]}-timepicker-selector-from`:"timepicker-selector-from",role:"combobox","aria-expanded":!g&&!k&&N,"aria-invalid":h||I,"aria-disabled":g,"aria-readonly":k,"aria-labelledby":L("start"),"aria-describedby":M()}),r(b,{onClick:()=>Q("end"),readOnly:!0,placeholder:"To",value:u.formatDisplayValue(_,j),"data-testid":T["data-testid"]?`${T["data-testid"]}-timepicker-selector-to`:"timepicker-selector-to",role:"combobox","aria-expanded":!g&&!k&&N,"aria-invalid":h||I||void 0,"aria-disabled":g||void 0,"aria-readonly":k||void 0,"aria-labelledby":L("end"),"aria-describedby":M()})]})}),renderDropdown:({styles:e,setFloatingRef:o,getFloatingProps:i})=>N?a("div",Object.assign({ref:o,style:e,role:"dialog","aria-label":"start"===S?"Selecting for: Start time":"end"===S?"Selecting for: End time":void 0},i(),{children:["start"===S&&r(s,{id:f?`${f}-start`:void 0,show:!0,value:E,format:j,onCancel:()=>U({keepFocus:!0}),onChange:X}),"end"===S&&r(s,{id:f?`${f}-end`:void 0,show:!0,value:_,format:j,onCancel:()=>U({keepFocus:!1}),onChange:Y})]}),S):null,onClose:()=>U({keepFocus:!1}),onDismiss:()=>U({keepFocus:!0}),clickToToggle:!1,offset:8,alignment:C,customZIndex:O,rootNode:$})}))};export{v as DialPicker};
+import{__rest as e}from"../../_virtual/_tslib.js";import{jsx as r,jsxs as a}from"react/jsx-runtime";import o from"clsx";import{useState as i,useRef as t,useEffect as l}from"react";import{concatIds as n}from"../../shared/accessibility/index.js";import{ElementWithDropdown as d}from"../../shared/dropdown-wrapper/element-with-dropdown.js";import{InputWrapper as s,BasicInput as c}from"../../shared/input-wrapper/input-wrapper.js";import{RangeInputInnerContainer as m}from"../../shared/range-input-inner-container/range-input-inner-container.js";import{TimepickerDropdown as p}from"../../shared/timepicker-dropdown/timepicker-dropdown.js";import"../../util/calendar-helper.js";import"../../external/dayjs/dayjs.min.js";import{useId as u}from"../../util/simple-id-generator.js";import"../../util/string-helper.js";import"@react-aria/live-announcer";import{TimeHelper as v}from"../../util/time-helper.js";import{wrapper as b,timeContainer as f,selectorInput as g}from"../common.styles.js";const h=h=>{var{id:y,disabled:j=!1,error:k,value:w,format:x="24hr",readOnly:F,onChange:C,onFocus:N,onBlur:O,alignment:$="left",dropdownZIndex:B,dropdownRootNode:D,"aria-labelledby":I,"aria-describedby":T,"aria-invalid":R}=h,S=e(h,["id","disabled","error","value","format","readOnly","onChange","onFocus","onBlur","alignment","dropdownZIndex","dropdownRootNode","aria-labelledby","aria-describedby","aria-invalid"]);const[Z,E]=i(!1),[V,_]=i("none"),[A,P]=i(""),[q,z]=i(""),[G,H]=i(!1),J=!F&&!j,K=t(null),L=u(),M=`${L}-start-label`,Q=`${L}-end-label`,U=e=>n(I,"start"===e?M:Q),W=()=>n(T);l((()=>{w&&(P(w.start),z(w.end))}),[w]);const X=e=>{J&&(G||Z||null==N||N(),H(!0),_(e),E(!0))},Y=e=>{var r,a;const o=!!(null==e?void 0:e.keepFocus),i=null!==(r=null==e?void 0:e.triggerBlur)&&void 0!==r?r:!o;E(!1),_("none"),H(o),i&&(null==O||O()),o&&(null===(a=K.current)||void 0===a||a.focus())},ee=e=>{var r,a,o;if(!G||Z)return;const i=e.relatedTarget,t=(null===(r=null==i?void 0:i.matches)||void 0===r?void 0:r.call(i,"[data-floating-ui-focusable]"))||(null===(a=null==i?void 0:i.matches)||void 0===a?void 0:a.call(i,"[data-floating-ui-focus-guard]"));!(!i||!(null===(o=K.current)||void 0===o?void 0:o.contains(i)))||t||(H(!1),null==O||O())},re=e=>{P(e),null==C||C({start:e,end:q}),_("end"),E(!0),H(!0)},ae=e=>{z(e),null==C||C({start:A,end:e}),""===A?(_("start"),E(!0),H(!0)):Y({keepFocus:!0})};return r("div",Object.assign({id:y},S,{className:o(b,S.className),children:r(d,{enabled:J,isOpen:Z,renderElement:()=>r(s,{ref:K,tabIndex:-1,onBlur:ee,"data-testid":"timepicker-container",role:"group",disabled:j,error:k,readOnly:F,focused:G,className:f,children:a(m,{error:k,currentActive:V,children:[r(c,{onFocus:()=>X("start"),onClick:()=>X("start"),readOnly:!0,placeholder:"From",value:v.formatDisplayValue(A,x),"data-testid":S["data-testid"]?`${S["data-testid"]}-timepicker-selector-from`:"timepicker-selector-from",role:"combobox","aria-expanded":!j&&!F&&Z,"aria-invalid":k||R,"aria-disabled":j,"aria-readonly":F,"aria-labelledby":U("start"),"aria-describedby":W(),className:g}),r(c,{onClick:()=>X("end"),readOnly:!0,placeholder:"To",value:v.formatDisplayValue(q,x),"data-testid":S["data-testid"]?`${S["data-testid"]}-timepicker-selector-to`:"timepicker-selector-to",role:"combobox","aria-expanded":!j&&!F&&Z,"aria-invalid":k||R||void 0,"aria-disabled":j||void 0,"aria-readonly":F||void 0,"aria-labelledby":U("end"),"aria-describedby":W(),className:g})]})}),renderDropdown:({styles:e,setFloatingRef:o,getFloatingProps:i})=>Z?a("div",Object.assign({ref:o,style:e,role:"dialog","aria-label":"start"===V?"Selecting for: Start time":"end"===V?"Selecting for: End time":void 0},i(),{children:["start"===V&&r(p,{id:y?`${y}-start`:void 0,show:!0,value:A,format:x,onCancel:()=>Y({keepFocus:!0}),onChange:re}),"end"===V&&r(p,{id:y?`${y}-end`:void 0,show:!0,value:q,format:x,onCancel:()=>Y({keepFocus:!1}),onChange:ae})]}),V):null,onClose:()=>Y({keepFocus:!1}),onDismiss:()=>Y({keepFocus:!0}),clickToToggle:!1,offset:8,alignment:$,customZIndex:B,rootNode:D})}))};export{h as DialPicker};
 //# sourceMappingURL=dial-picker.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"dial-picker.js","sources":["../../../src/time-range-picker/dial-picker/dial-picker.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\n\nimport { concatIds } from \"../../shared/accessibility\";\nimport type { DropdownRenderProps } from \"../../shared/dropdown-wrapper\";\nimport { ElementWithDropdown } from \"../../shared/dropdown-wrapper\";\nimport { RangeInputInnerContainer } from \"../../shared/range-input-inner-container\";\nimport { TimepickerDropdown } from \"../../shared/timepicker-dropdown/timepicker-dropdown\";\nimport { useId } from \"../../util\";\nimport { TimeHelper } from \"../../util/time-helper\";\nimport { SelectorInput, TimeContainer, Wrapper } from \"../common.styles\";\nimport type { TimeRangePickerProps, TimeRangePickerValue } from \"../types\";\n\ntype Active = \"start\" | \"end\" | \"none\";\n\nexport const DialPicker = ({\n    id,\n    disabled = false,\n    error,\n    value,\n    format = \"24hr\",\n    readOnly,\n    onChange,\n    onFocus,\n    onBlur,\n    alignment = \"left\",\n    dropdownZIndex,\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 [isOpen, setIsOpen] = useState(false);\n    const [active, setActive] = useState<Active>(\"none\");\n    const [startTimeVal, setStartTimeVal] = useState(\"\");\n    const [endTimeVal, setEndTimeVal] = useState(\"\");\n    const [focused, setFocused] = useState(false);\n\n    const enabled = !readOnly && !disabled;\n    const nodeRef = useRef<HTMLDivElement>(null);\n    const internalId = useId();\n    const startLabelId = `${internalId}-start-label`;\n    const endLabelId = `${internalId}-end-label`;\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const getDropdownAriaLabel = () => {\n        if (active === \"start\") {\n            return \"Selecting for: Start time\";\n        }\n\n        if (active === \"end\") {\n            return \"Selecting for: End time\";\n        }\n\n        return undefined;\n    };\n\n    const getInputLabelledBy = (type: Exclude<Active, \"none\">) => {\n        return concatIds(\n            ariaLabelledBy,\n            type === \"start\" ? startLabelId : endLabelId\n        );\n    };\n\n    const getInputDescribedBy = () => {\n        return concatIds(ariaDescribedBy);\n    };\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        if (value) {\n            setStartTimeVal(value.start);\n            setEndTimeVal(value.end);\n        }\n    }, [value]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleOpen = (next: Exclude<Active, \"none\">) => {\n        if (!enabled) return;\n        if (!focused && !isOpen) onFocus?.();\n        setFocused(true);\n        setActive(next);\n        setIsOpen(true);\n    };\n\n    const handleClose = (opts?: {\n        keepFocus?: boolean;\n        triggerBlur?: boolean;\n    }) => {\n        const keepFocus = !!opts?.keepFocus;\n        const triggerBlur = opts?.triggerBlur ?? !keepFocus;\n\n        setIsOpen(false);\n        setActive(\"none\");\n        setFocused(keepFocus);\n\n        if (triggerBlur) onBlur?.();\n\n        if (keepFocus) nodeRef.current?.focus();\n    };\n\n    const handleContainerBlur = (\n        event: React.FocusEvent<HTMLDivElement, Element>\n    ) => {\n        if (!focused || isOpen) return;\n\n        const target = event.relatedTarget as HTMLElement | null;\n\n        const isFloatingElement =\n            target?.matches?.(\"[data-floating-ui-focusable]\") ||\n            target?.matches?.(\"[data-floating-ui-focus-guard]\");\n        const isInsideNode = !!(target && nodeRef.current?.contains(target));\n\n        if (!isInsideNode && !isFloatingElement) {\n            setFocused(false);\n            onBlur?.();\n        }\n    };\n\n    const handleStartTime = (value: string) => {\n        setStartTimeVal(value);\n        onChange?.({ start: value, end: endTimeVal } as TimeRangePickerValue);\n\n        setActive(\"end\");\n        setIsOpen(true);\n        setFocused(true);\n    };\n\n    const handleEndTime = (value: string) => {\n        setEndTimeVal(value);\n        onChange?.({ start: startTimeVal, end: value } as TimeRangePickerValue);\n\n        if (startTimeVal === \"\") {\n            setActive(\"start\");\n            setIsOpen(true);\n            setFocused(true);\n        } else {\n            handleClose({ keepFocus: true });\n        }\n    };\n\n    const renderElement = () => (\n        <TimeContainer\n            ref={nodeRef}\n            tabIndex={-1}\n            onBlur={handleContainerBlur}\n            data-testid=\"timepicker-container\"\n            role=\"group\"\n            disabled={disabled}\n            error={error}\n            readOnly={readOnly}\n            focused={focused}\n        >\n            <RangeInputInnerContainer error={error} currentActive={active}>\n                <SelectorInput\n                    onFocus={() => handleOpen(\"start\")}\n                    onClick={() => handleOpen(\"start\")}\n                    readOnly\n                    placeholder=\"From\"\n                    value={TimeHelper.formatDisplayValue(startTimeVal, format)}\n                    data-testid={\n                        otherProps[\"data-testid\"]\n                            ? `${otherProps[\"data-testid\"]}-timepicker-selector-from`\n                            : \"timepicker-selector-from\"\n                    }\n                    role=\"combobox\"\n                    aria-expanded={!disabled && !readOnly ? isOpen : false}\n                    aria-invalid={error || ariaInvalid}\n                    aria-disabled={disabled}\n                    aria-readonly={readOnly}\n                    aria-labelledby={getInputLabelledBy(\"start\")}\n                    aria-describedby={getInputDescribedBy()}\n                />\n                <SelectorInput\n                    onClick={() => handleOpen(\"end\")}\n                    readOnly\n                    placeholder=\"To\"\n                    value={TimeHelper.formatDisplayValue(endTimeVal, format)}\n                    data-testid={\n                        otherProps[\"data-testid\"]\n                            ? `${otherProps[\"data-testid\"]}-timepicker-selector-to`\n                            : \"timepicker-selector-to\"\n                    }\n                    role=\"combobox\"\n                    aria-expanded={!disabled && !readOnly ? isOpen : false}\n                    aria-invalid={error || ariaInvalid || undefined}\n                    aria-disabled={disabled || undefined}\n                    aria-readonly={readOnly || undefined}\n                    aria-labelledby={getInputLabelledBy(\"end\")}\n                    aria-describedby={getInputDescribedBy()}\n                />\n            </RangeInputInnerContainer>\n        </TimeContainer>\n    );\n\n    const renderDropdown = ({\n        styles,\n        setFloatingRef,\n        getFloatingProps,\n    }: DropdownRenderProps) => {\n        if (!isOpen) return null;\n\n        return (\n            <div\n                ref={setFloatingRef}\n                style={styles}\n                role=\"dialog\"\n                key={active}\n                aria-label={getDropdownAriaLabel()}\n                {...getFloatingProps()}\n            >\n                {active === \"start\" && (\n                    <TimepickerDropdown\n                        id={id ? `${id}-start` : undefined}\n                        show\n                        value={startTimeVal}\n                        format={format}\n                        onCancel={() => handleClose({ keepFocus: true })}\n                        onChange={handleStartTime}\n                    />\n                )}\n                {active === \"end\" && (\n                    <TimepickerDropdown\n                        id={id ? `${id}-end` : undefined}\n                        show\n                        value={endTimeVal}\n                        format={format}\n                        onCancel={() => handleClose({ keepFocus: false })}\n                        onChange={handleEndTime}\n                    />\n                )}\n            </div>\n        );\n    };\n\n    return (\n        <Wrapper id={id} {...otherProps}>\n            <ElementWithDropdown\n                enabled={enabled}\n                isOpen={isOpen}\n                renderElement={renderElement}\n                renderDropdown={renderDropdown}\n                onClose={() => handleClose({ keepFocus: false })}\n                onDismiss={() => handleClose({ keepFocus: true })}\n                clickToToggle={false}\n                offset={8}\n                alignment={alignment}\n                customZIndex={dropdownZIndex}\n                rootNode={dropdownRootNode}\n            />\n        </Wrapper>\n    );\n};\n"],"names":["DialPicker","_a","id","disabled","error","value","format","readOnly","onChange","onFocus","onBlur","alignment","dropdownZIndex","dropdownRootNode","ariaLabelledBy","ariaDescribedBy","ariaInvalid","otherProps","__rest","isOpen","setIsOpen","useState","active","setActive","startTimeVal","setStartTimeVal","endTimeVal","setEndTimeVal","focused","setFocused","enabled","nodeRef","useRef","internalId","useId","startLabelId","endLabelId","getInputLabelledBy","type","concatIds","getInputDescribedBy","useEffect","start","end","handleOpen","next","handleClose","opts","keepFocus","triggerBlur","_b","current","focus","handleContainerBlur","event","target","relatedTarget","isFloatingElement","matches","call","_c","contains","handleStartTime","handleEndTime","_jsx","Wrapper","Object","assign","children","ElementWithDropdown","renderElement","TimeContainer","ref","tabIndex","role","_jsxs","RangeInputInnerContainer","currentActive","SelectorInput","onClick","placeholder","TimeHelper","formatDisplayValue","undefined","renderDropdown","styles","setFloatingRef","getFloatingProps","style","TimepickerDropdown","show","onCancel","onClose","onDismiss","clickToToggle","offset","customZIndex","rootNode"],"mappings":"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"}
+{"version":3,"file":"dial-picker.js","sources":["../../../src/time-range-picker/dial-picker/dial-picker.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport { concatIds } from \"../../shared/accessibility\";\nimport type { DropdownRenderProps } from \"../../shared/dropdown-wrapper\";\nimport { ElementWithDropdown } from \"../../shared/dropdown-wrapper\";\nimport { BasicInput, InputWrapper } from \"../../shared/input-wrapper\";\nimport { RangeInputInnerContainer } from \"../../shared/range-input-inner-container\";\nimport { TimepickerDropdown } from \"../../shared/timepicker-dropdown/timepicker-dropdown\";\nimport { useId } from \"../../util\";\nimport { TimeHelper } from \"../../util/time-helper\";\nimport * as styles from \"../common.styles\";\nimport type { TimeRangePickerProps, TimeRangePickerValue } from \"../types\";\n\ntype Active = \"start\" | \"end\" | \"none\";\n\nexport const DialPicker = ({\n    id,\n    disabled = false,\n    error,\n    value,\n    format = \"24hr\",\n    readOnly,\n    onChange,\n    onFocus,\n    onBlur,\n    alignment = \"left\",\n    dropdownZIndex,\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 [isOpen, setIsOpen] = useState(false);\n    const [active, setActive] = useState<Active>(\"none\");\n    const [startTimeVal, setStartTimeVal] = useState(\"\");\n    const [endTimeVal, setEndTimeVal] = useState(\"\");\n    const [focused, setFocused] = useState(false);\n\n    const enabled = !readOnly && !disabled;\n    const nodeRef = useRef<HTMLDivElement>(null);\n    const internalId = useId();\n    const startLabelId = `${internalId}-start-label`;\n    const endLabelId = `${internalId}-end-label`;\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const getDropdownAriaLabel = () => {\n        if (active === \"start\") {\n            return \"Selecting for: Start time\";\n        }\n\n        if (active === \"end\") {\n            return \"Selecting for: End time\";\n        }\n\n        return undefined;\n    };\n\n    const getInputLabelledBy = (type: Exclude<Active, \"none\">) => {\n        return concatIds(\n            ariaLabelledBy,\n            type === \"start\" ? startLabelId : endLabelId\n        );\n    };\n\n    const getInputDescribedBy = () => {\n        return concatIds(ariaDescribedBy);\n    };\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        if (value) {\n            setStartTimeVal(value.start);\n            setEndTimeVal(value.end);\n        }\n    }, [value]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleOpen = (next: Exclude<Active, \"none\">) => {\n        if (!enabled) return;\n        if (!focused && !isOpen) onFocus?.();\n        setFocused(true);\n        setActive(next);\n        setIsOpen(true);\n    };\n\n    const handleClose = (opts?: {\n        keepFocus?: boolean;\n        triggerBlur?: boolean;\n    }) => {\n        const keepFocus = !!opts?.keepFocus;\n        const triggerBlur = opts?.triggerBlur ?? !keepFocus;\n\n        setIsOpen(false);\n        setActive(\"none\");\n        setFocused(keepFocus);\n\n        if (triggerBlur) onBlur?.();\n\n        if (keepFocus) nodeRef.current?.focus();\n    };\n\n    const handleContainerBlur = (\n        event: React.FocusEvent<HTMLDivElement, Element>\n    ) => {\n        if (!focused || isOpen) return;\n\n        const target = event.relatedTarget as HTMLElement | null;\n\n        const isFloatingElement =\n            target?.matches?.(\"[data-floating-ui-focusable]\") ||\n            target?.matches?.(\"[data-floating-ui-focus-guard]\");\n        const isInsideNode = !!(target && nodeRef.current?.contains(target));\n\n        if (!isInsideNode && !isFloatingElement) {\n            setFocused(false);\n            onBlur?.();\n        }\n    };\n\n    const handleStartTime = (value: string) => {\n        setStartTimeVal(value);\n        onChange?.({ start: value, end: endTimeVal } as TimeRangePickerValue);\n\n        setActive(\"end\");\n        setIsOpen(true);\n        setFocused(true);\n    };\n\n    const handleEndTime = (value: string) => {\n        setEndTimeVal(value);\n        onChange?.({ start: startTimeVal, end: value } as TimeRangePickerValue);\n\n        if (startTimeVal === \"\") {\n            setActive(\"start\");\n            setIsOpen(true);\n            setFocused(true);\n        } else {\n            handleClose({ keepFocus: true });\n        }\n    };\n\n    const renderElement = () => (\n        <InputWrapper\n            ref={nodeRef}\n            tabIndex={-1}\n            onBlur={handleContainerBlur}\n            data-testid=\"timepicker-container\"\n            role=\"group\"\n            disabled={disabled}\n            error={error}\n            readOnly={readOnly}\n            focused={focused}\n            className={styles.timeContainer}\n        >\n            <RangeInputInnerContainer error={error} currentActive={active}>\n                <BasicInput\n                    onFocus={() => handleOpen(\"start\")}\n                    onClick={() => handleOpen(\"start\")}\n                    readOnly\n                    placeholder=\"From\"\n                    value={TimeHelper.formatDisplayValue(startTimeVal, format)}\n                    data-testid={\n                        otherProps[\"data-testid\"]\n                            ? `${otherProps[\"data-testid\"]}-timepicker-selector-from`\n                            : \"timepicker-selector-from\"\n                    }\n                    role=\"combobox\"\n                    aria-expanded={!disabled && !readOnly ? isOpen : false}\n                    aria-invalid={error || ariaInvalid}\n                    aria-disabled={disabled}\n                    aria-readonly={readOnly}\n                    aria-labelledby={getInputLabelledBy(\"start\")}\n                    aria-describedby={getInputDescribedBy()}\n                    className={styles.selectorInput}\n                />\n                <BasicInput\n                    onClick={() => handleOpen(\"end\")}\n                    readOnly\n                    placeholder=\"To\"\n                    value={TimeHelper.formatDisplayValue(endTimeVal, format)}\n                    data-testid={\n                        otherProps[\"data-testid\"]\n                            ? `${otherProps[\"data-testid\"]}-timepicker-selector-to`\n                            : \"timepicker-selector-to\"\n                    }\n                    role=\"combobox\"\n                    aria-expanded={!disabled && !readOnly ? isOpen : false}\n                    aria-invalid={error || ariaInvalid || undefined}\n                    aria-disabled={disabled || undefined}\n                    aria-readonly={readOnly || undefined}\n                    aria-labelledby={getInputLabelledBy(\"end\")}\n                    aria-describedby={getInputDescribedBy()}\n                    className={styles.selectorInput}\n                />\n            </RangeInputInnerContainer>\n        </InputWrapper>\n    );\n\n    const renderDropdown = ({\n        styles,\n        setFloatingRef,\n        getFloatingProps,\n    }: DropdownRenderProps) => {\n        if (!isOpen) return null;\n\n        return (\n            <div\n                ref={setFloatingRef}\n                style={styles}\n                role=\"dialog\"\n                key={active}\n                aria-label={getDropdownAriaLabel()}\n                {...getFloatingProps()}\n            >\n                {active === \"start\" && (\n                    <TimepickerDropdown\n                        id={id ? `${id}-start` : undefined}\n                        show\n                        value={startTimeVal}\n                        format={format}\n                        onCancel={() => handleClose({ keepFocus: true })}\n                        onChange={handleStartTime}\n                    />\n                )}\n                {active === \"end\" && (\n                    <TimepickerDropdown\n                        id={id ? `${id}-end` : undefined}\n                        show\n                        value={endTimeVal}\n                        format={format}\n                        onCancel={() => handleClose({ keepFocus: false })}\n                        onChange={handleEndTime}\n                    />\n                )}\n            </div>\n        );\n    };\n\n    return (\n        <div\n            id={id}\n            {...otherProps}\n            className={clsx(styles.wrapper, otherProps.className)}\n        >\n            <ElementWithDropdown\n                enabled={enabled}\n                isOpen={isOpen}\n                renderElement={renderElement}\n                renderDropdown={renderDropdown}\n                onClose={() => handleClose({ keepFocus: false })}\n                onDismiss={() => handleClose({ keepFocus: true })}\n                clickToToggle={false}\n                offset={8}\n                alignment={alignment}\n                customZIndex={dropdownZIndex}\n                rootNode={dropdownRootNode}\n            />\n        </div>\n    );\n};\n"],"names":["DialPicker","_a","id","disabled","error","value","format","readOnly","onChange","onFocus","onBlur","alignment","dropdownZIndex","dropdownRootNode","ariaLabelledBy","ariaDescribedBy","ariaInvalid","otherProps","__rest","isOpen","setIsOpen","useState","active","setActive","startTimeVal","setStartTimeVal","endTimeVal","setEndTimeVal","focused","setFocused","enabled","nodeRef","useRef","internalId","useId","startLabelId","endLabelId","getInputLabelledBy","type","concatIds","getInputDescribedBy","useEffect","start","end","handleOpen","next","handleClose","opts","keepFocus","triggerBlur","_b","current","focus","handleContainerBlur","event","target","relatedTarget","isFloatingElement","matches","call","_c","contains","handleStartTime","handleEndTime","_jsx","Object","assign","className","clsx","styles.wrapper","children","ElementWithDropdown","renderElement","InputWrapper","ref","tabIndex","role","styles.timeContainer","_jsxs","RangeInputInnerContainer","currentActive","BasicInput","onClick","placeholder","TimeHelper","formatDisplayValue","styles.selectorInput","undefined","renderDropdown","styles","setFloatingRef","getFloatingProps","style","TimepickerDropdown","show","onCancel","onClose","onDismiss","clickToToggle","offset","customZIndex","rootNode"],"mappings":"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"}

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

@@ -42,3 +42,4 @@ export declare class TimeSlotBarHelper {
         })[];
     };
 }
+export declare const getCellWidth: (variant: TimeSlotBarVariant) => 12 | 40;

package/time-slot-bar/helper.js

@@ -1,2 +1,2 @@
-import t from"../external/dayjs/dayjs.min.js";import e from"../external/dayjs/plugin/customParseFormat.js";import"../util/calendar-helper.js";import{DateHelper as r}from"../util/date-helper.js";import"react";import{SimpleIdGenerator as i}from"../util/simple-id-generator.js";import{StringHelper as a}from"../util/string-helper.js";import"@react-aria/live-announcer";import{TimeHelper as m}from"../util/time-helper.js";var n;t.extend(e),function(t){t.avail="Available",t.unavail="Unavailable"}(n||(n={}));const s=(t,e,r)=>({id:r,startTime:t,endTime:e,clickable:!1,label:void 0,styleAttributes:{backgroundColor:"transparent"}});class o{static formatHourlyDisplay(e){return t(e,"HH:mm").format("ha")}static calculateWidth(t,e,i){return r.getTimeDiffInMinutes(t,e)/15*(i/2)}static adjustTimeForMarker(e,r){const i=t(e,"HH:mm");switch(r){case"start":if(i.minute()>0&&i.minute()<30)return i.set("minute",0).format("HH:mm");if(i.minute()>30&&i.minute()<60)return i.set("minute",30).format("HH:mm");break;case"end":if(i.minute()>0&&i.minute()<30)return i.set("minute",30).format("HH:mm");if(i.minute()>30&&i.minute()<60){const t=i.add(1,"hour");return 0===t.hour()?"24:00":t.set("minute",0).format("HH:mm")}break;default:return e}return e}static processSlots(e,r,o){const u=["Time slot bar"],l=[],c=t=>{var e;const r=(i=t.startTime,s=t.endTime,c=null===(e=t.clickable)||void 0===e||e,d=t.label,a.joinNonEmptyStrings([m.formatTimeRange(i,s),c?n.avail:n.unavail,d]));var i,s,c,d;"minified"===o&&u.push(r),l.push(Object.assign(Object.assign({},t),{ariaLabel:"default"===o?r:void 0}))};if(r.length<1){const t=s(e.start,e.end,i.generate());return c(t),{summary:a.joinNonEmptyStrings(u),computedSlots:l}}const d=[...r].sort(((e,r)=>{const i=t(e.startTime,"HH:mm"),a=t(r.startTime,"HH:mm");return i.isBefore(a)?-1:i.isAfter(a)?1:0}));if(!m.isSameTime(e.start,d[0].startTime)){const t=s(e.start,d[0].startTime,i.generate());c(t)}d.forEach(((t,e,r)=>{var a;c(t);const{endTime:n}=t,{startTime:o}=null!==(a=r[e+1])&&void 0!==a?a:{};if(o&&!m.isSameTime(n,o)){const t=s(n,o,i.generate());c(t)}}));const f=d[d.length-1];if(!m.isSameTime(e.end,f.endTime)){const t=s(f.endTime,e.end,i.generate());c(t)}return{summary:a.joinNonEmptyStrings(u),computedSlots:l}}}export{o as TimeSlotBarHelper};
+import t from"../external/dayjs/dayjs.min.js";import e from"../external/dayjs/plugin/customParseFormat.js";import"../util/calendar-helper.js";import{DateHelper as r}from"../util/date-helper.js";import"react";import{SimpleIdGenerator as i}from"../util/simple-id-generator.js";import{StringHelper as a}from"../util/string-helper.js";import"@react-aria/live-announcer";import{TimeHelper as m}from"../util/time-helper.js";import{MINIFIED_CELL_SIZE as n,DEFAULT_CELL_SIZE as s}from"./time-slot-bar.styles.js";var o;t.extend(e),function(t){t.avail="Available",t.unavail="Unavailable"}(o||(o={}));const l=(t,e,r)=>({id:r,startTime:t,endTime:e,clickable:!1,label:void 0,styleAttributes:{backgroundColor:"transparent"}});class u{static formatHourlyDisplay(e){return t(e,"HH:mm").format("ha")}static calculateWidth(t,e,i){return r.getTimeDiffInMinutes(t,e)/15*(i/2)}static adjustTimeForMarker(e,r){const i=t(e,"HH:mm");switch(r){case"start":if(i.minute()>0&&i.minute()<30)return i.set("minute",0).format("HH:mm");if(i.minute()>30&&i.minute()<60)return i.set("minute",30).format("HH:mm");break;case"end":if(i.minute()>0&&i.minute()<30)return i.set("minute",30).format("HH:mm");if(i.minute()>30&&i.minute()<60){const t=i.add(1,"hour");return 0===t.hour()?"24:00":t.set("minute",0).format("HH:mm")}break;default:return e}return e}static processSlots(e,r,n){const s=["Time slot bar"],u=[],c=t=>{var e;const r=(i=t.startTime,l=t.endTime,c=null===(e=t.clickable)||void 0===e||e,d=t.label,a.joinNonEmptyStrings([m.formatTimeRange(i,l),c?o.avail:o.unavail,d]));var i,l,c,d;"minified"===n&&s.push(r),u.push(Object.assign(Object.assign({},t),{ariaLabel:"default"===n?r:void 0}))};if(r.length<1){const t=l(e.start,e.end,i.generate());return c(t),{summary:a.joinNonEmptyStrings(s),computedSlots:u}}const d=[...r].sort(((e,r)=>{const i=t(e.startTime,"HH:mm"),a=t(r.startTime,"HH:mm");return i.isBefore(a)?-1:i.isAfter(a)?1:0}));if(!m.isSameTime(e.start,d[0].startTime)){const t=l(e.start,d[0].startTime,i.generate());c(t)}d.forEach(((t,e,r)=>{var a;c(t);const{endTime:n}=t,{startTime:s}=null!==(a=r[e+1])&&void 0!==a?a:{};if(s&&!m.isSameTime(n,s)){const t=l(n,s,i.generate());c(t)}}));const f=d[d.length-1];if(!m.isSameTime(e.end,f.endTime)){const t=l(f.endTime,e.end,i.generate());c(t)}return{summary:a.joinNonEmptyStrings(s),computedSlots:u}}}const c=t=>"minified"===t?n:s;export{u as TimeSlotBarHelper,c as getCellWidth};
 //# sourceMappingURL=helper.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"helper.js","sources":["../../src/time-slot-bar/helper.ts"],"sourcesContent":["import dayjs from \"dayjs\";\nimport customParseFormat from \"dayjs/plugin/customParseFormat\";\n\nimport { DateHelper, SimpleIdGenerator, StringHelper } from \"../util\";\nimport { TimeHelper } from \"../util/time-helper\";\nimport type { TimeSlot as TTimeSlot, TimeSlotBarVariant } from \"./types\";\n// Load plugins\ndayjs.extend(customParseFormat);\n\n// ===========================================================================\n// INTERNAL TYPES\n// ===========================================================================\n\nenum ESlotStateLabel {\n    avail = \"Available\",\n    unavail = \"Unavailable\",\n}\n\n// ===========================================================================\n// INTERNAL HELPERS\n// ===========================================================================\n\nconst getSlotAriaLabel = (\n    slotStartTime: string,\n    slotEndTime: string,\n    isAvail?: boolean,\n    label?: string\n) =>\n    StringHelper.joinNonEmptyStrings([\n        TimeHelper.formatTimeRange(slotStartTime, slotEndTime),\n        isAvail ? ESlotStateLabel.avail : ESlotStateLabel.unavail,\n        label,\n    ]);\n\nconst buildUnavailableSlot = (\n    startTime: string,\n    endTime: string,\n    id: string\n): TTimeSlot & { ariaLabel?: string } => ({\n    id,\n    startTime,\n    endTime,\n    clickable: false,\n    label: undefined,\n    styleAttributes: { backgroundColor: \"transparent\" },\n});\n\n// ===========================================================================\n// HELPER FUNCTIONS\n// ===========================================================================\n\nexport class TimeSlotBarHelper {\n    /**\n     * Format HH:mm to am/pm display\n     * @param timeString input timeString string\n     */\n    public static formatHourlyDisplay(timeString: string): string {\n        const parsedTime = dayjs(timeString, \"HH:mm\");\n        return parsedTime.format(\"ha\");\n    }\n\n    /**\n     * Calculate width in px base on the time range in respect the cell width\n     * @param start input start string\n     * @param end input end string\n     * @param cellWidth input cellWidth number\n     */\n    public static calculateWidth(\n        start: string,\n        end: string,\n        cellWidth: number\n    ): number {\n        /**\n         * Each CELL_WIDTH is 30min interval\n         * Assuming 15 minutes corresponds to a fixed width of x cellWidth pixels (1/2 of CELL_WIDTH)\n         */\n        return (\n            (DateHelper.getTimeDiffInMinutes(start, end) / 15) * (cellWidth / 2)\n        );\n    }\n\n    /**\n     * Based on the time type, adjust the time to the nearest hour or 30 minuites marker.\n     * this helps to always show time slot marker properly.\n     * @param time - time to be adjusted\n     * @param type - \"start\" or \"end\" indicating which boundary to adjust\n     */\n    public static adjustTimeForMarker(\n        time: string,\n        type: \"start\" | \"end\"\n    ): string {\n        const parsedTime = dayjs(time, \"HH:mm\");\n        switch (type) {\n            case \"start\": {\n                // For xx:01 to xx:29, adjust to xx:00\n                if (parsedTime.minute() > 0 && parsedTime.minute() < 30) {\n                    return parsedTime.set(\"minute\", 0).format(\"HH:mm\");\n                }\n                // For xx:31 to xx:59, adjust to xx:30\n                if (parsedTime.minute() > 30 && parsedTime.minute() < 60) {\n                    return parsedTime.set(\"minute\", 30).format(\"HH:mm\");\n                }\n                break;\n            }\n            case \"end\": {\n                // For xx:01 to xx:29, adjust to xx:30\n                if (parsedTime.minute() > 0 && parsedTime.minute() < 30) {\n                    return parsedTime.set(\"minute\", 30).format(\"HH:mm\");\n                }\n                // For xx:31 to xx:59, adjust to next hour xx:00\n                if (parsedTime.minute() > 30 && parsedTime.minute() < 60) {\n                    const nextHour = parsedTime.add(1, \"hour\");\n                    // If it's 23:xx and rounds up to 24:00\n                    if (nextHour.hour() === 0) {\n                        return \"24:00\";\n                    }\n                    return nextHour.set(\"minute\", 0).format(\"HH:mm\");\n                }\n                break;\n            }\n            default:\n                return time;\n        }\n        return time;\n    }\n\n    /**\n     * Process raw slots and any gaps in the given time range.\n     *\n     * Builds a summary string and a list of slots that includes:\n     * - original slots,\n     * - leading/trailing unavailable time gaps,\n     * - gap slots inserted between non-contiguous slots.\n     *\n     * @param range - start/end bounds for the timeslot bar.\n     * @param slots - user-provided slots to render.\n     * @param variant - display variant controlling summary and aria label behavior.\n     * @returns summary for container aria-label and computed slots ready for rendering.\n     */\n    public static processSlots(\n        range: { start: string; end: string },\n        slots: TTimeSlot[],\n        variant: TimeSlotBarVariant\n    ) {\n        const summaryParts: string[] = [\"Time slot bar\"];\n        // Build visible slots plus any unavailable gaps\n        const computedSlots: (TTimeSlot & {\n            ariaLabel?: string;\n        })[] = [];\n\n        const createAriaLabelAndPushSlot = (slot: TTimeSlot) => {\n            const ariaLabel = getSlotAriaLabel(\n                slot.startTime,\n                slot.endTime,\n                slot.clickable ?? true,\n                slot.label\n            );\n\n            if (variant === \"minified\") summaryParts.push(ariaLabel);\n            computedSlots.push({\n                ...slot,\n                ariaLabel: variant === \"default\" ? ariaLabel : undefined,\n            });\n        };\n\n        if (slots.length < 1) {\n            // No real slots: represent the whole range as unavailable\n            const fullUnavailSlot = buildUnavailableSlot(\n                range.start,\n                range.end,\n                SimpleIdGenerator.generate()\n            );\n            createAriaLabelAndPushSlot(fullUnavailSlot);\n\n            return {\n                summary: StringHelper.joinNonEmptyStrings(summaryParts),\n                computedSlots,\n            };\n        }\n\n        const sortedSlots = [...slots].sort((a, b) => {\n            const timeA = dayjs(a.startTime, \"HH:mm\");\n            const timeB = dayjs(b.startTime, \"HH:mm\");\n            if (timeA.isBefore(timeB)) return -1;\n            if (timeA.isAfter(timeB)) return 1;\n            return 0;\n        });\n\n        if (!TimeHelper.isSameTime(range.start, sortedSlots[0].startTime)) {\n            // Add leading unavailable gap before the first slot\n            const leadingUnavailSlot = buildUnavailableSlot(\n                range.start,\n                sortedSlots[0].startTime,\n                SimpleIdGenerator.generate()\n            );\n            createAriaLabelAndPushSlot(leadingUnavailSlot);\n        }\n\n        sortedSlots.forEach((slot, index, self) => {\n            createAriaLabelAndPushSlot(slot);\n\n            const { endTime: slotEndTime } = slot;\n            const { startTime: nextSlotStartTime } = self[index + 1] ?? {};\n            const hasGapAfter =\n                nextSlotStartTime &&\n                !TimeHelper.isSameTime(slotEndTime, nextSlotStartTime);\n\n            if (hasGapAfter) {\n                // Add a gap slot between consecutive slots if non-contiguous\n                const unavailSlot = buildUnavailableSlot(\n                    slotEndTime,\n                    nextSlotStartTime,\n                    SimpleIdGenerator.generate()\n                );\n                createAriaLabelAndPushSlot(unavailSlot);\n            }\n        });\n\n        const lastSlot = sortedSlots[sortedSlots.length - 1];\n        if (!TimeHelper.isSameTime(range.end, lastSlot.endTime)) {\n            // Add trailing unavailable gap after the last slot\n            const trailingUnavailSlot = buildUnavailableSlot(\n                lastSlot.endTime,\n                range.end,\n                SimpleIdGenerator.generate()\n            );\n            createAriaLabelAndPushSlot(trailingUnavailSlot);\n        }\n\n        return {\n            summary: StringHelper.joinNonEmptyStrings(summaryParts),\n            computedSlots,\n        };\n    }\n}\n"],"names":["ESlotStateLabel","dayjs","extend","customParseFormat","buildUnavailableSlot","startTime","endTime","id","clickable","label","undefined","styleAttributes","backgroundColor","TimeSlotBarHelper","formatHourlyDisplay","timeString","format","calculateWidth","start","end","cellWidth","DateHelper","getTimeDiffInMinutes","adjustTimeForMarker","time","type","parsedTime","minute","set","nextHour","add","hour","processSlots","range","slots","variant","summaryParts","computedSlots","createAriaLabelAndPushSlot","slot","ariaLabel","slotStartTime","slotEndTime","isAvail","_a","StringHelper","joinNonEmptyStrings","TimeHelper","formatTimeRange","avail","unavail","push","Object","assign","length","fullUnavailSlot","SimpleIdGenerator","generate","summary","sortedSlots","sort","a","b","timeA","timeB","isBefore","isAfter","isSameTime","leadingUnavailSlot","forEach","index","self","nextSlotStartTime","unavailSlot","lastSlot","trailingUnavailSlot"],"mappings":"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"}
+{"version":3,"file":"helper.js","sources":["../../src/time-slot-bar/helper.ts"],"sourcesContent":["import dayjs from \"dayjs\";\nimport customParseFormat from \"dayjs/plugin/customParseFormat\";\n\nimport { DateHelper, SimpleIdGenerator, StringHelper } from \"../util\";\nimport { TimeHelper } from \"../util/time-helper\";\nimport * as styles from \"./time-slot-bar.styles\";\nimport type { TimeSlot as TTimeSlot, TimeSlotBarVariant } from \"./types\";\n// Load plugins\ndayjs.extend(customParseFormat);\n\n// ===========================================================================\n// INTERNAL TYPES\n// ===========================================================================\n\nenum ESlotStateLabel {\n    avail = \"Available\",\n    unavail = \"Unavailable\",\n}\n\n// ===========================================================================\n// INTERNAL HELPERS\n// ===========================================================================\n\nconst getSlotAriaLabel = (\n    slotStartTime: string,\n    slotEndTime: string,\n    isAvail?: boolean,\n    label?: string\n) =>\n    StringHelper.joinNonEmptyStrings([\n        TimeHelper.formatTimeRange(slotStartTime, slotEndTime),\n        isAvail ? ESlotStateLabel.avail : ESlotStateLabel.unavail,\n        label,\n    ]);\n\nconst buildUnavailableSlot = (\n    startTime: string,\n    endTime: string,\n    id: string\n): TTimeSlot & { ariaLabel?: string } => ({\n    id,\n    startTime,\n    endTime,\n    clickable: false,\n    label: undefined,\n    styleAttributes: { backgroundColor: \"transparent\" },\n});\n\n// ===========================================================================\n// HELPER FUNCTIONS\n// ===========================================================================\n\nexport class TimeSlotBarHelper {\n    /**\n     * Format HH:mm to am/pm display\n     * @param timeString input timeString string\n     */\n    public static formatHourlyDisplay(timeString: string): string {\n        const parsedTime = dayjs(timeString, \"HH:mm\");\n        return parsedTime.format(\"ha\");\n    }\n\n    /**\n     * Calculate width in px base on the time range in respect the cell width\n     * @param start input start string\n     * @param end input end string\n     * @param cellWidth input cellWidth number\n     */\n    public static calculateWidth(\n        start: string,\n        end: string,\n        cellWidth: number\n    ): number {\n        /**\n         * Each CELL_WIDTH is 30min interval\n         * Assuming 15 minutes corresponds to a fixed width of x cellWidth pixels (1/2 of CELL_WIDTH)\n         */\n        return (\n            (DateHelper.getTimeDiffInMinutes(start, end) / 15) * (cellWidth / 2)\n        );\n    }\n\n    /**\n     * Based on the time type, adjust the time to the nearest hour or 30 minuites marker.\n     * this helps to always show time slot marker properly.\n     * @param time - time to be adjusted\n     * @param type - \"start\" or \"end\" indicating which boundary to adjust\n     */\n    public static adjustTimeForMarker(\n        time: string,\n        type: \"start\" | \"end\"\n    ): string {\n        const parsedTime = dayjs(time, \"HH:mm\");\n        switch (type) {\n            case \"start\": {\n                // For xx:01 to xx:29, adjust to xx:00\n                if (parsedTime.minute() > 0 && parsedTime.minute() < 30) {\n                    return parsedTime.set(\"minute\", 0).format(\"HH:mm\");\n                }\n                // For xx:31 to xx:59, adjust to xx:30\n                if (parsedTime.minute() > 30 && parsedTime.minute() < 60) {\n                    return parsedTime.set(\"minute\", 30).format(\"HH:mm\");\n                }\n                break;\n            }\n            case \"end\": {\n                // For xx:01 to xx:29, adjust to xx:30\n                if (parsedTime.minute() > 0 && parsedTime.minute() < 30) {\n                    return parsedTime.set(\"minute\", 30).format(\"HH:mm\");\n                }\n                // For xx:31 to xx:59, adjust to next hour xx:00\n                if (parsedTime.minute() > 30 && parsedTime.minute() < 60) {\n                    const nextHour = parsedTime.add(1, \"hour\");\n                    // If it's 23:xx and rounds up to 24:00\n                    if (nextHour.hour() === 0) {\n                        return \"24:00\";\n                    }\n                    return nextHour.set(\"minute\", 0).format(\"HH:mm\");\n                }\n                break;\n            }\n            default:\n                return time;\n        }\n        return time;\n    }\n\n    /**\n     * Process raw slots and any gaps in the given time range.\n     *\n     * Builds a summary string and a list of slots that includes:\n     * - original slots,\n     * - leading/trailing unavailable time gaps,\n     * - gap slots inserted between non-contiguous slots.\n     *\n     * @param range - start/end bounds for the timeslot bar.\n     * @param slots - user-provided slots to render.\n     * @param variant - display variant controlling summary and aria label behavior.\n     * @returns summary for container aria-label and computed slots ready for rendering.\n     */\n    public static processSlots(\n        range: { start: string; end: string },\n        slots: TTimeSlot[],\n        variant: TimeSlotBarVariant\n    ) {\n        const summaryParts: string[] = [\"Time slot bar\"];\n        // Build visible slots plus any unavailable gaps\n        const computedSlots: (TTimeSlot & {\n            ariaLabel?: string;\n        })[] = [];\n\n        const createAriaLabelAndPushSlot = (slot: TTimeSlot) => {\n            const ariaLabel = getSlotAriaLabel(\n                slot.startTime,\n                slot.endTime,\n                slot.clickable ?? true,\n                slot.label\n            );\n\n            if (variant === \"minified\") summaryParts.push(ariaLabel);\n            computedSlots.push({\n                ...slot,\n                ariaLabel: variant === \"default\" ? ariaLabel : undefined,\n            });\n        };\n\n        if (slots.length < 1) {\n            // No real slots: represent the whole range as unavailable\n            const fullUnavailSlot = buildUnavailableSlot(\n                range.start,\n                range.end,\n                SimpleIdGenerator.generate()\n            );\n            createAriaLabelAndPushSlot(fullUnavailSlot);\n\n            return {\n                summary: StringHelper.joinNonEmptyStrings(summaryParts),\n                computedSlots,\n            };\n        }\n\n        const sortedSlots = [...slots].sort((a, b) => {\n            const timeA = dayjs(a.startTime, \"HH:mm\");\n            const timeB = dayjs(b.startTime, \"HH:mm\");\n            if (timeA.isBefore(timeB)) return -1;\n            if (timeA.isAfter(timeB)) return 1;\n            return 0;\n        });\n\n        if (!TimeHelper.isSameTime(range.start, sortedSlots[0].startTime)) {\n            // Add leading unavailable gap before the first slot\n            const leadingUnavailSlot = buildUnavailableSlot(\n                range.start,\n                sortedSlots[0].startTime,\n                SimpleIdGenerator.generate()\n            );\n            createAriaLabelAndPushSlot(leadingUnavailSlot);\n        }\n\n        sortedSlots.forEach((slot, index, self) => {\n            createAriaLabelAndPushSlot(slot);\n\n            const { endTime: slotEndTime } = slot;\n            const { startTime: nextSlotStartTime } = self[index + 1] ?? {};\n            const hasGapAfter =\n                nextSlotStartTime &&\n                !TimeHelper.isSameTime(slotEndTime, nextSlotStartTime);\n\n            if (hasGapAfter) {\n                // Add a gap slot between consecutive slots if non-contiguous\n                const unavailSlot = buildUnavailableSlot(\n                    slotEndTime,\n                    nextSlotStartTime,\n                    SimpleIdGenerator.generate()\n                );\n                createAriaLabelAndPushSlot(unavailSlot);\n            }\n        });\n\n        const lastSlot = sortedSlots[sortedSlots.length - 1];\n        if (!TimeHelper.isSameTime(range.end, lastSlot.endTime)) {\n            // Add trailing unavailable gap after the last slot\n            const trailingUnavailSlot = buildUnavailableSlot(\n                lastSlot.endTime,\n                range.end,\n                SimpleIdGenerator.generate()\n            );\n            createAriaLabelAndPushSlot(trailingUnavailSlot);\n        }\n\n        return {\n            summary: StringHelper.joinNonEmptyStrings(summaryParts),\n            computedSlots,\n        };\n    }\n}\n\n// Function to get the width of a cell in px\nexport const getCellWidth = (variant: TimeSlotBarVariant) => {\n    return variant === \"minified\"\n        ? styles.MINIFIED_CELL_SIZE\n        : styles.DEFAULT_CELL_SIZE;\n};\n"],"names":["ESlotStateLabel","dayjs","extend","customParseFormat","buildUnavailableSlot","startTime","endTime","id","clickable","label","undefined","styleAttributes","backgroundColor","TimeSlotBarHelper","formatHourlyDisplay","timeString","format","calculateWidth","start","end","cellWidth","DateHelper","getTimeDiffInMinutes","adjustTimeForMarker","time","type","parsedTime","minute","set","nextHour","add","hour","processSlots","range","slots","variant","summaryParts","computedSlots","createAriaLabelAndPushSlot","slot","ariaLabel","slotStartTime","slotEndTime","isAvail","_a","StringHelper","joinNonEmptyStrings","TimeHelper","formatTimeRange","avail","unavail","push","Object","assign","length","fullUnavailSlot","SimpleIdGenerator","generate","summary","sortedSlots","sort","a","b","timeA","timeB","isBefore","isAfter","isSameTime","leadingUnavailSlot","forEach","index","self","nextSlotStartTime","unavailSlot","lastSlot","trailingUnavailSlot","getCellWidth","styles.MINIFIED_CELL_SIZE","styles.DEFAULT_CELL_SIZE"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-import{__rest as t}from"../_virtual/_tslib.js";import{jsxs as r,jsx as e,Fragment as o}from"react/jsx-runtime";import i from"../external/dayjs/dayjs.min.js";import{forwardRef as l,useRef as a,useState as n,useImperativeHandle as d,useMemo as s,useEffect as c}from"react";import{useResizeDetector as m}from"../external/react-resize-detector/build/index.esm.js";import{VisuallyHidden as u}from"../shared/accessibility/index.js";import{TimeHelper as h}from"../util/time-helper.js";import{TimeSlotBarHelper as f}from"./helper.js";import{Container as $,TimeSlotBarContainer as b,TimeMarkerWrapper as p,TimeSlotWrapper as g,getCellWidth as v,TimeMarker as k,TimeLabel as C,TimeSlotBorder as y,TimeSlot as T,CellText as H,ArrowButton as j,ArrowIconLeft as x,ArrowIconRight as w}from"./time-slot-bar.styles.js";const B=l(((l,B)=>{const{"data-testid":L,className:W,variant:S="default",startTime:I,endTime:M,slots:R,onSlotClick:z,onClick:A,styleAttributes:E,initialScrollTime:F,roundInitialScrollTime:N=!0}=l,O=a(null),[P,_]=n(0),[D,q]=n(0),G=v(S),J=f.adjustTimeForMarker(I,"start"),K=f.adjustTimeForMarker(M,"end"),Q=2.5*G;d(B,(()=>({resetScroll:et})));const{summary:U,computedSlots:V}=s((()=>f.processSlots({start:J,end:K},R,S)),[J,K,R,S]);c((()=>{const t=O.current;return t&&(t.addEventListener("scroll",X),q(t.clientWidth)),()=>{t&&t.removeEventListener("scroll",X)}}),[]),c((()=>{et()}),[F,G,I,M]);const X=()=>{O.current&&_(O.current.scrollLeft)},Y=t=>{O.current&&O.current.scrollBy({left:"left"===t?-Q:Q,behavior:"smooth"})};m({onResize:()=>{O.current&&q(O.current.clientWidth)},targetRef:O,refreshMode:"debounce",refreshRate:50});const Z=t=>t<=G/2,tt=t=>{if(L)return`${L}-${t}`},rt=(t,r,e)=>{const o=0===t.minute();if("default"===e)return o;return o&&(r?t.hour()%2==0:t.hour()%2==1)},et=()=>{if(F&&O.current&&G>0){const t=h.calculateScrollPosition({scrollTime:F,minTime:J,maxTime:K,interval:30,intervalWidth:G,options:{roundToInterval:N}});null!==t&&(O.current.scrollLeft=t)}},ot=t=>S===t;return r($,{className:W,children:[r(b,{"data-testid":L,ref:O,$variant:S,children:[e(p,{"data-testid":tt("time-marker-wrapper"),"data-id":"marker-wrapper",children:(()=>{const t=[],r=i(J,"HH:mm"),o=i(K,"HH:mm"),l=r.hour()%2==0;for(let i=r;i.isBefore(o);i=i.add(30,"minute")){const r=rt(i,l,S);t.push(e(k,{"data-testid":`${i.format("HH:mm")}-marker`,$isLongMarker:r,$variant:S,children:r&&e(C,{weight:"semibold",children:f.formatHourlyDisplay(i.format("HH:mm"))})},i.format("HH:mm")))}return t})()}),e("div",{role:"grid","aria-label":U,tabIndex:0,children:r(g,{"data-testid":tt("time-slot-wrapper"),"data-id":"slot-wrapper",role:"row",children:[(()=>{if(!E)return;const{backgroundColor:t,backgroundColor2:i,hoverBackgroundColor:l,hoverBackgroundColor2:a,styleType:n="default"}=E,d=f.calculateWidth(J,K,G),s=!!A&&ot("default");return r(o,{children:[e(y,{$variant:S}),e(T,{"data-testid":tt("default-timeslot"),$width:d,$variant:S,$left:0,$styleType:n,$bgColor:t,$bgColor2:i,$hoverBgColor:l,$hoverBgColor2:a,$clickable:s,onClick:s?A:void 0},"default-timeslot")]})})(),V.map((o=>{const{id:i,startTime:l,endTime:a,label:n,clickable:d=!0,styleAttributes:s,ariaLabel:c}=o,{color:m,styleType:h="default",backgroundColor:$,backgroundColor2:b,hoverBackgroundColor:p,hoverBackgroundColor2:g}=s,v=f.calculateWidth(l,a,G),k=f.calculateWidth(J,l,G),C=d&&"default"===S,j=ot("default")&&n,x=r=>e=>{e.stopPropagation();const{ariaLabel:o}=r,i=t(r,["ariaLabel"]);C&&z(i)};return r("div",{role:"gridcell",children:[e(y,{"data-testid":"start-border",$variant:S,style:{left:`${k}px`}}),r(T,{"data-testid":tt(`${i}-timeslot`),$width:v,$left:k,$styleType:h,$variant:S,$bgColor:$,$bgColor2:b,$hoverBgColor:p,$hoverBgColor2:g,$clickable:C,onClick:x(o),children:[!!c&&e(u,{children:e("button",{type:"button","aria-disabled":!C,"aria-label":c,onClick:x(o)})}),j&&e(H,{$slotWidth:v,$color:m,weight:"semibold","aria-hidden":!c,children:Z(v)?"...":n})]}),M!==a&&e(y,{"data-testid":"end-border",$variant:S,style:{left:`${k+v}px`}})]},i)}))]})})]}),e(o,{children:P>0&&e(j,{"data-testid":tt("arrow-left"),"aria-hidden":!0,tabIndex:-1,$direction:"left",$variant:S,focusHighlight:!1,focusOutline:"none",onClick:()=>{Y("left")},children:e(x,{})})}),P+D<f.calculateWidth(J,K,G)?e(j,{"data-testid":tt("arrow-right"),"aria-hidden":!0,tabIndex:-1,$direction:"right",$variant:S,focusHighlight:!1,focusOutline:"none",onClick:()=>{Y("right")},children:e(w,{})}):e(o,{})]})}));export{B as TimeSlotBar};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as r,jsx as t,Fragment as o}from"react/jsx-runtime";import{ChevronLeftIcon as l}from"@lifesg/react-icons/chevron-left";import{ChevronRightIcon as a}from"@lifesg/react-icons/chevron-right";import i from"clsx";import s from"../external/dayjs/dayjs.min.js";import{forwardRef as d,useRef as n,useState as c,useImperativeHandle as m,useMemo as u,useEffect as f}from"react";import{useResizeDetector as h}from"../external/react-resize-detector/build/index.esm.js";import{VisuallyHidden as p}from"../shared/accessibility/index.js";import{ClickableIcon as b}from"../shared/clickable-icon/clickable-icon.js";import{TimeSlot as v}from"../shared/time-slot/time-slot.js";import{Typography as g}from"../typography/index.js";import{TimeHelper as k}from"../util/time-helper.js";import{TimeSlotBarHelper as y,getCellWidth as C}from"./helper.js";import{timeMarkerWrapper as T,timeSlotWrapper as j,timeSlotBarContainer as B,containerDefault as H,containerMinified as N,container as x,timeLabel as S,timeMarker as W,timeMarkerDefault as w,timeMarkerMinified as I,timeMarkerLong as L,timeSlotItemContent as $,cellText as M,arrowIcon as O,arrowButton as R,arrowButtonLeft as z,arrowButtonRight as A,arrowButtonDefault as E,arrowButtonMinified as F}from"./time-slot-bar.styles.js";import P from"./time-slot-divider.js";import X from"./time-slot-item.js";const _=d(((d,_)=>{const{"data-testid":D,className:q,variant:G="default",startTime:J,endTime:K,slots:Q,onSlotClick:U,onClick:V,styleAttributes:Y,initialScrollTime:Z,roundInitialScrollTime:ee=!0}=d,re=n(null),[te,oe]=c(0),[le,ae]=c(0),ie=C(G),se=y.adjustTimeForMarker(J,"start"),de=y.adjustTimeForMarker(K,"end"),ne=2.5*ie;m(_,(()=>({resetScroll:be})));const{summary:ce,computedSlots:me}=u((()=>y.processSlots({start:se,end:de},Q,G)),[se,de,Q,G]);f((()=>{const e=re.current;return e&&(e.addEventListener("scroll",ue),ae(e.clientWidth)),()=>{e&&e.removeEventListener("scroll",ue)}}),[]),f((()=>{be()}),[Z,ie,J,K]);const ue=()=>{re.current&&oe(re.current.scrollLeft)};h({onResize:()=>{re.current&&ae(re.current.clientWidth)},targetRef:re,refreshMode:"debounce",refreshRate:50});const fe=e=>e<=ie/2,he=e=>{if(D)return`${D}-${e}`},pe=(e,r,t)=>{const o=0===e.minute();if("default"===t)return o;return o&&(r?e.hour()%2==0:e.hour()%2==1)},be=()=>{if(Z&&re.current&&ie>0){const e=k.calculateScrollPosition({scrollTime:Z,minTime:se,maxTime:de,interval:30,intervalWidth:ie,options:{roundToInterval:ee}});null!==e&&(re.current.scrollLeft=e)}},ve=e=>G===e,ge=e=>{const r="left"===e,o=y.calculateWidth(se,de,ie);if(!(r?te>0:te+le<o))return null;const s=r?z:A,d="default"===G?E:F,n=t(r?l:a,{className:O});return t(b,{"data-testid":he(`arrow-${e}`),"aria-hidden":!0,tabIndex:-1,className:i(R,s,d),focusHighlight:!1,focusOutline:"none",onClick:()=>{(e=>{re.current&&re.current.scrollBy({left:"left"===e?-ne:ne,behavior:"smooth"})})(e)},children:n})};return r("div",{className:i(x,q),children:[r("div",{"data-testid":D,ref:re,className:i(B,"default"===G?H:N),children:[t("div",{className:T,"data-testid":he("time-marker-wrapper"),"data-id":"marker-wrapper",children:(()=>{const e=[],r=s(se,"HH:mm"),o=s(de,"HH:mm"),l=r.hour()%2==0;for(let a=r;a.isBefore(o);a=a.add(30,"minute")){const r=pe(a,l,G);e.push(t("div",{"data-testid":`${a.format("HH:mm")}-marker`,className:i(W,"default"===G?w:I,r&&L),children:r&&t(g.BodyXS,{className:S,weight:"semibold",children:y.formatHourlyDisplay(a.format("HH:mm"))})},a.format("HH:mm")))}return e})()}),t("div",{role:"grid","aria-label":ce,tabIndex:0,children:r("div",{className:j,"data-testid":he("time-slot-wrapper"),"data-id":"slot-wrapper",role:"row",children:[(()=>{if(!Y)return;const{backgroundColor:e,backgroundColor2:l,hoverBackgroundColor:a,hoverBackgroundColor2:i,styleType:s="default"}=Y,d=y.calculateWidth(se,de,ie),n=!!V&&ve("default");return r(o,{children:[t(P,{variant:G}),t(X,{variant:G,dataTestId:he("default-timeslot"),slotWidth:d,slotOffset:0,onClick:n?V:void 0,children:t(v,{className:$,styleType:s,bgColor:e,bgColor2:l,hoverBgColor:a,hoverBgColor2:i,clickable:n})},"default-timeslot")]})})(),me.map((o=>{const{id:l,startTime:a,endTime:i,label:s,clickable:d=!0,styleAttributes:n,ariaLabel:c}=o,{color:m,styleType:u="default",backgroundColor:f,backgroundColor2:h,hoverBackgroundColor:b,hoverBackgroundColor2:k}=n,C=y.calculateWidth(a,i,ie),T=y.calculateWidth(se,a,ie),j=d&&"default"===G,B=ve("default")&&s,H=r=>t=>{t.stopPropagation();const{ariaLabel:o}=r,l=e(r,["ariaLabel"]);j&&U(l)};return r("div",{role:"gridcell",children:[t(P,{variant:G,left:T,dataTestId:"start-border"}),t(X,{variant:G,dataTestId:he(`${l}-timeslot`),slotWidth:C,slotOffset:T,color:m,onClick:H(o),children:r(v,{className:$,styleType:u,bgColor:f,bgColor2:h,hoverBgColor:b,hoverBgColor2:k,clickable:j,children:[!!c&&t(p,{children:t("button",{type:"button","aria-disabled":!j,"aria-label":c,onClick:H(o)})}),B&&t(g.BodyXS,{className:M,weight:"semibold","aria-hidden":!c,children:fe(C)?"...":s})]})}),K!==i&&t(P,{variant:G,dataTestId:"end-border",left:T+C})]},l)}))]})})]}),ge("left"),ge("right")]})}));export{_ as TimeSlotBar};
 //# sourceMappingURL=time-slot-bar.js.map