Merge pull request #4979 from hamidrezahanafi/hrh.removeonclickoutside

Remove usages of react-onclickoutside to support React 19

package.json

@@ -40,7 +40,6 @@
     "@types/eslint": "^8.56.10",
     "@types/jest": "^29.5.12",
     "@types/node": "20",
-    "@types/react-onclickoutside": "^6.7.10",
     "@typescript-eslint/eslint-plugin": "^7.9.0",
     "@typescript-eslint/parser": "^7.9.0",
     "axe-core": "^4.4.1",
@@ -83,8 +82,7 @@
     "@floating-ui/react": "^0.26.2",
     "clsx": "^2.1.0",
     "date-fns": "^3.3.1",
-    "prop-types": "^15.7.2",
-    "react-onclickoutside": "^6.13.0"
+    "prop-types": "^15.7.2"
   },
   "scripts": {
     "eslint": "eslint --ext .js,.jsx,.ts,.tsx ./src",

rollup.config.mjs

@@ -46,7 +46,6 @@ const dateFnsSubpackages = Object.keys(dateFnsPackageJson.exports)
 const globals = {
   react: "React",
   "prop-types": "PropTypes",
-  "react-onclickoutside": "onClickOutside",
 };
 
 // NOTE:https://rollupjs.org/migration/#changed-defaults

src/calendar.tsx

@@ -2,6 +2,7 @@ import { clsx } from "clsx";
 import React, { Component, createRef } from "react";
 
 import CalendarContainer from "./calendar_container";
+import { ClickOutsideWrapper } from "./click_outside_wrapper";
 import {
   newDate,
   setMonth,
@@ -48,6 +49,7 @@ import Time from "./time";
 import Year from "./year";
 import YearDropdown from "./year_dropdown";
 
+import type { ClickOutsideHandler } from "./click_outside_wrapper";
 import type { Day } from "date-fns/types";
 
 interface YearDropdownProps
@@ -154,7 +156,8 @@ type CalendarProps = React.PropsWithChildren &
     onDayMouseEnter?: (date: Date) => void;
     onMonthMouseLeave?: VoidFunction;
     weekLabel?: string;
-    onClickOutside: React.MouseEventHandler<HTMLElement>;
+    onClickOutside: ClickOutsideHandler;
+    outsideClickIgnoreClass?: string;
     previousMonthButtonLabel?: React.ReactNode;
     previousYearButtonLabel?: string;
     previousMonthAriaLabel?: string;
@@ -279,7 +282,7 @@ export default class Calendar extends Component<CalendarProps, CalendarState> {
 
   assignMonthContainer: void | undefined;
 
-  handleClickOutside = (event: React.MouseEvent<HTMLElement>): void => {
+  handleClickOutside = (event: MouseEvent): void => {
     this.props.onClickOutside(event);
   };
 
@@ -1084,7 +1087,12 @@ export default class Calendar extends Component<CalendarProps, CalendarState> {
   render(): JSX.Element {
     const Container = this.props.container || CalendarContainer;
     return (
-      <div style={{ display: "contents" }} ref={this.containerRef}>
+      <ClickOutsideWrapper
+        onClickOutside={this.handleClickOutside}
+        style={{ display: "contents" }}
+        containerRef={this.containerRef}
+        ignoreClass={this.props.outsideClickIgnoreClass}
+      >
         <Container
           className={clsx("react-datepicker", this.props.className, {
             "react-datepicker--time-only": this.props.showTimeSelectOnly,
@@ -1102,7 +1110,7 @@ export default class Calendar extends Component<CalendarProps, CalendarState> {
           {this.renderInputTimeSection()}
           {this.renderChildren()}
         </Container>
-      </div>
+      </ClickOutsideWrapper>
     );
   }
 }

src/click_outside_wrapper.tsx

@@ -0,0 +1,69 @@
+import React, { useCallback, useEffect, useRef } from "react";
+
+export type ClickOutsideHandler = (event: MouseEvent) => void;
+
+interface ClickOutsideWrapperProps {
+  onClickOutside: ClickOutsideHandler;
+  className?: string;
+  children: React.ReactNode;
+  containerRef?: React.MutableRefObject<HTMLDivElement | null>;
+  style?: React.CSSProperties;
+  ignoreClass?: string;
+}
+
+const useDetectClickOutside = (
+  onClickOutside: ClickOutsideHandler,
+  ignoreClass?: string,
+) => {
+  const ref = useRef<HTMLDivElement | null>(null);
+  const onClickOutsideRef = useRef(onClickOutside);
+  onClickOutsideRef.current = onClickOutside;
+  const handleClickOutside = useCallback(
+    (event: MouseEvent) => {
+      if (ref.current && !ref.current.contains(event.target as Node)) {
+        if (
+          !(
+            ignoreClass &&
+            event.target instanceof HTMLElement &&
+            event.target.classList.contains(ignoreClass)
+          )
+        ) {
+          onClickOutsideRef.current?.(event);
+        }
+      }
+    },
+    [ignoreClass],
+  );
+  useEffect(() => {
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [handleClickOutside]);
+  return ref;
+};
+
+export const ClickOutsideWrapper: React.FC<ClickOutsideWrapperProps> = ({
+  children,
+  onClickOutside,
+  className,
+  containerRef,
+  style,
+  ignoreClass,
+}) => {
+  const detectRef = useDetectClickOutside(onClickOutside, ignoreClass);
+  return (
+    <div
+      className={className}
+      style={style}
+      ref={(node: HTMLDivElement | null) => {
+        detectRef.current = node;
+        if (containerRef) {
+          containerRef.current = node;
+        }
+      }}
+    >
+      {children}
+    </div>
+  );
+};

src/index.tsx

@@ -1,9 +1,5 @@
 import { clsx } from "clsx";
 import React, { Component, cloneElement } from "react";
-import onClickOutside, {
-  type WrapperInstance,
-  type AdditionalProps,
-} from "react-onclickoutside";
 
 import Calendar from "./calendar";
 import CalendarIcon from "./calendar_icon";
@@ -59,12 +55,13 @@ import PopperComponent from "./popper_component";
 import Portal from "./portal";
 import TabLoop from "./tab_loop";
 
+import type { ClickOutsideHandler } from "./click_outside_wrapper";
+
 export { default as CalendarContainer } from "./calendar_container";
 
 export { registerLocale, setDefaultLocale, getDefaultLocale };
 
 const outsideClickIgnoreClass = "react-datepicker-ignore-onclickoutside";
-const WrappedCalendar = onClickOutside(Calendar);
 
 export { ReactDatePickerCustomHeaderProps } from "./calendar";
 
@@ -102,7 +99,10 @@ interface PortalProps extends React.ComponentPropsWithoutRef<typeof Portal> {}
 interface PopperComponentProps
   extends React.ComponentPropsWithoutRef<typeof PopperComponent> {}
 
-export type DatePickerProps = Omit<
+// see https://github.com/microsoft/TypeScript/issues/31501
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type OmitUnion<T, K extends keyof any> = T extends any ? Omit<T, K> : never;
+export type DatePickerProps = OmitUnion<
   CalendarProps,
   | "setOpen"
   | "dateFormat"
@@ -126,10 +126,9 @@ export type DatePickerProps = Omit<
   | "selectsMultiple"
   | "dropdownMode"
 > &
-  Partial<Pick<AdditionalProps, "excludeScrollbar">> &
   Pick<CalendarIconProps, "icon"> &
-  Omit<PortalProps, "children" | "portalId"> &
-  Omit<
+  OmitUnion<PortalProps, "children" | "portalId"> &
+  OmitUnion<
     PopperComponentProps,
     | "className"
     | "hidePopper"
@@ -151,7 +150,7 @@ export type DatePickerProps = Omit<
     startOpen?: boolean;
     onFocus?: React.FocusEventHandler<HTMLElement>;
     onBlur?: React.FocusEventHandler<HTMLElement>;
-    onClickOutside?: React.MouseEventHandler<HTMLElement>;
+    onClickOutside?: ClickOutsideHandler;
     onInputClick?: VoidFunction;
     preventOpenOnFocus?: boolean;
     closeOnScroll?: boolean | ((event: Event) => boolean);
@@ -383,7 +382,7 @@ export default class DatePicker extends Component<
 
   inputFocusTimeout: ReturnType<typeof setTimeout> | undefined;
 
-  calendar: WrapperInstance<CalendarProps, typeof Calendar> | null = null;
+  calendar: Calendar | null = null;
 
   input: HTMLElement | null = null;
 
@@ -568,7 +567,7 @@ export default class DatePicker extends Component<
     this.setState({ focused: false });
   };
 
-  handleCalendarClickOutside = (event: React.MouseEvent<HTMLElement>) => {
+  handleCalendarClickOutside = (event: MouseEvent) => {
     if (!this.props.inline) {
       this.setOpen(false);
     }
@@ -932,8 +931,8 @@ export default class DatePicker extends Component<
               ? '.react-datepicker__month-text[tabindex="0"]'
               : '.react-datepicker__day[tabindex="0"]';
         const selectedItem =
-          this.calendar?.componentNode instanceof Element &&
-          this.calendar.componentNode.querySelector(selectorString);
+          this.calendar?.containerRef.current instanceof Element &&
+          this.calendar.containerRef.current.querySelector(selectorString);
         selectedItem instanceof HTMLElement &&
           selectedItem.focus({ preventScroll: true });
 
@@ -1214,7 +1213,8 @@ export default class DatePicker extends Component<
       return null;
     }
     return (
-      <WrappedCalendar
+      <Calendar
+        showMonthYearDropdown={undefined}
         ref={(elem) => {
           this.calendar = elem;
         }}
@@ -1241,7 +1241,7 @@ export default class DatePicker extends Component<
         }
       >
         {this.props.children}
-      </WrappedCalendar>
+      </Calendar>
     );
   };
 

src/month_dropdown.tsx

@@ -1,5 +1,4 @@
 import React, { Component } from "react";
-import onClickOutside from "react-onclickoutside";
 
 import {
   getMonthShortInLocale,
@@ -11,8 +10,6 @@ import MonthDropdownOptions from "./month_dropdown_options";
 interface MonthDropdownOptionsProps
   extends React.ComponentPropsWithoutRef<typeof MonthDropdownOptions> {}
 
-const WrappedMonthDropdownOptions = onClickOutside(MonthDropdownOptions);
-
 interface MonthDropdownProps
   extends Omit<
     MonthDropdownOptionsProps,
@@ -70,7 +67,7 @@ export default class MonthDropdown extends Component<
   );
 
   renderDropdown = (monthNames: string[]): JSX.Element => (
-    <WrappedMonthDropdownOptions
+    <MonthDropdownOptions
       key="dropdown"
       {...this.props}
       monthNames={monthNames}

src/month_dropdown_options.tsx

@@ -1,5 +1,7 @@
 import React, { Component } from "react";
 
+import { ClickOutsideWrapper } from "./click_outside_wrapper";
+
 interface MonthDropdownOptionsProps {
   onCancel: VoidFunction;
   onChange: (month: number) => void;
@@ -40,9 +42,12 @@ export default class MonthDropdownOptions extends Component<MonthDropdownOptions
 
   render(): JSX.Element {
     return (
-      <div className="react-datepicker__month-dropdown">
+      <ClickOutsideWrapper
+        className="react-datepicker__month-dropdown"
+        onClickOutside={this.handleClickOutside}
+      >
         {this.renderOptions()}
-      </div>
+      </ClickOutsideWrapper>
     );
   }
 }

src/month_year_dropdown.tsx

@@ -1,5 +1,4 @@
 import React, { Component } from "react";
-import onClickOutside from "react-onclickoutside";
 
 import {
   addMonths,
@@ -17,10 +16,6 @@ import MonthYearDropdownOptions from "./month_year_dropdown_options";
 interface MonthYearDropdownOptionsProps
   extends React.ComponentPropsWithoutRef<typeof MonthYearDropdownOptions> {}
 
-const WrappedMonthYearDropdownOptions = onClickOutside(
-  MonthYearDropdownOptions,
-);
-
 interface MonthYearDropdownProps
   extends Omit<MonthYearDropdownOptionsProps, "onChange" | "onCancel"> {
   dropdownMode: "scroll" | "select";
@@ -96,7 +91,7 @@ export default class MonthYearDropdown extends Component<
   };
 
   renderDropdown = (): JSX.Element => (
-    <WrappedMonthYearDropdownOptions
+    <MonthYearDropdownOptions
       key="dropdown"
       {...this.props}
       onChange={this.onChange}

src/month_year_dropdown_options.tsx

@@ -1,6 +1,7 @@
 import { clsx } from "clsx";
 import React, { Component } from "react";
 
+import { ClickOutsideWrapper } from "./click_outside_wrapper";
 import {
   addMonths,
   formatDate,
@@ -103,6 +104,13 @@ export default class MonthYearDropdownOptions extends Component<
         this.props.scrollableMonthYearDropdown,
     });
 
-    return <div className={dropdownClass}>{this.renderOptions()}</div>;
+    return (
+      <ClickOutsideWrapper
+        className={dropdownClass}
+        onClickOutside={this.handleClickOutside}
+      >
+        {this.renderOptions()}
+      </ClickOutsideWrapper>
+    );
   }
 }