Merge pull request #64 from sikka-software/calendar/rdp-v9

chore: upgrade `react-date-picker` to v9
sikka-software · Jul 22, 2024 · 7677a39 · 7677a39
2 parents f53ab86 + 0170d41
commit 7677a39
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 61 deletions.
diff --git a/packages/components/elements/calendar/Calendar.tsx b/packages/components/elements/calendar/Calendar.tsx
@@ -1,11 +1,11 @@
 import * as React from "react";
-import { DateRange, DayPicker } from "react-day-picker";
+import { DateRange, DayPicker, type DayPickerProps } from "react-day-picker";
 
 import { cn } from "@util/index";
 
-import { buttonVariants } from "../button";
+import { Button, buttonVariants } from "../button";
 
-export type CalendarProps = React.ComponentProps<typeof DayPicker>;
+export type CalendarProps = DayPickerProps;
 export type CalendarValueType = {
   single: Date;
   multiple: Date[];
@@ -21,63 +21,57 @@ function Calendar({
   return (
     <DayPicker
       showOutsideDays={showOutsideDays}
-      className={cn("hawa-p-3", className)}
+      className={cn("hawa-p-0", className)}
       classNames={{
-        months:
-          "hawa-flex hawa-flex-col sm:hawa-flex-row hawa-space-y-4 sm:hawa-space-x-4 sm:hawa-space-y-0",
+        root: "hawa-w-fit hawa-relative hawa-p-3 ",
+        months: "hawa-flex hawa-flex-col sm:hawa-flex-row sm:hawa-space-y-0",
         month: "hawa-space-y-4",
-        caption:
-          "hawa-flex hawa-justify-center hawa-pt-1 hawa-relative hawa-items-center",
+        month_caption:
+          "hawa-flex hawa-justify-center hawa-py-1 hawa-relative hawa-items-center",
         caption_label: "hawa-text-sm hawa-font-medium",
-        nav: "hawa-space-x-1 hawa-flex hawa-items-center",
-        nav_button: cn(
-          buttonVariants({ variant: "outline" }),
-          "hawa-h-7 hawa-w-7 hawa-bg-transparent hawa-p-0 hawa-opacity-50 hover:hawa-opacity-100",
-        ),
-        nav_button_previous:
-          "hawa-absolute hawa-start-1 !hawa-h-8 !hawa-w-8 !hawa-p-0 hawa-justify-center",
-        nav_button_next:
-          "hawa-absolute hawa-end-1 !hawa-h-8 !hawa-w-8 !hawa-p-0 hawa-justify-center",
-        table: "hawa-w-full hawa-border-collapse hawa-space-y-1 ",
-        head_row: "hawa-flex",
-        head_cell:
+        nav: "hawa-z-50 hawa-flex hawa-items-start",
+
+        button_previous: buttonVariants({
+          variant: "outline",
+          className:
+            "hawa-absolute hawa-start-3 hawa-flex hawa-items-center !hawa-size-7 !hawa-p-0 hawa-justify-center",
+        }),
+
+        button_next: buttonVariants({
+          variant: "outline",
+          className:
+            "hawa-absolute hawa-end-3 !hawa-size-7 !hawa-p-0 hawa-justify-center hawa-flex hawa-items-center",
+        }),
+
+        month_grid: "hawa-w-full hawa-border-collapse hawa-space-y-1 ",
+        weekdays: "hawa-flex",
+        weekday:
           "hawa-text-muted-foreground hawa-rounded-md hawa-w-9 hawa-font-normal hawa-text-[0.8rem]",
-        row: "hawa-flex hawa-w-full hawa-mt-2",
-        cell: "hawa-h-9 hawa-w-9 hawa-text-center hawa-text-sm hawa-p-0 hawa-relative [&:has([aria-selected].day-range-end)]:hawa-rounded-r-md [&:has([aria-selected].day-outside)]:hawa-bg-accent/50 [&:has([aria-selected])]:hawa-bg-accent first:[&:has([aria-selected])]:hawa-rounded-l-md last:[&:has([aria-selected])]:hawa-rounded-r-md focus-within:hawa-relative focus-within:hawa-z-20",
-        day: cn(
-          buttonVariants({ variant: "ghost" }),
-          "hawa-h-9 hawa-w-9 hawa-justify-center !hawa-p-0 hawa-font-normal aria-selected:hawa-opacity-100",
-        ),
-        day_range_end: "day-range-end",
-        day_selected:
-          "hawa-bg-primary hawa-text-primary-foreground hover:hawa-bg-primary hover:hawa-text-primary-foreground focus:hawa-bg-primary focus:hawa-text-primary-foreground",
-        day_today: "hawa-bg-accent hawa-text-accent-foreground",
-        day_outside:
+        week: "hawa-flex hawa-w-full hawa-mt-2",
+
+        range_end: "day-range-end",
+
+        today: "hawa-bg-accent hawa-text-accent-foreground hawa-rounded",
+        outside:
           "day-outside hawa-text-muted-foreground hawa-opacity-50 aria-selected:hawa-bg-accent/50 aria-selected:hawa-text-muted-foreground aria-selected:hawa-opacity-30",
-        day_disabled: "hawa-text-muted-foreground hawa-opacity-50",
-        day_range_middle:
+        disabled: "hawa-text-muted-foreground hawa-opacity-50",
+        range_middle:
           "aria-selected:hawa-bg-accent aria-selected:hawa-text-accent-foreground",
-        day_hidden: "hawa-invisible",
+        hidden: "hawa-invisible",
         ...classNames,
       }}
       components={{
-        IconLeft: ({ ...props }) => (
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="20"
-            height="20"
-            aria-label="Next Month"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            strokeWidth="2"
-            strokeLinecap="round"
-            strokeLinejoin="round"
+        DayButton: (props) => (
+          <Button
+            {...props}
+            variant={props.modifiers.selected ? "default" : "ghost"}
+            className="hawa-h-9 hawa-w-9 hawa-text-center hawa-text-sm hawa-p-0 hawa-relative [&:has([aria-selected].range-end)]:hawa-rounded-r-md [&:has([aria-selected].outside)]:hawa-bg-accent/50 [&:has([aria-selected])]:hawa-bg-accent first:[&:has([aria-selected])]:hawa-rounded-l-md last:[&:has([aria-selected])]:hawa-rounded-r-md focus-within:hawa-relative focus-within:hawa-z-20"
           >
-            <path d="m15 18-6-6 6-6" />
-          </svg>
+            {props.children}
+          </Button>
         ),
-        IconRight: ({ ...props }) => (
+
+        Chevron: (props) => (
           <svg
             xmlns="http://www.w3.org/2000/svg"
             width="20"
@@ -89,7 +83,11 @@ function Calendar({
             strokeWidth="2"
             strokeLinecap="round"
             strokeLinejoin="round"
-            className="hawa-rotate-180"
+            className={
+              props.orientation === "right"
+                ? "hawa-rotate-180 hawa-opacity-80"
+                : "hawa-opacity-80"
+            }
           >
             <path d="m15 18-6-6 6-6" />
           </svg>

diff --git a/packages/components/elements/datePicker/DatePicker.tsx b/packages/components/elements/datePicker/DatePicker.tsx
@@ -18,15 +18,15 @@ export const DatePicker: React.FC<DatePickerProps> = ({
   trigger,
   popoverTriggerProps,
   popoverContentProps,
-  required,
+  // required,
   ...props
 }) => {
   return (
     <PopoverRoot>
       <PopoverTrigger {...popoverTriggerProps}>{trigger}</PopoverTrigger>
       <PopoverContent
         align={props.dir === "rtl" ? "end" : "start"}
-        sideOffset={required ? -16 : -4}
+        // sideOffset={required ? -16 : -4}
         {...popoverContentProps}
       >
         <Calendar {...props} />

diff --git a/packages/components/package.json b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.42.11",
+  "version": "0.42.12",
   "description": "Modern UI Kit made with Tailwind",
   "author": {
     "name": "Sikka Software",
@@ -86,7 +86,7 @@
     "libphonenumber-js": "^1.11.4",
     "prism-react-renderer": "^2.3.1",
     "prismjs": "^1.29.0",
-    "react-day-picker": "^8.10.1",
+    "react-day-picker": "^9.0.1",
     "react-dropzone": "^14.2.3",
     "react-headless-pagination": "^1.1.6",
     "react-hook-form": "^7.52.1",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml