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:

primereact/components/lib/calendar/calendar.d.ts

Lines 972 to 1041 in 686262f

	/**
	* Defines valid properties in single Calendar component.
	* @group Properties
	*/
	interface CalendarPropsSingle extends CalendarBaseProps {
	/**
	* Specifies the selection mode either "single", "range", or "multiple";
	* @defaultValue single
	*/
	selectionMode?: 'single' | undefined;
	/**
	* Value of the component.
	* @defaultValue null
	*/
	value?: Nullable<Date>;
	/**
	* Callback to invoke when value changes.
	* @param { FormEvent<Date>} event - Custom change event
	*/
	onChange?(event: FormEvent<Date>): void;
	}
	/**
	* Defines valid properties in range Calendar component.
	* @group Properties
	*/
	interface CalendarPropsRange extends CalendarBaseProps {
	/**
	* Specifies the selection mode either "single", "range", or "multiple";
	* @defaultValue single
	*/
	selectionMode: 'range';
	/**
	* Value of the component.
	* @defaultValue null
	*/
	value?: Nullable<(Date | null)[]>;
	/**
	* Callback to invoke when value changes.
	* @param { FormEvent<(Date | null)[]>} event - Custom change event
	*/
	onChange?(event: FormEvent<(Date | null)[]>): void;
	}
	/**
	* Defines valid properties in multiple Calendar component.
	* @group Properties
	*/
	interface CalendarPropsMultiple extends CalendarBaseProps {
	/**
	* Specifies the selection mode either "single", "range", or "multiple";
	* @defaultValue single
	*/
	selectionMode: 'multiple';
	/**
	* Value of the component.
	* @defaultValue null
	*/
	value?: Nullable<Date[]>;
	/**
	* Callback to invoke when value changes.
	* @param {FormEvent<Date[]>} event - Custom change event
	*/
	onChange?(event: FormEvent<Date[]>): void;
	}
	/**
	* Defines valid properties in Calendar component.
	* @group Properties
	*/
	export type CalendarProps = CalendarPropsRange | CalendarPropsMultiple | CalendarPropsSingle;

[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:

primereact/components/lib/calendar/calendar.d.ts

Lines 972 to 1041 in 686262f

	/**
	* Defines valid properties in single Calendar component.
	* @group Properties
	*/
	interface CalendarPropsSingle extends CalendarBaseProps {
	/**
	* Specifies the selection mode either "single", "range", or "multiple";
	* @defaultValue single
	*/
	selectionMode?: 'single' | undefined;
	/**
	* Value of the component.
	* @defaultValue null
	*/
	value?: Nullable<Date>;
	/**
	* Callback to invoke when value changes.
	* @param { FormEvent<Date>} event - Custom change event
	*/
	onChange?(event: FormEvent<Date>): void;
	}
	/**
	* Defines valid properties in range Calendar component.
	* @group Properties
	*/
	interface CalendarPropsRange extends CalendarBaseProps {
	/**
	* Specifies the selection mode either "single", "range", or "multiple";
	* @defaultValue single
	*/
	selectionMode: 'range';
	/**
	* Value of the component.
	* @defaultValue null
	*/
	value?: Nullable<(Date | null)[]>;
	/**
	* Callback to invoke when value changes.
	* @param { FormEvent<(Date | null)[]>} event - Custom change event
	*/
	onChange?(event: FormEvent<(Date | null)[]>): void;
	}
	/**
	* Defines valid properties in multiple Calendar component.
	* @group Properties
	*/
	interface CalendarPropsMultiple extends CalendarBaseProps {
	/**
	* Specifies the selection mode either "single", "range", or "multiple";
	* @defaultValue single
	*/
	selectionMode: 'multiple';
	/**
	* Value of the component.
	* @defaultValue null
	*/
	value?: Nullable<Date[]>;
	/**
	* Callback to invoke when value changes.
	* @param {FormEvent<Date[]>} event - Custom change event
	*/
	onChange?(event: FormEvent<Date[]>): void;
	}
	/**
	* Defines valid properties in Calendar component.
	* @group Properties
	*/
	export type CalendarProps = CalendarPropsRange | CalendarPropsMultiple | CalendarPropsSingle;

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.