Date picker for Date and DateTime field input (#4981)

- Implemented correct mask for Date and DateTime field in
InternalDatePicker
- Use only keyDown event and click outside in InternalDatePicker and
DateInput
- Refactored InternalDatePicker UI to have month and year displayed
- Fixed bug and synchronized date value between the different inputs
that can change it

---------

Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com>
Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Matheus <matheus_benini@hotmail.com>

packages/twenty-front/src/modules/ui/field/input/components/DateInput.tsx

@@ -4,9 +4,15 @@ import styled from '@emotion/styled';
 import { flip, offset, useFloating } from '@floating-ui/react';
 import { Nullable } from 'twenty-ui';
 
-import { useRegisterInputEvents } from '@/object-record/record-field/meta-types/input/hooks/useRegisterInputEvents';
 import { DateDisplay } from '@/ui/field/display/components/DateDisplay';
 import { InternalDatePicker } from '@/ui/input/components/internal/date/components/InternalDatePicker';
+import {
+  MONTH_AND_YEAR_DROPDOWN_ID,
+  MONTH_AND_YEAR_DROPDOWN_MONTH_SELECT_ID,
+  MONTH_AND_YEAR_DROPDOWN_YEAR_SELECT_ID,
+} from '@/ui/input/components/internal/date/components/MonthAndYearDropdown';
+import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
+import { useListenClickOutsideV2 } from '@/ui/utilities/pointer-event/hooks/useListenClickOutsideV2';
 
 const StyledCalendarContainer = styled.div`
   background: ${({ theme }) => theme.background.secondary};
@@ -33,21 +39,21 @@ export type DateInputProps = {
     event: MouseEvent | TouchEvent,
     newDate: Nullable<Date>,
   ) => void;
-  hotkeyScope: string;
   clearable?: boolean;
   onChange?: (newDate: Nullable<Date>) => void;
   isDateTimeInput?: boolean;
+  onClear?: () => void;
 };
 
 export const DateInput = ({
   value,
   onEnter,
   onEscape,
-  hotkeyScope,
   onClickOutside,
   clearable,
   onChange,
   isDateTimeInput,
+  onClear,
 }: DateInputProps) => {
   const theme = useTheme();
 
@@ -70,13 +76,30 @@ export const DateInput = ({
     onChange?.(newDate);
   };
 
-  useRegisterInputEvents({
-    inputRef: wrapperRef,
-    inputValue: internalValue,
-    onEnter,
-    onEscape,
-    onClickOutside,
-    hotkeyScope,
+  const handleClear = () => {
+    setInternalValue(null);
+    onClear?.();
+  };
+
+  const { closeDropdown } = useDropdown(MONTH_AND_YEAR_DROPDOWN_ID);
+  const { closeDropdown: closeDropdownMonthSelect } = useDropdown(
+    MONTH_AND_YEAR_DROPDOWN_MONTH_SELECT_ID,
+  );
+  const { closeDropdown: closeDropdownYearSelect } = useDropdown(
+    MONTH_AND_YEAR_DROPDOWN_YEAR_SELECT_ID,
+  );
+
+  useListenClickOutsideV2({
+    refs: [wrapperRef],
+    listenerId: 'DateInput',
+    callback: (event) => {
+      event.stopImmediatePropagation();
+
+      closeDropdownYearSelect();
+      closeDropdownMonthSelect();
+      closeDropdown();
+      onClickOutside(event, internalValue);
+    },
   });
 
   return (
@@ -96,7 +119,9 @@ export const DateInput = ({
             }}
             clearable={clearable ? clearable : false}
             isDateTimeInput={isDateTimeInput}
-            onClickOutside={onClickOutside}
+            onEnter={onEnter}
+            onEscape={onEscape}
+            onClear={handleClear}
           />
         </StyledCalendarContainer>
       </div>