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

package/dist/Components/DatePicker/SingleDatePicker.js

@@ -37,22 +37,31 @@ var __importDefault = (this && this.__importDefault) || function (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 textInputIconSize_1 = require("../Input/textInputIconSize");
-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();
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const date_fns_1 = require("date-fns");
+const lucide_react_1 = require("lucide-react");
+const Button_1 = __importDefault(require("../Button/Button"));
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const surfaceRaised_1 = require("../../Theme/tokens/builders/surfaceRaised");
+const controlSizes_1 = require("../../Theme/tokens/primitives/controlSizes");
+const textInputIconSize_1 = require("../Input/textInputIconSize");
+const DatePickerProps_1 = require("./DatePickerProps");
+const valueFormat_1 = require("./valueFormat");
+const FormLabel_1 = require("../Common/FormLabel");
+const FieldMessage_1 = __importDefault(require("../Common/FieldMessage"));
+const useFieldIds_1 = require("../Common/useFieldIds");
+const pickerField_1 = require("./pickerField");
+const TimePicker_1 = __importDefault(require("./TimePicker"));
+const TimePickerInput_1 = require("./TimePickerInput");
+const CalendarPanel_1 = __importDefault(require("./CalendarPanel"));
+const PickerPortal_1 = __importStar(require("./PickerPortal"));
+const useExclusiveOverlay_1 = require("../../Hooks/useExclusiveOverlay");
+const useOutsideMouseDown_1 = require("../../Hooks/useOutsideMouseDown");
+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));
@@ -73,24 +82,24 @@ var getPlaceholderForToken = function (token, length) {
             return token.repeat(length);
     }
 };
-var buildFormatSegments = function (format) {
-    var segments = [];
-    var cursor = 0;
-    var i = 0;
+const buildFormatSegments = (format) => {
+    const segments = [];
+    let cursor = 0;
+    let i = 0;
     while (i < format.length) {
-        var char = format[i];
+        const char = format[i];
         if (TOKEN_CHARS.test(char)) {
-            var j = i + 1;
+            let j = i + 1;
             while (j < format.length && format[j] === char) {
                 j++;
             }
-            var length_1 = j - i;
-            var placeholder = getPlaceholderForToken(char, length_1);
-            var segment = {
+            const length = j - i;
+            const placeholder = getPlaceholderForToken(char, length);
+            const segment = {
                 type: "token",
                 token: char,
-                length: length_1,
-                placeholder: placeholder,
+                length,
+                placeholder,
                 placeholderChar: placeholder.charAt(0) || char,
                 start: cursor,
                 end: cursor + placeholder.length,
@@ -100,7 +109,7 @@ var buildFormatSegments = function (format) {
             i = j;
         }
         else {
-            var literalSegment = {
+            const literalSegment = {
                 type: "literal",
                 length: 1,
                 placeholder: char,
@@ -116,50 +125,40 @@ var buildFormatSegments = function (format) {
     }
     return segments;
 };
-var buildTimeSegments = function (format) {
+const buildTimeSegments = (format) => {
     var _a;
-    var m = format.match(/^(h{1,2}|H{1,2}):m{1,2}(?:\s*a{1,2})?$/i);
+    const 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);
+    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;
-    var minuteLength = (((_a = format.match(/:m{1,2}/)) === null || _a === void 0 ? void 0 : _a[0].length) || 2) - 1;
-    var minutePlaceholder = getPlaceholderForToken("m", minuteLength);
+    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;
-    var ampmMatch = format.match(/\s*a{1,2}$/);
+    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;
-        var aLen = ampmMatch[0].trim().length;
-        var aPlaceholder = getPlaceholderForToken("a", aLen);
+        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;
 };
-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));
+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(function (char) {
+        .filter((char) => {
         if (/[0-9]/.test(char))
             return true;
         if (uniqueSeparators.includes(char))
@@ -170,14 +169,14 @@ var filterNumericInput = function (value, format) {
     })
         .join("");
 };
-var getFormatForPickerType = function (pickerType, dateFormat) {
+const getFormatForPickerType = (pickerType, dateFormat) => {
     if (!pickerType) {
         return dateFormat;
     }
     if (pickerType === "date") {
-        var hasTime = /[hHmsSaA]/.test(dateFormat);
+        const hasTime = /[hHmsSaA]/.test(dateFormat);
         if (hasTime) {
-            var dateMatch = dateFormat.match(/^([^hHmsSaA]+?)(?:\s*[hHmsSaA])/);
+            const dateMatch = dateFormat.match(/^([^hHmsSaA]+?)(?:\s*[hHmsSaA])/);
             if (dateMatch && dateMatch[1]) {
                 return dateMatch[1].trim();
             }
@@ -185,10 +184,10 @@ var getFormatForPickerType = function (pickerType, dateFormat) {
         return dateFormat;
     }
     if (pickerType === "time") {
-        var hasDate = /[dDmMyY]/.test(dateFormat);
+        const hasDate = /[dDmMyY]/.test(dateFormat);
         if (hasDate) {
             // eslint-disable-next-line no-useless-escape
-            var timeMatch = dateFormat.match(/[dDmMyY\/\-\s\.]+\s*([hHmsSaA\/\-\s:]+)$/);
+            const timeMatch = dateFormat.match(/[dDmMyY\/\-\s\.]+\s*([hHmsSaA\/\-\s:]+)$/);
             if (timeMatch && timeMatch[1]) {
                 return timeMatch[1].trim();
             }
@@ -197,44 +196,26 @@ var getFormatForPickerType = function (pickerType, dateFormat) {
     }
     return dateFormat;
 };
-// const usesAmPm = (format: string): boolean => /(^|[^a-zA-Z])a([^a-zA-Z]|$)/i.test(format);
-// const sanitizeTimeInput = (raw: string, format: string): string => {
-//   const ampm = usesAmPm(format);
-//   const 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)) {
-//     const digits = only.replace(/[^0-9]/g, "");
-//     const hh = digits.slice(0, 2);
-//     const mm = digits.slice(2, 4);
-//     let out = hh;
-//     if (mm.length) out += ":" + mm;
-//     if (ampm) {
-//       const suffix = (only.match(/(am|pm)/i)?.[0] || "").toUpperCase();
-//       if (suffix) out += " " + suffix;
-//     }
-//     return out;
-//   }
-//   return only;
-// };
-var normalizeTimeBuffer = function (tokenChar, rawBuffer, segmentLength, is12Hour) {
+const normalizeTimeBuffer = (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);
+    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) {
-            var d = parseInt(buf[0], 10);
-            var firstMax = is12Hour ? 1 : 2;
+            const d = parseInt(buf[0], 10);
+            const firstMax = is12Hour ? 1 : 2;
             if (d > firstMax) {
-                return { value: "0".concat(d), completed: true };
+                return { value: `0${d}`, completed: true };
             }
             return { value: buf, completed: false };
         }
         if (buf.length === 2) {
-            var h = parseInt(buf, 10);
+            let h = parseInt(buf, 10);
             if (is12Hour) {
                 if (h < 1)
                     h = 1;
@@ -247,15 +228,15 @@ var normalizeTimeBuffer = function (tokenChar, rawBuffer, segmentLength, is12Hou
                 if (h > 24)
                     h = 24;
             }
-            var out = h.toString().padStart(2, "0");
+            const out = h.toString().padStart(2, "0");
             return { value: out, completed: true };
         }
     }
     if (t === "m") {
         if (buf.length === 1) {
-            var d = parseInt(buf[0], 10);
+            const d = parseInt(buf[0], 10);
             if (d > 5) {
-                return { value: "0".concat(d), completed: true };
+                return { value: `0${d}`, completed: true };
             }
             if (d === 0) {
                 return { value: "01", completed: true };
@@ -263,59 +244,65 @@ var normalizeTimeBuffer = function (tokenChar, rawBuffer, segmentLength, is12Hou
             return { value: buf, completed: false };
         }
         if (buf.length === 2) {
-            var m = parseInt(buf, 10);
+            let m = parseInt(buf, 10);
             if (m < 1)
                 m = 1;
             if (m > 60)
                 m = 60;
-            var out = m.toString().padStart(2, "0");
+            const 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, _k;
-    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, _l = props.dateFormat, dateFormat = _l === void 0 ? "dd/MM/yyyy" : _l, pickerType = props.pickerType, minDate = props.minDate, maxDate = props.maxDate, disableFutureDates = props.disableFutureDates, disablePastDates = props.disablePastDates, _m = props.autoComplete, autoComplete = _m === void 0 ? "off" : _m, disabled = props.disabled, _o = props.width, width = _o === void 0 ? "100%" : _o, _p = props.disableToday, disableToday = _p === void 0 ? false : _p, _q = props.size, size = _q === void 0 ? "md" : _q;
-    var theme = (0, useCustomTheme_1.useCustomTheme)();
-    var sizeKey = typeof size === "string" ? size : "md";
-    var calendarIconPx = (0, textInputIconSize_1.getTextInputIconSizePx)(sizeKey);
-    var calendarIconWrapperSx = (0, textInputIconSize_1.getTextInputIconWrapperSx)(sizeKey);
-    var _r = (0, react_2.useDisclosure)(), isOpen = _r.isOpen, onOpen = _r.onOpen, onClose = _r.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 () {
+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 = controlSizes_1.DEFAULT_CONTROL_SIZE, } = props;
+    const { isDisabled: disabled, placeholder: placeholderText } = (0, pickerField_1.resolvePickerAliases)(props);
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const sizeKey = typeof size === "string" ? size : controlSizes_1.DEFAULT_CONTROL_SIZE;
+    const ids = (0, useFieldIds_1.useFieldIds)(id, { error, errorMessage, helperText });
+    const calendarIconPx = (0, textInputIconSize_1.getTextInputIconSizePx)(sizeKey);
+    const calendarIconWrapperSx = (0, textInputIconSize_1.getTextInputIconWrapperSx)(sizeKey);
+    const { isOpen, onOpen, onClose } = (0, react_2.useDisclosure)();
+    const requestExclusiveOpen = (0, useExclusiveOverlay_1.useExclusiveOverlay)(isOpen, onClose);
+    const pickerPortal = (0, PickerPortal_1.usePickerPortal)(isOpen);
+    const calendarLabel = label !== null && label !== void 0 ? label : "Choose date";
+    const inputRef = (0, react_1.useRef)(null);
+    const mergedInputRef = (0, react_2.useMergeRefs)(inputRef, ref);
+    const popoverRef = (0, react_1.useRef)(null);
+    const triggerRef = (0, react_1.useRef)(null);
+    const resolvedPickerType = pickerType !== null && pickerType !== void 0 ? pickerType : (0, pickerField_1.inferPickerTypeFromFormat)(dateFormat);
+    const resolvedDateFormat = getFormatForPickerType(pickerType, dateFormat);
+    const enableMask = resolvedPickerType !== "time";
+    const basePlaceholder = (0, react_1.useMemo)(() => formatToPlaceholder(dateFormat), [dateFormat]);
+    const timeEffectiveFormat = (0, react_1.useMemo)(() => {
         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);
+            const hasLowerH = /h{1,2}/.test(resolvedDateFormat);
+            const hasAmPm = /(^|[^a-zA-Z])a([^a-zA-Z]|$)/i.test(resolvedDateFormat);
             if (hasLowerH && !hasAmPm)
-                return "".concat(resolvedDateFormat, " a");
+                return `${resolvedDateFormat} a`;
         }
         return resolvedDateFormat;
     }, [pickerType, resolvedPickerType, resolvedDateFormat]);
-    var activeFormat = timeEffectiveFormat;
-    var formatSegments = (0, react_1.useMemo)(function () {
+    const activeFormat = timeEffectiveFormat;
+    const formatSegments = (0, react_1.useMemo)(() => {
         if (!enableMask)
             return [];
-        var expectHourFirst = /^(h{1,2}|H{1,2}):m{1,2}(?:\s*a{1,2})?$/i.test(activeFormat);
+        const expectHourFirst = /^(h{1,2}|H{1,2}):m{1,2}(?:\s*a{1,2})?$/i.test(activeFormat);
         if (expectHourFirst) {
-            var ts = buildTimeSegments(activeFormat);
+            const 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 () {
+    const tokenSegments = (0, react_1.useMemo)(() => (enableMask ? formatSegments.filter((segment) => segment.type === "token") : []), [enableMask, formatSegments]);
+    const maskPlaceholder = (0, react_1.useMemo)(() => {
         if (!enableMask) {
             return basePlaceholder;
         }
-        var built = formatSegments.map(function (segment) { return segment.placeholder; }).join("");
+        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))
@@ -324,52 +311,60 @@ var SingleDatePicker = function (props) {
             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 _s = (0, react_1.useState)(selectedDate
+    const displayPlaceholder = placeholderText || (enableMask ? maskPlaceholder : basePlaceholder);
+    const didCommitRef = (0, react_1.useRef)(false);
+    const suppressOnCloseFinalizeRef = (0, react_1.useRef)(false);
+    const pendingSegmentNavigationRef = (0, react_1.useRef)(null);
+    const restoreSelectionRef = (0, react_1.useRef)(null);
+    const segmentInputBufferRef = (0, react_1.useRef)("");
+    const maskInsertedRef = (0, react_1.useRef)(false);
+    const today = new Date();
+    const tomorrow = (0, date_fns_1.addDays)(today, 1);
+    const showDate = resolvedPickerType === "date" || resolvedPickerType === "datetime";
+    const showTime = resolvedPickerType === "time" || resolvedPickerType === "datetime";
+    const resolvedFormatHasTime = (0, pickerField_1.formatHasTime)(resolvedDateFormat);
+    const rawIsoValue = (0, DatePickerProps_1.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 = (0, react_1.useMemo)(() => (rawIsoValue ? (0, valueFormat_1.parseIsoValue)(rawIsoValue, resolvedPickerType) : null), [rawIsoValue, resolvedPickerType]);
+    const selectedDate = (0, DatePickerProps_1.isStringValueProps)(props)
+        ? parsedIsoValue
+        : (_d = (_c = props.value) !== null && _c !== void 0 ? _c : props.selectedDate) !== null && _d !== void 0 ? _d : null;
+    const [currentMonth, setCurrentMonth] = (0, react_1.useState)(selectedDate
         ? disableToday && (0, date_fns_1.isSameDay)(selectedDate, today)
             ? tomorrow
             : selectedDate
         : disableToday
             ? tomorrow
-            : today), currentMonth = _s[0], setCurrentMonth = _s[1];
-    var _t = (0, react_1.useState)(selectedDate !== null && selectedDate !== void 0 ? selectedDate : null), tempDate = _t[0], setTempDate = _t[1];
-    var _u = (0, react_1.useState)(""), inputValue = _u[0], setInputValue = _u[1];
-    var _v = (0, react_1.useState)(false), isTyping = _v[0], setIsTyping = _v[1];
-    var _w = (0, react_1.useState)(false), isMaskActive = _w[0], setIsMaskActive = _w[1];
-    var _x = (0, react_1.useState)(0), setCurrentSegmentIndex = _x[1];
-    var lastSegmentIndexRef = (0, react_1.useRef)(0);
-    var resetCommitGuardAndOpen = function () {
+            : today);
+    const [tempDate, setTempDate] = (0, react_1.useState)(selectedDate !== null && selectedDate !== void 0 ? selectedDate : null);
+    const [inputValue, setInputValue] = (0, react_1.useState)("");
+    const [isTyping, setIsTyping] = (0, react_1.useState)(false);
+    const [isMaskActive, setIsMaskActive] = (0, react_1.useState)(false);
+    const [, setCurrentSegmentIndex] = (0, react_1.useState)(0);
+    const lastSegmentIndexRef = (0, react_1.useRef)(0);
+    const resetCommitGuardAndOpen = () => {
         didCommitRef.current = false;
         suppressOnCloseFinalizeRef.current = false;
         onOpen();
     };
-    var commitOnce = function (value) {
+    const commitOnce = (value) => {
         if (didCommitRef.current)
             return;
         didCommitRef.current = true;
-        props.onChange(value);
+        if ((0, DatePickerProps_1.isStringValueProps)(props)) {
+            props.onChange(value ? (0, valueFormat_1.formatIsoValue)(value, resolvedPickerType) : null);
+        }
+        else {
+            props.onChange(value);
+        }
     };
-    var finalize = function (overrideValue) {
+    const finalize = (overrideValue) => {
         if (enableMask) {
             maskInsertedRef.current = false;
             segmentInputBufferRef.current = "";
             setIsMaskActive(false);
         }
-        var value = overrideValue !== undefined ? overrideValue : tempDate;
+        const value = overrideValue !== undefined ? overrideValue : tempDate;
         if (value) {
             setInputValue((0, date_fns_1.format)(value, activeFormat));
         }
@@ -379,12 +374,12 @@ var SingleDatePicker = function (props) {
         commitOnce(value !== null && value !== void 0 ? value : null);
         setIsTyping(false);
     };
-    var requestClose = function (overrideValue) {
+    const requestClose = (overrideValue) => {
         suppressOnCloseFinalizeRef.current = true;
         finalize(overrideValue);
         onClose();
     };
-    (0, react_1.useEffect)(function () {
+    (0, react_1.useEffect)(() => {
         if (selectedDate instanceof Date) {
             setTempDate(new Date(selectedDate));
             setInputValue((0, date_fns_1.format)(selectedDate, activeFormat));
@@ -394,41 +389,45 @@ var SingleDatePicker = function (props) {
             setInputValue("");
         }
     }, [selectedDate, activeFormat]);
-    (0, react_1.useEffect)(function () {
+    (0, react_1.useEffect)(() => {
         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;
+            const { start, end } = restoreSelectionRef.current;
+            const inputEl = inputRef.current;
             if (document.activeElement === inputEl) {
                 try {
-                    inputEl.setSelectionRange(start_1, end_1);
+                    inputEl.setSelectionRange(start, end);
+                }
+                catch (error) {
+                    console.error("Error setting selection range:", error);
                 }
-                catch (e) { }
             }
-            var restore_1 = function () {
+            const restore = () => {
                 if (inputRef.current && document.activeElement === inputRef.current) {
                     try {
-                        inputRef.current.setSelectionRange(start_1, end_1);
+                        inputRef.current.setSelectionRange(start, end);
+                    }
+                    catch (error) {
+                        console.error("Error setting selection range:", error);
                     }
-                    catch (e) { }
                 }
             };
-            Promise.resolve().then(restore_1);
-            requestAnimationFrame(restore_1);
-            requestAnimationFrame(function () { return requestAnimationFrame(restore_1); });
+            Promise.resolve().then(restore);
+            requestAnimationFrame(restore);
+            requestAnimationFrame(() => requestAnimationFrame(restore));
         }
     });
-    (0, react_1.useLayoutEffect)(function () {
+    (0, react_1.useLayoutEffect)(() => {
         if (!enableMask || !isMaskActive || !inputRef.current)
             return;
         if (pendingSegmentNavigationRef.current !== null) {
-            var targetIdx = pendingSegmentNavigationRef.current;
+            const targetIdx = pendingSegmentNavigationRef.current;
             pendingSegmentNavigationRef.current = null;
             if (targetIdx >= 0 && targetIdx < tokenSegments.length) {
-                var segment = tokenSegments[targetIdx];
+                const segment = tokenSegments[targetIdx];
                 restoreSelectionRef.current = { start: segment.start, end: segment.end };
                 setCurrentSegmentIndex(targetIdx);
                 lastSegmentIndexRef.current = targetIdx;
@@ -438,7 +437,8 @@ var SingleDatePicker = function (props) {
             }
         }
     }, [inputValue, tokenSegments, enableMask, isMaskActive]);
-    var handleOpen = function () {
+    const handleOpen = () => {
+        requestExclusiveOpen();
         if (!selectedDate && showDate) {
             setTempDate(disableToday ? tomorrow : new Date());
         }
@@ -447,11 +447,11 @@ var SingleDatePicker = function (props) {
         }
         resetCommitGuardAndOpen();
     };
-    var handleInputChange = function (e) {
+    const handleInputChange = (e) => {
         if (enableMask && isMaskActive) {
             return;
         }
-        var value = e.target.value;
+        let value = e.target.value;
         value = filterNumericInput(value, resolvedDateFormat);
         setInputValue(value);
         setIsTyping(true);
@@ -462,24 +462,28 @@ var SingleDatePicker = function (props) {
             return;
         }
         try {
-            var parsed = (0, date_fns_1.parse)(value, resolvedDateFormat, new Date());
+            const parsed = (0, date_fns_1.parse)(value, resolvedDateFormat, new Date());
             if ((0, date_fns_1.isValid)(parsed)) {
-                var finalDate = parsed;
-                if (showTime && tempDate && !formatHasTime) {
+                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 (_a) { }
+        catch (error) {
+            console.error("Error parsing input:", error);
+        }
     };
-    var handleInputBlur = function () {
-        var value = inputValue;
+    const handleInputBlur = () => {
+        const value = inputValue;
         if (enableMask && isMaskActive) {
             setIsMaskActive(false);
             segmentInputBufferRef.current = "";
-            if (!value || !value.trim() || !isMaskComplete(value)) {
+            // 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);
@@ -495,9 +499,9 @@ var SingleDatePicker = function (props) {
             return;
         }
         try {
-            var parsed = (0, date_fns_1.parse)(value, resolvedDateFormat, new Date());
+            const parsed = (0, date_fns_1.parse)(value, resolvedDateFormat, new Date());
             if ((0, date_fns_1.isValid)(parsed)) {
-                var validated = computeFinalDate(parsed);
+                const validated = computeFinalDate(parsed);
                 if (validated) {
                     setTempDate(validated);
                     setCurrentMonth(validated);
@@ -508,7 +512,9 @@ var SingleDatePicker = function (props) {
                 }
             }
         }
-        catch (_a) { }
+        catch (error) {
+            console.error("Error parsing input:", error);
+        }
         if (tempDate) {
             setInputValue((0, date_fns_1.format)(tempDate, resolvedDateFormat));
         }
@@ -519,12 +525,12 @@ var SingleDatePicker = function (props) {
         }
         maskInsertedRef.current = false;
     };
-    var handleDaySelect = function (day) {
-        var updated = new Date(day);
+    const handleDaySelect = (day) => {
+        let updated = new Date(day);
         if (disableToday && (0, date_fns_1.isSameDay)(updated, today)) {
             updated = tomorrow;
         }
-        var updatedDate = tempDate
+        const updatedDate = tempDate
             ? new Date(updated.getFullYear(), updated.getMonth(), updated.getDate(), tempDate.getHours(), tempDate.getMinutes(), tempDate.getSeconds())
             : updated;
         setTempDate(updatedDate);
@@ -534,33 +540,16 @@ var SingleDatePicker = function (props) {
             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, tempDate, activeFormat]); // eslint-disable-line react-hooks/exhaustive-deps
-    var ensureMaskValue = (0, react_1.useCallback)(function () {
+    (0, useOutsideMouseDown_1.useOutsideMouseDown)([popoverRef, inputRef, triggerRef], () => {
+        finalize();
+        onClose();
+    }, { enabled: isOpen, capture: true, includeClick: true });
+    const ensureMaskValue = (0, react_1.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;
         }
-        var currentValue = (_d = (_c = inputRef.current) === null || _c === void 0 ? void 0 : _c.value) !== null && _d !== void 0 ? _d : 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);
@@ -568,18 +557,18 @@ var SingleDatePicker = function (props) {
         }
         return currentValue;
     }, [enableMask, inputRef, inputValue, maskPlaceholder]);
-    var selectSegment = (0, react_1.useCallback)(function (index) {
+    const selectSegment = (0, react_1.useCallback)((index) => {
         if (!enableMask || tokenSegments.length === 0)
             return;
-        var clamped = Math.max(0, Math.min(tokenSegments.length - 1, index));
-        var segment = tokenSegments[clamped];
+        const clamped = Math.max(0, Math.min(tokenSegments.length - 1, index));
+        const segment = tokenSegments[clamped];
         setCurrentSegmentIndex(clamped);
         lastSegmentIndexRef.current = clamped;
         segmentInputBufferRef.current = "";
-        var inputEl = inputRef.current;
+        const inputEl = inputRef.current;
         if (!inputEl)
             return;
-        var currentValue = inputEl.value;
+        let currentValue = inputEl.value;
         if (!currentValue || currentValue.length === 0) {
             currentValue = inputValue || maskPlaceholder;
             if (inputEl.value !== currentValue) {
@@ -589,62 +578,62 @@ var SingleDatePicker = function (props) {
             maskInsertedRef.current = !inputValue;
         }
         else if (currentValue.length !== maskPlaceholder.length) {
-            var preservedSegments_1 = [];
-            formatSegments.forEach(function (seg) {
+            const preservedSegments = [];
+            formatSegments.forEach((seg) => {
                 if (seg.start < currentValue.length) {
-                    var segValue = currentValue.slice(seg.start, Math.min(seg.end, 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_1.push(segValue.padEnd(seg.placeholder.length, seg.placeholderChar));
+                        preservedSegments.push(segValue.padEnd(seg.placeholder.length, seg.placeholderChar));
                     }
                     else if (seg.type === "literal") {
-                        preservedSegments_1.push(seg.placeholder);
+                        preservedSegments.push(seg.placeholder);
                     }
                     else {
-                        preservedSegments_1.push(seg.placeholder);
+                        preservedSegments.push(seg.placeholder);
                     }
                 }
                 else {
-                    preservedSegments_1.push(seg.placeholder);
+                    preservedSegments.push(seg.placeholder);
                 }
             });
-            currentValue = preservedSegments_1.join("");
+            currentValue = preservedSegments.join("");
             inputEl.value = currentValue;
             setInputValue(currentValue);
         }
         inputEl.focus({ preventScroll: true });
         inputEl.setSelectionRange(segment.start, segment.end);
-        requestAnimationFrame(function () {
+        requestAnimationFrame(() => {
             if (inputRef.current) {
                 inputRef.current.setSelectionRange(segment.start, segment.end);
             }
         });
     }, [enableMask, maskPlaceholder, tokenSegments, formatSegments, inputValue]);
-    var moveToSegment = (0, react_1.useCallback)(function (nextIndex) {
+    const moveToSegment = (0, react_1.useCallback)((nextIndex) => {
         if (!enableMask || !tokenSegments.length)
             return;
-        var clamped = Math.max(0, Math.min(tokenSegments.length - 1, nextIndex));
+        const clamped = Math.max(0, Math.min(tokenSegments.length - 1, nextIndex));
         selectSegment(clamped);
     }, [enableMask, selectSegment, tokenSegments.length]);
-    var getTokenIndexForCaret = function (caret, tokens) {
+    const getTokenIndexForCaret = (caret, tokens) => {
         if (tokens.length === 0)
             return 0;
-        var insideIdx = tokens.findIndex(function (t) { return caret >= t.start && caret <= t.end; });
+        const insideIdx = tokens.findIndex((t) => caret >= t.start && caret <= t.end);
         if (insideIdx >= 0)
             return insideIdx;
-        var toRight = tokens.findIndex(function (t) { return caret < t.end; });
+        const toRight = tokens.findIndex((t) => caret < t.end);
         if (toRight >= 0)
             return toRight;
         return tokens.length - 1;
     };
-    var isSegmentComplete = function (segment, value) {
+    const isSegmentComplete = (segment, value) => {
         var _a;
         if (segment.type === "literal")
             return true;
-        var token = (_a = segment.token) === null || _a === void 0 ? void 0 : _a.toLowerCase();
+        const token = (_a = segment.token) === null || _a === void 0 ? void 0 : _a.toLowerCase();
         if (!token)
             return true;
         if (token === "a") {
-            var normalized = value.trim().toLowerCase();
+            const normalized = value.trim().toLowerCase();
             if (segment.placeholder.length <= 1) {
                 return normalized === "a" || normalized === "p";
             }
@@ -652,15 +641,15 @@ var SingleDatePicker = function (props) {
         }
         return /^\d+$/.test(value) && value.length === segment.placeholder.length;
     };
-    var isMaskComplete = function (value) {
+    const isMaskComplete = (value) => {
         if (!value || value.length !== maskPlaceholder.length)
             return false;
-        return tokenSegments.every(function (segment) {
-            var segmentValue = value.slice(segment.start, segment.end);
+        return tokenSegments.every((segment) => {
+            const segmentValue = value.slice(segment.start, segment.end);
             return isSegmentComplete(segment, segmentValue);
         });
     };
-    var computeFinalDate = function (parsed) {
+    const computeFinalDate = (parsed) => {
         if (minDate && (0, date_fns_1.isBefore)(parsed, minDate))
             return null;
         if (maxDate && (0, date_fns_1.isAfter)(parsed, maxDate))
@@ -671,29 +660,46 @@ var SingleDatePicker = function (props) {
             return null;
         if (disableToday && (0, date_fns_1.isSameDay)(parsed, today))
             return null;
-        var finalDate = parsed;
-        if (showTime && tempDate && !formatHasTime) {
+        let finalDate = parsed;
+        if (showTime && tempDate && !resolvedFormatHasTime) {
             finalDate = new Date(parsed.getFullYear(), parsed.getMonth(), parsed.getDate(), tempDate.getHours(), tempDate.getMinutes(), tempDate.getSeconds());
         }
         return finalDate;
     };
-    var updateTempDateFromMask = function (value) {
+    // 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 = (0, date_fns_1.parse)(value, resolvedDateFormat, new Date());
+            if ((0, date_fns_1.isValid)(parsed)) {
+                return computeFinalDate(parsed);
+            }
+        }
+        catch (error) {
+            console.error("Error parsing input:", error);
+        }
+        return null;
+    };
+    const updateTempDateFromMask = (value) => {
         if (!isMaskComplete(value)) {
             return;
         }
         try {
-            var parsed = (0, date_fns_1.parse)(value, resolvedDateFormat, new Date());
+            const parsed = (0, date_fns_1.parse)(value, resolvedDateFormat, new Date());
             if ((0, date_fns_1.isValid)(parsed)) {
-                var validated = computeFinalDate(parsed);
+                const validated = computeFinalDate(parsed);
                 if (validated) {
                     setTempDate(validated);
                     setCurrentMonth(validated);
                 }
             }
         }
-        catch (_a) { }
+        catch (error) {
+            console.error("Error parsing input:", error);
+        }
     };
-    var handleInputFocus = function (e) {
+    const handleInputFocus = (e) => {
         if (!enableMask) {
             return;
         }
@@ -702,7 +708,9 @@ var SingleDatePicker = function (props) {
             return;
         setIsMaskActive(true);
         setIsTyping(true);
-        if (!inputValue || inputValue.length !== maskPlaceholder.length) {
+        // 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;
         }
@@ -710,9 +718,9 @@ var SingleDatePicker = function (props) {
             maskInsertedRef.current = false;
         }
         segmentInputBufferRef.current = "";
-        requestAnimationFrame(function () { return selectSegment(0); });
+        requestAnimationFrame(() => selectSegment(0));
     };
-    var handleInputClick = function (e) {
+    const handleInputClick = (e) => {
         var _a;
         if (!enableMask) {
             return;
@@ -723,56 +731,60 @@ var SingleDatePicker = function (props) {
         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; });
+        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(function () { return selectSegment(index); });
+            requestAnimationFrame(() => selectSegment(index));
         }
     };
-    var handleKeyDown = function (e) {
+    const handleKeyDown = (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;
+        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);
-        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];
+        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();
-            var delta = key === "ArrowRight" ? 1 : -1;
-            var nextIdx = activeIdx + delta;
+            const delta = key === "ArrowRight" ? 1 : -1;
+            const 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 };
+                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_1.start, targetSegment_1.end);
+                        inputRef.current.setSelectionRange(targetSegment.start, targetSegment.end);
                     }
-                    catch (error) { }
-                    requestAnimationFrame(function () {
+                    catch (error) {
+                        console.error("Error setting selection range:", error);
+                    }
+                    requestAnimationFrame(() => {
                         if (inputRef.current) {
                             try {
-                                inputRef.current.setSelectionRange(targetSegment_1.start, targetSegment_1.end);
+                                inputRef.current.setSelectionRange(targetSegment.start, targetSegment.end);
+                            }
+                            catch (error) {
+                                console.error("Error setting selection range:", error);
                             }
-                            catch (error) { }
                         }
                     });
                 }
@@ -791,59 +803,73 @@ var SingleDatePicker = function (props) {
         }
         if (key === "Escape") {
             e.preventDefault();
-            (_d = inputRef.current) === null || _d === void 0 ? void 0 : _d.blur();
+            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();
-            var baseValue = ensureMaskValue();
-            var newValue = baseValue.slice(0, segment.start) + segment.placeholder + baseValue.slice(segment.end);
+            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(function () { return selectSegment(activeIdx); });
+            requestAnimationFrame(() => selectSegment(activeIdx));
             return;
         }
         if (e.ctrlKey || e.metaKey) {
-            var lowerKey = key.toLowerCase();
+            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") {
-            var lower = key.toLowerCase();
+            const 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);
+                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(function () { return moveToSegment(activeIdx + 1); });
+                requestAnimationFrame(() => 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);
+                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(function () { return moveToSegment(activeIdx + 1); });
+                requestAnimationFrame(() => moveToSegment(activeIdx + 1));
                 return;
             }
             e.preventDefault();
@@ -851,28 +877,28 @@ var SingleDatePicker = function (props) {
         }
         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];
+            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];
                 }
             });
-            var newSegmentValue = placeholderChars_1.join("");
-            var newValue = baseValue.slice(0, segment.start) + newSegmentValue + baseValue.slice(segment.end);
+            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 = "";
-                var nextIdx = activeIdx + 1;
+                const nextIdx = activeIdx + 1;
                 if (nextIdx < tokenSegments.length && inputRef.current) {
-                    var nextSegment = tokenSegments[nextIdx];
+                    const nextSegment = tokenSegments[nextIdx];
                     pendingSegmentNavigationRef.current = nextIdx;
                     restoreSelectionRef.current = { start: nextSegment.start, end: nextSegment.end };
                     inputRef.current.value = newValue;
@@ -881,11 +907,11 @@ var SingleDatePicker = function (props) {
                 }
             }
             else {
-                segmentInputBufferRef.current = activeValue_1;
-                var caretStart_1 = segment.start + activeValue_1.length;
-                requestAnimationFrame(function () {
+                segmentInputBufferRef.current = activeValue;
+                const caretStart = segment.start + activeValue.length;
+                requestAnimationFrame(() => {
                     if (inputRef.current) {
-                        inputRef.current.setSelectionRange(caretStart_1, segment.end);
+                        inputRef.current.setSelectionRange(caretStart, segment.end);
                     }
                 });
             }
@@ -901,101 +927,95 @@ var SingleDatePicker = function (props) {
         }
         e.preventDefault();
     };
-    var handlePaste = function (e) {
+    const handlePaste = (e) => {
         if (!enableMask) {
             return;
         }
         e.preventDefault();
-        var pastedText = e.clipboardData.getData("text").trim();
+        const pastedText = e.clipboardData.getData("text").trim();
         if (!pastedText)
             return;
         try {
-            var parsed = (0, date_fns_1.parse)(pastedText, activeFormat, new Date());
+            const parsed = (0, date_fns_1.parse)(pastedText, activeFormat, new Date());
             if ((0, date_fns_1.isValid)(parsed)) {
-                var validated = computeFinalDate(parsed);
+                const validated = computeFinalDate(parsed);
                 if (validated) {
-                    var formattedValue_1 = (0, date_fns_1.format)(validated, activeFormat);
+                    const formattedValue = (0, date_fns_1.format)(validated, activeFormat);
                     setTempDate(validated);
                     setCurrentMonth(validated);
-                    setInputValue(formattedValue_1);
+                    setInputValue(formattedValue);
                     setIsTyping(true);
                     setIsMaskActive(true);
                     maskInsertedRef.current = false;
                     segmentInputBufferRef.current = "";
-                    updateTempDateFromMask(formattedValue_1);
-                    requestAnimationFrame(function () {
+                    updateTempDateFromMask(formattedValue);
+                    requestAnimationFrame(() => {
                         moveToSegment(tokenSegments.length - 1);
                         if (inputRef.current) {
-                            var length_2 = formattedValue_1.length;
-                            inputRef.current.setSelectionRange(length_2, length_2);
+                            const length = formattedValue.length;
+                            inputRef.current.setSelectionRange(length, length);
                         }
                     });
                 }
                 return;
             }
         }
-        catch (_a) { }
+        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);
     };
-    var handleInputFocusMask = enableMask ? handleInputFocus : undefined;
-    var handleInputClickMask = enableMask ? handleInputClick : undefined;
-    var handleKeyDownMask = enableMask ? handleKeyDown : undefined;
-    var handlePasteMask = enableMask ? handlePaste : undefined;
-    var displayValue = isTyping
+    const displayValue = isTyping
         ? inputValue
         : tempDate
             ? (0, date_fns_1.format)(tempDate, resolvedDateFormat)
             : "";
-    return (react_1.default.createElement(react_2.FormControl, { id: id, 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, { size: sizeKey },
-                        react_1.default.createElement(react_2.Input, { ref: inputRef, id: id, name: name, size: sizeKey, 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 0.125rem ".concat((_f = theme.colors.boxShadow) === null || _f === void 0 ? void 0 : _f.error)
-                                    : "0 0 0 0.125rem ".concat((_g = theme.colors.boxShadow) === null || _g === void 0 ? void 0 : _g.primary),
-                            }, _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", boxShadow: error ? "0 0 0 0.125rem ".concat((_k = theme.colors.boxShadow) === null || _k === void 0 ? void 0 : _k.error) : "" }),
-                        react_1.default.createElement(react_2.InputRightElement, { pr: 3, height: "100%", display: "flex", alignItems: "center", pointerEvents: "auto", onClick: function (e) {
-                                e.stopPropagation();
-                                if (!isOpen) {
-                                    handleOpen();
-                                }
-                                else {
-                                    onClose();
-                                }
-                            }, style: { cursor: "pointer" } },
-                            react_1.default.createElement(react_2.Box, { as: "span", sx: calendarIconWrapperSx },
-                                react_1.default.createElement(lucide_react_1.CalendarIcon, { size: calendarIconPx, 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 ? 3 : 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, size: sizeKey, error: error })) : (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);
-                        }, disabled: disabled })))),
-                    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;
+    return ((0, jsx_runtime_1.jsxs)(react_2.FormControl, { id: ids.inputId, isDisabled: disabled, isInvalid: error, isRequired: isRequired, width: width, children: [label && ((0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, id: ids.inputId, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), (0, jsx_runtime_1.jsxs)(react_2.Popover, { isLazy: true, isOpen: pickerPortal.isPopoverOpen, onClose: () => {
+                    if (suppressOnCloseFinalizeRef.current) {
+                        suppressOnCloseFinalizeRef.current = false;
+                        return;
+                    }
+                    finalize();
+                    onClose();
+                }, placement: "bottom-start", closeOnBlur: false, returnFocusOnClose: true, children: [(0, jsx_runtime_1.jsx)(react_2.PopoverAnchor, { children: (0, jsx_runtime_1.jsx)(react_2.Box, { ref: triggerRef, as: "div", children: (0, jsx_runtime_1.jsxs)(react_2.InputGroup, { size: sizeKey, children: [(0, jsx_runtime_1.jsx)(react_2.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" }), (0, jsx_runtime_1.jsx)(react_2.InputRightElement, { height: "100%", display: "flex", alignItems: "center", pointerEvents: "auto", children: (0, jsx_runtime_1.jsx)(react_2.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: (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", sx: calendarIconWrapperSx, children: (0, jsx_runtime_1.jsx)(lucide_react_1.CalendarIcon, { size: calendarIconPx, color: theme.colors.textMuted }) }) }) })] }) }) }), (0, jsx_runtime_1.jsx)(PickerPortal_1.default, { isMounted: pickerPortal.isMounted, children: (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { width: "auto", p: 3, ref: popoverRef, boxShadow: "lg", borderRadius: "xl", bg: theme.colors.surfaceRaised, role: "dialog", "aria-label": calendarLabel, children: (0, jsx_runtime_1.jsxs)(react_2.PopoverBody, { p: 0, children: [showDate && ((0, jsx_runtime_1.jsx)(CalendarPanel_1.default, { currentMonth: currentMonth, setCurrentMonth: (updater) => setCurrentMonth((prev) => 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 && ((0, jsx_runtime_1.jsx)(react_2.Box, { mt: showDate ? 3 : 0, children: resolvedPickerType === "time" ? ((0, jsx_runtime_1.jsx)(TimePickerInput_1.TimePickerInput, { value: tempDate, onChange: (updatedDate) => {
+                                                setTempDate(updatedDate);
+                                                setInputValue(updatedDate ? (0, date_fns_1.format)(updatedDate, resolvedDateFormat) : "");
+                                                setIsTyping(false);
+                                            }, dateFormat: resolvedDateFormat, isDisabled: disabled, placeholder: placeholderText, size: sizeKey, error: error })) : ((0, jsx_runtime_1.jsx)(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: (updatedDate) => {
+                                                setTempDate(updatedDate);
+                                                setInputValue((0, date_fns_1.format)(updatedDate, resolvedDateFormat));
+                                                setIsTyping(false);
+                                            }, isDisabled: disabled })) })), (0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", justifyContent: "space-between", alignItems: "center", mt: 3, pt: 3, borderTop: "1px solid", borderColor: (0, surfaceRaised_1.raisedRule)(theme.colors), children: [(0, jsx_runtime_1.jsx)(Button_1.default, { size: "sm", variant: "ghost", colorScheme: "gray", onClick: () => {
+                                                    setTempDate(null);
+                                                    requestClose(null);
+                                                }, children: "Clear" }), (0, jsx_runtime_1.jsx)(Button_1.default, { size: "sm", variant: "gradient", onClick: () => requestClose(), children: "Apply" })] })] }) }) })] }), (0, jsx_runtime_1.jsx)(FieldMessage_1.default, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
+}
+exports.SingleDatePicker = (0, react_1.forwardRef)(SingleDatePickerInner);
+exports.SingleDatePicker.displayName = "SingleDatePicker";
 exports.default = exports.SingleDatePicker;