feat(datepicker): accepts dateValue as value

This issue was found in a scenario where I needed to update the selectedDate without clicking into
the component, just by passing a value to the Datepicker, and actually it just accepts changes by
clicking which I don't believe covers the use cases.

themesberg#1187

src/components/Datepicker/Datepicker.spec.tsx

@@ -74,4 +74,21 @@ describe('Components / Datepicker', () => {
     await userEvent.click(screen.getByRole('textbox'));
     await userEvent.click(document.body);
   });
+
+  it('should correctly display month and year considering defaultDate and dateValue', async () => {
+    const defaultDate = new Date(2023, 11, 1);
+    const dateValue = new Date(2024, 0, 1);
+    const { rerender } = render(<Datepicker defaultDate={defaultDate} />);
+    await userEvent.click(screen.getByRole('textbox'));
+    screen.debug();
+    expect(screen.getByText('December 2023')).toBeInTheDocument();
+    rerender(<Datepicker defaultDate={defaultDate} dateValue={dateValue} />);
+    expect(screen.getByText('January 2024')).toBeInTheDocument();
+  });
+
+  it('should close month overlay when user clicks outside of it', async () => {
+    render(<Datepicker />);
+    await userEvent.click(screen.getByRole('textbox'));
+    await userEvent.click(document.body);
+  });
 });

src/components/Datepicker/Datepicker.stories.tsx

@@ -13,6 +13,7 @@ export default {
         options: ['en', 'pt-BR'],
       },
     },
+    dateValue: { control: { type: 'date', format: 'MM/DD/YYYY' } },
     weekStart: {
       options: Object.values(WeekStart).filter((x) => typeof x === 'string'),
       mapping: WeekStart,
@@ -35,6 +36,9 @@ const Template: StoryFn<DatepickerProps> = (args) => {
     args.maxDate = new Date(args.maxDate);
   }
 
+  if (args.dateValue) {
+    args.dateValue = new Date(args.dateValue);
+  }
   // update defaultDate based on the range
   if (args.minDate && args.maxDate) {
     if (args.defaultDate) {
@@ -52,6 +56,7 @@ Default.args = {
   showClearButton: true,
   showTodayButton: true,
   defaultDate: new Date(),
+  dateValue: new Date(),
   minDate: undefined,
   maxDate: undefined,
   language: 'en',

src/components/Datepicker/Datepicker.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import type { FC, ReactNode } from 'react';
-import { useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { HiArrowLeft, HiArrowRight, HiCalendar } from 'react-icons/hi';
 import { twMerge } from 'tailwind-merge';
 import { mergeDeep } from '../../helpers/merge-deep';
@@ -86,6 +86,7 @@ export interface DatepickerProps extends Omit<TextInputProps, 'theme'> {
   weekStart?: WeekStart;
   theme?: DeepPartial<FlowbiteDatepickerTheme>;
   onSelectedDateChanged?: (date: Date) => void;
+  dateValue?: Date;
 }
 
 export const Datepicker: FC<DatepickerProps> = ({
@@ -105,6 +106,7 @@ export const Datepicker: FC<DatepickerProps> = ({
   className,
   theme: customTheme = {},
   onSelectedDateChanged,
+  dateValue,
   ...props
 }) => {
   const theme = mergeDeep(getTheme().datepicker, customTheme);
@@ -211,6 +213,15 @@ export const Datepicker: FC<DatepickerProps> = ({
     };
   }, [inputRef, datepickerRef, setIsOpen]);
 
+  useEffect(() => {
+    if (!dateValue) return;
+    const yearDifference = selectedDate.getFullYear() - dateValue.getFullYear();
+    const monthDifference = selectedDate.getMonth() - dateValue.getMonth();
+    const pageCounter = -(yearDifference * 12 + monthDifference);
+    setViewDate(getViewDatePage(view, viewDate, pageCounter));
+    dateValue && changeSelectedDate(dateValue, false);
+  }, [dateValue]);
+
   return (
     <DatepickerContext.Provider
       value={{