@ceed/cds 1.5.4-next.2 → 1.5.4-next.4

package/dist/components/Calendar/utils/index.d.ts

@@ -1,6 +1,8 @@
 export declare const getCalendarDates: (date: Date) => (number | undefined)[][];
 export declare const getYearName: (date: Date, locale: string) => string;
-export declare const getMonthName: (date: Date, locale: string) => string;
+export declare const getMonthName: (date: Date, locale: string, options?: {
+    hideYear?: boolean;
+}) => string;
 export declare const getMonthNameFromIndex: (index: number, locale: string) => string;
 /**
  * 일~토 / Sun ~ Sat 같은 요일 이름을 가져옵니다.

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

@@ -21,6 +21,7 @@ interface BaseMonthPickerProps {
     disablePast?: boolean;
     format?: string;
     displayFormat?: string;
+    locale?: 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

@@ -851,8 +851,11 @@ var getCalendarDates = (date) => {
 var getYearName = (date, locale) => {
   return date.toLocaleString(locale, { year: "numeric" });
 };
-var getMonthName = (date, locale) => {
-  return date.toLocaleString(locale, { year: "numeric", month: "long" });
+var getMonthName = (date, locale, options) => {
+  return date.toLocaleString(locale, {
+    month: "long",
+    ...options?.hideYear ? {} : { year: "numeric" }
+  });
 };
 var getMonthNameFromIndex = (index, locale) => {
   return new Date(0, index).toLocaleString(locale, { month: "short" });
@@ -4563,13 +4566,10 @@ 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) => {
+var formatValueString3 = (date, format, locale = "default") => {
   const year = date.getFullYear().toString();
   const month = (date.getMonth() + 1).toString().padStart(2, "0");
-  const monthName = getMonthName2(date);
+  const monthName = getMonthName(date, locale, { hideYear: true });
   const day = "01";
   return format.replace(/MMMM/g, monthName).replace(/MM/g, month).replace(/DD/g, day).replace(/YYYY/g, year);
 };
@@ -4612,9 +4612,16 @@ var MonthPicker = (0, import_react33.forwardRef)(
       // NOTE: 스타일 관련된 props는 최상위 엘리먼트에 적용한다.
       sx,
       className,
+      /**
+       * NOTE: 현재 CalendarDate는 YYYY-MM-DD로 개발하고 있어 date를 포함하여 value를 관리한다.
+       * @see https://ecubelabs.atlassian.net/wiki/spaces/SW/pages/1938784349/Date#CalendarDate
+       * @see https://github.com/Ecube-Labs/hds/pull/145
+       * 
+       */
       format = "YYYY/MM/DD",
       displayFormat = "YYYY/MM",
       size,
+      locale,
       ...innerProps
     } = props;
     const innerRef = (0, import_react33.useRef)(null);
@@ -4629,7 +4636,7 @@ var MonthPicker = (0, import_react33.forwardRef)(
       { disableStrict: true }
     );
     const [displayValue, setDisplayValue] = (0, import_react33.useState)(
-      () => value ? formatValueString3(parseDate3(value, format), displayFormat) : ""
+      () => value ? formatValueString3(parseDate3(value, format), displayFormat, locale) : ""
     );
     const [anchorEl, setAnchorEl] = (0, import_react33.useState)(null);
     const open = Boolean(anchorEl);
@@ -4648,7 +4655,8 @@ var MonthPicker = (0, import_react33.forwardRef)(
       }
       const formattedValue = formatValueString3(
         parseDate3(value, format),
-        displayFormat
+        displayFormat,
+        locale
       );
       setDisplayValue(formattedValue);
     }, [displayFormat, format, value]);
@@ -4656,11 +4664,11 @@ var MonthPicker = (0, import_react33.forwardRef)(
       (event) => {
         const value2 = event.target.value;
         setDisplayValue(
-          value2 ? formatValueString3(parseDate3(value2, format), displayFormat) : value2
+          value2 ? formatValueString3(parseDate3(value2, format), displayFormat, locale) : value2
         );
         setValue(value2);
       },
-      [displayFormat, format, setValue]
+      [displayFormat, format, setValue, locale]
     );
     const handleCalendarToggle = (0, import_react33.useCallback)(
       (event) => {
@@ -4709,6 +4717,7 @@ var MonthPicker = (0, import_react33.forwardRef)(
         endDecorator: /* @__PURE__ */ import_react33.default.createElement(
           IconButton_default,
           {
+            ref: buttonRef,
             variant: "plain",
             onClick: handleCalendarToggle,
             "aria-label": "Toggle Calendar",
@@ -4751,7 +4760,7 @@ var MonthPicker = (0, import_react33.forwardRef)(
             handleChange({
               target: {
                 name: props.name,
-                value: formatValueString3(date, format)
+                value: formatValueString3(date, format, locale)
               }
             });
             setAnchorEl(null);
@@ -4759,7 +4768,8 @@ var MonthPicker = (0, import_react33.forwardRef)(
           minDate: minDate ? new Date(minDate) : void 0,
           maxDate: maxDate ? new Date(maxDate) : void 0,
           disableFuture,
-          disablePast
+          disablePast,
+          locale
         }
       ), /* @__PURE__ */ import_react33.default.createElement(
         DialogActions_default,

package/dist/index.js

@@ -782,8 +782,11 @@ var getCalendarDates = (date) => {
 var getYearName = (date, locale) => {
   return date.toLocaleString(locale, { year: "numeric" });
 };
-var getMonthName = (date, locale) => {
-  return date.toLocaleString(locale, { year: "numeric", month: "long" });
+var getMonthName = (date, locale, options) => {
+  return date.toLocaleString(locale, {
+    month: "long",
+    ...options?.hideYear ? {} : { year: "numeric" }
+  });
 };
 var getMonthNameFromIndex = (index, locale) => {
   return new Date(0, index).toLocaleString(locale, { month: "short" });
@@ -4559,13 +4562,10 @@ var MonthPickerRoot = styled20("div", {
 })({
   width: "100%"
 });
-function getMonthName2(date) {
-  return new Intl.DateTimeFormat("en-US", { month: "long" }).format(date);
-}
-var formatValueString3 = (date, format) => {
+var formatValueString3 = (date, format, locale = "default") => {
   const year = date.getFullYear().toString();
   const month = (date.getMonth() + 1).toString().padStart(2, "0");
-  const monthName = getMonthName2(date);
+  const monthName = getMonthName(date, locale, { hideYear: true });
   const day = "01";
   return format.replace(/MMMM/g, monthName).replace(/MM/g, month).replace(/DD/g, day).replace(/YYYY/g, year);
 };
@@ -4608,9 +4608,16 @@ var MonthPicker = forwardRef9(
       // NOTE: 스타일 관련된 props는 최상위 엘리먼트에 적용한다.
       sx,
       className,
+      /**
+       * NOTE: 현재 CalendarDate는 YYYY-MM-DD로 개발하고 있어 date를 포함하여 value를 관리한다.
+       * @see https://ecubelabs.atlassian.net/wiki/spaces/SW/pages/1938784349/Date#CalendarDate
+       * @see https://github.com/Ecube-Labs/hds/pull/145
+       * 
+       */
       format = "YYYY/MM/DD",
       displayFormat = "YYYY/MM",
       size,
+      locale,
       ...innerProps
     } = props;
     const innerRef = useRef6(null);
@@ -4625,7 +4632,7 @@ var MonthPicker = forwardRef9(
       { disableStrict: true }
     );
     const [displayValue, setDisplayValue] = useState9(
-      () => value ? formatValueString3(parseDate3(value, format), displayFormat) : ""
+      () => value ? formatValueString3(parseDate3(value, format), displayFormat, locale) : ""
     );
     const [anchorEl, setAnchorEl] = useState9(null);
     const open = Boolean(anchorEl);
@@ -4644,7 +4651,8 @@ var MonthPicker = forwardRef9(
       }
       const formattedValue = formatValueString3(
         parseDate3(value, format),
-        displayFormat
+        displayFormat,
+        locale
       );
       setDisplayValue(formattedValue);
     }, [displayFormat, format, value]);
@@ -4652,11 +4660,11 @@ var MonthPicker = forwardRef9(
       (event) => {
         const value2 = event.target.value;
         setDisplayValue(
-          value2 ? formatValueString3(parseDate3(value2, format), displayFormat) : value2
+          value2 ? formatValueString3(parseDate3(value2, format), displayFormat, locale) : value2
         );
         setValue(value2);
       },
-      [displayFormat, format, setValue]
+      [displayFormat, format, setValue, locale]
     );
     const handleCalendarToggle = useCallback11(
       (event) => {
@@ -4705,6 +4713,7 @@ var MonthPicker = forwardRef9(
         endDecorator: /* @__PURE__ */ React31.createElement(
           IconButton_default,
           {
+            ref: buttonRef,
             variant: "plain",
             onClick: handleCalendarToggle,
             "aria-label": "Toggle Calendar",
@@ -4747,7 +4756,7 @@ var MonthPicker = forwardRef9(
             handleChange({
               target: {
                 name: props.name,
-                value: formatValueString3(date, format)
+                value: formatValueString3(date, format, locale)
               }
             });
             setAnchorEl(null);
@@ -4755,7 +4764,8 @@ var MonthPicker = forwardRef9(
           minDate: minDate ? new Date(minDate) : void 0,
           maxDate: maxDate ? new Date(maxDate) : void 0,
           disableFuture,
-          disablePast
+          disablePast,
+          locale
         }
       ), /* @__PURE__ */ React31.createElement(
         DialogActions_default,