fix: add ChevronFlag for disabled chevrons (#2178)

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" />;
 }

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"
+}

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"

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()}

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()}

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",

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]}`;

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 {

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;

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 {

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;

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. */