@ceed/cds 1.39.1 → 1.40.0

package/dist/index.cjs

@@ -417,13 +417,17 @@ var IconButton_default = IconButton;
 var import_react5 = require("react");
 function useControlledState(controlledValue, defaultValue, onChange) {
   const { current: isControlled } = (0, import_react5.useRef)(controlledValue !== void 0);
-  const [internalValue, setInternalValue] = (0, import_react5.useState)(controlledValue ?? defaultValue);
-  const displayValue = isControlled ? controlledValue : internalValue;
+  const [internalValue, setInternalValue] = (0, import_react5.useState)(controlledValue !== void 0 ? controlledValue : defaultValue);
+  const hasWarnedRef = (0, import_react5.useRef)(false);
   (0, import_react5.useEffect)(() => {
-    if (isControlled) {
-      setInternalValue(controlledValue);
-    }
+    if (false) return;
+    if (hasWarnedRef.current || isControlled === (controlledValue !== void 0)) return;
+    hasWarnedRef.current = true;
+    console.warn(
+      isControlled ? "useControlledState: A component is changing a controlled input to be uncontrolled. Pass `null` instead of `undefined` to keep it controlled with an empty value." : "useControlledState: A component is changing an uncontrolled input to be controlled. Pass `null` instead of `undefined` for the initial empty value to make it controlled from the first render."
+    );
   }, [isControlled, controlledValue]);
+  const displayValue = isControlled ? controlledValue : internalValue;
   const handleChange = (0, import_react5.useCallback)(
     (value) => {
       const newValue = typeof value === "function" ? value(displayValue) : value;
@@ -530,6 +534,7 @@ var AutocompleteListBox = import_react6.default.forwardRef((props, ref) => {
     )
   ))));
 });
+var EMPTY_MULTIPLE_VALUE = [];
 var autocompleteDeleteSize = {
   sm: "20px",
   md: "24px",
@@ -572,9 +577,9 @@ function Autocomplete(props) {
     className,
     ...innerProps
   } = props;
-  const [_value, setValue] = useControlledState(
+  const [rawValue, setValue] = useControlledState(
     props.value,
-    props.defaultValue || "",
+    props.defaultValue ?? null,
     (0, import_react6.useCallback)(
       (value2) => onChange?.({
         target: {
@@ -585,6 +590,7 @@ function Autocomplete(props) {
       [onChange, props.name]
     )
   );
+  const _value = rawValue ?? (props.multiple ? EMPTY_MULTIPLE_VALUE : "");
   const options = (0, import_react6.useMemo)(
     () => props.options.map((option) => {
       if (typeof option !== "object") {
@@ -645,7 +651,7 @@ function Autocomplete(props) {
     (event, value2) => {
       const newValue = value2;
       const _value2 = Array.isArray(newValue) ? newValue.map((value3) => value3.value) : newValue?.value;
-      setValue(_value2);
+      setValue(_value2 ?? null);
       if (Array.isArray(newValue) && newValue.map((value3) => optionMap.get(value3.value)) || optionMap.get(newValue?.value)) {
         onChangeComplete?.({
           ...event,
@@ -1967,6 +1973,10 @@ var Input = import_react18.default.forwardRef((props, ref) => {
     onChange,
     name,
     type,
+    // NOTE: value/defaultValue는 아래에서 직접 다루므로 innerProps 스프레드에서 제외한다.
+    // defaultValue가 스프레드에 남으면 항상 정의되는 value와 함께 DOM input에 도달해 React가 경고한다.
+    value: valueProp,
+    defaultValue: defaultValueProp,
     // NOTE: 스타일 관련된 props는 최상위 엘리먼트에 적용한다.
     sx,
     className,
@@ -1979,8 +1989,8 @@ var Input = import_react18.default.forwardRef((props, ref) => {
   }
   const [passwordVisible, setPasswordVisible] = (0, import_react18.useState)(false);
   const [value, setValue] = useControlledState(
-    props.value,
-    props.defaultValue,
+    valueProp,
+    defaultValueProp ?? null,
     (0, import_react18.useCallback)(
       (value2) => {
         onChange?.({
@@ -1999,8 +2009,9 @@ var Input = import_react18.default.forwardRef((props, ref) => {
     setValue(e.target.value);
   };
   const handleClear = () => {
-    setValue(props.defaultValue || "");
+    setValue(defaultValueProp || "");
   };
+  const displayValue = valueProp !== void 0 ? valueProp : value;
   const handleTogglePasswordVisibility = () => {
     setPasswordVisible((prev) => !prev);
   };
@@ -2010,7 +2021,7 @@ var Input = import_react18.default.forwardRef((props, ref) => {
   const input = /* @__PURE__ */ import_react18.default.createElement(
     MotionInput,
     {
-      value,
+      value: displayValue ?? "",
       name,
       onChange: handleChange,
       required,
@@ -2031,7 +2042,7 @@ var Input = import_react18.default.forwardRef((props, ref) => {
           "aria-label": passwordVisible ? "Hide password" : "Show password"
         },
         passwordVisible ? /* @__PURE__ */ import_react18.default.createElement(import_VisibilityOff.default, null) : /* @__PURE__ */ import_react18.default.createElement(import_Visibility.default, null)
-      )) : null : enableClearable ? /* @__PURE__ */ import_react18.default.createElement(Stack_default, { gap: 1, direction: "row" }, innerProps.endDecorator, value && /* @__PURE__ */ import_react18.default.createElement(
+      )) : null : enableClearable ? /* @__PURE__ */ import_react18.default.createElement(Stack_default, { gap: 1, direction: "row" }, innerProps.endDecorator, displayValue && /* @__PURE__ */ import_react18.default.createElement(
         IconButton_default,
         {
           onMouseDown: (e) => e.preventDefault(),
@@ -2269,7 +2280,7 @@ var CurrencyInput = import_react19.default.forwardRef(function CurrencyInput2(in
   const { symbol, thousandSeparator, decimalSeparator, placeholder, fixedDecimalScale, decimalScale } = useCurrencySetting(props);
   const [_value, setValue] = useControlledState(
     props.value,
-    props.defaultValue,
+    props.defaultValue ?? null,
     (0, import_react19.useCallback)((value2) => onChange?.({ target: { name, value: value2 } }), [onChange, name])
   );
   const value = (0, import_react19.useMemo)(() => {
@@ -2284,22 +2295,17 @@ var CurrencyInput = import_react19.default.forwardRef(function CurrencyInput2(in
     }
     return props.max;
   }, [props.max, useMinorUnit, decimalScale]);
-  const [isOverLimit, setIsOverLimit] = (0, import_react19.useState)(!!max && !!value && value > max);
+  const isOverLimit = (0, import_react19.useMemo)(() => max != null && value != null && value > max, [max, value]);
   const handleChange = (0, import_react19.useCallback)(
     (event) => {
       if (event.target.value === "") {
-        setValue(void 0);
+        setValue(null);
         return;
       }
       const amount = useMinorUnit ? Number(decimalSeparator ? event.target.value?.replace(decimalSeparator, "") : event.target.value) : Number(event.target.value);
-      if (!!max && Number(event.target.value) > max) {
-        setIsOverLimit(true);
-      } else {
-        setIsOverLimit(false);
-      }
       setValue(amount);
     },
-    [decimalSeparator, max, useMinorUnit, setValue]
+    [decimalSeparator, useMinorUnit, setValue]
   );
   return /* @__PURE__ */ import_react19.default.createElement(
     CurrencyInputRoot,
@@ -2977,11 +2983,15 @@ var DatePicker = (0, import_react21.forwardRef)((inProps, ref) => {
   } = props;
   const innerRef = (0, import_react21.useRef)(null);
   const buttonRef = (0, import_react21.useRef)(null);
-  const [value, setValue] = useControlledState(
+  const [rawValue, setValue] = useControlledState(
     props.value,
-    props.defaultValue || "",
-    (0, import_react21.useCallback)((value2) => onChange?.({ target: { name: props.name, value: value2 } }), [props.name, onChange])
+    props.defaultValue ?? null,
+    (0, import_react21.useCallback)(
+      (value2) => onChange?.({ target: { name: props.name, value: value2 ?? "" } }),
+      [props.name, onChange]
+    )
   );
+  const value = rawValue ?? "";
   const isAlphabeticDisplay = hasAlphabeticMonth(displayFormat);
   const [displayValue, setDisplayValue] = (0, import_react21.useState)(
     () => value ? formatValueString(parseDate(value, format), displayFormat, locale) : ""
@@ -5266,11 +5276,15 @@ var DateRangePicker = (0, import_react30.forwardRef)((inProps, ref) => {
   } = props;
   const innerRef = (0, import_react30.useRef)(null);
   const buttonRef = (0, import_react30.useRef)(null);
-  const [value, setValue] = useControlledState(
+  const [rawValue, setValue] = useControlledState(
     props.value,
-    props.defaultValue || "",
-    (0, import_react30.useCallback)((value2) => onChange?.({ target: { name: props.name, value: value2 } }), [props.name, onChange])
+    props.defaultValue ?? null,
+    (0, import_react30.useCallback)(
+      (value2) => onChange?.({ target: { name: props.name, value: value2 ?? "" } }),
+      [props.name, onChange]
+    )
   );
+  const value = rawValue ?? "";
   const isAlphabeticDisplay = hasAlphabeticMonth2(displayFormat);
   const [displayValue, setDisplayValue] = (0, import_react30.useState)(
     () => value ? formatValueString2(parseDates(value, format), displayFormat, locale) : ""
@@ -5641,6 +5655,7 @@ var import_react35 = __toESM(require("react"));
 var import_Search = __toESM(require("@mui/icons-material/Search"));
 var import_joy45 = require("@mui/joy");
 var import_react_virtual3 = require("@tanstack/react-virtual");
+var EMPTY_VALUE = [];
 function LabelWithTooltip(props) {
   const { label, size } = props;
   const labelContentRef = (0, import_react35.useRef)(null);
@@ -5688,11 +5703,12 @@ function FilterableCheckboxGroup(inProps) {
   } = props;
   const [searchTerm, setSearchTerm] = (0, import_react35.useState)("");
   const [sortedOptions, setSortedOptions] = (0, import_react35.useState)(options);
-  const [internalValue, setInternalValue] = useControlledState(
+  const [rawValue, setInternalValue] = useControlledState(
     value,
-    value ?? [],
-    (0, import_react35.useCallback)((newValue) => onChange?.(newValue), [onChange])
+    value ?? EMPTY_VALUE,
+    (0, import_react35.useCallback)((newValue) => onChange?.(newValue ?? []), [onChange])
   );
+  const internalValue = rawValue ?? EMPTY_VALUE;
   const parentRef = (0, import_react35.useRef)(null);
   const isInitialSortRef = (0, import_react35.useRef)(false);
   const prevOptionsRef = (0, import_react35.useRef)([...options]);
@@ -6188,11 +6204,15 @@ var MonthPicker = (0, import_react39.forwardRef)((inProps, ref) => {
   } = props;
   const innerRef = (0, import_react39.useRef)(null);
   const buttonRef = (0, import_react39.useRef)(null);
-  const [value, setValue, isControlled] = useControlledState(
+  const [rawValue, setValue, isControlled] = useControlledState(
     props.value,
-    props.defaultValue || "",
-    (0, import_react39.useCallback)((value2) => onChange?.({ target: { name: props.name, value: value2 } }), [props.name, onChange])
+    props.defaultValue ?? null,
+    (0, import_react39.useCallback)(
+      (value2) => onChange?.({ target: { name: props.name, value: value2 ?? "" } }),
+      [props.name, onChange]
+    )
   );
+  const value = rawValue ?? "";
   const getFormattedDisplayValue = (0, import_react39.useCallback)(
     (inputValue) => {
       if (!inputValue) return "";
@@ -6474,11 +6494,15 @@ var MonthRangePicker = (0, import_react40.forwardRef)((inProps, ref) => {
   const isAlphabeticDisplay = hasAlphabeticMonth3(displayFormat);
   const innerRef = (0, import_react40.useRef)(null);
   const buttonRef = (0, import_react40.useRef)(null);
-  const [value, setValue] = useControlledState(
+  const [rawValue, setValue] = useControlledState(
     props.value,
-    props.defaultValue || "",
-    (0, import_react40.useCallback)((value2) => onChange?.({ target: { name: props.name, value: value2 } }), [props.name, onChange])
+    props.defaultValue ?? null,
+    (0, import_react40.useCallback)(
+      (value2) => onChange?.({ target: { name: props.name, value: value2 ?? "" } }),
+      [props.name, onChange]
+    )
   );
+  const value = rawValue ?? "";
   const [displayValue, setDisplayValue] = (0, import_react40.useState)(
     () => value ? formatValueString4(parseDates2(value), displayFormat, locale) : ""
   );
@@ -6810,34 +6834,30 @@ var PercentageInput = import_react44.default.forwardRef(
     } = props;
     const [_value, setValue] = useControlledState(
       props.value,
-      props.defaultValue,
+      props.defaultValue ?? null,
       (0, import_react44.useCallback)((value2) => onChange?.({ target: { name, value: value2 } }), [onChange, name])
     );
-    const [internalError, setInternalError] = (0, import_react44.useState)(
-      max && _value && _value > max || min && _value && _value < min
-    );
     const value = (0, import_react44.useMemo)(() => {
       if (_value && useMinorUnit) {
         return _value / Math.pow(10, maxDecimalScale);
       }
       return _value;
     }, [_value, useMinorUnit, maxDecimalScale]);
+    const internalError = (0, import_react44.useMemo)(
+      () => value != null && (max != null && value > max || min != null && value < min),
+      [max, min, value]
+    );
     const handleChange = (0, import_react44.useCallback)(
       (event) => {
         if (event.target.value === "") {
-          setValue(void 0);
+          setValue(null);
           return;
         }
         const originalAmount = Number(event.target.value);
-        if (min && originalAmount < min || max && originalAmount > max) {
-          setInternalError(true);
-        } else {
-          setInternalError(false);
-        }
         const amount = useMinorUnit ? padDecimal(originalAmount, maxDecimalScale) : originalAmount;
         setValue(amount);
       },
-      [setValue, useMinorUnit, maxDecimalScale, min, max]
+      [setValue, useMinorUnit, maxDecimalScale]
     );
     return /* @__PURE__ */ import_react44.default.createElement(
       PercentageInputRoot,