🐛 Bug - [Datepicker]: Type 'Dispatch<SetStateAction<Date>>' is not assignable to type '(day: Date | undefined) => void'.

[cam-vanorman]

Forma 36 bug report

Summary

Unable to render <Datepicker /> component in React/ReactDOM 18.2.0. I receive the following error:

 Type 'Dispatch<SetStateAction<Date>>' is not assignable to type '(day: Date | undefined) => void'.
  Types of parameters 'value' and 'day' are incompatible.
    Type 'Date | undefined' is not assignable to type 'SetStateAction<Date>'.
      Type 'undefined' is not assignable to type 'SetStateAction<Date>'.

33                     onSelect={setSelectedDay}
                       ~~~~~~~~

  node_modules/@contentful/f36-datepicker/dist/index.d.ts:11:5
    11     onSelect: (day: Date | undefined) => void;
           ~~~~~~~~
    The expected type comes from property 'onSelect' which is declared here on type 'IntrinsicAttributes & CommonProps & { onSelect: (day: Date | undefined) => void; dateFormat?: string | undefined; defaultIsOpen?: boolean | undefined; inputProps?: Partial<...> | undefined; popoverProps?: Partial<...> | undefined; } & Omit<...>'

Here's a working example within the playground (I'm assuming the playground is using React 17 or below):
https://f36.contentful.com/playground?code=N4Igxg9gJgpiBcICWBbADhATgFwATFwFcBnGAZWwENsZcBfXAM0whVwHJMZKxt2BuADoA7Eagw58I3DNwAVGAA9sASWFpC2ADTTZAEWow0SMAGsYmHcIbNWHAAKRhNZ40IAbAPSMAzADYAWkh0CGEYZ2IBETFnC0YeWgVlNQ1sAAUWNGIpYVkOSkwkSgD3SgAjGHd2eFxibELhAHMhXNliJAAvGAB+GvZiFEp3KtwAHw4UGCgkQhR2MaJhWEYkMKgWvIA3IcIYGrqG5t0ZQcUAGXDG7AALXtxhWYrMDdlQgGFryia93AAKNAKlBQdy+AE8AJS4AC8AD5cJsIEh1iI6NFhE46rgAGJISpQOSgtDkADuSGwYGuFmhf2OTFx7nxhJ+B1WjSseQIADpuTRkupNBkIFl6DU0gVsEV3AAeJKqfnpTLEGEiSGwnJ5Yik8nXP4rPEEomQ4C0vJgSikDi8vjwE15WRcbCETC5X4ypRy1L4bmcq0pAWKhieGHgl523DLSgebA21phs0W9hQQzVXC2uOhTFJ0HUsLE3AGGi-ENpu0YvAEADa7G27l27AAujUa7sAEowFAQTZTLS4b00dA4vGC4UMKG4X3y4fEUNh2Rl3AV0juGC8KYGUE90jYMiVFc0KDr+vUkjkKiF3P5wxF4uiWOzmQOp0ukv3qUFowmcyYVN3+-3pM0FiWCDNgULsGcEHhlAuCgrBoLsC+f4yEue5TFCwAoauB6UKCqK-khdqhDuy68OhW7Eah2G4YhSEPCgTwAPKMAAsqENzEOhABMeEEXaQY0bgN55HhdAtCISgSHgEZRti9KMkSZBahSFj8CAdBAA

Environment

Browser: Version 130.0.6723.69 (Official Build) (arm64)
OS: MacOS 14.6.1 (23G93)

Steps to reproduce

1. Create a new contentful-app (through the interactive CLI) using latest forma36 package versions and React/ReactDOM 18.2.0 and Vite to build
2. Copy/paste the code from the Playground link to a new .tsx component file.
3. Run npm run build, receive error.

Expected results

Datepicker component should render without issue in latest stable React. All other Form36 components are rendering correctly in latest React but I'm unable to use useState with setSelectedDay on onSelect prop for the Datepicker component.

Actual results

Datepicker component errors stating the type of the prop value is incompatible with the component.

[DavidSanwald]

Hello @cam-vanorman ,
I think it works in the playground because the playground only compiles but doesn't do any typechecking.
As an example check the following:
https://f36.contentful.com/playground?code=N4Igxg9gJgpiBcICWBbADhATgFwATFwFcBnGAZWwENsZcBfXAM0whVwHJMZKxt2BuADoA7Eagw58I3DNwAVGAA9sASWFpC2ADTTZAEWow0SMAGsYmHcIbNWHAAKRhNZ40IAbAPSMAzADYAWkh0CGEYZ2IBETFnC0YeWgVlNQ1sAAUWNGIpYVkOSkwkSgD3SgAjGHd2eFxibELhAHMhXNliJAAvGAB+GvZiFEp3KtwAHw4UGCgkQhR2MaJhWEYkMKgWvIA3IcIYGrqG5t0ZQcUAGXDG7AALXtxhWYrMDdlQgGFryia93AAKNAKlBQdy+AE8AJS4AC8AD5cJsIEh1iI6NFhE46rgAGJISpQOSgtDkADuSGwYGuFmhf2OTFx7nxhJ+B1WjSseQIADpuTRkupNBkIFl6DU0gVsEV3AAeJKqfnpTLEGEiSGwnJ5Yik8nXP4rPEEong4C0vJgSikDi8vjwE15WRcbCETC5X4ypRy1L4bmcq0pAWKhieGHgl523DLSgebA21phs0W9hQQzVXC2uOhTFJ0HUsLE3AGGi-ENpu0YvAEADa7G27l27AAujUa7sAEowFAQTZTLS4b00dA4vGC4UMKG4X3y4fEUNh2Rl3AV0juGC8KYGUE90jYMiVFc0KDr+vUkjkKiF3P5wxF4ux2cyeeMCAQfb1VnUwQgIk0TAfkumjN4GUBTwGUT7Ll81KPhAf72jAjrOjSt53jBYZSgWRgmOYmCpkhd6zkmNBYlggzYFC7BnBR4ZQLgoK0aC7AoXhS57lMULAMxq4HpQoKorheF2qEO7LrwbFbkJLFcTxjF3g8KBPAA8owACyoQ3MQbEAEy8fxYZBoxN55LxdAtCISgSHgEZRti9KMkSZBahSFj8CAdBAA

The Type of onSelect is

  onSelect: (day: Date | undefined) => void;

You could do

function App() {
  const [selectedDay, setSelectedDay] = useState<Date>();

  return (
    <>
      <Datepicker
        dateFormat="LLL dd yyyy"
        selected={selectedDay}
        onSelect={selectedDay}
        numberOfMonths={2}
      />
    </>
  );
}

this way the Type of the state is Date | undefined and Typescript will force you later to handle the undefined case.

[cam-vanorman]

Excellent, thank you so much for the clarification. That patched the issue quickly, appreciate your help!

[DavidSanwald]

Sure, you're welcome.
I know how annoying it sometimes feels to be stuck with something.
It's also different in the DatePicker's storybook stories:

forma-36/packages/components/datepicker/stories/Datepicker.stories.tsx

Lines 34 to 45 in 91c2d99

	export const Basic: Story<DatepickerProps> = (args) => {
	const [selectedDay, setSelectedDay] = useState<Date>(testDate);
	return (
	<Datepicker
	{...args}
	selected={selectedDay}
	onSelect={setSelectedDay}
	defaultIsOpen={true}
	/>
	);
	};

That's possible because the type checking here is less strict as the one you've been using.

[cam-vanorman]

Okay, that makes sense, thanks again for the insight! I'll close this issue, hope you have a great rest of your week!