@ceed/cds 1.29.1 → 1.30.0

package/dist/index.cjs

@@ -895,6 +895,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" });
 };
@@ -2538,6 +2541,7 @@ DialogActions.displayName = "DialogActions";
 var DialogActions_default = DialogActions;
 
 // src/components/DatePicker/DatePicker.tsx
+var hasAlphabeticMonth = (format) => /MMMM|MMM/.test(format);
 var CalendarButton = (0, import_joy28.styled)(IconButton_default, {
   name: "DatePicker",
   slot: "calendarButton"
@@ -2608,6 +2612,7 @@ var DatePickerRoot = (0, import_joy28.styled)("div", {
   width: "100%"
 });
 var validValueFormat = (value, format) => {
+  if (hasAlphabeticMonth(format)) return true;
   try {
     const parsedValue = parseDate(value, format);
     if (parsedValue.toString() === "Invalid Date") {
@@ -2622,13 +2627,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]/);
@@ -2713,6 +2720,7 @@ var DatePicker = (0, import_react20.forwardRef)((inProps, ref) => {
     format = "YYYY/MM/DD",
     displayFormat = "YYYY/MM/DD",
     size,
+    locale = "default",
     inputReadOnly,
     hideClearButton,
     readOnly,
@@ -2727,8 +2735,9 @@ var DatePicker = (0, import_react20.forwardRef)((inProps, ref) => {
     props.defaultValue || "",
     (0, import_react20.useCallback)((value2) => onChange?.({ target: { name: props.name, value: value2 } }), [props.name, onChange])
   );
+  const isAlphabeticDisplay = hasAlphabeticMonth(displayFormat);
   const [displayValue, setDisplayValue] = (0, import_react20.useState)(
-    () => value ? formatValueString(parseDate(value, format), displayFormat) : ""
+    () => value ? formatValueString(parseDate(value, format), displayFormat, locale) : ""
   );
   const [anchorEl, setAnchorEl] = (0, import_react20.useState)(null);
   const open = Boolean(anchorEl);
@@ -2742,19 +2751,19 @@ var DatePicker = (0, import_react20.forwardRef)((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]);
   (0, import_react20.useImperativeHandle)(ref, () => innerRef.current, [innerRef]);
   const handleChange = (0, import_react20.useCallback)(
     (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 = (0, import_react20.useCallback)(
     (event) => {
@@ -2792,12 +2801,12 @@ var DatePicker = (0, import_react20.forwardRef)((inProps, ref) => {
   );
   const handleInputMouseDown = (0, import_react20.useCallback)(
     (event) => {
-      if (inputReadOnly) {
+      if (inputReadOnly || isAlphabeticDisplay) {
         event.preventDefault();
         buttonRef.current?.focus();
       }
     },
-    [inputReadOnly, buttonRef]
+    [inputReadOnly, isAlphabeticDisplay, buttonRef]
   );
   const handlePresetClick = (0, import_react20.useCallback)(
     (presetValue) => {
@@ -2843,12 +2852,11 @@ var DatePicker = (0, import_react20.forwardRef)((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
@@ -2872,7 +2880,7 @@ var DatePicker = (0, import_react20.forwardRef)((inProps, ref) => {
       ),
       label,
       helperText,
-      readOnly: readOnly || inputReadOnly
+      readOnly: readOnly || inputReadOnly || isAlphabeticDisplay
     }
   ), open && /* @__PURE__ */ import_react20.default.createElement(import_base3.ClickAwayListener, { onClickAway: () => setAnchorEl(null) }, /* @__PURE__ */ import_react20.default.createElement(
     StyledPopper,
@@ -4761,6 +4769,7 @@ var import_react_imask2 = require("react-imask");
 var import_CalendarToday2 = __toESM(require("@mui/icons-material/CalendarToday"));
 var import_joy36 = require("@mui/joy");
 var import_base4 = require("@mui/base");
+var hasAlphabeticMonth2 = (format) => /MMMM|MMM/.test(format);
 var CalendarButton2 = (0, import_joy36.styled)(IconButton_default, {
   name: "DateRangePicker",
   slot: "calendarButton"
@@ -4832,6 +4841,7 @@ var DateRangePickerRoot = (0, import_joy36.styled)("div", {
   width: "100%"
 });
 var validValueFormat2 = (value, format) => {
+  if (hasAlphabeticMonth2(format)) return true;
   try {
     const [date1Str, date2Str] = value.split(" - ");
     if (!date1Str || !date2Str) {
@@ -4854,14 +4864,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(" - ");
 };
@@ -4949,6 +4961,7 @@ var DateRangePicker = (0, import_react29.forwardRef)((inProps, ref) => {
     format = "YYYY/MM/DD",
     displayFormat = "YYYY/MM/DD",
     size,
+    locale = "default",
     inputReadOnly,
     hideClearButton,
     readOnly,
@@ -4962,8 +4975,9 @@ var DateRangePicker = (0, import_react29.forwardRef)((inProps, ref) => {
     props.defaultValue || "",
     (0, import_react29.useCallback)((value2) => onChange?.({ target: { name: props.name, value: value2 } }), [props.name, onChange])
   );
+  const isAlphabeticDisplay = hasAlphabeticMonth2(displayFormat);
   const [displayValue, setDisplayValue] = (0, import_react29.useState)(
-    () => value ? formatValueString2(parseDates(value, format), displayFormat) : ""
+    () => value ? formatValueString2(parseDates(value, format), displayFormat, locale) : ""
   );
   const [anchorEl, setAnchorEl] = (0, import_react29.useState)(null);
   const open = Boolean(anchorEl);
@@ -4975,14 +4989,14 @@ var DateRangePicker = (0, import_react29.forwardRef)((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]);
   (0, import_react29.useEffect)(() => {
     if (!anchorEl) {
       innerRef.current?.blur();
@@ -4992,10 +5006,10 @@ var DateRangePicker = (0, import_react29.forwardRef)((inProps, ref) => {
   const handleChange = (0, import_react29.useCallback)(
     (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 = (0, import_react29.useCallback)(
     (event) => {
@@ -5036,21 +5050,21 @@ var DateRangePicker = (0, import_react29.forwardRef)((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 = (0, import_react29.useCallback)(
     (event) => {
-      if (inputReadOnly) {
+      if (inputReadOnly || isAlphabeticDisplay) {
         event.preventDefault();
         buttonRef.current?.focus();
       }
     },
-    [inputReadOnly, buttonRef]
+    [inputReadOnly, isAlphabeticDisplay, buttonRef]
   );
   const handlePresetClick = (0, import_react29.useCallback)(
     (presetValue) => {
@@ -5058,12 +5072,12 @@ var DateRangePicker = (0, import_react29.forwardRef)((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 = (0, import_react29.useCallback)(
     (presetValue) => {
@@ -5098,12 +5112,11 @@ var DateRangePicker = (0, import_react29.forwardRef)((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
@@ -5128,7 +5141,7 @@ var DateRangePicker = (0, import_react29.forwardRef)((inProps, ref) => {
       ),
       label,
       helperText,
-      readOnly: readOnly || inputReadOnly
+      readOnly: readOnly || inputReadOnly || isAlphabeticDisplay
     }
   ), open && /* @__PURE__ */ import_react29.default.createElement(import_base4.ClickAwayListener, { onClickAway: () => setAnchorEl(null) }, /* @__PURE__ */ import_react29.default.createElement(
     StyledPopper2,
@@ -5803,8 +5816,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]/);
@@ -6031,6 +6045,7 @@ var import_react_imask3 = require("react-imask");
 var import_CalendarToday4 = __toESM(require("@mui/icons-material/CalendarToday"));
 var import_joy50 = require("@mui/joy");
 var import_base6 = require("@mui/base");
+var hasAlphabeticMonth3 = (format) => /MMMM|MMM/.test(format);
 var StyledPopper4 = (0, import_joy50.styled)(import_base6.Popper, {
   name: "MonthRangePicker",
   slot: "popper"
@@ -6054,12 +6069,14 @@ var MonthRangePickerRoot = (0, import_joy50.styled)("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(" - ");
 };
@@ -6131,18 +6148,38 @@ var MonthRangePicker = (0, import_react39.forwardRef)((inProps, ref) => {
     sx,
     className,
     format = "YYYY/MM",
+    displayFormat: displayFormatProp,
     size,
+    locale = "default",
     ...innerProps
   } = props;
+  const displayFormat = displayFormatProp ?? format;
+  const isAlphabeticDisplay = hasAlphabeticMonth3(displayFormat);
   const innerRef = (0, import_react39.useRef)(null);
+  const buttonRef = (0, import_react39.useRef)(null);
   const [value, setValue] = useControlledState(
     props.value,
     props.defaultValue || "",
     (0, import_react39.useCallback)((value2) => onChange?.({ target: { name: props.name, value: value2 } }), [props.name, onChange])
   );
+  const [displayValue, setDisplayValue] = (0, import_react39.useState)(
+    () => value ? formatValueString4(parseDates2(value), displayFormat, locale) : ""
+  );
   const [anchorEl, setAnchorEl] = (0, import_react39.useState)(null);
   const open = Boolean(anchorEl);
   const calendarValue = (0, import_react39.useMemo)(() => value ? parseDates2(value) : void 0, [value]);
+  (0, import_react39.useEffect)(() => {
+    if (value) {
+      try {
+        const dates = parseDates2(value);
+        const newDisplayValue = formatValueString4(dates, displayFormat, locale);
+        setDisplayValue(newDisplayValue);
+      } catch {
+      }
+    } else {
+      setDisplayValue("");
+    }
+  }, [displayFormat, locale, value]);
   (0, import_react39.useEffect)(() => {
     if (!anchorEl) {
       innerRef.current?.blur();
@@ -6151,9 +6188,21 @@ var MonthRangePicker = (0, import_react39.forwardRef)((inProps, ref) => {
   (0, import_react39.useImperativeHandle)(ref, () => innerRef.current, [innerRef]);
   const handleChange = (0, import_react39.useCallback)(
     (event) => {
+      setDisplayValue(
+        event.target.value ? formatValueString4(parseDates2(event.target.value), displayFormat, locale) : ""
+      );
       setValue(event.target.value);
     },
-    [setValue]
+    [displayFormat, locale, setValue]
+  );
+  const handleInputMouseDown = (0, import_react39.useCallback)(
+    (event) => {
+      if (isAlphabeticDisplay) {
+        event.preventDefault();
+        buttonRef.current?.focus();
+      }
+    },
+    [isAlphabeticDisplay, buttonRef]
   );
   const handleCalendarToggle = (0, import_react39.useCallback)(
     (event) => {
@@ -6165,10 +6214,12 @@ var MonthRangePicker = (0, import_react39.forwardRef)((inProps, ref) => {
   const handleCalendarChange = (0, import_react39.useCallback)(
     ([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__ */ import_react39.default.createElement(MonthRangePickerRoot, null, /* @__PURE__ */ import_react39.default.createElement(import_base6.FocusTrap, { open: true }, /* @__PURE__ */ import_react39.default.createElement(import_react39.default.Fragment, null, /* @__PURE__ */ import_react39.default.createElement(
     Input_default,
@@ -6177,14 +6228,22 @@ var MonthRangePicker = (0, import_react39.forwardRef)((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: {
@@ -6195,6 +6254,7 @@ var MonthRangePicker = (0, import_react39.forwardRef)((inProps, ref) => {
       endDecorator: /* @__PURE__ */ import_react39.default.createElement(
         IconButton_default,
         {
+          ref: buttonRef,
           variant: "plain",
           onClick: handleCalendarToggle,
           "aria-label": "Toggle Calendar",