@ceed/cds 1.5.4 → 1.5.6-next.1

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

@@ -20,6 +20,8 @@ interface BaseMonthPickerProps {
     disableFuture?: boolean;
     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/hooks/use-controlled-state/index.d.ts

@@ -1,3 +1,3 @@
 export declare function useControlledState<T>(controlledValue: T | undefined, defaultValue: T, onChange?: (value: T) => void, options?: {
     disableStrict?: boolean;
-}): [T, (value: T | ((prev: T) => T)) => void];
+}): [T, (value: T | ((prev: T) => T)) => void, boolean];

package/dist/index.cjs

@@ -408,25 +408,26 @@ var IconButton_default = IconButton;
 var import_react5 = require("react");
 function useControlledState(controlledValue, defaultValue, onChange, options) {
   const { current: isControlled } = (0, import_react5.useRef)(controlledValue !== void 0);
-  const [displayValue, setDisplayValue] = (0, import_react5.useState)(
+  const [internalValue, setInternalValue] = (0, import_react5.useState)(
     controlledValue ?? defaultValue
   );
+  const displayValue = isControlled ? controlledValue : internalValue;
   (0, import_react5.useEffect)(() => {
     if (isControlled) {
-      setDisplayValue(controlledValue ?? defaultValue);
+      setInternalValue(controlledValue);
     }
-  }, [controlledValue, defaultValue, isControlled]);
+  }, [isControlled, controlledValue]);
   const handleChange = (0, import_react5.useCallback)(
     (value) => {
       const newValue = typeof value === "function" ? value(displayValue) : value;
-      if (options?.disableStrict || !isControlled) {
-        setDisplayValue(newValue);
+      if (!isControlled) {
+        setInternalValue(newValue);
       }
       onChange?.(newValue);
     },
-    [isControlled, onChange, displayValue, options]
+    [isControlled, onChange, displayValue]
   );
-  return [displayValue, handleChange];
+  return [displayValue, handleChange, isControlled];
 }
 
 // src/components/Autocomplete/Autocomplete.tsx
@@ -851,8 +852,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" });
@@ -4538,7 +4542,6 @@ 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");
@@ -4564,60 +4567,35 @@ var MonthPickerRoot = (0, import_joy46.styled)("div", {
 })({
   width: "100%"
 });
-var formatValueString3 = (date, format) => {
-  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);
-};
-var formatToPattern3 = (format) => {
-  return format.replace(/YYYY/g, "Y").replace(/MM/g, "M").replace(/[^YM\s]/g, (match) => `${match}\``);
+var formatValueString3 = (date, format, locale = "default") => {
+  const year = date.getFullYear().toString();
+  const month = (date.getMonth() + 1).toString().padStart(2, "0");
+  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);
 };
-function parseDate3(dateString) {
+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");
+  }
   let month, year;
-  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 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 date = /* @__PURE__ */ new Date(`${year}/${month}`);
-  return date;
+  const result = new Date(year, month, day);
+  return result;
 }
-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" });
@@ -4635,12 +4613,20 @@ var MonthPicker = (0, import_react33.forwardRef)(
       // NOTE: 스타일 관련된 props는 최상위 엘리먼트에 적용한다.
       sx,
       className,
-      format = "YYYY/MM",
+      /**
+       * 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);
-    const [value, setValue] = useControlledState(
+    const buttonRef = (0, import_react33.useRef)(null);
+    const [value, setValue, isControlled] = useControlledState(
       props.value,
       props.defaultValue || "",
       (0, import_react33.useCallback)(
@@ -4649,6 +4635,24 @@ var MonthPicker = (0, import_react33.forwardRef)(
       ),
       { disableStrict: true }
     );
+    const getFormattedDisplayValue = (0, import_react33.useCallback)(
+      (inputValue) => {
+        if (!inputValue) return "";
+        try {
+          return formatValueString3(
+            parseDate3(inputValue, format),
+            displayFormat,
+            locale
+          );
+        } catch (e) {
+          return inputValue;
+        }
+      },
+      [format, displayFormat, locale]
+    );
+    const [displayValue, setDisplayValue] = (0, import_react33.useState)(
+      () => getFormattedDisplayValue(value)
+    );
     const [anchorEl, setAnchorEl] = (0, import_react33.useState)(null);
     const open = Boolean(anchorEl);
     (0, import_react33.useEffect)(() => {
@@ -4659,11 +4663,18 @@ var MonthPicker = (0, import_react33.forwardRef)(
     (0, import_react33.useImperativeHandle)(ref, () => innerRef.current, [
       innerRef
     ]);
+    (0, import_react33.useEffect)(() => {
+      setDisplayValue(getFormattedDisplayValue(value));
+    }, [value, getFormattedDisplayValue]);
     const handleChange = (0, import_react33.useCallback)(
       (event) => {
-        setValue(event.target.value);
+        const newValue = event.target.value;
+        setValue(newValue);
+        if (!isControlled) {
+          setDisplayValue(getFormattedDisplayValue(newValue));
+        }
       },
-      [setValue]
+      [setValue, getFormattedDisplayValue, isControlled]
     );
     const handleCalendarToggle = (0, import_react33.useCallback)(
       (event) => {
@@ -4672,6 +4683,13 @@ 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,
       {
@@ -4679,13 +4697,21 @@ var MonthPicker = (0, import_react33.forwardRef)(
         color: error ? "danger" : innerProps.color,
         ref: innerRef,
         size,
-        value,
-        onChange: handleChange,
-        placeholder: format,
+        value: displayValue,
+        placeholder: displayFormat,
         disabled,
         required,
         slotProps: {
-          input: { component: TextMaskAdapter7, ref: innerRef, format }
+          input: {
+            ref: innerRef,
+            format: displayFormat,
+            sx: {
+              "&:hover": {
+                cursor: "default"
+              }
+            },
+            onMouseDown: handleInputMouseDown
+          }
         },
         error,
         className,
@@ -4697,12 +4723,14 @@ var MonthPicker = (0, import_react33.forwardRef)(
         endDecorator: /* @__PURE__ */ import_react33.default.createElement(
           IconButton_default,
           {
+            ref: buttonRef,
             variant: "plain",
             onClick: handleCalendarToggle,
             "aria-label": "Toggle Calendar",
             "aria-controls": "month-picker-popper",
             "aria-haspopup": "dialog",
-            "aria-expanded": open
+            "aria-expanded": open,
+            disabled
           },
           /* @__PURE__ */ import_react33.default.createElement(import_CalendarToday3.default, null)
         ),
@@ -4738,7 +4766,7 @@ var MonthPicker = (0, import_react33.forwardRef)(
             handleChange({
               target: {
                 name: props.name,
-                value: formatValueString3(date, format)
+                value: formatValueString3(date, format, locale)
               }
             });
             setAnchorEl(null);
@@ -4746,7 +4774,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,
@@ -4780,7 +4809,7 @@ var MonthPicker = (0, import_react33.forwardRef)(
 
 // src/components/MonthRangePicker/MonthRangePicker.tsx
 var import_react34 = __toESM(require("react"));
-var import_react_imask4 = require("react-imask");
+var import_react_imask3 = require("react-imask");
 var import_CalendarToday4 = __toESM(require("@mui/icons-material/CalendarToday"));
 var import_joy47 = require("@mui/joy");
 var import_base5 = require("@mui/base");
@@ -4834,29 +4863,29 @@ var parseDates2 = (str) => {
   const date2 = str.split(" - ")[1] || "";
   return [parseDate4(date1), parseDate4(date2)];
 };
-var formatToPattern4 = (format) => {
+var formatToPattern3 = (format) => {
   return `${format} - ${format}`.replace(/YYYY/g, "Y").replace(/MM/g, "m").replace(/[^YMm\s]/g, (match) => `${match}\``);
 };
-var TextMaskAdapter9 = import_react34.default.forwardRef(
-  function TextMaskAdapter10(props, ref) {
+var TextMaskAdapter7 = import_react34.default.forwardRef(
+  function TextMaskAdapter8(props, ref) {
     const { onChange, format, ...other } = props;
     return /* @__PURE__ */ import_react34.default.createElement(
-      import_react_imask4.IMaskInput,
+      import_react_imask3.IMaskInput,
       {
         ...other,
         inputRef: ref,
         onAccept: (value) => onChange({ target: { name: props.name, value } }),
         mask: Date,
-        pattern: formatToPattern4(format),
+        pattern: formatToPattern3(format),
         blocks: {
           m: {
-            mask: import_react_imask4.IMask.MaskedRange,
+            mask: import_react_imask3.IMask.MaskedRange,
             from: 1,
             to: 12,
             maxLength: 2
           },
           Y: {
-            mask: import_react_imask4.IMask.MaskedRange,
+            mask: import_react_imask3.IMask.MaskedRange,
             from: 1900,
             to: 9999
           }
@@ -4948,7 +4977,7 @@ var MonthRangePicker = (0, import_react34.forwardRef)(
         required,
         placeholder: `${format} - ${format}`,
         slotProps: {
-          input: { component: TextMaskAdapter9, ref: innerRef, format }
+          input: { component: TextMaskAdapter7, ref: innerRef, format }
         },
         error,
         className,
@@ -5149,8 +5178,8 @@ var padDecimal = (value, decimalScale) => {
   const [integer, decimal = ""] = `${value}`.split(".");
   return Number(`${integer}${decimal.padEnd(decimalScale, "0")}`);
 };
-var TextMaskAdapter11 = import_react38.default.forwardRef(
-  function TextMaskAdapter12(props, ref) {
+var TextMaskAdapter9 = import_react38.default.forwardRef(
+  function TextMaskAdapter10(props, ref) {
     const { onChange, min, max, ...innerProps } = props;
     return /* @__PURE__ */ import_react38.default.createElement(
       import_react_number_format2.NumericFormat,
@@ -5246,7 +5275,7 @@ var PercentageInput = import_react38.default.forwardRef(function PercentageInput
       helperText,
       slotProps: {
         input: {
-          component: TextMaskAdapter11,
+          component: TextMaskAdapter9,
           "aria-label": innerProps["aria-label"],
           decimalScale: maxDecimalScale
         }