fix(calendar-compat): prevent component from crashing if value is undefined

change/@fluentui-react-calendar-compat-cf21ab21-bd90-4ae4-972d-ec1c9888ee2f.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: prevent calendar-compat from crashing when value is undefined",
+  "packageName": "@fluentui/react-calendar-compat",
+  "email": "vgenaev@gmail.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-calendar-compat/library/src/components/Calendar/Calendar.test.tsx

@@ -1,3 +1,5 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
 import { Calendar } from './Calendar';
 import { isConformant } from '../../testing/isConformant';
 
@@ -15,4 +17,13 @@ describe('Calendar', () => {
       'component-has-static-classnames-object',
     ],
   });
+
+  it('should render without crashing when value is undefined', () => {
+    expect(() => render(<Calendar value={undefined} />)).not.toThrow();
+  });
+
+  it('should render correctly when value is undefined', () => {
+    const { container } = render(<Calendar value={undefined} />);
+    expect(container.querySelector('[role="grid"]')).not.toBeNull();
+  });
 });

packages/react-components/react-calendar-compat/library/src/components/Calendar/Calendar.tsx

@@ -330,7 +330,7 @@ export const Calendar: React.FunctionComponent<CalendarProps> = React.forwardRef
         dateTimeFormatter.formatMonthDayYear(today, strings!),
       );
     }
-    if (dateTimeFormatter && strings!.selectedDateFormatString) {
+    if (dateTimeFormatter && strings!.selectedDateFormatString && selectedDate) {
       const dateStringFormatter = monthPickerOnly
         ? dateTimeFormatter.formatMonthYear
         : dateTimeFormatter.formatMonthDayYear;
@@ -349,8 +349,8 @@ export const Calendar: React.FunctionComponent<CalendarProps> = React.forwardRef
         {isDayPickerVisible && (
           <CalendarDay
             gridLabel={selectionAndTodayString}
-            selectedDate={selectedDate!}
-            navigatedDate={navigatedDay!}
+            selectedDate={selectedDate ?? today}
+            navigatedDate={navigatedDay ?? today}
             today={today}
             onSelectDate={onDateSelected}
             // eslint-disable-next-line react/jsx-no-bind