Feature: popover direction

Author: sesolaga

src/components/Datepicker.tsx

@@ -39,7 +39,8 @@ const Datepicker: React.FC<DatepickerType> = ({
     inputId,
     inputName,
     startWeekOn = "sun",
-    classNames = undefined
+    classNames = undefined,
+    popoverDirection = undefined
 }) => {
     // Ref
     const containerRef = useRef<HTMLDivElement | null>(null);
@@ -266,7 +267,8 @@ const Datepicker: React.FC<DatepickerType> = ({
             startWeekOn,
             classNames,
             onChange,
-            input: inputRef
+            input: inputRef,
+            popoverDirection
         };
     }, [
         asSingle,
@@ -297,7 +299,8 @@ const Datepicker: React.FC<DatepickerType> = ({
         inputName,
         startWeekOn,
         classNames,
-        inputRef
+        inputRef,
+        popoverDirection
     ]);
 
     const defaultContainerClassName = "relative w-full text-gray-700";

src/components/Input.tsx

@@ -35,7 +35,8 @@ const Input: React.FC<Props> = (e: Props) => {
         displayFormat,
         inputId,
         inputName,
-        classNames
+        classNames,
+        popoverDirection
     } = useContext(DatepickerContext);
 
     // UseRefs
@@ -162,13 +163,20 @@ const Input: React.FC<Props> = (e: Props) => {
         const arrow = arrowContainer?.current;
 
         function showCalendarContainer() {
-            if (arrow && div && div.classList.contains("hidden")) {
-                div.classList.remove("hidden");
-                div.classList.add("block");
+            function setContainerPosition(
+                direction: string | undefined,
+                div: HTMLDivElement,
+                arrow: HTMLDivElement
+            ) {
+                if (direction === "down") {
+                    return;
+                }
+
                 // window.innerWidth === 767
                 if (
-                    window.innerWidth > 767 &&
-                    window.screen.height - 100 < div.getBoundingClientRect().bottom
+                    direction === "up" ||
+                    (window.innerWidth > 767 &&
+                        window.screen.height - 100 < div.getBoundingClientRect().bottom)
                 ) {
                     div.classList.add("bottom-full");
                     div.classList.add("mb-2.5");
@@ -179,6 +187,14 @@ const Input: React.FC<Props> = (e: Props) => {
                     arrow.classList.remove("border-l");
                     arrow.classList.remove("border-t");
                 }
+            }
+
+            if (arrow && div && div.classList.contains("hidden")) {
+                div.classList.remove("hidden");
+                div.classList.add("block");
+
+                setContainerPosition(popoverDirection, div, arrow);
+
                 setTimeout(() => {
                     div.classList.remove("translate-y-4");
                     div.classList.remove("opacity-0");
@@ -197,7 +213,7 @@ const Input: React.FC<Props> = (e: Props) => {
                 input.removeEventListener("focus", showCalendarContainer);
             }
         };
-    }, [calendarContainer, arrowContainer]);
+    }, [calendarContainer, arrowContainer, popoverDirection]);
 
     const renderToggleIcon = useCallback(
         (isEmpty: boolean) => {

src/contexts/DatepickerContext.ts

@@ -46,6 +46,7 @@ interface DatepickerStore {
     inputId?: string;
     inputName?: string;
     classNames?: ClassNamesTypeProp;
+    popoverDirection?: string;
 }
 
 const DatepickerContext = createContext<DatepickerStore>({
@@ -91,7 +92,8 @@ const DatepickerContext = createContext<DatepickerStore>({
     inputName: undefined,
     startWeekOn: START_WEEK,
     toggleIcon: undefined,
-    classNames: undefined
+    classNames: undefined,
+    popoverDirection: undefined
 });
 
 export default DatepickerContext;

src/types/index.ts

@@ -71,4 +71,5 @@ export interface DatepickerType {
     maxDate?: DateType | null;
     disabledDates?: DateRangeType[] | null;
     startWeekOn?: string | null;
+    popoverDirection?: string | undefined;
 }