update dep version

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

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") {

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"
   }
 }