@ceed/cds 1.29.1 → 1.30.0

package/dist/index.js

@@ -755,6 +755,9 @@ var getMonthName = (date, locale, options) => {
     ...options?.hideYear ? {} : { year: "numeric" }
   });
 };
+var getShortMonthName = (date, locale) => {
+  return date.toLocaleString(locale, { month: "short" });
+};
 var getMonthNameFromIndex = (index, locale) => {
   return new Date(0, index).toLocaleString(locale, { month: "short" });
 };
@@ -2421,6 +2424,7 @@ DialogActions.displayName = "DialogActions";
 var DialogActions_default = DialogActions;
 
 // src/components/DatePicker/DatePicker.tsx
+var hasAlphabeticMonth = (format) => /MMMM|MMM/.test(format);
 var CalendarButton = styled10(IconButton_default, {
   name: "DatePicker",
   slot: "calendarButton"
@@ -2491,6 +2495,7 @@ var DatePickerRoot = styled10("div", {
   width: "100%"
 });
 var validValueFormat = (value, format) => {
+  if (hasAlphabeticMonth(format)) return true;
   try {
     const parsedValue = parseDate(value, format);
     if (parsedValue.toString() === "Invalid Date") {
@@ -2505,13 +2510,15 @@ var validValueFormat = (value, format) => {
     return false;
   }
 };
-var formatValueString = (date, format) => {
+var formatValueString = (date, format, locale = "default") => {
   let day = `${date.getDate()}`;
   let month = `${date.getMonth() + 1}`;
   const year = date.getFullYear();
   if (Number(day) < 10) day = "0" + day;
   if (Number(month) < 10) month = "0" + month;
-  return format.replace(/YYYY/g, year.toString()).replace(/MM/g, month).replace(/DD/g, day);
+  const monthName = getMonthName(date, locale, { hideYear: true });
+  const shortMonthName = getShortMonthName(date, locale);
+  return format.replace(/MMMM/g, monthName).replace(/MMM/g, shortMonthName).replace(/MM/g, month).replace(/DD/g, day).replace(/YYYY/g, year.toString());
 };
 function parseDate(dateString, format) {
   const formatParts = format.split(/[-./\s]/);
@@ -2596,6 +2603,7 @@ var DatePicker = forwardRef6((inProps, ref) => {
     format = "YYYY/MM/DD",
     displayFormat = "YYYY/MM/DD",
     size,
+    locale = "default",
     inputReadOnly,
     hideClearButton,
     readOnly,
@@ -2610,8 +2618,9 @@ var DatePicker = forwardRef6((inProps, ref) => {
     props.defaultValue || "",
     useCallback8((value2) => onChange?.({ target: { name: props.name, value: value2 } }), [props.name, onChange])
   );
+  const isAlphabeticDisplay = hasAlphabeticMonth(displayFormat);
   const [displayValue, setDisplayValue] = useState7(
-    () => value ? formatValueString(parseDate(value, format), displayFormat) : ""
+    () => value ? formatValueString(parseDate(value, format), displayFormat, locale) : ""
   );
   const [anchorEl, setAnchorEl] = useState7(null);
   const open = Boolean(anchorEl);
@@ -2625,19 +2634,19 @@ var DatePicker = forwardRef6((inProps, ref) => {
       setDisplayValue("");
       return;
     }
-    const formattedValue = formatValueString(parseDate(value, format), displayFormat);
+    const formattedValue = formatValueString(parseDate(value, format), displayFormat, locale);
     if (validValueFormat(formattedValue, displayFormat) && formattedValue !== displayValue) {
       setDisplayValue(formattedValue);
     }
-  }, [displayFormat, displayValue, format, value]);
+  }, [displayFormat, displayValue, format, locale, value]);
   useImperativeHandle(ref, () => innerRef.current, [innerRef]);
   const handleChange = useCallback8(
     (event) => {
       const value2 = event.target.value;
-      setDisplayValue(value2 ? formatValueString(parseDate(value2, format), displayFormat) : value2);
+      setDisplayValue(value2 ? formatValueString(parseDate(value2, format), displayFormat, locale) : value2);
       setValue(value2);
     },
-    [displayFormat, format, setValue]
+    [displayFormat, format, locale, setValue]
   );
   const handleDisplayInputChange = useCallback8(
     (event) => {
@@ -2675,12 +2684,12 @@ var DatePicker = forwardRef6((inProps, ref) => {
   );
   const handleInputMouseDown = useCallback8(
     (event) => {
-      if (inputReadOnly) {
+      if (inputReadOnly || isAlphabeticDisplay) {
         event.preventDefault();
         buttonRef.current?.focus();
       }
     },
-    [inputReadOnly, buttonRef]
+    [inputReadOnly, isAlphabeticDisplay, buttonRef]
   );
   const handlePresetClick = useCallback8(
     (presetValue) => {
@@ -2726,12 +2735,11 @@ var DatePicker = forwardRef6((inProps, ref) => {
       error,
       slotProps: {
         input: {
-          component: TextMaskAdapter3,
+          ...isAlphabeticDisplay ? {} : { component: TextMaskAdapter3, format: displayFormat },
           ref: innerRef,
-          format: displayFormat,
           sx: {
             "&:hover": {
-              cursor: inputReadOnly || readOnly ? "default" : "text"
+              cursor: isAlphabeticDisplay || inputReadOnly || readOnly ? "default" : "text"
             }
           },
           onMouseDown: handleInputMouseDown
@@ -2755,7 +2763,7 @@ var DatePicker = forwardRef6((inProps, ref) => {
       ),
       label,
       helperText,
-      readOnly: readOnly || inputReadOnly
+      readOnly: readOnly || inputReadOnly || isAlphabeticDisplay
     }
   ), open && /* @__PURE__ */ React18.createElement(ClickAwayListener, { onClickAway: () => setAnchorEl(null) }, /* @__PURE__ */ React18.createElement(
     StyledPopper,
@@ -4644,6 +4652,7 @@ import { IMaskInput as IMaskInput2, IMask as IMask2 } from "react-imask";
 import CalendarTodayIcon2 from "@mui/icons-material/CalendarToday";
 import { styled as styled14, useThemeProps as useThemeProps5 } from "@mui/joy";
 import { FocusTrap as FocusTrap2, ClickAwayListener as ClickAwayListener2, Popper as Popper3 } from "@mui/base";
+var hasAlphabeticMonth2 = (format) => /MMMM|MMM/.test(format);
 var CalendarButton2 = styled14(IconButton_default, {
   name: "DateRangePicker",
   slot: "calendarButton"
@@ -4715,6 +4724,7 @@ var DateRangePickerRoot = styled14("div", {
   width: "100%"
 });
 var validValueFormat2 = (value, format) => {
+  if (hasAlphabeticMonth2(format)) return true;
   try {
     const [date1Str, date2Str] = value.split(" - ");
     if (!date1Str || !date2Str) {
@@ -4737,14 +4747,16 @@ var validValueFormat2 = (value, format) => {
     return false;
   }
 };
-var formatValueString2 = ([date1, date2], format) => {
+var formatValueString2 = ([date1, date2], format, locale = "default") => {
   const getStr = (date) => {
     let day = `${date.getDate()}`;
     let month = `${date.getMonth() + 1}`;
     const year = date.getFullYear();
     if (Number(day) < 10) day = "0" + day;
     if (Number(month) < 10) month = "0" + month;
-    return format.replace(/YYYY/g, year.toString()).replace(/MM/g, month).replace(/DD/g, day);
+    const monthName = getMonthName(date, locale, { hideYear: true });
+    const shortMonthName = getShortMonthName(date, locale);
+    return format.replace(/MMMM/g, monthName).replace(/MMM/g, shortMonthName).replace(/MM/g, month).replace(/DD/g, day).replace(/YYYY/g, year.toString());
   };
   return [getStr(date1), date2 ? getStr(date2) : ""].join(" - ");
 };
@@ -4832,6 +4844,7 @@ var DateRangePicker = forwardRef8((inProps, ref) => {
     format = "YYYY/MM/DD",
     displayFormat = "YYYY/MM/DD",
     size,
+    locale = "default",
     inputReadOnly,
     hideClearButton,
     readOnly,
@@ -4845,8 +4858,9 @@ var DateRangePicker = forwardRef8((inProps, ref) => {
     props.defaultValue || "",
     useCallback13((value2) => onChange?.({ target: { name: props.name, value: value2 } }), [props.name, onChange])
   );
+  const isAlphabeticDisplay = hasAlphabeticMonth2(displayFormat);
   const [displayValue, setDisplayValue] = useState10(
-    () => value ? formatValueString2(parseDates(value, format), displayFormat) : ""
+    () => value ? formatValueString2(parseDates(value, format), displayFormat, locale) : ""
   );
   const [anchorEl, setAnchorEl] = useState10(null);
   const open = Boolean(anchorEl);
@@ -4858,14 +4872,14 @@ var DateRangePicker = forwardRef8((inProps, ref) => {
     if (value) {
       try {
         const dates = parseDates(value, format);
-        const newDisplayValue = formatValueString2(dates, displayFormat);
+        const newDisplayValue = formatValueString2(dates, displayFormat, locale);
         setDisplayValue(newDisplayValue);
       } catch (error2) {
       }
     } else {
       setDisplayValue("");
     }
-  }, [displayFormat, value, format]);
+  }, [displayFormat, locale, value, format]);
   useEffect8(() => {
     if (!anchorEl) {
       innerRef.current?.blur();
@@ -4875,10 +4889,10 @@ var DateRangePicker = forwardRef8((inProps, ref) => {
   const handleChange = useCallback13(
     (event) => {
       const value2 = event.target.value;
-      setDisplayValue(value2 ? formatValueString2(parseDates(value2, format), displayFormat) : value2);
+      setDisplayValue(value2 ? formatValueString2(parseDates(value2, format), displayFormat, locale) : value2);
       setValue(value2);
     },
-    [displayFormat, format, setValue]
+    [displayFormat, format, locale, setValue]
   );
   const handleDisplayInputChange = useCallback13(
     (event) => {
@@ -4919,21 +4933,21 @@ var DateRangePicker = forwardRef8((inProps, ref) => {
       if (props.value !== void 0) {
         onChange?.({ target: { name: props.name, value: formattedValue } });
       } else {
-        setDisplayValue(formatValueString2([date1, date2], displayFormat));
+        setDisplayValue(formatValueString2([date1, date2], displayFormat, locale));
         setValue(formattedValue);
       }
       setAnchorEl(null);
     },
-    [props.value, props.name, onChange, setValue, setAnchorEl, format, displayFormat]
+    [props.value, props.name, onChange, setValue, setAnchorEl, format, displayFormat, locale]
   );
   const handleInputMouseDown = useCallback13(
     (event) => {
-      if (inputReadOnly) {
+      if (inputReadOnly || isAlphabeticDisplay) {
         event.preventDefault();
         buttonRef.current?.focus();
       }
     },
-    [inputReadOnly, buttonRef]
+    [inputReadOnly, isAlphabeticDisplay, buttonRef]
   );
   const handlePresetClick = useCallback13(
     (presetValue) => {
@@ -4941,12 +4955,12 @@ var DateRangePicker = forwardRef8((inProps, ref) => {
         onChange?.({ target: { name: props.name, value: presetValue } });
       } else {
         const dates = parseDates(presetValue, format);
-        setDisplayValue(formatValueString2(dates, displayFormat));
+        setDisplayValue(formatValueString2(dates, displayFormat, locale));
         setValue(presetValue);
       }
       setAnchorEl(null);
     },
-    [props.value, props.name, onChange, setValue, setAnchorEl, format, displayFormat]
+    [props.value, props.name, onChange, setValue, setAnchorEl, format, displayFormat, locale]
   );
   const isPresetDisabled = useCallback13(
     (presetValue) => {
@@ -4981,12 +4995,11 @@ var DateRangePicker = forwardRef8((inProps, ref) => {
       placeholder: `${displayFormat} - ${displayFormat}`,
       slotProps: {
         input: {
-          component: TextMaskAdapter5,
+          ...isAlphabeticDisplay ? {} : { component: TextMaskAdapter5, format: displayFormat },
           ref: innerRef,
-          format: displayFormat,
           sx: {
             "&:hover": {
-              cursor: inputReadOnly || readOnly ? "default" : "text"
+              cursor: isAlphabeticDisplay || inputReadOnly || readOnly ? "default" : "text"
             }
           },
           onMouseDown: handleInputMouseDown
@@ -5011,7 +5024,7 @@ var DateRangePicker = forwardRef8((inProps, ref) => {
       ),
       label,
       helperText,
-      readOnly: readOnly || inputReadOnly
+      readOnly: readOnly || inputReadOnly || isAlphabeticDisplay
     }
   ), open && /* @__PURE__ */ React26.createElement(ClickAwayListener2, { onClickAway: () => setAnchorEl(null) }, /* @__PURE__ */ React26.createElement(
     StyledPopper2,
@@ -5692,8 +5705,9 @@ 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 shortMonthName = getShortMonthName(date, locale);
   const day = "01";
-  return format.replace(/MMMM/g, monthName).replace(/MM/g, month).replace(/DD/g, day).replace(/YYYY/g, year);
+  return format.replace(/MMMM/g, monthName).replace(/MMM/g, shortMonthName).replace(/MM/g, month).replace(/DD/g, day).replace(/YYYY/g, year);
 };
 function parseDate3(dateString, format) {
   const dateParts = dateString.split(/[-./\s]/);
@@ -5920,6 +5934,7 @@ import { IMaskInput as IMaskInput3, IMask as IMask3 } from "react-imask";
 import CalendarTodayIcon4 from "@mui/icons-material/CalendarToday";
 import { styled as styled22, useThemeProps as useThemeProps7 } from "@mui/joy";
 import { FocusTrap as FocusTrap4, ClickAwayListener as ClickAwayListener4, Popper as Popper5 } from "@mui/base";
+var hasAlphabeticMonth3 = (format) => /MMMM|MMM/.test(format);
 var StyledPopper4 = styled22(Popper5, {
   name: "MonthRangePicker",
   slot: "popper"
@@ -5943,12 +5958,14 @@ var MonthRangePickerRoot = styled22("div", {
 })({
   width: "100%"
 });
-var formatValueString4 = ([date1, date2], format) => {
+var formatValueString4 = ([date1, date2], format, locale = "default") => {
   const getStr = (date) => {
     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);
+    const monthName = getMonthName(date, locale, { hideYear: true });
+    const shortMonthName = getShortMonthName(date, locale);
+    return format.replace(/MMMM/g, monthName).replace(/MMM/g, shortMonthName).replace(/MM/g, month).replace(/YYYY/g, year.toString());
   };
   return [getStr(date1), date2 ? getStr(date2) : ""].join(" - ");
 };
@@ -6020,18 +6037,38 @@ var MonthRangePicker = forwardRef10((inProps, ref) => {
     sx,
     className,
     format = "YYYY/MM",
+    displayFormat: displayFormatProp,
     size,
+    locale = "default",
     ...innerProps
   } = props;
+  const displayFormat = displayFormatProp ?? format;
+  const isAlphabeticDisplay = hasAlphabeticMonth3(displayFormat);
   const innerRef = useRef11(null);
+  const buttonRef = useRef11(null);
   const [value, setValue] = useControlledState(
     props.value,
     props.defaultValue || "",
     useCallback16((value2) => onChange?.({ target: { name: props.name, value: value2 } }), [props.name, onChange])
   );
+  const [displayValue, setDisplayValue] = useState14(
+    () => value ? formatValueString4(parseDates2(value), displayFormat, locale) : ""
+  );
   const [anchorEl, setAnchorEl] = useState14(null);
   const open = Boolean(anchorEl);
   const calendarValue = useMemo13(() => value ? parseDates2(value) : void 0, [value]);
+  useEffect12(() => {
+    if (value) {
+      try {
+        const dates = parseDates2(value);
+        const newDisplayValue = formatValueString4(dates, displayFormat, locale);
+        setDisplayValue(newDisplayValue);
+      } catch {
+      }
+    } else {
+      setDisplayValue("");
+    }
+  }, [displayFormat, locale, value]);
   useEffect12(() => {
     if (!anchorEl) {
       innerRef.current?.blur();
@@ -6040,9 +6077,21 @@ var MonthRangePicker = forwardRef10((inProps, ref) => {
   useImperativeHandle5(ref, () => innerRef.current, [innerRef]);
   const handleChange = useCallback16(
     (event) => {
+      setDisplayValue(
+        event.target.value ? formatValueString4(parseDates2(event.target.value), displayFormat, locale) : ""
+      );
       setValue(event.target.value);
     },
-    [setValue]
+    [displayFormat, locale, setValue]
+  );
+  const handleInputMouseDown = useCallback16(
+    (event) => {
+      if (isAlphabeticDisplay) {
+        event.preventDefault();
+        buttonRef.current?.focus();
+      }
+    },
+    [isAlphabeticDisplay, buttonRef]
   );
   const handleCalendarToggle = useCallback16(
     (event) => {
@@ -6054,10 +6103,12 @@ var MonthRangePicker = forwardRef10((inProps, ref) => {
   const handleCalendarChange = useCallback16(
     ([date1, date2]) => {
       if (!date1 || !date2) return;
-      setValue(formatValueString4([date1, date2], format));
+      const formattedValue = formatValueString4([date1, date2], format);
+      setDisplayValue(formatValueString4([date1, date2], displayFormat, locale));
+      setValue(formattedValue);
       setAnchorEl(null);
     },
-    [setValue, setAnchorEl, format]
+    [setValue, setAnchorEl, format, displayFormat, locale]
   );
   return /* @__PURE__ */ React36.createElement(MonthRangePickerRoot, null, /* @__PURE__ */ React36.createElement(FocusTrap4, { open: true }, /* @__PURE__ */ React36.createElement(React36.Fragment, null, /* @__PURE__ */ React36.createElement(
     Input_default,
@@ -6066,14 +6117,22 @@ var MonthRangePicker = forwardRef10((inProps, ref) => {
       color: error ? "danger" : innerProps.color,
       ref,
       size,
-      value,
+      value: isAlphabeticDisplay ? displayValue : value,
       onChange: handleChange,
       disabled,
       required,
-      placeholder: `${format} - ${format}`,
+      placeholder: `${displayFormat} - ${displayFormat}`,
       slotProps: {
-        input: { component: TextMaskAdapter7, ref: innerRef, format }
+        input: {
+          ...isAlphabeticDisplay ? {} : { component: TextMaskAdapter7, format },
+          ref: innerRef,
+          ...isAlphabeticDisplay ? {
+            sx: { "&:hover": { cursor: "default" } },
+            onMouseDown: handleInputMouseDown
+          } : {}
+        }
       },
+      readOnly: isAlphabeticDisplay || void 0,
       error,
       className,
       sx: {
@@ -6084,6 +6143,7 @@ var MonthRangePicker = forwardRef10((inProps, ref) => {
       endDecorator: /* @__PURE__ */ React36.createElement(
         IconButton_default,
         {
+          ref: buttonRef,
           variant: "plain",
           onClick: handleCalendarToggle,
           "aria-label": "Toggle Calendar",