Skip to content

Commit 900bc5f

Browse files
gpblgpbl
committed
feat!: default navLayout to after
1 parent f1fc0a5 commit 900bc5f

File tree

8 files changed

+143
-142
lines changed

8 files changed

+143
-142
lines changed

‎examples/__snapshots__/Range.test.tsx.snap‎

Lines changed: 76 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -6,48 +6,12 @@ exports[`should match the snapshot 1`] = `
66
<div
77
class="rdp-root"
88
data-mode="range"
9+
data-nav-layout="after"
910
id="test"
1011
>
1112
<div
1213
class="rdp-months"
1314
>
14-
<nav
15-
aria-label="Navigation bar"
16-
class="rdp-nav"
17-
>
18-
<button
19-
aria-label="Go to the Previous Month"
20-
class="rdp-button_previous"
21-
type="button"
22-
>
23-
<svg
24-
class="rdp-chevron"
25-
height="24"
26-
viewBox="0 0 24 24"
27-
width="24"
28-
>
29-
<polygon
30-
points="16 18.112 9.81111111 12 16 5.87733333 14.0888889 4 6 12 14.0888889 20"
31-
/>
32-
</svg>
33-
</button>
34-
<button
35-
aria-label="Go to the Next Month"
36-
class="rdp-button_next"
37-
type="button"
38-
>
39-
<svg
40-
class="rdp-chevron"
41-
height="24"
42-
viewBox="0 0 24 24"
43-
width="24"
44-
>
45-
<polygon
46-
points="8 18.112 14.18888889 12 8 5.87733333 9.91111111 4 18 12 9.91111111 20"
47-
/>
48-
</svg>
49-
</button>
50-
</nav>
5115
<div
5216
class="rdp-month"
5317
>
@@ -62,6 +26,43 @@ exports[`should match the snapshot 1`] = `
6226
June 2020
6327
</span>
6428
</div>
29+
<nav
30+
aria-label="Navigation bar"
31+
class="rdp-nav"
32+
>
33+
<button
34+
aria-label="Go to the Previous Month"
35+
class="rdp-button_previous"
36+
type="button"
37+
>
38+
<svg
39+
class="rdp-chevron"
40+
height="24"
41+
viewBox="0 0 24 24"
42+
width="24"
43+
>
44+
<polygon
45+
points="16 18.112 9.81111111 12 16 5.87733333 14.0888889 4 6 12 14.0888889 20"
46+
/>
47+
</svg>
48+
</button>
49+
<button
50+
aria-label="Go to the Next Month"
51+
class="rdp-button_next"
52+
type="button"
53+
>
54+
<svg
55+
class="rdp-chevron"
56+
height="24"
57+
viewBox="0 0 24 24"
58+
width="24"
59+
>
60+
<polygon
61+
points="8 18.112 14.18888889 12 8 5.87733333 9.91111111 4 18 12 9.91111111 20"
62+
/>
63+
</svg>
64+
</button>
65+
</nav>
6566
<table
6667
aria-label="June 2020"
6768
aria-multiselectable="true"
@@ -645,48 +646,12 @@ exports[`when a day in the range is clicked when the day is clicked again when a
645646
<div
646647
class="rdp-root"
647648
data-mode="range"
649+
data-nav-layout="after"
648650
id="test"
649651
>
650652
<div
651653
class="rdp-months"
652654
>
653-
<nav
654-
aria-label="Navigation bar"
655-
class="rdp-nav"
656-
>
657-
<button
658-
aria-label="Go to the Previous Month"
659-
class="rdp-button_previous"
660-
type="button"
661-
>
662-
<svg
663-
class="rdp-chevron"
664-
height="24"
665-
viewBox="0 0 24 24"
666-
width="24"
667-
>
668-
<polygon
669-
points="16 18.112 9.81111111 12 16 5.87733333 14.0888889 4 6 12 14.0888889 20"
670-
/>
671-
</svg>
672-
</button>
673-
<button
674-
aria-label="Go to the Next Month"
675-
class="rdp-button_next"
676-
type="button"
677-
>
678-
<svg
679-
class="rdp-chevron"
680-
height="24"
681-
viewBox="0 0 24 24"
682-
width="24"
683-
>
684-
<polygon
685-
points="8 18.112 14.18888889 12 8 5.87733333 9.91111111 4 18 12 9.91111111 20"
686-
/>
687-
</svg>
688-
</button>
689-
</nav>
690655
<div
691656
class="rdp-month"
692657
>
@@ -701,6 +666,43 @@ exports[`when a day in the range is clicked when the day is clicked again when a
701666
June 2020
702667
</span>
703668
</div>
669+
<nav
670+
aria-label="Navigation bar"
671+
class="rdp-nav"
672+
>
673+
<button
674+
aria-label="Go to the Previous Month"
675+
class="rdp-button_previous"
676+
type="button"
677+
>
678+
<svg
679+
class="rdp-chevron"
680+
height="24"
681+
viewBox="0 0 24 24"
682+
width="24"
683+
>
684+
<polygon
685+
points="16 18.112 9.81111111 12 16 5.87733333 14.0888889 4 6 12 14.0888889 20"
686+
/>
687+
</svg>
688+
</button>
689+
<button
690+
aria-label="Go to the Next Month"
691+
class="rdp-button_next"
692+
type="button"
693+
>
694+
<svg
695+
class="rdp-chevron"
696+
height="24"
697+
viewBox="0 0 24 24"
698+
width="24"
699+
>
700+
<polygon
701+
points="8 18.112 14.18888889 12 8 5.87733333 9.91111111 4 18 12 9.91111111 20"
702+
/>
703+
</svg>
704+
</button>
705+
</nav>
704706
<table
705707
aria-label="June 2020"
706708
aria-multiselectable="true"

‎examples/__snapshots__/StylingCssModules.test.tsx.snap‎

Lines changed: 38 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -7,47 +7,11 @@ exports[`should match the snapshot 1`] = `
77
<div
88
class="rdp-root"
99
data-mode="single"
10+
data-nav-layout="after"
1011
>
1112
<div
1213
class="rdp-months"
1314
>
14-
<nav
15-
aria-label="Navigation bar"
16-
class="rdp-nav"
17-
>
18-
<button
19-
aria-label="Go to the Previous Month"
20-
class="rdp-button_previous"
21-
type="button"
22-
>
23-
<svg
24-
class="rdp-chevron"
25-
height="24"
26-
viewBox="0 0 24 24"
27-
width="24"
28-
>
29-
<polygon
30-
points="16 18.112 9.81111111 12 16 5.87733333 14.0888889 4 6 12 14.0888889 20"
31-
/>
32-
</svg>
33-
</button>
34-
<button
35-
aria-label="Go to the Next Month"
36-
class="rdp-button_next"
37-
type="button"
38-
>
39-
<svg
40-
class="rdp-chevron"
41-
height="24"
42-
viewBox="0 0 24 24"
43-
width="24"
44-
>
45-
<polygon
46-
points="8 18.112 14.18888889 12 8 5.87733333 9.91111111 4 18 12 9.91111111 20"
47-
/>
48-
</svg>
49-
</button>
50-
</nav>
5115
<div
5216
class="rdp-month"
5317
>
@@ -62,6 +26,43 @@ exports[`should match the snapshot 1`] = `
6226
November 2021
6327
</span>
6428
</div>
29+
<nav
30+
aria-label="Navigation bar"
31+
class="rdp-nav"
32+
>
33+
<button
34+
aria-label="Go to the Previous Month"
35+
class="rdp-button_previous"
36+
type="button"
37+
>
38+
<svg
39+
class="rdp-chevron"
40+
height="24"
41+
viewBox="0 0 24 24"
42+
width="24"
43+
>
44+
<polygon
45+
points="16 18.112 9.81111111 12 16 5.87733333 14.0888889 4 6 12 14.0888889 20"
46+
/>
47+
</svg>
48+
</button>
49+
<button
50+
aria-label="Go to the Next Month"
51+
class="rdp-button_next"
52+
type="button"
53+
>
54+
<svg
55+
class="rdp-chevron"
56+
height="24"
57+
viewBox="0 0 24 24"
58+
width="24"
59+
>
60+
<polygon
61+
points="8 18.112 14.18888889 12 8 5.87733333 9.91111111 4 18 12 9.91111111 20"
62+
/>
63+
</svg>
64+
</button>
65+
</nav>
6566
<table
6667
aria-label="November 2021"
6768
aria-multiselectable="false"

‎src/DayPicker.test.tsx‎

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,12 @@ test("use custom components", () => {
6767
data-testid={testId}
6868
components={{
6969
Nav: () => <div>Custom Navigation</div>,
70-
Month: (_props: MonthProps) => <div>Custom Month</div>,
70+
Month: ({ children }: MonthProps) => (
71+
<div>
72+
Custom Month
73+
{children}
74+
</div>
75+
),
7176
Months: (props: MonthsProps) => (
7277
<div {...props}>
7378
Custom Months<div>{props.children}</div>
@@ -293,6 +298,17 @@ test("should render custom previous and next month buttons", () => {
293298

294299
describe("when navLayout is set", () => {
295300
const today = new Date(2024, 1, 4);
301+
describe("when navLayout is not set", () => {
302+
beforeEach(() => {
303+
render(<DayPicker today={today} data-testid={testId} />);
304+
});
305+
test("defaults navigation layout to 'after'", () => {
306+
expect(dayPicker()).toHaveAttribute("data-nav-layout", "after");
307+
});
308+
test("renders navigation after the month caption", () => {
309+
expect(nav().previousSibling).toHaveTextContent("February 2024");
310+
});
311+
});
296312
describe("when navLayout is set to 'around'", () => {
297313
beforeEach(() => {
298314
render(
@@ -309,7 +325,7 @@ describe("when navLayout is set", () => {
309325
expect(nextButton().previousSibling).toHaveTextContent("February 2024");
310326
});
311327
});
312-
describe("when navLayout is set to 'aft er'", () => {
328+
describe("when navLayout is set to 'after'", () => {
313329
beforeEach(() => {
314330
render(
315331
<DayPicker today={today} navLayout="after" data-testid={testId} />,

‎src/DayPicker.tsx‎

Lines changed: 6 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -153,8 +153,12 @@ export function DayPicker(initialProps: DayPickerProps) {
153153
props.classNames,
154154
]);
155155

156-
if (!props.today) {
157-
props = { ...props, today: dateLib.today() };
156+
if (!props.today || props.navLayout === undefined) {
157+
props = {
158+
...props,
159+
today: props.today ?? dateLib.today(),
160+
navLayout: props.navLayout ?? "after",
161+
};
158162
}
159163

160164
const {
@@ -400,18 +404,6 @@ export function DayPicker(initialProps: DayPickerProps) {
400404
className={classNames[UI.Months]}
401405
style={styles?.[UI.Months]}
402406
>
403-
{!props.hideNavigation && !navLayout && (
404-
<components.Nav
405-
data-animated-nav={props.animate ? "true" : undefined}
406-
className={classNames[UI.Nav]}
407-
style={styles?.[UI.Nav]}
408-
aria-label={labelNav()}
409-
onPreviousClick={handlePreviousClick}
410-
onNextClick={handleNextClick}
411-
previousMonth={previousMonth}
412-
nextMonth={nextMonth}
413-
/>
414-
)}
415407
{months.map((calendarMonth, displayIndex) => {
416408
return (
417409
<components.Month

‎src/types/props.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -190,8 +190,7 @@ export interface PropsBase {
190190
* - `after`: Displays the buttons after the caption. This ensures the tab order
191191
* matches the visual order.
192192
*
193-
* If not set, the buttons default to being displayed after the caption, but
194-
* the tab order may not align with the visual order.
193+
* Default value is `after`.
195194
*
196195
* @since 9.7.0
197196
* @see https://daypicker.dev/docs/customization#navigation-layouts

‎src/useAnimation.test.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -140,14 +140,14 @@ describe("useAnimation", () => {
140140
let monthWeekdaysContainers = getMonthWeekdaysContainers();
141141
let monthWeeksContainers = getMonthWeeksContainers();
142142

143-
expect(navContainers).toHaveLength(1);
143+
expect(navContainers).toHaveLength(2);
144144
expect(monthContainers).toHaveLength(2);
145145
expect(monthCaptionContainers).toHaveLength(2);
146146
expect(monthWeekdaysContainers).toHaveLength(2);
147147
expect(monthWeeksContainers).toHaveLength(2);
148148

149149
expect(getRootContainer()).toHaveStyle("isolation: isolate");
150-
expect(navContainers[0]).toHaveStyle("z-index: 1");
150+
expect(navContainers[1]).toHaveStyle("z-index: 1");
151151
expect(monthContainers[0]).toHaveStyle("position: relative");
152152
expect(monthContainers[0]).toHaveStyle("overflow: hidden");
153153
expect(monthContainers[1]).toHaveStyle("overflow: hidden");
@@ -167,7 +167,6 @@ describe("useAnimation", () => {
167167
monthWeekdaysContainers = getMonthWeekdaysContainers();
168168
monthWeeksContainers = getMonthWeeksContainers();
169169

170-
expect(navContainers).toHaveLength(1);
171170
expect(navContainers).toHaveLength(1);
172171
expect(monthContainers).toHaveLength(1);
173172
expect(monthCaptionContainers).toHaveLength(1);

‎website/docs/docs/appearance.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ Adjust the calendar’s look and layout with these appearance props.
1010
| ------------------- | ---------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
1111
| `captionLayout` | `"label"`<br/> `"dropdown"`<br/> `"dropdown-months"`<br/> `"dropdown-years"` | Choose the layout of the month caption. Default is `label`. See [Caption and Navigation Layouts](./caption-and-nav-layouts.mdx#caption-layouts). |
1212
| `reverseYears` | `boolean` | Reverse the order of the years in the dropdown. See [Caption and Navigation Layouts](./caption-and-nav-layouts.mdx#caption-dropdown). |
13-
| `navLayout` | `"around"` \| `"after"` | Adjust the positioning of the navigation buttons. See [Caption and Navigation Layouts](./caption-and-nav-layouts.mdx#navigation-layouts). |
13+
| `navLayout` | `"around"` \| `"after"` | Adjust the positioning of the navigation buttons. Default is `"after"`. See [Caption and Navigation Layouts](./caption-and-nav-layouts.mdx#navigation-layouts). |
1414
| `disableNavigation` | `boolean` | Disable navigating between months. See [Caption and Navigation Layouts](./caption-and-nav-layouts.mdx#disablenavigation). |
1515
| `hideNavigation` | `boolean` | Hide the navigation bar. See [Caption and Navigation Layouts](./caption-and-nav-layouts.mdx#hidenavigation). |
1616
| `animate` | `boolean` | Animate month transitions. See [Months Navigation](./navigation.mdx#animate). |

0 commit comments

Comments
 (0)