feat: Added property to choose default render month/year

react/src/Calendar/Calendar.stories.tsx

@@ -48,3 +48,15 @@ export const SizeSmall = CalendarOnlyTemplate.bind({})
 SizeSmall.args = {
   size: 'sm',
 }
+
+export const CalendarWithDefaultFocusedDate = CalendarOnlyTemplate.bind({})
+CalendarWithDefaultFocusedDate.args = {
+  defaultFocusedDate: new Date('2010-01-01'),
+}
+
+export const CalendarWithDefaultFocusedDateOverriddenByDefaultValue =
+  CalendarOnlyTemplate.bind({})
+CalendarWithDefaultFocusedDateOverriddenByDefaultValue.args = {
+  defaultFocusedDate: new Date('2010-05-01'),
+  defaultValue: new Date('2001-01-01'),
+}

react/src/Calendar/CalendarBase/CalendarContext.tsx

@@ -88,7 +88,10 @@ const nanoid = customAlphabet(
 export interface UseProvideCalendarProps
   extends Pick<DayzedProps, 'monthsToDisplay'>,
     PassthroughProps,
-    WithSsr {}
+    WithSsr {
+  /** The date to focus when calendar first renders. */
+  defaultFocusedDate?: Date
+}
 
 interface CalendarContextProps extends CalendarProps, PassthroughProps {
   classNameId: string
@@ -149,6 +152,7 @@ const useProvideCalendar = ({
   colorScheme,
   size,
   ssr,
+  defaultFocusedDate,
 }: UseProvideCalendarProps) => {
   const isMobile = useIsMobile({ ssr })
   // Ensure that calculations are always made based on date of initial render,
@@ -157,14 +161,17 @@ const useProvideCalendar = ({
   // Unique className for dates
   const classNameId = useMemo(() => nanoid(), [])
   const yearOptions = useMemo(() => getYearOptions(), [])
-
   // Date to focus on initial render if initialFocusRef is passed
   const dateToFocus = useMemo(() => {
-    if (Array.isArray(selectedDates)) {
-      return selectedDates[0] ?? today
+    if (Array.isArray(selectedDates) && selectedDates[0]) {
+      return selectedDates[0]
     }
-    return selectedDates ?? today
-  }, [today, selectedDates])
+    if (selectedDates instanceof Date) {
+      return selectedDates
+    }
+
+    return defaultFocusedDate ?? today
+  }, [today, selectedDates, defaultFocusedDate])
   const [currMonth, setCurrMonth] = useState<number>(dateToFocus.getMonth())
   const [currYear, setCurrYear] = useState<number>(dateToFocus.getFullYear())
 

react/src/Calendar/CalendarBase/types.ts

@@ -2,7 +2,11 @@ import { UseProvideCalendarProps } from './CalendarContext'
 
 export type CalendarBaseProps = Pick<
   UseProvideCalendarProps,
-  'colorScheme' | 'isDateUnavailable' | 'monthsToDisplay' | 'size'
+  | 'colorScheme'
+  | 'isDateUnavailable'
+  | 'monthsToDisplay'
+  | 'size'
+  | 'defaultFocusedDate'
 >
 
 export type DateRangeValue = [Date, Date] | [Date, null] | [null, null]

react/src/Calendar/RangeCalendar.stories.tsx

@@ -57,3 +57,16 @@ export const SizeSmall = RangeCalendarOnlyTemplate.bind({})
 SizeSmall.args = {
   size: 'sm',
 }
+
+export const RangeCalendarWithDefaultFocusedDate =
+  RangeCalendarOnlyTemplate.bind({})
+RangeCalendarWithDefaultFocusedDate.args = {
+  defaultFocusedDate: new Date('2010-01-01'),
+}
+
+export const RangeCalendarWithDefaultFocusedDateOverriddenByDefaultValue =
+  RangeCalendarOnlyTemplate.bind({})
+RangeCalendarWithDefaultFocusedDateOverriddenByDefaultValue.args = {
+  defaultFocusedDate: new Date('2010-01-01'),
+  defaultValue: [new Date('2001-01-01'), null],
+}

react/src/DatePicker/DatePickerContext.tsx

@@ -47,6 +47,7 @@ interface DatePickerContextReturn {
   isDateUnavailable?: (date: Date) => boolean
   disclosureProps: UseDisclosureReturn
   monthsToDisplay?: number
+  defaultFocusedDate?: Date
 }
 
 const DatePickerContext = createContext<DatePickerContextReturn | null>(null)
@@ -96,6 +97,7 @@ const useProvideDatePicker = ({
   refocusOnClose = true,
   ssr,
   size,
+  defaultFocusedDate,
   ...props
 }: DatePickerProps): DatePickerContextReturn => {
   const initialFocusRef = useRef<HTMLInputElement>(null)
@@ -257,5 +259,6 @@ const useProvideDatePicker = ({
     isDateUnavailable,
     disclosureProps,
     monthsToDisplay,
+    defaultFocusedDate,
   }
 }

react/src/DatePicker/components/DatePickerCalendar.tsx

@@ -12,6 +12,7 @@ export const DatePickerCalendar = (): JSX.Element => {
     monthsToDisplay,
     size,
     isMobile,
+    defaultFocusedDate,
   } = useDatePicker()
 
   const displayedSize = isMobile ? 'sm' : size
@@ -25,6 +26,7 @@ export const DatePickerCalendar = (): JSX.Element => {
       isDateUnavailable={isDateUnavailable}
       onChange={handleDateChange}
       ref={initialFocusRef}
+      defaultFocusedDate={defaultFocusedDate}
     />
   )
 }