fix: bug fixes Datepicker (#77)

* fix: minor datepicker logic fixes

* fix(Datepicker): calendar icon flex-none

* fix(Datepicker): self-detecting modal

* minor fixes

* fix Modal exceeds window detection

* fix: fix Modal self detecting exceeds window

* refactor(ChartLegend): use withWindowResize

* add semantic release notes generator

* fix: put resize-observer-polyfill to dev dependencies

* fix: put resize-observer-polyfill to dev dependencies

package.json

@@ -27,8 +27,7 @@
   "dependencies": {
     "@tippyjs/react": "^4.2.6",
     "date-fns": "^2.28.0",
-    "recharts": "^2.1.13",
-    "resize-observer-polyfill": "^1.5.1"
+    "recharts": "^2.1.13"
   },
   "devDependencies": {
     "@babel/core": "^7.17.9",
@@ -39,6 +38,7 @@
     "@rollup/plugin-commonjs": "^21.1.0",
     "@rollup/plugin-node-resolve": "^13.2.1",
     "@rollup/plugin-typescript": "^8.3.2",
+    "@semantic-release/release-notes-generator": "^10.0.3",
     "@storybook/addon-actions": "^6.5.0-alpha.64",
     "@storybook/addon-essentials": "^6.5.0-alpha.64",
     "@storybook/addon-interactions": "^6.5.0-alpha.64",
@@ -59,6 +59,7 @@
     "jest": "^27.5.1",
     "postcss": "^8.4.12",
     "react-dom": "^18.0.0",
+    "resize-observer-polyfill": "^1.5.1",
     "rollup": "^2.70.2",
     "rollup-plugin-dts": "^4.2.1",
     "rollup-plugin-peer-deps-external": "^2.2.4",
@@ -82,6 +83,14 @@
   ],
   "types": "dist/index.d.ts",
   "release": {
-    "branches": ["main"]
+    "branches": [
+      "main"
+    ],
+    "plugins": [
+      "@semantic-release/commit-analyzer",
+      "@semantic-release/release-notes-generator",
+      "@semantic-release/npm",
+      "@semantic-release/github"
+    ]
   }
 }

src/components/chart-elements/common/ChartLegend.tsx

@@ -1,32 +1,35 @@
 import React, { useEffect, useRef, useState } from 'react';
 
+import { themeColorRange, useWindowSize } from 'lib';
 import { Color } from '../../../lib';
 import Legend from 'components/text-elements/Legend';
-import { themeColorRange } from 'lib';
 
-const ChartLegend = ({ payload }: any, colors: Color[] = themeColorRange,
-    setLegendHeight: React.Dispatch<React.SetStateAction<number>>) => {
+const ChartLegend = (
+    { payload }: any,
+    colors: Color[] = themeColorRange,
+    setLegendHeight: React.Dispatch<React.SetStateAction<number>>
+) => {
     const calculateHeight = (height: number|undefined) => (
         height
             ? Number(height) + 20 // 20px extra padding
             : 60 // default height
     );
 
     const legendRef = useRef<HTMLDivElement>(null);
-    const [height, setHeight] = useState(calculateHeight(undefined));
-
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    // dummy windowsize listener to trigger useEffect on resize
-    const [_windowSize, setWindowSize] = useState(window.innerWidth);
+    const [currentheight, setCurrentHeight] = useState(calculateHeight(undefined));
+
     useEffect(() => {
-        const handleResize = () => setWindowSize(window.innerWidth);
-        window.addEventListener('resize', handleResize);
+        setCurrentHeight(calculateHeight(currentheight));
+        // setLegendHeight setState action from Chart parent
+        setLegendHeight(calculateHeight(legendRef.current?.clientHeight));
+    }, []);
 
+    useWindowSize(() => {
+        setCurrentHeight(calculateHeight(currentheight));
+        // setLegendHeight setState action from Chart parent
         setLegendHeight(calculateHeight(legendRef.current?.clientHeight));
-        setHeight(calculateHeight(height));
-
-        return () => window.removeEventListener('resize', handleResize);
-    }, [_windowSize]);
+    });
+
     return (
         <div ref={ legendRef } className="tr-flex tr-items-center tr-justify-end">
             <Legend

src/components/input-elements/Datepicker/Datepicker.tsx

@@ -7,6 +7,8 @@ import {
     getDay,
     isSaturday,
     isSunday,
+    max,
+    min,
     nextSaturday,
     parse,
     previousSunday,
@@ -72,6 +74,21 @@ const Datepicker = ({
 
     const hasDefaultDateRange = (defaultStartDate !== null) && (defaultEndDate !== null);
 
+    const getInitialStartDate = (): Date | null => (
+        hasDefaultDateRange ? startOfDay(
+            minDate
+                ? max([defaultStartDate, minDate])
+                : defaultStartDate
+        ) : null
+    );
+    const getInitialEndDate = (): Date | null => (
+        hasDefaultDateRange ? startOfDay(
+            maxDate
+                ? min([defaultEndDate, maxDate])
+                : defaultEndDate
+        ) : null
+    );
+
     const datePickerRef = useRef(null);
     const dropdownRef = useRef(null);
 
@@ -81,12 +98,20 @@ const Datepicker = ({
     const [selectedRelativeFilterOption, setSelectedRelativeFilterOption] = useState<string | null>(null);
 
     const [hoveredDay, setHoveredDay] = useState<Date | null>(null);
-    const [selectedStartDay, setSelectedStartDay] = useState<Date | null>(
-        hasDefaultDateRange ? startOfDay(defaultStartDate) : null);
-    const [selectedEndDay, setSelectedEndDay] = useState<Date | null>(
-        hasDefaultDateRange ? startOfDay(defaultEndDate) : null);
-    const [currentMonth, setCurrentMonth] = useState(
-        hasDefaultDateRange ? format(startOfDay(defaultEndDate)!, 'MMM-yyyy') : format(today, 'MMM-yyyy'));
+    const [selectedStartDay, setSelectedStartDay] = useState<Date | null>(getInitialStartDate());
+    const [selectedEndDay, setSelectedEndDay] = useState<Date | null>(getInitialEndDate());
+
+    // Get month that will be displayed when opening the modal
+    const getInitialCurrentMonth = () => {
+        if (getInitialEndDate() !== null) {
+            return format(getInitialEndDate() as Date, 'MMM-yyyy');
+        } else if (maxDate !== null) {
+            return format(maxDate, 'MMM-yyyy');
+        } else {
+            return format(today, 'MMM-yyyy');
+        }
+    };
+    const [currentMonth, setCurrentMonth] = useState(getInitialCurrentMonth());
 
     const firstDayCurrentMonth = parse(currentMonth, 'MMM-yyyy', new Date());
     const lastDayCurrentMonth = endOfMonth(firstDayCurrentMonth);
@@ -184,7 +209,7 @@ const Datepicker = ({
                 >
                     <CalendarIcon
                         className={ classNames(
-                            'flex-none',
+                            'tr-flex-none',
                             getColorVariantsFromColorThemeValue(defaultColors.lightText).textColor,
                             sizing.lg.height,
                             sizing.lg.width,
@@ -253,8 +278,8 @@ const Datepicker = ({
             <Modal
                 showModal={ showDatePickerModal }
                 setShowModal={ setShowDatePickerModal }
-                triggerRef={ datePickerRef }
-                width="tr-w-72"
+                triggerButtonRef={ datePickerRef }
+                width="w-72"
                 maxHeight="tr-max-h-fit"
             >
                 <div
@@ -418,7 +443,7 @@ const Datepicker = ({
             <Modal
                 showModal={ showDropdownModal }
                 setShowModal={ setShowDropdownModal }
-                triggerRef={ dropdownRef }
+                triggerButtonRef={ dropdownRef }
             >
                 { relativeFilterOptions.map((filterOption) => (
                     <button

src/components/input-elements/Dropdown/Dropdown.tsx

@@ -110,7 +110,7 @@ const Dropwdown = ({
             <Modal
                 showModal={ showModal }
                 setShowModal={ setShowModal }
-                triggerRef={ dropdownRef }
+                triggerButtonRef={ dropdownRef }
             >
                 { React.Children.map(children, (child: React.ReactElement) => (
                     <>

src/components/input-elements/MultiSelectBox/MultiSelectBox.tsx

@@ -164,7 +164,7 @@ const MultiSelectBox = ({
             <Modal
                 showModal={ showModal }
                 setShowModal={ setShowModal }
-                triggerRef={ dropdownRef }
+                triggerButtonRef={ dropdownRef }
             >
                 <div className={ classNames(
                     'tr-flex tr-items-center tr-w-full',

src/components/input-elements/SelectBox/SelectBox.tsx

@@ -130,7 +130,7 @@ const SelectBox = ({
             <Modal
                 showModal={ filteredOptionNames.size === 0 ? false : showModal }
                 setShowModal={ setShowModal }
-                triggerRef={ dropdownRef }
+                triggerButtonRef={ dropdownRef }
             >
                 { React.Children.map(children, (child) => {
                     if (filteredOptionNames.has(String(child.props.text))) {

src/components/layout-elements/Modal/Modal.tsx

@@ -1,52 +1,118 @@
-import React, { useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 
+import { HorizontalPosition, Width } from '../../../lib/inputTypes';
 import {
+    HorizontalPositions,
     border,
     borderRadius,
     boxShadow,
     classNames,
     defaultColors,
     getColorVariantsFromColorThemeValue,
+    getPixelsFromTwClassName,
+    parseWidth,
     spacing,
     useOnClickOutside,
+    useWindowSize,
 } from 'lib';
 
 export interface ModalProps {
     showModal: boolean,
     setShowModal: React.Dispatch<React.SetStateAction<boolean>>,
-    triggerRef: React.RefObject<HTMLElement>,
-    width?: string,
+    triggerButtonRef: React.RefObject<HTMLElement>,
+    width?: Width,
     maxHeight?: string,
+    anchorPosition?: HorizontalPosition,
     children: React.ReactNode,
 }
 
 const Modal = ({
     showModal,
     setShowModal,
-    triggerRef,
-    width = 'tr-w-full',
+    triggerButtonRef,
+    width,
     maxHeight = 'tr-max-h-72',
+    anchorPosition = HorizontalPositions.Left,
     children,
 }: ModalProps) => {
+    const checkModalExceedsWindow = (
+        modalWidth: number,
+    ): boolean => {
+        if (!triggerButtonRef.current) {
+            return false;
+        }
+        if (anchorPosition === HorizontalPositions.Left) {
+            const modalBoundingRight = triggerButtonRef
+                .current
+                .getBoundingClientRect()
+                .left + modalWidth;
+            console.log(modalBoundingRight);
+            const windowWidth = window.innerWidth;
+            return windowWidth - modalBoundingRight < 0;
+        }
+        if (anchorPosition === HorizontalPositions.Right) {
+            const modalBoundingLeft = triggerButtonRef
+                .current
+                .getBoundingClientRect()
+                .right - modalWidth;
+            return modalBoundingLeft < 0;
+        }
+        return false;
+    };
+
     const modalRef = useRef<HTMLDivElement>(null);
     useOnClickOutside(modalRef, (e) => {
-        const isTriggerElem = triggerRef ? triggerRef.current?.contains(e.target) : false;
-        if (!isTriggerElem) setShowModal(false);
+        // Exclude click on trigger button (e.g. Dropdown Button) from outside click handler
+        const isTriggerElem = triggerButtonRef ? triggerButtonRef.current?.contains(e.target) : false;
+        if (!isTriggerElem) {
+            setShowModal(false);
+        }
     });
 
+    const [modalExceedsWindow, setModalExceedsWindow] = useState(false);
+
+    // Execute only when modal is of fixed size
+    if (width !== undefined) {
+        const widthInPixel = getPixelsFromTwClassName(width);
+        useEffect(() => {
+            setModalExceedsWindow(checkModalExceedsWindow(widthInPixel));
+        }, [triggerButtonRef]);
+
+        useWindowSize(
+            () => setModalExceedsWindow(checkModalExceedsWindow(widthInPixel))
+        );
+    }
+
+    const getAbsoluteSpacing = () => {
+        if ((anchorPosition === HorizontalPositions.Left)) {
+            if (!modalExceedsWindow) {
+                return spacing.none.left;
+            } else {
+                return spacing.none.right;
+            }
+        }
+        if ((anchorPosition === HorizontalPositions.Right)) {
+            if (!modalExceedsWindow) {
+                return spacing.none.right;
+            } else {
+                return spacing.none.left;
+            }
+        }
+        return spacing.none.left;
+    };
+
     return (
         showModal ? (
             <div
                 ref={ modalRef }
                 className={ classNames(
                     'tr-absolute -tr-bottom-2 tr-translate-y-full tr-z-10 tr-divide-y tr-overflow-y-auto',
-                    width,
+                    width ? parseWidth(width) : 'tr-w-full',
+                    getAbsoluteSpacing(),
                     maxHeight,
                     getColorVariantsFromColorThemeValue(defaultColors.white).bgColor,
                     getColorVariantsFromColorThemeValue(defaultColors.lightBorder).borderColor,
                     getColorVariantsFromColorThemeValue(defaultColors.lightBorder).divideColor,
-                    spacing.none.left,
-                    spacing.none.right,
                     spacing.twoXs.marginTop,
                     spacing.twoXs.marginBottom,
                     borderRadius.md.all,