Calendar: TypeScript Definitions do not match with actual PT props

[vaelu]

Describe the bug

We noticed, that some PT props have to be written lowercase instead of camelCase that they work.

Specifically in calendar component:

• previousButton (works only when written as previousbutton)
• nextButton (works only when written as nextbutton)
• tableHeaderCell (works only when written as tableheadercell)
• weekDay (works only when written as weekday)
• dayLabel (works only when written as daylabel)
• monthPicker (works only when written as monthpicker)
• yearPicker (works only when written as yearpicker)
• timePicker (works only when written as timepicker)
• separatorContainer (works only when written as separatorcontainer)
• hourPicker (works only when written as hourpicker)
• minutePicker (works only when written as minutepicker)
• ampmPicker (works only when written as ampmpicker)
• incrementButton (works only when written as incrementbutton)
• decrementButton (works only when written as decrementbutton)
• groupContainer (works only when written as groupcontainer)

In the passthrough provided directly in the repo (https://github.com/primefaces/primereact/blob/master/components/lib/passthrough/tailwind/index.js), the properties are the "correct" way (so that they work, but it's wrong for TypeScript), but in the docs not.

Reproducer

No response

PrimeReact version

10.5.1

React version

18.x

Language

TypeScript

Build / Runtime

Vite

Browser(s)

No response

Steps to reproduce the behavior

No response

Expected behavior

No response

[melloware]

PR submitted. I had fixed this before and another commit later accidentally overwrote these changes

[vaelu]

Thanks. But are you sure that this will fix the problem? You just changed the default PT to match the typescript definitions, but the main problem is that the PTs I mentioned above are not respected by the calendar component, when written in the correct typescript-case.

[melloware]

they should be. lets take the real code

Calendar Typescript is previousButton

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

Line 71 in 2e950d4

previousButton?: CalendarPassThroughType<React.HTMLAttributes<HTMLButtonElement>>;

Calendar PassThrough PTM is previousButton

primereact/components/lib/calendar/Calendar.js

Lines 3054 to 3061 in 2e950d4

	const previousButtonProps = mergeProps(
	{
	type: 'button',
	className: cx('previousButton'),
	'aria-label': previousButtonLabel,
	...navigatorProps
	},
	ptm('previousButton')

Finally now that Tailwind index will match that case and instead of being previousbutton is previousButton right?

[melloware]

See this working example of previousButton https://stackblitz.com/edit/s2zggm?file=src%2FApp.jsx

[vaelu]

Possible, because we merge the default props with our custom ones. Will try when the new version is out. Or can I test it somehow beforehand?

[melloware]

you can probably do a local build with npm run build:lib ?

[vaelu]

Thanks. I added a comment to the PR.

However, I still don't understand the following behaviour:
For your understanding, we merge the default PT from PrimeReact with our own (not with tailwind-merge, just merging the two objects) like this:

import { Calendar as PCalendar, type CalendarProps as PCalendarProps } from "primereact/calendar";
import TailwindDefaultPT from "primereact/passthrough/tailwind";
import InputDatePT from "./input-date-pt";

export const InputDate = (inputDateProps: PCalendarProps) => {
  const props = { ...inputDateProps };
  return <PCalendar unstyled pt={{ ...TailwindDefaultPT.calendar, ...InputDatePT }} {...props} />;
};

As you said, the component should take previousButton (camel-case):

primereact/components/lib/calendar/Calendar.js

Lines 3054 to 3061 in 2e950d4

	const previousButtonProps = mergeProps(
	{
	type: 'button',
	className: cx('previousButton'),
	'aria-label': previousButtonLabel,
	...navigatorProps
	},
	ptm('previousButton')

However, when a previousbutton key exists (like it did before because the default PT was wrong), the component will take this instead of previousButton.

[melloware]

So from my PR and looking at the code there is no lowercase previousbutton anywhere anymore so where is it coming from?

Can you put together a Stack Blitz showing the issue?