[BUG] - Type 'DateValue' is not assignable to type 'DateValue | null | undefined'

[PikabobAlex]

NextUI Version

2.6.2

Describe the bug

This is a controlled DatePicker

  const [date_of_birth, setDateOfBirth] = useState<DateValue>(
    parseDate(dayjs().subtract(18, "years").format("YYYY-MM-DD"))
  );

<DatePicker
 label="Date of Birth"
 name="date_of_birth"
 className="col-span-12 group-data-[slot=input-wrapper]:border-1"
 minValue={parseDate(dayjs().subtract(100, "years").format("YYYY-MM-DD"))}
 maxValue={parseDate(dayjs().subtract(18, "years").format("YYYY-MM-DD"))}
 onChange={setDateOfBirth}
 value={date_of_birth}
 aria-label="Date of Birth"
 isInvalid={!!errors.date_of_birth}
 errorMessage={errors.date_of_birth}
/>

But there is an error on the line value={date_of_birth}

Error:

Type 'DateValue' is not assignable to type 'DateValue | null | undefined'.
  Type 'ZonedDateTime' is not assignable to type 'DateValue | null | undefined'.
    Type 'import("E:/Github/b2-ming-tak-web/node_modules/.pnpm/@[email protected]/node_modules/@internationalized/date/dist/types").ZonedDateTime' is not assignable to type 'import("E:/Github/b2-ming-tak-web/node_modules/.pnpm/@[email protected]/node_modules/@internationalized/date/dist/types").ZonedDateTime'.
      Property '#private' in type 'ZonedDateTime' refers to a different member that cannot be accessed from within type 'ZonedDateTime'.ts(2322)
inputs.d.ts(67, 3): The expected type comes from property 'value' which is declared here on type 'IntrinsicAttributes & DatePickerProps'

The error was also causing an error with the same message during the build of my project.

So my temporary fix was to put a @ts-ignore above it.

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

DateValue should be able to match with DateValue | null | undefined ? Or did I missed something?

Expected behavior

It shouldn't be causing an error, right? I followed the example from the documentation. If I was wrong, please let me know what can I do.

Screenshots or Videos

No response

Operating System Version

Windows 11

Browser

Chrome

[linear]

ENG-1656 [BUG] - Type 'DateValue' is not assignable to type 'DateValue | null | undefined'

[AnYiEE]

Because NextUI and the upstream packages use different versions of dependencies and specify unique versions. The dependency @react-types/shared also exists in different versions, which can lead to similar issues. A temporary solution is to add the following content to package.json (assuming pnpm is used as the package manager):

"pnpm": {
	"overrides": {
		"@internationalized/date@^3.5.6": "^3.6.0",
		"@react-types/shared@^3.23.0": "^3.26.0"
	}
}

There are still some duplicate packages with different versions, and their versions can also be specified. The complete overrides is as follows:

"pnpm": {
	"overrides": {
		"@internationalized/date@^3.5.6": "^3.6.0",
		"@react-aria/focus@^3.18.4": "^3.19.0",
		"@react-aria/form@^3.0.8": "^3.0.11",
		"@react-aria/i18n@^3.12.3": "^3.12.4",
		"@react-aria/label@^3.7.12": "^3.7.13",
		"@react-aria/link@^3.7.6": "^3.7.7",
		"@react-aria/listbox@^3.13.5": "^3.13.6",
		"@react-aria/menu@^3.15.5": "^3.16.0",
		"@react-aria/overlays@^3.23.4": "^3.24.0",
		"@react-aria/selection@^3.20.1": "^3.21.0",
		"@react-aria/ssr@^3.9.6": "^3.9.7",
		"@react-aria/textfield@^3.14.10": "^3.15.0",
		"@react-aria/utils@^3.24.1": "^3.26.0",
		"@react-aria/visually-hidden@^3.8.17": "^3.8.18",
		"@react-stately/collections@^3.11.0": "^3.12.0",
		"@react-stately/form@^3.0.5": "^3.1.0",
		"@react-stately/list@^3.11.0": "^3.11.1",
		"@react-stately/menu@^3.8.3": "^3.9.0",
		"@react-stately/overlays@^3.6.11": "^3.6.12",
		"@react-stately/toggle@^3.7.8": "^3.8.0",
		"@react-stately/tree@^3.8.5": "^3.8.6",
		"@react-stately/utils@^3.10.1": "^3.10.5",
		"@react-types/button@^3.10.0": "^3.10.1",
		"@react-types/calendar@^3.4.10": "^3.5.0",
		"@react-types/checkbox@^3.8.4": "^3.9.0",
		"@react-types/grid@^3.2.9": "^3.2.10",
		"@react-types/link@^3.5.8": "^3.5.9",
		"@react-types/menu@^3.9.12": "^3.9.13",
		"@react-types/overlays@^3.8.10": "^3.8.11",
		"@react-types/select@^3.9.7": "^3.9.8",
		"@react-types/shared@^3.23.0": "^3.26.0",
		"@react-types/textfield@^3.9.3": "^3.10.0"
	}
}