@ceed/cds 1.5.5 → 1.5.6-next.2

package/dist/hooks/use-controlled-state/index.d.ts

@@ -1,3 +1 @@
-export declare function useControlledState<T>(controlledValue: T | undefined, defaultValue: T, onChange?: (value: T) => void, options?: {
-    disableStrict?: boolean;
-}): [T, (value: T | ((prev: T) => T)) => void];
+export declare function useControlledState<T>(controlledValue: T | undefined, defaultValue: T, onChange?: (value: T) => void): [T, (value: T | ((prev: T) => T)) => void, boolean];

package/dist/index.cjs

@@ -406,27 +406,28 @@ var IconButton_default = IconButton;
 
 // src/hooks/use-controlled-state/index.ts
 var import_react5 = require("react");
-function useControlledState(controlledValue, defaultValue, onChange, options) {
+function useControlledState(controlledValue, defaultValue, onChange) {
   const { current: isControlled } = (0, import_react5.useRef)(controlledValue !== void 0);
-  const [displayValue, setDisplayValue] = (0, import_react5.useState)(
+  const [internalValue, setInternalValue] = (0, import_react5.useState)(
     controlledValue ?? defaultValue
   );
+  const displayValue = isControlled ? controlledValue : internalValue;
   (0, import_react5.useEffect)(() => {
     if (isControlled) {
-      setDisplayValue(controlledValue ?? defaultValue);
+      setInternalValue(controlledValue);
     }
-  }, [controlledValue, defaultValue, isControlled]);
+  }, [isControlled, controlledValue]);
   const handleChange = (0, import_react5.useCallback)(
     (value) => {
       const newValue = typeof value === "function" ? value(displayValue) : value;
-      if (options?.disableStrict || !isControlled) {
-        setDisplayValue(newValue);
+      if (!isControlled) {
+        setInternalValue(newValue);
       }
       onChange?.(newValue);
     },
-    [isControlled, onChange, displayValue, options]
+    [isControlled, onChange, displayValue]
   );
-  return [displayValue, handleChange];
+  return [displayValue, handleChange, isControlled];
 }
 
 // src/components/Autocomplete/Autocomplete.tsx
@@ -2349,8 +2350,7 @@ var DatePicker = (0, import_react19.forwardRef)(
       (0, import_react19.useCallback)(
         (value2) => onChange?.({ target: { name: props.name, value: value2 } }),
         [props.name, onChange]
-      ),
-      { disableStrict: true }
+      )
     );
     const [displayValue, setDisplayValue] = (0, import_react19.useState)(
       () => value ? formatValueString(parseDate(value, format), displayFormat) : ""
@@ -4127,8 +4127,7 @@ var DateRangePicker = (0, import_react26.forwardRef)(
       (0, import_react26.useCallback)(
         (value2) => onChange?.({ target: { name: props.name, value: value2 } }),
         [props.name, onChange]
-      ),
-      { disableStrict: true }
+      )
     );
     const [anchorEl, setAnchorEl] = (0, import_react26.useState)(null);
     const open = Boolean(anchorEl);
@@ -4616,7 +4615,6 @@ var MonthPicker = (0, import_react33.forwardRef)(
        * NOTE: 현재 CalendarDate는 YYYY-MM-DD로 개발하고 있어 date를 포함하여 value를 관리한다.
        * @see https://ecubelabs.atlassian.net/wiki/spaces/SW/pages/1938784349/Date#CalendarDate
        * @see https://github.com/Ecube-Labs/hds/pull/145
-       * 
        */
       format = "YYYY/MM/DD",
       displayFormat = "YYYY/MM",
@@ -4626,17 +4624,31 @@ var MonthPicker = (0, import_react33.forwardRef)(
     } = props;
     const innerRef = (0, import_react33.useRef)(null);
     const buttonRef = (0, import_react33.useRef)(null);
-    const [value, setValue] = useControlledState(
+    const [value, setValue, isControlled] = useControlledState(
       props.value,
       props.defaultValue || "",
       (0, import_react33.useCallback)(
         (value2) => onChange?.({ target: { name: props.name, value: value2 } }),
         [props.name, onChange]
-      ),
-      { disableStrict: true }
+      )
+    );
+    const getFormattedDisplayValue = (0, import_react33.useCallback)(
+      (inputValue) => {
+        if (!inputValue) return "";
+        try {
+          return formatValueString3(
+            parseDate3(inputValue, format),
+            displayFormat,
+            locale
+          );
+        } catch (e) {
+          return inputValue;
+        }
+      },
+      [format, displayFormat, locale]
     );
     const [displayValue, setDisplayValue] = (0, import_react33.useState)(
-      () => value ? formatValueString3(parseDate3(value, format), displayFormat, locale) : ""
+      () => getFormattedDisplayValue(value)
     );
     const [anchorEl, setAnchorEl] = (0, import_react33.useState)(null);
     const open = Boolean(anchorEl);
@@ -4649,26 +4661,17 @@ var MonthPicker = (0, import_react33.forwardRef)(
       innerRef
     ]);
     (0, import_react33.useEffect)(() => {
-      if (value === "") {
-        setDisplayValue("");
-        return;
-      }
-      const formattedValue = formatValueString3(
-        parseDate3(value, format),
-        displayFormat,
-        locale
-      );
-      setDisplayValue(formattedValue);
-    }, [displayFormat, format, value]);
+      setDisplayValue(getFormattedDisplayValue(value));
+    }, [value, getFormattedDisplayValue]);
     const handleChange = (0, import_react33.useCallback)(
       (event) => {
-        const value2 = event.target.value;
-        setDisplayValue(
-          value2 ? formatValueString3(parseDate3(value2, format), displayFormat, locale) : value2
-        );
-        setValue(value2);
+        const newValue = event.target.value;
+        setValue(newValue);
+        if (!isControlled) {
+          setDisplayValue(getFormattedDisplayValue(newValue));
+        }
       },
-      [displayFormat, format, setValue, locale]
+      [setValue, getFormattedDisplayValue, isControlled]
     );
     const handleCalendarToggle = (0, import_react33.useCallback)(
       (event) => {
@@ -4920,8 +4923,7 @@ var MonthRangePicker = (0, import_react34.forwardRef)(
       (0, import_react34.useCallback)(
         (value2) => onChange?.({ target: { name: props.name, value: value2 } }),
         [props.name, onChange]
-      ),
-      { disableStrict: true }
+      )
     );
     const [anchorEl, setAnchorEl] = (0, import_react34.useState)(null);
     const open = Boolean(anchorEl);

package/dist/index.js

@@ -325,27 +325,28 @@ var IconButton_default = IconButton;
 
 // src/hooks/use-controlled-state/index.ts
 import { useState, useCallback, useEffect, useRef } from "react";
-function useControlledState(controlledValue, defaultValue, onChange, options) {
+function useControlledState(controlledValue, defaultValue, onChange) {
   const { current: isControlled } = useRef(controlledValue !== void 0);
-  const [displayValue, setDisplayValue] = useState(
+  const [internalValue, setInternalValue] = useState(
     controlledValue ?? defaultValue
   );
+  const displayValue = isControlled ? controlledValue : internalValue;
   useEffect(() => {
     if (isControlled) {
-      setDisplayValue(controlledValue ?? defaultValue);
+      setInternalValue(controlledValue);
     }
-  }, [controlledValue, defaultValue, isControlled]);
+  }, [isControlled, controlledValue]);
   const handleChange = useCallback(
     (value) => {
       const newValue = typeof value === "function" ? value(displayValue) : value;
-      if (options?.disableStrict || !isControlled) {
-        setDisplayValue(newValue);
+      if (!isControlled) {
+        setInternalValue(newValue);
       }
       onChange?.(newValue);
     },
-    [isControlled, onChange, displayValue, options]
+    [isControlled, onChange, displayValue]
   );
-  return [displayValue, handleChange];
+  return [displayValue, handleChange, isControlled];
 }
 
 // src/components/Autocomplete/Autocomplete.tsx
@@ -2311,8 +2312,7 @@ var DatePicker = forwardRef6(
       useCallback7(
         (value2) => onChange?.({ target: { name: props.name, value: value2 } }),
         [props.name, onChange]
-      ),
-      { disableStrict: true }
+      )
     );
     const [displayValue, setDisplayValue] = useState5(
       () => value ? formatValueString(parseDate(value, format), displayFormat) : ""
@@ -4103,8 +4103,7 @@ var DateRangePicker = forwardRef8(
       useCallback10(
         (value2) => onChange?.({ target: { name: props.name, value: value2 } }),
         [props.name, onChange]
-      ),
-      { disableStrict: true }
+      )
     );
     const [anchorEl, setAnchorEl] = useState7(null);
     const open = Boolean(anchorEl);
@@ -4612,7 +4611,6 @@ var MonthPicker = forwardRef9(
        * NOTE: 현재 CalendarDate는 YYYY-MM-DD로 개발하고 있어 date를 포함하여 value를 관리한다.
        * @see https://ecubelabs.atlassian.net/wiki/spaces/SW/pages/1938784349/Date#CalendarDate
        * @see https://github.com/Ecube-Labs/hds/pull/145
-       * 
        */
       format = "YYYY/MM/DD",
       displayFormat = "YYYY/MM",
@@ -4622,17 +4620,31 @@ var MonthPicker = forwardRef9(
     } = props;
     const innerRef = useRef6(null);
     const buttonRef = useRef6(null);
-    const [value, setValue] = useControlledState(
+    const [value, setValue, isControlled] = useControlledState(
       props.value,
       props.defaultValue || "",
       useCallback11(
         (value2) => onChange?.({ target: { name: props.name, value: value2 } }),
         [props.name, onChange]
-      ),
-      { disableStrict: true }
+      )
+    );
+    const getFormattedDisplayValue = useCallback11(
+      (inputValue) => {
+        if (!inputValue) return "";
+        try {
+          return formatValueString3(
+            parseDate3(inputValue, format),
+            displayFormat,
+            locale
+          );
+        } catch (e) {
+          return inputValue;
+        }
+      },
+      [format, displayFormat, locale]
     );
     const [displayValue, setDisplayValue] = useState9(
-      () => value ? formatValueString3(parseDate3(value, format), displayFormat, locale) : ""
+      () => getFormattedDisplayValue(value)
     );
     const [anchorEl, setAnchorEl] = useState9(null);
     const open = Boolean(anchorEl);
@@ -4645,26 +4657,17 @@ var MonthPicker = forwardRef9(
       innerRef
     ]);
     useEffect8(() => {
-      if (value === "") {
-        setDisplayValue("");
-        return;
-      }
-      const formattedValue = formatValueString3(
-        parseDate3(value, format),
-        displayFormat,
-        locale
-      );
-      setDisplayValue(formattedValue);
-    }, [displayFormat, format, value]);
+      setDisplayValue(getFormattedDisplayValue(value));
+    }, [value, getFormattedDisplayValue]);
     const handleChange = useCallback11(
       (event) => {
-        const value2 = event.target.value;
-        setDisplayValue(
-          value2 ? formatValueString3(parseDate3(value2, format), displayFormat, locale) : value2
-        );
-        setValue(value2);
+        const newValue = event.target.value;
+        setValue(newValue);
+        if (!isControlled) {
+          setDisplayValue(getFormattedDisplayValue(newValue));
+        }
       },
-      [displayFormat, format, setValue, locale]
+      [setValue, getFormattedDisplayValue, isControlled]
     );
     const handleCalendarToggle = useCallback11(
       (event) => {
@@ -4924,8 +4927,7 @@ var MonthRangePicker = forwardRef10(
       useCallback12(
         (value2) => onChange?.({ target: { name: props.name, value: value2 } }),
         [props.name, onChange]
-      ),
-      { disableStrict: true }
+      )
     );
     const [anchorEl, setAnchorEl] = useState10(null);
     const open = Boolean(anchorEl);