Update date picker version and tweak layout logic (#1105)

* fix: update date picker version and tweak layout logic

* feat: set start month based on selected date

Author: annavik

ui/package.json

@@ -29,7 +29,7 @@
     "leaflet": "^1.9.3",
     "lodash": "^4.17.21",
     "lucide-react": "^0.454.0",
-    "nova-ui-kit": "^1.1.32",
+    "nova-ui-kit": "^1.1.33",
     "plotly.js": "^2.25.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

ui/src/design-system/components/page-footer/page-footer.module.scss

@@ -8,7 +8,7 @@
   width: 100%;
   background-color: $color-generic-white;
   border-top: 1px solid $color-neutral-100;
-  z-index: 2;
+  z-index: 50;
 }
 
 .content {

ui/src/design-system/components/select/date-picker.tsx

@@ -1,7 +1,7 @@
 import { format } from 'date-fns'
 import { AlertCircleIcon, Calendar as CalendarIcon } from 'lucide-react'
 import { Button, Calendar, Popover } from 'nova-ui-kit'
-import { useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 
 const dateToLabel = (date: Date) => {
   try {
@@ -21,7 +21,15 @@ export const DatePicker = ({
   value?: string
 }) => {
   const [open, setOpen] = useState(false)
-  const selected = value ? new Date(value) : undefined
+  const selected = useMemo(() => (value ? new Date(value) : undefined), [value])
+  const [month, setMonth] = useState(selected)
+
+  /* Reset start month on date picker close */
+  useEffect(() => {
+    if (!open) {
+      setMonth(selected)
+    }
+  }, [open, selected])
 
   const triggerLabel = (() => {
     if (!value) {
@@ -50,10 +58,18 @@ export const DatePicker = ({
           </>
         </Button>
       </Popover.Trigger>
-      <Popover.Content className="w-auto p-0 overflow-hidden">
+      <Popover.Content
+        /* Force calendar to go below trigger to keep position stable for navigation controls */
+        avoidCollisions={false}
+        className="w-auto p-0 overflow-hidden"
+        side="bottom"
+      >
         <Calendar
+          captionLayout="dropdown"
           mode="single"
+          month={month}
           selected={selected}
+          onMonthChange={setMonth}
           onSelect={(date) => {
             if (date) {
               onValueChange(dateToLabel(date))

ui/yarn.lock

@@ -668,6 +668,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@date-fns/tz@npm:^1.4.1":
+  version: 1.4.1
+  resolution: "@date-fns/tz@npm:1.4.1"
+  checksum: 9033fdc4682fe3d4d147625ce04fa88a8792653594e2de8d5a438c8f3bfc0990ee28fe773f91cac6810b06d818b5b281ae0608752ba8337257d0279ded3f019a
+  languageName: node
+  linkType: hard
+
 "@esbuild/android-arm64@npm:0.18.20":
   version: 0.18.20
   resolution: "@esbuild/android-arm64@npm:0.18.20"
@@ -3330,7 +3337,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@radix-ui/react-slot@npm:1.1.0, @radix-ui/react-slot@npm:^1.1.0":
+"@radix-ui/react-slot@npm:1.1.0":
   version: 1.1.0
   resolution: "@radix-ui/react-slot@npm:1.1.0"
   dependencies:
@@ -3390,6 +3397,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-slot@npm:^1.2.4":
+  version: 1.2.4
+  resolution: "@radix-ui/react-slot@npm:1.2.4"
+  dependencies:
+    "@radix-ui/react-compose-refs": "npm:1.1.2"
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 8b719bb934f1ae5ac0e37214783085c17c2f1080217caf514c1c6cc3d9ca56c7e19d25470b26da79aa6e605ab36589edaade149b76f5fc0666f1063e2fc0a0dc
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-switch@npm:^1.2.6":
   version: 1.2.6
   resolution: "@radix-ui/react-switch@npm:1.2.6"
@@ -5096,7 +5118,7 @@ __metadata:
     leaflet: "npm:^1.9.3"
     lodash: "npm:^4.17.21"
     lucide-react: "npm:^0.454.0"
-    nova-ui-kit: "npm:^1.1.32"
+    nova-ui-kit: "npm:^1.1.33"
     plotly.js: "npm:^2.25.2"
     postcss: "npm:^8.4.47"
     prettier: "npm:2.8.4"
@@ -6434,13 +6456,27 @@ __metadata:
   languageName: node
   linkType: hard
 
+"date-fns-jalali@npm:^4.1.0-0":
+  version: 4.1.0-0
+  resolution: "date-fns-jalali@npm:4.1.0-0"
+  checksum: f9ad98d9f7e8e5abe0d070dc806b0c8baded2b1208626c42e92cbd2605b5171f5714d6b79b20cc2666267d821699244c9d0b5e93274106cf57d6232da77596ed
+  languageName: node
+  linkType: hard
+
 "date-fns@npm:^3.6.0":
   version: 3.6.0
   resolution: "date-fns@npm:3.6.0"
   checksum: 0b5fb981590ef2f8e5a3ba6cd6d77faece0ea7f7158948f2eaae7bbb7c80a8f63ae30b01236c2923cf89bb3719c33aeb150c715ea4fe4e86e37dcf06bed42fb6
   languageName: node
   linkType: hard
 
+"date-fns@npm:^4.1.0":
+  version: 4.1.0
+  resolution: "date-fns@npm:4.1.0"
+  checksum: b79ff32830e6b7faa009590af6ae0fb8c3fd9ffad46d930548fbb5acf473773b4712ae887e156ba91a7b3dc30591ce0f517d69fd83bd9c38650fdc03b4e0bac8
+  languageName: node
+  linkType: hard
+
 "debug@npm:2":
   version: 2.6.9
   resolution: "debug@npm:2.6.9"
@@ -10473,16 +10509,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"nova-ui-kit@npm:^1.1.32":
-  version: 1.1.32
-  resolution: "nova-ui-kit@npm:1.1.32"
+"nova-ui-kit@npm:^1.1.33":
+  version: 1.1.33
+  resolution: "nova-ui-kit@npm:1.1.33"
   dependencies:
     "@radix-ui/react-checkbox": "npm:^1.1.4"
     "@radix-ui/react-collapsible": "npm:^1.1.1"
     "@radix-ui/react-popover": "npm:^1.1.2"
     "@radix-ui/react-select": "npm:^2.1.2"
     "@radix-ui/react-slider": "npm:^1.2.1"
-    "@radix-ui/react-slot": "npm:^1.1.0"
+    "@radix-ui/react-slot": "npm:^1.2.4"
     "@radix-ui/react-switch": "npm:^1.2.6"
     "@radix-ui/react-tooltip": "npm:^1.1.6"
     class-variance-authority: "npm:^0.7.0"
@@ -10491,11 +10527,11 @@ __metadata:
     date-fns: "npm:^3.6.0"
     lucide-react: "npm:^0.452.0"
     react: "npm:^18.3.1"
-    react-day-picker: "npm:^8.10.1"
+    react-day-picker: "npm:^9.13.0"
     react-dom: "npm:^18.3.1"
     tailwind-merge: "npm:^2.5.4"
     tailwindcss-animate: "npm:^1.0.7"
-  checksum: 8c356c554db489c1a0ba5aee2e232be5bc387ccadd2e0c624169089640afa4f78c92309edb214e7d580ca9a5b9bb611294d7d6278856e3fd73b04c9dbbea4a9b
+  checksum: a29d22052a4f83a6b997e6bb66f4226625b7dbd05faf4f03824af8b353cf75e7a25ffbe06aafe91b8d3cf6e51b5febba1f013cce3c60faae669278c7f4ccbae2
   languageName: node
   linkType: hard
 
@@ -11255,13 +11291,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-day-picker@npm:^8.10.1":
-  version: 8.10.1
-  resolution: "react-day-picker@npm:8.10.1"
+"react-day-picker@npm:^9.13.0":
+  version: 9.13.0
+  resolution: "react-day-picker@npm:9.13.0"
+  dependencies:
+    "@date-fns/tz": "npm:^1.4.1"
+    date-fns: "npm:^4.1.0"
+    date-fns-jalali: "npm:^4.1.0-0"
   peerDependencies:
-    date-fns: ^2.28.0 || ^3.0.0
-    react: ^16.8.0 || ^17.0.0 || ^18.0.0
-  checksum: a0ff28c4b61b3882e6a825b19e5679e2fdf3256cf1be8eb0a0c028949815c1ae5a6561474c2c19d231c010c8e0e0b654d3a322610881e0655abca05a2e03d9df
+    react: ">=16.8.0"
+  checksum: e176309a24697f6552c80c7fde257f3dc06506a4e5ec22b11b55bf136bd452ab98d2ca9c2a17632092d67d23d08b3b35daf77d99e95a937ad290d3322abc745c
   languageName: node
   linkType: hard