feat(AIFEP-20): Add position for date field popup

src/components/common/DatePickerPopup/index.tsx

@@ -54,6 +54,7 @@ export interface DatePickerRangeProps {
 export interface DatePickerBaseProps {
   yearsLength?: number;
   disabledDate?: Matcher;
+  position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
   callableElement: HTMLElement | null;
   onClose: () => void;
 }
@@ -70,11 +71,11 @@ export const DatePickerPopup: React.FC<DatePickerPopupProps> = props => {
     callableElement,
     mode,
     yearsLength = 100,
+    position = 'bottom-left',
   } = useCombinedPropsWithKit({
     name: 'DatePickerPopup',
     props,
   });
-
   const [month, setMonth] = useState<Date>(
     () => (isDateRange(value) ? value.from : value) ?? new Date(),
   );
@@ -115,10 +116,23 @@ export const DatePickerPopup: React.FC<DatePickerPopupProps> = props => {
     const observer = new ResizeObserver(entries => {
       entries.forEach(entry => {
         const isHTMLElement = entry.target instanceof HTMLElement;
+
         if (isHTMLElement && containerRef.current) {
           const rect = entry.target.getBoundingClientRect();
-          containerRef.current.style.top = `${rect.bottom}px`;
-          containerRef.current.style.left = `${rect.left}px`;
+          const callableRect = callableElement?.getBoundingClientRect();
+          if (position?.includes('top')) {
+            containerRef.current.style.top = `${122}px`;
+          }
+
+          if (position?.includes('bottom')) {
+            containerRef.current.style.top = `${rect.bottom}px`;
+          }
+
+          if (position?.includes('left')) {
+            containerRef.current.style.left = `${rect.left}px`;
+          } else {
+            containerRef.current.style.right = `${rect.right - Number(callableRect?.width)}px`;
+          }
         }
       });
     });
@@ -132,7 +146,7 @@ export const DatePickerPopup: React.FC<DatePickerPopupProps> = props => {
         observer.unobserve(callableElement);
       }
     };
-  }, [callableElement]);
+  }, [callableElement, position]);
 
   useEffect(() => {
     const calendarElement = containerRef.current;

src/components/common/Sidebar/Sidebar.stories.tsx

@@ -52,7 +52,7 @@ const defaultSidebarProps: SidebarProps = {
 
 const defaultUser = {
   fullName: 'John Doe',
-  email: 'johndoe@gmail.com',
+  email: 'johndoefermfekrfklmerklfklerfklermfklerklmfmklerfklerfmlekrmf@gmail.com',
   photoPlaceholder: '/photo-placeholder.svg',
 };
 

src/components/form/DateField/index.tsx

@@ -19,6 +19,7 @@ type AllowedDateInputProps = Pick<
   | 'yearsLength'
   | 'mode'
   | 'disabled'
+  | 'position'
 >;
 type AllowedFieldProps = Pick<
   FieldProps,
@@ -58,6 +59,7 @@ export const DateField = <
     rightElement,
     iconAfterElementClassName,
     inputClassName,
+    position,
   } = useCombinedPropsWithKit({
     name: 'DateField',
     props,
@@ -105,6 +107,7 @@ export const DateField = <
         inputClassName={inputClassName}
         inputSize={inputSize}
         placeholder={placeholder ?? label}
+        position={position}
         rightElement={rightElement}
         {...propsByMode}
       />

src/components/form/DateInput/index.tsx

@@ -29,6 +29,7 @@ export type DateInputProps = (DatePickerRangeProps | DatePickerDefaultProps) &
     rightElement?: ReactNode;
     iconAfterElementClassName?: string;
     inputClassName?: string;
+    position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
   };
 
 export const DateInput: React.FC<DateInputProps> = (props): ReactElement => {
@@ -47,6 +48,7 @@ export const DateInput: React.FC<DateInputProps> = (props): ReactElement => {
     rightElement,
     iconAfterElementClassName,
     inputClassName,
+    position,
   } = useCombinedPropsWithKit({
     name: 'DateInput',
     props,
@@ -160,6 +162,7 @@ export const DateInput: React.FC<DateInputProps> = (props): ReactElement => {
           {...propsByMode}
           callableElement={inputRef.current}
           disabledDate={disabledDate}
+          position={position}
           onClose={closeCalendar}
         />
       )}