@vertesia/ui 0.61.0 → 0.63.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vertesia/ui",
-  "version": "0.61.0",
+  "version": "0.63.0",
   "description": "Vertesia UI components and and hooks",
   "type": "module",
   "main": "./lib/index.js",
@@ -48,16 +48,16 @@
     "monaco-editor": "^0.52.2",
     "motion": "^12.12.1",
     "react": "^19.1.0",
-    "react-day-picker": "^8.10.1",
+    "react-date-picker": "^11.0.0",
     "react-dom": "^19.1.0",
     "react-error-boundary": "^6.0.0",
     "react-markdown": "^10.1.0",
     "remark-gfm": "^4.0.1",
     "tailwind-merge": "^3.3.0",
     "ts-md5": "^1.3.1",
-    "@vertesia/client": "0.61.0",
-    "@vertesia/common": "0.61.0",
-    "@vertesia/json": "0.61.0"
+    "@vertesia/client": "0.63.0",
+    "@vertesia/common": "0.63.0",
+    "@vertesia/json": "0.63.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.27.0",

package/src/core/components/shadcn/calendar.tsx

@@ -1,83 +1,27 @@
 "use client"
 
 import * as React from "react"
-import { ChevronLeft, ChevronRight } from "lucide-react"
-import { DayPicker, StyledComponent } from "react-day-picker"
+import DatePicker from "react-date-picker"
 
-import { cn } from "../libs/utils"
-import { buttonVariants } from "./button"
-
-export type CalendarProps = React.ComponentProps<typeof DayPicker> & {
+export type CalendarProps = React.ComponentProps<typeof DatePicker> & {
   size?: "sm" | "md" | "lg"
 }
 
 function Calendar({
   className,
-  classNames,
-  showOutsideDays = true,
   size = "md",
   ...props
 }: CalendarProps) {
-  const daySize = {
-    sm: "size-6",
-    md: "size-8",
-    lg: "size-10",
+  const sizeClass = {
+    sm: "text-sm",
+    md: "text-base", 
+    lg: "text-lg",
   }[size]
 
   return (
-    <DayPicker
-      showOutsideDays={showOutsideDays}
-      className={cn("", className)}
-      classNames={{
-        months: "flex w-full flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0 flex-1",
-        month: "space-y-4 w-full flex flex-col",
-        caption: "flex justify-center pt-1 relative items-center",
-        caption_label: "text-sm font-medium",
-        nav: "space-x-1 flex items-center",
-        nav_button: cn(
-          buttonVariants({ variant: "outline" }),
-          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
-        ),
-        nav_button_previous: "absolute left-1",
-        nav_button_next: "absolute right-1",
-        table: "w-full h-full border-collapse space-y-1",
-        head_row: "",
-        head_cell:
-          "text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]",
-        row: "w-full mt-2",
-        cell: cn(
-          "relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected].day-range-end)]:rounded-r-md",
-          props.mode === "range"
-            ? "[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md"
-            : "[&:has([aria-selected])]:rounded-md"
-        ),
-        day: cn(
-          buttonVariants({ variant: "ghost" }),
-          daySize,
-          "flex items-center justify-center",
-          "p-0 font-normal aria-selected:opacity-100"
-        ),
-        day_range_start: "day-range-start",
-        day_range_end: "day-range-end",
-        day_selected:
-          "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
-        day_today: "bg-accent text-accent-foreground",
-        day_outside:
-          "day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground",
-        day_disabled: "text-muted-foreground opacity-50",
-        day_range_middle:
-          "aria-selected:bg-accent aria-selected:text-accent-foreground",
-        day_hidden: "invisible",
-        ...classNames,
-      }}
-      components={{
-        IconLeft: ({ className, ...props }: StyledComponent) => (
-          <ChevronLeft className={cn("h-4 w-4", className)} {...props} />
-        ),
-        IconRight: ({ className, ...props }: StyledComponent) => (
-          <ChevronRight className={cn("h-4 w-4", className)} {...props} />
-        ),
-      }}
+    <DatePicker
+      className={`${className} ${sizeClass}`}
+      calendarIcon={false}
       {...props}
     />
   )

package/src/core/components/shadcn/filters/comboBox.tsx

@@ -175,14 +175,15 @@ export const DateCombobox = ({
             </PopoverTrigger>
             <PopoverContent className="w-auto p-0" align="start">
                 <Calendar
-                    mode="single"
                     className="p-0"
-                    defaultMonth={selectedDate}
-                    selected={selectedDate}
-                    onSelect={(date) => {
+                    value={selectedDate}
+                    onChange={(date) => {
                         if (date) {
-                            setFilterValues([dayjs(date).format("YYYY-MM-DD")]);
-                            setOpen(false);
+                            const actualDate = Array.isArray(date) ? date[0] : date;
+                            if (actualDate) {
+                                setFilterValues([dayjs(actualDate).format("YYYY-MM-DD")]);
+                                setOpen(false);
+                            }
                         }
                     }}
                 />

package/src/core/components/shadcn/filters/dateFilter.tsx

@@ -1,8 +1,12 @@
 import dayjs from "dayjs";
-import React from "react";
-import { Calendar } from "../calendar";
+import React, { useState } from "react";
+import DatePicker from "react-date-picker";
+import { Popover, PopoverContent, PopoverTrigger } from "../popover";
 import { Filter, FilterGroup } from "./types";
 
+type ValuePiece = Date | null;
+type Value = ValuePiece | [ValuePiece, ValuePiece];
+
 interface DateFilterProps {
   selectedView: string | null;
   selectedDate: Date | undefined;
@@ -22,8 +26,11 @@ export default function DateFilter({
   handleClose,
   filterGroups,
 }: DateFilterProps) {
-  const handleDateSelect = (date: Date | undefined) => {
-    setSelectedDate(date);
+  const [open, setOpen] = useState(true);
+
+  const handleDateChange = (value: Value) => {
+    const date = Array.isArray(value) ? value[0] : value;
+    setSelectedDate(date || undefined);
     if (date) {
       const selectedGroup = filterGroups.find(g => g.name === selectedView);
       
@@ -46,19 +53,30 @@ export default function DateFilter({
         } as Filter,
       ]);
 
-            handleClose();
-        }
-    };
+      setOpen(false);
+      handleClose();
+    }
+  };
 
   return (
-    <div className="p-2">
-      <Calendar
-        mode="single"
-        defaultMonth={selectedDate}
-        selected={selectedDate}
-        onSelect={handleDateSelect}
-        size="sm"
-      />
-    </div>
+    <Popover _open={open} onOpenChange={setOpen}>
+      <PopoverTrigger className="w-full p-2 text-left hover:bg-muted/50 rounded-sm">
+        <div className="flex gap-1.5 items-center">
+          {selectedDate ? (
+            dayjs(selectedDate).format("MMM D, YYYY")
+          ) : (
+            <span>Pick a date</span>
+          )}
+        </div>
+      </PopoverTrigger>
+      <PopoverContent className="w-auto p-0" align="start">
+        <DatePicker
+          value={selectedDate}
+          onChange={handleDateChange}
+          calendarIcon={false}
+          className="p-2"
+        />
+      </PopoverContent>
+    </Popover>
   );
 }