From 5b4e6abdfb42db60fb4791271e81d0cd4fa09df4 Mon Sep 17 00:00:00 2001
From: dupasj <dupasj97@gmail.com>
Date: Sun, 26 Jan 2025 22:44:44 +0100
Subject: [PATCH 1/2] Added anchor option to date picker to prevent overflow

---
 README.md                          |  1 +
 src/Components/DatePicker.tsx      |  2 +-
 src/Components/DatePickerPopup.tsx | 31 ++++++++++++++++++++++++++++--
 src/Options.ts                     |  2 ++
 4 files changed, 33 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index e45dafe..286b6cc 100644
--- a/README.md
+++ b/README.md
@@ -185,6 +185,7 @@ const DemoComponent = () => {
 
 ### IOptions
 
+- anchor?: "auto"|"left"|"right" - Default: `auto`
 - title?: string - Default: `disabled`
 - autoHide?: boolean - Default: `true`
 - todayBtn?: boolean - Default: `true`
diff --git a/src/Components/DatePicker.tsx b/src/Components/DatePicker.tsx
index acadaff..756a0c0 100644
--- a/src/Components/DatePicker.tsx
+++ b/src/Components/DatePicker.tsx
@@ -17,7 +17,7 @@ export interface IDatePickerProps {
 }
 
 const DatePicker = ({ value, children, options, onChange, classNames, show, setShow, selectedDateState }: IDatePickerProps) => (
-	<div className={twMerge("w-full", classNames)}>
+	<div className={twMerge("w-full relative", classNames)}>
 		<DatePickerProvider options={options} onChange={onChange} show={show} setShow={setShow} selectedDateState={selectedDateState}>
 			<DatePickerMain value={value} options={options}>
 				{children}
diff --git a/src/Components/DatePickerPopup.tsx b/src/Components/DatePickerPopup.tsx
index 7960c56..527b3ad 100644
--- a/src/Components/DatePickerPopup.tsx
+++ b/src/Components/DatePickerPopup.tsx
@@ -1,4 +1,4 @@
-import React, { ForwardedRef, forwardRef, useContext } from "react"
+import React, {ForwardedRef, forwardRef, useContext, useEffect, useState} from "react"
 import { twMerge } from "tailwind-merge"
 import { dayOfTheWeekOf, firstDateOfMonth } from "../Utils/date"
 import { ButtonClear, ButtonNextMonth, ButtonPrevMonth, ButtonSelectMonth, ButtonToday } from "./Buttons"
@@ -18,9 +18,36 @@ const DatePickerPopup = forwardRef<HTMLDivElement>((_props, ref: ForwardedRef<HT
 	const weekStart = (locale?.weekInfo?.firstDay || 1);
 	const firstOfMonth = firstDateOfMonth(selectedYear, selectedMonth, 1)
 	const start = dayOfTheWeekOf(firstOfMonth, weekStart, weekStart);
+
+
+	const [leftAnchor,setLeftAnchor] = useState(options.anchor !== "right")
+
+	useEffect(()  => {
+		setLeftAnchor(options.anchor !== "right")
+		if (options.anchor !== "auto"){
+			return;
+		}
+		// @ts-ignore
+		const  _ref: HTMLDivElement = ref.current;
+		if (!_ref){
+			return;
+		}
+
+		const resize = () => {
+			const rect = _ref.getBoundingClientRect();
+			const screenWidth = window.innerWidth;
+
+			setLeftAnchor(rect.right <= screenWidth)
+		}
+		resize();
+		window.addEventListener("resize",resize);
+		return  () => {
+			window.removeEventListener("resize",resize)
+		}
+	},[ref,options.anchor])
 	
 	return (
-		<div ref={ref} className={twMerge("absolute z-50 block pt-2 top-10", options?.datepickerClassNames)}>
+		<div ref={ref} className={twMerge("absolute z-50 block pt-2 top-10"+(leftAnchor ? "" : "  right-0"), options?.datepickerClassNames)}>
 			<div className={twMerge("inline-block p-4 bg-white rounded-lg shadow-lg dark:bg-gray-700", options?.theme?.background)}>
 				<div>
 					{options?.title && <div className={twMerge("px-2 py-3 font-semibold text-center text-gray-900 dark:text-white", options?.theme?.text)}>{options?.title}</div>}
diff --git a/src/Options.ts b/src/Options.ts
index cc4f138..da74440 100644
--- a/src/Options.ts
+++ b/src/Options.ts
@@ -18,6 +18,7 @@ interface IIcons {
 }
 
 export interface IOptions {
+	anchor: "left"|"right"|"auto",
 	title?: string
 	autoHide?: boolean
 	todayBtn?: boolean
@@ -40,6 +41,7 @@ export interface IOptions {
 }
 
 const options: IOptions = {
+	anchor: "auto",
 	autoHide: true,
 	todayBtn: true,
 	clearBtn: true,

From b433ca4f285ae2f42ce5fce133d19513595739d4 Mon Sep 17 00:00:00 2001
From: dupasj <dupasj97@gmail.com>
Date: Sun, 26 Jan 2025 23:21:10 +0100
Subject: [PATCH 2/2] make the anchor option optional

---
 src/Options.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Options.ts b/src/Options.ts
index da74440..9799c02 100644
--- a/src/Options.ts
+++ b/src/Options.ts
@@ -18,7 +18,7 @@ interface IIcons {
 }
 
 export interface IOptions {
-	anchor: "left"|"right"|"auto",
+	anchor?: "left"|"right"|"auto",
 	title?: string
 	autoHide?: boolean
 	todayBtn?: boolean