Baike.dev
All toolsAI codingTrendingOpen sourceNewsSubmit
Log in
Back to tool/Back to issues
#3015·react-day-picker

Types: allow undefined in ClassNames values (classNames breaks under exactOptionalPropertyTypes)

Author: thevuongCreated Sep 9, 2026Updated Sep 10, 2026

Summary

ClassNames types every slot as a required string, so the classNames prop (classNames?: Partial<ClassNames>) becomes { [key]?: string }. Under exactOptionalPropertyTypes: true, a value of type string | undefined — which is what most class-name builders return (clsx, cva, tailwind-variants, and similar) — is not assignable to an optional-string property, so classNames fails to type-check with TS2375.

The sibling Styles type already allows undefined in its values; ClassNames does not. Aligning the two would fix the incompatibility and remove the inconsistency.

Version

  • @daypicker/react 10.0.1 (core react-day-picker 10.0.1)
  • TypeScript with "exactOptionalPropertyTypes": true

Current types

typescript
// react-day-picker/dist/esm/types/shared.d.ts
export type ClassNames = {
  [key in UI | SelectionState | DayFlag | Animation]: string;
};

export type Styles = {
  [key in UI | SelectionState | DayFlag]: CSSProperties | undefined; // ← already allows undefined
};

// react-day-picker/dist/esm/types/props.d.ts
classNames?: Partial<ClassNames>;

Reproduction

typescript
// tsconfig.json → "compilerOptions": { "exactOptionalPropertyTypes": true }
import { DayPicker } from "@daypicker/react";

// what clsx()/cva()/tailwind-variants and similar helpers return:
const maybeClass: string | undefined = Math.random() > 0.5 ? "text-red-500" : undefined;

export function Example() {
  return <DayPicker classNames={{ root: maybeClass }} />;
  // TS2375: Type '{ root: string | undefined }' is not assignable to type
  // 'Partial<ClassNames>' with 'exactOptionalPropertyTypes: true'.
}

Without exactOptionalPropertyTypes, ?: string widens to string | undefined, so this compiles. With it enabled, an optional ?: string means "absent or a string, never an explicit undefined", so a string | undefined value is rejected.

Proposed change

Allow undefined in the ClassNames values, mirroring Styles:

typescript
export type ClassNames = {
  [key in UI | SelectionState | DayFlag | Animation]: string | undefined;
};

This is a types-only change (no runtime impact) and makes classNames work under exactOptionalPropertyTypes and with the string | undefined values that class-name utilities commonly produce.

Source: gpbl/react-day-picker

View original on GitHubView discussion on GitHub