Colocate variables

• remove constants.ts and colocate all variables directly to the places of use
• simplify all generative functions for calendars, years, months and time
• move several files from const to var + functions

Array creation performance

Change logic for array creation for calendars, time, month and years.
It should work 2 times faster and make UX much better.

External documentation

• updated README.md with new documentation

Now documentation lives on rehookify.com/datepicker

DevEx improments

In order to simplify setup and CONTRIBUTION to the library we moved to the pnpm with workspace.
It gives us such benefits:

• single install, now you need to run pnpm i in the root folder
• workspace package linking, examples app will get the latest version of the datepicker automatically
• consistent e2e, because of the previous point we can test over the latest lib version in CI
• the simplicity of running the app for development pnpm dev in the root folder will run dev server and build lib in watch mode

All changes was reflected in the CONTRIBUTING.md

Fix month and year button behaviour with min/maxDate

Month and Year buttons now check only if the next offset will be more than the corresponding entity.
It will allow you to see all available dates at the closest edges to min/maxDate
If maxDate is 5 of November then November will be available in the Month picker

Time performance optimization

• 🗑️ removed automatic use of getLocaleTimeString, now you need to specify useLocale in the time config (getLocaleTimeString works slowly see: #32)
• 🆕 add 24 -> 12 hours converter
• 🛠️ fix docs links
• ⬆️ update all dependencies

Docs

• remove old unused hooks
• add info about offset hooks
• update typings

Offsets Revolution

🤔 API Changes:

• ❗️selectedDates and onDatesChange are mandatory in the configuration types
• 🗑️ remove months and years actions
• 🗑️ remove next/previous month from the useMonthsPropGetters

🆕 New API:

• you can pass offsetDate and onOffsetChange to config. It will allow you to manipulate offsetDate outside of hooks (inputs, buttons, etc.)
• add useDatePickerOffsetPropGetters to manipulate offsetDate both internal and external

Motivation

There were a lot of requests with offsetDate manipulations outside of the lib, for example, integration with 3rd party, inputs, buttons, etc.
It demands moving offsetDate outside the internal reducer and updating the internal state based on the config prop.
Also, previousMonthButton and nextMonthButton are not actually a month functionality but an offset manipulation with the month limit. So we are introducing a new hook that will help to manipulate date-picker offset useDatePickerOffsetPropGetters.
Actions were introduced to cover cases when propGetters can't help but with new offset functionality, they are considered useless.

Realisation

• External offsetDate
  Now you can pass offsetDate and onOffsetChange to the config

// you can put any date here
const [offsetDate, onOffsetChange] = useState<Date>(new Date())
const [selectedDates, onDatesChange] = useState<Date[]>([])

const { calendars } = useDatePicker({
  selectedDates,
  onDatesChange,
  offsetDates,
  onDatesChange,
 // other configuration
})

📝 - you need to pass both offsetDate and onOffsetChange otherwise it will use internal offsetDate

• New useDatePickerOffsetPropGetters hook to change offsetDate

interface DPOffsetValue {
  days?: number;
  months?: number;
  years?: number;
}

type DPUseDatePickerOffsetPropGetters = (state: DPState) => {
  addOffset: (
    offsetValue: DPOffsetValue,
    config?: DPPropsGetterConfig,
  ) => DPPropGetter;
  setOffset: (date: Date) => DPPropGetter;
  subtractOffset: (
    offsetValue: DPOffsetValue,
    config?: DPPropsGetterConfig,
  ) => DPPropGetter;
};

We can get setOffset, addOffset and subtractOffset prop-getters from the new hook.
With new addOffset and subtractOffset you are not limited only by month and can change offset based on days, months and years or all of them

Old use example

const { previousMonthButton } = useMonthsPropGetters(dpState)

return (
  <button {...previousMonthButton()}>Previous Month</button>
)

it will change only by one month

New use example

const { subtractOffset } = useDatePickerOffsetPropGetters(dpState);

return (
  <button {...subtractOffset({ days: 2, months: 3, years: 1 })}>Previous period</button>
)

it will change offset for 2 days, 3 months and 1 year before current offsetDate

The new setOffset method will help you to change the date-picker offset to the exact date with a check for min and max dates.

Configuration update

• 🆕 update of the configuration value will update entities which rely on it.

const [locale, setLocale] = useState<'en' | 'uk'>('en');

const {
  data: { weekDays }
} = useDatePicker({
  locale: { locale }
});

const onSetEnLocale = () => setLocale('en');
const onSetUkLocale = () => setLocale('uk');

render (
  <>
    <button onClick={onSetEnLocale}>Set English Locale</button>
    <button onClick={onSetUkLocale}>Set Ukrainian Locale</button>
    {weekDays.map((day) => (<div key={day}>{day}</div>))}
  </>
) 

After the user will click on any button locale and weekDays value will be changed.

aria-selected for selected time, data, month and year

• prop getters return the aria-selected attribute for all selected dates, months, years and times.