pixelize-design-library 3.0.1-beta.1 → 3.1.0

package/dist/esm/Components/DatePicker/SingleDatePicker.js

@@ -0,0 +1,982 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useState, useRef, useEffect, useLayoutEffect, useMemo, useCallback } from "react";
+import { Box, Popover, PopoverAnchor, PopoverContent, PopoverBody, useDisclosure, Input, InputGroup, InputRightElement, IconButton, FormControl, useMergeRefs, } from "@chakra-ui/react";
+import { format, parse, isValid, isSameDay, isBefore, isAfter, addDays, } from "date-fns";
+import { CalendarIcon } from "lucide-react";
+import Button from "../Button/Button.js";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { raisedRule } from "../../Theme/tokens/builders/surfaceRaised.js";
+import { DEFAULT_CONTROL_SIZE } from "../../Theme/tokens/primitives/controlSizes.js";
+import { getTextInputIconSizePx, getTextInputIconWrapperSx, } from "../Input/textInputIconSize.js";
+import { isStringValueProps, } from "./DatePickerProps.js";
+import { parseIsoValue, formatIsoValue } from "./valueFormat.js";
+import { TextLabel } from "../Common/FormLabel.js";
+import FieldMessage from "../Common/FieldMessage.js";
+import { useFieldIds } from "../Common/useFieldIds.js";
+import { formatHasTime, inferPickerTypeFromFormat, resolvePickerAliases } from "./pickerField.js";
+import TimePicker from "./TimePicker.js";
+import { TimePickerInput } from "./TimePickerInput.js";
+import CalendarPanel from "./CalendarPanel.js";
+import PickerPortal, { usePickerPortal } from "./PickerPortal.js";
+import { useExclusiveOverlay } from "../../Hooks/useExclusiveOverlay.js";
+import { useOutsideMouseDown } from "../../Hooks/useOutsideMouseDown.js";
+const TOKEN_CHARS = /[dMyHhmsaAm]/;
+const getPlaceholderForToken = (token, length) => {
+    const lower = token.toLowerCase();
+    switch (lower) {
+        case "d":
+            return token.toLowerCase() === token ? "d".repeat(Math.min(Math.max(length, 2), 4)) : "D".repeat(Math.min(Math.max(length, 2), 4));
+        case "m":
+            if (token === "M") {
+                return "M".repeat(Math.max(length, 2));
+            }
+            return "m".repeat(Math.max(length, 2));
+        case "y":
+            return token === token.toUpperCase() ? "Y".repeat(length >= 4 ? 4 : 2) : "y".repeat(length >= 4 ? 4 : 2);
+        case "h":
+            return token === token.toUpperCase() ? "H".repeat(Math.max(length, 2)) : "h".repeat(Math.max(length, 2));
+        case "s":
+            return token === token.toUpperCase() ? "S".repeat(Math.max(length, 2)) : "s".repeat(Math.max(length, 2));
+        case "a":
+            return token.repeat(Math.max(length, 2));
+        default:
+            return token.repeat(length);
+    }
+};
+const buildFormatSegments = (format) => {
+    const segments = [];
+    let cursor = 0;
+    let i = 0;
+    while (i < format.length) {
+        const char = format[i];
+        if (TOKEN_CHARS.test(char)) {
+            let j = i + 1;
+            while (j < format.length && format[j] === char) {
+                j++;
+            }
+            const length = j - i;
+            const placeholder = getPlaceholderForToken(char, length);
+            const segment = {
+                type: "token",
+                token: char,
+                length,
+                placeholder,
+                placeholderChar: placeholder.charAt(0) || char,
+                start: cursor,
+                end: cursor + placeholder.length,
+            };
+            segments.push(segment);
+            cursor += placeholder.length;
+            i = j;
+        }
+        else {
+            const literalSegment = {
+                type: "literal",
+                length: 1,
+                placeholder: char,
+                placeholderChar: char,
+                literal: char,
+                start: cursor,
+                end: cursor + 1,
+            };
+            segments.push(literalSegment);
+            cursor += 1;
+            i += 1;
+        }
+    }
+    return segments;
+};
+const buildTimeSegments = (format) => {
+    var _a;
+    const m = format.match(/^(h{1,2}|H{1,2}):m{1,2}(?:\s*a{1,2})?$/i);
+    if (!m)
+        return null;
+    const segments = [];
+    let cursor = 0;
+    const hourToken = m[1];
+    const hourPlaceholder = getPlaceholderForToken(hourToken[0], hourToken.length);
+    segments.push({ type: "token", token: hourToken[0], length: hourToken.length, placeholder: hourPlaceholder, placeholderChar: hourPlaceholder.charAt(0), start: cursor, end: cursor + hourPlaceholder.length });
+    cursor += hourPlaceholder.length;
+    segments.push({ type: "literal", length: 1, placeholder: ":", placeholderChar: ":", literal: ":", start: cursor, end: cursor + 1 });
+    cursor += 1;
+    const minuteLength = (((_a = format.match(/:m{1,2}/)) === null || _a === void 0 ? void 0 : _a[0].length) || 2) - 1;
+    const minutePlaceholder = getPlaceholderForToken("m", minuteLength);
+    segments.push({ type: "token", token: "m", length: minuteLength, placeholder: minutePlaceholder, placeholderChar: minutePlaceholder.charAt(0), start: cursor, end: cursor + minutePlaceholder.length });
+    cursor += minutePlaceholder.length;
+    const ampmMatch = format.match(/\s*a{1,2}$/);
+    if (ampmMatch) {
+        segments.push({ type: "literal", length: 1, placeholder: " ", placeholderChar: " ", literal: " ", start: cursor, end: cursor + 1 });
+        cursor += 1;
+        const aLen = ampmMatch[0].trim().length;
+        const aPlaceholder = getPlaceholderForToken("a", aLen);
+        segments.push({ type: "token", token: "a", length: aLen, placeholder: aPlaceholder, placeholderChar: aPlaceholder.charAt(0), start: cursor, end: cursor + aPlaceholder.length });
+    }
+    return segments;
+};
+const formatToPlaceholder = (format) => format;
+const filterNumericInput = (value, format) => {
+    const separators = format.match(/[^dDmMyYhHsSaA]/g) || [];
+    const uniqueSeparators = Array.from(new Set(separators));
+    return value
+        .split("")
+        .filter((char) => {
+        if (/[0-9]/.test(char))
+            return true;
+        if (uniqueSeparators.includes(char))
+            return true;
+        if (char === " ")
+            return true;
+        return false;
+    })
+        .join("");
+};
+const getFormatForPickerType = (pickerType, dateFormat) => {
+    if (!pickerType) {
+        return dateFormat;
+    }
+    if (pickerType === "date") {
+        const hasTime = /[hHmsSaA]/.test(dateFormat);
+        if (hasTime) {
+            const dateMatch = dateFormat.match(/^([^hHmsSaA]+?)(?:\s*[hHmsSaA])/);
+            if (dateMatch && dateMatch[1]) {
+                return dateMatch[1].trim();
+            }
+        }
+        return dateFormat;
+    }
+    if (pickerType === "time") {
+        const hasDate = /[dDmMyY]/.test(dateFormat);
+        if (hasDate) {
+            // eslint-disable-next-line no-useless-escape
+            const timeMatch = dateFormat.match(/[dDmMyY\/\-\s\.]+\s*([hHmsSaA\/\-\s:]+)$/);
+            if (timeMatch && timeMatch[1]) {
+                return timeMatch[1].trim();
+            }
+        }
+        return dateFormat;
+    }
+    return dateFormat;
+};
+const normalizeTimeBuffer = (tokenChar, rawBuffer, segmentLength, is12Hour) => {
+    if (!tokenChar)
+        return { value: rawBuffer, completed: rawBuffer.length >= segmentLength };
+    const t = tokenChar.toLowerCase();
+    const buf = rawBuffer.replace(/\D/g, "").slice(0, segmentLength);
+    if (segmentLength !== 2) {
+        return { value: buf, completed: buf.length >= segmentLength };
+    }
+    if (t === "h") {
+        // const maxHour = is12Hour ? 12 : 24;
+        if (buf.length === 1) {
+            const d = parseInt(buf[0], 10);
+            const firstMax = is12Hour ? 1 : 2;
+            if (d > firstMax) {
+                return { value: `0${d}`, completed: true };
+            }
+            return { value: buf, completed: false };
+        }
+        if (buf.length === 2) {
+            let h = parseInt(buf, 10);
+            if (is12Hour) {
+                if (h < 1)
+                    h = 1;
+                if (h > 12)
+                    h = 12;
+            }
+            else {
+                if (h < 1)
+                    h = 1;
+                if (h > 24)
+                    h = 24;
+            }
+            const out = h.toString().padStart(2, "0");
+            return { value: out, completed: true };
+        }
+    }
+    if (t === "m") {
+        if (buf.length === 1) {
+            const d = parseInt(buf[0], 10);
+            if (d > 5) {
+                return { value: `0${d}`, completed: true };
+            }
+            if (d === 0) {
+                return { value: "01", completed: true };
+            }
+            return { value: buf, completed: false };
+        }
+        if (buf.length === 2) {
+            let m = parseInt(buf, 10);
+            if (m < 1)
+                m = 1;
+            if (m > 60)
+                m = 60;
+            const out = m.toString().padStart(2, "0");
+            return { value: out, completed: true };
+        }
+    }
+    return { value: buf, completed: buf.length >= segmentLength };
+};
+function SingleDatePickerInner(props, ref) {
+    var _a, _b, _c, _d;
+    const { id, name, label, isRequired, isInformation, informationMessage, error, errorMessage, helperText, dateFormat = "dd/MM/yyyy", pickerType, minDate, maxDate, disableFutureDates, disablePastDates, autoComplete = "off", width = "100%", disableToday = false, size = DEFAULT_CONTROL_SIZE, } = props;
+    const { isDisabled: disabled, placeholder: placeholderText } = resolvePickerAliases(props);
+    const theme = useCustomTheme();
+    const sizeKey = typeof size === "string" ? size : DEFAULT_CONTROL_SIZE;
+    const ids = useFieldIds(id, { error, errorMessage, helperText });
+    const calendarIconPx = getTextInputIconSizePx(sizeKey);
+    const calendarIconWrapperSx = getTextInputIconWrapperSx(sizeKey);
+    const { isOpen, onOpen, onClose } = useDisclosure();
+    const requestExclusiveOpen = useExclusiveOverlay(isOpen, onClose);
+    const pickerPortal = usePickerPortal(isOpen);
+    const calendarLabel = label !== null && label !== void 0 ? label : "Choose date";
+    const inputRef = useRef(null);
+    const mergedInputRef = useMergeRefs(inputRef, ref);
+    const popoverRef = useRef(null);
+    const triggerRef = useRef(null);
+    const resolvedPickerType = pickerType !== null && pickerType !== void 0 ? pickerType : inferPickerTypeFromFormat(dateFormat);
+    const resolvedDateFormat = getFormatForPickerType(pickerType, dateFormat);
+    const enableMask = resolvedPickerType !== "time";
+    const basePlaceholder = useMemo(() => formatToPlaceholder(dateFormat), [dateFormat]);
+    const timeEffectiveFormat = useMemo(() => {
+        if ((pickerType !== null && pickerType !== void 0 ? pickerType : resolvedPickerType) === "time") {
+            const hasLowerH = /h{1,2}/.test(resolvedDateFormat);
+            const hasAmPm = /(^|[^a-zA-Z])a([^a-zA-Z]|$)/i.test(resolvedDateFormat);
+            if (hasLowerH && !hasAmPm)
+                return `${resolvedDateFormat} a`;
+        }
+        return resolvedDateFormat;
+    }, [pickerType, resolvedPickerType, resolvedDateFormat]);
+    const activeFormat = timeEffectiveFormat;
+    const formatSegments = useMemo(() => {
+        if (!enableMask)
+            return [];
+        const expectHourFirst = /^(h{1,2}|H{1,2}):m{1,2}(?:\s*a{1,2})?$/i.test(activeFormat);
+        if (expectHourFirst) {
+            const ts = buildTimeSegments(activeFormat);
+            if (ts)
+                return ts;
+        }
+        return buildFormatSegments(activeFormat);
+    }, [enableMask, activeFormat]);
+    const tokenSegments = useMemo(() => (enableMask ? formatSegments.filter((segment) => segment.type === "token") : []), [enableMask, formatSegments]);
+    const maskPlaceholder = useMemo(() => {
+        if (!enableMask) {
+            return basePlaceholder;
+        }
+        const built = formatSegments.map((segment) => segment.placeholder).join("");
+        if (built.length < basePlaceholder.length - 1)
+            return basePlaceholder;
+        if (/H|h/.test(activeFormat) && !/(H|h)/.test(built))
+            return basePlaceholder;
+        if (/:/.test(activeFormat) && !/:/.test(built))
+            return basePlaceholder;
+        return built;
+    }, [basePlaceholder, enableMask, formatSegments, activeFormat]);
+    const displayPlaceholder = placeholderText || (enableMask ? maskPlaceholder : basePlaceholder);
+    const didCommitRef = useRef(false);
+    const suppressOnCloseFinalizeRef = useRef(false);
+    const pendingSegmentNavigationRef = useRef(null);
+    const restoreSelectionRef = useRef(null);
+    const segmentInputBufferRef = useRef("");
+    const maskInsertedRef = useRef(false);
+    const today = new Date();
+    const tomorrow = addDays(today, 1);
+    const showDate = resolvedPickerType === "date" || resolvedPickerType === "datetime";
+    const showTime = resolvedPickerType === "time" || resolvedPickerType === "datetime";
+    const resolvedFormatHasTime = formatHasTime(resolvedDateFormat);
+    const rawIsoValue = isStringValueProps(props) ? (_b = (_a = props.value) !== null && _a !== void 0 ? _a : props.selectedDate) !== null && _b !== void 0 ? _b : null : null;
+    // Memoized: parseIsoValue would otherwise return a new Date identity every render, looping the effect below.
+    const parsedIsoValue = useMemo(() => (rawIsoValue ? parseIsoValue(rawIsoValue, resolvedPickerType) : null), [rawIsoValue, resolvedPickerType]);
+    const selectedDate = isStringValueProps(props)
+        ? parsedIsoValue
+        : (_d = (_c = props.value) !== null && _c !== void 0 ? _c : props.selectedDate) !== null && _d !== void 0 ? _d : null;
+    const [currentMonth, setCurrentMonth] = useState(selectedDate
+        ? disableToday && isSameDay(selectedDate, today)
+            ? tomorrow
+            : selectedDate
+        : disableToday
+            ? tomorrow
+            : today);
+    const [tempDate, setTempDate] = useState(selectedDate !== null && selectedDate !== void 0 ? selectedDate : null);
+    const [inputValue, setInputValue] = useState("");
+    const [isTyping, setIsTyping] = useState(false);
+    const [isMaskActive, setIsMaskActive] = useState(false);
+    const [, setCurrentSegmentIndex] = useState(0);
+    const lastSegmentIndexRef = useRef(0);
+    const resetCommitGuardAndOpen = () => {
+        didCommitRef.current = false;
+        suppressOnCloseFinalizeRef.current = false;
+        onOpen();
+    };
+    const commitOnce = (value) => {
+        if (didCommitRef.current)
+            return;
+        didCommitRef.current = true;
+        if (isStringValueProps(props)) {
+            props.onChange(value ? formatIsoValue(value, resolvedPickerType) : null);
+        }
+        else {
+            props.onChange(value);
+        }
+    };
+    const finalize = (overrideValue) => {
+        if (enableMask) {
+            maskInsertedRef.current = false;
+            segmentInputBufferRef.current = "";
+            setIsMaskActive(false);
+        }
+        const value = overrideValue !== undefined ? overrideValue : tempDate;
+        if (value) {
+            setInputValue(format(value, activeFormat));
+        }
+        else {
+            setInputValue("");
+        }
+        commitOnce(value !== null && value !== void 0 ? value : null);
+        setIsTyping(false);
+    };
+    const requestClose = (overrideValue) => {
+        suppressOnCloseFinalizeRef.current = true;
+        finalize(overrideValue);
+        onClose();
+    };
+    useEffect(() => {
+        if (selectedDate instanceof Date) {
+            setTempDate(new Date(selectedDate));
+            setInputValue(format(selectedDate, activeFormat));
+        }
+        else {
+            setTempDate(null);
+            setInputValue("");
+        }
+    }, [selectedDate, activeFormat]);
+    useEffect(() => {
+        if (!enableMask || !isMaskActive) {
+            restoreSelectionRef.current = null;
+            return;
+        }
+        if (restoreSelectionRef.current && inputRef.current) {
+            const { start, end } = restoreSelectionRef.current;
+            const inputEl = inputRef.current;
+            if (document.activeElement === inputEl) {
+                try {
+                    inputEl.setSelectionRange(start, end);
+                }
+                catch (error) {
+                    console.error("Error setting selection range:", error);
+                }
+            }
+            const restore = () => {
+                if (inputRef.current && document.activeElement === inputRef.current) {
+                    try {
+                        inputRef.current.setSelectionRange(start, end);
+                    }
+                    catch (error) {
+                        console.error("Error setting selection range:", error);
+                    }
+                }
+            };
+            Promise.resolve().then(restore);
+            requestAnimationFrame(restore);
+            requestAnimationFrame(() => requestAnimationFrame(restore));
+        }
+    });
+    useLayoutEffect(() => {
+        if (!enableMask || !isMaskActive || !inputRef.current)
+            return;
+        if (pendingSegmentNavigationRef.current !== null) {
+            const targetIdx = pendingSegmentNavigationRef.current;
+            pendingSegmentNavigationRef.current = null;
+            if (targetIdx >= 0 && targetIdx < tokenSegments.length) {
+                const segment = tokenSegments[targetIdx];
+                restoreSelectionRef.current = { start: segment.start, end: segment.end };
+                setCurrentSegmentIndex(targetIdx);
+                lastSegmentIndexRef.current = targetIdx;
+                segmentInputBufferRef.current = "";
+                inputRef.current.focus();
+                inputRef.current.setSelectionRange(segment.start, segment.end);
+            }
+        }
+    }, [inputValue, tokenSegments, enableMask, isMaskActive]);
+    const handleOpen = () => {
+        requestExclusiveOpen();
+        if (!selectedDate && showDate) {
+            setTempDate(disableToday ? tomorrow : new Date());
+        }
+        if (showTime && !tempDate) {
+            setTempDate(disableToday ? tomorrow : new Date());
+        }
+        resetCommitGuardAndOpen();
+    };
+    const handleInputChange = (e) => {
+        if (enableMask && isMaskActive) {
+            return;
+        }
+        let value = e.target.value;
+        value = filterNumericInput(value, resolvedDateFormat);
+        setInputValue(value);
+        setIsTyping(true);
+        if (!value.trim()) {
+            setTempDate(null);
+            setIsTyping(false);
+            requestClose(null);
+            return;
+        }
+        try {
+            const parsed = parse(value, resolvedDateFormat, new Date());
+            if (isValid(parsed)) {
+                let finalDate = parsed;
+                if (showTime && tempDate && !resolvedFormatHasTime) {
+                    finalDate = new Date(parsed.getFullYear(), parsed.getMonth(), parsed.getDate(), tempDate.getHours(), tempDate.getMinutes(), tempDate.getSeconds());
+                }
+                setTempDate(finalDate);
+                setCurrentMonth(finalDate);
+            }
+        }
+        catch (error) {
+            console.error("Error parsing input:", error);
+        }
+    };
+    const handleInputBlur = () => {
+        const value = inputValue;
+        if (enableMask && isMaskActive) {
+            setIsMaskActive(false);
+            segmentInputBufferRef.current = "";
+            // NOTE: isMaskComplete() can't read text month tokens, so only clear when the value truly can't be parsed.
+            const hasParsableDate = parseValidatedValue(value) !== null;
+            if (!value || !value.trim() || (!isMaskComplete(value) && !hasParsableDate)) {
+                setInputValue("");
+                setTempDate(null);
+                setIsTyping(false);
+                maskInsertedRef.current = false;
+                requestClose(null);
+                return;
+            }
+        }
+        setIsTyping(false);
+        if (!value || !value.trim()) {
+            setTempDate(null);
+            requestClose(null);
+            return;
+        }
+        try {
+            const parsed = parse(value, resolvedDateFormat, new Date());
+            if (isValid(parsed)) {
+                const validated = computeFinalDate(parsed);
+                if (validated) {
+                    setTempDate(validated);
+                    setCurrentMonth(validated);
+                    setInputValue(format(validated, resolvedDateFormat));
+                    requestClose(validated);
+                    maskInsertedRef.current = false;
+                    return;
+                }
+            }
+        }
+        catch (error) {
+            console.error("Error parsing input:", error);
+        }
+        if (tempDate) {
+            setInputValue(format(tempDate, resolvedDateFormat));
+        }
+        else {
+            setInputValue("");
+            setTempDate(null);
+            requestClose(null);
+        }
+        maskInsertedRef.current = false;
+    };
+    const handleDaySelect = (day) => {
+        let updated = new Date(day);
+        if (disableToday && isSameDay(updated, today)) {
+            updated = tomorrow;
+        }
+        const updatedDate = tempDate
+            ? new Date(updated.getFullYear(), updated.getMonth(), updated.getDate(), tempDate.getHours(), tempDate.getMinutes(), tempDate.getSeconds())
+            : updated;
+        setTempDate(updatedDate);
+        setInputValue(format(updatedDate, resolvedDateFormat));
+        setIsTyping(false);
+        if (!showTime) {
+            requestClose(updatedDate);
+        }
+    };
+    useOutsideMouseDown([popoverRef, inputRef, triggerRef], () => {
+        finalize();
+        onClose();
+    }, { enabled: isOpen, capture: true, includeClick: true });
+    const ensureMaskValue = useCallback(() => {
+        var _a, _b, _c, _d;
+        if (!enableMask) {
+            return (_b = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : inputValue;
+        }
+        let currentValue = (_d = (_c = inputRef.current) === null || _c === void 0 ? void 0 : _c.value) !== null && _d !== void 0 ? _d : inputValue;
+        if (!currentValue || currentValue.length !== maskPlaceholder.length) {
+            currentValue = maskPlaceholder;
+            setInputValue(currentValue);
+            maskInsertedRef.current = true;
+        }
+        return currentValue;
+    }, [enableMask, inputRef, inputValue, maskPlaceholder]);
+    const selectSegment = useCallback((index) => {
+        if (!enableMask || tokenSegments.length === 0)
+            return;
+        const clamped = Math.max(0, Math.min(tokenSegments.length - 1, index));
+        const segment = tokenSegments[clamped];
+        setCurrentSegmentIndex(clamped);
+        lastSegmentIndexRef.current = clamped;
+        segmentInputBufferRef.current = "";
+        const inputEl = inputRef.current;
+        if (!inputEl)
+            return;
+        let currentValue = inputEl.value;
+        if (!currentValue || currentValue.length === 0) {
+            currentValue = inputValue || maskPlaceholder;
+            if (inputEl.value !== currentValue) {
+                inputEl.value = currentValue;
+                setInputValue(currentValue);
+            }
+            maskInsertedRef.current = !inputValue;
+        }
+        else if (currentValue.length !== maskPlaceholder.length) {
+            const preservedSegments = [];
+            formatSegments.forEach((seg) => {
+                if (seg.start < currentValue.length) {
+                    const segValue = currentValue.slice(seg.start, Math.min(seg.end, currentValue.length));
+                    if (seg.type === "token" && /^\d+$/.test(segValue.replace(/\D/g, ""))) {
+                        preservedSegments.push(segValue.padEnd(seg.placeholder.length, seg.placeholderChar));
+                    }
+                    else if (seg.type === "literal") {
+                        preservedSegments.push(seg.placeholder);
+                    }
+                    else {
+                        preservedSegments.push(seg.placeholder);
+                    }
+                }
+                else {
+                    preservedSegments.push(seg.placeholder);
+                }
+            });
+            currentValue = preservedSegments.join("");
+            inputEl.value = currentValue;
+            setInputValue(currentValue);
+        }
+        inputEl.focus({ preventScroll: true });
+        inputEl.setSelectionRange(segment.start, segment.end);
+        requestAnimationFrame(() => {
+            if (inputRef.current) {
+                inputRef.current.setSelectionRange(segment.start, segment.end);
+            }
+        });
+    }, [enableMask, maskPlaceholder, tokenSegments, formatSegments, inputValue]);
+    const moveToSegment = useCallback((nextIndex) => {
+        if (!enableMask || !tokenSegments.length)
+            return;
+        const clamped = Math.max(0, Math.min(tokenSegments.length - 1, nextIndex));
+        selectSegment(clamped);
+    }, [enableMask, selectSegment, tokenSegments.length]);
+    const getTokenIndexForCaret = (caret, tokens) => {
+        if (tokens.length === 0)
+            return 0;
+        const insideIdx = tokens.findIndex((t) => caret >= t.start && caret <= t.end);
+        if (insideIdx >= 0)
+            return insideIdx;
+        const toRight = tokens.findIndex((t) => caret < t.end);
+        if (toRight >= 0)
+            return toRight;
+        return tokens.length - 1;
+    };
+    const isSegmentComplete = (segment, value) => {
+        var _a;
+        if (segment.type === "literal")
+            return true;
+        const token = (_a = segment.token) === null || _a === void 0 ? void 0 : _a.toLowerCase();
+        if (!token)
+            return true;
+        if (token === "a") {
+            const normalized = value.trim().toLowerCase();
+            if (segment.placeholder.length <= 1) {
+                return normalized === "a" || normalized === "p";
+            }
+            return normalized === "am" || normalized === "pm";
+        }
+        return /^\d+$/.test(value) && value.length === segment.placeholder.length;
+    };
+    const isMaskComplete = (value) => {
+        if (!value || value.length !== maskPlaceholder.length)
+            return false;
+        return tokenSegments.every((segment) => {
+            const segmentValue = value.slice(segment.start, segment.end);
+            return isSegmentComplete(segment, segmentValue);
+        });
+    };
+    const computeFinalDate = (parsed) => {
+        if (minDate && isBefore(parsed, minDate))
+            return null;
+        if (maxDate && isAfter(parsed, maxDate))
+            return null;
+        if (disablePastDates && isBefore(parsed, today) && !isSameDay(parsed, today))
+            return null;
+        if (disableFutureDates && isAfter(parsed, today) && !isSameDay(parsed, today))
+            return null;
+        if (disableToday && isSameDay(parsed, today))
+            return null;
+        let finalDate = parsed;
+        if (showTime && tempDate && !resolvedFormatHasTime) {
+            finalDate = new Date(parsed.getFullYear(), parsed.getMonth(), parsed.getDate(), tempDate.getHours(), tempDate.getMinutes(), tempDate.getSeconds());
+        }
+        return finalDate;
+    };
+    // Validated Date for a fully-typed value, or null — lets blur handling keep an already-valid value.
+    const parseValidatedValue = (value) => {
+        if (!value || !value.trim())
+            return null;
+        try {
+            const parsed = parse(value, resolvedDateFormat, new Date());
+            if (isValid(parsed)) {
+                return computeFinalDate(parsed);
+            }
+        }
+        catch (error) {
+            console.error("Error parsing input:", error);
+        }
+        return null;
+    };
+    const updateTempDateFromMask = (value) => {
+        if (!isMaskComplete(value)) {
+            return;
+        }
+        try {
+            const parsed = parse(value, resolvedDateFormat, new Date());
+            if (isValid(parsed)) {
+                const validated = computeFinalDate(parsed);
+                if (validated) {
+                    setTempDate(validated);
+                    setCurrentMonth(validated);
+                }
+            }
+        }
+        catch (error) {
+            console.error("Error parsing input:", error);
+        }
+    };
+    const handleInputFocus = (e) => {
+        if (!enableMask) {
+            return;
+        }
+        e.stopPropagation();
+        if (!tokenSegments.length)
+            return;
+        setIsMaskActive(true);
+        setIsTyping(true);
+        // NOTE: never blank an already-valid shorter value on focus — the padded mask placeholder would replace it.
+        const hasValidValue = parseValidatedValue(inputValue) !== null;
+        if (!hasValidValue && (!inputValue || inputValue.length !== maskPlaceholder.length)) {
+            setInputValue(maskPlaceholder);
+            maskInsertedRef.current = true;
+        }
+        else {
+            maskInsertedRef.current = false;
+        }
+        segmentInputBufferRef.current = "";
+        requestAnimationFrame(() => selectSegment(0));
+    };
+    const handleInputClick = (e) => {
+        var _a;
+        if (!enableMask) {
+            return;
+        }
+        e.stopPropagation();
+        if (!tokenSegments.length)
+            return;
+        setIsMaskActive(true);
+        if (!inputRef.current)
+            return;
+        const caret = (_a = inputRef.current.selectionStart) !== null && _a !== void 0 ? _a : 0;
+        const index = tokenSegments.findIndex((segment) => caret >= segment.start && caret <= segment.end);
+        if (index >= 0) {
+            requestAnimationFrame(() => selectSegment(index));
+        }
+    };
+    const handleKeyDown = (e) => {
+        var _a, _b, _c, _d, _e;
+        if (!enableMask) {
+            return;
+        }
+        const inputEl = inputRef.current;
+        const selStart = (_a = inputEl === null || inputEl === void 0 ? void 0 : inputEl.selectionStart) !== null && _a !== void 0 ? _a : 0;
+        const selEnd = (_b = inputEl === null || inputEl === void 0 ? void 0 : inputEl.selectionEnd) !== null && _b !== void 0 ? _b : selStart;
+        const caretForForward = selStart === selEnd ? selStart : selEnd;
+        const caretForBackward = selStart === selEnd ? selStart : selStart;
+        if (!tokenSegments.length)
+            return;
+        setIsMaskActive(true);
+        const key = e.key;
+        const is12Hour = /h{1,2}/.test(activeFormat) && !/H{1,2}/.test(activeFormat);
+        const caret = key === "ArrowLeft" ? caretForBackward : caretForForward;
+        const activeIdx = getTokenIndexForCaret(caret, tokenSegments);
+        const segment = (_c = tokenSegments[activeIdx]) !== null && _c !== void 0 ? _c : tokenSegments[0];
+        if (key === "Tab") {
+            return;
+        }
+        if (key === "ArrowLeft" || key === "ArrowRight") {
+            e.preventDefault();
+            const delta = key === "ArrowRight" ? 1 : -1;
+            const nextIdx = activeIdx + delta;
+            if (nextIdx >= 0 && nextIdx < tokenSegments.length) {
+                pendingSegmentNavigationRef.current = null;
+                const targetSegment = tokenSegments[nextIdx];
+                if (inputRef.current && targetSegment) {
+                    restoreSelectionRef.current = { start: targetSegment.start, end: targetSegment.end };
+                    setCurrentSegmentIndex(nextIdx);
+                    lastSegmentIndexRef.current = nextIdx;
+                    segmentInputBufferRef.current = "";
+                    inputRef.current.focus();
+                    try {
+                        inputRef.current.setSelectionRange(targetSegment.start, targetSegment.end);
+                    }
+                    catch (error) {
+                        console.error("Error setting selection range:", error);
+                    }
+                    requestAnimationFrame(() => {
+                        if (inputRef.current) {
+                            try {
+                                inputRef.current.setSelectionRange(targetSegment.start, targetSegment.end);
+                            }
+                            catch (error) {
+                                console.error("Error setting selection range:", error);
+                            }
+                        }
+                    });
+                }
+            }
+            return;
+        }
+        if (key === "Home") {
+            e.preventDefault();
+            moveToSegment(0);
+            return;
+        }
+        if (key === "End") {
+            e.preventDefault();
+            moveToSegment(tokenSegments.length - 1);
+            return;
+        }
+        if (key === "Escape") {
+            e.preventDefault();
+            if (isOpen) {
+                onClose();
+            }
+            else {
+                (_d = inputRef.current) === null || _d === void 0 ? void 0 : _d.blur();
+            }
+            return;
+        }
+        if (key === "Enter") {
+            e.preventDefault();
+            if (!isOpen && showDate) {
+                handleOpen();
+                return;
+            }
+            handleInputBlur();
+            return;
+        }
+        if (key === "ArrowDown" && !isOpen && showDate) {
+            e.preventDefault();
+            handleOpen();
+            return;
+        }
+        if (key === "Backspace" || key === "Delete") {
+            e.preventDefault();
+            const baseValue = ensureMaskValue();
+            const newValue = baseValue.slice(0, segment.start) + segment.placeholder + baseValue.slice(segment.end);
+            setInputValue(newValue);
+            setIsTyping(true);
+            maskInsertedRef.current = false;
+            segmentInputBufferRef.current = "";
+            updateTempDateFromMask(newValue);
+            requestAnimationFrame(() => selectSegment(activeIdx));
+            return;
+        }
+        if (e.ctrlKey || e.metaKey) {
+            const lowerKey = key.toLowerCase();
+            if (["a", "c", "v", "x"].includes(lowerKey)) {
+                return;
+            }
+        }
+        if (((_e = segment.token) === null || _e === void 0 ? void 0 : _e.toLowerCase()) === "a") {
+            const lower = key.toLowerCase();
+            if (lower === "a" || lower === "p") {
+                e.preventDefault();
+                const value = lower === "a" ? (segment.placeholder.length <= 1 ? "A" : "AM") : (segment.placeholder.length <= 1 ? "P" : "PM");
+                const baseValue = ensureMaskValue();
+                const newValue = baseValue.slice(0, segment.start) + value + baseValue.slice(segment.end);
+                setInputValue(newValue);
+                setIsTyping(true);
+                maskInsertedRef.current = false;
+                segmentInputBufferRef.current = "";
+                updateTempDateFromMask(newValue);
+                requestAnimationFrame(() => moveToSegment(activeIdx + 1));
+                return;
+            }
+            if (key === "ArrowUp" || key === "ArrowDown") {
+                e.preventDefault();
+                const currentValue = ensureMaskValue().slice(segment.start, segment.end).toLowerCase();
+                const next = currentValue === "pm" ? (segment.placeholder.length <= 1 ? "A" : "AM") : (segment.placeholder.length <= 1 ? "P" : "PM");
+                const baseValue = ensureMaskValue();
+                const newValue = baseValue.slice(0, segment.start) + next + baseValue.slice(segment.end);
+                setInputValue(newValue);
+                setIsTyping(true);
+                maskInsertedRef.current = false;
+                segmentInputBufferRef.current = "";
+                updateTempDateFromMask(newValue);
+                requestAnimationFrame(() => moveToSegment(activeIdx + 1));
+                return;
+            }
+            e.preventDefault();
+            return;
+        }
+        if (/^[0-9]$/.test(key)) {
+            e.preventDefault();
+            const baseValue = ensureMaskValue();
+            const placeholderChars = segment.placeholder.split("");
+            const buffer = segmentInputBufferRef.current + key;
+            const normalized = normalizeTimeBuffer(segment.token, buffer, segment.placeholder.length, is12Hour);
+            const activeValue = normalized.value;
+            const completed = normalized.completed;
+            placeholderChars.forEach((_char, idx) => {
+                if (idx < activeValue.length) {
+                    placeholderChars[idx] = activeValue[idx];
+                }
+            });
+            const newSegmentValue = placeholderChars.join("");
+            const newValue = baseValue.slice(0, segment.start) + newSegmentValue + baseValue.slice(segment.end);
+            setInputValue(newValue);
+            setIsTyping(true);
+            maskInsertedRef.current = false;
+            updateTempDateFromMask(newValue);
+            if (completed) {
+                segmentInputBufferRef.current = "";
+                const nextIdx = activeIdx + 1;
+                if (nextIdx < tokenSegments.length && inputRef.current) {
+                    const nextSegment = tokenSegments[nextIdx];
+                    pendingSegmentNavigationRef.current = nextIdx;
+                    restoreSelectionRef.current = { start: nextSegment.start, end: nextSegment.end };
+                    inputRef.current.value = newValue;
+                    inputRef.current.focus();
+                    inputRef.current.setSelectionRange(nextSegment.start, nextSegment.end);
+                }
+            }
+            else {
+                segmentInputBufferRef.current = activeValue;
+                const caretStart = segment.start + activeValue.length;
+                requestAnimationFrame(() => {
+                    if (inputRef.current) {
+                        inputRef.current.setSelectionRange(caretStart, segment.end);
+                    }
+                });
+            }
+            return;
+        }
+        if (key === "ArrowUp" || key === "ArrowDown") {
+            e.preventDefault();
+            return;
+        }
+        if (key === " ") {
+            e.preventDefault();
+            return;
+        }
+        e.preventDefault();
+    };
+    const handlePaste = (e) => {
+        if (!enableMask) {
+            return;
+        }
+        e.preventDefault();
+        const pastedText = e.clipboardData.getData("text").trim();
+        if (!pastedText)
+            return;
+        try {
+            const parsed = parse(pastedText, activeFormat, new Date());
+            if (isValid(parsed)) {
+                const validated = computeFinalDate(parsed);
+                if (validated) {
+                    const formattedValue = format(validated, activeFormat);
+                    setTempDate(validated);
+                    setCurrentMonth(validated);
+                    setInputValue(formattedValue);
+                    setIsTyping(true);
+                    setIsMaskActive(true);
+                    maskInsertedRef.current = false;
+                    segmentInputBufferRef.current = "";
+                    updateTempDateFromMask(formattedValue);
+                    requestAnimationFrame(() => {
+                        moveToSegment(tokenSegments.length - 1);
+                        if (inputRef.current) {
+                            const length = formattedValue.length;
+                            inputRef.current.setSelectionRange(length, length);
+                        }
+                    });
+                }
+                return;
+            }
+        }
+        catch (error) {
+            console.error("Error parsing input:", error);
+        }
+    };
+    const handleInputFocusMask = enableMask ? handleInputFocus : undefined;
+    const handleInputClickMask = enableMask ? handleInputClick : undefined;
+    const handlePasteMask = enableMask ? handlePaste : undefined;
+    const handleInputKeyDown = (e) => {
+        if (!enableMask) {
+            if (e.key === "Escape" && isOpen) {
+                e.preventDefault();
+                onClose();
+                return;
+            }
+            if (!isOpen && showDate && (e.key === "ArrowDown" || e.key === "Enter")) {
+                e.preventDefault();
+                handleOpen();
+                return;
+            }
+            return;
+        }
+        handleKeyDown(e);
+    };
+    const displayValue = isTyping
+        ? inputValue
+        : tempDate
+            ? format(tempDate, resolvedDateFormat)
+            : "";
+    return (_jsxs(FormControl, { id: ids.inputId, isDisabled: disabled, isInvalid: error, isRequired: isRequired, width: width, children: [label && (_jsx(TextLabel, { label: label, id: ids.inputId, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), _jsxs(Popover, { isLazy: true, isOpen: pickerPortal.isPopoverOpen, onClose: () => {
+                    if (suppressOnCloseFinalizeRef.current) {
+                        suppressOnCloseFinalizeRef.current = false;
+                        return;
+                    }
+                    finalize();
+                    onClose();
+                }, placement: "bottom-start", closeOnBlur: false, returnFocusOnClose: true, children: [_jsx(PopoverAnchor, { children: _jsx(Box, { ref: triggerRef, as: "div", children: _jsxs(InputGroup, { size: sizeKey, children: [_jsx(Input, { ref: mergedInputRef, ...ids.controlProps, name: name, size: sizeKey, placeholder: displayPlaceholder, value: displayValue, onChange: handleInputChange, onKeyDown: handleInputKeyDown, onPaste: handlePasteMask, onBlur: handleInputBlur, onClick: handleInputClickMask, onFocus: handleInputFocusMask, isDisabled: disabled, isInvalid: error, isRequired: isRequired, autoComplete: autoComplete, cursor: "text" }), _jsx(InputRightElement, { height: "100%", display: "flex", alignItems: "center", pointerEvents: "auto", children: _jsx(IconButton, { "aria-label": "Open calendar", variant: "ghost", size: "sm", minW: "auto", h: "auto", isDisabled: disabled, onClick: (e) => {
+                                                e.stopPropagation();
+                                                if (!isOpen) {
+                                                    handleOpen();
+                                                }
+                                                else {
+                                                    onClose();
+                                                }
+                                            }, icon: _jsx(Box, { as: "span", sx: calendarIconWrapperSx, children: _jsx(CalendarIcon, { size: calendarIconPx, color: theme.colors.textMuted }) }) }) })] }) }) }), _jsx(PickerPortal, { isMounted: pickerPortal.isMounted, children: _jsx(PopoverContent, { width: "auto", p: 3, ref: popoverRef, boxShadow: "lg", borderRadius: "xl", bg: theme.colors.surfaceRaised, role: "dialog", "aria-label": calendarLabel, children: _jsxs(PopoverBody, { p: 0, children: [showDate && (_jsx(CalendarPanel, { currentMonth: currentMonth, setCurrentMonth: (updater) => setCurrentMonth((prev) => updater(prev)), today: today, isRange: false, tempDate: tempDate, tempRangeStart: null, tempRangeEnd: null, isSameDay: isSameDay, isBefore: isBefore, isAfter: isAfter, minDate: minDate, maxDate: maxDate, disablePastDates: disablePastDates, disableFutureDates: disableFutureDates, disableToday: disableToday, onDaySelect: handleDaySelect })), showTime && (_jsx(Box, { mt: showDate ? 3 : 0, children: resolvedPickerType === "time" ? (_jsx(TimePickerInput, { value: tempDate, onChange: (updatedDate) => {
+                                                setTempDate(updatedDate);
+                                                setInputValue(updatedDate ? format(updatedDate, resolvedDateFormat) : "");
+                                                setIsTyping(false);
+                                            }, dateFormat: resolvedDateFormat, isDisabled: disabled, placeholder: placeholderText, size: sizeKey, error: error })) : (_jsx(TimePicker, { date: tempDate !== null && tempDate !== void 0 ? tempDate : new Date((disableToday ? tomorrow : today).getFullYear(), (disableToday ? tomorrow : today).getMonth(), (disableToday ? tomorrow : today).getDate(), 0, 0, 0, 0), dateFormat: resolvedDateFormat, onChange: (updatedDate) => {
+                                                setTempDate(updatedDate);
+                                                setInputValue(format(updatedDate, resolvedDateFormat));
+                                                setIsTyping(false);
+                                            }, isDisabled: disabled })) })), _jsxs(Box, { display: "flex", justifyContent: "space-between", alignItems: "center", mt: 3, pt: 3, borderTop: "1px solid", borderColor: raisedRule(theme.colors), children: [_jsx(Button, { size: "sm", variant: "ghost", colorScheme: "gray", onClick: () => {
+                                                    setTempDate(null);
+                                                    requestClose(null);
+                                                }, children: "Clear" }), _jsx(Button, { size: "sm", variant: "gradient", onClick: () => requestClose(), children: "Apply" })] })] }) }) })] }), _jsx(FieldMessage, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
+}
+export const SingleDatePicker = forwardRef(SingleDatePickerInner);
+SingleDatePicker.displayName = "SingleDatePicker";
+export default SingleDatePicker;