chore: add click away event to date picker

web/src/components/kit/DatePicker.tsx

@@ -1,6 +1,7 @@
 import { Badge, Button } from "@mui/joy";
 import classNames from "classnames";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
+import useClickAway from "react-use/lib/useClickAway";
 import { getMemoStats } from "@/helpers/api";
 import { DAILY_TIMESTAMP } from "@/helpers/consts";
 import { getDateStampByDate, isFutureDate } from "@/helpers/datetime";
@@ -15,15 +16,21 @@ interface DatePickerProps {
   isFutureDateDisabled?: boolean;
   datestamp: number;
   handleDateStampChange: (datestamp: number) => void;
+  handleClickAway: () => void;
 }
 
 const DatePicker: React.FC<DatePickerProps> = (props: DatePickerProps) => {
   const t = useTranslate();
-  const { className, isFutureDateDisabled, datestamp, handleDateStampChange } = props;
+  const { className, isFutureDateDisabled, datestamp, handleDateStampChange, handleClickAway } = props;
+  const containerRef = useRef<HTMLDivElement>(null);
   const [currentDateStamp, setCurrentDateStamp] = useState<number>(getMonthFirstDayDateStamp(datestamp));
   const [countByDate, setCountByDate] = useState(new Map());
   const user = useCurrentUser();
 
+  useClickAway(containerRef, () => {
+    handleClickAway();
+  });
+
   useEffect(() => {
     setCurrentDateStamp(getMonthFirstDayDateStamp(datestamp));
   }, [datestamp]);
@@ -66,7 +73,7 @@ const DatePicker: React.FC<DatePickerProps> = (props: DatePickerProps) => {
   };
 
   return (
-    <div className={`date-picker-wrapper ${className}`}>
+    <div ref={containerRef} className={`date-picker-wrapper ${className}`}>
       <div className="date-picker-header">
         <Button variant="plain" color="neutral" onClick={() => handleChangeMonthBtnClick(-12)}>
           <Icon.ChevronsLeft className="icon-img" />

web/src/pages/DailyReview.tsx

@@ -89,8 +89,9 @@ const DailyReview = () => {
               showDatePicker ? "" : "!hidden"
             }`}
             datestamp={selectedDateStamp}
-            handleDateStampChange={handleDataPickerChange}
             isFutureDateDisabled
+            handleDateStampChange={handleDataPickerChange}
+            handleClickAway={() => toggleShowDatePicker(false)}
           />
         </div>
         <div className="w-full h-auto flex flex-col justify-start items-start px-2 pb-4 bg-white dark:bg-zinc-700">