Enable non portalled rendering for popovers (#612)

Author: krokosik

src/components/AddExpense/DateSelector.tsx

@@ -6,7 +6,15 @@ import { CalendarIcon } from 'lucide-react';
 import { Calendar } from '../ui/calendar';
 import type { DayPickerProps, PropsSingleRequired } from 'react-day-picker';
 
-export const DateSelector: React.FC<DayPickerProps & PropsSingleRequired> = (calendarProps) => {
+type DateSelectorProps = DayPickerProps &
+  PropsSingleRequired & {
+    popoverPortalled?: boolean;
+  };
+
+export const DateSelector: React.FC<DateSelectorProps> = ({
+  popoverPortalled = true,
+  ...calendarProps
+}) => {
   const { t, toUIDate } = useTranslationWithUtils();
 
   return (
@@ -28,7 +36,7 @@ export const DateSelector: React.FC<DayPickerProps & PropsSingleRequired> = (cal
             )}
           </Button>
         </PopoverTrigger>
-        <PopoverContent className="w-auto p-0">
+        <PopoverContent className="w-auto p-0" portalled={popoverPortalled}>
           <Calendar fixedWeeks {...calendarProps} />
         </PopoverContent>
       </Popover>

src/components/Expense/ExpenseDetails.tsx

@@ -364,7 +364,13 @@ export const EditSettlement: React.FC<{ expense: ExpenseDetailsOutput }> = ({ ex
           className="mx-auto mt-4 w-37.5 text-center text-lg"
           onValueChange={onCurrencyInputValueChange}
         />
-        <DateSelector mode="single" required selected={expenseDate} onSelect={setExpenseDate} />
+        <DateSelector
+          mode="single"
+          required
+          selected={expenseDate}
+          onSelect={setExpenseDate}
+          popoverPortalled={false}
+        />
       </div>
     </AppDrawer>
   );

src/components/Friend/CurrencyConversion.tsx

@@ -274,6 +274,7 @@ export const CurrencyConversion: React.FC<{
                     disabled={dateDisabled}
                     selected={rateDate}
                     onSelect={setRateDate}
+                    popoverPortalled={false}
                   />
                 </div>
               </div>

src/components/ui/popover.tsx

@@ -7,11 +7,18 @@ const Popover = PopoverPrimitive.Root;
 
 const PopoverTrigger = PopoverPrimitive.Trigger;
 
+interface PopoverContentProps extends React.ComponentPropsWithoutRef<
+  typeof PopoverPrimitive.Content
+> {
+  portalled?: boolean;
+  container?: HTMLElement | null;
+}
+
 const PopoverContent = React.forwardRef<
   React.ElementRef<typeof PopoverPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
->(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (
-  <PopoverPrimitive.Portal>
+  PopoverContentProps
+>(({ className, align = 'center', sideOffset = 4, portalled = true, container, ...props }, ref) => {
+  const content = (
     <PopoverPrimitive.Content
       ref={ref}
       align={align}
@@ -22,8 +29,14 @@ const PopoverContent = React.forwardRef<
       )}
       {...props}
     />
-  </PopoverPrimitive.Portal>
-));
+  );
+
+  if (!portalled) {
+    return content;
+  }
+
+  return <PopoverPrimitive.Portal container={container}>{content}</PopoverPrimitive.Portal>;
+});
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 
 export { Popover, PopoverTrigger, PopoverContent };