kiban-design-system 1.1.8 → 1.1.9

package/dist/index.esm.js

@@ -16171,10 +16171,43 @@ const AlphaInputDate = ({
       year: reference.getFullYear()
     };
   });
-  const [inputValue, setInputValue] = useState();
+  const initialDateState = (() => {
+    if (value) {
+      const validDate = getValidDate(value);
+      if (validDate) {
+        const normalizedDate = normalizeDate(validDate.start);
+        return {
+          selectedDate: {
+            start: normalizedDate,
+            end: normalizedDate
+          },
+          inputValue: formatDate(normalizedDate) || ""
+        };
+      }
+    }
+    return {
+      selectedDate: null,
+      inputValue: undefined
+    };
+  })();
+  const [inputValue, setInputValue] = useState(initialDateState.inputValue);
   const [isErrorTooltipActive, setIsErrorTooltipActive] = useState(false);
-  const [selectedDate, setSelectedDate] = useState();
+  const [selectedDate, setSelectedDate] = useState(initialDateState.selectedDate);
   const inputRef = useRef(null);
+  const isInternalUpdateRef = useRef(false);
+  const lastValueRef = useRef(initialDateState.inputValue || value);
+  const onChangeRef = useRef(onChange);
+  const isMountedRef = useRef(false);
+
+  // Actualizar la referencia de onChange cuando cambia
+  useEffect(() => {
+    onChangeRef.current = onChange;
+  }, [onChange]);
+
+  // Marcar que el componente está montado después del primer render
+  useEffect(() => {
+    isMountedRef.current = true;
+  }, []);
   const className = cssClassName(COMPONENT_NAME$s);
   const normalizedMinDate = useMemo(() => minDate ? normalizeDate(minDate) : undefined, [minDate]);
   const normalizedMaxDate = useMemo(() => maxDate ? normalizeDate(maxDate) : undefined, [maxDate]);
@@ -16185,13 +16218,22 @@ const AlphaInputDate = ({
     });
   };
   const handleDateChange = date => {
-    if (onChange) {
-      onChange(date.start);
-    }
+    const normalizedDate = normalizeDate(date.start);
+    isInternalUpdateRef.current = true;
     setSelectedDate({
-      start: date.start,
-      end: date.end
+      start: normalizedDate,
+      end: normalizedDate
+    });
+    setInputValue(formatDate(normalizedDate) || "");
+    setDate({
+      month: normalizedDate.getMonth(),
+      year: normalizedDate.getFullYear()
     });
+    lastValueRef.current = formatDate(normalizedDate) || undefined;
+    if (onChangeRef.current && isMountedRef.current) {
+      onChangeRef.current(normalizedDate);
+    }
+    isInternalUpdateRef.current = false;
     setIsPopoverActive(false);
   };
   const handlePaste = e => {
@@ -16237,20 +16279,39 @@ const AlphaInputDate = ({
       onBlur();
     }
   };
+
+  // Sincronizar value externo con selectedDate (solo cuando value cambia externamente)
   useEffect(() => {
-    if (value !== undefined && !selectedDate) {
-      const validDate = getValidDate(value);
-      setSelectedDate(validDate || null);
+    if (isInternalUpdateRef.current) {
+      return;
     }
-    if (!value && inputValue) {
-      const fallback = normalizedMaxDate ?? normalizeDate();
-      setDate({
-        month: fallback.getMonth(),
-        year: fallback.getFullYear()
-      });
-      setSelectedDate(undefined);
+    if (value !== lastValueRef.current) {
+      lastValueRef.current = value;
+      if (value !== undefined && value !== null && value !== "") {
+        const validDate = getValidDate(value);
+        if (validDate) {
+          const normalizedDate = normalizeDate(validDate.start);
+          setSelectedDate({
+            start: normalizedDate,
+            end: normalizedDate
+          });
+          setInputValue(formatDate(normalizedDate) || "");
+          setDate({
+            month: normalizedDate.getMonth(),
+            year: normalizedDate.getFullYear()
+          });
+        }
+      } else if (!value) {
+        const fallback = normalizedMaxDate ?? normalizeDate();
+        setDate({
+          month: fallback.getMonth(),
+          year: fallback.getFullYear()
+        });
+        setSelectedDate(null);
+        setInputValue("");
+      }
     }
-  }, [value, inputValue, normalizedMaxDate, selectedDate]);
+  }, [value, normalizedMaxDate]);
   useEffect(() => {
     if (inputRef.current) {
       inputRef.current.querySelector("input")?.addEventListener("paste", handlePaste);
@@ -16261,33 +16322,43 @@ const AlphaInputDate = ({
       }
     };
   }, []);
+
+  // Sincronizar inputValue con selectedDate cuando el usuario escribe
   useEffect(() => {
-    if (inputValue !== undefined) {
-      const validDate = getValidDate(inputValue);
-      if (validDate) {
-        setSelectedDate(validDate);
-      } else {
-        setSelectedDate(null);
-      }
+    if (isInternalUpdateRef.current || inputValue === undefined || !isMountedRef.current) {
+      return;
     }
-  }, [inputValue]);
-  useEffect(() => {
-    if (selectedDate !== undefined) {
-      if (selectedDate) {
-        const currentDate = normalizeDate(selectedDate.start);
+    const validDate = getValidDate(inputValue);
+    if (validDate) {
+      const normalizedDate = normalizeDate(validDate.start);
+      const formattedDate = formatDate(normalizedDate) || undefined;
+      // Solo actualizar si el valor formateado es diferente al último valor conocido
+      if (formattedDate !== lastValueRef.current) {
+        isInternalUpdateRef.current = true;
+        setSelectedDate({
+          start: normalizedDate,
+          end: normalizedDate
+        });
         setDate({
-          month: currentDate.getMonth(),
-          year: currentDate.getFullYear()
+          month: normalizedDate.getMonth(),
+          year: normalizedDate.getFullYear()
         });
-        setInputValue(formatDate(currentDate) || "");
-        if (onChange) {
-          onChange(currentDate);
+        lastValueRef.current = formattedDate;
+        if (onChangeRef.current) {
+          onChangeRef.current(normalizedDate);
         }
-      } else if (onChange) {
-        onChange(null);
+        isInternalUpdateRef.current = false;
       }
+    } else if (inputValue === "" && lastValueRef.current !== undefined) {
+      isInternalUpdateRef.current = true;
+      setSelectedDate(null);
+      lastValueRef.current = undefined;
+      if (onChangeRef.current) {
+        onChangeRef.current(null);
+      }
+      isInternalUpdateRef.current = false;
     }
-  }, [selectedDate, onChange]);
+  }, [inputValue]);
   useEffect(() => {
     if (!selectedDate && normalizedMaxDate) {
       setDate(prevDate => {