Skip to content

Fix react-day-picker v9 compatibility by removing getDefaultClassNames #114

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jaruesink merged 2 commits into from
Aug 3, 2025
Merged

Fix react-day-picker v9 compatibility by removing getDefaultClassNames #114

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
822400d
fix: remove getDefaultClassNames import for react-day-picker v9 compa…
codegen-sh[bot] Aug 3, 2025
50eb086
chore: bump version to 0.19.1 and update yarn.lock
codegen-sh[bot] Aug 3, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/components/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@lambdacurry/forms",
"version": "0.19.0",
"version": "0.19.1",
"type": "module",
"main": "./dist/index.js",
"types": "./dist/index.d.ts",
Expand Down
69 changes: 22 additions & 47 deletions packages/components/src/ui/calendar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from 'lucide-react';
import * as React from 'react';
import { type DayButton, DayPicker, getDefaultClassNames } from 'react-day-picker';
import { type DayButton, DayPicker } from 'react-day-picker';

import { Button, buttonVariants } from './button';
import { cn } from './utils';
Expand All @@ -17,7 +17,6 @@ function Calendar({
}: React.ComponentProps<typeof DayPicker> & {
buttonVariant?: React.ComponentProps<typeof Button>['variant'];
}) {
const defaultClassNames = getDefaultClassNames();

return (
<DayPicker
Expand All @@ -34,63 +33,42 @@ function Calendar({
...formatters,
}}
classNames={{
root: cn('w-fit', defaultClassNames.root),
months: cn('flex gap-4 flex-col md:flex-row relative', defaultClassNames.months),
month: cn('flex flex-col w-full gap-4', defaultClassNames.month),
nav: cn('flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between', defaultClassNames.nav),
root: 'w-fit',
months: 'flex gap-4 flex-col md:flex-row relative',
month: 'flex flex-col w-full gap-4',
nav: 'flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between',
button_previous: cn(
buttonVariants({ variant: buttonVariant }),
'size-(--cell-size) aria-disabled:opacity-50 p-0 select-none',
defaultClassNames.button_previous,
),
button_next: cn(
buttonVariants({ variant: buttonVariant }),
'size-(--cell-size) aria-disabled:opacity-50 p-0 select-none',
defaultClassNames.button_next,
),
month_caption: cn(
'flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)',
defaultClassNames.month_caption,
),
dropdowns: cn(
'w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5',
defaultClassNames.dropdowns,
),
dropdown_root: cn(
'relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md',
defaultClassNames.dropdown_root,
),
dropdown: cn('absolute inset-0 opacity-0', defaultClassNames.dropdown),
month_caption: 'flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)',
dropdowns: 'w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5',
dropdown_root: 'relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md',
dropdown: 'absolute inset-0 opacity-0',
caption_label: cn(
'select-none font-medium',
captionLayout === 'label'
? 'text-sm'
: 'rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5',
defaultClassNames.caption_label,
),
table: 'w-full border-collapse',
weekdays: cn('flex', defaultClassNames.weekdays),
weekday: cn(
'text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none',
defaultClassNames.weekday,
),
week: cn('flex w-full mt-2', defaultClassNames.week),
week_number_header: cn('select-none w-(--cell-size)', defaultClassNames.week_number_header),
week_number: cn('text-[0.8rem] select-none text-muted-foreground', defaultClassNames.week_number),
day: cn(
'relative w-full h-full p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none',
defaultClassNames.day,
),
range_start: cn('rounded-l-md bg-accent', defaultClassNames.range_start),
range_middle: cn('rounded-none', defaultClassNames.range_middle),
range_end: cn('rounded-r-md bg-accent', defaultClassNames.range_end),
today: cn(
'bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none',
defaultClassNames.today,
),
outside: cn('text-muted-foreground aria-selected:text-muted-foreground', defaultClassNames.outside),
disabled: cn('text-muted-foreground opacity-50', defaultClassNames.disabled),
hidden: cn('invisible', defaultClassNames.hidden),
weekdays: 'flex',
weekday: 'text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none',
week: 'flex w-full mt-2',
week_number_header: 'select-none w-(--cell-size)',
week_number: 'text-[0.8rem] select-none text-muted-foreground',
day: 'relative w-full h-full p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none',
range_start: 'rounded-l-md bg-accent',
range_middle: 'rounded-none',
range_end: 'rounded-r-md bg-accent',
today: 'bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none',
outside: 'text-muted-foreground aria-selected:text-muted-foreground',
disabled: 'text-muted-foreground opacity-50',
hidden: 'invisible',
...classNames,
}}
components={{
Expand Down Expand Up @@ -124,8 +102,6 @@ function Calendar({
}

function CalendarDayButton({ className, day, modifiers, ...props }: React.ComponentProps<typeof DayButton>) {
const defaultClassNames = getDefaultClassNames();

const ref = React.useRef<HTMLButtonElement>(null);
React.useEffect(() => {
if (modifiers.focused) ref.current?.focus();
Expand All @@ -145,7 +121,6 @@ function CalendarDayButton({ className, day, modifiers, ...props }: React.Compon
data-range-middle={modifiers.range_middle}
className={cn(
'data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70',
defaultClassNames.day,
className,
)}
{...props}
Expand Down
35 changes: 10 additions & 25 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4602,7 +4602,7 @@ __metadata:
languageName: node
linkType: hard

"axios@npm:^1.11.0, axios@npm:^1.6.1, axios@npm:^1.8.2":
"axios@npm:^1.11.0, axios@npm:^1.6.1":
version: 1.11.0
resolution: "axios@npm:1.11.0"
dependencies:
Expand Down Expand Up @@ -10088,8 +10088,8 @@ __metadata:
linkType: hard

"start-server-and-test@npm:^2.0.11":
version: 2.0.12
resolution: "start-server-and-test@npm:2.0.12"
version: 2.0.13
resolution: "start-server-and-test@npm:2.0.13"
dependencies:
arg: "npm:^5.0.2"
bluebird: "npm:3.7.2"
Expand All @@ -10098,12 +10098,12 @@ __metadata:
execa: "npm:5.1.1"
lazy-ass: "npm:1.6.0"
ps-tree: "npm:1.2.0"
wait-on: "npm:8.0.3"
wait-on: "npm:8.0.4"
bin:
server-test: src/bin/start.js
start-server-and-test: src/bin/start.js
start-test: src/bin/start.js
checksum: 10c0/152c8952c3dc66b2aaa6c4ee75ed9390351e6b39cc22896d50c19e1ee129e73fb4967802237aa2f849e6b59ddb0543831ec02e9b876d62bb139e85aecdb9c114
checksum: 10c0/5e8c8d2f5a806e0b5650605ab083a1a3890f1819cd3c4ea3e43d7cdbc228b5bb39e73b81ccd69d7baf1155e42c8e3d3ca421228abdefd83da530418c88c2d287
languageName: node
linkType: hard

Expand Down Expand Up @@ -11022,18 +11022,18 @@ __metadata:
languageName: node
linkType: hard

"wait-on@npm:8.0.3":
version: 8.0.3
resolution: "wait-on@npm:8.0.3"
"wait-on@npm:8.0.4, wait-on@npm:^8.0.3":
version: 8.0.4
resolution: "wait-on@npm:8.0.4"
dependencies:
axios: "npm:^1.8.2"
axios: "npm:^1.11.0"
joi: "npm:^17.13.3"
lodash: "npm:^4.17.21"
minimist: "npm:^1.2.8"
rxjs: "npm:^7.8.2"
bin:
wait-on: bin/wait-on
checksum: 10c0/7f14086c3bb6fc055207ab591d2faefc045f718aa7c959353a54af05cf08c53c25d9af80d4d5f6934a169cc0d97ebd1dcf024b13583d09b9a935c36bd745bd7b
checksum: 10c0/e77d843a03efc12699c965c34338fe0b95c9e80d1e39d946dc172e11a2b9613688b48b61135b269390025a255204a4e3e2ff8e5774f99f0069d149b4b48fd02d
languageName: node
linkType: hard

Expand All @@ -11052,21 +11052,6 @@ __metadata:
languageName: node
linkType: hard

"wait-on@npm:^8.0.3":
version: 8.0.4
resolution: "wait-on@npm:8.0.4"
dependencies:
axios: "npm:^1.11.0"
joi: "npm:^17.13.3"
lodash: "npm:^4.17.21"
minimist: "npm:^1.2.8"
rxjs: "npm:^7.8.2"
bin:
wait-on: bin/wait-on
checksum: 10c0/e77d843a03efc12699c965c34338fe0b95c9e80d1e39d946dc172e11a2b9613688b48b61135b269390025a255204a4e3e2ff8e5774f99f0069d149b4b48fd02d
languageName: node
linkType: hard

"wait-port@npm:^0.2.9":
version: 0.2.14
resolution: "wait-port@npm:0.2.14"
Expand Down