N-FIN-98: fix date picker not opening (#99)

package.json

@@ -26,7 +26,7 @@
     "@radix-ui/react-dropdown-menu": "^2.1.4",
     "@radix-ui/react-label": "^2.1.1",
     "@radix-ui/react-navigation-menu": "^1.2.3",
-    "@radix-ui/react-popover": "^1.1.4",
+    "@radix-ui/react-popover": "^1.1.6",
     "@radix-ui/react-scroll-area": "^1.2.2",
     "@radix-ui/react-select": "^2.1.4",
     "@radix-ui/react-separator": "^1.1.1",

src/components/form/paymentForm.tsx

@@ -125,10 +125,7 @@ export default function PaymentForm({value, entities, categories, onSubmit, clas
                                         <Calendar
                                             mode="single"
                                             selected={field.value}
-                                            onSelect={(e) => {
-                                                field.onChange(e);
-                                            }}
-                                            initialFocus
+                                            onSelect={field.onChange}
                                         />
                                     </PopoverContent>
                                 </Popover>

src/components/ui/button.tsx

@@ -5,7 +5,7 @@ import { cva, type VariantProps } from 'class-variance-authority';
 import { cn } from '@/lib/utils';
 
 const buttonVariants = cva(
-    'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+    'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
     {
         variants: {
             variant: {
@@ -40,11 +40,11 @@ export interface ButtonProps
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-    ({className, variant, size, asChild = false, ...props}, ref) => {
+    ({ className, variant, size, asChild = false, ...props }, ref) => {
         const Comp = asChild ? Slot : 'button';
         return (
             <Comp
-                className={cn(buttonVariants({variant, size, className}))}
+                className={cn(buttonVariants({ variant, size, className }))}
                 ref={ref}
                 {...props}
             />

src/components/ui/calendar.tsx

@@ -14,7 +14,7 @@ function Calendar({
                       classNames,
                       showOutsideDays = true,
                       ...props
-}: CalendarProps) {
+                  }: CalendarProps) {
     return (
         <DayPicker
             showOutsideDays={showOutsideDays}
@@ -26,7 +26,7 @@ function Calendar({
                 caption_label: 'text-sm font-medium',
                 nav: 'space-x-1 flex items-center',
                 nav_button: cn(
-                    buttonVariants({variant: 'outline'}),
+                    buttonVariants({ variant: 'outline' }),
                     'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
                 ),
                 nav_button_previous: 'absolute left-1',
@@ -38,7 +38,7 @@ function Calendar({
                 row: 'flex w-full mt-2',
                 cell: 'h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20',
                 day: cn(
-                    buttonVariants({variant: 'ghost'}),
+                    buttonVariants({ variant: 'ghost' }),
                     'h-9 w-9 p-0 font-normal aria-selected:opacity-100',
                 ),
                 day_range_end: 'day-range-end',
@@ -54,10 +54,10 @@ function Calendar({
                 ...classNames,
             }}
             components={{
-                IconLeft: ({className, ...props}) => (
+                IconLeft: ({ className, ...props }) => (
                     <ChevronLeft className={cn('h-4 w-4', className)} {...props} />
                 ),
-                IconRight: ({className, ...props}) => (
+                IconRight: ({ className, ...props }) => (
                     <ChevronRight className={cn('h-4 w-4', className)} {...props} />
                 ),
             }}

src/components/ui/popover.tsx

@@ -12,7 +12,7 @@ const PopoverTrigger = PopoverPrimitive.Trigger;
 const PopoverContent = React.forwardRef<
     React.ElementRef<typeof PopoverPrimitive.Content>,
     React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
->(({className, align = 'center', sideOffset = 4, ...props}, ref) => (
+>(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (
     <PopoverPrimitive.Portal>
         <PopoverPrimitive.Content
             ref={ref}