Upgrade `react-day-picker` to v9 #4371

AhmedBaset · 2024-07-22T02:44:02Z

I'm opening this PR as early as possible to avoid the issues we had with <Command /> when cmdk v1.0 was released. And to make it easy for current users to upgrade in their codebases by copying the new update.

This PR upgrades react-day-picker to the latest v9

See Changelog and Upgrade Guide

Notable Changes:

Renaming some classNames
date-fns is now a dependency rather than a peer dependency

TODOs:

Pin react-day-picker to 9.0 to avoid the same issue with the next major

x	o
default
new-york

To upgrade in your codebase:

pnpm update react-day-picker@9
pnpm un date-fns If you don't use it anywhere else
Wait the next shadcn-ui release and run shadcn-ui add calendar --overwrite or copy the source code directly for default or new york styles.

vercel · 2024-07-22T02:44:06Z

@AhmedBaset is attempting to deploy a commit to the shadcn-pro Team on Vercel.

A member of the Team first needs to authorize it.

…o calendar-rdp-9

valentinpolitov · 2024-07-22T19:29:33Z

Thanks, @AhmedBaset, appreciate your work on this. However, I believe there's a bit more to address regarding Tailwind. In react-day-picker v9, the aria-selected attribute has been moved from ~~cell~~ day_button to ~~row~~ day. This component relies heavily on that attribute, so additional adjustments are needed.

AhmedBaset · 2024-07-22T19:56:12Z

Thanks, @AhmedBaset, appreciate your work on this. However, I believe there's a bit more to address regarding Tailwind. In react-day-picker v9, the aria-selected attribute has been moved from ~~cell~~ day_button to ~~row~~ day. This component relies heavily on that attribute, so additional adjustments are needed.

Thanks for the feedback. It's still WIP.

shadcn · 2024-07-23T07:11:40Z

@AhmedBaset Thanks for your work here. I've pinned react-day=picker to v8 for now. Let me know when this is ready for upgrade.

(Ideally, if you get to it, it would be great to document the upgrade on the calendar page. See https://ui.shadcn.com/docs/components/input-otp#changelog as an example).

vercel · 2024-07-23T07:11:49Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
ui	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 23, 2024 7:16am

flixlix · 2024-07-26T13:54:41Z

@shadcn made a similar PR here #4421
just noticed this one now, but my PR also adds a new feature, feel free to review it :)

… classes in twMerge (cn)

AhmedBaset · 2024-07-31T07:48:53Z

Pinging @shadcn to review

Christophvh · 2024-08-07T11:55:50Z

v9 adds new functionality which also breaks extra styling:
<DayPicker hideNavigation captionLayout="dropdown" />

https://daypicker.dev/docs/navigation#hidenavigation

Nhollas · 2024-08-12T15:28:05Z

Hello all!

Please take a look at:

Version 9

Version 8

I'm new to open-source, what's normally the way that people contribute?

The code for above lives here.

My approach is aware of the switch RDP made with the aria-selected attributes and seems to be exactly matching the styles of v8. I had hoped to write some UI regression tests with storybook but it wasn't that great at detecting the subtle visual changes.

Currently having some teething issues with the navigation positioning when use opt to use a custom dropdown:

          <Calendar
            mode="single"
            captionLayout="dropdown"
            selected={date}
            onSelect={setDate}
            showOutsideDays={true}
            endMonth={new Date(2099, 11)}
            components={{
              Dropdown: MonthAndYearDropdown,
              Chevron: ({ orientation }) =>
                orientation === "left" ? (
                  <ChevronLeft className="size-4" />
                ) : (
                  <ChevronRight className="size-4" />
                ),
            }}
          />

Code for the above can be found here.

-Nick

TomHawk123

I had to do the same

McTom234 · 2024-09-20T22:14:15Z

apps/www/registry/default/ui/calendar.tsx

+                modifiers?.today && "bg-accent text-accent-foreground",
+                modifiers?.selected &&
+                  "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
+                modifiers?.outside &&
+                  "text-muted-foreground opacity-50 pointer-events-none",
+                modifiers?.disabled && "opacity-50 text-muted-foreground",
+                modifiers?.hidden && "invisible",
+                modifiers.range_middle &&
+                  "bg-accent text-accent-foreground hover:bg-accent hover:text-accent-foreground rounded-none last:rounded-e-md first:rounded-s-md",
+                modifiers.outside &&
+                  modifiers.selected &&
+                  "bg-accent/40 text-muted-foreground"


If this is going to be pursued, the code could be made a bit more readable with the ClassDictionary from clsx. Instead of having these && operators in every row, an object could be used like this:

Suggested change

modifiers?.today && "bg-accent text-accent-foreground",

modifiers?.selected &&

"bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",

modifiers?.outside &&

"text-muted-foreground opacity-50 pointer-events-none",

modifiers?.disabled && "opacity-50 text-muted-foreground",

modifiers?.hidden && "invisible",

modifiers.range_middle &&

"bg-accent text-accent-foreground hover:bg-accent hover:text-accent-foreground rounded-none last:rounded-e-md first:rounded-s-md",

modifiers.outside &&

modifiers.selected &&

"bg-accent/40 text-muted-foreground"

"bg-accent text-accent-foreground": modifiers?.today,

"bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground": modifiers?.selected,

"text-muted-foreground opacity-50 pointer-events-none": modifiers?.outside,

"opacity-50 text-muted-foreground": modifiers?.disabled,

invisible: modifiers?.hidden,

"bg-accent text-accent-foreground hover:bg-accent hover:text-accent-foreground rounded-none last:rounded-e-md first:rounded-s-md": modifiers?.range_middle,

"bg-accent/40 text-muted-foreground": modifiers?.outside && modifiers?.selected

Also, I noted that some modifiers values don't have the ?. Don't know if it'd be a possible issue...

After looking into the daypicker types, I guess the ? could be entirely removed for modifiers?

I came across this PR while updating day picker in my project.

An object like what @McTom234 suggested is definitely cleaner but the previous code (e.g. cell: ... before it changed to day) was targeting aria-selected to add styling instead, maybe it would be better to keep that approach instead of importing Button? Anyways that's what I'll be doing.

Also I think lines like "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground": modifiers?.selected, can be cleaned up since the default/hover/focus styles are the same, unless they're overriding styles set somewhere else.

I agree on those lines, although the others are cleaner. I tried to upgrade to v9 myself, but didn't have the time to get a working solution done, so I stayed at v8 for now. But during the process, I felt like importing Button wasn't a big gain.

Anyways, if you have a working solution example, I'd appreciate a little insight 😇

@McTom234 for me, following the react-day-picker upgrading doc fixed most of the regressions. Seems like v9's HTML structure is different though so updating the nav buttons positioning isn't as straightforward. I'm working on that now but I'm using nav: "flex items-start", to have the nav float up to the top, absolute left-2 and absolute right-2 on button_previous and button_next respectively, and months: "flex flex-col sm:flex-row", month: "m-4 mb-0 last-of-type:ml-0", to adjust/fix some other layout regressions. Our calendar component is pretty heavily customized so I'm afraid that sharing it will be more noisy than helpful.

Okay, thanks for your tips. I followed the same guide and had the issues with the nav buttons as well. That's where time-benefit wasn't given to proceed...

uschen · 2024-10-09T01:15:44Z

here

Hello all!

Please take a look at:

Version 9

Version 8

I'm new to open-source, what's normally the way that people contribute?

The code for above lives here.

My approach is aware of the switch RDP made with the aria-selected attributes and seems to be exactly matching the styles of v8. I had hoped to write some UI regression tests with storybook but it wasn't that great at detecting the subtle visual changes.

Currently having some teething issues with the navigation positioning when use opt to use a custom dropdown:
          <Calendar
            mode="single"
            captionLayout="dropdown"
            selected={date}
            onSelect={setDate}
            showOutsideDays={true}
            endMonth={new Date(2099, 11)}
            components={{
              Dropdown: MonthAndYearDropdown,
              Chevron: ({ orientation }) =>
                orientation === "left" ? (
                  <ChevronLeft className="size-4" />
                ) : (
                  <ChevronRight className="size-4" />
                ),
            }}
          />
Code for the above can be found here.

-Nick

NICE!

-> months: 'flex flex-col sm:flex-row gap-y-4 sm:gap-x-4 sm:gap-y-0', needs relative it seems

lukasbindreiter · 2024-11-05T14:18:34Z

@shadcn Is there any ETA or planned time when this will be merged? We are waiting quite eagerly for this for a while now already. We mainly want to upgrade due to the UTC dates support in react day picker v9, which we need for our use-case.

TimTimWorks · 2024-12-04T03:37:40Z

apps/www/registry/default/ui/calendar.tsx

-          "aria-selected:bg-accent aria-selected:text-accent-foreground",
-        day_hidden: "invisible",
+        month_caption: "flex justify-center items-center h-7",
+        caption_label: "text-sm font-medium",


This breaks the styling when calendar captionLayout is set to dropdown.
I had success with

Suggested change

caption_label: "text-sm font-medium",

caption_label:

props.captionLayout !== "label" ? "hidden" : "text-sm font-medium",

migrate classNames and chevrowIcon

a9a112d

AhmedBaset changed the title ~~Migrate react-day-picker to v9~~ Upgrade react-day-picker to v9 Jul 22, 2024

AhmedBaset added 6 commits July 22, 2024 05:54

upgrade new-york theme

7c82e9c

data-fns is now a dep not a peer dep

f7a4e2c

chore: formatting

454c746

chore: formatting

ef40431

Merge branch 'calendar-rdp-9' of https://github.com/AhmedBaset/ui int…

6bfeb03

…o calendar-rdp-9

initialFocus to autoFocus

bbffdd5

gpbl mentioned this pull request Jul 23, 2024

Improvements/bug fixes release strategy #191

Closed

shadcn mentioned this pull request Jul 23, 2024

fix: pin react-day-picker #4387

Merged

shadcn added area: roadmap This looks great. We'll add it to the roadmap, review and merge. component: calendar labels Jul 23, 2024

vercel bot deployed to Preview – ui July 23, 2024 07:16 View deployment

AhmedBaset added 3 commits July 23, 2024 17:19

Merge branch 'main' into calendar-rdp-9

a17a143

update default styles

800bd1a

Merge branch 'main' into calendar-rdp-9

1e3c2b4

AhmedBaset added 4 commits July 28, 2024 09:13

refactor: move DayButton styles to customComponents to allow wrapping…

5e1cfee

… classes in twMerge (cn)

fix range styles

ed9756b

upgrade new-york

11d306f

pin react-date-picker to ^9.0

9310235

AhmedBaset marked this pull request as ready for review July 31, 2024 07:26

AhmedBaset added 2 commits July 31, 2024 10:29

chore: update rdp

985b9bd

docs: changelog

56e6a91

Christophvh mentioned this pull request Aug 7, 2024

[bug]: Outdated component #4518

Open

2 tasks

Merge branch 'main' into calendar-rdp-9

f5aa84c

kachkaev mentioned this pull request Aug 30, 2024

[bug]: datepicker get a wrong css #4361

Closed

2 tasks

TomHawk123 approved these changes Sep 17, 2024

View reviewed changes

McTom234 reviewed Sep 20, 2024

View reviewed changes

TimTimWorks reviewed Dec 4, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Upgrade `react-day-picker` to v9 #4371

Upgrade `react-day-picker` to v9 #4371

AhmedBaset commented Jul 22, 2024 •

edited

Loading

vercel bot commented Jul 22, 2024

valentinpolitov commented Jul 22, 2024

AhmedBaset commented Jul 22, 2024

shadcn commented Jul 23, 2024

vercel bot commented Jul 23, 2024 •

edited

Loading

flixlix commented Jul 26, 2024

AhmedBaset commented Jul 31, 2024

Christophvh commented Aug 7, 2024

Nhollas commented Aug 12, 2024 •

edited

Loading

TomHawk123 left a comment

McTom234 Sep 20, 2024 •

edited

Loading

goldins Sep 26, 2024

McTom234 Sep 26, 2024

goldins Sep 26, 2024

McTom234 Sep 29, 2024

uschen commented Oct 9, 2024

lukasbindreiter commented Nov 5, 2024 •

edited

Loading

TimTimWorks Dec 4, 2024

	caption_label: "text-sm font-medium",
	caption_label:
	props.captionLayout !== "label" ? "hidden" : "text-sm font-medium",

Upgrade react-day-picker to v9 #4371

Are you sure you want to change the base?

Upgrade react-day-picker to v9 #4371

Conversation

AhmedBaset commented Jul 22, 2024 • edited Loading

Notable Changes:

TODOs:

To upgrade in your codebase:

vercel bot commented Jul 22, 2024

valentinpolitov commented Jul 22, 2024

AhmedBaset commented Jul 22, 2024

shadcn commented Jul 23, 2024

vercel bot commented Jul 23, 2024 • edited Loading

flixlix commented Jul 26, 2024

AhmedBaset commented Jul 31, 2024

Christophvh commented Aug 7, 2024

Nhollas commented Aug 12, 2024 • edited Loading

TomHawk123 left a comment

Choose a reason for hiding this comment

McTom234 Sep 20, 2024 • edited Loading

Choose a reason for hiding this comment

goldins Sep 26, 2024

Choose a reason for hiding this comment

McTom234 Sep 26, 2024

Choose a reason for hiding this comment

goldins Sep 26, 2024

Choose a reason for hiding this comment

McTom234 Sep 29, 2024

Choose a reason for hiding this comment

uschen commented Oct 9, 2024

lukasbindreiter commented Nov 5, 2024 • edited Loading

TimTimWorks Dec 4, 2024

Choose a reason for hiding this comment

Upgrade `react-day-picker` to v9 #4371

Upgrade `react-day-picker` to v9 #4371

AhmedBaset commented Jul 22, 2024 •

edited

Loading

vercel bot commented Jul 23, 2024 •

edited

Loading

Nhollas commented Aug 12, 2024 •

edited

Loading

McTom234 Sep 20, 2024 •

edited

Loading

lukasbindreiter commented Nov 5, 2024 •

edited

Loading