Calendar: Prop typings are not working correctly

[JosuerBague]

Describe the bug

The selectionMode prop shows a TS error regardless of value passed: 'single' | 'multiple' | 'range'.

Reproducer

https://stackblitz.com/edit/vitejs-vite-1hvojf?file=src%2FApp.tsx

PrimeReact version

10.6.5

React version

18.x

Language

TypeScript

Build / Runtime

Vite

Browser(s)

No response

Steps to reproduce the behavior

I'm creating a custom wrapper around the Calendar component, like so:

import { Calendar as PRCalendar, CalendarProps } from 'primereact/calendar';

type Omissions = 'disabled' | 'invalid' | 'required' | 'visible';

type Properties = {
  isDisabled?: boolean;
  isInvalid?: boolean;
  isRequired?: boolean;
  isVisible?:boolean;
} & Omit<CalendarProps, Omissions>

const Calendar: React.FC<Properties> = ({
  isDisabled,
  isInvalid,
  isRequired,
  isVisible,
 ...props,
}) = (
   <PRCalendar
      disabled={isDisabled}
      invalid={isInvalid}
      required={isRequired}
      visible={isVisible}
      {...props}
   />
)

I get the error:

Even when I just use the Component without creating a wrapper, passing in selectionMode value shows an error:

const Calendar: React.FC<CalendarProps> = ({ ...props }) => (
    <PRCalendar
        selectionMode="multiple"
        {...props}
    />
);

Expected behavior

Calendar should accept values for selectionMode prop.

[Rekl0w]

Can you provide a stackblitz link please ?

[JosuerBague]

Can you provide a stackblitz link please ?

https://stackblitz.com/edit/vitejs-vite-1hvojf?file=src%2FApp.tsx

[melloware]

OK so it works for me in TypeScript here: https://stackblitz.com/edit/kd3h15?file=src%2FApp.tsx

i think the issue is the Calendar detects the value and sets the SelectionMode based on whether you pass it a single Date, a Date[] array, etc.

See here: https://github.com/primefaces/primereact/blob/686262f375b41cf6cecc30e475496619427ac2fb/components/lib/calendar/calendar.d.ts#L972-L1041

[JosuerBague]

OK so it works for me in TypeScript here: https://stackblitz.com/edit/kd3h15?file=src%2FApp.tsx

i think the issue is the Calendar detects the value and sets the SelectionMode based on whether you pass it a single Date, a Date[] array, etc.

See here:

https://github.com/primefaces/primereact/blob/686262f375b41cf6cecc30e475496619427ac2fb/components/lib/calendar/calendar.d.ts#L972-L1041

The issue starts when I try to wrap the Calendar with a wrapping component. https://stackblitz.com/edit/kd3h15-yfszte?file=src%2FApp.tsx

I tried, passing it a value and an onChange to see if it works, but the typing error still persists. Strange behavour, in theory it should work the same whether the component gets wrapper or not, right?

[melloware]

It should it might be some TypeScript weirdness or magic that I don't know.