fix(audit logs): improve dropdown state management and animations

libs/shared/ui/src/lib/components/menu/menu.tsx

@@ -92,7 +92,7 @@ export function Menu(props: MenuProps) {
   } = props
 
   const ref = useRef(null)
-  const [isOpen, setOpen] = useState<boolean | undefined>(undefined)
+  const [isOpen, setOpen] = useState<boolean | undefined>(open)
   // XXX: https://github.com/szhsin/react-menu/blob/d7c4df8a4324847403990174d9298038e11ac0c2/src/hooks/useClick.js
   const [skipOpen] = useState<{ v?: boolean }>({})
 
@@ -150,7 +150,9 @@ export function Menu(props: MenuProps) {
   }
 
   useEffect(() => {
-    setOpen((previousOpen) => (previousOpen === undefined && open === false ? undefined : open))
+    if (open !== undefined) {
+      setOpen(open)
+    }
     window.addEventListener('resize', closeMenu)
     window.addEventListener('scroll', closeMenu)
     return () => {

libs/shared/ui/src/lib/components/table/table-head-datepicker/table-head-datepicker.tsx

@@ -7,6 +7,7 @@ import Icon from '../../icon/icon'
 import { type TableFilterProps } from '../table'
 
 const ALL = 'ALL'
+const REACT_DATEPICKER_IGNORE_ON_CLICK_OUTSIDE = 'react-datepicker-ignore-onclickoutside'
 
 export interface SelectedTimestamps {
   automaticallySelected: boolean
@@ -60,7 +61,7 @@ export function TableHeadDatePickerFilter({
 
   // Called when timestamp has been defined
   const onChangeTimestamp = (startDate: Date, endDate: Date) => {
-    setIsOpenTimestamp(!isOpenTimestamp)
+    setIsOpenTimestamp(false)
     setHasFilter(true)
     setFilter((prev) => [
       ...prev.filter(
@@ -80,6 +81,7 @@ export function TableHeadDatePickerFilter({
   // Called to clear the timestamp filter
   const cleanFilter = (event: MouseEvent) => {
     event.preventDefault()
+    event.stopPropagation()
     setFilter((prev) => [
       ...prev.filter(
         (currentValue) => currentValue.key !== fromTimestampProperty && currentValue.key !== toTimestampProperty
@@ -106,17 +108,17 @@ export function TableHeadDatePickerFilter({
         defaultDates={getDefaultDates(datePickerData.timestamps)}
         showDateTimeInputs
         useLocalTime
-        onClickOutside={() => setIsOpenTimestamp(!isOpenTimestamp)}
+        onClickOutside={() => setIsOpenTimestamp(false)}
         maxRangeInDays={datePickerData.maxRangeInDays}
       >
-        <div className="flex">
+        <div className={`${REACT_DATEPICKER_IGNORE_ON_CLICK_OUTSIDE} flex`}>
           {hasFilter ? (
             <Button
               type="button"
               color="neutral"
               size="sm"
               className="gap-1.5 whitespace-nowrap"
-              onClick={() => setIsOpenTimestamp(!isOpenTimestamp)}
+              onClick={() => setIsOpenTimestamp((isOpenTimestamp) => !isOpenTimestamp)}
             >
               {title}
               <span
@@ -134,7 +136,7 @@ export function TableHeadDatePickerFilter({
               size="sm"
               className="items-center gap-1.5 font-code"
               onClick={() => {
-                setIsOpenTimestamp(!isOpenTimestamp)
+                setIsOpenTimestamp((isOpenTimestamp) => !isOpenTimestamp)
               }}
             >
               {title}

libs/shared/ui/src/lib/styles/components/menu.scss

@@ -24,7 +24,7 @@
   transform: translateY(8px);
 
   &.menu__container--open {
-    animation-name: menuOpenBottom;
+    animation-name: menuOpenBottomFromTop;
   }
 }
 
@@ -131,6 +131,13 @@
   }
 }
 
+@keyframes menuOpenBottomFromTop {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+}
+
 @keyframes menuOpenTop {
   from {
     opacity: 0;