@ceed/cds 1.8.0-next.8 → 1.8.0

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

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

package/dist/index.cjs

@@ -4112,9 +4112,7 @@ 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, {
@@ -4140,32 +4138,6 @@ 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()}`;
@@ -4262,7 +4234,6 @@ var DateRangePicker = (0, import_react26.forwardRef)(
       sx,
       className,
       format = "YYYY/MM/DD",
-      displayFormat = "YYYY/MM/DD",
       size,
       inputReadOnly,
       hideClearButton,
@@ -4279,27 +4250,12 @@ 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();
@@ -4310,41 +4266,9 @@ var DateRangePicker = (0, import_react26.forwardRef)(
     ]);
     const handleChange = (0, import_react26.useCallback)(
       (event) => {
-        const value2 = event.target.value;
-        setDisplayValue(
-          value2 ? formatValueString2(parseDates(value2, format), displayFormat) : value2
-        );
-        setValue(value2);
-      },
-      [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
-            }
-          });
-        }
+        setValue(event.target.value);
       },
-      [displayFormat, format, handleChange, props.name]
+      [setValue]
     );
     const handleCalendarToggle = (0, import_react26.useCallback)(
       (event) => {
@@ -4356,26 +4280,10 @@ var DateRangePicker = (0, import_react26.forwardRef)(
     const handleCalendarChange = (0, import_react26.useCallback)(
       ([date1, date2]) => {
         if (!date1 || !date2) return;
-        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);
-        }
+        setValue(formatValueString2([date1, date2], format));
         setAnchorEl(null);
       },
-      [
-        props.value,
-        props.name,
-        onChange,
-        setValue,
-        setAnchorEl,
-        format,
-        displayFormat
-      ]
+      [setValue, setAnchorEl, format]
     );
     const handleInputMouseDown = (0, import_react26.useCallback)(
       (event) => {
@@ -4393,21 +4301,17 @@ var DateRangePicker = (0, import_react26.forwardRef)(
         color: error ? "danger" : innerProps.color,
         ref,
         size,
-        value: displayValue,
-        onChange: handleDisplayInputChange,
+        value,
+        onChange: handleChange,
         disabled,
         required,
-        placeholder: `${displayFormat} - ${displayFormat}`,
+        placeholder: `${format} - ${format}`,
         slotProps: {
           input: {
             component: TextMaskAdapter5,
             ref: innerRef,
-            format: displayFormat,
-            sx: {
-              "&:hover": {
-                cursor: inputReadOnly || readOnly ? "default" : "text"
-              }
-            },
+            format,
+            sx: { "&:hover": { cursor: inputReadOnly || readOnly ? "default" : "text" } },
             onMouseDown: handleInputMouseDown
           }
         },
@@ -4477,7 +4381,6 @@ var DateRangePicker = (0, import_react26.forwardRef)(
             color: "neutral",
             onClick: () => {
               setValue("");
-              setDisplayValue("");
               setAnchorEl(null);
             }
           },

package/dist/index.js

@@ -4088,9 +4088,7 @@ 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, {
@@ -4116,32 +4114,6 @@ 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()}`;
@@ -4238,7 +4210,6 @@ var DateRangePicker = forwardRef8(
       sx,
       className,
       format = "YYYY/MM/DD",
-      displayFormat = "YYYY/MM/DD",
       size,
       inputReadOnly,
       hideClearButton,
@@ -4255,27 +4226,12 @@ 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();
@@ -4286,41 +4242,9 @@ var DateRangePicker = forwardRef8(
     ]);
     const handleChange = useCallback10(
       (event) => {
-        const value2 = event.target.value;
-        setDisplayValue(
-          value2 ? formatValueString2(parseDates(value2, format), displayFormat) : value2
-        );
-        setValue(value2);
-      },
-      [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
-            }
-          });
-        }
+        setValue(event.target.value);
       },
-      [displayFormat, format, handleChange, props.name]
+      [setValue]
     );
     const handleCalendarToggle = useCallback10(
       (event) => {
@@ -4332,26 +4256,10 @@ var DateRangePicker = forwardRef8(
     const handleCalendarChange = useCallback10(
       ([date1, date2]) => {
         if (!date1 || !date2) return;
-        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);
-        }
+        setValue(formatValueString2([date1, date2], format));
         setAnchorEl(null);
       },
-      [
-        props.value,
-        props.name,
-        onChange,
-        setValue,
-        setAnchorEl,
-        format,
-        displayFormat
-      ]
+      [setValue, setAnchorEl, format]
     );
     const handleInputMouseDown = useCallback10(
       (event) => {
@@ -4369,21 +4277,17 @@ var DateRangePicker = forwardRef8(
         color: error ? "danger" : innerProps.color,
         ref,
         size,
-        value: displayValue,
-        onChange: handleDisplayInputChange,
+        value,
+        onChange: handleChange,
         disabled,
         required,
-        placeholder: `${displayFormat} - ${displayFormat}`,
+        placeholder: `${format} - ${format}`,
         slotProps: {
           input: {
             component: TextMaskAdapter5,
             ref: innerRef,
-            format: displayFormat,
-            sx: {
-              "&:hover": {
-                cursor: inputReadOnly || readOnly ? "default" : "text"
-              }
-            },
+            format,
+            sx: { "&:hover": { cursor: inputReadOnly || readOnly ? "default" : "text" } },
             onMouseDown: handleInputMouseDown
           }
         },
@@ -4453,7 +4357,6 @@ var DateRangePicker = forwardRef8(
             color: "neutral",
             onClick: () => {
               setValue("");
-              setDisplayValue("");
               setAnchorEl(null);
             }
           },