From ae63d4c2b0c43fd8a7fb75a41c21bf10282d669b Mon Sep 17 00:00:00 2001
From: Giampaolo Bellavite <io@gpbl.dev>
Date: Wed, 31 Jul 2024 06:56:00 -0500
Subject: [PATCH] feat: add new data-attributes to the day cells (#2331)

feat: add more data-attributes to the day cell

The data-attributes such as data-selected or data-outside help targeting the css classes in Tailwind without relying to aria-attributes.

E.g.: instead of `aria-selected:hawa-opacity-100` write `data-selected:hawa-opacity-100`.
---
 examples/__snapshots__/Range.test.tsx.snap    | 26 +++++++++++++++++++
 .../StylingCssModules.test.tsx.snap           | 11 ++++++++
 src/DayPicker.tsx                             | 19 +++++++++-----
 3 files changed, 49 insertions(+), 7 deletions(-)

diff --git a/examples/__snapshots__/Range.test.tsx.snap b/examples/__snapshots__/Range.test.tsx.snap
index 29b599052..f6057b79e 100644
--- a/examples/__snapshots__/Range.test.tsx.snap
+++ b/examples/__snapshots__/Range.test.tsx.snap
@@ -136,7 +136,9 @@ exports[`should match the snapshot 1`] = `
                 aria-hidden="true"
                 class="rdp-day rdp-hidden rdp-outside"
                 data-day="2020-05-31"
+                data-hidden="true"
                 data-month="2020-05"
+                data-outside="true"
                 role="gridcell"
               >
                 <button
@@ -343,6 +345,7 @@ exports[`should match the snapshot 1`] = `
                 aria-selected="true"
                 class="rdp-day rdp-range_start rdp-selected"
                 data-day="2020-06-15"
+                data-selected="true"
                 role="gridcell"
               >
                 <button
@@ -357,6 +360,7 @@ exports[`should match the snapshot 1`] = `
                 aria-selected="true"
                 class="rdp-day rdp-range_middle rdp-selected"
                 data-day="2020-06-16"
+                data-selected="true"
                 role="gridcell"
               >
                 <button
@@ -371,6 +375,7 @@ exports[`should match the snapshot 1`] = `
                 aria-selected="true"
                 class="rdp-day rdp-range_middle rdp-selected"
                 data-day="2020-06-17"
+                data-selected="true"
                 role="gridcell"
               >
                 <button
@@ -385,6 +390,7 @@ exports[`should match the snapshot 1`] = `
                 aria-selected="true"
                 class="rdp-day rdp-range_middle rdp-selected"
                 data-day="2020-06-18"
+                data-selected="true"
                 role="gridcell"
               >
                 <button
@@ -399,6 +405,7 @@ exports[`should match the snapshot 1`] = `
                 aria-selected="true"
                 class="rdp-day rdp-range_end rdp-selected"
                 data-day="2020-06-19"
+                data-selected="true"
                 role="gridcell"
               >
                 <button
@@ -566,7 +573,9 @@ exports[`should match the snapshot 1`] = `
                 aria-hidden="true"
                 class="rdp-day rdp-hidden rdp-outside"
                 data-day="2020-07-01"
+                data-hidden="true"
                 data-month="2020-07"
+                data-outside="true"
                 role="gridcell"
               >
                 <button
@@ -581,7 +590,9 @@ exports[`should match the snapshot 1`] = `
                 aria-hidden="true"
                 class="rdp-day rdp-hidden rdp-outside"
                 data-day="2020-07-02"
+                data-hidden="true"
                 data-month="2020-07"
+                data-outside="true"
                 role="gridcell"
               >
                 <button
@@ -596,7 +607,9 @@ exports[`should match the snapshot 1`] = `
                 aria-hidden="true"
                 class="rdp-day rdp-hidden rdp-outside"
                 data-day="2020-07-03"
+                data-hidden="true"
                 data-month="2020-07"
+                data-outside="true"
                 role="gridcell"
               >
                 <button
@@ -611,7 +624,9 @@ exports[`should match the snapshot 1`] = `
                 aria-hidden="true"
                 class="rdp-day rdp-hidden rdp-outside"
                 data-day="2020-07-04"
+                data-hidden="true"
                 data-month="2020-07"
+                data-outside="true"
                 role="gridcell"
               >
                 <button
@@ -774,7 +789,9 @@ exports[`when a day in the range is clicked when the day is clicked again when a
                 aria-hidden="true"
                 class="rdp-day rdp-hidden rdp-outside"
                 data-day="2020-05-31"
+                data-hidden="true"
                 data-month="2020-05"
+                data-outside="true"
                 role="gridcell"
               >
                 <button
@@ -1006,6 +1023,7 @@ exports[`when a day in the range is clicked when the day is clicked again when a
               <td
                 class="rdp-day rdp-focused"
                 data-day="2020-06-17"
+                data-focused="true"
                 role="gridcell"
               >
                 <button
@@ -1199,7 +1217,9 @@ exports[`when a day in the range is clicked when the day is clicked again when a
                 aria-hidden="true"
                 class="rdp-day rdp-hidden rdp-outside"
                 data-day="2020-07-01"
+                data-hidden="true"
                 data-month="2020-07"
+                data-outside="true"
                 role="gridcell"
               >
                 <button
@@ -1214,7 +1234,9 @@ exports[`when a day in the range is clicked when the day is clicked again when a
                 aria-hidden="true"
                 class="rdp-day rdp-hidden rdp-outside"
                 data-day="2020-07-02"
+                data-hidden="true"
                 data-month="2020-07"
+                data-outside="true"
                 role="gridcell"
               >
                 <button
@@ -1229,7 +1251,9 @@ exports[`when a day in the range is clicked when the day is clicked again when a
                 aria-hidden="true"
                 class="rdp-day rdp-hidden rdp-outside"
                 data-day="2020-07-03"
+                data-hidden="true"
                 data-month="2020-07"
+                data-outside="true"
                 role="gridcell"
               >
                 <button
@@ -1244,7 +1268,9 @@ exports[`when a day in the range is clicked when the day is clicked again when a
                 aria-hidden="true"
                 class="rdp-day rdp-hidden rdp-outside"
                 data-day="2020-07-04"
+                data-hidden="true"
                 data-month="2020-07"
+                data-outside="true"
                 role="gridcell"
               >
                 <button
diff --git a/examples/__snapshots__/StylingCssModules.test.tsx.snap b/examples/__snapshots__/StylingCssModules.test.tsx.snap
index cd9fc9d25..f4e612d26 100644
--- a/examples/__snapshots__/StylingCssModules.test.tsx.snap
+++ b/examples/__snapshots__/StylingCssModules.test.tsx.snap
@@ -137,7 +137,9 @@ exports[`should match the snapshot 1`] = `
                 aria-hidden="true"
                 class="rdp-day rdp-hidden rdp-outside"
                 data-day="2021-10-31"
+                data-hidden="true"
                 data-month="2021-10"
+                data-outside="true"
                 role="gridcell"
               >
                 <button
@@ -478,6 +480,7 @@ exports[`should match the snapshot 1`] = `
               <td
                 class="rdp-day rdp-today"
                 data-day="2021-11-25"
+                data-today="true"
                 role="gridcell"
               >
                 <button
@@ -562,7 +565,9 @@ exports[`should match the snapshot 1`] = `
                 aria-hidden="true"
                 class="rdp-day rdp-hidden rdp-outside"
                 data-day="2021-12-01"
+                data-hidden="true"
                 data-month="2021-12"
+                data-outside="true"
                 role="gridcell"
               >
                 <button
@@ -577,7 +582,9 @@ exports[`should match the snapshot 1`] = `
                 aria-hidden="true"
                 class="rdp-day rdp-hidden rdp-outside"
                 data-day="2021-12-02"
+                data-hidden="true"
                 data-month="2021-12"
+                data-outside="true"
                 role="gridcell"
               >
                 <button
@@ -592,7 +599,9 @@ exports[`should match the snapshot 1`] = `
                 aria-hidden="true"
                 class="rdp-day rdp-hidden rdp-outside"
                 data-day="2021-12-03"
+                data-hidden="true"
                 data-month="2021-12"
+                data-outside="true"
                 role="gridcell"
               >
                 <button
@@ -607,7 +616,9 @@ exports[`should match the snapshot 1`] = `
                 aria-hidden="true"
                 class="rdp-day rdp-hidden rdp-outside"
                 data-day="2021-12-04"
+                data-hidden="true"
                 data-month="2021-12"
+                data-outside="true"
                 role="gridcell"
               >
                 <button
diff --git a/src/DayPicker.tsx b/src/DayPicker.tsx
index 3c39dbe27..70e66c2f3 100644
--- a/src/DayPicker.tsx
+++ b/src/DayPicker.tsx
@@ -531,12 +531,6 @@ export function DayPicker(props: DayPickerProps) {
                                 )
                               : undefined;
 
-                            const dataAttributes = {
-                              "data-day": dateLib.format(date, "yyyy-MM-dd"),
-                              "data-month": day.outside
-                                ? dateLib.format(date, "yyyy-MM")
-                                : undefined
-                            };
                             return (
                               <components.Day
                                 key={`${dateLib.format(date, "yyyy-MM-dd")}_${dateLib.format(day.displayMonth, "yyyy-MM")}`}
@@ -548,7 +542,18 @@ export function DayPicker(props: DayPickerProps) {
                                 aria-hidden={modifiers.hidden || undefined}
                                 aria-selected={modifiers.selected || undefined}
                                 aria-label={ariaLabel}
-                                {...dataAttributes}
+                                data-day={dateLib.format(date, "yyyy-MM-dd")}
+                                data-month={
+                                  day.outside
+                                    ? dateLib.format(date, "yyyy-MM")
+                                    : undefined
+                                }
+                                data-selected={modifiers.selected || undefined}
+                                data-disabled={modifiers.disabled || undefined}
+                                data-hidden={modifiers.hidden || undefined}
+                                data-outside={day.outside || undefined}
+                                data-focused={modifiers.focused || undefined}
+                                data-today={modifiers.today || undefined}
                               >
                                 {isInteractive ? (
                                   <components.DayButton