@ceed/ads 1.8.0 → 1.8.2

package/dist/components/DateRangePicker/DateRangePicker.d.ts

@@ -1,6 +1,9 @@
 import React from "react";
 import Input from "../Input";
 interface BaseDateRangePickerProps {
+    /**
+     * props.format 의 형식을 따라야 한다.
+     */
     value?: string;
     defaultValue?: string;
     onChange?: (event: {
@@ -19,7 +22,14 @@ interface BaseDateRangePickerProps {
     maxDate?: string;
     disableFuture?: boolean;
     disablePast?: boolean;
+    /**
+     * value, onChange의 값은 해당 포맷을 따른다.
+     */
     format?: string;
+    /**
+     * Input 에 표시되는 값의 포맷을 지정한다.
+     */
+    displayFormat?: string;
     inputReadOnly?: boolean;
     hideClearButton?: boolean;
 }

package/dist/components/FilterMenu/FilterMenu.d.ts

@@ -4,6 +4,7 @@ interface FilterMenuProps {
     filters?: FilterItem[];
     values?: Record<string, any>;
     defaultValues?: Record<string, any>;
+    resetValues?: Record<string, any>;
     onChange?: (values: Record<string, any>) => void;
     onClose?: () => void;
     /**

package/dist/components/FilterMenu/components/PercentageRange.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 import { FilterPercentageRangeItem } from "../types";
 interface PercentageRangeProps extends FilterPercentageRangeItem {
-    onChange?: (value: [number, number] | null) => void;
+    onChange?: (value: [number | null, number | null] | null) => void;
 }
 declare function PercentageRange(props: PercentageRangeProps): React.JSX.Element | null;
 declare namespace PercentageRange {

package/dist/components/FilterMenu/types.d.ts

@@ -24,7 +24,7 @@ export interface FilterRadioGroupItem extends FilterBaseItem<string | number> {
         value: string | number;
     }[];
 }
-export interface FilterDateRangeItem extends FilterBaseItem<[DateTime, DateTime]>, Pick<DateRangePickerProps, "minDate" | "maxDate" | "disableFuture" | "disablePast" | "format" | "inputReadOnly" | "hideClearButton"> {
+export interface FilterDateRangeItem extends FilterBaseItem<[DateTime, DateTime]>, Pick<DateRangePickerProps, "minDate" | "maxDate" | "disableFuture" | "disablePast" | "format" | "displayFormat" | "inputReadOnly" | "hideClearButton"> {
     type: "date-range";
 }
 export interface FilterCurrencyInputItem extends FilterBaseItem<number>, Pick<CurrencyInputProps, "max" | "placeholder" | "useMinorUnit" | "currency"> {

package/dist/index.cjs

@@ -3575,6 +3575,8 @@ function useDataTableRenderer({
   isTotalSelected: _isTotalSelected,
   isRowSelectable
 }) {
+  const onSelectionModelChangeRef = (0, import_react25.useRef)(onSelectionModelChange);
+  onSelectionModelChangeRef.current = onSelectionModelChange;
   const [focusedRowId, setFocusedRowId] = (0, import_react25.useState)(null);
   const [sortModel, setSortModel] = useControlledState(
     controlledSortModel,
@@ -3764,7 +3766,7 @@ function useDataTableRenderer({
     }
   }, [page, rowCount, pageSize, handlePageChange]);
   (0, import_react25.useEffect)(() => {
-    onSelectionModelChange?.([]);
+    onSelectionModelChangeRef.current?.([]);
   }, [page]);
   return {
     rowCount,
@@ -4157,7 +4159,9 @@ var CalendarButton2 = (0, import_joy34.styled)(IconButton_default, {
   "&:focus": {
     "--Icon-color": "currentColor",
     outlineOffset: `${theme.getCssVar("focus-thickness")}`,
-    outline: `${theme.getCssVar("focus-thickness")} solid ${theme.getCssVar("palette-focusVisible")}`
+    outline: `${theme.getCssVar("focus-thickness")} solid ${theme.getCssVar(
+      "palette-focusVisible"
+    )}`
   }
 }));
 var StyledPopper2 = (0, import_joy34.styled)(import_base3.Popper, {
@@ -4183,6 +4187,32 @@ var DateRangePickerRoot = (0, import_joy34.styled)("div", {
 })({
   width: "100%"
 });
+var validValueFormat2 = (value, format) => {
+  try {
+    const [date1Str, date2Str] = value.split(" - ");
+    if (!date1Str || !date2Str) {
+      return false;
+    }
+    const parsedDate1 = parseDate2(date1Str, format);
+    const parsedDate2 = parseDate2(date2Str, format);
+    if (parsedDate1.toString() === "Invalid Date" || parsedDate2.toString() === "Invalid Date") {
+      return false;
+    }
+    const formattedValue = formatValueString2(
+      [parsedDate1, parsedDate2],
+      format
+    );
+    if (value !== formattedValue) {
+      return false;
+    }
+    const regex = new RegExp(
+      `^${format.replace(/Y/g, "\\d").replace(/M/g, "\\d").replace(/D/g, "\\d")} - ${format.replace(/Y/g, "\\d").replace(/M/g, "\\d").replace(/D/g, "\\d")}$`
+    );
+    return regex.test(value);
+  } catch (e) {
+    return false;
+  }
+};
 var formatValueString2 = ([date1, date2], format) => {
   const getStr = (date) => {
     let day = `${date.getDate()}`;
@@ -4279,6 +4309,7 @@ var DateRangePicker = (0, import_react26.forwardRef)(
       sx,
       className,
       format = "YYYY/MM/DD",
+      displayFormat = "YYYY/MM/DD",
       size,
       inputReadOnly,
       hideClearButton,
@@ -4295,12 +4326,27 @@ var DateRangePicker = (0, import_react26.forwardRef)(
         [props.name, onChange]
       )
     );
+    const [displayValue, setDisplayValue] = (0, import_react26.useState)(
+      () => value ? formatValueString2(parseDates(value, format), displayFormat) : ""
+    );
     const [anchorEl, setAnchorEl] = (0, import_react26.useState)(null);
     const open = Boolean(anchorEl);
     const calendarValue = (0, import_react26.useMemo)(
       () => value ? parseDates(value, format) : void 0,
       [value, format]
     );
+    (0, import_react26.useEffect)(() => {
+      if (value) {
+        try {
+          const dates = parseDates(value, format);
+          const newDisplayValue = formatValueString2(dates, displayFormat);
+          setDisplayValue(newDisplayValue);
+        } catch (error2) {
+        }
+      } else {
+        setDisplayValue("");
+      }
+    }, [displayFormat, value, format]);
     (0, import_react26.useEffect)(() => {
       if (!anchorEl) {
         innerRef.current?.blur();
@@ -4311,9 +4357,41 @@ var DateRangePicker = (0, import_react26.forwardRef)(
     ]);
     const handleChange = (0, import_react26.useCallback)(
       (event) => {
-        setValue(event.target.value);
+        const value2 = event.target.value;
+        setDisplayValue(
+          value2 ? formatValueString2(parseDates(value2, format), displayFormat) : value2
+        );
+        setValue(value2);
       },
-      [setValue]
+      [displayFormat, format, setValue]
+    );
+    const handleDisplayInputChange = (0, import_react26.useCallback)(
+      (event) => {
+        if (event.target.value === "") {
+          handleChange({
+            target: {
+              name: props.name,
+              value: ""
+            }
+          });
+          return;
+        }
+        const isValidDisplayValue = validValueFormat2(
+          event.target.value,
+          displayFormat
+        );
+        if (isValidDisplayValue) {
+          const dates = parseDates(event.target.value, displayFormat);
+          const formattedValue = formatValueString2(dates, format);
+          handleChange({
+            target: {
+              name: props.name,
+              value: formattedValue
+            }
+          });
+        }
+      },
+      [displayFormat, format, handleChange, props.name]
     );
     const handleCalendarToggle = (0, import_react26.useCallback)(
       (event) => {
@@ -4325,10 +4403,26 @@ var DateRangePicker = (0, import_react26.forwardRef)(
     const handleCalendarChange = (0, import_react26.useCallback)(
       ([date1, date2]) => {
         if (!date1 || !date2) return;
-        setValue(formatValueString2([date1, date2], format));
+        const formattedValue = formatValueString2([date1, date2], format);
+        if (props.value !== void 0) {
+          onChange?.({ target: { name: props.name, value: formattedValue } });
+        } else {
+          setDisplayValue(
+            formatValueString2([date1, date2], displayFormat)
+          );
+          setValue(formattedValue);
+        }
         setAnchorEl(null);
       },
-      [setValue, setAnchorEl, format]
+      [
+        props.value,
+        props.name,
+        onChange,
+        setValue,
+        setAnchorEl,
+        format,
+        displayFormat
+      ]
     );
     const handleInputMouseDown = (0, import_react26.useCallback)(
       (event) => {
@@ -4346,17 +4440,21 @@ var DateRangePicker = (0, import_react26.forwardRef)(
         color: error ? "danger" : innerProps.color,
         ref,
         size,
-        value,
-        onChange: handleChange,
+        value: displayValue,
+        onChange: handleDisplayInputChange,
         disabled,
         required,
-        placeholder: `${format} - ${format}`,
+        placeholder: `${displayFormat} - ${displayFormat}`,
         slotProps: {
           input: {
             component: TextMaskAdapter5,
             ref: innerRef,
-            format,
-            sx: { "&:hover": { cursor: inputReadOnly || readOnly ? "default" : "text" } },
+            format: displayFormat,
+            sx: {
+              "&:hover": {
+                cursor: inputReadOnly || readOnly ? "default" : "text"
+              }
+            },
             onMouseDown: handleInputMouseDown
           }
         },
@@ -4426,6 +4524,7 @@ var DateRangePicker = (0, import_react26.forwardRef)(
             color: "neutral",
             onClick: () => {
               setValue("");
+              setDisplayValue("");
               setAnchorEl(null);
             }
           },
@@ -4582,7 +4681,7 @@ function CheckboxGroup(props) {
     {
       key: `${id}-${option.value}`,
       label: option.label,
-      checked: internalValue.includes(option.value),
+      checked: internalValue?.includes(option.value),
       onChange: handleCheckboxChange(option.value)
     }
   )));
@@ -4666,6 +4765,7 @@ function DateRange(props) {
     disableFuture,
     disablePast,
     format = "YYYY/MM/DD",
+    displayFormat,
     inputReadOnly,
     hideClearButton
   } = props;
@@ -4820,6 +4920,7 @@ function DateRange(props) {
       disableFuture,
       disablePast,
       format,
+      displayFormat,
       inputReadOnly,
       hideClearButton
     }
@@ -5151,21 +5252,15 @@ function PercentageRange(props) {
     min,
     max
   } = props;
-  const [internalValue, setInternalValue] = useControlledState(
-    value,
-    null,
-    onChange
-  );
+  const [internalValue, setInternalValue] = useControlledState(value, null, onChange);
   const minValue = internalValue?.[0];
   const maxValue = internalValue?.[1];
   const handleMinChange = (0, import_react37.useCallback)(
     (event) => {
       const newMinValue = event.target.value;
       const currentMaxValue = maxValue;
-      if (newMinValue !== void 0 && currentMaxValue !== void 0) {
-        setInternalValue([newMinValue, currentMaxValue]);
-      } else if (newMinValue !== void 0) {
-        setInternalValue([newMinValue, newMinValue]);
+      if (newMinValue !== void 0) {
+        setInternalValue([newMinValue, currentMaxValue || null]);
       } else {
         setInternalValue(null);
       }
@@ -5176,10 +5271,8 @@ function PercentageRange(props) {
     (event) => {
       const newMaxValue = event.target.value;
       const currentMinValue = minValue;
-      if (currentMinValue !== void 0 && newMaxValue !== void 0) {
-        setInternalValue([currentMinValue, newMaxValue]);
-      } else if (newMaxValue !== void 0) {
-        setInternalValue([newMaxValue, newMaxValue]);
+      if (newMaxValue !== void 0) {
+        setInternalValue([currentMinValue || null, newMaxValue]);
       } else {
         setInternalValue(null);
       }
@@ -5202,7 +5295,7 @@ function PercentageRange(props) {
     PercentageInput,
     {
       label: "Minimum",
-      value: minValue,
+      value: minValue ?? void 0,
       onChange: handleMinChange,
       useMinorUnit,
       maxDecimalScale,
@@ -5216,7 +5309,7 @@ function PercentageRange(props) {
     PercentageInput,
     {
       label: "Maximum",
-      value: maxValue,
+      value: maxValue ?? void 0,
       onChange: handleMaxChange,
       useMinorUnit,
       maxDecimalScale,
@@ -5295,6 +5388,7 @@ function FilterMenu(props) {
     filters,
     values,
     defaultValues,
+    resetValues = {},
     onChange,
     onClose,
     useClear,
@@ -5320,11 +5414,11 @@ function FilterMenu(props) {
     onClose?.();
   }, [onChange, onClose, internalValues]);
   const handleClear = (0, import_react39.useCallback)(() => {
-    const clearedValues = defaultValues || {};
+    const clearedValues = resetValues || {};
     setInternalValues(clearedValues);
     onChange?.(clearedValues);
     onClose?.();
-  }, [defaultValues, setInternalValues, onChange, onClose]);
+  }, [resetValues, setInternalValues, onChange, onClose]);
   return /* @__PURE__ */ import_react39.default.createElement(
     ModalDialog,
     {

package/dist/index.js

@@ -3531,6 +3531,8 @@ function useDataTableRenderer({
   isTotalSelected: _isTotalSelected,
   isRowSelectable
 }) {
+  const onSelectionModelChangeRef = useRef4(onSelectionModelChange);
+  onSelectionModelChangeRef.current = onSelectionModelChange;
   const [focusedRowId, setFocusedRowId] = useState6(null);
   const [sortModel, setSortModel] = useControlledState(
     controlledSortModel,
@@ -3720,7 +3722,7 @@ function useDataTableRenderer({
     }
   }, [page, rowCount, pageSize, handlePageChange]);
   useEffect5(() => {
-    onSelectionModelChange?.([]);
+    onSelectionModelChangeRef.current?.([]);
   }, [page]);
   return {
     rowCount,
@@ -4121,7 +4123,9 @@ var CalendarButton2 = styled13(IconButton_default, {
   "&:focus": {
     "--Icon-color": "currentColor",
     outlineOffset: `${theme.getCssVar("focus-thickness")}`,
-    outline: `${theme.getCssVar("focus-thickness")} solid ${theme.getCssVar("palette-focusVisible")}`
+    outline: `${theme.getCssVar("focus-thickness")} solid ${theme.getCssVar(
+      "palette-focusVisible"
+    )}`
   }
 }));
 var StyledPopper2 = styled13(Popper3, {
@@ -4147,6 +4151,32 @@ var DateRangePickerRoot = styled13("div", {
 })({
   width: "100%"
 });
+var validValueFormat2 = (value, format) => {
+  try {
+    const [date1Str, date2Str] = value.split(" - ");
+    if (!date1Str || !date2Str) {
+      return false;
+    }
+    const parsedDate1 = parseDate2(date1Str, format);
+    const parsedDate2 = parseDate2(date2Str, format);
+    if (parsedDate1.toString() === "Invalid Date" || parsedDate2.toString() === "Invalid Date") {
+      return false;
+    }
+    const formattedValue = formatValueString2(
+      [parsedDate1, parsedDate2],
+      format
+    );
+    if (value !== formattedValue) {
+      return false;
+    }
+    const regex = new RegExp(
+      `^${format.replace(/Y/g, "\\d").replace(/M/g, "\\d").replace(/D/g, "\\d")} - ${format.replace(/Y/g, "\\d").replace(/M/g, "\\d").replace(/D/g, "\\d")}$`
+    );
+    return regex.test(value);
+  } catch (e) {
+    return false;
+  }
+};
 var formatValueString2 = ([date1, date2], format) => {
   const getStr = (date) => {
     let day = `${date.getDate()}`;
@@ -4243,6 +4273,7 @@ var DateRangePicker = forwardRef8(
       sx,
       className,
       format = "YYYY/MM/DD",
+      displayFormat = "YYYY/MM/DD",
       size,
       inputReadOnly,
       hideClearButton,
@@ -4259,12 +4290,27 @@ var DateRangePicker = forwardRef8(
         [props.name, onChange]
       )
     );
+    const [displayValue, setDisplayValue] = useState7(
+      () => value ? formatValueString2(parseDates(value, format), displayFormat) : ""
+    );
     const [anchorEl, setAnchorEl] = useState7(null);
     const open = Boolean(anchorEl);
     const calendarValue = useMemo9(
       () => value ? parseDates(value, format) : void 0,
       [value, format]
     );
+    useEffect6(() => {
+      if (value) {
+        try {
+          const dates = parseDates(value, format);
+          const newDisplayValue = formatValueString2(dates, displayFormat);
+          setDisplayValue(newDisplayValue);
+        } catch (error2) {
+        }
+      } else {
+        setDisplayValue("");
+      }
+    }, [displayFormat, value, format]);
     useEffect6(() => {
       if (!anchorEl) {
         innerRef.current?.blur();
@@ -4275,9 +4321,41 @@ var DateRangePicker = forwardRef8(
     ]);
     const handleChange = useCallback10(
       (event) => {
-        setValue(event.target.value);
+        const value2 = event.target.value;
+        setDisplayValue(
+          value2 ? formatValueString2(parseDates(value2, format), displayFormat) : value2
+        );
+        setValue(value2);
       },
-      [setValue]
+      [displayFormat, format, setValue]
+    );
+    const handleDisplayInputChange = useCallback10(
+      (event) => {
+        if (event.target.value === "") {
+          handleChange({
+            target: {
+              name: props.name,
+              value: ""
+            }
+          });
+          return;
+        }
+        const isValidDisplayValue = validValueFormat2(
+          event.target.value,
+          displayFormat
+        );
+        if (isValidDisplayValue) {
+          const dates = parseDates(event.target.value, displayFormat);
+          const formattedValue = formatValueString2(dates, format);
+          handleChange({
+            target: {
+              name: props.name,
+              value: formattedValue
+            }
+          });
+        }
+      },
+      [displayFormat, format, handleChange, props.name]
     );
     const handleCalendarToggle = useCallback10(
       (event) => {
@@ -4289,10 +4367,26 @@ var DateRangePicker = forwardRef8(
     const handleCalendarChange = useCallback10(
       ([date1, date2]) => {
         if (!date1 || !date2) return;
-        setValue(formatValueString2([date1, date2], format));
+        const formattedValue = formatValueString2([date1, date2], format);
+        if (props.value !== void 0) {
+          onChange?.({ target: { name: props.name, value: formattedValue } });
+        } else {
+          setDisplayValue(
+            formatValueString2([date1, date2], displayFormat)
+          );
+          setValue(formattedValue);
+        }
         setAnchorEl(null);
       },
-      [setValue, setAnchorEl, format]
+      [
+        props.value,
+        props.name,
+        onChange,
+        setValue,
+        setAnchorEl,
+        format,
+        displayFormat
+      ]
     );
     const handleInputMouseDown = useCallback10(
       (event) => {
@@ -4310,17 +4404,21 @@ var DateRangePicker = forwardRef8(
         color: error ? "danger" : innerProps.color,
         ref,
         size,
-        value,
-        onChange: handleChange,
+        value: displayValue,
+        onChange: handleDisplayInputChange,
         disabled,
         required,
-        placeholder: `${format} - ${format}`,
+        placeholder: `${displayFormat} - ${displayFormat}`,
         slotProps: {
           input: {
             component: TextMaskAdapter5,
             ref: innerRef,
-            format,
-            sx: { "&:hover": { cursor: inputReadOnly || readOnly ? "default" : "text" } },
+            format: displayFormat,
+            sx: {
+              "&:hover": {
+                cursor: inputReadOnly || readOnly ? "default" : "text"
+              }
+            },
             onMouseDown: handleInputMouseDown
           }
         },
@@ -4390,6 +4488,7 @@ var DateRangePicker = forwardRef8(
             color: "neutral",
             onClick: () => {
               setValue("");
+              setDisplayValue("");
               setAnchorEl(null);
             }
           },
@@ -4552,7 +4651,7 @@ function CheckboxGroup(props) {
     {
       key: `${id}-${option.value}`,
       label: option.label,
-      checked: internalValue.includes(option.value),
+      checked: internalValue?.includes(option.value),
       onChange: handleCheckboxChange(option.value)
     }
   )));
@@ -4636,6 +4735,7 @@ function DateRange(props) {
     disableFuture,
     disablePast,
     format = "YYYY/MM/DD",
+    displayFormat,
     inputReadOnly,
     hideClearButton
   } = props;
@@ -4790,6 +4890,7 @@ function DateRange(props) {
       disableFuture,
       disablePast,
       format,
+      displayFormat,
       inputReadOnly,
       hideClearButton
     }
@@ -5121,21 +5222,15 @@ function PercentageRange(props) {
     min,
     max
   } = props;
-  const [internalValue, setInternalValue] = useControlledState(
-    value,
-    null,
-    onChange
-  );
+  const [internalValue, setInternalValue] = useControlledState(value, null, onChange);
   const minValue = internalValue?.[0];
   const maxValue = internalValue?.[1];
   const handleMinChange = useCallback17(
     (event) => {
       const newMinValue = event.target.value;
       const currentMaxValue = maxValue;
-      if (newMinValue !== void 0 && currentMaxValue !== void 0) {
-        setInternalValue([newMinValue, currentMaxValue]);
-      } else if (newMinValue !== void 0) {
-        setInternalValue([newMinValue, newMinValue]);
+      if (newMinValue !== void 0) {
+        setInternalValue([newMinValue, currentMaxValue || null]);
       } else {
         setInternalValue(null);
       }
@@ -5146,10 +5241,8 @@ function PercentageRange(props) {
     (event) => {
       const newMaxValue = event.target.value;
       const currentMinValue = minValue;
-      if (currentMinValue !== void 0 && newMaxValue !== void 0) {
-        setInternalValue([currentMinValue, newMaxValue]);
-      } else if (newMaxValue !== void 0) {
-        setInternalValue([newMaxValue, newMaxValue]);
+      if (newMaxValue !== void 0) {
+        setInternalValue([currentMinValue || null, newMaxValue]);
       } else {
         setInternalValue(null);
       }
@@ -5172,7 +5265,7 @@ function PercentageRange(props) {
     PercentageInput,
     {
       label: "Minimum",
-      value: minValue,
+      value: minValue ?? void 0,
       onChange: handleMinChange,
       useMinorUnit,
       maxDecimalScale,
@@ -5186,7 +5279,7 @@ function PercentageRange(props) {
     PercentageInput,
     {
       label: "Maximum",
-      value: maxValue,
+      value: maxValue ?? void 0,
       onChange: handleMaxChange,
       useMinorUnit,
       maxDecimalScale,
@@ -5265,6 +5358,7 @@ function FilterMenu(props) {
     filters,
     values,
     defaultValues,
+    resetValues = {},
     onChange,
     onClose,
     useClear,
@@ -5290,11 +5384,11 @@ function FilterMenu(props) {
     onClose?.();
   }, [onChange, onClose, internalValues]);
   const handleClear = useCallback19(() => {
-    const clearedValues = defaultValues || {};
+    const clearedValues = resetValues || {};
     setInternalValues(clearedValues);
     onChange?.(clearedValues);
     onClose?.();
-  }, [defaultValues, setInternalValues, onChange, onClose]);
+  }, [resetValues, setInternalValues, onChange, onClose]);
   return /* @__PURE__ */ React37.createElement(
     ModalDialog,
     {