Types: allow undefined in ClassNames values (classNames breaks under exactOptionalPropertyTypes)
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/react10.0.1(corereact-day-picker10.0.1)- TypeScript with
"exactOptionalPropertyTypes": true
Current types
// 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
// 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:
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