"use client"; import { Clock } from "lucide-react"; import { Slot as SlotPrimitive } from "radix-ui"; import * as React from "react"; import { useComposedRefs } from "@/lib/compose-refs"; import { cn } from "@/lib/utils"; import { VisuallyHiddenInput } from "@/registry/bases/radix/components/visually-hidden-input"; import { useAsRef } from "@/registry/bases/radix/hooks/use-as-ref"; import { useIsomorphicLayoutEffect } from "@/registry/bases/radix/hooks/use-isomorphic-layout-effect"; import { useLazyRef } from "@/registry/bases/radix/hooks/use-lazy-ref"; import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger, } from "@/registry/bases/radix/ui/popover"; const ROOT_NAME = "TimePicker"; const LABEL_NAME = "TimePickerLabel"; const INPUT_GROUP_NAME = "TimePickerInputGroup"; const INPUT_NAME = "TimePickerInput"; const TRIGGER_NAME = "TimePickerTrigger"; const CONTENT_NAME = "TimePickerContent"; const COLUMN_NAME = "TimePickerColumn"; const COLUMN_ITEM_NAME = "TimePickerColumnItem"; const HOUR_NAME = "TimePickerHour"; const MINUTE_NAME = "TimePickerMinute"; const SECOND_NAME = "TimePickerSecond"; const PERIOD_NAME = "TimePickerPeriod"; const CLEAR_NAME = "TimePickerClear"; const DEFAULT_STEP = 1; const DEFAULT_SEGMENT_PLACEHOLDER = "--"; const DEFAULT_LOCALE = undefined; const SEGMENTS: Segment[] = ["hour", "minute", "second", "period"]; const PERIODS = ["AM", "PM"] as const; type Segment = "hour" | "minute" | "second" | "period"; type SegmentFormat = "numeric" | "2-digit"; type Period = (typeof PERIODS)[number]; interface DivProps extends React.ComponentProps<"div"> { asChild?: boolean; } interface ButtonProps extends React.ComponentProps<"button"> { asChild?: boolean; } type PopoverContentProps = React.ComponentProps; type InputGroupElement = React.ComponentRef; type InputElement = React.ComponentRef; type TriggerElement = React.ComponentRef; type ColumnElement = React.ComponentRef; type ColumnItemElement = React.ComponentRef; interface TimeValue { hour?: number; minute?: number; second?: number; period?: Period; } interface ItemData { value: number | string; ref: React.RefObject; selected: boolean; } interface ColumnData { id: string; ref: React.RefObject; getSelectedItemRef: () => React.RefObject | null; getItems: () => ItemData[]; } function focusFirst( candidates: React.RefObject[], preventScroll = false, ) { const PREVIOUSLY_FOCUSED_ELEMENT = document.activeElement; for (const candidateRef of candidates) { const candidate = candidateRef.current; if (!candidate) continue; if (candidate === PREVIOUSLY_FOCUSED_ELEMENT) return; candidate.focus({ preventScroll }); if (document.activeElement !== PREVIOUSLY_FOCUSED_ELEMENT) return; } } function sortNodes }>( items: T[], ): T[] { return items.sort((a, b) => { const elementA = a.ref.current; const elementB = b.ref.current; if (!elementA || !elementB) return 0; const position = elementA.compareDocumentPosition(elementB); if (position & Node.DOCUMENT_POSITION_FOLLOWING) { return -1; } if (position & Node.DOCUMENT_POSITION_PRECEDING) { return 1; } return 0; }); } function getIs12Hour(locale?: string): boolean { const testDate = new Date(2000, 0, 1, 13, 0, 0); const formatted = new Intl.DateTimeFormat(locale, { hour: "numeric", }).format(testDate); return /am|pm/i.test(formatted) || !formatted.includes("13"); } function parseTimeString(timeString: string | undefined): TimeValue | null { if (!timeString) return null; const parts = timeString.split(":"); if (parts.length < 2) return null; const result: TimeValue = {}; if (parts[0] && parts[0] !== DEFAULT_SEGMENT_PLACEHOLDER) { const hour = Number.parseInt(parts[0], 10); if (!Number.isNaN(hour) && hour >= 0 && hour <= 23) { result.hour = hour; } } if (parts[1] && parts[1] !== DEFAULT_SEGMENT_PLACEHOLDER) { const minute = Number.parseInt(parts[1], 10); if (!Number.isNaN(minute) && minute >= 0 && minute <= 59) { result.minute = minute; } } if (parts[2] && parts[2] !== DEFAULT_SEGMENT_PLACEHOLDER) { const second = Number.parseInt(parts[2], 10); if (!Number.isNaN(second) && second >= 0 && second <= 59) { result.second = second; } } if ( result.hour === undefined && result.minute === undefined && result.second === undefined ) { return null; } return result; } function formatTimeValue(value: TimeValue, showSeconds: boolean): string { const hourStr = value.hour !== undefined ? value.hour.toString().padStart(2, "0") : DEFAULT_SEGMENT_PLACEHOLDER; const minuteStr = value.minute !== undefined ? value.minute.toString().padStart(2, "0") : DEFAULT_SEGMENT_PLACEHOLDER; const secondStr = value.second !== undefined ? value.second.toString().padStart(2, "0") : DEFAULT_SEGMENT_PLACEHOLDER; if (showSeconds) { return `${hourStr}:${minuteStr}:${secondStr}`; } return `${hourStr}:${minuteStr}`; } function to12Hour(hour24: number): { hour: number; period: Period } { const period: Period = hour24 >= 12 ? "PM" : "AM"; const hour = hour24 % 12 || 12; return { hour, period }; } function to24Hour(hour12: number, period: Period): number { if (hour12 === 12) { return period === "PM" ? 12 : 0; } return period === "PM" ? hour12 + 12 : hour12; } function clamp(value: number, min: number, max: number) { return Math.min(Math.max(value, min), max); } interface StoreState { value: string; open: boolean; openedViaFocus: boolean; } interface Store { subscribe: (callback: () => void) => () => void; getState: () => StoreState; setState: (key: K, value: StoreState[K]) => void; notify: () => void; } const StoreContext = React.createContext(null); function useStoreContext(consumerName: string) { const context = React.useContext(StoreContext); if (!context) { throw new Error(`\`${consumerName}\` must be used within \`${ROOT_NAME}\``); } return context; } function useStore( selector: (state: StoreState) => T, ogStore?: Store | null, ): T { const contextStore = React.useContext(StoreContext); const store = ogStore ?? contextStore; if (!store) { throw new Error(`\`useStore\` must be used within \`${ROOT_NAME}\``); } const getSnapshot = React.useCallback( () => selector(store.getState()), [store, selector], ); return React.useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot); } type SegmentPlaceholder = | string | { hour?: string; minute?: string; second?: string; period?: string; }; interface TimePickerContextValue { id: string; inputGroupId: string; labelId: string; triggerId: string; inputGroupRef: React.RefObject; triggerRef: React.RefObject; openOnFocus: boolean; inputGroupClickAction: "focus" | "open"; onInputGroupChange: (inputGroup: InputGroupElement | null) => void; disabled: boolean; readOnly: boolean; required: boolean; invalid: boolean; showSeconds: boolean; is12Hour: boolean; minuteStep: number; secondStep: number; hourStep: number; segmentPlaceholder: { hour: string; minute: string; second: string; period: string; }; min?: string; max?: string; } const TimePickerContext = React.createContext( null, ); function useTimePickerContext(consumerName: string) { const context = React.useContext(TimePickerContext); if (!context) { throw new Error(`\`${consumerName}\` must be used within \`${ROOT_NAME}\``); } return context; } interface TimePickerProps extends DivProps { value?: string; defaultValue?: string; onValueChange?: (value: string) => void; open?: boolean; defaultOpen?: boolean; onOpenChange?: (open: boolean) => void; openOnFocus?: boolean; inputGroupClickAction?: "focus" | "open"; min?: string; max?: string; hourStep?: number; minuteStep?: number; secondStep?: number; segmentPlaceholder?: SegmentPlaceholder; locale?: string; name?: string; disabled?: boolean; invalid?: boolean; readOnly?: boolean; required?: boolean; showSeconds?: boolean; } function TimePicker(props: TimePickerProps) { const { value: valueProp, defaultValue, onValueChange, open, defaultOpen, onOpenChange, openOnFocus = false, inputGroupClickAction = "focus", min, max, hourStep = DEFAULT_STEP, minuteStep = DEFAULT_STEP, secondStep = DEFAULT_STEP, segmentPlaceholder = DEFAULT_SEGMENT_PLACEHOLDER, locale = DEFAULT_LOCALE, name, asChild, disabled = false, invalid = false, readOnly = false, required = false, showSeconds = false, className, children, id, ...rootProps } = props; const instanceId = React.useId(); const rootId = id ?? instanceId; const inputGroupId = React.useId(); const labelId = React.useId(); const triggerId = React.useId(); const inputGroupRef = React.useRef(null); const triggerRef = React.useRef(null); const [inputGroup, setInputGroup] = React.useState( null, ); const isFormControl = inputGroup ? !!inputGroup.closest("form") : true; const listenersRef = useLazyRef(() => new Set<() => void>()); const stateRef = useLazyRef(() => ({ value: valueProp ?? defaultValue ?? "", open: open ?? defaultOpen ?? false, openedViaFocus: false, })); const propsRef = useAsRef({ onValueChange, onOpenChange }); const store: Store = React.useMemo(() => { return { subscribe: (cb) => { listenersRef.current.add(cb); return () => listenersRef.current.delete(cb); }, getState: () => stateRef.current, setState: (key, value) => { if (Object.is(stateRef.current[key], value)) return; if (key === "value" && typeof value === "string") { stateRef.current.value = value; propsRef.current.onValueChange?.(value); } else if (key === "open" && typeof value === "boolean") { stateRef.current.open = value; propsRef.current.onOpenChange?.(value); if (!value) { stateRef.current.openedViaFocus = false; } } else { stateRef.current[key] = value; } store.notify(); }, notify: () => { for (const cb of listenersRef.current) { cb(); } }, }; }, [listenersRef, stateRef, propsRef]); const value = useStore((state) => state.value, store); useIsomorphicLayoutEffect(() => { if (valueProp !== undefined) { store.setState("value", valueProp); } }, [valueProp]); useIsomorphicLayoutEffect(() => { if (open !== undefined) { store.setState("open", open); } }, [open]); const storeOpen = useStore((state) => state.open, store); const onPopoverOpenChange = React.useCallback( (newOpen: boolean) => store.setState("open", newOpen), [store], ); const is12Hour = React.useMemo(() => getIs12Hour(locale), [locale]); const normalizedPlaceholder = React.useMemo(() => { if (typeof segmentPlaceholder === "string") { return { hour: segmentPlaceholder, minute: segmentPlaceholder, second: segmentPlaceholder, period: segmentPlaceholder, }; } return { hour: segmentPlaceholder.hour ?? DEFAULT_SEGMENT_PLACEHOLDER, minute: segmentPlaceholder.minute ?? DEFAULT_SEGMENT_PLACEHOLDER, second: segmentPlaceholder.second ?? DEFAULT_SEGMENT_PLACEHOLDER, period: segmentPlaceholder.period ?? DEFAULT_SEGMENT_PLACEHOLDER, }; }, [segmentPlaceholder]); const rootContext = React.useMemo( () => ({ id: rootId, inputGroupId, labelId, triggerId, inputGroupRef, triggerRef, openOnFocus, inputGroupClickAction, onInputGroupChange: setInputGroup, disabled, readOnly, required, invalid, showSeconds, is12Hour, minuteStep, secondStep, hourStep, segmentPlaceholder: normalizedPlaceholder, min, max, }), [ rootId, inputGroupId, labelId, triggerId, openOnFocus, inputGroupClickAction, disabled, readOnly, required, invalid, showSeconds, is12Hour, minuteStep, secondStep, hourStep, normalizedPlaceholder, min, max, ], ); const RootPrimitive = asChild ? SlotPrimitive.Slot : "div"; return ( <> {children} {isFormControl && ( )} ); } interface TimePickerLabelProps extends React.ComponentProps<"label"> { asChild?: boolean; } function TimePickerLabel(props: TimePickerLabelProps) { const { asChild, className, ...labelProps } = props; const { labelId } = useTimePickerContext(LABEL_NAME); const LabelPrimitive = asChild ? SlotPrimitive.Slot : "label"; return ( ); } interface TimePickerInputGroupContextValue { onInputRegister: ( segment: Segment, ref: React.RefObject, ) => void; onInputUnregister: (segment: Segment) => void; getNextInput: ( currentSegment: Segment, ) => React.RefObject | null; } const TimePickerInputGroupContext = React.createContext(null); function useTimePickerInputGroupContext(consumerName: string) { const context = React.useContext(TimePickerInputGroupContext); if (!context) { throw new Error( `\`${consumerName}\` must be used within \`${INPUT_GROUP_NAME}\``, ); } return context; } function TimePickerInputGroup(props: DivProps) { const { onPointerDown: onPointerDownProp, onClick: onClickProp, asChild, className, style, ref, ...inputGroupProps } = props; const { inputGroupId, labelId, onInputGroupChange, disabled, readOnly, invalid, segmentPlaceholder, inputGroupRef, triggerRef, inputGroupClickAction, } = useTimePickerContext(INPUT_GROUP_NAME); const store = useStoreContext(INPUT_GROUP_NAME); const composedRef = useComposedRefs(ref, inputGroupRef, onInputGroupChange); const inputRefsMap = React.useRef< Map> >(new Map()); const onInputRegister = React.useCallback( (segment: Segment, ref: React.RefObject) => { inputRefsMap.current.set(segment, ref); }, [], ); const onInputUnregister = React.useCallback((segment: Segment) => { inputRefsMap.current.delete(segment); }, []); const getNextInput = React.useCallback( (currentSegment: Segment): React.RefObject | null => { const segmentOrder: Segment[] = ["hour", "minute", "second", "period"]; const currentIndex = segmentOrder.indexOf(currentSegment); if (currentIndex === -1 || currentIndex === segmentOrder.length - 1) { return null; } for (let i = currentIndex + 1; i < segmentOrder.length; i++) { const nextSegment = segmentOrder[i]; if (nextSegment) { const nextRef = inputRefsMap.current.get(nextSegment); if (nextRef?.current) { return nextRef; } } } return null; }, [], ); const onPointerDown = React.useCallback( (event: React.PointerEvent) => { onPointerDownProp?.(event); if (disabled || readOnly || event.defaultPrevented) return; const target = event.target as HTMLElement; if (target.tagName === "INPUT" || target.closest("input")) { return; } if (triggerRef.current?.contains(target)) { return; } event.preventDefault(); }, [onPointerDownProp, disabled, readOnly, triggerRef], ); const onClick = React.useCallback( (event: React.MouseEvent) => { onClickProp?.(event); if (disabled || readOnly || event.defaultPrevented) return; const target = event.target as HTMLElement; if (target.tagName === "INPUT" || target.closest("input")) { return; } if (triggerRef.current?.contains(target)) { return; } if (inputGroupClickAction === "open") { store.setState("open", true); } else { const activeElement = document.activeElement; const isInputAlreadyFocused = activeElement && activeElement.tagName === "INPUT" && inputGroupRef.current?.contains(activeElement); if (!isInputAlreadyFocused) { for (const segment of SEGMENTS) { const inputRef = inputRefsMap.current.get(segment); if (inputRef?.current) { inputRef.current.focus(); inputRef.current.select(); break; } } } } }, [ onClickProp, disabled, readOnly, inputGroupClickAction, store, triggerRef, inputGroupRef, ], ); const inputGroupContextValue = React.useMemo( () => ({ onInputRegister, onInputUnregister, getNextInput, }), [onInputRegister, onInputUnregister, getNextInput], ); const InputGroupPrimitive = asChild ? SlotPrimitive.Slot : "div"; return ( ); } interface TimePickerInputProps extends Omit, "type" | "value"> { segment: Segment; } function TimePickerInput(props: TimePickerInputProps) { const { segment, onBlur: onBlurProp, onChange: onChangeProp, onClick: onClickProp, onFocus: onFocusProp, onKeyDown: onKeyDownProp, disabled: disabledProp, readOnly: readOnlyProp, className, style, ref, ...inputProps } = props; const { is12Hour, showSeconds, disabled, readOnly, segmentPlaceholder, openOnFocus, } = useTimePickerContext(INPUT_NAME); const store = useStoreContext(INPUT_NAME); const inputGroupContext = useTimePickerInputGroupContext(INPUT_NAME); const isDisabled = disabledProp || disabled; const isReadOnly = readOnlyProp || readOnly; const value = useStore((state) => state.value); const timeValue = parseTimeString(value); const inputRef = React.useRef(null); const composedRef = useComposedRefs(ref, inputRef); useIsomorphicLayoutEffect(() => { if (segment) { inputGroupContext.onInputRegister(segment as Segment, inputRef); return () => inputGroupContext.onInputUnregister(segment as Segment); } }, [inputGroupContext, segment]); const getSegmentValue = React.useCallback(() => { if (!timeValue) { if (!segment) return ""; return segmentPlaceholder[segment]; } switch (segment) { case "hour": { if (timeValue.hour === undefined) return segmentPlaceholder.hour; if (is12Hour) { return to12Hour(timeValue.hour).hour.toString().padStart(2, "0"); } return timeValue.hour.toString().padStart(2, "0"); } case "minute": if (timeValue.minute === undefined) return segmentPlaceholder.minute; return timeValue.minute.toString().padStart(2, "0"); case "second": if (timeValue.second === undefined) return segmentPlaceholder.second; return timeValue.second.toString().padStart(2, "0"); case "period": { if (!timeValue || timeValue.hour === undefined) return segmentPlaceholder.period; return to12Hour(timeValue.hour).period; } default: return ""; } }, [timeValue, segment, is12Hour, segmentPlaceholder]); const [editValue, setEditValue] = React.useState(getSegmentValue()); const [isEditing, setIsEditing] = React.useState(false); const [pendingDigit, setPendingDigit] = React.useState(null); React.useEffect(() => { if (!isEditing) { setEditValue(getSegmentValue()); setPendingDigit(null); } }, [getSegmentValue, isEditing]); const updateTimeValue = React.useCallback( (newSegmentValue: string | undefined, shouldCreateIfEmpty = false) => { const placeholder = segment ? segmentPlaceholder[segment] : DEFAULT_SEGMENT_PLACEHOLDER; if (!newSegmentValue || newSegmentValue === placeholder) return; if (!timeValue && !shouldCreateIfEmpty) return; const currentTime = timeValue ?? {}; const newTime = { ...currentTime }; switch (segment) { case "hour": { const displayHour = Number.parseInt(newSegmentValue, 10); if (!Number.isNaN(displayHour)) { if (is12Hour) { const clampedHour = clamp(displayHour, 1, 12); let currentPeriod: Period; if (timeValue?.period !== undefined) { currentPeriod = timeValue.period; } else if (timeValue?.hour !== undefined) { currentPeriod = to12Hour(timeValue.hour).period; } else { const now = new Date(); currentPeriod = to12Hour(now.getHours()).period; } const hour24 = to24Hour(clampedHour, currentPeriod); newTime.hour = hour24; if (timeValue?.period !== undefined) { newTime.period = timeValue.period; } } else { newTime.hour = clamp(displayHour, 0, 23); } } break; } case "minute": { const minute = Number.parseInt(newSegmentValue, 10); if (!Number.isNaN(minute)) { newTime.minute = clamp(minute, 0, 59); } break; } case "second": { const second = Number.parseInt(newSegmentValue, 10); if (!Number.isNaN(second)) { newTime.second = clamp(second, 0, 59); } break; } case "period": { if (newSegmentValue === "AM" || newSegmentValue === "PM") { newTime.period = newSegmentValue; if (timeValue && timeValue.hour !== undefined) { const currentDisplay = to12Hour(timeValue.hour); newTime.hour = to24Hour(currentDisplay.hour, newSegmentValue); } } break; } } const newValue = formatTimeValue(newTime, showSeconds); store.setState("value", newValue); }, [timeValue, segment, is12Hour, showSeconds, store, segmentPlaceholder], ); const onBlur = React.useCallback( (event: React.FocusEvent) => { onBlurProp?.(event); if (event.defaultPrevented) return; setIsEditing(false); const placeholder = segment ? segmentPlaceholder[segment] : DEFAULT_SEGMENT_PLACEHOLDER; if (editValue && editValue !== placeholder && editValue.length > 0) { let valueToUpdate = editValue; if (segment !== "period") { if (editValue.length === 2) { valueToUpdate = editValue; } else if (editValue.length === 1) { const numValue = Number.parseInt(editValue, 10); if (!Number.isNaN(numValue)) { valueToUpdate = numValue.toString().padStart(2, "0"); } } } updateTimeValue(valueToUpdate, true); queueMicrotask(() => { const currentTimeValue = parseTimeString(store.getState().value); if (currentTimeValue) { const now = new Date(); const newTime = { ...currentTimeValue }; let needsUpdate = false; if (newTime.hour === undefined) { newTime.hour = now.getHours(); needsUpdate = true; } if (newTime.minute === undefined) { newTime.minute = now.getMinutes(); needsUpdate = true; } if (showSeconds && newTime.second === undefined) { newTime.second = now.getSeconds(); needsUpdate = true; } if (needsUpdate) { const newValue = formatTimeValue(newTime, showSeconds); store.setState("value", newValue); } } }); } setEditValue(getSegmentValue()); setPendingDigit(null); }, [ onBlurProp, editValue, updateTimeValue, getSegmentValue, segment, segmentPlaceholder, showSeconds, store, ], ); const onChange = React.useCallback( (event: React.ChangeEvent) => { onChangeProp?.(event); if (event.defaultPrevented) return; let newValue = event.target.value; const placeholder = segment ? segmentPlaceholder[segment] : DEFAULT_SEGMENT_PLACEHOLDER; if ( editValue === placeholder && newValue.length > 0 && newValue !== placeholder ) { newValue = newValue.replace(new RegExp(`^${placeholder}`), ""); } if (segment === "period") { const firstChar = newValue.charAt(0).toUpperCase(); let newPeriod: Period | null = null; if (firstChar === "A" || firstChar === "1") { newPeriod = "AM"; } else if (firstChar === "P" || firstChar === "2") { newPeriod = "PM"; } if (newPeriod) { setEditValue(newPeriod); updateTimeValue(newPeriod, true); queueMicrotask(() => { inputRef.current?.select(); }); } return; } if (segment === "hour" || segment === "minute" || segment === "second") { newValue = newValue.replace(/\D/g, ""); } if (newValue.length > 2) { newValue = newValue.slice(0, 2); } if (segment === "hour" || segment === "minute" || segment === "second") { const numValue = Number.parseInt(newValue, 10); if (!Number.isNaN(numValue) && newValue.length > 0) { if (pendingDigit !== null && newValue.length === 1) { const twoDigitValue = pendingDigit + newValue; const combinedNum = Number.parseInt(twoDigitValue, 10); if (!Number.isNaN(combinedNum)) { const paddedValue = combinedNum.toString().padStart(2, "0"); setEditValue(paddedValue); updateTimeValue(paddedValue, true); setPendingDigit(null); queueMicrotask(() => { if (segment) { const nextInputRef = inputGroupContext.getNextInput(segment); if (nextInputRef?.current) { nextInputRef.current.focus(); nextInputRef.current.select(); } } }); return; } } const maxFirstDigit = segment === "hour" ? (is12Hour ? 1 : 2) : 5; const firstDigit = Number.parseInt(newValue[0] ?? "0", 10); const shouldAutoAdvance = firstDigit > maxFirstDigit; if (newValue.length === 1) { if (shouldAutoAdvance) { const paddedValue = numValue.toString().padStart(2, "0"); setEditValue(paddedValue); updateTimeValue(paddedValue, true); setPendingDigit(null); queueMicrotask(() => { if (segment) { const nextInputRef = inputGroupContext.getNextInput(segment); if (nextInputRef?.current) { nextInputRef.current.focus(); nextInputRef.current.select(); } } }); } else { const paddedValue = numValue.toString().padStart(2, "0"); setEditValue(paddedValue); setPendingDigit(newValue); queueMicrotask(() => { inputRef.current?.select(); }); } } else if (newValue.length === 2) { const paddedValue = numValue.toString().padStart(2, "0"); setEditValue(paddedValue); updateTimeValue(paddedValue, true); setPendingDigit(null); queueMicrotask(() => { if (segment) { const nextInputRef = inputGroupContext.getNextInput(segment); if (nextInputRef?.current) { nextInputRef.current.focus(); nextInputRef.current.select(); } } }); } } else if (newValue.length === 0) { setEditValue(""); setPendingDigit(null); } } }, [ segment, updateTimeValue, onChangeProp, editValue, is12Hour, inputGroupContext, pendingDigit, segmentPlaceholder, ], ); const onClick = React.useCallback( (event: React.MouseEvent) => { onClickProp?.(event); if (event.defaultPrevented) return; event.currentTarget.select(); }, [onClickProp], ); const onFocus = React.useCallback( (event: React.FocusEvent) => { onFocusProp?.(event); if (event.defaultPrevented) return; setIsEditing(true); setPendingDigit(null); if (openOnFocus && !store.getState().open) { store.setState("openedViaFocus", true); store.setState("open", true); } queueMicrotask(() => event.target.select()); }, [onFocusProp, openOnFocus, store], ); const onKeyDown = React.useCallback( (event: React.KeyboardEvent) => { onKeyDownProp?.(event); if (event.defaultPrevented) return; if (event.key === "ArrowLeft" || event.key === "ArrowRight") { event.preventDefault(); const goToPrevious = event.key === "ArrowLeft"; const inputGroup = inputRef.current?.closest( '[data-slot="time-picker-input-group"]', ); if (inputGroup && inputRef.current) { const allInputs = Array.from( inputGroup.querySelectorAll('input[type="text"]'), ) as HTMLInputElement[]; const currentIdx = allInputs.indexOf(inputRef.current); if (currentIdx !== -1) { const targetIdx = goToPrevious ? Math.max(0, currentIdx - 1) : Math.min(allInputs.length - 1, currentIdx + 1); const targetInput = allInputs[targetIdx]; if (targetInput && targetInput !== inputRef.current) { targetInput.focus(); targetInput.select(); } } } return; } if (event.key === "Backspace" || event.key === "Delete") { const input = inputRef.current; if ( input && input.selectionStart === 0 && input.selectionEnd === input.value.length ) { event.preventDefault(); const placeholder = segment ? segmentPlaceholder[segment] : DEFAULT_SEGMENT_PLACEHOLDER; setEditValue(placeholder); setPendingDigit(null); if (timeValue) { const newTime = { ...timeValue }; switch (segment) { case "hour": delete newTime.hour; break; case "minute": delete newTime.minute; break; case "second": delete newTime.second; break; case "period": delete newTime.period; break; } if ( newTime.hour !== undefined || newTime.minute !== undefined || newTime.second !== undefined || newTime.period !== undefined ) { const newValue = formatTimeValue(newTime, showSeconds); store.setState("value", newValue); } else { store.setState("value", ""); } } else { store.setState("value", ""); } queueMicrotask(() => { inputRef.current?.select(); }); return; } } if (segment === "period") { const key = event.key.toLowerCase(); if (key === "a" || key === "p" || key === "1" || key === "2") { event.preventDefault(); let newPeriod: Period; if (key === "a" || key === "1") { newPeriod = "AM"; } else { newPeriod = "PM"; } setEditValue(newPeriod); updateTimeValue(newPeriod, true); queueMicrotask(() => { inputRef.current?.select(); }); } else if (event.key === "ArrowUp" || event.key === "ArrowDown") { event.preventDefault(); const placeholder = segmentPlaceholder.period; const currentPeriod = editValue === placeholder || editValue === "" ? "AM" : editValue; const newPeriod = currentPeriod === "AM" || currentPeriod === "A" ? "PM" : "AM"; setEditValue(newPeriod); updateTimeValue(newPeriod, true); queueMicrotask(() => { inputRef.current?.select(); }); } return; } if (event.key === "Tab") { const placeholder = segment ? segmentPlaceholder[segment] : DEFAULT_SEGMENT_PLACEHOLDER; if (editValue && editValue.length > 0 && editValue !== placeholder) { if (editValue.length === 2) { updateTimeValue(editValue, true); } else if (editValue.length === 1) { const numValue = Number.parseInt(editValue, 10); if (!Number.isNaN(numValue)) { const paddedValue = numValue.toString().padStart(2, "0"); updateTimeValue(paddedValue, true); } } } return; } if (event.key === "Enter") { event.preventDefault(); const placeholder = segment ? segmentPlaceholder[segment] : DEFAULT_SEGMENT_PLACEHOLDER; if (editValue && editValue.length > 0 && editValue !== placeholder) { if (editValue.length === 2) { updateTimeValue(editValue, true); } else if (editValue.length === 1) { const numValue = Number.parseInt(editValue, 10); if (!Number.isNaN(numValue)) { const paddedValue = numValue.toString().padStart(2, "0"); updateTimeValue(paddedValue, true); } } } queueMicrotask(() => { inputRef.current?.select(); }); } if (event.key === "Escape") { event.preventDefault(); setEditValue(getSegmentValue()); inputRef.current?.blur(); } if (event.key === "ArrowUp") { event.preventDefault(); const placeholder = segment ? segmentPlaceholder[segment] : DEFAULT_SEGMENT_PLACEHOLDER; if (editValue === placeholder || editValue === "") { const defaultValue = segment === "hour" ? (is12Hour ? 12 : 0) : 0; const formattedValue = defaultValue.toString().padStart(2, "0"); setEditValue(formattedValue); updateTimeValue(formattedValue, true); queueMicrotask(() => { inputRef.current?.select(); }); return; } const currentValue = Number.parseInt(editValue, 10); if (!Number.isNaN(currentValue)) { let newValue: number; switch (segment) { case "hour": if (is12Hour) { newValue = currentValue === 12 ? 1 : currentValue + 1; } else { newValue = currentValue === 23 ? 0 : currentValue + 1; } break; case "minute": case "second": newValue = currentValue === 59 ? 0 : currentValue + 1; break; default: return; } const formattedValue = newValue.toString().padStart(2, "0"); setEditValue(formattedValue); updateTimeValue(formattedValue, true); queueMicrotask(() => { inputRef.current?.select(); }); } } if (event.key === "ArrowDown") { event.preventDefault(); const placeholder = segment ? segmentPlaceholder[segment] : DEFAULT_SEGMENT_PLACEHOLDER; if (editValue === placeholder || editValue === "") { const defaultValue = segment === "hour" ? (is12Hour ? 12 : 23) : 59; const formattedValue = defaultValue.toString().padStart(2, "0"); setEditValue(formattedValue); updateTimeValue(formattedValue, true); queueMicrotask(() => { inputRef.current?.select(); }); return; } const currentValue = Number.parseInt(editValue, 10); if (!Number.isNaN(currentValue)) { let newValue: number; switch (segment) { case "hour": if (is12Hour) { newValue = currentValue === 1 ? 12 : currentValue - 1; } else { newValue = currentValue === 0 ? 23 : currentValue - 1; } break; case "minute": case "second": newValue = currentValue === 0 ? 59 : currentValue - 1; break; default: return; } const formattedValue = newValue.toString().padStart(2, "0"); setEditValue(formattedValue); updateTimeValue(formattedValue, true); queueMicrotask(() => { inputRef.current?.select(); }); } } }, [ onKeyDownProp, editValue, segment, is12Hour, getSegmentValue, updateTimeValue, showSeconds, timeValue, store, segmentPlaceholder, ], ); const displayValue = isEditing ? editValue : getSegmentValue(); const segmentWidth = segment ? `var(--time-picker-${segment}-input-width)` : "2ch"; return ( ); } function TimePickerTrigger(props: ButtonProps) { const { className, children, disabled: disabledProp, ref, ...triggerProps } = props; const { triggerId, disabled, triggerRef } = useTimePickerContext(TRIGGER_NAME); const isDisabled = disabledProp || disabled; const composedRef = useComposedRefs(ref, triggerRef); return ( svg:not([class*='size-'])]:size-4", className, )} > {children ?? } ); } interface TimePickerGroupContextValue { getColumns: () => ColumnData[]; onColumnRegister: (column: ColumnData) => void; onColumnUnregister: (id: string) => void; } const TimePickerGroupContext = React.createContext(null); function useTimePickerGroupContext(consumerName: string) { const context = React.useContext(TimePickerGroupContext); if (!context) { throw new Error(`\`${consumerName}\` must be used within \`${ROOT_NAME}\``); } return context; } interface TimePickerContentProps extends DivProps, React.ComponentProps {} function TimePickerContent(props: TimePickerContentProps) { const { side = "bottom", align = "start", sideOffset = 6, className, onOpenAutoFocus: onOpenAutoFocusProp, onInteractOutside: onInteractOutsideProp, ...contentProps } = props; const store = useStoreContext(CONTENT_NAME); const { openOnFocus, inputGroupRef } = useTimePickerContext(CONTENT_NAME); const columnsRef = React.useRef>>( new Map(), ); const onColumnRegister = React.useCallback((column: ColumnData) => { columnsRef.current.set(column.id, column); }, []); const onColumnUnregister = React.useCallback((id: string) => { columnsRef.current.delete(id); }, []); const getColumns = React.useCallback(() => { const columns = Array.from(columnsRef.current.entries()) .map(([id, { ref, getSelectedItemRef, getItems }]) => ({ id, ref, getSelectedItemRef, getItems, })) .filter((c) => c.ref.current !== null); return sortNodes(columns); }, []); const groupContextValue = React.useMemo( () => ({ getColumns, onColumnRegister, onColumnUnregister, }), [getColumns, onColumnRegister, onColumnUnregister], ); const onOpenAutoFocus: NonNullable = React.useCallback( (event) => { onOpenAutoFocusProp?.(event); if (event.defaultPrevented) return; event.preventDefault(); const { openedViaFocus } = store.getState(); if (openedViaFocus) { store.setState("openedViaFocus", false); return; } const columns = getColumns(); const firstColumn = columns[0]; if (!firstColumn) return; const items = firstColumn.getItems(); const selectedItem = items.find((item) => item.selected); const candidateRefs = selectedItem ? [selectedItem.ref, ...items.map((item) => item.ref)] : items.map((item) => item.ref); focusFirst(candidateRefs, false); }, [onOpenAutoFocusProp, getColumns, store], ); const onInteractOutside: NonNullable< PopoverContentProps["onInteractOutside"] > = React.useCallback( (event) => { onInteractOutsideProp?.(event); if (event.defaultPrevented) return; if (openOnFocus && inputGroupRef.current) { const target = event.target; if (!(target instanceof Node)) return; const isInsideInputGroup = inputGroupRef.current.contains(target); if (isInsideInputGroup) { event.preventDefault(); } } }, [onInteractOutsideProp, openOnFocus, inputGroupRef], ); return ( ); } interface TimePickerColumnContextValue { getItems: () => ItemData[]; onItemRegister: ( value: number | string, ref: React.RefObject, selected: boolean, ) => void; onItemUnregister: (value: number | string) => void; } const TimePickerColumnContext = React.createContext(null); function useTimePickerColumnContext(consumerName: string) { const context = React.useContext(TimePickerColumnContext); if (!context) { throw new Error(`\`${consumerName}\` must be used within a column`); } return context; } interface TimePickerColumnProps extends DivProps {} function TimePickerColumn(props: TimePickerColumnProps) { const { children, className, ref, ...columnProps } = props; const columnId = React.useId(); const columnRef = React.useRef(null); const composedRef = useComposedRefs(ref, columnRef); const itemsRef = React.useRef< Map< number | string, { ref: React.RefObject; selected: boolean; } > >(new Map()); const groupContext = useTimePickerGroupContext(COLUMN_NAME); const onItemRegister = React.useCallback( ( value: number | string, ref: React.RefObject, selected: boolean, ) => { itemsRef.current.set(value, { ref, selected }); }, [], ); const onItemUnregister = React.useCallback((value: number | string) => { itemsRef.current.delete(value); }, []); const getItems = React.useCallback(() => { const items = Array.from(itemsRef.current.entries()) .map(([value, { ref, selected }]) => ({ value, ref, selected, })) .filter((item) => item.ref.current); return sortNodes(items); }, []); const getSelectedItemRef = React.useCallback(() => { const items = getItems(); return items.find((item) => item.selected)?.ref ?? null; }, [getItems]); useIsomorphicLayoutEffect(() => { groupContext.onColumnRegister({ id: columnId, ref: columnRef, getSelectedItemRef, getItems, }); return () => groupContext.onColumnUnregister(columnId); }, [groupContext, columnId, getSelectedItemRef, getItems]); const columnContextValue = React.useMemo( () => ({ getItems, onItemRegister, onItemUnregister, }), [getItems, onItemRegister, onItemUnregister], ); return (

{children}

); } interface TimePickerColumnItemProps extends ButtonProps { value: number | string; selected?: boolean; format?: SegmentFormat; } function TimePickerColumnItem(props: TimePickerColumnItemProps) { const { value, selected = false, format = "numeric", className, ref, ...itemProps } = props; const itemRef = React.useRef(null); const composedRef = useComposedRefs(ref, itemRef); const columnContext = useTimePickerColumnContext(COLUMN_ITEM_NAME); const groupContext = useTimePickerGroupContext(COLUMN_ITEM_NAME); useIsomorphicLayoutEffect(() => { columnContext.onItemRegister(value, itemRef, selected); return () => columnContext.onItemUnregister(value); }, [columnContext, value, selected]); useIsomorphicLayoutEffect(() => { if (selected && itemRef.current) { itemRef.current.scrollIntoView({ block: "nearest" }); } }, [selected]); const onClick = React.useCallback( (event: React.MouseEvent) => { itemProps.onClick?.(event); if (event.defaultPrevented) return; itemRef.current?.focus(); }, [itemProps.onClick], ); const onKeyDown = React.useCallback( (event: React.KeyboardEvent) => { itemProps.onKeyDown?.(event); if (event.defaultPrevented) return; if (event.key === "ArrowUp" || event.key === "ArrowDown") { event.preventDefault(); const items = columnContext.getItems().sort((a, b) => { if (typeof a.value === "number" && typeof b.value === "number") { return a.value - b.value; } return 0; }); const currentIndex = items.findIndex((item) => item.value === value); let nextIndex: number; if (event.key === "ArrowUp") { nextIndex = currentIndex > 0 ? currentIndex - 1 : items.length - 1; } else { nextIndex = currentIndex < items.length - 1 ? currentIndex + 1 : 0; } const nextItem = items[nextIndex]; nextItem?.ref.current?.focus(); nextItem?.ref.current?.click(); } else if ( (event.key === "Tab" || event.key === "ArrowLeft" || event.key === "ArrowRight") && groupContext ) { event.preventDefault(); queueMicrotask(() => { const columns = groupContext.getColumns(); if (columns.length === 0) return; const currentColumnIndex = columns.findIndex( (c) => c.ref.current?.contains(itemRef.current) ?? false, ); if (currentColumnIndex === -1) return; const goToPrevious = event.key === "ArrowLeft" || (event.key === "Tab" && event.shiftKey); const nextColumnIndex = goToPrevious ? currentColumnIndex > 0 ? currentColumnIndex - 1 : columns.length - 1 : currentColumnIndex < columns.length - 1 ? currentColumnIndex + 1 : 0; const nextColumn = columns[nextColumnIndex]; if (nextColumn?.ref.current) { const items = nextColumn.getItems(); const selectedItem = items.find((item) => item.selected); const candidateRefs = selectedItem ? [selectedItem.ref, ...items.map((item) => item.ref)] : items.map((item) => item.ref); focusFirst(candidateRefs, false); } }); } }, [itemProps.onKeyDown, columnContext, groupContext, value], ); const formattedValue = typeof value === "number" && format === "2-digit" ? value.toString().padStart(2, "0") : value.toString(); return ( ); } interface TimePickerHourProps extends DivProps { format?: SegmentFormat; } function TimePickerHour(props: TimePickerHourProps) { const { asChild, format = "numeric", className, ...hourProps } = props; const { is12Hour, hourStep, showSeconds } = useTimePickerContext(HOUR_NAME); const store = useStoreContext(HOUR_NAME); const value = useStore((state) => state.value); const timeValue = parseTimeString(value); const hours = Array.from( { length: is12Hour ? Math.ceil(12 / hourStep) : Math.ceil(24 / hourStep), }, (_, i) => { if (is12Hour) { const hour = (i * hourStep) % 12; return hour === 0 ? 12 : hour; } return i * hourStep; }, ); const onHourSelect = React.useCallback( (displayHour: number) => { const now = new Date(); const currentTime = timeValue ?? {}; let hour24 = displayHour; if (is12Hour) { let currentPeriod: Period; if (timeValue?.period !== undefined) { currentPeriod = timeValue.period; } else if (timeValue?.hour !== undefined) { currentPeriod = to12Hour(timeValue.hour).period; } else { currentPeriod = to12Hour(now.getHours()).period; } hour24 = to24Hour(displayHour, currentPeriod); } const newTime = { ...currentTime, hour: hour24 }; if (timeValue && timeValue.period !== undefined) { newTime.period = timeValue.period; } if (newTime.minute === undefined) { newTime.minute = now.getMinutes(); } if (showSeconds && newTime.second === undefined) { newTime.second = now.getSeconds(); } const newValue = formatTimeValue(newTime, showSeconds); store.setState("value", newValue); }, [timeValue, showSeconds, is12Hour, store], ); const now = new Date(); const referenceHour = timeValue?.hour ?? now.getHours(); const displayHour = is12Hour ? to12Hour(referenceHour).hour : referenceHour; const HourPrimitive = asChild ? SlotPrimitive.Slot : TimePickerColumn; return ( {hours.map((hour) => ( onHourSelect(hour)} /> ))} ); } interface TimePickerMinuteProps extends DivProps { format?: SegmentFormat; } function TimePickerMinute(props: TimePickerMinuteProps) { const { asChild, format = "2-digit", className, ...minuteProps } = props; const { minuteStep, showSeconds } = useTimePickerContext(MINUTE_NAME); const store = useStoreContext(MINUTE_NAME); const value = useStore((state) => state.value); const timeValue = parseTimeString(value); const minutes = Array.from( { length: Math.ceil(60 / minuteStep) }, (_, i) => i * minuteStep, ); const onMinuteSelect = React.useCallback( (minute: number) => { const now = new Date(); const currentTime = timeValue ?? {}; const newTime = { ...currentTime, minute }; if (newTime.hour === undefined) { newTime.hour = now.getHours(); } if (showSeconds && newTime.second === undefined) { newTime.second = now.getSeconds(); } const newValue = formatTimeValue(newTime, showSeconds); store.setState("value", newValue); }, [timeValue, showSeconds, store], ); const MinutePrimitive = asChild ? SlotPrimitive.Slot : TimePickerColumn; const now = new Date(); const referenceMinute = timeValue?.minute ?? now.getMinutes(); return ( {minutes.map((minute) => ( onMinuteSelect(minute)} /> ))} ); } interface TimePickerSecondProps extends DivProps { format?: SegmentFormat; } function TimePickerSecond(props: TimePickerSecondProps) { const { asChild, format = "2-digit", className, ...secondProps } = props; const { secondStep } = useTimePickerContext(SECOND_NAME); const store = useStoreContext(SECOND_NAME); const value = useStore((state) => state.value); const timeValue = parseTimeString(value); const seconds = Array.from( { length: Math.ceil(60 / secondStep) }, (_, i) => i * secondStep, ); const onSecondSelect = React.useCallback( (second: number) => { const now = new Date(); const currentTime = timeValue ?? {}; const newTime = { ...currentTime, second }; if (newTime.hour === undefined) { newTime.hour = now.getHours(); } if (newTime.minute === undefined) { newTime.minute = now.getMinutes(); } const newValue = formatTimeValue(newTime, true); store.setState("value", newValue); }, [timeValue, store], ); const SecondPrimitive = asChild ? SlotPrimitive.Slot : TimePickerColumn; const now = new Date(); const referenceSecond = timeValue?.second ?? now.getSeconds(); return ( {seconds.map((second) => ( onSecondSelect(second)} /> ))} ); } function TimePickerPeriod(props: DivProps) { const { asChild, className, ...periodProps } = props; const { is12Hour, showSeconds } = useTimePickerContext(PERIOD_NAME); const store = useStoreContext(PERIOD_NAME); const value = useStore((state) => state.value); const timeValue = parseTimeString(value); const onPeriodToggle = React.useCallback( (period: Period) => { const now = new Date(); const currentTime = timeValue ?? {}; const currentHour = currentTime.hour !== undefined ? currentTime.hour : now.getHours(); const currentDisplay = to12Hour(currentHour); const new24Hour = to24Hour(currentDisplay.hour, period); const newTime = { ...currentTime, hour: new24Hour }; if (newTime.minute === undefined) { newTime.minute = now.getMinutes(); } if (showSeconds && newTime.second === undefined) { newTime.second = now.getSeconds(); } const newValue = formatTimeValue(newTime, showSeconds); store.setState("value", newValue); }, [timeValue, showSeconds, store], ); if (!is12Hour) return null; const now = new Date(); const referenceHour = timeValue?.hour ?? now.getHours(); const currentPeriod = to12Hour(referenceHour).period; const PeriodPrimitive = asChild ? SlotPrimitive.Slot : TimePickerColumn; return ( {PERIODS.map((period) => ( onPeriodToggle(period)} /> ))} ); } interface TimePickerSeparatorProps extends React.ComponentProps<"span"> { asChild?: boolean; } function TimePickerSeparator(props: TimePickerSeparatorProps) { const { asChild, children, ...separatorProps } = props; const SeparatorPrimitive = asChild ? SlotPrimitive.Slot : "span"; return ( ); } function TimePickerClear(props: ButtonProps) { const { asChild, className, children, disabled: disabledProp, ...clearProps } = props; const { disabled, readOnly } = useTimePickerContext(CLEAR_NAME); const store = useStoreContext(CLEAR_NAME); const isDisabled = disabledProp || disabled; const onClick = React.useCallback( (event: React.MouseEvent) => { clearProps.onClick?.(event); if (event.defaultPrevented) return; event.preventDefault(); if (disabled || readOnly) return; store.setState("value", ""); }, [clearProps.onClick, disabled, readOnly, store], ); const ClearPrimitive = asChild ? SlotPrimitive.Slot : "button"; return ( {children ?? "Clear"} ); } export { TimePicker, TimePickerClear, TimePickerContent, TimePickerHour, TimePickerInput, TimePickerInputGroup, TimePickerLabel, TimePickerMinute, TimePickerPeriod, type TimePickerProps, TimePickerSecond, TimePickerSeparator, TimePickerTrigger, useStore as useTimePicker, };

Time Picker

Instalação

Dependências

Registry dependencies