pixelize-design-library 2.2.43 → 2.2.45

package/dist/Components/DatePicker/SingleDatePicker.js

@@ -0,0 +1,988 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SingleDatePicker = void 0;
+var react_1 = __importStar(require("react"));
+var react_2 = require("@chakra-ui/react");
+var date_fns_1 = require("date-fns");
+var lucide_react_1 = require("lucide-react");
+var Button_1 = __importDefault(require("../Button/Button"));
+var useCustomTheme_1 = require("../../Theme/useCustomTheme");
+var FormLabel_1 = require("../Common/FormLabel");
+var HelperText_1 = __importDefault(require("../Common/HelperText"));
+var ErrorMessage_1 = __importDefault(require("../Common/ErrorMessage"));
+var TimePicker_1 = __importDefault(require("./TimePicker"));
+var TimePickerInput_1 = require("./TimePickerInput");
+var CalendarPanel_1 = __importDefault(require("./CalendarPanel"));
+var TOKEN_CHARS = /[dMyHhmsaAm]/;
+var getPlaceholderForToken = function (token, length) {
+    var 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);
+    }
+};
+var buildFormatSegments = function (format) {
+    var segments = [];
+    var cursor = 0;
+    var i = 0;
+    while (i < format.length) {
+        var char = format[i];
+        if (TOKEN_CHARS.test(char)) {
+            var j = i + 1;
+            while (j < format.length && format[j] === char) {
+                j++;
+            }
+            var length_1 = j - i;
+            var placeholder = getPlaceholderForToken(char, length_1);
+            var segment = {
+                type: "token",
+                token: char,
+                length: length_1,
+                placeholder: placeholder,
+                placeholderChar: placeholder.charAt(0) || char,
+                start: cursor,
+                end: cursor + placeholder.length,
+            };
+            segments.push(segment);
+            cursor += placeholder.length;
+            i = j;
+        }
+        else {
+            var 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;
+};
+var buildTimeSegments = function (format) {
+    var _a;
+    var m = format.match(/^(h{1,2}|H{1,2}):m{1,2}(?:\s*a{1,2})?$/i);
+    if (!m)
+        return null;
+    var segments = [];
+    var cursor = 0;
+    var hourToken = m[1];
+    var 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;
+    var minuteLength = (((_a = format.match(/:m{1,2}/)) === null || _a === void 0 ? void 0 : _a[0].length) || 2) - 1;
+    var 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;
+    var 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;
+        var aLen = ampmMatch[0].trim().length;
+        var 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;
+};
+var inferPickerTypeFromFormat = function (formatStr) {
+    var lower = formatStr.toLowerCase();
+    var hasTime = lower.includes("hh") || lower.includes("mm") || lower.includes("ss");
+    var hasDate = lower.includes("d") && lower.includes("m") && lower.includes("y");
+    if (hasTime && hasDate)
+        return "datetime";
+    if (hasTime)
+        return "time";
+    return "date";
+};
+var formatToPlaceholder = function (format) { return format; };
+var filterNumericInput = function (value, format) {
+    var separators = format.match(/[^dDmMyYhHsSaA]/g) || [];
+    var uniqueSeparators = Array.from(new Set(separators));
+    return value
+        .split("")
+        .filter(function (char) {
+        if (/[0-9]/.test(char))
+            return true;
+        if (uniqueSeparators.includes(char))
+            return true;
+        if (char === " ")
+            return true;
+        return false;
+    })
+        .join("");
+};
+var getFormatForPickerType = function (pickerType, dateFormat) {
+    if (!pickerType) {
+        return dateFormat;
+    }
+    if (pickerType === "date") {
+        var hasTime = /[hHmsSaA]/.test(dateFormat);
+        if (hasTime) {
+            var dateMatch = dateFormat.match(/^([^hHmsSaA]+?)(?:\s*[hHmsSaA])/);
+            if (dateMatch && dateMatch[1]) {
+                return dateMatch[1].trim();
+            }
+        }
+        return dateFormat;
+    }
+    if (pickerType === "time") {
+        var hasDate = /[dDmMyY]/.test(dateFormat);
+        if (hasDate) {
+            var timeMatch = dateFormat.match(/[dDmMyY\/\-\s\.]+\s*([hHmsSaA\/\-\s:]+)$/);
+            if (timeMatch && timeMatch[1]) {
+                return timeMatch[1].trim();
+            }
+        }
+        return dateFormat;
+    }
+    return dateFormat;
+};
+var usesAmPm = function (format) { return /(^|[^a-zA-Z])a([^a-zA-Z]|$)/i.test(format); };
+var sanitizeTimeInput = function (raw, format) {
+    var _a;
+    var ampm = usesAmPm(format);
+    var only = raw.replace(/[^0-9aApPmM:\s]/g, "");
+    if (/H{1,2}:m{1,2}/.test(format) || /h{1,2}:m{1,2}/i.test(format)) {
+        var digits = only.replace(/[^0-9]/g, "");
+        var hh = digits.slice(0, 2);
+        var mm = digits.slice(2, 4);
+        var out = hh;
+        if (mm.length)
+            out += ":" + mm;
+        if (ampm) {
+            var suffix = (((_a = only.match(/(am|pm)/i)) === null || _a === void 0 ? void 0 : _a[0]) || "").toUpperCase();
+            if (suffix)
+                out += " " + suffix;
+        }
+        return out;
+    }
+    return only;
+};
+var normalizeTimeBuffer = function (tokenChar, rawBuffer, segmentLength, is12Hour) {
+    if (!tokenChar)
+        return { value: rawBuffer, completed: rawBuffer.length >= segmentLength };
+    var t = tokenChar.toLowerCase();
+    var buf = rawBuffer.replace(/\D/g, "").slice(0, segmentLength);
+    if (segmentLength !== 2) {
+        return { value: buf, completed: buf.length >= segmentLength };
+    }
+    if (t === "h") {
+        var maxHour = is12Hour ? 12 : 24;
+        if (buf.length === 1) {
+            var d = parseInt(buf[0], 10);
+            var firstMax = is12Hour ? 1 : 2;
+            if (d > firstMax) {
+                return { value: "0".concat(d), completed: true };
+            }
+            return { value: buf, completed: false };
+        }
+        if (buf.length === 2) {
+            var 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;
+            }
+            var out = h.toString().padStart(2, "0");
+            return { value: out, completed: true };
+        }
+    }
+    if (t === "m") {
+        if (buf.length === 1) {
+            var d = parseInt(buf[0], 10);
+            if (d > 5) {
+                return { value: "0".concat(d), completed: true };
+            }
+            if (d === 0) {
+                return { value: "01", completed: true };
+            }
+            return { value: buf, completed: false };
+        }
+        if (buf.length === 2) {
+            var m = parseInt(buf, 10);
+            if (m < 1)
+                m = 1;
+            if (m > 60)
+                m = 60;
+            var out = m.toString().padStart(2, "0");
+            return { value: out, completed: true };
+        }
+    }
+    return { value: buf, completed: buf.length >= segmentLength };
+};
+var SingleDatePicker = function (props) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    var id = props.id, name = props.name, label = props.label, isRequired = props.isRequired, isInformation = props.isInformation, informationMessage = props.informationMessage, error = props.error, errorMessage = props.errorMessage, helperText = props.helperText, placeholderText = props.placeholderText, _k = props.dateFormat, dateFormat = _k === void 0 ? "dd/MM/yyyy" : _k, pickerType = props.pickerType, minDate = props.minDate, maxDate = props.maxDate, disableFutureDates = props.disableFutureDates, disablePastDates = props.disablePastDates, _l = props.autoComplete, autoComplete = _l === void 0 ? "off" : _l, disabled = props.disabled, _m = props.width, width = _m === void 0 ? "100%" : _m, _o = props.disableToday, disableToday = _o === void 0 ? false : _o;
+    var theme = (0, useCustomTheme_1.useCustomTheme)();
+    var _p = (0, react_2.useDisclosure)(), isOpen = _p.isOpen, onOpen = _p.onOpen, onClose = _p.onClose;
+    var inputRef = (0, react_1.useRef)(null);
+    var popoverRef = (0, react_1.useRef)(null);
+    var triggerRef = (0, react_1.useRef)(null);
+    var resolvedPickerType = pickerType !== null && pickerType !== void 0 ? pickerType : inferPickerTypeFromFormat(dateFormat);
+    var resolvedDateFormat = getFormatForPickerType(pickerType, dateFormat);
+    var enableMask = resolvedPickerType !== "time";
+    var basePlaceholder = (0, react_1.useMemo)(function () { return formatToPlaceholder(dateFormat); }, [dateFormat]);
+    var timeEffectiveFormat = (0, react_1.useMemo)(function () {
+        if ((pickerType !== null && pickerType !== void 0 ? pickerType : resolvedPickerType) === "time") {
+            var hasLowerH = /h{1,2}/.test(resolvedDateFormat);
+            var hasAmPm = /(^|[^a-zA-Z])a([^a-zA-Z]|$)/i.test(resolvedDateFormat);
+            if (hasLowerH && !hasAmPm)
+                return "".concat(resolvedDateFormat, " a");
+        }
+        return resolvedDateFormat;
+    }, [pickerType, resolvedPickerType, resolvedDateFormat]);
+    var activeFormat = timeEffectiveFormat;
+    var formatSegments = (0, react_1.useMemo)(function () {
+        if (!enableMask)
+            return [];
+        var expectHourFirst = /^(h{1,2}|H{1,2}):m{1,2}(?:\s*a{1,2})?$/i.test(activeFormat);
+        if (expectHourFirst) {
+            var ts = buildTimeSegments(activeFormat);
+            if (ts)
+                return ts;
+        }
+        return buildFormatSegments(activeFormat);
+    }, [enableMask, activeFormat]);
+    var tokenSegments = (0, react_1.useMemo)(function () { return (enableMask ? formatSegments.filter(function (segment) { return segment.type === "token"; }) : []); }, [enableMask, formatSegments]);
+    var maskPlaceholder = (0, react_1.useMemo)(function () {
+        if (!enableMask) {
+            return basePlaceholder;
+        }
+        var built = formatSegments.map(function (segment) { return 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]);
+    var displayPlaceholder = placeholderText || (enableMask ? maskPlaceholder : basePlaceholder);
+    var didCommitRef = (0, react_1.useRef)(false);
+    var suppressOnCloseFinalizeRef = (0, react_1.useRef)(false);
+    var pendingSegmentNavigationRef = (0, react_1.useRef)(null);
+    var restoreSelectionRef = (0, react_1.useRef)(null);
+    var segmentInputBufferRef = (0, react_1.useRef)("");
+    var maskInsertedRef = (0, react_1.useRef)(false);
+    var today = new Date();
+    var tomorrow = (0, date_fns_1.addDays)(today, 1);
+    var showDate = resolvedPickerType === "date" || resolvedPickerType === "datetime";
+    var showTime = resolvedPickerType === "time" || resolvedPickerType === "datetime";
+    var formatHasTime = resolvedDateFormat.toLowerCase().includes("hh") ||
+        resolvedDateFormat.toLowerCase().includes("mm") ||
+        resolvedDateFormat.toLowerCase().includes("ss");
+    var selectedDate = ((_a = props.value) !== null && _a !== void 0 ? _a : props.selectedDate);
+    var _q = (0, react_1.useState)(selectedDate
+        ? disableToday && (0, date_fns_1.isSameDay)(selectedDate, today)
+            ? tomorrow
+            : selectedDate
+        : disableToday
+            ? tomorrow
+            : today), currentMonth = _q[0], setCurrentMonth = _q[1];
+    var _r = (0, react_1.useState)(selectedDate !== null && selectedDate !== void 0 ? selectedDate : null), tempDate = _r[0], setTempDate = _r[1];
+    var _s = (0, react_1.useState)(""), inputValue = _s[0], setInputValue = _s[1];
+    var _t = (0, react_1.useState)(false), isTyping = _t[0], setIsTyping = _t[1];
+    var _u = (0, react_1.useState)(false), isMaskActive = _u[0], setIsMaskActive = _u[1];
+    var _v = (0, react_1.useState)(0), currentSegmentIndex = _v[0], setCurrentSegmentIndex = _v[1];
+    var lastSegmentIndexRef = (0, react_1.useRef)(0);
+    var resetCommitGuardAndOpen = function () {
+        didCommitRef.current = false;
+        suppressOnCloseFinalizeRef.current = false;
+        onOpen();
+    };
+    var commitOnce = function (value) {
+        if (didCommitRef.current)
+            return;
+        didCommitRef.current = true;
+        props.onChange(value);
+    };
+    var finalize = function (overrideValue) {
+        if (enableMask) {
+            maskInsertedRef.current = false;
+            segmentInputBufferRef.current = "";
+            setIsMaskActive(false);
+        }
+        var value = overrideValue !== undefined ? overrideValue : tempDate;
+        if (value) {
+            setInputValue((0, date_fns_1.format)(value, activeFormat));
+        }
+        else {
+            setInputValue("");
+        }
+        commitOnce(value !== null && value !== void 0 ? value : null);
+        setIsTyping(false);
+    };
+    var requestClose = function (overrideValue) {
+        suppressOnCloseFinalizeRef.current = true;
+        finalize(overrideValue);
+        onClose();
+    };
+    (0, react_1.useEffect)(function () {
+        if (selectedDate instanceof Date) {
+            setTempDate(new Date(selectedDate));
+            setInputValue((0, date_fns_1.format)(selectedDate, activeFormat));
+        }
+        else {
+            setTempDate(null);
+            setInputValue("");
+        }
+    }, [selectedDate, activeFormat]);
+    (0, react_1.useEffect)(function () {
+        if (!enableMask || !isMaskActive) {
+            restoreSelectionRef.current = null;
+            return;
+        }
+        if (restoreSelectionRef.current && inputRef.current) {
+            var _a = restoreSelectionRef.current, start_1 = _a.start, end_1 = _a.end;
+            var inputEl = inputRef.current;
+            if (document.activeElement === inputEl) {
+                try {
+                    inputEl.setSelectionRange(start_1, end_1);
+                }
+                catch (e) { }
+            }
+            var restore_1 = function () {
+                if (inputRef.current && document.activeElement === inputRef.current) {
+                    try {
+                        inputRef.current.setSelectionRange(start_1, end_1);
+                    }
+                    catch (e) { }
+                }
+            };
+            Promise.resolve().then(restore_1);
+            requestAnimationFrame(restore_1);
+            requestAnimationFrame(function () { return requestAnimationFrame(restore_1); });
+        }
+    });
+    (0, react_1.useLayoutEffect)(function () {
+        if (!enableMask || !isMaskActive || !inputRef.current)
+            return;
+        if (pendingSegmentNavigationRef.current !== null) {
+            var targetIdx = pendingSegmentNavigationRef.current;
+            pendingSegmentNavigationRef.current = null;
+            if (targetIdx >= 0 && targetIdx < tokenSegments.length) {
+                var 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]);
+    var handleOpen = function () {
+        if (!selectedDate && showDate) {
+            setTempDate(disableToday ? tomorrow : new Date());
+        }
+        if (showTime && !tempDate) {
+            setTempDate(disableToday ? tomorrow : new Date());
+        }
+        resetCommitGuardAndOpen();
+    };
+    var handleInputChange = function (e) {
+        if (enableMask && isMaskActive) {
+            return;
+        }
+        var value = e.target.value;
+        value = filterNumericInput(value, resolvedDateFormat);
+        setInputValue(value);
+        setIsTyping(true);
+        if (!value.trim()) {
+            setTempDate(null);
+            setIsTyping(false);
+            requestClose(null);
+            return;
+        }
+        try {
+            var parsed = (0, date_fns_1.parse)(value, resolvedDateFormat, new Date());
+            if ((0, date_fns_1.isValid)(parsed)) {
+                var finalDate = parsed;
+                if (showTime && tempDate && !formatHasTime) {
+                    finalDate = new Date(parsed.getFullYear(), parsed.getMonth(), parsed.getDate(), tempDate.getHours(), tempDate.getMinutes(), tempDate.getSeconds());
+                }
+                setTempDate(finalDate);
+                setCurrentMonth(finalDate);
+            }
+        }
+        catch (_a) { }
+    };
+    var handleInputBlur = function () {
+        var value = inputValue;
+        if (enableMask && isMaskActive) {
+            setIsMaskActive(false);
+            segmentInputBufferRef.current = "";
+            if (!value || !value.trim() || !isMaskComplete(value)) {
+                setInputValue("");
+                setTempDate(null);
+                setIsTyping(false);
+                maskInsertedRef.current = false;
+                requestClose(null);
+                return;
+            }
+        }
+        setIsTyping(false);
+        if (!value || !value.trim()) {
+            setTempDate(null);
+            requestClose(null);
+            return;
+        }
+        try {
+            var parsed = (0, date_fns_1.parse)(value, resolvedDateFormat, new Date());
+            if ((0, date_fns_1.isValid)(parsed)) {
+                var validated = computeFinalDate(parsed);
+                if (validated) {
+                    setTempDate(validated);
+                    setCurrentMonth(validated);
+                    setInputValue((0, date_fns_1.format)(validated, resolvedDateFormat));
+                    requestClose(validated);
+                    maskInsertedRef.current = false;
+                    return;
+                }
+            }
+        }
+        catch (_a) { }
+        if (tempDate) {
+            setInputValue((0, date_fns_1.format)(tempDate, resolvedDateFormat));
+        }
+        else {
+            setInputValue("");
+            setTempDate(null);
+            requestClose(null);
+        }
+        maskInsertedRef.current = false;
+    };
+    var handleDaySelect = function (day) {
+        var updated = new Date(day);
+        if (disableToday && (0, date_fns_1.isSameDay)(updated, today)) {
+            updated = tomorrow;
+        }
+        var updatedDate = tempDate
+            ? new Date(updated.getFullYear(), updated.getMonth(), updated.getDate(), tempDate.getHours(), tempDate.getMinutes(), tempDate.getSeconds())
+            : updated;
+        setTempDate(updatedDate);
+        setInputValue((0, date_fns_1.format)(updatedDate, resolvedDateFormat));
+        setIsTyping(false);
+        if (!showTime) {
+            requestClose(updatedDate);
+        }
+    };
+    (0, react_1.useEffect)(function () {
+        if (!isOpen)
+            return;
+        var handleClickOutside = function (event) {
+            var _a, _b, _c;
+            var target = event.target;
+            var isInsidePopover = (_a = popoverRef.current) === null || _a === void 0 ? void 0 : _a.contains(target);
+            var isInsideInput = (_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.contains(target);
+            var isInsideTrigger = (_c = triggerRef.current) === null || _c === void 0 ? void 0 : _c.contains(target);
+            if (!isInsidePopover && !isInsideInput && !isInsideTrigger) {
+                finalize();
+                onClose();
+            }
+        };
+        document.addEventListener("mousedown", handleClickOutside, true);
+        document.addEventListener("click", handleClickOutside, true);
+        return function () {
+            document.removeEventListener("mousedown", handleClickOutside, true);
+            document.removeEventListener("click", handleClickOutside, true);
+        };
+    }, [isOpen]);
+    var ensureMaskValue = (0, react_1.useCallback)(function () {
+        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;
+        }
+        var 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]);
+    var selectSegment = (0, react_1.useCallback)(function (index) {
+        if (!enableMask || tokenSegments.length === 0)
+            return;
+        var clamped = Math.max(0, Math.min(tokenSegments.length - 1, index));
+        var segment = tokenSegments[clamped];
+        setCurrentSegmentIndex(clamped);
+        lastSegmentIndexRef.current = clamped;
+        segmentInputBufferRef.current = "";
+        var inputEl = inputRef.current;
+        if (!inputEl)
+            return;
+        var 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) {
+            var preservedSegments_1 = [];
+            formatSegments.forEach(function (seg) {
+                if (seg.start < currentValue.length) {
+                    var segValue = currentValue.slice(seg.start, Math.min(seg.end, currentValue.length));
+                    if (seg.type === "token" && /^\d+$/.test(segValue.replace(/\D/g, ""))) {
+                        preservedSegments_1.push(segValue.padEnd(seg.placeholder.length, seg.placeholderChar));
+                    }
+                    else if (seg.type === "literal") {
+                        preservedSegments_1.push(seg.placeholder);
+                    }
+                    else {
+                        preservedSegments_1.push(seg.placeholder);
+                    }
+                }
+                else {
+                    preservedSegments_1.push(seg.placeholder);
+                }
+            });
+            currentValue = preservedSegments_1.join("");
+            inputEl.value = currentValue;
+            setInputValue(currentValue);
+        }
+        inputEl.focus({ preventScroll: true });
+        inputEl.setSelectionRange(segment.start, segment.end);
+        requestAnimationFrame(function () {
+            if (inputRef.current) {
+                inputRef.current.setSelectionRange(segment.start, segment.end);
+            }
+        });
+    }, [enableMask, maskPlaceholder, tokenSegments, formatSegments, inputValue]);
+    var moveToSegment = (0, react_1.useCallback)(function (nextIndex) {
+        if (!enableMask || !tokenSegments.length)
+            return;
+        var clamped = Math.max(0, Math.min(tokenSegments.length - 1, nextIndex));
+        selectSegment(clamped);
+    }, [enableMask, selectSegment, tokenSegments.length]);
+    var getTokenIndexForCaret = function (caret, tokens) {
+        if (tokens.length === 0)
+            return 0;
+        var insideIdx = tokens.findIndex(function (t) { return caret >= t.start && caret <= t.end; });
+        if (insideIdx >= 0)
+            return insideIdx;
+        var toRight = tokens.findIndex(function (t) { return caret < t.end; });
+        if (toRight >= 0)
+            return toRight;
+        return tokens.length - 1;
+    };
+    var isSegmentComplete = function (segment, value) {
+        var _a;
+        if (segment.type === "literal")
+            return true;
+        var token = (_a = segment.token) === null || _a === void 0 ? void 0 : _a.toLowerCase();
+        if (!token)
+            return true;
+        if (token === "a") {
+            var 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;
+    };
+    var isMaskComplete = function (value) {
+        if (!value || value.length !== maskPlaceholder.length)
+            return false;
+        return tokenSegments.every(function (segment) {
+            var segmentValue = value.slice(segment.start, segment.end);
+            return isSegmentComplete(segment, segmentValue);
+        });
+    };
+    var computeFinalDate = function (parsed) {
+        if (minDate && (0, date_fns_1.isBefore)(parsed, minDate))
+            return null;
+        if (maxDate && (0, date_fns_1.isAfter)(parsed, maxDate))
+            return null;
+        if (disablePastDates && (0, date_fns_1.isBefore)(parsed, today) && !(0, date_fns_1.isSameDay)(parsed, today))
+            return null;
+        if (disableFutureDates && (0, date_fns_1.isAfter)(parsed, today) && !(0, date_fns_1.isSameDay)(parsed, today))
+            return null;
+        if (disableToday && (0, date_fns_1.isSameDay)(parsed, today))
+            return null;
+        var finalDate = parsed;
+        if (showTime && tempDate && !formatHasTime) {
+            finalDate = new Date(parsed.getFullYear(), parsed.getMonth(), parsed.getDate(), tempDate.getHours(), tempDate.getMinutes(), tempDate.getSeconds());
+        }
+        return finalDate;
+    };
+    var updateTempDateFromMask = function (value) {
+        if (!isMaskComplete(value)) {
+            return;
+        }
+        try {
+            var parsed = (0, date_fns_1.parse)(value, resolvedDateFormat, new Date());
+            if ((0, date_fns_1.isValid)(parsed)) {
+                var validated = computeFinalDate(parsed);
+                if (validated) {
+                    setTempDate(validated);
+                    setCurrentMonth(validated);
+                }
+            }
+        }
+        catch (_a) { }
+    };
+    var handleInputFocus = function (e) {
+        if (!enableMask) {
+            return;
+        }
+        e.stopPropagation();
+        if (!tokenSegments.length)
+            return;
+        setIsMaskActive(true);
+        setIsTyping(true);
+        if (!inputValue || inputValue.length !== maskPlaceholder.length) {
+            setInputValue(maskPlaceholder);
+            maskInsertedRef.current = true;
+        }
+        else {
+            maskInsertedRef.current = false;
+        }
+        segmentInputBufferRef.current = "";
+        requestAnimationFrame(function () { return selectSegment(0); });
+    };
+    var handleInputClick = function (e) {
+        var _a;
+        if (!enableMask) {
+            return;
+        }
+        e.stopPropagation();
+        if (!tokenSegments.length)
+            return;
+        setIsMaskActive(true);
+        if (!inputRef.current)
+            return;
+        var caret = (_a = inputRef.current.selectionStart) !== null && _a !== void 0 ? _a : 0;
+        var index = tokenSegments.findIndex(function (segment) { return caret >= segment.start && caret <= segment.end; });
+        if (index >= 0) {
+            requestAnimationFrame(function () { return selectSegment(index); });
+        }
+    };
+    var handleKeyDown = function (e) {
+        var _a, _b, _c, _d, _e;
+        if (!enableMask) {
+            return;
+        }
+        var inputEl = inputRef.current;
+        var selStart = (_a = inputEl === null || inputEl === void 0 ? void 0 : inputEl.selectionStart) !== null && _a !== void 0 ? _a : 0;
+        var selEnd = (_b = inputEl === null || inputEl === void 0 ? void 0 : inputEl.selectionEnd) !== null && _b !== void 0 ? _b : selStart;
+        var caretForForward = selStart === selEnd ? selStart : selEnd;
+        var caretForBackward = selStart === selEnd ? selStart : selStart;
+        if (!tokenSegments.length)
+            return;
+        setIsMaskActive(true);
+        var key = e.key;
+        var is12Hour = /h{1,2}/.test(activeFormat) && !/H{1,2}/.test(activeFormat);
+        var caret = key === "ArrowLeft" ? caretForBackward : caretForForward;
+        var activeIdx = getTokenIndexForCaret(caret, tokenSegments);
+        var segment = (_c = tokenSegments[activeIdx]) !== null && _c !== void 0 ? _c : tokenSegments[0];
+        if (key === "Tab") {
+            return;
+        }
+        if (key === "ArrowLeft" || key === "ArrowRight") {
+            e.preventDefault();
+            var delta = key === "ArrowRight" ? 1 : -1;
+            var nextIdx = activeIdx + delta;
+            if (nextIdx >= 0 && nextIdx < tokenSegments.length) {
+                pendingSegmentNavigationRef.current = null;
+                var targetSegment_1 = tokenSegments[nextIdx];
+                if (inputRef.current && targetSegment_1) {
+                    restoreSelectionRef.current = { start: targetSegment_1.start, end: targetSegment_1.end };
+                    setCurrentSegmentIndex(nextIdx);
+                    lastSegmentIndexRef.current = nextIdx;
+                    segmentInputBufferRef.current = "";
+                    inputRef.current.focus();
+                    try {
+                        inputRef.current.setSelectionRange(targetSegment_1.start, targetSegment_1.end);
+                    }
+                    catch (error) { }
+                    requestAnimationFrame(function () {
+                        if (inputRef.current) {
+                            try {
+                                inputRef.current.setSelectionRange(targetSegment_1.start, targetSegment_1.end);
+                            }
+                            catch (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();
+            (_d = inputRef.current) === null || _d === void 0 ? void 0 : _d.blur();
+            return;
+        }
+        if (key === "Enter") {
+            e.preventDefault();
+            handleInputBlur();
+            return;
+        }
+        if (key === "Backspace" || key === "Delete") {
+            e.preventDefault();
+            var baseValue = ensureMaskValue();
+            var newValue = baseValue.slice(0, segment.start) + segment.placeholder + baseValue.slice(segment.end);
+            setInputValue(newValue);
+            setIsTyping(true);
+            maskInsertedRef.current = false;
+            segmentInputBufferRef.current = "";
+            updateTempDateFromMask(newValue);
+            requestAnimationFrame(function () { return selectSegment(activeIdx); });
+            return;
+        }
+        if (e.ctrlKey || e.metaKey) {
+            var lowerKey = key.toLowerCase();
+            if (["a", "c", "v", "x"].includes(lowerKey)) {
+                return;
+            }
+        }
+        if (((_e = segment.token) === null || _e === void 0 ? void 0 : _e.toLowerCase()) === "a") {
+            var lower = key.toLowerCase();
+            if (lower === "a" || lower === "p") {
+                e.preventDefault();
+                var value = lower === "a" ? (segment.placeholder.length <= 1 ? "A" : "AM") : (segment.placeholder.length <= 1 ? "P" : "PM");
+                var baseValue = ensureMaskValue();
+                var newValue = baseValue.slice(0, segment.start) + value + baseValue.slice(segment.end);
+                setInputValue(newValue);
+                setIsTyping(true);
+                maskInsertedRef.current = false;
+                segmentInputBufferRef.current = "";
+                updateTempDateFromMask(newValue);
+                requestAnimationFrame(function () { return moveToSegment(activeIdx + 1); });
+                return;
+            }
+            if (key === "ArrowUp" || key === "ArrowDown") {
+                e.preventDefault();
+                var currentValue = ensureMaskValue().slice(segment.start, segment.end).toLowerCase();
+                var next = currentValue === "pm" ? (segment.placeholder.length <= 1 ? "A" : "AM") : (segment.placeholder.length <= 1 ? "P" : "PM");
+                var baseValue = ensureMaskValue();
+                var newValue = baseValue.slice(0, segment.start) + next + baseValue.slice(segment.end);
+                setInputValue(newValue);
+                setIsTyping(true);
+                maskInsertedRef.current = false;
+                segmentInputBufferRef.current = "";
+                updateTempDateFromMask(newValue);
+                requestAnimationFrame(function () { return moveToSegment(activeIdx + 1); });
+                return;
+            }
+            e.preventDefault();
+            return;
+        }
+        if (/^[0-9]$/.test(key)) {
+            e.preventDefault();
+            var baseValue = ensureMaskValue();
+            var placeholderChars_1 = segment.placeholder.split("");
+            var buffer = segmentInputBufferRef.current + key;
+            var normalized = normalizeTimeBuffer(segment.token, buffer, segment.placeholder.length, is12Hour);
+            var activeValue_1 = normalized.value;
+            var completed = normalized.completed;
+            placeholderChars_1.forEach(function (_char, idx) {
+                if (idx < activeValue_1.length) {
+                    placeholderChars_1[idx] = activeValue_1[idx];
+                }
+            });
+            var newSegmentValue = placeholderChars_1.join("");
+            var newValue = baseValue.slice(0, segment.start) + newSegmentValue + baseValue.slice(segment.end);
+            setInputValue(newValue);
+            setIsTyping(true);
+            maskInsertedRef.current = false;
+            updateTempDateFromMask(newValue);
+            if (completed) {
+                segmentInputBufferRef.current = "";
+                var nextIdx = activeIdx + 1;
+                if (nextIdx < tokenSegments.length && inputRef.current) {
+                    var 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_1;
+                var caretStart_1 = segment.start + activeValue_1.length;
+                requestAnimationFrame(function () {
+                    if (inputRef.current) {
+                        inputRef.current.setSelectionRange(caretStart_1, segment.end);
+                    }
+                });
+            }
+            return;
+        }
+        if (key === "ArrowUp" || key === "ArrowDown") {
+            e.preventDefault();
+            return;
+        }
+        if (key === " ") {
+            e.preventDefault();
+            return;
+        }
+        e.preventDefault();
+    };
+    var handlePaste = function (e) {
+        if (!enableMask) {
+            return;
+        }
+        e.preventDefault();
+        var pastedText = e.clipboardData.getData("text").trim();
+        if (!pastedText)
+            return;
+        try {
+            var parsed = (0, date_fns_1.parse)(pastedText, activeFormat, new Date());
+            if ((0, date_fns_1.isValid)(parsed)) {
+                var validated = computeFinalDate(parsed);
+                if (validated) {
+                    var formattedValue_1 = (0, date_fns_1.format)(validated, activeFormat);
+                    setTempDate(validated);
+                    setCurrentMonth(validated);
+                    setInputValue(formattedValue_1);
+                    setIsTyping(true);
+                    setIsMaskActive(true);
+                    maskInsertedRef.current = false;
+                    segmentInputBufferRef.current = "";
+                    updateTempDateFromMask(formattedValue_1);
+                    requestAnimationFrame(function () {
+                        moveToSegment(tokenSegments.length - 1);
+                        if (inputRef.current) {
+                            var length_2 = formattedValue_1.length;
+                            inputRef.current.setSelectionRange(length_2, length_2);
+                        }
+                    });
+                }
+                return;
+            }
+        }
+        catch (_a) { }
+    };
+    var handleInputFocusMask = enableMask ? handleInputFocus : undefined;
+    var handleInputClickMask = enableMask ? handleInputClick : undefined;
+    var handleKeyDownMask = enableMask ? handleKeyDown : undefined;
+    var handlePasteMask = enableMask ? handlePaste : undefined;
+    var displayValue = isTyping
+        ? inputValue
+        : tempDate
+            ? (0, date_fns_1.format)(tempDate, resolvedDateFormat)
+            : "";
+    return (react_1.default.createElement(react_2.FormControl, { id: id, isInvalid: error, isRequired: isRequired, isDisabled: disabled, width: width },
+        label && (react_1.default.createElement(FormLabel_1.TextLabel, { label: label, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })),
+        react_1.default.createElement(react_2.Popover, { isLazy: true, isOpen: isOpen, onClose: function () {
+                if (suppressOnCloseFinalizeRef.current) {
+                    suppressOnCloseFinalizeRef.current = false;
+                    return;
+                }
+                finalize();
+            }, placement: "bottom-start", closeOnBlur: false, returnFocusOnClose: false },
+            react_1.default.createElement(react_2.PopoverTrigger, null,
+                react_1.default.createElement(react_2.Box, { ref: triggerRef, as: "div" },
+                    react_1.default.createElement(react_2.InputGroup, null,
+                        react_1.default.createElement(react_2.Input, { ref: inputRef, id: id, name: name, placeholder: displayPlaceholder, value: displayValue, onChange: handleInputChange, onKeyDown: handleKeyDownMask, onPaste: handlePasteMask, onBlur: handleInputBlur, onClick: handleInputClickMask, onFocus: handleInputFocusMask, isDisabled: disabled, autoComplete: autoComplete, borderColor: error ? (_c = (_b = theme.colors.semantic) === null || _b === void 0 ? void 0 : _b.error) === null || _c === void 0 ? void 0 : _c[500] : undefined, _focus: {
+                                borderColor: error ? (_e = (_d = theme.colors.semantic) === null || _d === void 0 ? void 0 : _d.error) === null || _e === void 0 ? void 0 : _e[500] : theme.colors.primary[500],
+                                boxShadow: error
+                                    ? "0 0 0 1px ".concat((_g = (_f = theme.colors.semantic) === null || _f === void 0 ? void 0 : _f.error) === null || _g === void 0 ? void 0 : _g[500])
+                                    : "0 0 0 1px ".concat(theme.colors.primary[500]),
+                            }, _hover: {
+                                borderColor: error ? (_j = (_h = theme.colors.semantic) === null || _h === void 0 ? void 0 : _h.error) === null || _j === void 0 ? void 0 : _j[500] : undefined,
+                            }, cursor: "text" }),
+                        react_1.default.createElement(react_2.InputRightElement, { pr: 3, pointerEvents: "auto", onClick: function (e) {
+                                e.stopPropagation();
+                                if (!isOpen) {
+                                    handleOpen();
+                                }
+                                else {
+                                    onClose();
+                                }
+                            }, style: { cursor: "pointer" } },
+                            react_1.default.createElement(lucide_react_1.CalendarIcon, { size: 18, color: theme.colors.gray[500] }))))),
+            react_1.default.createElement(react_2.PopoverContent, { width: "auto", p: 4, ref: popoverRef, boxShadow: "lg" },
+                react_1.default.createElement(react_2.PopoverBody, null,
+                    showDate && (react_1.default.createElement(CalendarPanel_1.default, { currentMonth: currentMonth, setCurrentMonth: function (updater) { return setCurrentMonth(function (prev) { return updater(prev); }); }, today: today, isRange: false, tempDate: tempDate, tempRangeStart: null, tempRangeEnd: null, isSameDay: date_fns_1.isSameDay, isBefore: date_fns_1.isBefore, isAfter: date_fns_1.isAfter, minDate: minDate, maxDate: maxDate, disablePastDates: disablePastDates, disableFutureDates: disableFutureDates, disableToday: disableToday, onDaySelect: handleDaySelect })),
+                    showTime && (react_1.default.createElement(react_2.Box, { mt: showDate ? 4 : 0 }, resolvedPickerType === "time" ? (react_1.default.createElement(TimePickerInput_1.TimePickerInput, { value: tempDate, onChange: function (updatedDate) {
+                            setTempDate(updatedDate);
+                            setInputValue(updatedDate ? (0, date_fns_1.format)(updatedDate, resolvedDateFormat) : "");
+                            setIsTyping(false);
+                        }, dateFormat: resolvedDateFormat, disabled: disabled, placeholder: placeholderText })) : (react_1.default.createElement(TimePicker_1.default, { 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: function (updatedDate) {
+                            setTempDate(updatedDate);
+                            setInputValue((0, date_fns_1.format)(updatedDate, resolvedDateFormat));
+                            setIsTyping(false);
+                        } })))),
+                    react_1.default.createElement(react_2.Box, { display: "flex", justifyContent: "space-between", mt: 4, pt: 4, borderTop: "1px solid", borderColor: "gray.200" },
+                        react_1.default.createElement(Button_1.default, { size: "sm", variant: "ghost", onClick: function () {
+                                setTempDate(null);
+                                requestClose(null);
+                            } }, "Clear"),
+                        react_1.default.createElement(Button_1.default, { size: "sm", colorScheme: "primary", onClick: function () { return requestClose(); } }, "OK"))))),
+        error && errorMessage && react_1.default.createElement(ErrorMessage_1.default, { errorMessage: errorMessage }),
+        helperText && !error && react_1.default.createElement(HelperText_1.default, { helperText: helperText })));
+};
+exports.SingleDatePicker = SingleDatePicker;
+exports.default = exports.SingleDatePicker;