flysoft-react-ui 0.4.0 → 0.5.2

package/dist/components/form-controls/DateInput.js

@@ -1,14 +1,39 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
+import { createPortal } from "react-dom";
+import dayjs, {} from "dayjs";
+import { useFormContext } from "react-hook-form";
 import { Input } from "./Input";
 import { DatePicker } from "./DatePicker";
 const pad = (value) => value.toString().padStart(2, "0");
+const isDayjs = (value) => {
+    return (value !== null &&
+        value !== undefined &&
+        typeof value === "object" &&
+        "isValid" in value &&
+        typeof value.isValid === "function");
+};
+const normalizeToDayjs = (value) => {
+    if (value === null || value === undefined)
+        return null;
+    if (isDayjs(value))
+        return value;
+    // Si no es Dayjs, intentar convertirlo
+    if (typeof value === "string" ||
+        typeof value === "number" ||
+        value instanceof Date) {
+        const d = dayjs(value);
+        return d.isValid() ? d : null;
+    }
+    return null;
+};
 const formatDateToString = (date, format) => {
-    if (!date)
+    const normalized = normalizeToDayjs(date);
+    if (!normalized || !normalized.isValid())
         return "";
-    const day = pad(date.getDate());
-    const month = pad(date.getMonth() + 1);
-    const year = date.getFullYear().toString();
+    const day = pad(normalized.date());
+    const month = pad(normalized.month() + 1);
+    const year = normalized.year().toString();
     if (format === "mm/dd/yyyy") {
         return `${month}/${day}/${year}`;
     }
@@ -33,11 +58,15 @@ const parseDateFromString = (value, format) => {
             month <= 12 &&
             year >= 1000 &&
             year <= 9999) {
-            const date = new Date(year, month - 1, day);
-            if (date.getFullYear() === year &&
-                date.getMonth() === month - 1 &&
-                date.getDate() === day) {
-                return date;
+            const date = dayjs()
+                .year(year)
+                .month(month - 1)
+                .date(day);
+            if (date.isValid() &&
+                date.year() === year &&
+                date.month() === month - 1 &&
+                date.date() === day) {
+                return date.startOf("day");
             }
         }
     }
@@ -57,100 +86,426 @@ const parseDateFromString = (value, format) => {
         month > 12) {
         return null;
     }
-    const date = new Date(year, month - 1, day);
-    if (date.getFullYear() !== year ||
-        date.getMonth() !== month - 1 ||
-        date.getDate() !== day) {
+    const date = dayjs()
+        .year(year)
+        .month(month - 1)
+        .date(day);
+    if (!date.isValid() ||
+        date.year() !== year ||
+        date.month() !== month - 1 ||
+        date.date() !== day) {
         return null;
     }
-    return date;
+    return date.startOf("day");
 };
-export const DateInput = ({ value, onChange, format = "dd/mm/yyyy", datePickerProps, icon = "fa-calendar-alt", iconPosition = "right", className = "", ...inputProps }) => {
-    const [internalDate, setInternalDate] = React.useState(value ?? null);
-    const [inputValue, setInputValue] = React.useState(formatDateToString(value ?? null, format));
+export const DateInput = React.forwardRef(({ value, onChange, format = "dd/mm/yyyy", datePickerProps, icon = "fa-calendar-alt", iconPosition = "right", className = "", readOnly = false, ...inputProps }, ref) => {
+    // Extraer onBlur de inputProps para manejarlo por separado
+    const { onBlur: registerOnBlur, ...restInputProps } = inputProps;
+    // Detectar si estamos en modo register: si viene 'name' de register, estamos en modo register
+    // register siempre pasa 'name', 'onChange', 'onBlur', y 'ref'
+    const isRegisterMode = React.useMemo(() => {
+        // Si viene 'name' en inputProps, es porque viene de register
+        return "name" in inputProps && inputProps.name !== undefined;
+    }, [inputProps]);
+    const fieldName = isRegisterMode && "name" in restInputProps
+        ? restInputProps.name
+        : undefined;
+    // Obtener setValue del contexto del formulario
+    // Para usar objetos Dayjs con register, el formulario debe estar dentro de FormProvider
+    // useFormContext debe llamarse incondicionalmente (requisito de React Hooks)
+    // Si no hay FormProvider y se usa en modo register, useFormContext lanzará un error
+    // Para usar sin FormProvider, usar Controller en lugar de register
+    const formContext = useFormContext();
+    const setValue = formContext?.setValue;
+    const [internalDate, setInternalDate] = React.useState(null);
+    const [displayValue, setDisplayValue] = React.useState("");
     const [isOpen, setIsOpen] = React.useState(false);
+    const [pickerPosition, setPickerPosition] = React.useState(null);
     const containerRef = React.useRef(null);
-    const inputWrapperRef = React.useRef(null);
-    const iconRef = React.useRef(null);
+    const pickerRef = React.useRef(null);
+    const inputRef = React.useRef(null);
+    const isTypingRef = React.useRef(false);
+    // Función helper para sincronizar displayValue con el valor del formulario en modo register
+    const syncDisplayValue = React.useCallback(() => {
+        if (isRegisterMode && inputRef.current) {
+            const formValue = inputRef.current.value;
+            if (formValue) {
+                // Parsear el string de fecha del formulario
+                const parsed = parseDateFromString(formValue, format);
+                if (parsed) {
+                    setDisplayValue(formatDateToString(parsed, format));
+                    setInternalDate(parsed);
+                    return true;
+                }
+                else {
+                    // Si hay un valor pero no se puede parsear, mostrarlo tal cual
+                    setDisplayValue(formValue);
+                    return true;
+                }
+            }
+            else {
+                setDisplayValue("");
+                setInternalDate(null);
+                return false;
+            }
+        }
+        return false;
+    }, [isRegisterMode, format]);
+    // Sincronizar displayValue con el valor del formulario en modo register
     React.useEffect(() => {
-        if (value !== undefined) {
-            setInternalDate(value);
-            setInputValue(formatDateToString(value, format));
+        if (isRegisterMode) {
+            let attempts = 0;
+            const maxAttempts = 50; // Intentar durante ~5 segundos (50 * 100ms)
+            const trySync = () => {
+                if (inputRef.current) {
+                    const formValue = inputRef.current.value;
+                    if (formValue) {
+                        const parsed = parseDateFromString(formValue, format);
+                        if (parsed) {
+                            setDisplayValue(formatDateToString(parsed, format));
+                            setInternalDate(parsed);
+                            return true;
+                        }
+                        else {
+                            setDisplayValue(formValue);
+                            return true;
+                        }
+                    }
+                    else {
+                        setDisplayValue("");
+                        setInternalDate(null);
+                    }
+                }
+                return false;
+            };
+            // Intentar inmediatamente
+            if (trySync()) {
+                return;
+            }
+            // Si no encontramos el valor, usar un intervalo
+            const intervalId = window.setInterval(() => {
+                attempts++;
+                if (trySync() || attempts >= maxAttempts) {
+                    clearInterval(intervalId);
+                }
+            }, 100);
+            // También usar timeouts como fallback
+            const timeouts = [];
+            [0, 50, 100, 200, 500, 1000].forEach((delay) => {
+                const timeoutId = window.setTimeout(() => {
+                    trySync();
+                }, delay);
+                timeouts.push(timeoutId);
+            });
+            return () => {
+                clearInterval(intervalId);
+                timeouts.forEach(clearTimeout);
+            };
         }
-    }, [value, format]);
-    // Centrar el ícono verticalmente respecto al input real
+    }, [isRegisterMode, format]);
+    // También escuchar cambios en el input nativo para sincronizar cuando cambie
     React.useEffect(() => {
-        const updateIconPosition = () => {
-            if (iconPosition === "right" &&
-                inputWrapperRef.current &&
-                iconRef.current) {
-                const inputElement = inputWrapperRef.current.querySelector("input");
-                if (inputElement) {
-                    const inputRect = inputElement.getBoundingClientRect();
-                    const wrapperRect = inputWrapperRef.current.getBoundingClientRect();
-                    const topOffset = inputRect.top - wrapperRect.top + inputRect.height / 2;
-                    iconRef.current.style.top = `${topOffset}px`;
-                    iconRef.current.style.transform = "translateY(-50%)";
+        if (isRegisterMode && inputRef.current) {
+            const input = inputRef.current;
+            const handleInputSync = () => {
+                syncDisplayValue();
+            };
+            input.addEventListener("input", handleInputSync);
+            input.addEventListener("change", handleInputSync);
+            const observer = new MutationObserver(() => {
+                syncDisplayValue();
+            });
+            observer.observe(input, {
+                attributes: true,
+                attributeFilter: ["value"],
+            });
+            return () => {
+                input.removeEventListener("input", handleInputSync);
+                input.removeEventListener("change", handleInputSync);
+                observer.disconnect();
+            };
+        }
+    }, [isRegisterMode, syncDisplayValue]);
+    // Sincronizar con el valor del formulario
+    React.useEffect(() => {
+        if (!isTypingRef.current) {
+            if (isRegisterMode) {
+                // En modo register con setValue, leer del formulario
+                if (formContext && fieldName) {
+                    const formValue = formContext.watch(fieldName);
+                    const normalized = normalizeToDayjs(formValue);
+                    setInternalDate(normalized);
+                    if (normalized) {
+                        setDisplayValue(formatDateToString(normalized, format));
+                    }
+                    else {
+                        setDisplayValue("");
+                    }
                 }
+                // Si no hay setValue, syncDisplayValue se encarga de sincronizar desde el input nativo
             }
-        };
-        // Ejecutar inmediatamente
-        updateIconPosition();
-        // Ejecutar cuando cambie el tamaño de la ventana
-        window.addEventListener("resize", updateIconPosition);
-        return () => {
-            window.removeEventListener("resize", updateIconPosition);
-        };
-    }, [iconPosition, inputValue, inputProps.label, inputProps.size]);
+            else {
+                // Modo Controller, sincronizar con el valor Dayjs
+                const normalized = normalizeToDayjs(value);
+                setInternalDate(normalized);
+                if (normalized) {
+                    setDisplayValue(formatDateToString(normalized, format));
+                }
+                else {
+                    setDisplayValue("");
+                }
+            }
+        }
+    }, [value, format, isRegisterMode, setValue, fieldName, formContext]);
+    // Determinar el valor a mostrar en el input
+    const inputValue = isRegisterMode ? displayValue : displayValue;
     const handleDateChange = (date) => {
-        if (value === undefined) {
+        if (readOnly)
+            return;
+        const dateString = formatDateToString(date, format);
+        if (isRegisterMode) {
+            // En modo register, usar setValue si está disponible para guardar el objeto Dayjs
+            // Si no está disponible, guardar como string (comportamiento por defecto)
+            if (setValue && fieldName) {
+                // Usar setValue para guardar el objeto Dayjs directamente
+                setValue(fieldName, date, {
+                    shouldValidate: true,
+                    shouldDirty: true,
+                });
+            }
+            else {
+                // Fallback: actualizar el input nativo con el string de fecha
+                if (inputRef.current) {
+                    const nativeInput = inputRef.current;
+                    const nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value")?.set;
+                    if (nativeInputValueSetter) {
+                        nativeInputValueSetter.call(nativeInput, dateString);
+                    }
+                    else {
+                        nativeInput.value = dateString;
+                    }
+                    // Llamar al onChange de register
+                    if (onChange) {
+                        const changeEvent = {
+                            target: nativeInput,
+                            currentTarget: nativeInput,
+                        };
+                        onChange(changeEvent);
+                    }
+                    // Disparar eventos nativos
+                    const inputEvent = new Event("input", {
+                        bubbles: true,
+                        cancelable: true,
+                    });
+                    nativeInput.dispatchEvent(inputEvent);
+                    const changeEventNative = new Event("change", {
+                        bubbles: true,
+                        cancelable: true,
+                    });
+                    nativeInput.dispatchEvent(changeEventNative);
+                }
+            }
+            // Actualizar el displayValue
+            setDisplayValue(dateString);
             setInternalDate(date);
-            setInputValue(formatDateToString(date, format));
         }
-        onChange?.(date);
+        else {
+            // Modo Controller - comportamiento original
+            setInternalDate(date);
+            setDisplayValue(dateString);
+            if (onChange) {
+                const dayjsHandler = onChange;
+                dayjsHandler(date);
+            }
+        }
         setIsOpen(false);
     };
     const handleInputChange = (event) => {
+        if (readOnly)
+            return;
         const newValue = event.target.value;
-        setInputValue(newValue);
-        // No intentamos parsear en cada pulsación, solo actualizamos el texto.
+        isTypingRef.current = true;
+        if (isRegisterMode) {
+            // En modo register, actualizar el displayValue mientras el usuario escribe
+            setDisplayValue(newValue);
+        }
+        else {
+            // Modo Controller
+            setDisplayValue(newValue);
+        }
     };
     const handleInputBlur = (event) => {
+        isTypingRef.current = false;
         const newValue = event.target.value.trim();
-        if (!newValue) {
-            handleDateChange(null);
-            return;
-        }
-        const parsed = parseDateFromString(newValue, format);
-        if (parsed) {
-            handleDateChange(parsed);
+        if (isRegisterMode) {
+            // En modo register, validar y actualizar el input nativo
+            if (!newValue) {
+                // Limpiar el valor
+                if (inputRef.current) {
+                    const nativeInput = inputRef.current;
+                    const setter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value")?.set;
+                    setter?.call(nativeInput, "");
+                    if (onChange) {
+                        const changeEvent = {
+                            target: nativeInput,
+                            currentTarget: nativeInput,
+                        };
+                        onChange(changeEvent);
+                    }
+                    const inputEvent = new Event("input", { bubbles: true });
+                    nativeInput.dispatchEvent(inputEvent);
+                    const changeEventNative = new Event("change", { bubbles: true });
+                    nativeInput.dispatchEvent(changeEventNative);
+                }
+                setDisplayValue("");
+                setInternalDate(null);
+            }
+            else {
+                const parsed = parseDateFromString(newValue, format);
+                if (parsed) {
+                    handleDateChange(parsed);
+                }
+                else {
+                    // Si no es válida, restaurar el valor anterior
+                    const previousValue = inputRef.current?.value || "";
+                    setDisplayValue(previousValue);
+                }
+            }
+            // Llamar al onBlur de register si existe
+            if (registerOnBlur) {
+                registerOnBlur(event);
+            }
         }
         else {
-            // Si no es válida, restauramos el valor anterior formateado.
-            setInputValue(formatDateToString(internalDate, format));
+            // Modo Controller
+            if (!newValue) {
+                handleDateChange(null);
+            }
+            else {
+                const parsed = parseDateFromString(newValue, format);
+                if (parsed) {
+                    handleDateChange(parsed);
+                }
+                else {
+                    // Si no es válida, restaurar el valor anterior formateado
+                    setDisplayValue(formatDateToString(internalDate, format));
+                }
+            }
         }
     };
     const handleIconClick = (event) => {
+        if (readOnly)
+            return;
         event.preventDefault();
         setIsOpen((prev) => !prev);
     };
     React.useEffect(() => {
+        if (!isOpen)
+            return;
         const handleClickOutside = (event) => {
-            if (containerRef.current &&
-                !containerRef.current.contains(event.target)) {
+            const target = event.target;
+            const isClickInsideContainer = containerRef.current?.contains(target);
+            const isClickInsidePicker = pickerRef.current?.contains(target);
+            if (!isClickInsideContainer && !isClickInsidePicker) {
                 setIsOpen(false);
             }
         };
-        document.addEventListener("mousedown", handleClickOutside);
+        // Pequeño delay para asegurar que el portal esté montado
+        const timer = setTimeout(() => {
+            document.addEventListener("mousedown", handleClickOutside);
+        }, 0);
         return () => {
+            clearTimeout(timer);
             document.removeEventListener("mousedown", handleClickOutside);
         };
-    }, []);
-    const datePickerInitialViewDate = internalDate ?? datePickerProps?.initialViewDate ?? new Date();
-    return (_jsxs("div", { ref: containerRef, className: "relative w-full", children: [_jsxs("div", { ref: inputWrapperRef, className: "relative", children: [_jsx(Input, { ...inputProps, type: "text", value: inputValue, onChange: handleInputChange, onBlur: handleInputBlur, icon: iconPosition === "right" ? undefined : icon, iconPosition: iconPosition, placeholder: inputProps.placeholder ??
-                            (format === "mm/dd/yyyy" ? "mm/dd/yyyy" : "dd/mm/yyyy"), className: `${className} ${iconPosition === "right" ? "pr-10" : ""}` }), iconPosition === "right" && (_jsx("div", { ref: iconRef, className: "absolute right-3 cursor-pointer", onMouseDown: handleIconClick, children: _jsx("i", { className: `fa ${icon} ${inputProps.size === "sm"
-                                ? "w-4 h-4"
-                                : inputProps.size === "lg"
-                                    ? "w-6 h-6"
-                                    : "w-5 h-5"} text-[var(--color-text-muted)]` }) }))] }), isOpen && (_jsx("div", { className: "absolute z-20 mt-1 right-0", children: _jsx(DatePicker, { ...datePickerProps, value: internalDate ?? datePickerInitialViewDate, onChange: (date) => handleDateChange(date) }) }))] }));
-};
+    }, [isOpen]);
+    // Combinar refs: el ref del componente y el ref interno
+    const combinedRef = React.useCallback((node) => {
+        inputRef.current = node;
+        if (typeof ref === "function") {
+            ref(node);
+        }
+        else if (ref) {
+            ref.current = node;
+        }
+        // Cuando el ref se establece en modo register, sincronizar el displayValue
+        if (isRegisterMode && node) {
+            [0, 10, 50, 100, 200, 500].forEach((delay) => {
+                setTimeout(() => {
+                    if (node && inputRef.current === node) {
+                        const formValue = node.value;
+                        if (formValue) {
+                            const parsed = parseDateFromString(formValue, format);
+                            if (parsed) {
+                                setDisplayValue(formatDateToString(parsed, format));
+                                setInternalDate(parsed);
+                            }
+                            else {
+                                setDisplayValue(formValue);
+                            }
+                        }
+                    }
+                }, delay);
+            });
+        }
+    }, [ref, isRegisterMode, format]);
+    const datePickerInitialViewDate = internalDate ?? datePickerProps?.initialViewDate ?? dayjs();
+    // Ocultar el ícono cuando está en modo readOnly
+    const displayIcon = readOnly ? undefined : icon;
+    const displayIconPosition = readOnly ? undefined : iconPosition;
+    const displayOnIconClick = readOnly ? undefined : handleIconClick;
+    // Verificar que estamos en el navegador
+    // Inicializar isMounted de forma síncrona si es posible
+    const [isMounted, setIsMounted] = React.useState(() => {
+        return typeof document !== "undefined" && !!document.body;
+    });
+    React.useEffect(() => {
+        if (!isMounted && typeof document !== "undefined" && document.body) {
+            setIsMounted(true);
+        }
+    }, [isMounted]);
+    // Actualizar posición del picker cuando se abre
+    React.useEffect(() => {
+        if (isOpen && !readOnly && containerRef.current && isMounted) {
+            const updatePosition = () => {
+                const rect = containerRef.current?.getBoundingClientRect();
+                if (rect) {
+                    setPickerPosition({
+                        top: rect.bottom + window.scrollY + 4,
+                        left: rect.right + window.scrollX - 280, // Alinear a la derecha
+                        width: rect.width,
+                    });
+                }
+            };
+            updatePosition();
+            window.addEventListener("scroll", updatePosition, true);
+            window.addEventListener("resize", updatePosition);
+            return () => {
+                window.removeEventListener("scroll", updatePosition, true);
+                window.removeEventListener("resize", updatePosition);
+            };
+        }
+        else {
+            setPickerPosition(null);
+        }
+    }, [isOpen, readOnly, isMounted]);
+    return (_jsxs("div", { ref: containerRef, className: "relative w-full", children: [_jsx(Input, { ...restInputProps, ref: combinedRef, type: "text", value: inputValue, onChange: handleInputChange, onBlur: handleInputBlur, icon: displayIcon, iconPosition: displayIconPosition, onIconClick: displayOnIconClick, placeholder: restInputProps.placeholder ??
+                    (format === "mm/dd/yyyy" ? "mm/dd/yyyy" : "dd/mm/yyyy"), className: className, readOnly: readOnly }), (() => {
+                // Verificar de forma segura que document.body existe y es válido
+                const bodyElement = typeof document !== "undefined" &&
+                    document.body &&
+                    document.body instanceof HTMLElement
+                    ? document.body
+                    : null;
+                return (!readOnly &&
+                    isOpen &&
+                    pickerPosition &&
+                    isMounted &&
+                    bodyElement &&
+                    createPortal(_jsx("div", { ref: pickerRef, className: "fixed z-[2001] min-w-[280px] w-max", style: {
+                            top: `${pickerPosition.top}px`,
+                            left: `${pickerPosition.left}px`,
+                        }, children: _jsx(DatePicker, { ...datePickerProps, value: internalDate ?? datePickerInitialViewDate, onChange: (date) => handleDateChange(date) }) }), bodyElement));
+            })()] }));
+});
+DateInput.displayName = "DateInput";

package/dist/components/form-controls/DatePicker.d.ts

@@ -1,12 +1,13 @@
 import React from "react";
+import { type Dayjs } from "dayjs";
 export type DatePickerView = {
     month: number;
     year: number;
 };
 export interface DatePickerProps {
-    value?: Date | null;
-    onChange?: (date: Date) => void;
-    initialViewDate?: Date;
+    value?: Dayjs | null;
+    onChange?: (date: Dayjs) => void;
+    initialViewDate?: Dayjs;
     startWeekOn?: "monday" | "sunday";
     className?: string;
 }

package/dist/components/form-controls/DatePicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../src/components/form-controls/DatePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,WAAW,eAAe;IAC9B,KAAK,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAChC,eAAe,CAAC,EAAE,IAAI,CAAC;IACvB,WAAW,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA4BD,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA2OhD,CAAC"}
+{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../src/components/form-controls/DatePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAc,EAAE,KAAK,KAAK,EAAE,MAAM,OAAO,CAAC;AAG1C,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,WAAW,eAAe;IAC9B,KAAK,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC,eAAe,CAAC,EAAE,KAAK,CAAC;IACxB,WAAW,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAuBD,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA8OhD,CAAC"}