ENG-1894 [Feature Request] Mitigate need for users to keep @internationalized/date version in sync with NextUI

I also have this issue going from 3.6.0 -> 3.7.0 on @internationalized/date package.
But I do not have any issues using this packages or any opinion on how to import it.
The only thing I would not like is to get to far behind on versions, like keeping my packages up to date 😅

will export those packages in next minor release

After migration, I got the error:

Type 'DateRangePicker' is not assignable to type 'RangeValue<DateValue>'.
  Types of property 'start' are incompatible.
    Type 'CalendarDate' is not assignable to type 'DateValue'.
      Type 'CalendarDate' is not assignable to type 'ZonedDateTime'.
        Property '#private' in type 'CalendarDate' refers to a different member that cannot be accessed from within type 'ZonedDateTime'.

Here is my code:

import { type CalendarDate, parseDate } from "@internationalized/date";

export const dateRangeAtom = atom<[Date, Date]>([
  new Date(new Date().setFullYear(new Date().getFullYear() - 2)),
  new Date(),
]);

type DateRangePicker = {
  start: CalendarDate;
  end: CalendarDate;
};

function dateValueToDate(dateValue: CalendarDate): Date {
  return new Date(dateValue.year, dateValue.month - 1, dateValue.day);
}

export const dateRangePickerAtom = atom<
  DateRangePicker,
  DateRangePicker[],
  void
>(
  (get) => {
    const [startDate, endDate] = get(dateRangeAtom);
    return {
      start: parseDate(format(startDate, "yyyy-MM-dd")),
      end: parseDate(format(endDate, "yyyy-MM-dd")),
    };
  },
  (_get, set, newVal) => {
    set(dateRangeAtom, [
      dateValueToDate(newVal.start),
      dateValueToDate(newVal.end),
    ]);
  },
);

// in React
    <DateRangePicker
      label="Pick Date Range"
      className="w-auto max-w-xs"
      value={dateRangePicker}
      onChange={setDateRangePicker}
    />

// type error from value={dateRangePicker}

@mengxi-ream are you using @internationalized/[email protected]?

@mengxi-ream are you using @internationalized/[email protected]?

I'm using 3.7.0, but version ^3.5.5 also has the same error

@mengxi-ream are you using @internationalized/[email protected]?

fixed when I changed the version to 3.6.0

@mengxi-ream Internally we are using 3.6.0. Please use the fixed version at this moment. In the future, we will export the package from our side so that users can use the exact same version to avoid incompatible issues.

I also have the same type of issue with the "maxValue" parameter:
maxValue={today(getLocalTimeZone())}

Error: Type 'CalendarDate' is not assignable to type 'DateValue | null | undefined'.

I am using the following versions:
"@heroui/date-picker": "^2.3.10",
"@heroui/react": "^2.6.14",
"@heroui/system": "^2.4.7",
"@heroui/theme": "^2.4.6",
"@internationalized/date": "3.6.0"

I also have the same type of issue with the "maxValue" parameter: maxValue={today(getLocalTimeZone())}

Error: Type 'CalendarDate' is not assignable to type 'DateValue | null | undefined'.

I am using the following versions: "@heroui/date-picker": "^2.3.10", "@heroui/react": "^2.6.14", "@heroui/system": "^2.4.7", "@heroui/theme": "^2.4.6", "@internationalized/date": "3.6.0"

After fighting with this issue for the better part of a day I was only able to validate two solutions for this issue both have their downsides and hopefully the HeroUI team will have a permanent fix for this issue from their side sooner than later.

I can confirm this minVal issue is effecting Calendar, Date Picker, Date Range Picker, and Time Input. My hunch is the other date/time components are also effected.

Solution 1:
Define override/resolution in your package.json file. Why i personally don't like this is that without exhaustive testing I'm not sure if this will break other dependencies in my app.

Solution 2:
In your component:

import { Calendar, type DateValue } from '@heroui/react'
import {
  type CalendarDate,
  getLocalTimeZone,
  today,
} from '@internationalized/date'

export interface DateSelectProps {
  value: CalendarDate | null
  children?: React.ReactNode
  onChange?: (date: CalendarDate) => void
}

export default function MyDateSelect({ value, children, onChange }: Readonly<DateSelectProps>) {
  const zonedToday = today(getLocalTimeZone())
  const fakeDateValue = {
    year: zonedToday.year,
    month: zonedToday.month,
    day: zonedToday.day,
  } as DateValue

  return (
    <Calendar
      aria-label='Date Picker'
      value={value}
      onChange={handleDateChange}
      minValue={fakeDateValue}
    />
  )
}

I don't love the bloated code in #2 but I like that the solution is isolated to to the problem area and not a sweeping global change.

And guys, I love what your doing with NextUI/HeroUI but but as a paying Pro member this level of a bug should have never made it into a stable release branch. Hopefully we can add a bit more testing around this going forward.