Repository: gpbl/react-day-picker
Pull request #2178 (2024-06-01 13:06:08)

fix: add ChevronFlag for disabled chevrons


Patch:
diff --git a/examples/HideNavigation.tsx b/examples/HideNavigation.tsx
index 811846ae4..84cc6af3f 100644
--- a/examples/HideNavigation.tsx
+++ b/examples/HideNavigation.tsx
@@ -3,7 +3,5 @@ import React from "react";
 import { DayPicker } from "react-day-picker";
 
 export function HideNavigation() {
-  return (
-    <DayPicker hideNavigation disableNavigation captionLayout="dropdown" />
-  );
+  return <DayPicker hideNavigation captionLayout="dropdown" />;
 }
diff --git a/src/UI.ts b/src/UI.ts
index 459fcbdff..958ddcb3e 100644
--- a/src/UI.ts
+++ b/src/UI.ts
@@ -88,3 +88,9 @@ export enum CalendarFlag {
   /** Assigned when the calendar has multiple months. */
   hasMultipleMonths = "has_multiple_months"
 }
+
+/** Flags that can be applied to the {@link UI.Chevron} element. */
+export enum ChevronFlag {
+  /** Assigned when the week numbers are show. */
+  disabled = "chevron_disabled"
+}
diff --git a/src/components/Chevron.tsx b/src/components/Chevron.tsx
index 3eacd5d1a..372882124 100644
--- a/src/components/Chevron.tsx
+++ b/src/components/Chevron.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 
-import { UI } from "../UI";
+import { ChevronFlag, UI } from "../UI";
 import { useProps } from "../contexts/props";
 
 /**
@@ -16,11 +16,17 @@ export function Chevron(props: {
   orientation?: "up" | "down" | "left" | "right";
 }) {
   const { size = 24, orientation = "left" } = props;
-  const { classNames } = useProps();
+  const { classNames, disableNavigation } = useProps();
 
+  const svgClassName = [
+    classNames[UI.Chevron],
+    disableNavigation ? classNames[ChevronFlag.disabled] : ""
+  ]
+    .join(" ")
+    .trim();
   return (
     <svg
-      className={classNames[UI.Chevron]}
+      className={svgClassName}
       width={size}
       height={size}
       viewBox="0 0 24 24"
diff --git a/src/components/MonthsDropdown.tsx b/src/components/MonthsDropdown.tsx
index 87c367480..b5f96600c 100644
--- a/src/components/MonthsDropdown.tsx
+++ b/src/components/MonthsDropdown.tsx
@@ -42,9 +42,8 @@ export function MonthsDropdown(props: {
 
   return (
     <Dropdown
-      name="month"
       aria-label={labelMonthDropdown()}
-      aria-disabled={disableNavigation ? "true" : undefined}
+      disabled={Boolean(disableNavigation)}
       rootClassName={classNames[UI.MonthsDropdown]}
       options={dropdown.months}
       value={props.month.date.getMonth()}
diff --git a/src/components/YearsDropdown.tsx b/src/components/YearsDropdown.tsx
index 23dc29966..db66b2fe7 100644
--- a/src/components/YearsDropdown.tsx
+++ b/src/components/YearsDropdown.tsx
@@ -44,7 +44,7 @@ export function YearsDropdown(props: {
   return (
     <Dropdown
       aria-label={labelYearDropdown()}
-      aria-disabled={disableNavigation ? "true" : undefined}
+      disabled={Boolean(disableNavigation)}
       rootClassName={classNames[UI.YearsDropdown]}
       options={dropdown.years}
       value={props.month.date.getFullYear()}
diff --git a/src/helpers/getDefaultClassNames.ts b/src/helpers/getDefaultClassNames.ts
index 050ee7e6a..a2f4c7b26 100644
--- a/src/helpers/getDefaultClassNames.ts
+++ b/src/helpers/getDefaultClassNames.ts
@@ -1,4 +1,4 @@
-import { UI, DayModifier, CalendarFlag } from "../UI";
+import { UI, DayModifier, CalendarFlag, ChevronFlag } from "../UI";
 import type { ClassNames } from "../types";
 
 /**
@@ -19,6 +19,11 @@ export function getDefaultClassNames(): Required<ClassNames> {
       `rdp-${CalendarFlag[key as keyof typeof CalendarFlag]}`;
   }
 
+  for (const key in ChevronFlag) {
+    classNames[ChevronFlag[key as keyof typeof ChevronFlag]] =
+      `rdp-${ChevronFlag[key as keyof typeof ChevronFlag]}`;
+  }
+
   for (const key in DayModifier) {
     classNames[DayModifier[key as keyof typeof DayModifier]] =
       `rdp-${DayModifier[key as keyof typeof DayModifier]}`;
diff --git a/src/style.css b/src/style.css
index 2c61926bb..e1bfc9483 100644
--- a/src/style.css
+++ b/src/style.css
@@ -94,6 +94,9 @@
 
   /* The gap between the dropdown. */
   --rdp-dropdown-gap: 0.5rem;
+
+  /* The gap between the dropdown. */
+  --rdp-chevron-disabled-opacity: 0.5;
 }
 
 .rdp-button_next,
@@ -162,6 +165,10 @@
   fill: var(--rdp-accent-color);
 }
 
+.rdp-chevron_disabled {
+  opacity: var(--rdp-chevron-disabled-opacity);
+}
+
 .rdp-calendar[dir="rtl"] .rdp-chevron {
   transform: rotate(180deg);
 }
@@ -197,8 +204,6 @@
 }
 
 .rdp-dropdown[disabled] {
-  opacity: unset;
-  color: unset;
 }
 
 .rdp-dropdown_root {
diff --git a/src/style.css.d.ts b/src/style.css.d.ts
index 47b01bf71..acc1fe317 100644
--- a/src/style.css.d.ts
+++ b/src/style.css.d.ts
@@ -4,6 +4,7 @@ declare const styles: {
   readonly "rdp-calendar": string;
   readonly "rdp-caption_label": string;
   readonly "rdp-chevron": string;
+  readonly "rdp-chevron_disabled": string;
   readonly "rdp-day": string;
   readonly "rdp-disabled": string;
   readonly "rdp-dropdown": string;
diff --git a/src/style.module.css b/src/style.module.css
index 51070a08c..75f5eb88f 100644
--- a/src/style.module.css
+++ b/src/style.module.css
@@ -94,6 +94,9 @@
 
   /* The gap between the dropdown. */
   --rdp-dropdown-gap: 0.5rem;
+
+  /* The gap between the dropdown. */
+  --rdp-chevron-disabled-opacity: 0.5;
 }
 
 .button_next,
@@ -162,6 +165,10 @@
   fill: var(--rdp-accent-color);
 }
 
+.chevron_disabled {
+  opacity: var(--rdp-chevron-disabled-opacity);
+}
+
 .calendar[dir="rtl"] .chevron {
   transform: rotate(180deg);
 }
@@ -197,8 +204,6 @@
 }
 
 .dropdown[disabled] {
-  opacity: unset;
-  color: unset;
 }
 
 .dropdown_root {
diff --git a/src/style.module.css.d.ts b/src/style.module.css.d.ts
index cf27a447d..61bee380e 100644
--- a/src/style.module.css.d.ts
+++ b/src/style.module.css.d.ts
@@ -4,6 +4,7 @@ declare const styles: {
   readonly "calendar": string;
   readonly "caption_label": string;
   readonly "chevron": string;
+  readonly "chevron_disabled": string;
   readonly "day": string;
   readonly "disabled": string;
   readonly "dropdown": string;
diff --git a/src/types.ts b/src/types.ts
index fa999869b..f15625917 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -10,7 +10,7 @@ import type {
 
 import type { Locale } from "date-fns";
 
-import { UI, DayModifier, CalendarFlag } from "./UI";
+import { UI, DayModifier, CalendarFlag, ChevronFlag } from "./UI";
 import { CalendarDay } from "./classes";
 import * as components from "./components/custom-components";
 import {
@@ -579,6 +579,8 @@ export type ClassNames = {
   [state in DayModifier]: string;
 } & {
   [flag in CalendarFlag]: string;
+} & {
+  [flag in ChevronFlag]: string;
 };
 
 /** The modifiers that are internally used by DayPicker. */


Test patch:
diff --git a/src/helpers/getDefaultClassNames.test.ts b/src/helpers/getDefaultClassNames.test.ts
index fb1f1376c..ddb04f09c 100644
--- a/src/helpers/getDefaultClassNames.test.ts
+++ b/src/helpers/getDefaultClassNames.test.ts
@@ -7,6 +7,7 @@ test("should return the default classnames", () => {
     calendar: "rdp-calendar",
     caption_label: "rdp-caption_label",
     chevron: "rdp-chevron",
+    chevron_disabled: "rdp-chevron_disabled",
     day: "rdp-day",
     disabled: "rdp-disabled",
     dropdown_nav: "rdp-dropdown_nav",