Merge pull request #5645 from meriouma/dev/expose-outsideClickIgnoreClass

feat: expose outsideClickIgnoreClass

Author: martijnrusschen

CLAUDE.md

@@ -0,0 +1 @@
+Use yarn instead of npm for running commands

src/calendar.tsx

@@ -80,6 +80,9 @@ const DROPDOWN_FOCUS_CLASSNAMES = [
   "react-datepicker__month-year-select",
 ];
 
+export const OUTSIDE_CLICK_IGNORE_CLASS =
+  "react-datepicker-ignore-onclickoutside";
+
 const isDropdownSelect = (element: HTMLDivElement) => {
   const classNames = (element.className || "").split(/\s+/);
   return DROPDOWN_FOCUS_CLASSNAMES.some(
@@ -225,6 +228,7 @@ export default class Calendar extends Component<CalendarProps, CalendarState> {
     return {
       monthsShown: 1,
       forceShowMonthNavigation: false,
+      outsideClickIgnoreClass: OUTSIDE_CLICK_IGNORE_CLASS,
       timeCaption: "Time",
       previousYearButtonLabel: "Previous Year",
       nextYearButtonLabel: "Next Year",

src/index.tsx

@@ -1,7 +1,7 @@
 import { clsx } from "clsx";
 import React, { Component, cloneElement } from "react";
 
-import Calendar from "./calendar";
+import Calendar, { OUTSIDE_CLICK_IGNORE_CLASS } from "./calendar";
 import CalendarIcon from "./calendar_icon";
 import {
   newDate,
@@ -61,8 +61,6 @@ export { default as CalendarContainer } from "./calendar_container";
 
 export { registerLocale, setDefaultLocale, getDefaultLocale };
 
-const outsideClickIgnoreClass = "react-datepicker-ignore-onclickoutside";
-
 export { ReactDatePickerCustomHeaderProps } from "./calendar";
 
 // Compares dates year+month combinations
@@ -112,7 +110,6 @@ export type DatePickerProps = OmitUnion<
   | "highlightDates"
   | "holidays"
   | "shouldFocusDayInline"
-  | "outsideClickIgnoreClass"
   | "monthSelectedIn"
   | "onDropdownFocus"
   | "onTimeChange"
@@ -266,6 +263,7 @@ export default class DatePicker extends Component<
       dropdownMode: "scroll" as const,
       preventOpenOnFocus: false,
       monthsShown: 1,
+      outsideClickIgnoreClass: OUTSIDE_CLICK_IGNORE_CLASS,
       readOnly: false,
       withPortal: false,
       selectsDisabledDaysInRange: false,
@@ -1245,7 +1243,7 @@ export default class DatePicker extends Component<
         onSelect={this.handleSelect}
         onClickOutside={this.handleCalendarClickOutside}
         holidays={getHolidaysMap(this.modifyHolidays())}
-        outsideClickIgnoreClass={outsideClickIgnoreClass}
+        outsideClickIgnoreClass={this.props.outsideClickIgnoreClass}
         onDropdownFocus={this.handleDropdownFocus}
         onTimeChange={this.handleTimeChange}
         className={this.props.calendarClassName}
@@ -1334,7 +1332,8 @@ export default class DatePicker extends Component<
 
   renderDateInput = () => {
     const className = clsx(this.props.className, {
-      [outsideClickIgnoreClass]: this.state.open,
+      [this.props.outsideClickIgnoreClass ||
+      DatePicker.defaultProps.outsideClickIgnoreClass]: this.state.open,
     });
 
     const customInput = this.props.customInput || <input type="text" />;

src/test/datepicker_test.test.tsx

@@ -2,6 +2,7 @@ import { render, act, waitFor, fireEvent } from "@testing-library/react";
 import { userEvent } from "@testing-library/user-event";
 import { enUS, enGB } from "date-fns/locale";
 import React, { useState } from "react";
+import { OUTSIDE_CLICK_IGNORE_CLASS } from "../calendar";
 
 import {
   KeyType,
@@ -687,21 +688,45 @@ describe("DatePicker", () => {
     });
   });
 
-  it("should not apply the react-datepicker-ignore-onclickoutside class to the date input when closed", () => {
+  it("should not apply the default outsideClickIgnoreClass class to the date input when closed", () => {
     const { container } = render(<DatePicker />);
     const input = safeQuerySelector(container, "input");
-    expect(
-      input?.classList.contains("react-datepicker-ignore-onclickoutside"),
-    ).toBeFalsy();
+    expect(input?.classList.contains(OUTSIDE_CLICK_IGNORE_CLASS)).toBe(false);
   });
 
-  it("should apply the react-datepicker-ignore-onclickoutside class to date input when open", () => {
+  it("should apply the default outsideClickIgnoreClass class to date input when open", () => {
     const { container } = render(<DatePicker />);
     const input = safeQuerySelector<HTMLInputElement>(container, "input");
     fireEvent.focus(input);
-    expect(
-      input?.classList.contains("react-datepicker-ignore-onclickoutside"),
-    ).toBeTruthy();
+    expect(input?.classList.contains(OUTSIDE_CLICK_IGNORE_CLASS)).toBe(true);
+  });
+
+  it("should apply the outsideClickIgnoreClass class to date input when open", () => {
+    const outsideClickIgnoreClass = "ignore-onclickoutside";
+    const { container } = render(
+      <DatePicker outsideClickIgnoreClass={outsideClickIgnoreClass} />,
+    );
+    const input = safeQuerySelector<HTMLInputElement>(container, "input");
+    fireEvent.focus(input);
+    expect(input?.classList.contains(outsideClickIgnoreClass)).toBe(true);
+  });
+
+  it("should apply the default outsideClickIgnoreClass when prop is undefined", () => {
+    const { container } = render(
+      <DatePicker outsideClickIgnoreClass={undefined} />,
+    );
+    const input = safeQuerySelector<HTMLInputElement>(container, "input");
+    fireEvent.focus(input);
+    expect(input?.classList.contains(OUTSIDE_CLICK_IGNORE_CLASS)).toBe(true);
+  });
+
+  it("should apply the default outsideClickIgnoreClass when prop is falsy", () => {
+    const { container } = render(
+      <DatePicker outsideClickIgnoreClass={undefined} />,
+    );
+    const input = safeQuerySelector<HTMLInputElement>(container, "input");
+    fireEvent.focus(input);
+    expect(input?.classList.contains(OUTSIDE_CLICK_IGNORE_CLASS)).toBe(true);
   });
 
   it("should toggle the open status of calendar on click of the icon when toggleCalendarOnIconClick is set to true", () => {