[Bug]: Typescript types incomplete for DatePicker component

[ychavoya]

Package

@carbon/react

Browser

No response

Package version

v1.53.1

React version

v18.2.0

Description

Some of the typings for the DatePicker component that are passed directly to flatpickr are incomplete (missing some of the possible types), meaning that Typescript can add a warning/error to a provided prop even though the value is valid to flatpickr.

enable, disable

I found this with the enable and disable props. In @carbon/react they are of type string[]:

carbon/packages/react/src/components/DatePicker/DatePicker.tsx

Line 251 in c90b401

enable?: string[];

While in flatpickr they are of type DateLimit<DateOption>[], which is equivalent to (Date | string | number | { from: Date | string | number, to: Date | string | number } | ((date: Date) => boolean))[]:

https://github.com/flatpickr/flatpickr/blob/548330e6e18871d6ca1ca78746c0e89cb12a0303/src/types/options.ts#L124

minDate, maxDate

Also minDate and maxDate are missing the Date type since they are of type DateOption (Date | string | number) in flatpickr

https://github.com/flatpickr/flatpickr/blob/548330e6e18871d6ca1ca78746c0e89cb12a0303/src/types/options.ts#L156

And just string | number in @carbon/react

carbon/packages/react/src/components/DatePicker/DatePicker.tsx

Line 345 in c90b401

maxDate?: string | number;

Reproduction/example

https://stackblitz.com/edit/vitejs-vite-81ltbd?file=src%2Fmain.tsx

Steps to reproduce

1. Run a React Typescript project with @carbon/react
2. Add a DatePicker with DatePickerInput
3. Add one of the specified props to DatePicker with a Date value or one of the other unsupported value types ( eg: enable={[(date) => ![0, 6].includes(date.getDay())]} or minDate={new Date()})
4. Run tsc --noemit
5. You should receive an error/warning (depends on configuration) from Typescript

src/main.tsx:11:18 - error TS2322: Type '(date: any) => boolean' is not assignable to type 'string'.

11         enable={[(date) => ![0, 6].includes(date.getDay())]}
                    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

src/main.tsx:12:9 - error TS2322: Type 'Date' is not assignable to type 'string | number | undefined'.

12         minDate={new Date()}
           ~~~~~~~

Suggested Severity

Severity 4 = Unrelated to a user task, has a workaround or does not need a workaround.

Application/PAL

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems