@ceed/ads 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

@@ -865,8 +865,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" });
@@ -5001,13 +5004,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);
 };
@@ -5050,9 +5050,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);
@@ -5067,7 +5074,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);
@@ -5086,7 +5093,8 @@ var MonthPicker = (0, import_react33.forwardRef)(
       }
       const formattedValue = formatValueString3(
         parseDate3(value, format),
-        displayFormat
+        displayFormat,
+        locale
       );
       setDisplayValue(formattedValue);
     }, [displayFormat, format, value]);
@@ -5094,11 +5102,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) => {
@@ -5147,6 +5155,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",
@@ -5189,7 +5198,7 @@ var MonthPicker = (0, import_react33.forwardRef)(
             handleChange({
               target: {
                 name: props.name,
-                value: formatValueString3(date, format)
+                value: formatValueString3(date, format, locale)
               }
             });
             setAnchorEl(null);
@@ -5197,7 +5206,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

@@ -785,8 +785,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" });
@@ -4988,13 +4991,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);
 };
@@ -5037,9 +5037,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 = useRef7(null);
@@ -5054,7 +5061,7 @@ var MonthPicker = forwardRef9(
       { disableStrict: true }
     );
     const [displayValue, setDisplayValue] = useState10(
-      () => value ? formatValueString3(parseDate3(value, format), displayFormat) : ""
+      () => value ? formatValueString3(parseDate3(value, format), displayFormat, locale) : ""
     );
     const [anchorEl, setAnchorEl] = useState10(null);
     const open = Boolean(anchorEl);
@@ -5073,7 +5080,8 @@ var MonthPicker = forwardRef9(
       }
       const formattedValue = formatValueString3(
         parseDate3(value, format),
-        displayFormat
+        displayFormat,
+        locale
       );
       setDisplayValue(formattedValue);
     }, [displayFormat, format, value]);
@@ -5081,11 +5089,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 = useCallback12(
       (event) => {
@@ -5134,6 +5142,7 @@ var MonthPicker = forwardRef9(
         endDecorator: /* @__PURE__ */ React31.createElement(
           IconButton_default,
           {
+            ref: buttonRef,
             variant: "plain",
             onClick: handleCalendarToggle,
             "aria-label": "Toggle Calendar",
@@ -5176,7 +5185,7 @@ var MonthPicker = forwardRef9(
             handleChange({
               target: {
                 name: props.name,
-                value: formatValueString3(date, format)
+                value: formatValueString3(date, format, locale)
               }
             });
             setAnchorEl(null);
@@ -5184,7 +5193,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,