@ceed/ads 1.30.0 → 1.31.0

package/dist/index.js

@@ -745,6 +745,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" });
 };
@@ -2411,6 +2414,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"
@@ -2481,6 +2485,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") {
@@ -2495,13 +2500,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]/);
@@ -2586,6 +2593,7 @@ var DatePicker = forwardRef6((inProps, ref) => {
     format = "YYYY/MM/DD",
     displayFormat = "YYYY/MM/DD",
     size,
+    locale = "default",
     inputReadOnly,
     hideClearButton,
     readOnly,
@@ -2600,8 +2608,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);
@@ -2615,19 +2624,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) => {
@@ -2665,12 +2674,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) => {
@@ -2716,12 +2725,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
@@ -2745,7 +2753,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,
@@ -4634,6 +4642,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"
@@ -4705,6 +4714,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) {
@@ -4727,14 +4737,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(" - ");
 };
@@ -4822,6 +4834,7 @@ var DateRangePicker = forwardRef8((inProps, ref) => {
     format = "YYYY/MM/DD",
     displayFormat = "YYYY/MM/DD",
     size,
+    locale = "default",
     inputReadOnly,
     hideClearButton,
     readOnly,
@@ -4835,8 +4848,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);
@@ -4848,14 +4862,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();
@@ -4865,10 +4879,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) => {
@@ -4909,21 +4923,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) => {
@@ -4931,12 +4945,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) => {
@@ -4971,12 +4985,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
@@ -5001,7 +5014,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,
@@ -6690,8 +6703,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]/);
@@ -6918,6 +6932,7 @@ import { IMaskInput as IMaskInput3, IMask as IMask3 } from "react-imask";
 import CalendarTodayIcon4 from "@mui/icons-material/CalendarToday";
 import { styled as styled23, useThemeProps as useThemeProps8 } 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 = styled23(Popper5, {
   name: "MonthRangePicker",
   slot: "popper"
@@ -6941,12 +6956,14 @@ var MonthRangePickerRoot = styled23("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(" - ");
 };
@@ -7018,18 +7035,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 = useRef12(null);
+  const buttonRef = useRef12(null);
   const [value, setValue] = useControlledState(
     props.value,
     props.defaultValue || "",
     useCallback27((value2) => onChange?.({ target: { name: props.name, value: value2 } }), [props.name, onChange])
   );
+  const [displayValue, setDisplayValue] = useState17(
+    () => value ? formatValueString4(parseDates2(value), displayFormat, locale) : ""
+  );
   const [anchorEl, setAnchorEl] = useState17(null);
   const open = Boolean(anchorEl);
   const calendarValue = useMemo16(() => value ? parseDates2(value) : void 0, [value]);
+  useEffect14(() => {
+    if (value) {
+      try {
+        const dates = parseDates2(value);
+        const newDisplayValue = formatValueString4(dates, displayFormat, locale);
+        setDisplayValue(newDisplayValue);
+      } catch {
+      }
+    } else {
+      setDisplayValue("");
+    }
+  }, [displayFormat, locale, value]);
   useEffect14(() => {
     if (!anchorEl) {
       innerRef.current?.blur();
@@ -7038,9 +7075,21 @@ var MonthRangePicker = forwardRef10((inProps, ref) => {
   useImperativeHandle5(ref, () => innerRef.current, [innerRef]);
   const handleChange = useCallback27(
     (event) => {
+      setDisplayValue(
+        event.target.value ? formatValueString4(parseDates2(event.target.value), displayFormat, locale) : ""
+      );
       setValue(event.target.value);
     },
-    [setValue]
+    [displayFormat, locale, setValue]
+  );
+  const handleInputMouseDown = useCallback27(
+    (event) => {
+      if (isAlphabeticDisplay) {
+        event.preventDefault();
+        buttonRef.current?.focus();
+      }
+    },
+    [isAlphabeticDisplay, buttonRef]
   );
   const handleCalendarToggle = useCallback27(
     (event) => {
@@ -7052,10 +7101,12 @@ var MonthRangePicker = forwardRef10((inProps, ref) => {
   const handleCalendarChange = useCallback27(
     ([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__ */ React47.createElement(MonthRangePickerRoot, null, /* @__PURE__ */ React47.createElement(FocusTrap4, { open: true }, /* @__PURE__ */ React47.createElement(React47.Fragment, null, /* @__PURE__ */ React47.createElement(
     Input_default,
@@ -7064,14 +7115,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: TextMaskAdapter9, ref: innerRef, format }
+        input: {
+          ...isAlphabeticDisplay ? {} : { component: TextMaskAdapter9, format },
+          ref: innerRef,
+          ...isAlphabeticDisplay ? {
+            sx: { "&:hover": { cursor: "default" } },
+            onMouseDown: handleInputMouseDown
+          } : {}
+        }
       },
+      readOnly: isAlphabeticDisplay || void 0,
       error,
       className,
       sx: {
@@ -7082,6 +7141,7 @@ var MonthRangePicker = forwardRef10((inProps, ref) => {
       endDecorator: /* @__PURE__ */ React47.createElement(
         IconButton_default,
         {
+          ref: buttonRef,
           variant: "plain",
           onClick: handleCalendarToggle,
           "aria-label": "Toggle Calendar",