Merge pull request #5296 from yuki0410-dev/bugfix/5284

Fix #5284: replace JSX.Element to React.ReactElement

src/calendar.tsx

@@ -182,7 +182,7 @@ type CalendarProps = React.PropsWithChildren<
       ) => void;
       renderCustomHeader?: (
         props: ReactDatePickerCustomHeaderProps,
-      ) => JSX.Element;
+      ) => React.ReactElement;
       onYearMouseEnter?: YearProps["onYearMouseEnter"];
       onYearMouseLeave?: YearProps["onYearMouseLeave"];
       monthAriaLabelPrefix?: MonthProps["ariaLabelPrefix"];
@@ -459,14 +459,14 @@ export default class Calendar extends Component<CalendarProps, CalendarState> {
     );
   };
 
-  header = (date: Date = this.state.date): JSX.Element[] => {
+  header = (date: Date = this.state.date): React.ReactElement[] => {
     const startOfWeek = getStartOfWeek(
       date,
       this.props.locale,
       this.props.calendarStartDay,
     );
 
-    const dayNames: JSX.Element[] = [];
+    const dayNames: React.ReactElement[] = [];
     if (this.props.showWeekNumbers) {
       dayNames.push(
         <div key="W" className="react-datepicker__day-name">
@@ -524,7 +524,7 @@ export default class Calendar extends Component<CalendarProps, CalendarState> {
     this.setState({ selectingDate: undefined });
   };
 
-  renderPreviousButton = (): JSX.Element | void => {
+  renderPreviousButton = (): React.ReactElement | void => {
     if (this.props.renderCustomHeader) {
       return;
     }
@@ -643,7 +643,7 @@ export default class Calendar extends Component<CalendarProps, CalendarState> {
     );
   };
 
-  renderNextButton = (): JSX.Element | void => {
+  renderNextButton = (): React.ReactElement | void => {
     if (this.props.renderCustomHeader) {
       return;
     }
@@ -740,7 +740,7 @@ export default class Calendar extends Component<CalendarProps, CalendarState> {
     );
   };
 
-  renderCurrentMonth = (date: Date = this.state.date): JSX.Element => {
+  renderCurrentMonth = (date: Date = this.state.date): React.ReactElement => {
     const classes = ["react-datepicker__current-month"];
 
     if (this.props.showYearDropdown) {
@@ -761,7 +761,7 @@ export default class Calendar extends Component<CalendarProps, CalendarState> {
 
   renderYearDropdown = (
     overrideHide: boolean = false,
-  ): JSX.Element | undefined => {
+  ): React.ReactElement | undefined => {
     if (!this.props.showYearDropdown || overrideHide) {
       return;
     }
@@ -778,7 +778,7 @@ export default class Calendar extends Component<CalendarProps, CalendarState> {
 
   renderMonthDropdown = (
     overrideHide: boolean = false,
-  ): JSX.Element | undefined => {
+  ): React.ReactElement | undefined => {
     if (!this.props.showMonthDropdown || overrideHide) {
       return;
     }
@@ -794,7 +794,7 @@ export default class Calendar extends Component<CalendarProps, CalendarState> {
 
   renderMonthYearDropdown = (
     overrideHide: boolean = false,
-  ): JSX.Element | undefined => {
+  ): React.ReactElement | undefined => {
     if (!this.props.showMonthYearDropdown || overrideHide) {
       return;
     }
@@ -813,7 +813,7 @@ export default class Calendar extends Component<CalendarProps, CalendarState> {
     this.props.setPreSelection && this.props.setPreSelection(getStartOfToday());
   };
 
-  renderTodayButton = (): JSX.Element | undefined => {
+  renderTodayButton = (): React.ReactElement | undefined => {
     if (!this.props.todayButton || this.props.showTimeSelectOnly) {
       return;
     }
@@ -914,7 +914,11 @@ export default class Calendar extends Component<CalendarProps, CalendarState> {
     );
   };
 
-  renderYearHeader = ({ monthDate }: { monthDate: Date }): JSX.Element => {
+  renderYearHeader = ({
+    monthDate,
+  }: {
+    monthDate: Date;
+  }): React.ReactElement => {
     const {
       showYearPicker,
       yearItemNumber = Calendar.defaultProps.yearItemNumber,
@@ -936,7 +940,7 @@ export default class Calendar extends Component<CalendarProps, CalendarState> {
   }: {
     monthDate: Date;
     i?: number;
-  }): JSX.Element | null => {
+  }): React.ReactElement | null => {
     const headerArgs = { monthDate, i };
     switch (true) {
       case this.props.renderCustomHeader !== undefined:
@@ -950,12 +954,12 @@ export default class Calendar extends Component<CalendarProps, CalendarState> {
     }
   };
 
-  renderMonths = (): JSX.Element[] | undefined => {
+  renderMonths = (): React.ReactElement[] | undefined => {
     if (this.props.showTimeSelectOnly || this.props.showYearPicker) {
       return;
     }
 
-    const monthList: JSX.Element[] = [];
+    const monthList: React.ReactElement[] = [];
     const monthsShown =
       this.props.monthsShown ?? Calendar.defaultProps.monthsShown;
     const monthsToSubtract = this.props.showPreviousMonths
@@ -1005,7 +1009,7 @@ export default class Calendar extends Component<CalendarProps, CalendarState> {
     return monthList;
   };
 
-  renderYears = (): JSX.Element | undefined => {
+  renderYears = (): React.ReactElement | undefined => {
     if (this.props.showTimeSelectOnly) {
       return;
     }
@@ -1029,7 +1033,7 @@ export default class Calendar extends Component<CalendarProps, CalendarState> {
     return;
   };
 
-  renderTimeSection = (): JSX.Element | undefined => {
+  renderTimeSection = (): React.ReactElement | undefined => {
     if (
       this.props.showTimeSelect &&
       (this.state.monthContainer || this.props.showTimeSelectOnly)
@@ -1048,7 +1052,7 @@ export default class Calendar extends Component<CalendarProps, CalendarState> {
     return;
   };
 
-  renderInputTimeSection = (): JSX.Element | undefined => {
+  renderInputTimeSection = (): React.ReactElement | undefined => {
     const time = this.props.selected
       ? new Date(this.props.selected)
       : undefined;
@@ -1070,7 +1074,7 @@ export default class Calendar extends Component<CalendarProps, CalendarState> {
     return;
   };
 
-  renderAriaLiveRegion = (): JSX.Element => {
+  renderAriaLiveRegion = (): React.ReactElement => {
     const { startPeriod, endPeriod } = getYearsPeriod(
       this.state.date,
       this.props.yearItemNumber ?? Calendar.defaultProps.yearItemNumber,
@@ -1102,7 +1106,7 @@ export default class Calendar extends Component<CalendarProps, CalendarState> {
     );
   };
 
-  renderChildren = (): JSX.Element | undefined => {
+  renderChildren = (): React.ReactElement | undefined => {
     if (this.props.children) {
       return (
         <div className="react-datepicker__children-container">
@@ -1113,7 +1117,7 @@ export default class Calendar extends Component<CalendarProps, CalendarState> {
     return;
   };
 
-  render(): JSX.Element {
+  render(): React.ReactElement {
     const Container = this.props.container || CalendarContainer;
     return (
       <ClickOutsideWrapper

src/calendar_icon.tsx

@@ -29,7 +29,7 @@ const CalendarIcon: React.FC<CalendarIconProps> = ({
   icon,
   className = "",
   onClick,
-}: CalendarIconProps): JSX.Element => {
+}: CalendarIconProps): React.ReactElement => {
   const defaultClass = "react-datepicker__calendar-icon";
 
   if (typeof icon === "string") {

src/index.tsx

@@ -1389,7 +1389,7 @@ export default class DatePicker extends Component<
     });
   };
 
-  renderClearButton = (): JSX.Element | null => {
+  renderClearButton = (): React.ReactElement | null => {
     const {
       isClearable,
       disabled,
@@ -1428,7 +1428,7 @@ export default class DatePicker extends Component<
     }
   };
 
-  renderInputContainer(): JSX.Element {
+  renderInputContainer(): React.ReactElement {
     const {
       showIcon,
       icon,
@@ -1472,7 +1472,7 @@ export default class DatePicker extends Component<
     );
   }
 
-  render(): JSX.Element | null {
+  render(): React.ReactElement | null {
     const calendar = this.renderCalendar();
 
     if (this.props.inline) return calendar;

src/input_time.tsx

@@ -5,7 +5,7 @@ interface InputTimeProps {
   date?: Date;
   timeString?: string;
   timeInputLabel?: string;
-  customTimeInput?: JSX.Element;
+  customTimeInput?: React.ReactElement;
 }
 
 interface InputTimeState {

src/month_dropdown.tsx

@@ -33,16 +33,16 @@ export default class MonthDropdown extends Component<
     dropdownVisible: false,
   };
 
-  renderSelectOptions = (monthNames: string[]): JSX.Element[] =>
-    monthNames.map<JSX.Element>(
-      (m: string, i: number): JSX.Element => (
+  renderSelectOptions = (monthNames: string[]): React.ReactElement[] =>
+    monthNames.map<React.ReactElement>(
+      (m: string, i: number): React.ReactElement => (
         <option key={m} value={i}>
           {m}
         </option>
       ),
     );
 
-  renderSelectMode = (monthNames: string[]): JSX.Element => (
+  renderSelectMode = (monthNames: string[]): React.ReactElement => (
     <select
       value={this.props.month}
       className="react-datepicker__month-select"
@@ -52,7 +52,10 @@ export default class MonthDropdown extends Component<
     </select>
   );
 
-  renderReadView = (visible: boolean, monthNames: string[]): JSX.Element => (
+  renderReadView = (
+    visible: boolean,
+    monthNames: string[],
+  ): React.ReactElement => (
     <div
       key="read"
       style={{ visibility: visible ? "visible" : "hidden" }}
@@ -66,7 +69,7 @@ export default class MonthDropdown extends Component<
     </div>
   );
 
-  renderDropdown = (monthNames: string[]): JSX.Element => (
+  renderDropdown = (monthNames: string[]): React.ReactElement => (
     <MonthDropdownOptions
       key="dropdown"
       {...this.props}
@@ -76,7 +79,7 @@ export default class MonthDropdown extends Component<
     />
   );
 
-  renderScrollMode = (monthNames: string[]): JSX.Element[] => {
+  renderScrollMode = (monthNames: string[]): React.ReactElement[] => {
     const { dropdownVisible } = this.state;
     const result = [this.renderReadView(!dropdownVisible, monthNames)];
     if (dropdownVisible) {
@@ -97,14 +100,14 @@ export default class MonthDropdown extends Component<
       dropdownVisible: !this.state.dropdownVisible,
     });
 
-  render(): JSX.Element {
+  render(): React.ReactElement {
     const monthNames: string[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].map(
       this.props.useShortMonthInDropdown
         ? (m: number): string => getMonthShortInLocale(m, this.props.locale)
         : (m: number): string => getMonthInLocale(m, this.props.locale),
     );
 
-    let renderedDropdown: JSX.Element | JSX.Element[];
+    let renderedDropdown: React.ReactElement | React.ReactElement[];
     switch (this.props.dropdownMode) {
       case "scroll":
         renderedDropdown = this.renderScrollMode(monthNames);

src/month_dropdown_options.tsx

@@ -12,9 +12,9 @@ interface MonthDropdownOptionsProps {
 export default class MonthDropdownOptions extends Component<MonthDropdownOptionsProps> {
   isSelectedMonth = (i: number): boolean => this.props.month === i;
 
-  renderOptions = (): JSX.Element[] => {
-    return this.props.monthNames.map<JSX.Element>(
-      (month: string, i: number): JSX.Element => (
+  renderOptions = (): React.ReactElement[] => {
+    return this.props.monthNames.map<React.ReactElement>(
+      (month: string, i: number): React.ReactElement => (
         <div
           className={
             this.isSelectedMonth(i)
@@ -40,7 +40,7 @@ export default class MonthDropdownOptions extends Component<MonthDropdownOptions
 
   handleClickOutside = (): void => this.props.onCancel();
 
-  render(): JSX.Element {
+  render(): React.ReactElement {
     return (
       <ClickOutsideWrapper
         className="react-datepicker__month-dropdown"

src/month_year_dropdown.tsx

@@ -35,7 +35,7 @@ export default class MonthYearDropdown extends Component<
     dropdownVisible: false,
   };
 
-  renderSelectOptions = (): JSX.Element[] => {
+  renderSelectOptions = (): React.ReactElement[] => {
     let currDate = getStartOfMonth(this.props.minDate);
     const lastDate = getStartOfMonth(this.props.maxDate);
     const options = [];
@@ -58,7 +58,7 @@ export default class MonthYearDropdown extends Component<
     this.onChange(parseInt(event.target.value));
   };
 
-  renderSelectMode = (): JSX.Element => (
+  renderSelectMode = (): React.ReactElement => (
     <select
       value={getTime(getStartOfMonth(this.props.date))}
       className="react-datepicker__month-year-select"
@@ -68,7 +68,7 @@ export default class MonthYearDropdown extends Component<
     </select>
   );
 
-  renderReadView = (visible: boolean): JSX.Element => {
+  renderReadView = (visible: boolean): React.ReactElement => {
     const yearMonth = formatDate(
       this.props.date,
       this.props.dateFormat,
@@ -90,7 +90,7 @@ export default class MonthYearDropdown extends Component<
     );
   };
 
-  renderDropdown = (): JSX.Element => (
+  renderDropdown = (): React.ReactElement => (
     <MonthYearDropdownOptions
       key="dropdown"
       {...this.props}
@@ -99,7 +99,7 @@ export default class MonthYearDropdown extends Component<
     />
   );
 
-  renderScrollMode = (): JSX.Element[] => {
+  renderScrollMode = (): React.ReactElement[] => {
     const { dropdownVisible } = this.state;
     const result = [this.renderReadView(!dropdownVisible)];
     if (dropdownVisible) {
@@ -128,7 +128,7 @@ export default class MonthYearDropdown extends Component<
       dropdownVisible: !this.state.dropdownVisible,
     });
 
-  render(): JSX.Element {
+  render(): React.ReactElement {
     let renderedDropdown;
     switch (this.props.dropdownMode) {
       case "scroll":

src/month_year_dropdown_options.tsx

@@ -58,9 +58,9 @@ export default class MonthYearDropdownOptions extends Component<
     };
   }
 
-  renderOptions = (): JSX.Element[] => {
-    return this.state.monthYearsList.map<JSX.Element>(
-      (monthYear: Date): JSX.Element => {
+  renderOptions = (): React.ReactElement[] => {
+    return this.state.monthYearsList.map<React.ReactElement>(
+      (monthYear: Date): React.ReactElement => {
         const monthYearPoint = getTime(monthYear);
         const isSameMonthYear =
           isSameYear(this.props.date, monthYear) &&
@@ -97,7 +97,7 @@ export default class MonthYearDropdownOptions extends Component<
     this.props.onCancel();
   };
 
-  render(): JSX.Element {
+  render(): React.ReactElement {
     const dropdownClass = clsx({
       "react-datepicker__month-year-dropdown": true,
       "react-datepicker__month-year-dropdown--scrollable":