From c7a151e9da6ec0872b78237535d381dd5b5a3e21 Mon Sep 17 00:00:00 2001
From: mertJF <mertcukuren@jotform.com>
Date: Mon, 18 Nov 2024 16:13:31 +0300
Subject: [PATCH] fix(types): `PropsWithChildren` type argument issue

---
 src/calendar_container.tsx | 4 ++--
 src/popper_component.tsx   | 3 ++-
 src/tab_loop.tsx           | 5 ++++-
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/calendar_container.tsx b/src/calendar_container.tsx
index 69fa205b3..2d6ece029 100644
--- a/src/calendar_container.tsx
+++ b/src/calendar_container.tsx
@@ -1,9 +1,9 @@
 import React from "react";
 
-export interface CalendarContainerProps extends React.PropsWithChildren {
+export interface CalendarContainerProps
+  extends React.PropsWithChildren<HTMLDivElement> {
   showTimeSelectOnly?: boolean;
   showTime?: boolean;
-  className?: string;
 }
 
 const CalendarContainer: React.FC<CalendarContainerProps> = function ({
diff --git a/src/popper_component.tsx b/src/popper_component.tsx
index 5ea2e0738..94e1f6c8a 100644
--- a/src/popper_component.tsx
+++ b/src/popper_component.tsx
@@ -7,6 +7,7 @@ import TabLoop from "./tab_loop";
 import withFloating from "./with_floating";
 
 import type { FloatingProps } from "./with_floating";
+import type { ReactNode } from "react";
 
 interface PortalProps
   extends Omit<React.ComponentPropsWithoutRef<typeof Portal>, "children"> {}
@@ -20,7 +21,7 @@ interface PopperComponentProps
   className?: string;
   wrapperClassName?: string;
   popperComponent: React.ReactNode;
-  popperContainer?: React.FC<React.PropsWithChildren>;
+  popperContainer?: React.FC<{ children?: ReactNode | undefined }>;
   targetComponent: React.ReactNode;
   popperOnKeyDown: React.KeyboardEventHandler<HTMLDivElement>;
   showArrow?: boolean;
diff --git a/src/tab_loop.tsx b/src/tab_loop.tsx
index 4a6e0b15e..3695b1117 100644
--- a/src/tab_loop.tsx
+++ b/src/tab_loop.tsx
@@ -1,7 +1,10 @@
 import React, { Component, createRef } from "react";
 
-interface TabLoopProps extends React.PropsWithChildren {
+import type { ReactNode } from "react";
+
+interface TabLoopProps {
   enableTabLoop?: boolean;
+  children?: ReactNode | undefined;
 }
 
 const focusableElementsSelector =