From 873a609bb37fef8dcf3f62097593a4257bc9dad8 Mon Sep 17 00:00:00 2001
From: Achilleas Mitrotasios <58337217+mitrotasios@users.noreply.github.com>
Date: Sat, 8 Oct 2022 17:42:23 +0100
Subject: [PATCH] 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-lock.json                             | 15 ++--
 package.json                                  | 15 +++-
 .../chart-elements/common/ChartLegend.tsx     | 31 ++++---
 .../input-elements/Datepicker/Datepicker.tsx  | 45 +++++++---
 .../input-elements/Dropdown/Dropdown.tsx      |  2 +-
 .../MultiSelectBox/MultiSelectBox.tsx         |  2 +-
 .../input-elements/SelectBox/SelectBox.tsx    |  2 +-
 .../layout-elements/Modal/Modal.tsx           | 86 ++++++++++++++++---
 src/lib/utils.tsx                             | 15 +++-
 src/tests/layout-elements/Modal.test.tsx      |  2 +-
 tailwind.config.js                            |  2 +-
 11 files changed, 168 insertions(+), 49 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index e62fc4377..d4b42cb2c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,18 +1,17 @@
 {
   "name": "@tremor/react",
-  "version": "0.1.0",
+  "version": "0.0.0-development",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@tremor/react",
-      "version": "0.1.0",
+      "version": "0.0.0-development",
       "license": "Apache 2.0",
       "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",
@@ -23,6 +22,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",
@@ -43,6 +43,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",
@@ -26940,7 +26941,8 @@
     "node_modules/resize-observer-polyfill": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
-      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==",
+      "dev": true
     },
     "node_modules/resolve": {
       "version": "1.22.0",
@@ -52014,7 +52016,8 @@
     "resize-observer-polyfill": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
-      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==",
+      "dev": true
     },
     "resolve": {
       "version": "1.22.0",
diff --git a/package.json b/package.json
index ef5e657fa..18a3e5e20 100644
--- a/package.json
+++ b/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"
+    ]
   }
 }
diff --git a/src/components/chart-elements/common/ChartLegend.tsx b/src/components/chart-elements/common/ChartLegend.tsx
index 0d4f1dd44..03569dd30 100644
--- a/src/components/chart-elements/common/ChartLegend.tsx
+++ b/src/components/chart-elements/common/ChartLegend.tsx
@@ -1,11 +1,14 @@
 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
@@ -13,20 +16,20 @@ const ChartLegend = ({ payload }: any, colors: Color[] = themeColorRange,
     );
 
     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
diff --git a/src/components/input-elements/Datepicker/Datepicker.tsx b/src/components/input-elements/Datepicker/Datepicker.tsx
index 03690464a..83e582f18 100644
--- a/src/components/input-elements/Datepicker/Datepicker.tsx
+++ b/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
diff --git a/src/components/input-elements/Dropdown/Dropdown.tsx b/src/components/input-elements/Dropdown/Dropdown.tsx
index 2a1c1f854..b10af0753 100644
--- a/src/components/input-elements/Dropdown/Dropdown.tsx
+++ b/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) => (
                     <>
diff --git a/src/components/input-elements/MultiSelectBox/MultiSelectBox.tsx b/src/components/input-elements/MultiSelectBox/MultiSelectBox.tsx
index e3740df2e..9bb777904 100644
--- a/src/components/input-elements/MultiSelectBox/MultiSelectBox.tsx
+++ b/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',
diff --git a/src/components/input-elements/SelectBox/SelectBox.tsx b/src/components/input-elements/SelectBox/SelectBox.tsx
index fcc8c825e..6ce227868 100644
--- a/src/components/input-elements/SelectBox/SelectBox.tsx
+++ b/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))) {
diff --git a/src/components/layout-elements/Modal/Modal.tsx b/src/components/layout-elements/Modal/Modal.tsx
index 4436007ec..8e6a36263 100644
--- a/src/components/layout-elements/Modal/Modal.tsx
+++ b/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,
diff --git a/src/lib/utils.tsx b/src/lib/utils.tsx
index 18f6bd9f1..6e3e945dc 100644
--- a/src/lib/utils.tsx
+++ b/src/lib/utils.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 
 import { BaseColorTheme, colorTheme } from './colors';
 import { BaseColors, DeltaTypes, Importances, Sizes } from './primitives';
@@ -93,3 +93,16 @@ export const stringIsNumeric = (str: string|undefined): boolean => {
 export const stringEndsWithNumber = (str: string): boolean => {
     return stringIsNumeric(str.split('-').pop());
 };
+
+export const useWindowSize = (handler: {(): void}) => {
+    const [windowSize, setWindowSize] = useState(window.innerWidth);
+    useEffect(() => {
+        const handleResize = () => {
+            setWindowSize(window.innerWidth);
+            handler();
+        };
+        window.addEventListener('resize', handleResize);
+
+        return () => window.removeEventListener('resize', handleResize);
+    }, [windowSize]);
+};
diff --git a/src/tests/layout-elements/Modal.test.tsx b/src/tests/layout-elements/Modal.test.tsx
index 78fc7e896..929bf8dbf 100644
--- a/src/tests/layout-elements/Modal.test.tsx
+++ b/src/tests/layout-elements/Modal.test.tsx
@@ -8,7 +8,7 @@ const TestModalWrapper = () => {
     const modalRef = useRef(null);
 
     return (
-        <Modal showModal={ showModal } setShowModal={ setShowModal } triggerRef={ modalRef }>
+        <Modal showModal={ showModal } setShowModal={ setShowModal } triggerButtonRef={ modalRef }>
             <div>Hello</div>
         </Modal>
     );
diff --git a/tailwind.config.js b/tailwind.config.js
index 667464b10..9990d5e6c 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -2,7 +2,7 @@
 module.exports = {
     content: [
         './src/components/**/*.{html,js,jsx,ts,tsx}',
-        './src/lib/**/*.{html,js,jsx,ts,tsx}'
+        './src/lib/**/*.{html,js,jsx,ts,tsx}',
     ],
     theme: {
         transparent: 'transparent',