From cc7a2d5ff04838a49dda4ffc8050de0721449d8d Mon Sep 17 00:00:00 2001
From: javadbat <javadbat@gmail.com>
Date: Sat, 28 Sep 2024 14:40:00 +0330
Subject: [PATCH] update dep version

---
 README.md           |  8 ++++++--
 lib/JBDateInput.tsx | 10 ++++++++--
 package.json        |  4 ++--
 3 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index d58e69f..9c8fbfe 100644
--- a/README.md
+++ b/README.md
@@ -229,9 +229,13 @@ document.querySelector('jb-date-input').setMonthList('GREGORIAN',['1','2','3','4
 ## overflow handler
 
 sometimes you place date input inside modal or end of the pages so when user open the input picker it overflow the page and some part of picker will be invisible.  
-to fix this we add a feature called `overflowHandler` by set this to `JUMP` the picker will move, on mouse enter it's territory so user can easily pick date
+to fix this we add a feature called `overflowHandler` by set this to `SLIDE` the picker will move, on mouse enter it's territory so user can easily pick date
 ```jsx
-<JBDateInput overflowHandler="JUMP" />
+<JBDateInput overflowHandler="SLIDE" />
+//if you want to check your overflow base on another dom and not window for example when you put date input in a modal
+<div ref={ref} style={{ height: "12rem", border: "solid 1px #666", overflow:"hidden" }}>
+    <JBDateInput {...args} overflowRef={ref} />
+</div>
 ```
 
 ### set custom style
diff --git a/lib/JBDateInput.tsx b/lib/JBDateInput.tsx
index 542291d..dadb75a 100644
--- a/lib/JBDateInput.tsx
+++ b/lib/JBDateInput.tsx
@@ -48,7 +48,8 @@ export type JBDateInputProps = {
   placeholder?: string | null | undefined,
   jalaliMonthList?: string[] | null | undefined,
   gregorianMonthList?: string[] | null | undefined,
-  overflowHandler?:"NONE" | "JUMP"
+  overflowHandler?:"NONE" | "SLIDE",
+  overflowRef?:React.RefObject<HTMLElement> | null,
   children?: React.ReactNode | React.ReactNode[],
 }
 
@@ -141,9 +142,14 @@ export const JBDateInput = React.forwardRef((props: JBDateInputProps, ref) => {
   }, [props.placeholder]);
   useEffect(() => {
     if (element.current && props.overflowHandler !== undefined) {
-      element.current.overflowHandler = props.overflowHandler;
+      element.current.elements.popover.overflowHandler = props.overflowHandler;
     }
   }, [props.overflowHandler]);
+  useEffect(() => {
+    if (element.current && props.overflowRef !== undefined) {
+      element.current.elements.popover.overflowDom = props.overflowRef.current;
+    }
+  }, [props.overflowRef]);
   useEffect(() => {
     if (element.current) {
       if (typeof props.style == "string") {
diff --git a/package.json b/package.json
index 8d720d8..d0c1753 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,7 @@
     "react component",
     "react"
   ],
-  "version": "3.0.0",
+  "version": "5.0.0-beta.0",
   "bugs": "https://github.com/javadbat/jb-date-input-react/issues",
   "license": "MIT",
   "files": [
@@ -37,6 +37,6 @@
     "url": "https://github.com/javadbat/jb-date-input-react"
   },
   "dependencies": {
-    "jb-date-input": ">=4.0.0"
+    "jb-date-input": ">=5.0.0-beta.0"
   }
 }