Retention report UI updates.

components/input/MonthSelect.js

@@ -1,5 +1,13 @@
-import { useRef, useState } from 'react';
-import { Text, Icon, CalendarMonthSelect, CalendarYearSelect, Button } from 'react-basics';
+import { useRef } from 'react';
+import {
+  Text,
+  Icon,
+  CalendarMonthSelect,
+  CalendarYearSelect,
+  Button,
+  PopupTrigger,
+  Popup,
+} from 'react-basics';
 import { startOfMonth, endOfMonth } from 'date-fns';
 import Icons from 'components/icons';
 import { useLocale } from 'hooks';
@@ -7,43 +15,50 @@ import { formatDate } from 'lib/date';
 import { getDateLocale } from 'lib/lang';
 import styles from './MonthSelect.module.css';
 
-const MONTH = 'month';
-const YEAR = 'year';
-
 export function MonthSelect({ date = new Date(), onChange }) {
   const { locale } = useLocale();
-  const [select, setSelect] = useState(null);
   const month = formatDate(date, 'MMMM', locale);
   const year = date.getFullYear();
   const ref = useRef();
 
-  const handleSelect = value => {
-    setSelect(state => (state !== value ? value : null));
-  };
-
   const handleChange = date => {
     onChange(`range:${startOfMonth(date).getTime()}:${endOfMonth(date).getTime()}`);
-    setSelect(null);
   };
 
   return (
     <>
       <div ref={ref} className={styles.container}>
-        <Button className={styles.input} variant="quiet" onClick={() => handleSelect(MONTH)}>
-          <Text>{month}</Text>
-          <Icon size="sm">{select === MONTH ? <Icons.Close /> : <Icons.ChevronDown />}</Icon>
-        </Button>
-        <Button className={styles.input} variant="quiet" onClick={() => handleSelect(YEAR)}>
-          <Text>{year}</Text>
-          <Icon size="sm">{select === YEAR ? <Icons.Close /> : <Icons.ChevronDown />}</Icon>
-        </Button>
+        <PopupTrigger>
+          <Button className={styles.input} variant="quiet">
+            <Text>{month}</Text>
+            <Icon size="sm">
+              <Icons.ChevronDown />
+            </Icon>
+          </Button>
+          <Popup className={styles.popup} alignment="start">
+            <CalendarMonthSelect
+              date={date}
+              locale={getDateLocale(locale)}
+              onSelect={handleChange}
+            />
+          </Popup>
+        </PopupTrigger>
+        <PopupTrigger>
+          <Button className={styles.input} variant="quiet">
+            <Text>{year}</Text>
+            <Icon size="sm">
+              <Icons.ChevronDown />
+            </Icon>
+          </Button>
+          <Popup className={styles.popup} alignment="start">
+            <CalendarYearSelect
+              date={date}
+              locale={getDateLocale(locale)}
+              onSelect={handleChange}
+            />
+          </Popup>
+        </PopupTrigger>
       </div>
-      {select === MONTH && (
-        <CalendarMonthSelect date={date} locale={getDateLocale(locale)} onSelect={handleChange} />
-      )}
-      {select === YEAR && (
-        <CalendarYearSelect date={date} locale={getDateLocale(locale)} onSelect={handleChange} />
-      )}
     </>
   );
 }

components/input/MonthSelect.module.css

@@ -2,6 +2,8 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  border: 1px solid var(--base400);
+  border-radius: var(--border-radius);
 }
 
 .input {
@@ -10,3 +12,11 @@
   gap: 10px;
   cursor: pointer;
 }
+
+.popup {
+  border: 1px solid var(--base400);
+  background: var(--base50);
+  border-radius: var(--border-radius);
+  padding: 20px;
+  margin-top: 5px;
+}