Revert "fix: bug fixes Datepicker (#77)" (#94)

This reverts commit 873a609.

package.json

@@ -27,7 +27,8 @@
   "dependencies": {
     "@tippyjs/react": "^4.2.6",
     "date-fns": "^2.28.0",
-    "recharts": "^2.1.13"
+    "recharts": "^2.1.13",
+    "resize-observer-polyfill": "^1.5.1"
   },
   "devDependencies": {
     "@babel/core": "^7.17.9",
@@ -38,7 +39,6 @@
     "@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,7 +59,6 @@
     "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",
@@ -83,14 +82,6 @@
   ],
   "types": "dist/index.d.ts",
   "release": {
-    "branches": [
-      "main"
-    ],
-    "plugins": [
-      "@semantic-release/commit-analyzer",
-      "@semantic-release/release-notes-generator",
-      "@semantic-release/npm",
-      "@semantic-release/github"
-    ]
+    "branches": ["main"]
   }
 }

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

@@ -1,35 +1,32 @@
 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 [currentheight, setCurrentHeight] = useState(calculateHeight(undefined));
-
+    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);
     useEffect(() => {
-        setCurrentHeight(calculateHeight(currentheight));
-        // setLegendHeight setState action from Chart parent
-        setLegendHeight(calculateHeight(legendRef.current?.clientHeight));
-    }, []);
+        const handleResize = () => setWindowSize(window.innerWidth);
+        window.addEventListener('resize', handleResize);
 
-    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,8 +7,6 @@ import {
     getDay,
     isSaturday,
     isSunday,
-    max,
-    min,
     nextSaturday,
     parse,
     previousSunday,
@@ -74,21 +72,6 @@ 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);
 
@@ -98,20 +81,12 @@ const Datepicker = ({
     const [selectedRelativeFilterOption, setSelectedRelativeFilterOption] = useState<string | null>(null);
 
     const [hoveredDay, setHoveredDay] = useState<Date | null>(null);
-    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 [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 firstDayCurrentMonth = parse(currentMonth, 'MMM-yyyy', new Date());
     const lastDayCurrentMonth = endOfMonth(firstDayCurrentMonth);
@@ -209,7 +184,7 @@ const Datepicker = ({
                 >
                     <CalendarIcon
                         className={ classNames(
-                            'tr-flex-none',
+                            'flex-none',
                             getColorVariantsFromColorThemeValue(defaultColors.lightText).textColor,
                             sizing.lg.height,
                             sizing.lg.width,
@@ -278,8 +253,8 @@ const Datepicker = ({
             <Modal
                 showModal={ showDatePickerModal }
                 setShowModal={ setShowDatePickerModal }
-                triggerButtonRef={ datePickerRef }
-                width="w-72"
+                triggerRef={ datePickerRef }
+                width="tr-w-72"
                 maxHeight="tr-max-h-fit"
             >
                 <div
@@ -443,7 +418,7 @@ const Datepicker = ({
             <Modal
                 showModal={ showDropdownModal }
                 setShowModal={ setShowDropdownModal }
-                triggerButtonRef={ dropdownRef }
+                triggerRef={ dropdownRef }
             >
                 { relativeFilterOptions.map((filterOption) => (
                     <button

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

@@ -110,7 +110,7 @@ const Dropwdown = ({
             <Modal
                 showModal={ showModal }
                 setShowModal={ setShowModal }
-                triggerButtonRef={ dropdownRef }
+                triggerRef={ 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 }
-                triggerButtonRef={ dropdownRef }
+                triggerRef={ 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 }
-                triggerButtonRef={ dropdownRef }
+                triggerRef={ dropdownRef }
             >
                 { React.Children.map(children, (child) => {
                     if (filteredOptionNames.has(String(child.props.text))) {

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

@@ -1,118 +1,52 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useRef } 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>>,
-    triggerButtonRef: React.RefObject<HTMLElement>,
-    width?: Width,
+    triggerRef: React.RefObject<HTMLElement>,
+    width?: string,
     maxHeight?: string,
-    anchorPosition?: HorizontalPosition,
     children: React.ReactNode,
 }
 
 const Modal = ({
     showModal,
     setShowModal,
-    triggerButtonRef,
-    width,
+    triggerRef,
+    width = 'tr-w-full',
     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) => {
-        // 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 isTriggerElem = triggerRef ? triggerRef.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 ? parseWidth(width) : 'tr-w-full',
-                    getAbsoluteSpacing(),
+                    width,
                     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,