@ceed/ads 1.40.1 → 1.41.0

package/dist/index.cjs

@@ -415,13 +415,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;
@@ -528,6 +532,7 @@ var AutocompleteListBox = import_react6.default.forwardRef((props, ref) => {
     )
   ))));
 });
+var EMPTY_MULTIPLE_VALUE = [];
 var autocompleteDeleteSize = {
   sm: "20px",
   md: "24px",
@@ -570,9 +575,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: {
@@ -583,6 +588,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") {
@@ -643,7 +649,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,
@@ -1965,6 +1971,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,
@@ -1977,8 +1987,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?.({
@@ -1997,8 +2007,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);
   };
@@ -2008,7 +2019,7 @@ var Input = import_react18.default.forwardRef((props, ref) => {
   const input = /* @__PURE__ */ import_react18.default.createElement(
     MotionInput,
     {
-      value,
+      value: displayValue ?? "",
       name,
       onChange: handleChange,
       required,
@@ -2029,7 +2040,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(),
@@ -2267,7 +2278,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)(() => {
@@ -2282,22 +2293,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,
@@ -2975,11 +2981,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) : ""
@@ -5264,11 +5274,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) : ""
@@ -5616,6 +5630,7 @@ var import_react34 = __toESM(require("react"));
 var import_Search = __toESM(require("@mui/icons-material/Search"));
 var import_joy44 = 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_react34.useRef)(null);
@@ -5663,11 +5678,12 @@ function FilterableCheckboxGroup(inProps) {
   } = props;
   const [searchTerm, setSearchTerm] = (0, import_react34.useState)("");
   const [sortedOptions, setSortedOptions] = (0, import_react34.useState)(options);
-  const [internalValue, setInternalValue] = useControlledState(
+  const [rawValue, setInternalValue] = useControlledState(
     value,
-    value ?? [],
-    (0, import_react34.useCallback)((newValue) => onChange?.(newValue), [onChange])
+    value ?? EMPTY_VALUE,
+    (0, import_react34.useCallback)((newValue) => onChange?.(newValue ?? []), [onChange])
   );
+  const internalValue = rawValue ?? EMPTY_VALUE;
   const parentRef = (0, import_react34.useRef)(null);
   const isInitialSortRef = (0, import_react34.useRef)(false);
   const prevOptionsRef = (0, import_react34.useRef)([...options]);
@@ -6202,11 +6218,15 @@ var MonthRangePicker = (0, import_react39.forwardRef)((inProps, ref) => {
   const isAlphabeticDisplay = hasAlphabeticMonth3(displayFormat);
   const innerRef = (0, import_react39.useRef)(null);
   const buttonRef = (0, import_react39.useRef)(null);
-  const [value, setValue] = useControlledState(
+  const [rawValue, setValue] = 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 [displayValue, setDisplayValue] = (0, import_react39.useState)(
     () => value ? formatValueString3(parseDates2(value), displayFormat, locale) : ""
   );
@@ -6433,7 +6453,7 @@ function CurrencyInput3(props) {
   const [internalValue, setInternalValue] = useControlledState(value, value, onChange);
   const handleCurrencyChange = (0, import_react41.useCallback)(
     (event) => {
-      const newValue = event.target.value;
+      const newValue = event.target.value ?? void 0;
       setInternalValue(newValue);
     },
     [setInternalValue]
@@ -6466,7 +6486,7 @@ function CurrencyRange(props) {
   const maxValue = internalValue?.[1];
   const handleMinChange = (0, import_react42.useCallback)(
     (event) => {
-      const newMinValue = event.target.value;
+      const newMinValue = event.target.value ?? void 0;
       const currentMaxValue = maxValue;
       if (newMinValue !== void 0 && currentMaxValue !== void 0) {
         setInternalValue([newMinValue, currentMaxValue]);
@@ -6480,7 +6500,7 @@ function CurrencyRange(props) {
   );
   const handleMaxChange = (0, import_react42.useCallback)(
     (event) => {
-      const newMaxValue = event.target.value;
+      const newMaxValue = event.target.value ?? void 0;
       const currentMinValue = minValue;
       if (currentMinValue !== void 0 && newMaxValue !== void 0) {
         setInternalValue([currentMinValue, newMaxValue]);
@@ -6586,34 +6606,30 @@ var PercentageInput = import_react43.default.forwardRef(
     } = props;
     const [_value, setValue] = useControlledState(
       props.value,
-      props.defaultValue,
+      props.defaultValue ?? null,
       (0, import_react43.useCallback)((value2) => onChange?.({ target: { name, value: value2 } }), [onChange, name])
     );
-    const [internalError, setInternalError] = (0, import_react43.useState)(
-      max && _value && _value > max || min && _value && _value < min
-    );
     const value = (0, import_react43.useMemo)(() => {
       if (_value && useMinorUnit) {
         return _value / Math.pow(10, maxDecimalScale);
       }
       return _value;
     }, [_value, useMinorUnit, maxDecimalScale]);
+    const internalError = (0, import_react43.useMemo)(
+      () => value != null && (max != null && value > max || min != null && value < min),
+      [max, min, value]
+    );
     const handleChange = (0, import_react43.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_react43.default.createElement(
       PercentageInputRoot,
@@ -6666,7 +6682,7 @@ var PercentageInput3 = ({
     PercentageInput,
     {
       value: _value,
-      onChange: (event) => setValue(event.target.value),
+      onChange: (event) => setValue(event.target.value ?? void 0),
       useMinorUnit,
       maxDecimalScale,
       min,
@@ -6690,7 +6706,7 @@ function PercentageRange(props) {
   const maxValue = internalValue?.[1];
   const handleMinChange = (0, import_react45.useCallback)(
     (event) => {
-      const newMinValue = event.target.value;
+      const newMinValue = event.target.value ?? void 0;
       const currentMaxValue = maxValue;
       if (newMinValue !== void 0) {
         setInternalValue([newMinValue, currentMaxValue || null]);
@@ -6702,7 +6718,7 @@ function PercentageRange(props) {
   );
   const handleMaxChange = (0, import_react45.useCallback)(
     (event) => {
-      const newMaxValue = event.target.value;
+      const newMaxValue = event.target.value ?? void 0;
       const currentMinValue = minValue;
       if (newMaxValue !== void 0) {
         setInternalValue([currentMinValue || null, newMaxValue]);
@@ -6756,7 +6772,7 @@ function Autocomplete2(props) {
   const autocompleteValue = typeof internalValue === "string" || typeof internalValue === "number" ? String(internalValue) : void 0;
   const handleChange = (0, import_react46.useCallback)(
     (event) => {
-      const val = event.target.value;
+      const val = event.target.value ?? void 0;
       if (val) {
         const numVal = Number(val);
         setInternalValue(!isNaN(numVal) && isFinite(numVal) ? numVal : val);
@@ -7544,11 +7560,15 @@ var MonthPicker = (0, import_react52.forwardRef)((inProps, ref) => {
   } = props;
   const innerRef = (0, import_react52.useRef)(null);
   const buttonRef = (0, import_react52.useRef)(null);
-  const [value, setValue, isControlled] = useControlledState(
+  const [rawValue, setValue, isControlled] = useControlledState(
     props.value,
-    props.defaultValue || "",
-    (0, import_react52.useCallback)((value2) => onChange?.({ target: { name: props.name, value: value2 } }), [props.name, onChange])
+    props.defaultValue ?? null,
+    (0, import_react52.useCallback)(
+      (value2) => onChange?.({ target: { name: props.name, value: value2 ?? "" } }),
+      [props.name, onChange]
+    )
   );
+  const value = rawValue ?? "";
   const getFormattedDisplayValue = (0, import_react52.useCallback)(
     (inputValue) => {
       if (!inputValue) return "";