xmlui 0.11.4 → 0.11.7

package/dist/scripts/src/components/DateInput/DateInputNative.js

@@ -1,734 +0,0 @@
-"use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DateInput = exports.defaultProps = exports.WeekDays = exports.DateInputModeValues = exports.dateFormats = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importDefault(require("react"));
-const react_2 = require("react");
-const classnames_1 = __importDefault(require("classnames"));
-const DateInput_module_scss_1 = __importDefault(require("./DateInput.module.scss"));
-const date_fns_1 = require("date-fns");
-const PartialInput_1 = require("../Input/PartialInput");
-const InputDivider_1 = require("../Input/InputDivider");
-const misc_1 = require("../../components-core/utils/misc");
-const InputAdornment_1 = require("../Input/InputAdornment");
-const IconNative_1 = __importDefault(require("../Icon/IconNative"));
-// Component part names
-const PART_DAY = "day";
-const PART_MONTH = "month";
-const PART_YEAR = "year";
-const PART_CLEAR_BUTTON = "clearButton";
-// Date validation constants
-const MIN_YEAR = 1900;
-const MAX_YEAR = 2100;
-// Browser compatibility checks
-const isIEOrEdgeLegacy = typeof window !== "undefined" && /(MSIE|Trident\/|Edge\/)/.test(navigator.userAgent);
-// Date format types
-exports.dateFormats = [
-    "MM/dd/yyyy",
-    "MM-dd-yyyy",
-    "yyyy/MM/dd",
-    "yyyy-MM-dd",
-    "dd/MM/yyyy",
-    "dd-MM-yyyy",
-    "yyyyMMdd",
-    "MMddyyyy",
-];
-exports.DateInputModeValues = ["single", "range"];
-var WeekDays;
-(function (WeekDays) {
-    WeekDays[WeekDays["Sunday"] = 0] = "Sunday";
-    WeekDays[WeekDays["Monday"] = 1] = "Monday";
-    WeekDays[WeekDays["Tuesday"] = 2] = "Tuesday";
-    WeekDays[WeekDays["Wednesday"] = 3] = "Wednesday";
-    WeekDays[WeekDays["Thursday"] = 4] = "Thursday";
-    WeekDays[WeekDays["Friday"] = 5] = "Friday";
-    WeekDays[WeekDays["Saturday"] = 6] = "Saturday";
-})(WeekDays || (exports.WeekDays = WeekDays = {}));
-exports.defaultProps = {
-    enabled: true,
-    validationStatus: "none",
-    mode: "single",
-    dateFormat: "MM/dd/yyyy",
-    showWeekNumber: false,
-    weekStartsOn: WeekDays.Sunday,
-    inline: true,
-    clearable: false,
-    clearToInitialValue: true,
-    required: false,
-    labelPosition: "top",
-    readOnly: false,
-    autoFocus: false,
-    labelBreak: false,
-    emptyCharacter: "-",
-};
-exports.DateInput = (0, react_2.forwardRef)(function DateInputNative(_a, ref) {
-    var { id, initialValue, value: controlledValue, enabled = exports.defaultProps.enabled, updateState, style, className, onDidChange, onFocus, onBlur, onInvalidChange, validationStatus = exports.defaultProps.validationStatus, registerComponentApi, mode = exports.defaultProps.mode, dateFormat = exports.defaultProps.dateFormat, showWeekNumber = exports.defaultProps.showWeekNumber, weekStartsOn = exports.defaultProps.weekStartsOn, minValue, maxValue, disabledDates, inline = exports.defaultProps.inline, clearable = exports.defaultProps.clearable, clearIcon, clearToInitialValue = exports.defaultProps.clearToInitialValue, required = exports.defaultProps.required, startText, startIcon, endText, endIcon, gap, readOnly = exports.defaultProps.readOnly, autoFocus = exports.defaultProps.autoFocus, emptyCharacter = exports.defaultProps.emptyCharacter } = _a, rest = __rest(_a, ["id", "initialValue", "value", "enabled", "updateState", "style", "className", "onDidChange", "onFocus", "onBlur", "onInvalidChange", "validationStatus", "registerComponentApi", "mode", "dateFormat", "showWeekNumber", "weekStartsOn", "minValue", "maxValue", "disabledDates", "inline", "clearable", "clearIcon", "clearToInitialValue", "required", "startText", "startIcon", "endText", "endIcon", "gap", "readOnly", "autoFocus", "emptyCharacter"]);
-    const dateInputRef = (0, react_2.useRef)(null);
-    // Refs for auto-tabbing between inputs
-    const dayInputRef = (0, react_2.useRef)(null);
-    const monthInputRef = (0, react_2.useRef)(null);
-    const yearInputRef = (0, react_2.useRef)(null);
-    // Process emptyCharacter according to requirements
-    const processedEmptyCharacter = (0, react_2.useMemo)(() => {
-        if (!emptyCharacter || emptyCharacter.length === 0) {
-            return "-";
-        }
-        if (emptyCharacter.length > 1) {
-            // Use proper unicode-aware character extraction
-            const firstChar = [...emptyCharacter][0];
-            return firstChar;
-        }
-        return emptyCharacter;
-    }, [emptyCharacter]);
-    // Stabilize initialValue to prevent unnecessary re-renders
-    const stableInitialValue = (0, react_2.useMemo)(() => {
-        return initialValue;
-    }, [initialValue]);
-    // Local state management - sync with value prop
-    const [localValue, setLocalValue] = (0, react_2.useState)(() => {
-        const initial = controlledValue || stableInitialValue || null;
-        return initial;
-    });
-    // Parse current value into individual components
-    const [day, setDay] = (0, react_2.useState)(null);
-    const [month, setMonth] = (0, react_2.useState)(null);
-    const [year, setYear] = (0, react_2.useState)(null);
-    // Track whether the component currently has focus
-    const [componentHasFocus, setComponentHasFocus] = (0, react_2.useState)(false);
-    // State to track invalid status for visual feedback
-    const [isDayCurrentlyInvalid, setIsDayCurrentlyInvalid] = (0, react_2.useState)(false);
-    const [isMonthCurrentlyInvalid, setIsMonthCurrentlyInvalid] = (0, react_2.useState)(false);
-    const [isYearCurrentlyInvalid, setIsYearCurrentlyInvalid] = (0, react_2.useState)(false);
-    (0, react_2.useEffect)(() => {
-        // Initialize XMLUI state with initial value on first mount
-        if (updateState && stableInitialValue !== undefined && controlledValue === undefined) {
-            updateState({ value: stableInitialValue }, { initial: true });
-            return; // Don't sync on this first run, let the state update trigger a re-render
-        }
-        // Sync with controlled value - always sync when controlledValue changes
-        const newLocalValue = controlledValue || null;
-        setLocalValue(newLocalValue);
-    }, [controlledValue, stableInitialValue, updateState]);
-    // Get the order of date inputs based on the format
-    const dateOrder = (0, react_2.useMemo)(() => {
-        const format = dateFormat.toLowerCase();
-        // Determine the order based on the format pattern
-        if (format.startsWith("mm") || format.startsWith("m")) {
-            if (format.includes("/dd/yyyy") || format.includes("-dd-yyyy")) {
-                return ["month", "day", "year"]; // MM/dd/yyyy or MM-dd-yyyy
-            }
-            else {
-                return ["month", "day", "year"]; // MMddyyyy
-            }
-        }
-        else if (format.startsWith("yyyy")) {
-            return ["year", "month", "day"]; // yyyy/MM/dd or yyyy-MM-dd
-        }
-        else if (format.startsWith("dd")) {
-            return ["day", "month", "year"]; // dd/MM/yyyy or dd-MM-yyyy
-        }
-        else {
-            return ["month", "day", "year"]; // fallback
-        }
-    }, [dateFormat]);
-    // Parse value into individual components
-    (0, react_2.useEffect)(() => {
-        if (localValue) {
-            const parsedValues = parseDateString(localValue, dateFormat);
-            if (parsedValues) {
-                setDay(parsedValues.day);
-                setMonth(parsedValues.month);
-                setYear(parsedValues.year);
-            }
-            else {
-                setDay(null);
-                setMonth(null);
-                setYear(null);
-            }
-        }
-        else {
-            setDay(null);
-            setMonth(null);
-            setYear(null);
-        }
-    }, [localValue, dateFormat]);
-    // Event handlers
-    const handleChange = (0, misc_1.useEvent)((newValue) => {
-        // Update local state immediately for immediate UI feedback
-        setLocalValue(newValue);
-        // Also update the XMLUI state
-        if (updateState) {
-            updateState({ value: newValue });
-        }
-        onDidChange === null || onDidChange === void 0 ? void 0 : onDidChange(newValue);
-    });
-    // Helper function to format the complete date value
-    const formatDateValue = (0, react_2.useCallback)((d, m, y) => {
-        if (!d || !m || !y) {
-            return null;
-        }
-        // Create a date object and format it according to the dateFormat
-        const dayNum = parseInt(d, 10);
-        const monthNum = parseInt(m, 10);
-        const yearNum = parseInt(y, 10);
-        if (isNaN(dayNum) || isNaN(monthNum) || isNaN(yearNum)) {
-            return null;
-        }
-        try {
-            // Create date object (month is 0-indexed in Date constructor)
-            const date = new Date(yearNum, monthNum - 1, dayNum);
-            // Validate the date
-            if (date.getFullYear() !== yearNum ||
-                date.getMonth() !== monthNum - 1 ||
-                date.getDate() !== dayNum) {
-                return null;
-            }
-            // Format using the specified format
-            return (0, date_fns_1.format)(date, dateFormat);
-        }
-        catch (error) {
-            return null;
-        }
-    }, [dateFormat]);
-    // Generic handlers for input change and blur
-    const createInputChangeHandler = (0, react_2.useCallback)((field, setValue, setInvalid, validateFn) => (event) => {
-        const newValue = event.target.value;
-        setValue(newValue);
-        // Update invalid state immediately for visual feedback
-        const isInvalid = validateFn(newValue);
-        setInvalid(isInvalid);
-        // Clear day invalid state when any field changes, as the date combination might become valid
-        if (!isInvalid) {
-            setIsDayCurrentlyInvalid(false);
-        }
-        // Fire invalid event if the value is invalid
-        if (isInvalid) {
-            onInvalidChange === null || onInvalidChange === void 0 ? void 0 : onInvalidChange();
-        }
-        // Don't format/normalize during typing - only on blur
-    }, [onInvalidChange]);
-    const createInputBlurHandler = (0, react_2.useCallback)((field, setValue, setInvalid, normalizeFn) => (direction, event) => {
-        const currentValue = event.target.value;
-        const normalizedValue = normalizeFn(currentValue);
-        // Check if the current value was invalid (needed normalization or couldn't be normalized)
-        const wasInvalid = currentValue !== "" && (normalizedValue === null || normalizedValue !== currentValue);
-        if (normalizedValue !== null && normalizedValue !== currentValue) {
-            setValue(normalizedValue);
-            setInvalid(false); // Clear invalid state after normalization
-            // Check if the complete date would be valid
-            const dateValues = { day, month, year };
-            dateValues[field] = normalizedValue;
-            const dateString = formatDateValue(dateValues.day, dateValues.month, dateValues.year);
-            if (dateString !== null) {
-                // Valid complete date - update normally
-                handleChange(dateString);
-            }
-            else {
-                // Invalid date combination - mark the day as invalid if all fields are present
-                if (dateValues.day && dateValues.month && dateValues.year) {
-                    setIsDayCurrentlyInvalid(true);
-                    onInvalidChange === null || onInvalidChange === void 0 ? void 0 : onInvalidChange();
-                    // Don't call handleChange with null to avoid clearing the fields
-                }
-                else {
-                    // Incomplete date - call handleChange as normal (will be null)
-                    handleChange(dateString);
-                }
-            }
-        }
-        else if (normalizedValue === null && currentValue !== "") {
-            // Reset to previous valid value or clear
-            setValue("");
-            setInvalid(false); // Clear invalid state
-            // Always call handleChange to update the date value (likely to null)
-            const dateValues = { day, month, year };
-            dateValues[field] = "";
-            const dateString = formatDateValue(dateValues.day, dateValues.month, dateValues.year);
-            handleChange(dateString);
-        }
-        else if (normalizedValue !== null) {
-            // Value didn't need normalization, but still update the complete date
-            const dateValues = { day, month, year };
-            dateValues[field] = normalizedValue;
-            const dateString = formatDateValue(dateValues.day, dateValues.month, dateValues.year);
-            if (dateString !== null) {
-                // Valid complete date - update normally
-                handleChange(dateString);
-            }
-            else {
-                // Invalid date combination - mark the day as invalid if all fields are present
-                if (dateValues.day && dateValues.month && dateValues.year) {
-                    setIsDayCurrentlyInvalid(true);
-                    onInvalidChange === null || onInvalidChange === void 0 ? void 0 : onInvalidChange();
-                    // Don't call handleChange with null to avoid clearing the fields
-                }
-                else {
-                    // Incomplete date - call handleChange as normal (will be null)
-                    handleChange(dateString);
-                }
-            }
-        }
-    }, [day, month, year, handleChange, onInvalidChange]);
-    // Handle changes from individual inputs
-    const handleDayChange = (0, react_2.useMemo)(() => createInputChangeHandler("day", setDay, setIsDayCurrentlyInvalid, (value) => isDayInvalid(value, month, year)), [createInputChangeHandler, month, year]);
-    const handleDayBlur = (0, react_2.useMemo)(() => createInputBlurHandler("day", setDay, setIsDayCurrentlyInvalid, (value) => normalizeDay(value, month, year)), [createInputBlurHandler, month, year]);
-    const handleMonthChange = (0, react_2.useMemo)(() => createInputChangeHandler("month", setMonth, setIsMonthCurrentlyInvalid, isMonthInvalid), [createInputChangeHandler]);
-    const handleMonthBlur = (0, react_2.useMemo)(() => createInputBlurHandler("month", setMonth, setIsMonthCurrentlyInvalid, normalizeMonth), [createInputBlurHandler]);
-    const handleYearChange = (0, react_2.useMemo)(() => createInputChangeHandler("year", setYear, setIsYearCurrentlyInvalid, isYearInvalid), [createInputChangeHandler]);
-    const handleYearBlur = (0, react_2.useMemo)(() => createInputBlurHandler("year", setYear, setIsYearCurrentlyInvalid, normalizeYear), [createInputBlurHandler]);
-    // Focus method
-    const focus = (0, react_2.useCallback)(() => {
-        var _a;
-        const firstInput = (_a = dateInputRef.current) === null || _a === void 0 ? void 0 : _a.querySelector("input");
-        firstInput === null || firstInput === void 0 ? void 0 : firstInput.focus();
-    }, []);
-    // Custom focus handler that fires gotFocus when component gains focus
-    const handleComponentFocus = (0, react_2.useCallback)((event) => {
-        // If component didn't have focus before, fire gotFocus
-        if (!componentHasFocus) {
-            setComponentHasFocus(true);
-            onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
-        }
-    }, [componentHasFocus, onFocus]);
-    // Custom blur handler that only fires lostFocus when focus leaves the entire component
-    const handleComponentBlur = (0, react_2.useCallback)((event) => {
-        // Check if the new focus target is still within this DateInput component
-        const relatedTarget = event.relatedTarget;
-        const currentTarget = event.currentTarget;
-        // If there's no related target, or the related target is not within this component, fire lostFocus
-        if (!relatedTarget || !currentTarget.contains(relatedTarget)) {
-            setComponentHasFocus(false);
-            onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
-        }
-    }, [onBlur]);
-    // Arrow key navigation handler
-    const createArrowKeyHandler = (0, react_2.useCallback)(() => {
-        return (event) => {
-            const { key } = event;
-            if (key === "ArrowRight") {
-                event.preventDefault();
-                const currentTarget = event.target;
-                // Determine next input based on current input
-                if (currentTarget === monthInputRef.current && dayInputRef.current) {
-                    dayInputRef.current.focus();
-                    dayInputRef.current.select();
-                }
-                else if (currentTarget === dayInputRef.current && yearInputRef.current) {
-                    yearInputRef.current.focus();
-                    yearInputRef.current.select();
-                }
-            }
-            else if (key === "ArrowLeft") {
-                event.preventDefault();
-                const currentTarget = event.target;
-                // Determine previous input based on current input
-                if (currentTarget === dayInputRef.current && monthInputRef.current) {
-                    monthInputRef.current.focus();
-                    monthInputRef.current.select();
-                }
-                else if (currentTarget === yearInputRef.current && dayInputRef.current) {
-                    dayInputRef.current.focus();
-                    dayInputRef.current.select();
-                }
-            }
-        };
-    }, []);
-    // Create the arrow key handler instance
-    const handleArrowKeys = createArrowKeyHandler();
-    const clear = (0, react_2.useCallback)(() => {
-        // Reset to initial value if provided, otherwise null
-        let valueToReset = clearToInitialValue
-            ? stableInitialValue !== undefined
-                ? stableInitialValue
-                : null
-            : null;
-        if (valueToReset) {
-            const parsedValues = parseDateString(valueToReset, dateFormat);
-            if (parsedValues) {
-                setDay(parsedValues.day);
-                setMonth(parsedValues.month);
-                setYear(parsedValues.year);
-            }
-            else {
-                setDay(null);
-                setMonth(null);
-                setYear(null);
-            }
-        }
-        else {
-            // Clear all fields
-            setDay(null);
-            setMonth(null);
-            setYear(null);
-        }
-        handleChange(valueToReset);
-        // Focus the component after clearing
-        setTimeout(() => {
-            focus();
-        }, 0);
-    }, [stableInitialValue, handleChange, dateFormat, clearToInitialValue, focus]);
-    function stopPropagation(event) {
-        event.stopPropagation();
-    }
-    const setValue = (0, misc_1.useEvent)((newValue) => {
-        handleChange(newValue);
-    });
-    // Function to get ISO formatted date value (YYYY-MM-DD)
-    const getIsoValue = (0, react_2.useCallback)(() => {
-        if (!day || !month || !year) {
-            return null;
-        }
-        // Convert to numbers
-        const dayNum = parseInt(day, 10);
-        const monthNum = parseInt(month, 10);
-        const yearNum = parseInt(year, 10);
-        if (isNaN(dayNum) || isNaN(monthNum) || isNaN(yearNum)) {
-            return null;
-        }
-        try {
-            // Create date object (month is 0-indexed in Date constructor)
-            const date = new Date(yearNum, monthNum - 1, dayNum);
-            // Validate the date
-            if (date.getFullYear() !== yearNum ||
-                date.getMonth() !== monthNum - 1 ||
-                date.getDate() !== dayNum) {
-                return null;
-            }
-            // Format as ISO date string (YYYY-MM-DD)
-            const year4 = yearNum.toString().padStart(4, "0");
-            const month2 = monthNum.toString().padStart(2, "0");
-            const day2 = dayNum.toString().padStart(2, "0");
-            return `${year4}-${month2}-${day2}`;
-        }
-        catch (error) {
-            return null;
-        }
-    }, [day, month, year]);
-    // Component API registration
-    (0, react_2.useEffect)(() => {
-        if (registerComponentApi) {
-            registerComponentApi({
-                focus,
-                setValue,
-                isoValue: getIsoValue,
-            });
-        }
-    }, [registerComponentApi, focus, setValue, getIsoValue]);
-    // Custom clear icon
-    const clearIconElement = (0, react_2.useMemo)(() => {
-        if (clearIcon === null || clearIcon === "null")
-            return null;
-        if (clearIcon)
-            return (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: clearIcon });
-        // Default clear icon
-        return ((0, jsx_runtime_1.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: 19, height: 19, viewBox: "0 0 19 19", stroke: "currentColor", strokeWidth: 2, "aria-hidden": "true", className: (0, classnames_1.default)(DateInput_module_scss_1.default.clearButtonIcon, DateInput_module_scss_1.default.buttonIcon), children: [(0, jsx_runtime_1.jsx)("line", { x1: "4", x2: "15", y1: "4", y2: "15" }), (0, jsx_runtime_1.jsx)("line", { x1: "15", x2: "4", y1: "4", y2: "15" })] }));
-    }, [clearIcon]);
-    // Adornments
-    const startAdornment = (0, react_2.useMemo)(() => {
-        if (startIcon || startText) {
-            return (0, jsx_runtime_1.jsx)(InputAdornment_1.Adornment, { iconName: startIcon, text: startText, className: DateInput_module_scss_1.default.adornment });
-        }
-        return null;
-    }, [startIcon, startText]);
-    const endAdornment = (0, react_2.useMemo)(() => {
-        if (endIcon || endText) {
-            return (0, jsx_runtime_1.jsx)(InputAdornment_1.Adornment, { iconName: endIcon, text: endText, className: DateInput_module_scss_1.default.adornment });
-        }
-        return null;
-    }, [endIcon, endText]);
-    // Helper function to get input refs based on order
-    const getInputRefs = (0, react_2.useCallback)(() => {
-        const refs = {
-            day: dayInputRef,
-            month: monthInputRef,
-            year: yearInputRef,
-        };
-        return dateOrder.map((field) => refs[field]);
-    }, [dateOrder]);
-    // Helper function to create input components in the right order
-    const createDateInputs = () => {
-        const inputRefs = getInputRefs();
-        return dateOrder.map((field, index) => {
-            const nextRef = index < inputRefs.length - 1 ? inputRefs[index + 1] : undefined;
-            // Pass id to the first input field only
-            const inputId = index === 0 ? id : undefined;
-            const getSeparator = () => {
-                if (index === dateOrder.length - 1)
-                    return null;
-                // Get separator based on format
-                if (dateFormat.includes("/"))
-                    return "/";
-                if (dateFormat.includes("-"))
-                    return "-";
-                return "";
-            };
-            switch (field) {
-                case "day":
-                    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(DayInput, { id: inputId, autoFocus: autoFocus && index === 0, disabled: !enabled, inputRef: dayInputRef, nextInputRef: nextRef, minValue: minValue, maxValue: maxValue, onChange: handleDayChange, onBlur: handleDayBlur, onKeyDown: handleArrowKeys, readOnly: readOnly, required: required, value: day, isInvalid: isDayCurrentlyInvalid, month: month, year: year, emptyCharacter: processedEmptyCharacter }), getSeparator() && (0, jsx_runtime_1.jsx)(InputDivider_1.InputDivider, { separator: getSeparator() })] }, "day"));
-                case "month":
-                    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(MonthInput, { id: inputId, autoFocus: autoFocus && index === 0, disabled: !enabled, inputRef: monthInputRef, nextInputRef: nextRef, minValue: minValue, maxValue: maxValue, onChange: handleMonthChange, onBlur: handleMonthBlur, onKeyDown: handleArrowKeys, readOnly: readOnly, required: required, value: month, isInvalid: isMonthCurrentlyInvalid, emptyCharacter: processedEmptyCharacter }), getSeparator() && (0, jsx_runtime_1.jsx)(InputDivider_1.InputDivider, { separator: getSeparator() })] }, "month"));
-                case "year":
-                    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(YearInput, { id: inputId, autoFocus: autoFocus && index === 0, disabled: !enabled, inputRef: yearInputRef, nextInputRef: nextRef, minValue: minValue, maxValue: maxValue, onChange: handleYearChange, onBlur: handleYearBlur, onKeyDown: handleArrowKeys, readOnly: readOnly, required: required, value: year, isInvalid: isYearCurrentlyInvalid, dateFormat: dateFormat, emptyCharacter: processedEmptyCharacter }), getSeparator() && (0, jsx_runtime_1.jsx)(InputDivider_1.InputDivider, { separator: getSeparator() })] }, "year"));
-                default:
-                    return null;
-            }
-        });
-    };
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ ref: dateInputRef, className: (0, classnames_1.default)(DateInput_module_scss_1.default.dateInputWrapper, {
-            [DateInput_module_scss_1.default.error]: validationStatus === "error",
-            [DateInput_module_scss_1.default.warning]: validationStatus === "warning",
-            [DateInput_module_scss_1.default.valid]: validationStatus === "valid",
-            [DateInput_module_scss_1.default.disabled]: !enabled,
-            [DateInput_module_scss_1.default.readOnly]: readOnly,
-        }, className), style: Object.assign(Object.assign({}, style), { gap }), onFocusCapture: handleComponentFocus, onBlur: handleComponentBlur, "data-validation-status": validationStatus }, rest, { children: [startAdornment, (0, jsx_runtime_1.jsxs)("div", { className: DateInput_module_scss_1.default.wrapper, children: [(0, jsx_runtime_1.jsx)("div", { className: DateInput_module_scss_1.default.inputGroup, children: createDateInputs() }), clearable && ((0, jsx_runtime_1.jsx)("button", { "data-part-id": PART_CLEAR_BUTTON, className: (0, classnames_1.default)(DateInput_module_scss_1.default.clearButton, DateInput_module_scss_1.default.button), disabled: !enabled, onClick: clear, onFocus: stopPropagation, type: "button", children: clearIconElement }))] }), endAdornment] })));
-});
-// Input component
-function Input({ id, ariaLabel, autoFocus, className, disabled, inputRef, max, min, name, nextInputRef, // For auto-tabbing to next input
-onChange, onBlur, onKeyDown, onKeyUp, placeholder, readOnly, required, step, value, maxLength = 2, isInvalid = false, // To prevent auto-tabbing when value is invalid
-validateFn, // Function to validate the current input value
-onBeep, // Function to handle beep sound and event
- }) {
-    // Handle input changes with auto-tabbing logic
-    const handleInputChange = (0, react_2.useCallback)((event) => {
-        const newValue = event.target.value;
-        // Call the original onChange handler
-        if (onChange) {
-            onChange(event);
-        }
-        // Auto-tab to next input if we have reached max length, value is numeric, and value is valid
-        if (newValue.length === maxLength && /^\d+$/.test(newValue)) {
-            // Check if the new value is valid before auto-tabbing
-            const isValueInvalid = validateFn ? validateFn(newValue) : false;
-            if (!isValueInvalid) {
-                // Small delay to ensure the current input is properly updated
-                setTimeout(() => {
-                    if (nextInputRef === null || nextInputRef === void 0 ? void 0 : nextInputRef.current) {
-                        // Tab to next input field
-                        nextInputRef.current.focus();
-                        nextInputRef.current.select();
-                    }
-                }, 0);
-            }
-            else {
-                // Input is ready for auto-tab but invalid - play beep sound and fire event
-                onBeep === null || onBeep === void 0 ? void 0 : onBeep();
-            }
-        }
-    }, [onChange, nextInputRef, maxLength, validateFn, onBeep]);
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("input", { id: id, "aria-label": ariaLabel, autoComplete: "off", 
-            // biome-ignore lint/a11y/noAutofocus: This is up to developers' decision
-            autoFocus: autoFocus, className: (0, classnames_1.default)(DateInput_module_scss_1.default.input, className), "data-input": "true", disabled: disabled, inputMode: "numeric", max: max, maxLength: maxLength, min: min, name: name, onChange: handleInputChange, onBlur: onBlur, onFocus: onFocus, onKeyDown: onKeyDown, onKeyUp: onKeyUp, placeholder: placeholder || "--", readOnly: readOnly, 
-            // Assertion is needed for React 18 compatibility
-            ref: inputRef, required: required, step: step, type: "text", value: value !== null ? value : "" }) }));
-}
-function DayInput(_a) {
-    var { minValue, maxValue, value, isInvalid = false, month, year, onBeep, emptyCharacter = "-" } = _a, otherProps = __rest(_a, ["minValue", "maxValue", "value", "isInvalid", "month", "year", "onBeep", "emptyCharacter"]);
-    // Calculate max days for the current month/year
-    const maxDay = (0, react_2.useMemo)(() => {
-        if (month && year) {
-            const monthNum = parseInt(month, 10);
-            const yearNum = parseInt(year, 10);
-            if (!isNaN(monthNum) && !isNaN(yearNum)) {
-                return new Date(yearNum, monthNum, 0).getDate();
-            }
-        }
-        return 31; // Default to 31 if month/year not available
-    }, [month, year]);
-    return ((0, jsx_runtime_1.jsx)(PartialInput_1.PartialInput, { "data-part-id": PART_DAY, id: otherProps.id, value: value, emptyCharacter: emptyCharacter, placeholderLength: 2, max: Math.min(maxDay, 31), min: 1, maxLength: 2, validateFn: (val) => isDayInvalid(val, month, year), onBeep: onBeep, onChange: otherProps.onChange, onBlur: (direction, event) => {
-            // PartialInput provides direction, but current onBlur expects just event
-            if (otherProps.onBlur) {
-                // Provide both direction and event to match the expected signature
-                otherProps.onBlur(direction, event);
-            }
-        }, onKeyDown: otherProps.onKeyDown, className: (0, classnames_1.default)(DateInput_module_scss_1.default.input, DateInput_module_scss_1.default.day), invalidClassName: DateInput_module_scss_1.default.invalid, disabled: otherProps.disabled, readOnly: otherProps.readOnly, required: otherProps.required, autoFocus: otherProps.autoFocus, inputRef: otherProps.inputRef, nextInputRef: otherProps.nextInputRef, name: "day", ariaLabel: otherProps.ariaLabel, isInvalid: isInvalid }));
-}
-function MonthInput(_a) {
-    var { minValue, maxValue, value, isInvalid = false, onBeep, emptyCharacter = "-" } = _a, otherProps = __rest(_a, ["minValue", "maxValue", "value", "isInvalid", "onBeep", "emptyCharacter"]);
-    return ((0, jsx_runtime_1.jsx)(PartialInput_1.PartialInput, { "data-part-id": PART_MONTH, id: otherProps.id, max: 12, min: 1, name: "month", value: value, invalidClassName: DateInput_module_scss_1.default.invalid, isInvalid: isInvalid, validateFn: isMonthInvalid, onBeep: onBeep, onChange: otherProps.onChange, emptyCharacter: emptyCharacter, placeholderLength: 2, className: (0, classnames_1.default)(DateInput_module_scss_1.default.input, DateInput_module_scss_1.default.month), maxLength: 2, disabled: otherProps.disabled, required: otherProps.required, onBlur: (direction, event) => {
-            // PartialInput provides direction, but current onBlur expects just event
-            if (otherProps.onBlur) {
-                // Provide both direction and event to match the expected signature
-                otherProps.onBlur(direction, event);
-            }
-        }, onKeyDown: otherProps.onKeyDown, readOnly: otherProps.readOnly, autoFocus: otherProps.autoFocus, inputRef: otherProps.inputRef, nextInputRef: otherProps.nextInputRef, ariaLabel: otherProps.ariaLabel }));
-}
-function YearInput(_a) {
-    var { minValue, maxValue, value, isInvalid = false, dateFormat = "MM/dd/yyyy", onBeep, emptyCharacter = "-" } = _a, otherProps = __rest(_a, ["minValue", "maxValue", "value", "isInvalid", "dateFormat", "onBeep", "emptyCharacter"]);
-    // Always use 4-digit year format
-    const maxLength = 4;
-    const currentYear = new Date().getFullYear();
-    const min = 1900;
-    const max = currentYear + 100;
-    const { className: originalClassName } = otherProps, restProps = __rest(otherProps, ["className"]);
-    return ((0, jsx_runtime_1.jsx)(PartialInput_1.PartialInput, Object.assign({ "data-part-id": PART_YEAR, id: otherProps.id, max: max, min: min, name: "year", value: value, isInvalid: isInvalid, invalidClassName: DateInput_module_scss_1.default.invalid, validateFn: isYearInvalid, onBeep: onBeep, emptyCharacter: emptyCharacter, placeholderLength: 4, className: (0, classnames_1.default)(DateInput_module_scss_1.default.input, DateInput_module_scss_1.default.year, originalClassName), maxLength: maxLength, onBlur: (direction, event) => {
-            // PartialInput provides direction, but current onBlur expects just event
-            if (otherProps.onBlur) {
-                // Provide both direction and event to match the expected signature
-                otherProps.onBlur(direction, event);
-            }
-        } }, restProps)));
-}
-// Input helper functions
-function onFocus(event) {
-    const { target } = event;
-    if (isIEOrEdgeLegacy) {
-        requestAnimationFrame(() => target.select());
-    }
-    else {
-        target.select();
-    }
-}
-// Utility function to parse date string into components
-function parseDateString(dateString, dateFormat) {
-    // Handle non-string values gracefully by returning null (empty fields)
-    if (typeof dateString !== 'string' || dateString === null || dateString === undefined) {
-        return null;
-    }
-    try {
-        // Try to parse the date using the specified format
-        const parsedDate = (0, date_fns_1.parse)(dateString, dateFormat, new Date());
-        if ((0, date_fns_1.isValid)(parsedDate)) {
-            return {
-                day: parsedDate.getDate().toString().padStart(2, "0"),
-                month: (parsedDate.getMonth() + 1).toString().padStart(2, "0"),
-                year: parsedDate.getFullYear().toString(),
-            };
-        }
-        // Fallback: Try to parse as ISO date string
-        const isoDate = new Date(dateString);
-        if (!isNaN(isoDate.getTime())) {
-            return {
-                day: isoDate.getDate().toString().padStart(2, "0"),
-                month: (isoDate.getMonth() + 1).toString().padStart(2, "0"),
-                year: isoDate.getFullYear().toString(),
-            };
-        }
-        return null;
-    }
-    catch (error) {
-        return null;
-    }
-}
-// Normalize functions
-function normalizeDay(value, month, year) {
-    if (!value || value === "")
-        return null;
-    const num = parseInt(value, 10);
-    if (isNaN(num))
-        return null;
-    // Calculate max days for the current month/year
-    let maxDay = 31;
-    if (month && year) {
-        const monthNum = parseInt(month, 10);
-        const yearNum = parseInt(year, 10);
-        if (!isNaN(monthNum) && !isNaN(yearNum)) {
-            maxDay = new Date(yearNum, monthNum, 0).getDate();
-        }
-    }
-    if (num >= 1 && num <= maxDay) {
-        return num.toString().padStart(2, "0");
-    }
-    else {
-        // Keep value % 10. In case of "0" use "01"
-        const normalizedValue = num % 10;
-        if (normalizedValue === 0) {
-            return "01";
-        }
-        else {
-            return normalizedValue.toString().padStart(2, "0");
-        }
-    }
-}
-function normalizeMonth(value) {
-    if (!value || value === "")
-        return null;
-    const num = parseInt(value, 10);
-    if (isNaN(num))
-        return null;
-    if (num >= 1 && num <= 12) {
-        return num.toString().padStart(2, "0");
-    }
-    else {
-        // Keep the last digit. Use "0" as the first digit. In case of "0" use "01"
-        const lastDigit = num % 10;
-        if (lastDigit === 0) {
-            return "01";
-        }
-        else {
-            return `0${lastDigit}`;
-        }
-    }
-}
-function normalizeYear(value) {
-    if (!value || value === "")
-        return null;
-    const num = parseInt(value, 10);
-    if (isNaN(num))
-        return null;
-    if (num >= MIN_YEAR && num <= MAX_YEAR) {
-        return num.toString();
-    }
-    else {
-        // Keep the last two year digits and use "20" as the first two digits if the resulting year is not in the future; otherwise, use "19" as the first two digits
-        const lastTwoDigits = num % 100;
-        const currentYear = new Date().getFullYear();
-        const candidate20 = 2000 + lastTwoDigits;
-        const candidate19 = 1900 + lastTwoDigits;
-        // Use "20" if the resulting year is not in the future; otherwise, use "19"
-        if (candidate20 <= currentYear) {
-            return candidate20.toString();
-        }
-        else {
-            return candidate19.toString();
-        }
-    }
-}
-// Validation functions
-function isDayInvalid(value, month, year) {
-    if (!value || value === "")
-        return false;
-    const num = parseInt(value, 10);
-    if (isNaN(num))
-        return true;
-    // Calculate max days for the current month/year
-    let maxDay = 31;
-    if (month && year) {
-        const monthNum = parseInt(month, 10);
-        const yearNum = parseInt(year, 10);
-        if (!isNaN(monthNum) && !isNaN(yearNum)) {
-            maxDay = new Date(yearNum, monthNum, 0).getDate();
-        }
-    }
-    return num < 1 || num > maxDay;
-}
-function isMonthInvalid(value) {
-    if (!value || value === "")
-        return false;
-    const num = parseInt(value, 10);
-    if (isNaN(num))
-        return true;
-    return num < 1 || num > 12;
-}
-function isYearInvalid(value) {
-    if (!value || value === "")
-        return false;
-    const num = parseInt(value, 10);
-    if (isNaN(num))
-        return true;
-    // Invalid if out of the minimum and maximum year range
-    return num < MIN_YEAR || num > MAX_YEAR;
-}