@ceed/cds 1.5.4-next.2 → 1.5.4

package/dist/components/MonthPicker/MonthPicker.d.ts

@@ -20,7 +20,6 @@ interface BaseMonthPickerProps {
     disableFuture?: boolean;
     disablePast?: boolean;
     format?: string;
-    displayFormat?: string;
 }
 export type MonthPickerProps = BaseMonthPickerProps & Omit<React.ComponentProps<typeof Input>, "onChange" | "value" | "defaultValue">;
 declare const MonthPicker: React.ForwardRefExoticComponent<Omit<MonthPickerProps, "ref"> & React.RefAttributes<HTMLInputElement>>;

package/dist/index.cjs

@@ -4538,6 +4538,7 @@ MenuButton.displayName = "MenuButton";
 
 // src/components/MonthPicker/MonthPicker.tsx
 var import_react33 = __toESM(require("react"));
+var import_react_imask3 = require("react-imask");
 var import_CalendarToday3 = __toESM(require("@mui/icons-material/CalendarToday"));
 var import_joy46 = require("@mui/joy");
 var import_base4 = require("@mui/base");
@@ -4563,38 +4564,60 @@ var MonthPickerRoot = (0, import_joy46.styled)("div", {
 })({
   width: "100%"
 });
-function getMonthName2(date) {
-  return new Intl.DateTimeFormat("en-US", { month: "long" }).format(date);
-}
 var formatValueString3 = (date, format) => {
-  const year = date.getFullYear().toString();
-  const month = (date.getMonth() + 1).toString().padStart(2, "0");
-  const monthName = getMonthName2(date);
-  const day = "01";
-  return format.replace(/MMMM/g, monthName).replace(/MM/g, month).replace(/DD/g, day).replace(/YYYY/g, year);
+  let month = `${date.getMonth() + 1}`;
+  const year = date.getFullYear();
+  if (Number(month) < 10) month = "0" + month;
+  return format.replace(/YYYY/g, year.toString()).replace(/MM/g, month);
 };
-function parseDate3(dateString, format) {
-  const dateParts = dateString.split(/[-./\s]/);
-  const formatParts = format.split(/[-./\s]/);
-  if (formatParts.length !== dateParts.length) {
-    throw new Error("Invalid date string or format");
-  }
+var formatToPattern3 = (format) => {
+  return format.replace(/YYYY/g, "Y").replace(/MM/g, "M").replace(/[^YM\s]/g, (match) => `${match}\``);
+};
+function parseDate3(dateString) {
   let month, year;
-  const day = 1;
-  for (let i = 0; i < formatParts.length; i++) {
-    const value = parseInt(dateParts[i], 10);
-    switch (formatParts[i]) {
-      case "MM":
-        month = value - 1;
-        break;
-      case "YYYY":
-        year = value;
-        break;
-    }
+  const cleanDateString = dateString.replace(/[^\d]/g, "");
+  if (dateString.match(/\d{1,2}.\d{4}/)) {
+    month = cleanDateString.slice(0, 2);
+    year = cleanDateString.slice(2);
+  } else if (dateString.match(/\d{4}.\d{1,2}/)) {
+    year = cleanDateString.slice(0, 4);
+    month = cleanDateString.slice(4);
   }
-  const result = new Date(year, month, day);
-  return result;
+  const date = /* @__PURE__ */ new Date(`${year}/${month}`);
+  return date;
 }
+var TextMaskAdapter7 = import_react33.default.forwardRef(
+  function TextMaskAdapter8(props, ref) {
+    const { onChange, format, ...other } = props;
+    return /* @__PURE__ */ import_react33.default.createElement(
+      import_react_imask3.IMaskInput,
+      {
+        ...other,
+        inputRef: ref,
+        onAccept: (value) => onChange({ target: { name: props.name, value } }),
+        mask: Date,
+        pattern: formatToPattern3(format),
+        blocks: {
+          M: {
+            mask: import_react_imask3.IMask.MaskedRange,
+            from: 1,
+            to: 12,
+            maxLength: 2
+          },
+          Y: {
+            mask: import_react_imask3.IMask.MaskedRange,
+            from: 1900,
+            to: 9999
+          }
+        },
+        format: (date) => formatValueString3(date, format),
+        parse: parseDate3,
+        autofix: "pad",
+        overwrite: true
+      }
+    );
+  }
+);
 var MonthPicker = (0, import_react33.forwardRef)(
   (inProps, ref) => {
     const props = (0, import_joy46.useThemeProps)({ props: inProps, name: "MonthPicker" });
@@ -4612,13 +4635,11 @@ var MonthPicker = (0, import_react33.forwardRef)(
       // NOTE: 스타일 관련된 props는 최상위 엘리먼트에 적용한다.
       sx,
       className,
-      format = "YYYY/MM/DD",
-      displayFormat = "YYYY/MM",
+      format = "YYYY/MM",
       size,
       ...innerProps
     } = props;
     const innerRef = (0, import_react33.useRef)(null);
-    const buttonRef = (0, import_react33.useRef)(null);
     const [value, setValue] = useControlledState(
       props.value,
       props.defaultValue || "",
@@ -4628,9 +4649,6 @@ var MonthPicker = (0, import_react33.forwardRef)(
       ),
       { disableStrict: true }
     );
-    const [displayValue, setDisplayValue] = (0, import_react33.useState)(
-      () => value ? formatValueString3(parseDate3(value, format), displayFormat) : ""
-    );
     const [anchorEl, setAnchorEl] = (0, import_react33.useState)(null);
     const open = Boolean(anchorEl);
     (0, import_react33.useEffect)(() => {
@@ -4641,26 +4659,11 @@ var MonthPicker = (0, import_react33.forwardRef)(
     (0, import_react33.useImperativeHandle)(ref, () => innerRef.current, [
       innerRef
     ]);
-    (0, import_react33.useEffect)(() => {
-      if (value === "") {
-        setDisplayValue("");
-        return;
-      }
-      const formattedValue = formatValueString3(
-        parseDate3(value, format),
-        displayFormat
-      );
-      setDisplayValue(formattedValue);
-    }, [displayFormat, format, value]);
     const handleChange = (0, import_react33.useCallback)(
       (event) => {
-        const value2 = event.target.value;
-        setDisplayValue(
-          value2 ? formatValueString3(parseDate3(value2, format), displayFormat) : value2
-        );
-        setValue(value2);
+        setValue(event.target.value);
       },
-      [displayFormat, format, setValue]
+      [setValue]
     );
     const handleCalendarToggle = (0, import_react33.useCallback)(
       (event) => {
@@ -4669,13 +4672,6 @@ var MonthPicker = (0, import_react33.forwardRef)(
       },
       [anchorEl, setAnchorEl, innerRef]
     );
-    const handleInputMouseDown = (0, import_react33.useCallback)(
-      (event) => {
-        event.preventDefault();
-        buttonRef.current?.focus();
-      },
-      [buttonRef]
-    );
     return /* @__PURE__ */ import_react33.default.createElement(MonthPickerRoot, null, /* @__PURE__ */ import_react33.default.createElement(import_base4.FocusTrap, { open: true }, /* @__PURE__ */ import_react33.default.createElement(import_react33.default.Fragment, null, /* @__PURE__ */ import_react33.default.createElement(
       Input_default,
       {
@@ -4683,21 +4679,13 @@ var MonthPicker = (0, import_react33.forwardRef)(
         color: error ? "danger" : innerProps.color,
         ref: innerRef,
         size,
-        value: displayValue,
-        placeholder: displayFormat,
+        value,
+        onChange: handleChange,
+        placeholder: format,
         disabled,
         required,
         slotProps: {
-          input: {
-            ref: innerRef,
-            format: displayFormat,
-            sx: {
-              "&:hover": {
-                cursor: "default"
-              }
-            },
-            onMouseDown: handleInputMouseDown
-          }
+          input: { component: TextMaskAdapter7, ref: innerRef, format }
         },
         error,
         className,
@@ -4714,8 +4702,7 @@ var MonthPicker = (0, import_react33.forwardRef)(
             "aria-label": "Toggle Calendar",
             "aria-controls": "month-picker-popper",
             "aria-haspopup": "dialog",
-            "aria-expanded": open,
-            disabled
+            "aria-expanded": open
           },
           /* @__PURE__ */ import_react33.default.createElement(import_CalendarToday3.default, null)
         ),
@@ -4793,7 +4780,7 @@ var MonthPicker = (0, import_react33.forwardRef)(
 
 // src/components/MonthRangePicker/MonthRangePicker.tsx
 var import_react34 = __toESM(require("react"));
-var import_react_imask3 = require("react-imask");
+var import_react_imask4 = require("react-imask");
 var import_CalendarToday4 = __toESM(require("@mui/icons-material/CalendarToday"));
 var import_joy47 = require("@mui/joy");
 var import_base5 = require("@mui/base");
@@ -4847,29 +4834,29 @@ var parseDates2 = (str) => {
   const date2 = str.split(" - ")[1] || "";
   return [parseDate4(date1), parseDate4(date2)];
 };
-var formatToPattern3 = (format) => {
+var formatToPattern4 = (format) => {
   return `${format} - ${format}`.replace(/YYYY/g, "Y").replace(/MM/g, "m").replace(/[^YMm\s]/g, (match) => `${match}\``);
 };
-var TextMaskAdapter7 = import_react34.default.forwardRef(
-  function TextMaskAdapter8(props, ref) {
+var TextMaskAdapter9 = import_react34.default.forwardRef(
+  function TextMaskAdapter10(props, ref) {
     const { onChange, format, ...other } = props;
     return /* @__PURE__ */ import_react34.default.createElement(
-      import_react_imask3.IMaskInput,
+      import_react_imask4.IMaskInput,
       {
         ...other,
         inputRef: ref,
         onAccept: (value) => onChange({ target: { name: props.name, value } }),
         mask: Date,
-        pattern: formatToPattern3(format),
+        pattern: formatToPattern4(format),
         blocks: {
           m: {
-            mask: import_react_imask3.IMask.MaskedRange,
+            mask: import_react_imask4.IMask.MaskedRange,
             from: 1,
             to: 12,
             maxLength: 2
           },
           Y: {
-            mask: import_react_imask3.IMask.MaskedRange,
+            mask: import_react_imask4.IMask.MaskedRange,
             from: 1900,
             to: 9999
           }
@@ -4961,7 +4948,7 @@ var MonthRangePicker = (0, import_react34.forwardRef)(
         required,
         placeholder: `${format} - ${format}`,
         slotProps: {
-          input: { component: TextMaskAdapter7, ref: innerRef, format }
+          input: { component: TextMaskAdapter9, ref: innerRef, format }
         },
         error,
         className,
@@ -5162,8 +5149,8 @@ var padDecimal = (value, decimalScale) => {
   const [integer, decimal = ""] = `${value}`.split(".");
   return Number(`${integer}${decimal.padEnd(decimalScale, "0")}`);
 };
-var TextMaskAdapter9 = import_react38.default.forwardRef(
-  function TextMaskAdapter10(props, ref) {
+var TextMaskAdapter11 = import_react38.default.forwardRef(
+  function TextMaskAdapter12(props, ref) {
     const { onChange, min, max, ...innerProps } = props;
     return /* @__PURE__ */ import_react38.default.createElement(
       import_react_number_format2.NumericFormat,
@@ -5259,7 +5246,7 @@ var PercentageInput = import_react38.default.forwardRef(function PercentageInput
       helperText,
       slotProps: {
         input: {
-          component: TextMaskAdapter9,
+          component: TextMaskAdapter11,
           "aria-label": innerProps["aria-label"],
           decimalScale: maxDecimalScale
         }

package/dist/index.js

@@ -4534,6 +4534,7 @@ import React31, {
   useRef as useRef6,
   useState as useState9
 } from "react";
+import { IMaskInput as IMaskInput3, IMask as IMask3 } from "react-imask";
 import CalendarTodayIcon3 from "@mui/icons-material/CalendarToday";
 import { styled as styled20, useThemeProps as useThemeProps6 } from "@mui/joy";
 import { FocusTrap as FocusTrap3, ClickAwayListener as ClickAwayListener3, Popper as Popper4 } from "@mui/base";
@@ -4559,38 +4560,60 @@ var MonthPickerRoot = styled20("div", {
 })({
   width: "100%"
 });
-function getMonthName2(date) {
-  return new Intl.DateTimeFormat("en-US", { month: "long" }).format(date);
-}
 var formatValueString3 = (date, format) => {
-  const year = date.getFullYear().toString();
-  const month = (date.getMonth() + 1).toString().padStart(2, "0");
-  const monthName = getMonthName2(date);
-  const day = "01";
-  return format.replace(/MMMM/g, monthName).replace(/MM/g, month).replace(/DD/g, day).replace(/YYYY/g, year);
+  let month = `${date.getMonth() + 1}`;
+  const year = date.getFullYear();
+  if (Number(month) < 10) month = "0" + month;
+  return format.replace(/YYYY/g, year.toString()).replace(/MM/g, month);
 };
-function parseDate3(dateString, format) {
-  const dateParts = dateString.split(/[-./\s]/);
-  const formatParts = format.split(/[-./\s]/);
-  if (formatParts.length !== dateParts.length) {
-    throw new Error("Invalid date string or format");
-  }
+var formatToPattern3 = (format) => {
+  return format.replace(/YYYY/g, "Y").replace(/MM/g, "M").replace(/[^YM\s]/g, (match) => `${match}\``);
+};
+function parseDate3(dateString) {
   let month, year;
-  const day = 1;
-  for (let i = 0; i < formatParts.length; i++) {
-    const value = parseInt(dateParts[i], 10);
-    switch (formatParts[i]) {
-      case "MM":
-        month = value - 1;
-        break;
-      case "YYYY":
-        year = value;
-        break;
-    }
+  const cleanDateString = dateString.replace(/[^\d]/g, "");
+  if (dateString.match(/\d{1,2}.\d{4}/)) {
+    month = cleanDateString.slice(0, 2);
+    year = cleanDateString.slice(2);
+  } else if (dateString.match(/\d{4}.\d{1,2}/)) {
+    year = cleanDateString.slice(0, 4);
+    month = cleanDateString.slice(4);
   }
-  const result = new Date(year, month, day);
-  return result;
+  const date = /* @__PURE__ */ new Date(`${year}/${month}`);
+  return date;
 }
+var TextMaskAdapter7 = React31.forwardRef(
+  function TextMaskAdapter8(props, ref) {
+    const { onChange, format, ...other } = props;
+    return /* @__PURE__ */ React31.createElement(
+      IMaskInput3,
+      {
+        ...other,
+        inputRef: ref,
+        onAccept: (value) => onChange({ target: { name: props.name, value } }),
+        mask: Date,
+        pattern: formatToPattern3(format),
+        blocks: {
+          M: {
+            mask: IMask3.MaskedRange,
+            from: 1,
+            to: 12,
+            maxLength: 2
+          },
+          Y: {
+            mask: IMask3.MaskedRange,
+            from: 1900,
+            to: 9999
+          }
+        },
+        format: (date) => formatValueString3(date, format),
+        parse: parseDate3,
+        autofix: "pad",
+        overwrite: true
+      }
+    );
+  }
+);
 var MonthPicker = forwardRef9(
   (inProps, ref) => {
     const props = useThemeProps6({ props: inProps, name: "MonthPicker" });
@@ -4608,13 +4631,11 @@ var MonthPicker = forwardRef9(
       // NOTE: 스타일 관련된 props는 최상위 엘리먼트에 적용한다.
       sx,
       className,
-      format = "YYYY/MM/DD",
-      displayFormat = "YYYY/MM",
+      format = "YYYY/MM",
       size,
       ...innerProps
     } = props;
     const innerRef = useRef6(null);
-    const buttonRef = useRef6(null);
     const [value, setValue] = useControlledState(
       props.value,
       props.defaultValue || "",
@@ -4624,9 +4645,6 @@ var MonthPicker = forwardRef9(
       ),
       { disableStrict: true }
     );
-    const [displayValue, setDisplayValue] = useState9(
-      () => value ? formatValueString3(parseDate3(value, format), displayFormat) : ""
-    );
     const [anchorEl, setAnchorEl] = useState9(null);
     const open = Boolean(anchorEl);
     useEffect8(() => {
@@ -4637,26 +4655,11 @@ var MonthPicker = forwardRef9(
     useImperativeHandle4(ref, () => innerRef.current, [
       innerRef
     ]);
-    useEffect8(() => {
-      if (value === "") {
-        setDisplayValue("");
-        return;
-      }
-      const formattedValue = formatValueString3(
-        parseDate3(value, format),
-        displayFormat
-      );
-      setDisplayValue(formattedValue);
-    }, [displayFormat, format, value]);
     const handleChange = useCallback11(
       (event) => {
-        const value2 = event.target.value;
-        setDisplayValue(
-          value2 ? formatValueString3(parseDate3(value2, format), displayFormat) : value2
-        );
-        setValue(value2);
+        setValue(event.target.value);
       },
-      [displayFormat, format, setValue]
+      [setValue]
     );
     const handleCalendarToggle = useCallback11(
       (event) => {
@@ -4665,13 +4668,6 @@ var MonthPicker = forwardRef9(
       },
       [anchorEl, setAnchorEl, innerRef]
     );
-    const handleInputMouseDown = useCallback11(
-      (event) => {
-        event.preventDefault();
-        buttonRef.current?.focus();
-      },
-      [buttonRef]
-    );
     return /* @__PURE__ */ React31.createElement(MonthPickerRoot, null, /* @__PURE__ */ React31.createElement(FocusTrap3, { open: true }, /* @__PURE__ */ React31.createElement(React31.Fragment, null, /* @__PURE__ */ React31.createElement(
       Input_default,
       {
@@ -4679,21 +4675,13 @@ var MonthPicker = forwardRef9(
         color: error ? "danger" : innerProps.color,
         ref: innerRef,
         size,
-        value: displayValue,
-        placeholder: displayFormat,
+        value,
+        onChange: handleChange,
+        placeholder: format,
         disabled,
         required,
         slotProps: {
-          input: {
-            ref: innerRef,
-            format: displayFormat,
-            sx: {
-              "&:hover": {
-                cursor: "default"
-              }
-            },
-            onMouseDown: handleInputMouseDown
-          }
+          input: { component: TextMaskAdapter7, ref: innerRef, format }
         },
         error,
         className,
@@ -4710,8 +4698,7 @@ var MonthPicker = forwardRef9(
             "aria-label": "Toggle Calendar",
             "aria-controls": "month-picker-popper",
             "aria-haspopup": "dialog",
-            "aria-expanded": open,
-            disabled
+            "aria-expanded": open
           },
           /* @__PURE__ */ React31.createElement(CalendarTodayIcon3, null)
         ),
@@ -4797,7 +4784,7 @@ import React32, {
   useRef as useRef7,
   useState as useState10
 } from "react";
-import { IMaskInput as IMaskInput3, IMask as IMask3 } from "react-imask";
+import { IMaskInput as IMaskInput4, IMask as IMask4 } from "react-imask";
 import CalendarTodayIcon4 from "@mui/icons-material/CalendarToday";
 import { styled as styled21, useThemeProps as useThemeProps7 } from "@mui/joy";
 import { FocusTrap as FocusTrap4, ClickAwayListener as ClickAwayListener4, Popper as Popper5 } from "@mui/base";
@@ -4851,29 +4838,29 @@ var parseDates2 = (str) => {
   const date2 = str.split(" - ")[1] || "";
   return [parseDate4(date1), parseDate4(date2)];
 };
-var formatToPattern3 = (format) => {
+var formatToPattern4 = (format) => {
   return `${format} - ${format}`.replace(/YYYY/g, "Y").replace(/MM/g, "m").replace(/[^YMm\s]/g, (match) => `${match}\``);
 };
-var TextMaskAdapter7 = React32.forwardRef(
-  function TextMaskAdapter8(props, ref) {
+var TextMaskAdapter9 = React32.forwardRef(
+  function TextMaskAdapter10(props, ref) {
     const { onChange, format, ...other } = props;
     return /* @__PURE__ */ React32.createElement(
-      IMaskInput3,
+      IMaskInput4,
       {
         ...other,
         inputRef: ref,
         onAccept: (value) => onChange({ target: { name: props.name, value } }),
         mask: Date,
-        pattern: formatToPattern3(format),
+        pattern: formatToPattern4(format),
         blocks: {
           m: {
-            mask: IMask3.MaskedRange,
+            mask: IMask4.MaskedRange,
             from: 1,
             to: 12,
             maxLength: 2
           },
           Y: {
-            mask: IMask3.MaskedRange,
+            mask: IMask4.MaskedRange,
             from: 1900,
             to: 9999
           }
@@ -4965,7 +4952,7 @@ var MonthRangePicker = forwardRef10(
         required,
         placeholder: `${format} - ${format}`,
         slotProps: {
-          input: { component: TextMaskAdapter7, ref: innerRef, format }
+          input: { component: TextMaskAdapter9, ref: innerRef, format }
         },
         error,
         className,
@@ -5179,8 +5166,8 @@ var padDecimal = (value, decimalScale) => {
   const [integer, decimal = ""] = `${value}`.split(".");
   return Number(`${integer}${decimal.padEnd(decimalScale, "0")}`);
 };
-var TextMaskAdapter9 = React36.forwardRef(
-  function TextMaskAdapter10(props, ref) {
+var TextMaskAdapter11 = React36.forwardRef(
+  function TextMaskAdapter12(props, ref) {
     const { onChange, min, max, ...innerProps } = props;
     return /* @__PURE__ */ React36.createElement(
       NumericFormat2,
@@ -5276,7 +5263,7 @@ var PercentageInput = React36.forwardRef(function PercentageInput2(inProps, ref)
       helperText,
       slotProps: {
         input: {
-          component: TextMaskAdapter9,
+          component: TextMaskAdapter11,
           "aria-label": innerProps["aria-label"],
           decimalScale: maxDecimalScale
         }