@fluentui/react-calendar-compat 0.3.19 → 0.3.21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,12 +1,30 @@
1
1
  # Change Log - @fluentui/react-calendar-compat
2
2
 
3
- This log was last generated on Wed, 25 Feb 2026 13:28:23 GMT and should not be manually modified.
3
+ This log was last generated on Wed, 11 Mar 2026 09:20:34 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [0.3.21](https://github.com/microsoft/fluentui/tree/@fluentui/react-calendar-compat_v0.3.21)
8
+
9
+ Wed, 11 Mar 2026 09:20:34 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-calendar-compat_v0.3.20..@fluentui/react-calendar-compat_v0.3.21)
11
+
12
+ ### Patches
13
+
14
+ - feat(react-calendar-compat): added navigation to the next date when date is on row edge ([PR #35790](https://github.com/microsoft/fluentui/pull/35790) by v.kozlova13@gmail.com)
15
+
16
+ ## [0.3.20](https://github.com/microsoft/fluentui/tree/@fluentui/react-calendar-compat_v0.3.20)
17
+
18
+ Tue, 03 Mar 2026 09:43:42 GMT
19
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-calendar-compat_v0.3.19..@fluentui/react-calendar-compat_v0.3.20)
20
+
21
+ ### Patches
22
+
23
+ - fix: prevent calendar-compat from crashing when value is undefined ([PR #35798](https://github.com/microsoft/fluentui/pull/35798) by vgenaev@gmail.com)
24
+
7
25
  ## [0.3.19](https://github.com/microsoft/fluentui/tree/@fluentui/react-calendar-compat_v0.3.19)
8
26
 
9
- Wed, 25 Feb 2026 13:28:23 GMT
27
+ Wed, 25 Feb 2026 13:32:28 GMT
10
28
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-calendar-compat_v0.3.18..@fluentui/react-calendar-compat_v0.3.19)
11
29
 
12
30
  ### Patches
@@ -237,7 +237,7 @@ function useFocusLogic({ componentRef }, isDayPickerVisible, isMonthPickerVisibl
237
237
  if (dateTimeFormatter && strings.todayDateFormatString) {
238
238
  todayDateString = strings.todayDateFormatString.replace('{0}', dateTimeFormatter.formatMonthDayYear(today, strings));
239
239
  }
240
- if (dateTimeFormatter && strings.selectedDateFormatString) {
240
+ if (dateTimeFormatter && strings.selectedDateFormatString && selectedDate) {
241
241
  const dateStringFormatter = monthPickerOnly ? dateTimeFormatter.formatMonthYear : dateTimeFormatter.formatMonthDayYear;
242
242
  selectedDateString = strings.selectedDateFormatString.replace('{0}', dateStringFormatter(selectedDate, strings));
243
243
  }
@@ -253,8 +253,8 @@ function useFocusLogic({ componentRef }, isDayPickerVisible, isMonthPickerVisibl
253
253
  "aria-atomic": "true"
254
254
  }, /*#__PURE__*/ React.createElement("span", null, selectedDateString)), isDayPickerVisible && /*#__PURE__*/ React.createElement(CalendarDay, {
255
255
  gridLabel: selectionAndTodayString,
256
- selectedDate: selectedDate,
257
- navigatedDate: navigatedDay,
256
+ selectedDate: selectedDate !== null && selectedDate !== void 0 ? selectedDate : today,
257
+ navigatedDate: navigatedDay !== null && navigatedDay !== void 0 ? navigatedDay : today,
258
258
  today: today,
259
259
  onSelectDate: onDateSelected,
260
260
  // eslint-disable-next-line react/jsx-no-bind
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/Calendar/Calendar.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Backspace, Enter, Escape, PageDown, PageUp, Space } from '@fluentui/keyboard-keys';\nimport { useControllableState } from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport {\n addMonths,\n addYears,\n DateRangeType,\n DayOfWeek,\n DEFAULT_CALENDAR_STRINGS,\n DEFAULT_DATE_FORMATTING,\n FirstWeekOfYear,\n focusAsync,\n} from '../../utils';\nimport { CalendarDay } from '../CalendarDay/CalendarDay';\nimport { CalendarMonth } from '../CalendarMonth/CalendarMonth';\nimport { defaultNavigationIcons } from './calendarNavigationIcons';\nimport { useCalendarStyles_unstable } from './useCalendarStyles.styles';\nimport type { ICalendarDay } from '../CalendarDay/CalendarDay.types';\nimport type { ICalendarMonth } from '../CalendarMonth/CalendarMonth.types';\nimport type { CalendarProps } from './Calendar.types';\n\nconst MIN_SIZE_FORCE_OVERLAY = 440;\n\nconst defaultWorkWeekDays: DayOfWeek[] = [\n DayOfWeek.Monday,\n DayOfWeek.Tuesday,\n DayOfWeek.Wednesday,\n DayOfWeek.Thursday,\n DayOfWeek.Friday,\n];\n\nfunction useDateState(props: CalendarProps) {\n const { value, today: todayProp, onSelectDate } = props;\n\n const today = React.useMemo(() => todayProp ?? new Date(), [todayProp]);\n\n /** The currently selected date in the calendar */\n const [selectedDate, setSelectedDate] = useControllableState({\n state: value,\n defaultState: value ? undefined : today,\n initialState: today,\n });\n\n /** The currently focused date in the day picker, but not necessarily selected */\n const [navigatedDay = today, setNavigatedDay] = React.useState(value);\n\n /** The currently focused date in the month picker, but not necessarily selected */\n const [navigatedMonth = today, setNavigatedMonth] = React.useState(value);\n\n /** If using a controlled value, when that value changes, navigate to that date */\n const [lastSelectedDate = today, setLastSelectedDate] = React.useState(value);\n if (value && lastSelectedDate.valueOf() !== value.valueOf()) {\n setNavigatedDay(value);\n setNavigatedMonth(value);\n setLastSelectedDate(value);\n }\n\n const navigateMonth = (date: Date) => {\n setNavigatedMonth(date);\n };\n\n const navigateDay = (date: Date) => {\n setNavigatedMonth(date);\n setNavigatedDay(date);\n };\n\n const onDateSelected = (date: Date, selectedDateRangeArray?: Date[]) => {\n setNavigatedMonth(date);\n setNavigatedDay(date);\n setSelectedDate(date);\n onSelectDate?.(date, selectedDateRangeArray);\n };\n\n return [selectedDate, navigatedDay, navigatedMonth, onDateSelected, navigateDay, navigateMonth] as const;\n}\n\nfunction useVisibilityState({\n isDayPickerVisible: isDayPickerVisibleProp,\n isMonthPickerVisible: isMonthPickerVisibleProp,\n showMonthPickerAsOverlay,\n}: CalendarProps) {\n /** State used to show/hide month picker */\n const showMonthPickerAsOverlayState = useShowMonthPickerAsOverlay({\n isDayPickerVisible: isDayPickerVisibleProp,\n showMonthPickerAsOverlay,\n });\n\n const [isMonthPickerVisible, setIsMonthPickerVisible] = React.useState(() =>\n showMonthPickerAsOverlayState ? false : isMonthPickerVisibleProp ?? false,\n );\n /** State used to show/hide day picker */\n const [isDayPickerVisible, setIsDayPickerVisible] = React.useState(() =>\n showMonthPickerAsOverlayState ? true : isDayPickerVisibleProp ?? true,\n );\n\n const toggleDayMonthPickerVisibility = () => {\n setIsMonthPickerVisible(!isMonthPickerVisible);\n setIsDayPickerVisible(!isDayPickerVisible);\n };\n\n return [isMonthPickerVisible, isDayPickerVisible, toggleDayMonthPickerVisibility] as const;\n}\n\nfunction useFocusLogic({ componentRef }: CalendarProps, isDayPickerVisible: boolean, isMonthPickerVisible: boolean) {\n const dayPicker = React.useRef<ICalendarDay>(null);\n const monthPicker = React.useRef<ICalendarMonth>(null);\n const focusOnUpdate = React.useRef(false);\n const { targetDocument } = useFluent();\n const win = targetDocument?.defaultView;\n\n const focus = React.useCallback(() => {\n if (isDayPickerVisible && dayPicker.current) {\n focusAsync(dayPicker.current, win);\n } else if (isMonthPickerVisible && monthPicker.current) {\n focusAsync(monthPicker.current, win);\n }\n }, [isDayPickerVisible, isMonthPickerVisible, win]);\n\n React.useImperativeHandle(componentRef, () => ({ focus }), [focus]);\n\n React.useEffect(() => {\n if (focusOnUpdate.current) {\n focus();\n focusOnUpdate.current = false;\n }\n });\n\n const focusOnNextUpdate = () => {\n focusOnUpdate.current = true;\n };\n\n return [dayPicker, monthPicker, focusOnNextUpdate] as const;\n}\n\n/**\n * @internal\n */\nexport const Calendar: React.FunctionComponent<CalendarProps> = React.forwardRef<HTMLDivElement, CalendarProps>(\n (props, forwardedRef) => {\n const {\n allFocusable = false,\n calendarDayProps,\n calendarMonthProps,\n className,\n componentRef,\n dateRangeType = DateRangeType.Day,\n dateTimeFormatter = DEFAULT_DATE_FORMATTING,\n firstDayOfWeek = DayOfWeek.Sunday,\n firstWeekOfYear = FirstWeekOfYear.FirstDay,\n highlightCurrentMonth = false,\n highlightSelectedMonth = false,\n id,\n isDayPickerVisible: isDayPickerVisibleProp = true,\n isMonthPickerVisible: isMonthPickerVisibleProp = true,\n maxDate,\n minDate,\n onDismiss,\n onSelectDate,\n restrictedDates,\n showCloseButton = false,\n showGoToToday = true,\n showMonthPickerAsOverlay: showMonthPickerAsOverlayProp = false,\n showSixWeeksByDefault = false,\n showWeekNumbers = false,\n strings = DEFAULT_CALENDAR_STRINGS,\n today: todayProp,\n value,\n workWeekDays = defaultWorkWeekDays,\n } = props;\n\n const today = React.useMemo(() => {\n return todayProp ?? new Date();\n }, [todayProp]);\n\n const [selectedDate, navigatedDay, navigatedMonth, onDateSelected, navigateDay, navigateMonth] = useDateState({\n onSelectDate,\n value,\n today,\n });\n const [isMonthPickerVisible, isDayPickerVisible, toggleDayMonthPickerVisibility] = useVisibilityState({\n isDayPickerVisible: isDayPickerVisibleProp,\n isMonthPickerVisible: isMonthPickerVisibleProp,\n showMonthPickerAsOverlay: showMonthPickerAsOverlayProp,\n });\n const [dayPicker, monthPicker, focusOnNextUpdate] = useFocusLogic(\n { componentRef },\n isDayPickerVisible,\n isMonthPickerVisible,\n );\n\n const renderGoToTodayButton = () => {\n let goTodayEnabled = showGoToToday;\n\n if (goTodayEnabled && today) {\n goTodayEnabled =\n navigatedDay.getFullYear() !== today.getFullYear() ||\n navigatedDay.getMonth() !== today.getMonth() ||\n navigatedMonth.getFullYear() !== today.getFullYear() ||\n navigatedMonth.getMonth() !== today.getMonth();\n }\n\n return (\n showGoToToday && (\n <button\n className={classes.goTodayButton}\n onClick={onGotoToday}\n onKeyDown={onButtonKeyDown(onGotoToday)}\n type=\"button\"\n disabled={!goTodayEnabled}\n >\n {strings!.goToToday}\n </button>\n )\n );\n };\n\n const onNavigateDayDate = (date: Date, focusOnNavigatedDay: boolean): void => {\n navigateDay(date);\n if (focusOnNavigatedDay) {\n focusOnNextUpdate();\n }\n };\n\n const onNavigateMonthDate = (date: Date, focusOnNavigatedDay: boolean): void => {\n if (focusOnNavigatedDay) {\n focusOnNextUpdate();\n }\n\n if (!focusOnNavigatedDay) {\n navigateMonth(date);\n return;\n }\n\n if (monthPickerOnly) {\n onDateSelected(date);\n }\n\n navigateDay(date);\n };\n\n const showMonthPickerAsOverlay = useShowMonthPickerAsOverlay({\n isDayPickerVisible: isDayPickerVisibleProp,\n showMonthPickerAsOverlay: showMonthPickerAsOverlayProp,\n });\n\n const onHeaderSelect = showMonthPickerAsOverlay\n ? (): void => {\n toggleDayMonthPickerVisibility();\n\n focusOnNextUpdate();\n }\n : undefined;\n\n const onGotoToday = (): void => {\n navigateDay(today!);\n if (showMonthPickerAsOverlay && isMonthPickerVisible) {\n toggleDayMonthPickerVisibility();\n }\n focusOnNextUpdate();\n };\n\n const onButtonKeyDown = (callback: () => void): ((ev: React.KeyboardEvent<HTMLButtonElement>) => void) => {\n return (ev: React.KeyboardEvent<HTMLButtonElement>) => {\n switch (ev.key) {\n case Enter:\n case Space:\n callback();\n break;\n }\n };\n };\n\n const onDatePickerPopupKeyDown = (ev: React.KeyboardEvent<HTMLElement>): void => {\n switch (ev.key) {\n case Enter:\n ev.preventDefault();\n break;\n\n case Backspace:\n ev.preventDefault();\n break;\n\n case Escape:\n ev.stopPropagation();\n onDismiss?.();\n break;\n\n case PageUp:\n if (ev.ctrlKey) {\n // go to next year\n navigateDay(addYears(navigatedDay, 1));\n } else {\n // go to next month\n navigateDay(addMonths(navigatedDay, 1));\n }\n ev.preventDefault();\n break;\n case PageDown:\n if (ev.ctrlKey) {\n // go to previous year\n navigateDay(addYears(navigatedDay, -1));\n } else {\n // go to previous month\n navigateDay(addMonths(navigatedDay, -1));\n }\n ev.preventDefault();\n break;\n default:\n break;\n }\n };\n\n const monthPickerOnly = !showMonthPickerAsOverlay && !isDayPickerVisible;\n\n const classes = useCalendarStyles_unstable({\n className,\n isDayPickerVisible,\n isMonthPickerVisible,\n showWeekNumbers,\n });\n\n let todayDateString: string = '';\n let selectedDateString: string = '';\n if (dateTimeFormatter && strings!.todayDateFormatString) {\n todayDateString = strings!.todayDateFormatString.replace(\n '{0}',\n dateTimeFormatter.formatMonthDayYear(today, strings!),\n );\n }\n if (dateTimeFormatter && strings!.selectedDateFormatString) {\n const dateStringFormatter = monthPickerOnly\n ? dateTimeFormatter.formatMonthYear\n : dateTimeFormatter.formatMonthDayYear;\n selectedDateString = strings!.selectedDateFormatString.replace(\n '{0}',\n dateStringFormatter(selectedDate, strings!),\n );\n }\n const selectionAndTodayString = selectedDateString + ', ' + todayDateString;\n\n return (\n <div id={id} ref={forwardedRef} className={classes.root} onKeyDown={onDatePickerPopupKeyDown}>\n <div className={classes.liveRegion} aria-live=\"polite\" aria-atomic=\"true\">\n <span>{selectedDateString}</span>\n </div>\n {isDayPickerVisible && (\n <CalendarDay\n gridLabel={selectionAndTodayString}\n selectedDate={selectedDate!}\n navigatedDate={navigatedDay!}\n today={today}\n onSelectDate={onDateSelected}\n // eslint-disable-next-line react/jsx-no-bind\n onNavigateDate={onNavigateDayDate}\n onDismiss={onDismiss}\n firstDayOfWeek={firstDayOfWeek!}\n dateRangeType={dateRangeType!}\n strings={strings!}\n // eslint-disable-next-line react/jsx-no-bind\n onHeaderSelect={onHeaderSelect}\n showWeekNumbers={showWeekNumbers}\n firstWeekOfYear={firstWeekOfYear!}\n dateTimeFormatter={dateTimeFormatter!}\n showSixWeeksByDefault={showSixWeeksByDefault}\n minDate={minDate}\n maxDate={maxDate}\n navigationIcons={defaultNavigationIcons}\n restrictedDates={restrictedDates}\n workWeekDays={workWeekDays}\n componentRef={dayPicker}\n showCloseButton={showCloseButton}\n allFocusable={allFocusable}\n {...calendarDayProps} // at end of list so consumer's custom functions take precedence\n />\n )}\n {isDayPickerVisible && isMonthPickerVisible && <div className={classes.divider} />}\n {isMonthPickerVisible ? (\n <div className={classes.monthPickerWrapper}>\n <CalendarMonth\n navigatedDate={navigatedMonth}\n selectedDate={navigatedDay}\n strings={strings!}\n // eslint-disable-next-line react/jsx-no-bind\n onNavigateDate={onNavigateMonthDate}\n today={today}\n highlightCurrentMonth={highlightCurrentMonth!}\n highlightSelectedMonth={highlightSelectedMonth!}\n // eslint-disable-next-line react/jsx-no-bind\n onHeaderSelect={onHeaderSelect}\n dateTimeFormatter={dateTimeFormatter!}\n minDate={minDate}\n maxDate={maxDate}\n componentRef={monthPicker}\n navigationIcons={defaultNavigationIcons}\n {...calendarMonthProps} // at end of list so consumer's custom functions take precedence\n />\n {renderGoToTodayButton()}\n </div>\n ) : (\n renderGoToTodayButton()\n )}\n </div>\n );\n },\n);\nCalendar.displayName = 'Calendar';\n\nconst useShowMonthPickerAsOverlay = ({ isDayPickerVisible, showMonthPickerAsOverlay }: CalendarProps) => {\n const { targetDocument } = useFluent();\n const win = targetDocument?.defaultView;\n return showMonthPickerAsOverlay || (isDayPickerVisible && win && win.innerWidth <= MIN_SIZE_FORCE_OVERLAY);\n};\n"],"names":["React","Backspace","Enter","Escape","PageDown","PageUp","Space","useControllableState","useFluent_unstable","useFluent","addMonths","addYears","DateRangeType","DayOfWeek","DEFAULT_CALENDAR_STRINGS","DEFAULT_DATE_FORMATTING","FirstWeekOfYear","focusAsync","CalendarDay","CalendarMonth","defaultNavigationIcons","useCalendarStyles_unstable","MIN_SIZE_FORCE_OVERLAY","defaultWorkWeekDays","Monday","Tuesday","Wednesday","Thursday","Friday","useDateState","props","value","today","todayProp","onSelectDate","useMemo","Date","selectedDate","setSelectedDate","state","defaultState","undefined","initialState","navigatedDay","setNavigatedDay","useState","navigatedMonth","setNavigatedMonth","lastSelectedDate","setLastSelectedDate","valueOf","navigateMonth","date","navigateDay","onDateSelected","selectedDateRangeArray","useVisibilityState","isDayPickerVisible","isDayPickerVisibleProp","isMonthPickerVisible","isMonthPickerVisibleProp","showMonthPickerAsOverlay","showMonthPickerAsOverlayState","useShowMonthPickerAsOverlay","setIsMonthPickerVisible","setIsDayPickerVisible","toggleDayMonthPickerVisibility","useFocusLogic","componentRef","dayPicker","useRef","monthPicker","focusOnUpdate","targetDocument","win","defaultView","focus","useCallback","current","useImperativeHandle","useEffect","focusOnNextUpdate","Calendar","forwardRef","forwardedRef","allFocusable","calendarDayProps","calendarMonthProps","className","dateRangeType","Day","dateTimeFormatter","firstDayOfWeek","Sunday","firstWeekOfYear","FirstDay","highlightCurrentMonth","highlightSelectedMonth","id","maxDate","minDate","onDismiss","restrictedDates","showCloseButton","showGoToToday","showMonthPickerAsOverlayProp","showSixWeeksByDefault","showWeekNumbers","strings","workWeekDays","renderGoToTodayButton","goTodayEnabled","getFullYear","getMonth","button","classes","goTodayButton","onClick","onGotoToday","onKeyDown","onButtonKeyDown","type","disabled","goToToday","onNavigateDayDate","focusOnNavigatedDay","onNavigateMonthDate","monthPickerOnly","onHeaderSelect","callback","ev","key","onDatePickerPopupKeyDown","preventDefault","stopPropagation","ctrlKey","todayDateString","selectedDateString","todayDateFormatString","replace","formatMonthDayYear","selectedDateFormatString","dateStringFormatter","formatMonthYear","selectionAndTodayString","div","ref","root","liveRegion","aria-live","aria-atomic","span","gridLabel","navigatedDate","onNavigateDate","navigationIcons","divider","monthPickerWrapper","displayName","innerWidth"],"mappings":"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"}
1
+ {"version":3,"sources":["../src/components/Calendar/Calendar.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Backspace, Enter, Escape, PageDown, PageUp, Space } from '@fluentui/keyboard-keys';\nimport { useControllableState } from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport {\n addMonths,\n addYears,\n DateRangeType,\n DayOfWeek,\n DEFAULT_CALENDAR_STRINGS,\n DEFAULT_DATE_FORMATTING,\n FirstWeekOfYear,\n focusAsync,\n} from '../../utils';\nimport { CalendarDay } from '../CalendarDay/CalendarDay';\nimport { CalendarMonth } from '../CalendarMonth/CalendarMonth';\nimport { defaultNavigationIcons } from './calendarNavigationIcons';\nimport { useCalendarStyles_unstable } from './useCalendarStyles.styles';\nimport type { ICalendarDay } from '../CalendarDay/CalendarDay.types';\nimport type { ICalendarMonth } from '../CalendarMonth/CalendarMonth.types';\nimport type { CalendarProps } from './Calendar.types';\n\nconst MIN_SIZE_FORCE_OVERLAY = 440;\n\nconst defaultWorkWeekDays: DayOfWeek[] = [\n DayOfWeek.Monday,\n DayOfWeek.Tuesday,\n DayOfWeek.Wednesday,\n DayOfWeek.Thursday,\n DayOfWeek.Friday,\n];\n\nfunction useDateState(props: CalendarProps) {\n const { value, today: todayProp, onSelectDate } = props;\n\n const today = React.useMemo(() => todayProp ?? new Date(), [todayProp]);\n\n /** The currently selected date in the calendar */\n const [selectedDate, setSelectedDate] = useControllableState({\n state: value,\n defaultState: value ? undefined : today,\n initialState: today,\n });\n\n /** The currently focused date in the day picker, but not necessarily selected */\n const [navigatedDay = today, setNavigatedDay] = React.useState(value);\n\n /** The currently focused date in the month picker, but not necessarily selected */\n const [navigatedMonth = today, setNavigatedMonth] = React.useState(value);\n\n /** If using a controlled value, when that value changes, navigate to that date */\n const [lastSelectedDate = today, setLastSelectedDate] = React.useState(value);\n if (value && lastSelectedDate.valueOf() !== value.valueOf()) {\n setNavigatedDay(value);\n setNavigatedMonth(value);\n setLastSelectedDate(value);\n }\n\n const navigateMonth = (date: Date) => {\n setNavigatedMonth(date);\n };\n\n const navigateDay = (date: Date) => {\n setNavigatedMonth(date);\n setNavigatedDay(date);\n };\n\n const onDateSelected = (date: Date, selectedDateRangeArray?: Date[]) => {\n setNavigatedMonth(date);\n setNavigatedDay(date);\n setSelectedDate(date);\n onSelectDate?.(date, selectedDateRangeArray);\n };\n\n return [selectedDate, navigatedDay, navigatedMonth, onDateSelected, navigateDay, navigateMonth] as const;\n}\n\nfunction useVisibilityState({\n isDayPickerVisible: isDayPickerVisibleProp,\n isMonthPickerVisible: isMonthPickerVisibleProp,\n showMonthPickerAsOverlay,\n}: CalendarProps) {\n /** State used to show/hide month picker */\n const showMonthPickerAsOverlayState = useShowMonthPickerAsOverlay({\n isDayPickerVisible: isDayPickerVisibleProp,\n showMonthPickerAsOverlay,\n });\n\n const [isMonthPickerVisible, setIsMonthPickerVisible] = React.useState(() =>\n showMonthPickerAsOverlayState ? false : isMonthPickerVisibleProp ?? false,\n );\n /** State used to show/hide day picker */\n const [isDayPickerVisible, setIsDayPickerVisible] = React.useState(() =>\n showMonthPickerAsOverlayState ? true : isDayPickerVisibleProp ?? true,\n );\n\n const toggleDayMonthPickerVisibility = () => {\n setIsMonthPickerVisible(!isMonthPickerVisible);\n setIsDayPickerVisible(!isDayPickerVisible);\n };\n\n return [isMonthPickerVisible, isDayPickerVisible, toggleDayMonthPickerVisibility] as const;\n}\n\nfunction useFocusLogic({ componentRef }: CalendarProps, isDayPickerVisible: boolean, isMonthPickerVisible: boolean) {\n const dayPicker = React.useRef<ICalendarDay>(null);\n const monthPicker = React.useRef<ICalendarMonth>(null);\n const focusOnUpdate = React.useRef(false);\n const { targetDocument } = useFluent();\n const win = targetDocument?.defaultView;\n\n const focus = React.useCallback(() => {\n if (isDayPickerVisible && dayPicker.current) {\n focusAsync(dayPicker.current, win);\n } else if (isMonthPickerVisible && monthPicker.current) {\n focusAsync(monthPicker.current, win);\n }\n }, [isDayPickerVisible, isMonthPickerVisible, win]);\n\n React.useImperativeHandle(componentRef, () => ({ focus }), [focus]);\n\n React.useEffect(() => {\n if (focusOnUpdate.current) {\n focus();\n focusOnUpdate.current = false;\n }\n });\n\n const focusOnNextUpdate = () => {\n focusOnUpdate.current = true;\n };\n\n return [dayPicker, monthPicker, focusOnNextUpdate] as const;\n}\n\n/**\n * @internal\n */\nexport const Calendar: React.FunctionComponent<CalendarProps> = React.forwardRef<HTMLDivElement, CalendarProps>(\n (props, forwardedRef) => {\n const {\n allFocusable = false,\n calendarDayProps,\n calendarMonthProps,\n className,\n componentRef,\n dateRangeType = DateRangeType.Day,\n dateTimeFormatter = DEFAULT_DATE_FORMATTING,\n firstDayOfWeek = DayOfWeek.Sunday,\n firstWeekOfYear = FirstWeekOfYear.FirstDay,\n highlightCurrentMonth = false,\n highlightSelectedMonth = false,\n id,\n isDayPickerVisible: isDayPickerVisibleProp = true,\n isMonthPickerVisible: isMonthPickerVisibleProp = true,\n maxDate,\n minDate,\n onDismiss,\n onSelectDate,\n restrictedDates,\n showCloseButton = false,\n showGoToToday = true,\n showMonthPickerAsOverlay: showMonthPickerAsOverlayProp = false,\n showSixWeeksByDefault = false,\n showWeekNumbers = false,\n strings = DEFAULT_CALENDAR_STRINGS,\n today: todayProp,\n value,\n workWeekDays = defaultWorkWeekDays,\n } = props;\n\n const today = React.useMemo(() => {\n return todayProp ?? new Date();\n }, [todayProp]);\n\n const [selectedDate, navigatedDay, navigatedMonth, onDateSelected, navigateDay, navigateMonth] = useDateState({\n onSelectDate,\n value,\n today,\n });\n const [isMonthPickerVisible, isDayPickerVisible, toggleDayMonthPickerVisibility] = useVisibilityState({\n isDayPickerVisible: isDayPickerVisibleProp,\n isMonthPickerVisible: isMonthPickerVisibleProp,\n showMonthPickerAsOverlay: showMonthPickerAsOverlayProp,\n });\n const [dayPicker, monthPicker, focusOnNextUpdate] = useFocusLogic(\n { componentRef },\n isDayPickerVisible,\n isMonthPickerVisible,\n );\n\n const renderGoToTodayButton = () => {\n let goTodayEnabled = showGoToToday;\n\n if (goTodayEnabled && today) {\n goTodayEnabled =\n navigatedDay.getFullYear() !== today.getFullYear() ||\n navigatedDay.getMonth() !== today.getMonth() ||\n navigatedMonth.getFullYear() !== today.getFullYear() ||\n navigatedMonth.getMonth() !== today.getMonth();\n }\n\n return (\n showGoToToday && (\n <button\n className={classes.goTodayButton}\n onClick={onGotoToday}\n onKeyDown={onButtonKeyDown(onGotoToday)}\n type=\"button\"\n disabled={!goTodayEnabled}\n >\n {strings!.goToToday}\n </button>\n )\n );\n };\n\n const onNavigateDayDate = (date: Date, focusOnNavigatedDay: boolean): void => {\n navigateDay(date);\n if (focusOnNavigatedDay) {\n focusOnNextUpdate();\n }\n };\n\n const onNavigateMonthDate = (date: Date, focusOnNavigatedDay: boolean): void => {\n if (focusOnNavigatedDay) {\n focusOnNextUpdate();\n }\n\n if (!focusOnNavigatedDay) {\n navigateMonth(date);\n return;\n }\n\n if (monthPickerOnly) {\n onDateSelected(date);\n }\n\n navigateDay(date);\n };\n\n const showMonthPickerAsOverlay = useShowMonthPickerAsOverlay({\n isDayPickerVisible: isDayPickerVisibleProp,\n showMonthPickerAsOverlay: showMonthPickerAsOverlayProp,\n });\n\n const onHeaderSelect = showMonthPickerAsOverlay\n ? (): void => {\n toggleDayMonthPickerVisibility();\n\n focusOnNextUpdate();\n }\n : undefined;\n\n const onGotoToday = (): void => {\n navigateDay(today!);\n if (showMonthPickerAsOverlay && isMonthPickerVisible) {\n toggleDayMonthPickerVisibility();\n }\n focusOnNextUpdate();\n };\n\n const onButtonKeyDown = (callback: () => void): ((ev: React.KeyboardEvent<HTMLButtonElement>) => void) => {\n return (ev: React.KeyboardEvent<HTMLButtonElement>) => {\n switch (ev.key) {\n case Enter:\n case Space:\n callback();\n break;\n }\n };\n };\n\n const onDatePickerPopupKeyDown = (ev: React.KeyboardEvent<HTMLElement>): void => {\n switch (ev.key) {\n case Enter:\n ev.preventDefault();\n break;\n\n case Backspace:\n ev.preventDefault();\n break;\n\n case Escape:\n ev.stopPropagation();\n onDismiss?.();\n break;\n\n case PageUp:\n if (ev.ctrlKey) {\n // go to next year\n navigateDay(addYears(navigatedDay, 1));\n } else {\n // go to next month\n navigateDay(addMonths(navigatedDay, 1));\n }\n ev.preventDefault();\n break;\n case PageDown:\n if (ev.ctrlKey) {\n // go to previous year\n navigateDay(addYears(navigatedDay, -1));\n } else {\n // go to previous month\n navigateDay(addMonths(navigatedDay, -1));\n }\n ev.preventDefault();\n break;\n default:\n break;\n }\n };\n\n const monthPickerOnly = !showMonthPickerAsOverlay && !isDayPickerVisible;\n\n const classes = useCalendarStyles_unstable({\n className,\n isDayPickerVisible,\n isMonthPickerVisible,\n showWeekNumbers,\n });\n\n let todayDateString: string = '';\n let selectedDateString: string = '';\n if (dateTimeFormatter && strings!.todayDateFormatString) {\n todayDateString = strings!.todayDateFormatString.replace(\n '{0}',\n dateTimeFormatter.formatMonthDayYear(today, strings!),\n );\n }\n if (dateTimeFormatter && strings!.selectedDateFormatString && selectedDate) {\n const dateStringFormatter = monthPickerOnly\n ? dateTimeFormatter.formatMonthYear\n : dateTimeFormatter.formatMonthDayYear;\n selectedDateString = strings!.selectedDateFormatString.replace(\n '{0}',\n dateStringFormatter(selectedDate, strings!),\n );\n }\n const selectionAndTodayString = selectedDateString + ', ' + todayDateString;\n\n return (\n <div id={id} ref={forwardedRef} className={classes.root} onKeyDown={onDatePickerPopupKeyDown}>\n <div className={classes.liveRegion} aria-live=\"polite\" aria-atomic=\"true\">\n <span>{selectedDateString}</span>\n </div>\n {isDayPickerVisible && (\n <CalendarDay\n gridLabel={selectionAndTodayString}\n selectedDate={selectedDate ?? today}\n navigatedDate={navigatedDay ?? today}\n today={today}\n onSelectDate={onDateSelected}\n // eslint-disable-next-line react/jsx-no-bind\n onNavigateDate={onNavigateDayDate}\n onDismiss={onDismiss}\n firstDayOfWeek={firstDayOfWeek!}\n dateRangeType={dateRangeType!}\n strings={strings!}\n // eslint-disable-next-line react/jsx-no-bind\n onHeaderSelect={onHeaderSelect}\n showWeekNumbers={showWeekNumbers}\n firstWeekOfYear={firstWeekOfYear!}\n dateTimeFormatter={dateTimeFormatter!}\n showSixWeeksByDefault={showSixWeeksByDefault}\n minDate={minDate}\n maxDate={maxDate}\n navigationIcons={defaultNavigationIcons}\n restrictedDates={restrictedDates}\n workWeekDays={workWeekDays}\n componentRef={dayPicker}\n showCloseButton={showCloseButton}\n allFocusable={allFocusable}\n {...calendarDayProps} // at end of list so consumer's custom functions take precedence\n />\n )}\n {isDayPickerVisible && isMonthPickerVisible && <div className={classes.divider} />}\n {isMonthPickerVisible ? (\n <div className={classes.monthPickerWrapper}>\n <CalendarMonth\n navigatedDate={navigatedMonth}\n selectedDate={navigatedDay}\n strings={strings!}\n // eslint-disable-next-line react/jsx-no-bind\n onNavigateDate={onNavigateMonthDate}\n today={today}\n highlightCurrentMonth={highlightCurrentMonth!}\n highlightSelectedMonth={highlightSelectedMonth!}\n // eslint-disable-next-line react/jsx-no-bind\n onHeaderSelect={onHeaderSelect}\n dateTimeFormatter={dateTimeFormatter!}\n minDate={minDate}\n maxDate={maxDate}\n componentRef={monthPicker}\n navigationIcons={defaultNavigationIcons}\n {...calendarMonthProps} // at end of list so consumer's custom functions take precedence\n />\n {renderGoToTodayButton()}\n </div>\n ) : (\n renderGoToTodayButton()\n )}\n </div>\n );\n },\n);\nCalendar.displayName = 'Calendar';\n\nconst useShowMonthPickerAsOverlay = ({ isDayPickerVisible, showMonthPickerAsOverlay }: CalendarProps) => {\n const { targetDocument } = useFluent();\n const win = targetDocument?.defaultView;\n return showMonthPickerAsOverlay || (isDayPickerVisible && win && win.innerWidth <= MIN_SIZE_FORCE_OVERLAY);\n};\n"],"names":["React","Backspace","Enter","Escape","PageDown","PageUp","Space","useControllableState","useFluent_unstable","useFluent","addMonths","addYears","DateRangeType","DayOfWeek","DEFAULT_CALENDAR_STRINGS","DEFAULT_DATE_FORMATTING","FirstWeekOfYear","focusAsync","CalendarDay","CalendarMonth","defaultNavigationIcons","useCalendarStyles_unstable","MIN_SIZE_FORCE_OVERLAY","defaultWorkWeekDays","Monday","Tuesday","Wednesday","Thursday","Friday","useDateState","props","value","today","todayProp","onSelectDate","useMemo","Date","selectedDate","setSelectedDate","state","defaultState","undefined","initialState","navigatedDay","setNavigatedDay","useState","navigatedMonth","setNavigatedMonth","lastSelectedDate","setLastSelectedDate","valueOf","navigateMonth","date","navigateDay","onDateSelected","selectedDateRangeArray","useVisibilityState","isDayPickerVisible","isDayPickerVisibleProp","isMonthPickerVisible","isMonthPickerVisibleProp","showMonthPickerAsOverlay","showMonthPickerAsOverlayState","useShowMonthPickerAsOverlay","setIsMonthPickerVisible","setIsDayPickerVisible","toggleDayMonthPickerVisibility","useFocusLogic","componentRef","dayPicker","useRef","monthPicker","focusOnUpdate","targetDocument","win","defaultView","focus","useCallback","current","useImperativeHandle","useEffect","focusOnNextUpdate","Calendar","forwardRef","forwardedRef","allFocusable","calendarDayProps","calendarMonthProps","className","dateRangeType","Day","dateTimeFormatter","firstDayOfWeek","Sunday","firstWeekOfYear","FirstDay","highlightCurrentMonth","highlightSelectedMonth","id","maxDate","minDate","onDismiss","restrictedDates","showCloseButton","showGoToToday","showMonthPickerAsOverlayProp","showSixWeeksByDefault","showWeekNumbers","strings","workWeekDays","renderGoToTodayButton","goTodayEnabled","getFullYear","getMonth","button","classes","goTodayButton","onClick","onGotoToday","onKeyDown","onButtonKeyDown","type","disabled","goToToday","onNavigateDayDate","focusOnNavigatedDay","onNavigateMonthDate","monthPickerOnly","onHeaderSelect","callback","ev","key","onDatePickerPopupKeyDown","preventDefault","stopPropagation","ctrlKey","todayDateString","selectedDateString","todayDateFormatString","replace","formatMonthDayYear","selectedDateFormatString","dateStringFormatter","formatMonthYear","selectionAndTodayString","div","ref","root","liveRegion","aria-live","aria-atomic","span","gridLabel","navigatedDate","onNavigateDate","navigationIcons","divider","monthPickerWrapper","displayName","innerWidth"],"mappings":"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"}
@@ -109,7 +109,7 @@ export const CalendarDayGrid = (props)=>{
109
109
  getRefsFromDayInfos
110
110
  };
111
111
  const arrowNavigationAttributes = useArrowNavigationGroup({
112
- axis: 'grid'
112
+ axis: 'grid-linear'
113
113
  });
114
114
  return /*#__PURE__*/ React.createElement("table", {
115
115
  className: mergeClasses(classNames.table, props.className),
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/CalendarDayGrid/CalendarDayGrid.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport { useId } from '@fluentui/react-utilities';\nimport { getBoundedDateRange, getDateRangeArray, isRestrictedDate, DateRangeType, DayOfWeek } from '../../utils';\nimport { useCalendarDayGridStyles_unstable } from './useCalendarDayGridStyles.styles';\nimport { CalendarMonthHeaderRow } from './CalendarMonthHeaderRow';\nimport { CalendarGridRow } from './CalendarGridRow';\nimport { useWeeks } from './useWeeks';\nimport { useWeekCornerStyles, WeekCorners } from './useWeekCornerStyles.styles';\nimport { mergeClasses } from '@griffel/react';\nimport type { Day } from '../../utils';\nimport type { CalendarDayGridProps } from './CalendarDayGrid.types';\n\nexport interface DayInfo extends Day {\n onSelected: () => void;\n setRef(element: HTMLElement | null): void;\n}\n\nfunction useDayRefs() {\n const daysRef = React.useRef<Record<string, HTMLElement>>({});\n\n const getSetRefCallback = (dayKey: string) => (element: HTMLElement | null) => {\n if (element === null) {\n delete daysRef.current[dayKey];\n } else {\n daysRef.current[dayKey] = element;\n }\n };\n\n return [daysRef, getSetRefCallback] as const;\n}\n\nfunction useAnimateBackwards(weeks: DayInfo[][]): boolean | undefined {\n const previousNavigatedDateRef = React.useRef<Date | undefined>(undefined);\n React.useEffect(() => {\n previousNavigatedDateRef.current = weeks[0][0].originalDate;\n });\n const previousNavigatedDate = previousNavigatedDateRef.current;\n\n if (!previousNavigatedDate || previousNavigatedDate.getTime() === weeks[0][0].originalDate.getTime()) {\n return undefined;\n } else if (previousNavigatedDate <= weeks[0][0].originalDate) {\n return false;\n } else {\n return true;\n }\n}\n\nexport const CalendarDayGrid: React.FunctionComponent<CalendarDayGridProps> = props => {\n const navigatedDayRef = React.useRef<HTMLTableCellElement>(\n null,\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n ) as React.MutableRefObject<HTMLTableCellElement | null>;\n\n const activeDescendantId = useId();\n\n const onSelectDate = (selectedDate: Date): void => {\n const { firstDayOfWeek, minDate, maxDate, workWeekDays, daysToSelectInDayView, restrictedDates } = props;\n const restrictedDatesOptions = { minDate, maxDate, restrictedDates };\n\n let dateRange = getDateRangeArray(selectedDate, dateRangeType, firstDayOfWeek, workWeekDays, daysToSelectInDayView);\n dateRange = getBoundedDateRange(dateRange, minDate, maxDate);\n\n dateRange = dateRange.filter((d: Date) => {\n return !isRestrictedDate(d, restrictedDatesOptions);\n });\n\n props.onSelectDate?.(selectedDate, dateRange);\n props.onNavigateDate?.(selectedDate, true);\n };\n\n const [daysRef, getSetRefCallback] = useDayRefs();\n\n const weeks = useWeeks(props, onSelectDate, getSetRefCallback);\n const animateBackwards = useAnimateBackwards(weeks);\n const [getWeekCornerStyles, calculateRoundedStyles] = useWeekCornerStyles(props);\n\n React.useImperativeHandle(\n props.componentRef,\n () => ({\n focus() {\n navigatedDayRef.current?.focus?.();\n },\n }),\n [],\n );\n\n /**\n *\n * Section for setting hover/pressed styles. Because we want arbitrary blobs of days to be selectable, to support\n * highlighting every day in the month for month view, css :hover style isn't enough, so we need mouse callbacks\n * to set classnames on all relevant child refs to apply the styling\n *\n */\n const getDayInfosInRangeOfDay = (dayToCompare: DayInfo): DayInfo[] => {\n // The hover state looks weird with non-contiguous days in work week view. In work week, show week hover state\n const dateRangeHoverType = getDateRangeTypeToUse(props.dateRangeType, props.workWeekDays);\n\n // gets all the dates for the given date range type that are in the same date range as the given day\n const dateRange = getDateRangeArray(\n dayToCompare.originalDate,\n dateRangeHoverType,\n props.firstDayOfWeek,\n props.workWeekDays,\n props.daysToSelectInDayView,\n ).map((date: Date) => date.getTime());\n\n // gets all the day refs for the given dates\n const dayInfosInRange = weeks.reduce((accumulatedValue: DayInfo[], currentWeek: DayInfo[]) => {\n return accumulatedValue.concat(\n currentWeek.filter((weekDay: DayInfo) => dateRange.indexOf(weekDay.originalDate.getTime()) !== -1),\n );\n }, []);\n\n return dayInfosInRange;\n };\n\n const getRefsFromDayInfos = (dayInfosInRange: DayInfo[]): (HTMLElement | null)[] => {\n let dayRefs: (HTMLElement | null)[] = [];\n dayRefs = dayInfosInRange.map((dayInfo: DayInfo) => daysRef.current[dayInfo.key]);\n\n return dayRefs;\n };\n\n const {\n gridLabel,\n dateRangeType,\n showWeekNumbers,\n labelledBy,\n lightenDaysOutsideNavigatedMonth,\n animationDirection,\n } = props;\n\n const classNames = useCalendarDayGridStyles_unstable({\n animateBackwards,\n animationDirection,\n dateRangeType,\n lightenDaysOutsideNavigatedMonth:\n lightenDaysOutsideNavigatedMonth === undefined ? true : lightenDaysOutsideNavigatedMonth,\n showWeekNumbers,\n });\n\n // When the month is highlighted get the corner dates so that styles can be added to them\n const weekCorners: WeekCorners = getWeekCornerStyles(weeks!);\n const partialWeekProps = {\n weeks,\n navigatedDayRef,\n calculateRoundedStyles,\n activeDescendantId,\n classNames,\n weekCorners,\n getDayInfosInRangeOfDay,\n getRefsFromDayInfos,\n } as const;\n\n const arrowNavigationAttributes = useArrowNavigationGroup({ axis: 'grid' });\n\n return (\n <table\n className={mergeClasses(classNames.table, props.className)}\n aria-multiselectable=\"false\"\n aria-label={gridLabel}\n aria-labelledby={labelledBy}\n aria-activedescendant={activeDescendantId}\n role=\"grid\"\n {...arrowNavigationAttributes}\n >\n <tbody>\n <CalendarMonthHeaderRow {...props} classNames={classNames} weeks={weeks} />\n <CalendarGridRow\n {...props}\n {...partialWeekProps}\n week={weeks[0]}\n weekIndex={-1}\n rowClassName={classNames.firstTransitionWeek}\n aria-role=\"presentation\"\n ariaHidden={true}\n />\n {weeks!.slice(1, weeks!.length - 1).map((week: DayInfo[], weekIndex: number) => (\n <CalendarGridRow\n {...props}\n {...partialWeekProps}\n key={weekIndex}\n week={week}\n weekIndex={weekIndex}\n rowClassName={classNames.weekRow}\n />\n ))}\n <CalendarGridRow\n {...props}\n {...partialWeekProps}\n week={weeks![weeks!.length - 1]}\n weekIndex={-2}\n rowClassName={classNames.lastTransitionWeek}\n aria-role=\"presentation\"\n ariaHidden={true}\n />\n </tbody>\n </table>\n );\n};\nCalendarDayGrid.displayName = 'CalendarDayGrid';\n\n/**\n * When given work week, if the days are non-contiguous, the hover states look really weird. So for non-contiguous\n * work weeks, we'll just show week view instead.\n */\nfunction getDateRangeTypeToUse(dateRangeType: DateRangeType, workWeekDays: DayOfWeek[] | undefined): DateRangeType {\n if (workWeekDays && dateRangeType === DateRangeType.WorkWeek) {\n const sortedWWDays = workWeekDays.slice().sort();\n let isContiguous = true;\n for (let i = 1; i < sortedWWDays.length; i++) {\n if (sortedWWDays[i] !== sortedWWDays[i - 1] + 1) {\n isContiguous = false;\n break;\n }\n }\n\n if (!isContiguous || workWeekDays.length === 0) {\n return DateRangeType.Week;\n }\n }\n\n return dateRangeType;\n}\n"],"names":["React","useArrowNavigationGroup","useId","getBoundedDateRange","getDateRangeArray","isRestrictedDate","DateRangeType","useCalendarDayGridStyles_unstable","CalendarMonthHeaderRow","CalendarGridRow","useWeeks","useWeekCornerStyles","mergeClasses","useDayRefs","daysRef","useRef","getSetRefCallback","dayKey","element","current","useAnimateBackwards","weeks","previousNavigatedDateRef","undefined","useEffect","originalDate","previousNavigatedDate","getTime","CalendarDayGrid","props","navigatedDayRef","activeDescendantId","onSelectDate","selectedDate","firstDayOfWeek","minDate","maxDate","workWeekDays","daysToSelectInDayView","restrictedDates","restrictedDatesOptions","dateRange","dateRangeType","filter","d","onNavigateDate","animateBackwards","getWeekCornerStyles","calculateRoundedStyles","useImperativeHandle","componentRef","focus","getDayInfosInRangeOfDay","dayToCompare","dateRangeHoverType","getDateRangeTypeToUse","map","date","dayInfosInRange","reduce","accumulatedValue","currentWeek","concat","weekDay","indexOf","getRefsFromDayInfos","dayRefs","dayInfo","key","gridLabel","showWeekNumbers","labelledBy","lightenDaysOutsideNavigatedMonth","animationDirection","classNames","weekCorners","partialWeekProps","arrowNavigationAttributes","axis","table","className","aria-multiselectable","aria-label","aria-labelledby","aria-activedescendant","role","tbody","week","weekIndex","rowClassName","firstTransitionWeek","aria-role","ariaHidden","slice","length","weekRow","lastTransitionWeek","displayName","WorkWeek","sortedWWDays","sort","isContiguous","i","Week"],"mappings":"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"}
1
+ {"version":3,"sources":["../src/components/CalendarDayGrid/CalendarDayGrid.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport { useId } from '@fluentui/react-utilities';\nimport { getBoundedDateRange, getDateRangeArray, isRestrictedDate, DateRangeType, DayOfWeek } from '../../utils';\nimport { useCalendarDayGridStyles_unstable } from './useCalendarDayGridStyles.styles';\nimport { CalendarMonthHeaderRow } from './CalendarMonthHeaderRow';\nimport { CalendarGridRow } from './CalendarGridRow';\nimport { useWeeks } from './useWeeks';\nimport { useWeekCornerStyles, WeekCorners } from './useWeekCornerStyles.styles';\nimport { mergeClasses } from '@griffel/react';\nimport type { Day } from '../../utils';\nimport type { CalendarDayGridProps } from './CalendarDayGrid.types';\n\nexport interface DayInfo extends Day {\n onSelected: () => void;\n setRef(element: HTMLElement | null): void;\n}\n\nfunction useDayRefs() {\n const daysRef = React.useRef<Record<string, HTMLElement>>({});\n\n const getSetRefCallback = (dayKey: string) => (element: HTMLElement | null) => {\n if (element === null) {\n delete daysRef.current[dayKey];\n } else {\n daysRef.current[dayKey] = element;\n }\n };\n\n return [daysRef, getSetRefCallback] as const;\n}\n\nfunction useAnimateBackwards(weeks: DayInfo[][]): boolean | undefined {\n const previousNavigatedDateRef = React.useRef<Date | undefined>(undefined);\n React.useEffect(() => {\n previousNavigatedDateRef.current = weeks[0][0].originalDate;\n });\n const previousNavigatedDate = previousNavigatedDateRef.current;\n\n if (!previousNavigatedDate || previousNavigatedDate.getTime() === weeks[0][0].originalDate.getTime()) {\n return undefined;\n } else if (previousNavigatedDate <= weeks[0][0].originalDate) {\n return false;\n } else {\n return true;\n }\n}\n\nexport const CalendarDayGrid: React.FunctionComponent<CalendarDayGridProps> = props => {\n const navigatedDayRef = React.useRef<HTMLTableCellElement>(\n null,\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n ) as React.MutableRefObject<HTMLTableCellElement | null>;\n\n const activeDescendantId = useId();\n\n const onSelectDate = (selectedDate: Date): void => {\n const { firstDayOfWeek, minDate, maxDate, workWeekDays, daysToSelectInDayView, restrictedDates } = props;\n const restrictedDatesOptions = { minDate, maxDate, restrictedDates };\n\n let dateRange = getDateRangeArray(selectedDate, dateRangeType, firstDayOfWeek, workWeekDays, daysToSelectInDayView);\n dateRange = getBoundedDateRange(dateRange, minDate, maxDate);\n\n dateRange = dateRange.filter((d: Date) => {\n return !isRestrictedDate(d, restrictedDatesOptions);\n });\n\n props.onSelectDate?.(selectedDate, dateRange);\n props.onNavigateDate?.(selectedDate, true);\n };\n\n const [daysRef, getSetRefCallback] = useDayRefs();\n\n const weeks = useWeeks(props, onSelectDate, getSetRefCallback);\n const animateBackwards = useAnimateBackwards(weeks);\n const [getWeekCornerStyles, calculateRoundedStyles] = useWeekCornerStyles(props);\n\n React.useImperativeHandle(\n props.componentRef,\n () => ({\n focus() {\n navigatedDayRef.current?.focus?.();\n },\n }),\n [],\n );\n\n /**\n *\n * Section for setting hover/pressed styles. Because we want arbitrary blobs of days to be selectable, to support\n * highlighting every day in the month for month view, css :hover style isn't enough, so we need mouse callbacks\n * to set classnames on all relevant child refs to apply the styling\n *\n */\n const getDayInfosInRangeOfDay = (dayToCompare: DayInfo): DayInfo[] => {\n // The hover state looks weird with non-contiguous days in work week view. In work week, show week hover state\n const dateRangeHoverType = getDateRangeTypeToUse(props.dateRangeType, props.workWeekDays);\n\n // gets all the dates for the given date range type that are in the same date range as the given day\n const dateRange = getDateRangeArray(\n dayToCompare.originalDate,\n dateRangeHoverType,\n props.firstDayOfWeek,\n props.workWeekDays,\n props.daysToSelectInDayView,\n ).map((date: Date) => date.getTime());\n\n // gets all the day refs for the given dates\n const dayInfosInRange = weeks.reduce((accumulatedValue: DayInfo[], currentWeek: DayInfo[]) => {\n return accumulatedValue.concat(\n currentWeek.filter((weekDay: DayInfo) => dateRange.indexOf(weekDay.originalDate.getTime()) !== -1),\n );\n }, []);\n\n return dayInfosInRange;\n };\n\n const getRefsFromDayInfos = (dayInfosInRange: DayInfo[]): (HTMLElement | null)[] => {\n let dayRefs: (HTMLElement | null)[] = [];\n dayRefs = dayInfosInRange.map((dayInfo: DayInfo) => daysRef.current[dayInfo.key]);\n\n return dayRefs;\n };\n\n const {\n gridLabel,\n dateRangeType,\n showWeekNumbers,\n labelledBy,\n lightenDaysOutsideNavigatedMonth,\n animationDirection,\n } = props;\n\n const classNames = useCalendarDayGridStyles_unstable({\n animateBackwards,\n animationDirection,\n dateRangeType,\n lightenDaysOutsideNavigatedMonth:\n lightenDaysOutsideNavigatedMonth === undefined ? true : lightenDaysOutsideNavigatedMonth,\n showWeekNumbers,\n });\n\n // When the month is highlighted get the corner dates so that styles can be added to them\n const weekCorners: WeekCorners = getWeekCornerStyles(weeks!);\n const partialWeekProps = {\n weeks,\n navigatedDayRef,\n calculateRoundedStyles,\n activeDescendantId,\n classNames,\n weekCorners,\n getDayInfosInRangeOfDay,\n getRefsFromDayInfos,\n } as const;\n\n const arrowNavigationAttributes = useArrowNavigationGroup({ axis: 'grid-linear' });\n\n return (\n <table\n className={mergeClasses(classNames.table, props.className)}\n aria-multiselectable=\"false\"\n aria-label={gridLabel}\n aria-labelledby={labelledBy}\n aria-activedescendant={activeDescendantId}\n role=\"grid\"\n {...arrowNavigationAttributes}\n >\n <tbody>\n <CalendarMonthHeaderRow {...props} classNames={classNames} weeks={weeks} />\n <CalendarGridRow\n {...props}\n {...partialWeekProps}\n week={weeks[0]}\n weekIndex={-1}\n rowClassName={classNames.firstTransitionWeek}\n aria-role=\"presentation\"\n ariaHidden={true}\n />\n {weeks!.slice(1, weeks!.length - 1).map((week: DayInfo[], weekIndex: number) => (\n <CalendarGridRow\n {...props}\n {...partialWeekProps}\n key={weekIndex}\n week={week}\n weekIndex={weekIndex}\n rowClassName={classNames.weekRow}\n />\n ))}\n <CalendarGridRow\n {...props}\n {...partialWeekProps}\n week={weeks![weeks!.length - 1]}\n weekIndex={-2}\n rowClassName={classNames.lastTransitionWeek}\n aria-role=\"presentation\"\n ariaHidden={true}\n />\n </tbody>\n </table>\n );\n};\nCalendarDayGrid.displayName = 'CalendarDayGrid';\n\n/**\n * When given work week, if the days are non-contiguous, the hover states look really weird. So for non-contiguous\n * work weeks, we'll just show week view instead.\n */\nfunction getDateRangeTypeToUse(dateRangeType: DateRangeType, workWeekDays: DayOfWeek[] | undefined): DateRangeType {\n if (workWeekDays && dateRangeType === DateRangeType.WorkWeek) {\n const sortedWWDays = workWeekDays.slice().sort();\n let isContiguous = true;\n for (let i = 1; i < sortedWWDays.length; i++) {\n if (sortedWWDays[i] !== sortedWWDays[i - 1] + 1) {\n isContiguous = false;\n break;\n }\n }\n\n if (!isContiguous || workWeekDays.length === 0) {\n return DateRangeType.Week;\n }\n }\n\n return dateRangeType;\n}\n"],"names":["React","useArrowNavigationGroup","useId","getBoundedDateRange","getDateRangeArray","isRestrictedDate","DateRangeType","useCalendarDayGridStyles_unstable","CalendarMonthHeaderRow","CalendarGridRow","useWeeks","useWeekCornerStyles","mergeClasses","useDayRefs","daysRef","useRef","getSetRefCallback","dayKey","element","current","useAnimateBackwards","weeks","previousNavigatedDateRef","undefined","useEffect","originalDate","previousNavigatedDate","getTime","CalendarDayGrid","props","navigatedDayRef","activeDescendantId","onSelectDate","selectedDate","firstDayOfWeek","minDate","maxDate","workWeekDays","daysToSelectInDayView","restrictedDates","restrictedDatesOptions","dateRange","dateRangeType","filter","d","onNavigateDate","animateBackwards","getWeekCornerStyles","calculateRoundedStyles","useImperativeHandle","componentRef","focus","getDayInfosInRangeOfDay","dayToCompare","dateRangeHoverType","getDateRangeTypeToUse","map","date","dayInfosInRange","reduce","accumulatedValue","currentWeek","concat","weekDay","indexOf","getRefsFromDayInfos","dayRefs","dayInfo","key","gridLabel","showWeekNumbers","labelledBy","lightenDaysOutsideNavigatedMonth","animationDirection","classNames","weekCorners","partialWeekProps","arrowNavigationAttributes","axis","table","className","aria-multiselectable","aria-label","aria-labelledby","aria-activedescendant","role","tbody","week","weekIndex","rowClassName","firstTransitionWeek","aria-role","ariaHidden","slice","length","weekRow","lastTransitionWeek","displayName","WorkWeek","sortedWWDays","sort","isContiguous","i","Week"],"mappings":"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"}
@@ -246,7 +246,7 @@ const Calendar = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
246
246
  if (dateTimeFormatter && strings.todayDateFormatString) {
247
247
  todayDateString = strings.todayDateFormatString.replace('{0}', dateTimeFormatter.formatMonthDayYear(today, strings));
248
248
  }
249
- if (dateTimeFormatter && strings.selectedDateFormatString) {
249
+ if (dateTimeFormatter && strings.selectedDateFormatString && selectedDate) {
250
250
  const dateStringFormatter = monthPickerOnly ? dateTimeFormatter.formatMonthYear : dateTimeFormatter.formatMonthDayYear;
251
251
  selectedDateString = strings.selectedDateFormatString.replace('{0}', dateStringFormatter(selectedDate, strings));
252
252
  }
@@ -262,8 +262,8 @@ const Calendar = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
262
262
  "aria-atomic": "true"
263
263
  }, /*#__PURE__*/ _react.createElement("span", null, selectedDateString)), isDayPickerVisible && /*#__PURE__*/ _react.createElement(_CalendarDay.CalendarDay, {
264
264
  gridLabel: selectionAndTodayString,
265
- selectedDate: selectedDate,
266
- navigatedDate: navigatedDay,
265
+ selectedDate: selectedDate !== null && selectedDate !== void 0 ? selectedDate : today,
266
+ navigatedDate: navigatedDay !== null && navigatedDay !== void 0 ? navigatedDay : today,
267
267
  today: today,
268
268
  onSelectDate: onDateSelected,
269
269
  // eslint-disable-next-line react/jsx-no-bind
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/Calendar/Calendar.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Backspace, Enter, Escape, PageDown, PageUp, Space } from '@fluentui/keyboard-keys';\nimport { useControllableState } from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport {\n addMonths,\n addYears,\n DateRangeType,\n DayOfWeek,\n DEFAULT_CALENDAR_STRINGS,\n DEFAULT_DATE_FORMATTING,\n FirstWeekOfYear,\n focusAsync,\n} from '../../utils';\nimport { CalendarDay } from '../CalendarDay/CalendarDay';\nimport { CalendarMonth } from '../CalendarMonth/CalendarMonth';\nimport { defaultNavigationIcons } from './calendarNavigationIcons';\nimport { useCalendarStyles_unstable } from './useCalendarStyles.styles';\nimport type { ICalendarDay } from '../CalendarDay/CalendarDay.types';\nimport type { ICalendarMonth } from '../CalendarMonth/CalendarMonth.types';\nimport type { CalendarProps } from './Calendar.types';\n\nconst MIN_SIZE_FORCE_OVERLAY = 440;\n\nconst defaultWorkWeekDays: DayOfWeek[] = [\n DayOfWeek.Monday,\n DayOfWeek.Tuesday,\n DayOfWeek.Wednesday,\n DayOfWeek.Thursday,\n DayOfWeek.Friday,\n];\n\nfunction useDateState(props: CalendarProps) {\n const { value, today: todayProp, onSelectDate } = props;\n\n const today = React.useMemo(() => todayProp ?? new Date(), [todayProp]);\n\n /** The currently selected date in the calendar */\n const [selectedDate, setSelectedDate] = useControllableState({\n state: value,\n defaultState: value ? undefined : today,\n initialState: today,\n });\n\n /** The currently focused date in the day picker, but not necessarily selected */\n const [navigatedDay = today, setNavigatedDay] = React.useState(value);\n\n /** The currently focused date in the month picker, but not necessarily selected */\n const [navigatedMonth = today, setNavigatedMonth] = React.useState(value);\n\n /** If using a controlled value, when that value changes, navigate to that date */\n const [lastSelectedDate = today, setLastSelectedDate] = React.useState(value);\n if (value && lastSelectedDate.valueOf() !== value.valueOf()) {\n setNavigatedDay(value);\n setNavigatedMonth(value);\n setLastSelectedDate(value);\n }\n\n const navigateMonth = (date: Date) => {\n setNavigatedMonth(date);\n };\n\n const navigateDay = (date: Date) => {\n setNavigatedMonth(date);\n setNavigatedDay(date);\n };\n\n const onDateSelected = (date: Date, selectedDateRangeArray?: Date[]) => {\n setNavigatedMonth(date);\n setNavigatedDay(date);\n setSelectedDate(date);\n onSelectDate?.(date, selectedDateRangeArray);\n };\n\n return [selectedDate, navigatedDay, navigatedMonth, onDateSelected, navigateDay, navigateMonth] as const;\n}\n\nfunction useVisibilityState({\n isDayPickerVisible: isDayPickerVisibleProp,\n isMonthPickerVisible: isMonthPickerVisibleProp,\n showMonthPickerAsOverlay,\n}: CalendarProps) {\n /** State used to show/hide month picker */\n const showMonthPickerAsOverlayState = useShowMonthPickerAsOverlay({\n isDayPickerVisible: isDayPickerVisibleProp,\n showMonthPickerAsOverlay,\n });\n\n const [isMonthPickerVisible, setIsMonthPickerVisible] = React.useState(() =>\n showMonthPickerAsOverlayState ? false : isMonthPickerVisibleProp ?? false,\n );\n /** State used to show/hide day picker */\n const [isDayPickerVisible, setIsDayPickerVisible] = React.useState(() =>\n showMonthPickerAsOverlayState ? true : isDayPickerVisibleProp ?? true,\n );\n\n const toggleDayMonthPickerVisibility = () => {\n setIsMonthPickerVisible(!isMonthPickerVisible);\n setIsDayPickerVisible(!isDayPickerVisible);\n };\n\n return [isMonthPickerVisible, isDayPickerVisible, toggleDayMonthPickerVisibility] as const;\n}\n\nfunction useFocusLogic({ componentRef }: CalendarProps, isDayPickerVisible: boolean, isMonthPickerVisible: boolean) {\n const dayPicker = React.useRef<ICalendarDay>(null);\n const monthPicker = React.useRef<ICalendarMonth>(null);\n const focusOnUpdate = React.useRef(false);\n const { targetDocument } = useFluent();\n const win = targetDocument?.defaultView;\n\n const focus = React.useCallback(() => {\n if (isDayPickerVisible && dayPicker.current) {\n focusAsync(dayPicker.current, win);\n } else if (isMonthPickerVisible && monthPicker.current) {\n focusAsync(monthPicker.current, win);\n }\n }, [isDayPickerVisible, isMonthPickerVisible, win]);\n\n React.useImperativeHandle(componentRef, () => ({ focus }), [focus]);\n\n React.useEffect(() => {\n if (focusOnUpdate.current) {\n focus();\n focusOnUpdate.current = false;\n }\n });\n\n const focusOnNextUpdate = () => {\n focusOnUpdate.current = true;\n };\n\n return [dayPicker, monthPicker, focusOnNextUpdate] as const;\n}\n\n/**\n * @internal\n */\nexport const Calendar: React.FunctionComponent<CalendarProps> = React.forwardRef<HTMLDivElement, CalendarProps>(\n (props, forwardedRef) => {\n const {\n allFocusable = false,\n calendarDayProps,\n calendarMonthProps,\n className,\n componentRef,\n dateRangeType = DateRangeType.Day,\n dateTimeFormatter = DEFAULT_DATE_FORMATTING,\n firstDayOfWeek = DayOfWeek.Sunday,\n firstWeekOfYear = FirstWeekOfYear.FirstDay,\n highlightCurrentMonth = false,\n highlightSelectedMonth = false,\n id,\n isDayPickerVisible: isDayPickerVisibleProp = true,\n isMonthPickerVisible: isMonthPickerVisibleProp = true,\n maxDate,\n minDate,\n onDismiss,\n onSelectDate,\n restrictedDates,\n showCloseButton = false,\n showGoToToday = true,\n showMonthPickerAsOverlay: showMonthPickerAsOverlayProp = false,\n showSixWeeksByDefault = false,\n showWeekNumbers = false,\n strings = DEFAULT_CALENDAR_STRINGS,\n today: todayProp,\n value,\n workWeekDays = defaultWorkWeekDays,\n } = props;\n\n const today = React.useMemo(() => {\n return todayProp ?? new Date();\n }, [todayProp]);\n\n const [selectedDate, navigatedDay, navigatedMonth, onDateSelected, navigateDay, navigateMonth] = useDateState({\n onSelectDate,\n value,\n today,\n });\n const [isMonthPickerVisible, isDayPickerVisible, toggleDayMonthPickerVisibility] = useVisibilityState({\n isDayPickerVisible: isDayPickerVisibleProp,\n isMonthPickerVisible: isMonthPickerVisibleProp,\n showMonthPickerAsOverlay: showMonthPickerAsOverlayProp,\n });\n const [dayPicker, monthPicker, focusOnNextUpdate] = useFocusLogic(\n { componentRef },\n isDayPickerVisible,\n isMonthPickerVisible,\n );\n\n const renderGoToTodayButton = () => {\n let goTodayEnabled = showGoToToday;\n\n if (goTodayEnabled && today) {\n goTodayEnabled =\n navigatedDay.getFullYear() !== today.getFullYear() ||\n navigatedDay.getMonth() !== today.getMonth() ||\n navigatedMonth.getFullYear() !== today.getFullYear() ||\n navigatedMonth.getMonth() !== today.getMonth();\n }\n\n return (\n showGoToToday && (\n <button\n className={classes.goTodayButton}\n onClick={onGotoToday}\n onKeyDown={onButtonKeyDown(onGotoToday)}\n type=\"button\"\n disabled={!goTodayEnabled}\n >\n {strings!.goToToday}\n </button>\n )\n );\n };\n\n const onNavigateDayDate = (date: Date, focusOnNavigatedDay: boolean): void => {\n navigateDay(date);\n if (focusOnNavigatedDay) {\n focusOnNextUpdate();\n }\n };\n\n const onNavigateMonthDate = (date: Date, focusOnNavigatedDay: boolean): void => {\n if (focusOnNavigatedDay) {\n focusOnNextUpdate();\n }\n\n if (!focusOnNavigatedDay) {\n navigateMonth(date);\n return;\n }\n\n if (monthPickerOnly) {\n onDateSelected(date);\n }\n\n navigateDay(date);\n };\n\n const showMonthPickerAsOverlay = useShowMonthPickerAsOverlay({\n isDayPickerVisible: isDayPickerVisibleProp,\n showMonthPickerAsOverlay: showMonthPickerAsOverlayProp,\n });\n\n const onHeaderSelect = showMonthPickerAsOverlay\n ? (): void => {\n toggleDayMonthPickerVisibility();\n\n focusOnNextUpdate();\n }\n : undefined;\n\n const onGotoToday = (): void => {\n navigateDay(today!);\n if (showMonthPickerAsOverlay && isMonthPickerVisible) {\n toggleDayMonthPickerVisibility();\n }\n focusOnNextUpdate();\n };\n\n const onButtonKeyDown = (callback: () => void): ((ev: React.KeyboardEvent<HTMLButtonElement>) => void) => {\n return (ev: React.KeyboardEvent<HTMLButtonElement>) => {\n switch (ev.key) {\n case Enter:\n case Space:\n callback();\n break;\n }\n };\n };\n\n const onDatePickerPopupKeyDown = (ev: React.KeyboardEvent<HTMLElement>): void => {\n switch (ev.key) {\n case Enter:\n ev.preventDefault();\n break;\n\n case Backspace:\n ev.preventDefault();\n break;\n\n case Escape:\n ev.stopPropagation();\n onDismiss?.();\n break;\n\n case PageUp:\n if (ev.ctrlKey) {\n // go to next year\n navigateDay(addYears(navigatedDay, 1));\n } else {\n // go to next month\n navigateDay(addMonths(navigatedDay, 1));\n }\n ev.preventDefault();\n break;\n case PageDown:\n if (ev.ctrlKey) {\n // go to previous year\n navigateDay(addYears(navigatedDay, -1));\n } else {\n // go to previous month\n navigateDay(addMonths(navigatedDay, -1));\n }\n ev.preventDefault();\n break;\n default:\n break;\n }\n };\n\n const monthPickerOnly = !showMonthPickerAsOverlay && !isDayPickerVisible;\n\n const classes = useCalendarStyles_unstable({\n className,\n isDayPickerVisible,\n isMonthPickerVisible,\n showWeekNumbers,\n });\n\n let todayDateString: string = '';\n let selectedDateString: string = '';\n if (dateTimeFormatter && strings!.todayDateFormatString) {\n todayDateString = strings!.todayDateFormatString.replace(\n '{0}',\n dateTimeFormatter.formatMonthDayYear(today, strings!),\n );\n }\n if (dateTimeFormatter && strings!.selectedDateFormatString) {\n const dateStringFormatter = monthPickerOnly\n ? dateTimeFormatter.formatMonthYear\n : dateTimeFormatter.formatMonthDayYear;\n selectedDateString = strings!.selectedDateFormatString.replace(\n '{0}',\n dateStringFormatter(selectedDate, strings!),\n );\n }\n const selectionAndTodayString = selectedDateString + ', ' + todayDateString;\n\n return (\n <div id={id} ref={forwardedRef} className={classes.root} onKeyDown={onDatePickerPopupKeyDown}>\n <div className={classes.liveRegion} aria-live=\"polite\" aria-atomic=\"true\">\n <span>{selectedDateString}</span>\n </div>\n {isDayPickerVisible && (\n <CalendarDay\n gridLabel={selectionAndTodayString}\n selectedDate={selectedDate!}\n navigatedDate={navigatedDay!}\n today={today}\n onSelectDate={onDateSelected}\n // eslint-disable-next-line react/jsx-no-bind\n onNavigateDate={onNavigateDayDate}\n onDismiss={onDismiss}\n firstDayOfWeek={firstDayOfWeek!}\n dateRangeType={dateRangeType!}\n strings={strings!}\n // eslint-disable-next-line react/jsx-no-bind\n onHeaderSelect={onHeaderSelect}\n showWeekNumbers={showWeekNumbers}\n firstWeekOfYear={firstWeekOfYear!}\n dateTimeFormatter={dateTimeFormatter!}\n showSixWeeksByDefault={showSixWeeksByDefault}\n minDate={minDate}\n maxDate={maxDate}\n navigationIcons={defaultNavigationIcons}\n restrictedDates={restrictedDates}\n workWeekDays={workWeekDays}\n componentRef={dayPicker}\n showCloseButton={showCloseButton}\n allFocusable={allFocusable}\n {...calendarDayProps} // at end of list so consumer's custom functions take precedence\n />\n )}\n {isDayPickerVisible && isMonthPickerVisible && <div className={classes.divider} />}\n {isMonthPickerVisible ? (\n <div className={classes.monthPickerWrapper}>\n <CalendarMonth\n navigatedDate={navigatedMonth}\n selectedDate={navigatedDay}\n strings={strings!}\n // eslint-disable-next-line react/jsx-no-bind\n onNavigateDate={onNavigateMonthDate}\n today={today}\n highlightCurrentMonth={highlightCurrentMonth!}\n highlightSelectedMonth={highlightSelectedMonth!}\n // eslint-disable-next-line react/jsx-no-bind\n onHeaderSelect={onHeaderSelect}\n dateTimeFormatter={dateTimeFormatter!}\n minDate={minDate}\n maxDate={maxDate}\n componentRef={monthPicker}\n navigationIcons={defaultNavigationIcons}\n {...calendarMonthProps} // at end of list so consumer's custom functions take precedence\n />\n {renderGoToTodayButton()}\n </div>\n ) : (\n renderGoToTodayButton()\n )}\n </div>\n );\n },\n);\nCalendar.displayName = 'Calendar';\n\nconst useShowMonthPickerAsOverlay = ({ isDayPickerVisible, showMonthPickerAsOverlay }: CalendarProps) => {\n const { targetDocument } = useFluent();\n const win = targetDocument?.defaultView;\n return showMonthPickerAsOverlay || (isDayPickerVisible && win && win.innerWidth <= MIN_SIZE_FORCE_OVERLAY);\n};\n"],"names":["React","Backspace","Enter","Escape","PageDown","PageUp","Space","useControllableState","useFluent_unstable","useFluent","addMonths","addYears","DateRangeType","DayOfWeek","DEFAULT_CALENDAR_STRINGS","DEFAULT_DATE_FORMATTING","FirstWeekOfYear","focusAsync","CalendarDay","CalendarMonth","defaultNavigationIcons","useCalendarStyles_unstable","MIN_SIZE_FORCE_OVERLAY","defaultWorkWeekDays","Monday","Tuesday","Wednesday","Thursday","Friday","useDateState","props","value","today","todayProp","onSelectDate","useMemo","Date","selectedDate","setSelectedDate","state","defaultState","undefined","initialState","navigatedDay","setNavigatedDay","useState","navigatedMonth","setNavigatedMonth","lastSelectedDate","setLastSelectedDate","valueOf","navigateMonth","date","navigateDay","onDateSelected","selectedDateRangeArray","useVisibilityState","isDayPickerVisible","isDayPickerVisibleProp","isMonthPickerVisible","isMonthPickerVisibleProp","showMonthPickerAsOverlay","showMonthPickerAsOverlayState","useShowMonthPickerAsOverlay","setIsMonthPickerVisible","setIsDayPickerVisible","toggleDayMonthPickerVisibility","useFocusLogic","componentRef","dayPicker","useRef","monthPicker","focusOnUpdate","targetDocument","win","defaultView","focus","useCallback","current","useImperativeHandle","useEffect","focusOnNextUpdate","Calendar","forwardRef","forwardedRef","allFocusable","calendarDayProps","calendarMonthProps","className","dateRangeType","Day","dateTimeFormatter","firstDayOfWeek","Sunday","firstWeekOfYear","FirstDay","highlightCurrentMonth","highlightSelectedMonth","id","maxDate","minDate","onDismiss","restrictedDates","showCloseButton","showGoToToday","showMonthPickerAsOverlayProp","showSixWeeksByDefault","showWeekNumbers","strings","workWeekDays","renderGoToTodayButton","goTodayEnabled","getFullYear","getMonth","button","classes","goTodayButton","onClick","onGotoToday","onKeyDown","onButtonKeyDown","type","disabled","goToToday","onNavigateDayDate","focusOnNavigatedDay","onNavigateMonthDate","monthPickerOnly","onHeaderSelect","callback","ev","key","onDatePickerPopupKeyDown","preventDefault","stopPropagation","ctrlKey","todayDateString","selectedDateString","todayDateFormatString","replace","formatMonthDayYear","selectedDateFormatString","dateStringFormatter","formatMonthYear","selectionAndTodayString","div","ref","root","liveRegion","aria-live","aria-atomic","span","gridLabel","navigatedDate","onNavigateDate","navigationIcons","divider","monthPickerWrapper","displayName","innerWidth"],"mappings":"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"}
1
+ {"version":3,"sources":["../src/components/Calendar/Calendar.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Backspace, Enter, Escape, PageDown, PageUp, Space } from '@fluentui/keyboard-keys';\nimport { useControllableState } from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport {\n addMonths,\n addYears,\n DateRangeType,\n DayOfWeek,\n DEFAULT_CALENDAR_STRINGS,\n DEFAULT_DATE_FORMATTING,\n FirstWeekOfYear,\n focusAsync,\n} from '../../utils';\nimport { CalendarDay } from '../CalendarDay/CalendarDay';\nimport { CalendarMonth } from '../CalendarMonth/CalendarMonth';\nimport { defaultNavigationIcons } from './calendarNavigationIcons';\nimport { useCalendarStyles_unstable } from './useCalendarStyles.styles';\nimport type { ICalendarDay } from '../CalendarDay/CalendarDay.types';\nimport type { ICalendarMonth } from '../CalendarMonth/CalendarMonth.types';\nimport type { CalendarProps } from './Calendar.types';\n\nconst MIN_SIZE_FORCE_OVERLAY = 440;\n\nconst defaultWorkWeekDays: DayOfWeek[] = [\n DayOfWeek.Monday,\n DayOfWeek.Tuesday,\n DayOfWeek.Wednesday,\n DayOfWeek.Thursday,\n DayOfWeek.Friday,\n];\n\nfunction useDateState(props: CalendarProps) {\n const { value, today: todayProp, onSelectDate } = props;\n\n const today = React.useMemo(() => todayProp ?? new Date(), [todayProp]);\n\n /** The currently selected date in the calendar */\n const [selectedDate, setSelectedDate] = useControllableState({\n state: value,\n defaultState: value ? undefined : today,\n initialState: today,\n });\n\n /** The currently focused date in the day picker, but not necessarily selected */\n const [navigatedDay = today, setNavigatedDay] = React.useState(value);\n\n /** The currently focused date in the month picker, but not necessarily selected */\n const [navigatedMonth = today, setNavigatedMonth] = React.useState(value);\n\n /** If using a controlled value, when that value changes, navigate to that date */\n const [lastSelectedDate = today, setLastSelectedDate] = React.useState(value);\n if (value && lastSelectedDate.valueOf() !== value.valueOf()) {\n setNavigatedDay(value);\n setNavigatedMonth(value);\n setLastSelectedDate(value);\n }\n\n const navigateMonth = (date: Date) => {\n setNavigatedMonth(date);\n };\n\n const navigateDay = (date: Date) => {\n setNavigatedMonth(date);\n setNavigatedDay(date);\n };\n\n const onDateSelected = (date: Date, selectedDateRangeArray?: Date[]) => {\n setNavigatedMonth(date);\n setNavigatedDay(date);\n setSelectedDate(date);\n onSelectDate?.(date, selectedDateRangeArray);\n };\n\n return [selectedDate, navigatedDay, navigatedMonth, onDateSelected, navigateDay, navigateMonth] as const;\n}\n\nfunction useVisibilityState({\n isDayPickerVisible: isDayPickerVisibleProp,\n isMonthPickerVisible: isMonthPickerVisibleProp,\n showMonthPickerAsOverlay,\n}: CalendarProps) {\n /** State used to show/hide month picker */\n const showMonthPickerAsOverlayState = useShowMonthPickerAsOverlay({\n isDayPickerVisible: isDayPickerVisibleProp,\n showMonthPickerAsOverlay,\n });\n\n const [isMonthPickerVisible, setIsMonthPickerVisible] = React.useState(() =>\n showMonthPickerAsOverlayState ? false : isMonthPickerVisibleProp ?? false,\n );\n /** State used to show/hide day picker */\n const [isDayPickerVisible, setIsDayPickerVisible] = React.useState(() =>\n showMonthPickerAsOverlayState ? true : isDayPickerVisibleProp ?? true,\n );\n\n const toggleDayMonthPickerVisibility = () => {\n setIsMonthPickerVisible(!isMonthPickerVisible);\n setIsDayPickerVisible(!isDayPickerVisible);\n };\n\n return [isMonthPickerVisible, isDayPickerVisible, toggleDayMonthPickerVisibility] as const;\n}\n\nfunction useFocusLogic({ componentRef }: CalendarProps, isDayPickerVisible: boolean, isMonthPickerVisible: boolean) {\n const dayPicker = React.useRef<ICalendarDay>(null);\n const monthPicker = React.useRef<ICalendarMonth>(null);\n const focusOnUpdate = React.useRef(false);\n const { targetDocument } = useFluent();\n const win = targetDocument?.defaultView;\n\n const focus = React.useCallback(() => {\n if (isDayPickerVisible && dayPicker.current) {\n focusAsync(dayPicker.current, win);\n } else if (isMonthPickerVisible && monthPicker.current) {\n focusAsync(monthPicker.current, win);\n }\n }, [isDayPickerVisible, isMonthPickerVisible, win]);\n\n React.useImperativeHandle(componentRef, () => ({ focus }), [focus]);\n\n React.useEffect(() => {\n if (focusOnUpdate.current) {\n focus();\n focusOnUpdate.current = false;\n }\n });\n\n const focusOnNextUpdate = () => {\n focusOnUpdate.current = true;\n };\n\n return [dayPicker, monthPicker, focusOnNextUpdate] as const;\n}\n\n/**\n * @internal\n */\nexport const Calendar: React.FunctionComponent<CalendarProps> = React.forwardRef<HTMLDivElement, CalendarProps>(\n (props, forwardedRef) => {\n const {\n allFocusable = false,\n calendarDayProps,\n calendarMonthProps,\n className,\n componentRef,\n dateRangeType = DateRangeType.Day,\n dateTimeFormatter = DEFAULT_DATE_FORMATTING,\n firstDayOfWeek = DayOfWeek.Sunday,\n firstWeekOfYear = FirstWeekOfYear.FirstDay,\n highlightCurrentMonth = false,\n highlightSelectedMonth = false,\n id,\n isDayPickerVisible: isDayPickerVisibleProp = true,\n isMonthPickerVisible: isMonthPickerVisibleProp = true,\n maxDate,\n minDate,\n onDismiss,\n onSelectDate,\n restrictedDates,\n showCloseButton = false,\n showGoToToday = true,\n showMonthPickerAsOverlay: showMonthPickerAsOverlayProp = false,\n showSixWeeksByDefault = false,\n showWeekNumbers = false,\n strings = DEFAULT_CALENDAR_STRINGS,\n today: todayProp,\n value,\n workWeekDays = defaultWorkWeekDays,\n } = props;\n\n const today = React.useMemo(() => {\n return todayProp ?? new Date();\n }, [todayProp]);\n\n const [selectedDate, navigatedDay, navigatedMonth, onDateSelected, navigateDay, navigateMonth] = useDateState({\n onSelectDate,\n value,\n today,\n });\n const [isMonthPickerVisible, isDayPickerVisible, toggleDayMonthPickerVisibility] = useVisibilityState({\n isDayPickerVisible: isDayPickerVisibleProp,\n isMonthPickerVisible: isMonthPickerVisibleProp,\n showMonthPickerAsOverlay: showMonthPickerAsOverlayProp,\n });\n const [dayPicker, monthPicker, focusOnNextUpdate] = useFocusLogic(\n { componentRef },\n isDayPickerVisible,\n isMonthPickerVisible,\n );\n\n const renderGoToTodayButton = () => {\n let goTodayEnabled = showGoToToday;\n\n if (goTodayEnabled && today) {\n goTodayEnabled =\n navigatedDay.getFullYear() !== today.getFullYear() ||\n navigatedDay.getMonth() !== today.getMonth() ||\n navigatedMonth.getFullYear() !== today.getFullYear() ||\n navigatedMonth.getMonth() !== today.getMonth();\n }\n\n return (\n showGoToToday && (\n <button\n className={classes.goTodayButton}\n onClick={onGotoToday}\n onKeyDown={onButtonKeyDown(onGotoToday)}\n type=\"button\"\n disabled={!goTodayEnabled}\n >\n {strings!.goToToday}\n </button>\n )\n );\n };\n\n const onNavigateDayDate = (date: Date, focusOnNavigatedDay: boolean): void => {\n navigateDay(date);\n if (focusOnNavigatedDay) {\n focusOnNextUpdate();\n }\n };\n\n const onNavigateMonthDate = (date: Date, focusOnNavigatedDay: boolean): void => {\n if (focusOnNavigatedDay) {\n focusOnNextUpdate();\n }\n\n if (!focusOnNavigatedDay) {\n navigateMonth(date);\n return;\n }\n\n if (monthPickerOnly) {\n onDateSelected(date);\n }\n\n navigateDay(date);\n };\n\n const showMonthPickerAsOverlay = useShowMonthPickerAsOverlay({\n isDayPickerVisible: isDayPickerVisibleProp,\n showMonthPickerAsOverlay: showMonthPickerAsOverlayProp,\n });\n\n const onHeaderSelect = showMonthPickerAsOverlay\n ? (): void => {\n toggleDayMonthPickerVisibility();\n\n focusOnNextUpdate();\n }\n : undefined;\n\n const onGotoToday = (): void => {\n navigateDay(today!);\n if (showMonthPickerAsOverlay && isMonthPickerVisible) {\n toggleDayMonthPickerVisibility();\n }\n focusOnNextUpdate();\n };\n\n const onButtonKeyDown = (callback: () => void): ((ev: React.KeyboardEvent<HTMLButtonElement>) => void) => {\n return (ev: React.KeyboardEvent<HTMLButtonElement>) => {\n switch (ev.key) {\n case Enter:\n case Space:\n callback();\n break;\n }\n };\n };\n\n const onDatePickerPopupKeyDown = (ev: React.KeyboardEvent<HTMLElement>): void => {\n switch (ev.key) {\n case Enter:\n ev.preventDefault();\n break;\n\n case Backspace:\n ev.preventDefault();\n break;\n\n case Escape:\n ev.stopPropagation();\n onDismiss?.();\n break;\n\n case PageUp:\n if (ev.ctrlKey) {\n // go to next year\n navigateDay(addYears(navigatedDay, 1));\n } else {\n // go to next month\n navigateDay(addMonths(navigatedDay, 1));\n }\n ev.preventDefault();\n break;\n case PageDown:\n if (ev.ctrlKey) {\n // go to previous year\n navigateDay(addYears(navigatedDay, -1));\n } else {\n // go to previous month\n navigateDay(addMonths(navigatedDay, -1));\n }\n ev.preventDefault();\n break;\n default:\n break;\n }\n };\n\n const monthPickerOnly = !showMonthPickerAsOverlay && !isDayPickerVisible;\n\n const classes = useCalendarStyles_unstable({\n className,\n isDayPickerVisible,\n isMonthPickerVisible,\n showWeekNumbers,\n });\n\n let todayDateString: string = '';\n let selectedDateString: string = '';\n if (dateTimeFormatter && strings!.todayDateFormatString) {\n todayDateString = strings!.todayDateFormatString.replace(\n '{0}',\n dateTimeFormatter.formatMonthDayYear(today, strings!),\n );\n }\n if (dateTimeFormatter && strings!.selectedDateFormatString && selectedDate) {\n const dateStringFormatter = monthPickerOnly\n ? dateTimeFormatter.formatMonthYear\n : dateTimeFormatter.formatMonthDayYear;\n selectedDateString = strings!.selectedDateFormatString.replace(\n '{0}',\n dateStringFormatter(selectedDate, strings!),\n );\n }\n const selectionAndTodayString = selectedDateString + ', ' + todayDateString;\n\n return (\n <div id={id} ref={forwardedRef} className={classes.root} onKeyDown={onDatePickerPopupKeyDown}>\n <div className={classes.liveRegion} aria-live=\"polite\" aria-atomic=\"true\">\n <span>{selectedDateString}</span>\n </div>\n {isDayPickerVisible && (\n <CalendarDay\n gridLabel={selectionAndTodayString}\n selectedDate={selectedDate ?? today}\n navigatedDate={navigatedDay ?? today}\n today={today}\n onSelectDate={onDateSelected}\n // eslint-disable-next-line react/jsx-no-bind\n onNavigateDate={onNavigateDayDate}\n onDismiss={onDismiss}\n firstDayOfWeek={firstDayOfWeek!}\n dateRangeType={dateRangeType!}\n strings={strings!}\n // eslint-disable-next-line react/jsx-no-bind\n onHeaderSelect={onHeaderSelect}\n showWeekNumbers={showWeekNumbers}\n firstWeekOfYear={firstWeekOfYear!}\n dateTimeFormatter={dateTimeFormatter!}\n showSixWeeksByDefault={showSixWeeksByDefault}\n minDate={minDate}\n maxDate={maxDate}\n navigationIcons={defaultNavigationIcons}\n restrictedDates={restrictedDates}\n workWeekDays={workWeekDays}\n componentRef={dayPicker}\n showCloseButton={showCloseButton}\n allFocusable={allFocusable}\n {...calendarDayProps} // at end of list so consumer's custom functions take precedence\n />\n )}\n {isDayPickerVisible && isMonthPickerVisible && <div className={classes.divider} />}\n {isMonthPickerVisible ? (\n <div className={classes.monthPickerWrapper}>\n <CalendarMonth\n navigatedDate={navigatedMonth}\n selectedDate={navigatedDay}\n strings={strings!}\n // eslint-disable-next-line react/jsx-no-bind\n onNavigateDate={onNavigateMonthDate}\n today={today}\n highlightCurrentMonth={highlightCurrentMonth!}\n highlightSelectedMonth={highlightSelectedMonth!}\n // eslint-disable-next-line react/jsx-no-bind\n onHeaderSelect={onHeaderSelect}\n dateTimeFormatter={dateTimeFormatter!}\n minDate={minDate}\n maxDate={maxDate}\n componentRef={monthPicker}\n navigationIcons={defaultNavigationIcons}\n {...calendarMonthProps} // at end of list so consumer's custom functions take precedence\n />\n {renderGoToTodayButton()}\n </div>\n ) : (\n renderGoToTodayButton()\n )}\n </div>\n );\n },\n);\nCalendar.displayName = 'Calendar';\n\nconst useShowMonthPickerAsOverlay = ({ isDayPickerVisible, showMonthPickerAsOverlay }: CalendarProps) => {\n const { targetDocument } = useFluent();\n const win = targetDocument?.defaultView;\n return showMonthPickerAsOverlay || (isDayPickerVisible && win && win.innerWidth <= MIN_SIZE_FORCE_OVERLAY);\n};\n"],"names":["React","Backspace","Enter","Escape","PageDown","PageUp","Space","useControllableState","useFluent_unstable","useFluent","addMonths","addYears","DateRangeType","DayOfWeek","DEFAULT_CALENDAR_STRINGS","DEFAULT_DATE_FORMATTING","FirstWeekOfYear","focusAsync","CalendarDay","CalendarMonth","defaultNavigationIcons","useCalendarStyles_unstable","MIN_SIZE_FORCE_OVERLAY","defaultWorkWeekDays","Monday","Tuesday","Wednesday","Thursday","Friday","useDateState","props","value","today","todayProp","onSelectDate","useMemo","Date","selectedDate","setSelectedDate","state","defaultState","undefined","initialState","navigatedDay","setNavigatedDay","useState","navigatedMonth","setNavigatedMonth","lastSelectedDate","setLastSelectedDate","valueOf","navigateMonth","date","navigateDay","onDateSelected","selectedDateRangeArray","useVisibilityState","isDayPickerVisible","isDayPickerVisibleProp","isMonthPickerVisible","isMonthPickerVisibleProp","showMonthPickerAsOverlay","showMonthPickerAsOverlayState","useShowMonthPickerAsOverlay","setIsMonthPickerVisible","setIsDayPickerVisible","toggleDayMonthPickerVisibility","useFocusLogic","componentRef","dayPicker","useRef","monthPicker","focusOnUpdate","targetDocument","win","defaultView","focus","useCallback","current","useImperativeHandle","useEffect","focusOnNextUpdate","Calendar","forwardRef","forwardedRef","allFocusable","calendarDayProps","calendarMonthProps","className","dateRangeType","Day","dateTimeFormatter","firstDayOfWeek","Sunday","firstWeekOfYear","FirstDay","highlightCurrentMonth","highlightSelectedMonth","id","maxDate","minDate","onDismiss","restrictedDates","showCloseButton","showGoToToday","showMonthPickerAsOverlayProp","showSixWeeksByDefault","showWeekNumbers","strings","workWeekDays","renderGoToTodayButton","goTodayEnabled","getFullYear","getMonth","button","classes","goTodayButton","onClick","onGotoToday","onKeyDown","onButtonKeyDown","type","disabled","goToToday","onNavigateDayDate","focusOnNavigatedDay","onNavigateMonthDate","monthPickerOnly","onHeaderSelect","callback","ev","key","onDatePickerPopupKeyDown","preventDefault","stopPropagation","ctrlKey","todayDateString","selectedDateString","todayDateFormatString","replace","formatMonthDayYear","selectedDateFormatString","dateStringFormatter","formatMonthYear","selectionAndTodayString","div","ref","root","liveRegion","aria-live","aria-atomic","span","gridLabel","navigatedDate","onNavigateDate","navigationIcons","divider","monthPickerWrapper","displayName","innerWidth"],"mappings":"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"}
@@ -120,7 +120,7 @@ const CalendarDayGrid = (props)=>{
120
120
  getRefsFromDayInfos
121
121
  };
122
122
  const arrowNavigationAttributes = (0, _reacttabster.useArrowNavigationGroup)({
123
- axis: 'grid'
123
+ axis: 'grid-linear'
124
124
  });
125
125
  return /*#__PURE__*/ _react.createElement("table", {
126
126
  className: (0, _react1.mergeClasses)(classNames.table, props.className),
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/CalendarDayGrid/CalendarDayGrid.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport { useId } from '@fluentui/react-utilities';\nimport { getBoundedDateRange, getDateRangeArray, isRestrictedDate, DateRangeType, DayOfWeek } from '../../utils';\nimport { useCalendarDayGridStyles_unstable } from './useCalendarDayGridStyles.styles';\nimport { CalendarMonthHeaderRow } from './CalendarMonthHeaderRow';\nimport { CalendarGridRow } from './CalendarGridRow';\nimport { useWeeks } from './useWeeks';\nimport { useWeekCornerStyles, WeekCorners } from './useWeekCornerStyles.styles';\nimport { mergeClasses } from '@griffel/react';\nimport type { Day } from '../../utils';\nimport type { CalendarDayGridProps } from './CalendarDayGrid.types';\n\nexport interface DayInfo extends Day {\n onSelected: () => void;\n setRef(element: HTMLElement | null): void;\n}\n\nfunction useDayRefs() {\n const daysRef = React.useRef<Record<string, HTMLElement>>({});\n\n const getSetRefCallback = (dayKey: string) => (element: HTMLElement | null) => {\n if (element === null) {\n delete daysRef.current[dayKey];\n } else {\n daysRef.current[dayKey] = element;\n }\n };\n\n return [daysRef, getSetRefCallback] as const;\n}\n\nfunction useAnimateBackwards(weeks: DayInfo[][]): boolean | undefined {\n const previousNavigatedDateRef = React.useRef<Date | undefined>(undefined);\n React.useEffect(() => {\n previousNavigatedDateRef.current = weeks[0][0].originalDate;\n });\n const previousNavigatedDate = previousNavigatedDateRef.current;\n\n if (!previousNavigatedDate || previousNavigatedDate.getTime() === weeks[0][0].originalDate.getTime()) {\n return undefined;\n } else if (previousNavigatedDate <= weeks[0][0].originalDate) {\n return false;\n } else {\n return true;\n }\n}\n\nexport const CalendarDayGrid: React.FunctionComponent<CalendarDayGridProps> = props => {\n const navigatedDayRef = React.useRef<HTMLTableCellElement>(\n null,\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n ) as React.MutableRefObject<HTMLTableCellElement | null>;\n\n const activeDescendantId = useId();\n\n const onSelectDate = (selectedDate: Date): void => {\n const { firstDayOfWeek, minDate, maxDate, workWeekDays, daysToSelectInDayView, restrictedDates } = props;\n const restrictedDatesOptions = { minDate, maxDate, restrictedDates };\n\n let dateRange = getDateRangeArray(selectedDate, dateRangeType, firstDayOfWeek, workWeekDays, daysToSelectInDayView);\n dateRange = getBoundedDateRange(dateRange, minDate, maxDate);\n\n dateRange = dateRange.filter((d: Date) => {\n return !isRestrictedDate(d, restrictedDatesOptions);\n });\n\n props.onSelectDate?.(selectedDate, dateRange);\n props.onNavigateDate?.(selectedDate, true);\n };\n\n const [daysRef, getSetRefCallback] = useDayRefs();\n\n const weeks = useWeeks(props, onSelectDate, getSetRefCallback);\n const animateBackwards = useAnimateBackwards(weeks);\n const [getWeekCornerStyles, calculateRoundedStyles] = useWeekCornerStyles(props);\n\n React.useImperativeHandle(\n props.componentRef,\n () => ({\n focus() {\n navigatedDayRef.current?.focus?.();\n },\n }),\n [],\n );\n\n /**\n *\n * Section for setting hover/pressed styles. Because we want arbitrary blobs of days to be selectable, to support\n * highlighting every day in the month for month view, css :hover style isn't enough, so we need mouse callbacks\n * to set classnames on all relevant child refs to apply the styling\n *\n */\n const getDayInfosInRangeOfDay = (dayToCompare: DayInfo): DayInfo[] => {\n // The hover state looks weird with non-contiguous days in work week view. In work week, show week hover state\n const dateRangeHoverType = getDateRangeTypeToUse(props.dateRangeType, props.workWeekDays);\n\n // gets all the dates for the given date range type that are in the same date range as the given day\n const dateRange = getDateRangeArray(\n dayToCompare.originalDate,\n dateRangeHoverType,\n props.firstDayOfWeek,\n props.workWeekDays,\n props.daysToSelectInDayView,\n ).map((date: Date) => date.getTime());\n\n // gets all the day refs for the given dates\n const dayInfosInRange = weeks.reduce((accumulatedValue: DayInfo[], currentWeek: DayInfo[]) => {\n return accumulatedValue.concat(\n currentWeek.filter((weekDay: DayInfo) => dateRange.indexOf(weekDay.originalDate.getTime()) !== -1),\n );\n }, []);\n\n return dayInfosInRange;\n };\n\n const getRefsFromDayInfos = (dayInfosInRange: DayInfo[]): (HTMLElement | null)[] => {\n let dayRefs: (HTMLElement | null)[] = [];\n dayRefs = dayInfosInRange.map((dayInfo: DayInfo) => daysRef.current[dayInfo.key]);\n\n return dayRefs;\n };\n\n const {\n gridLabel,\n dateRangeType,\n showWeekNumbers,\n labelledBy,\n lightenDaysOutsideNavigatedMonth,\n animationDirection,\n } = props;\n\n const classNames = useCalendarDayGridStyles_unstable({\n animateBackwards,\n animationDirection,\n dateRangeType,\n lightenDaysOutsideNavigatedMonth:\n lightenDaysOutsideNavigatedMonth === undefined ? true : lightenDaysOutsideNavigatedMonth,\n showWeekNumbers,\n });\n\n // When the month is highlighted get the corner dates so that styles can be added to them\n const weekCorners: WeekCorners = getWeekCornerStyles(weeks!);\n const partialWeekProps = {\n weeks,\n navigatedDayRef,\n calculateRoundedStyles,\n activeDescendantId,\n classNames,\n weekCorners,\n getDayInfosInRangeOfDay,\n getRefsFromDayInfos,\n } as const;\n\n const arrowNavigationAttributes = useArrowNavigationGroup({ axis: 'grid' });\n\n return (\n <table\n className={mergeClasses(classNames.table, props.className)}\n aria-multiselectable=\"false\"\n aria-label={gridLabel}\n aria-labelledby={labelledBy}\n aria-activedescendant={activeDescendantId}\n role=\"grid\"\n {...arrowNavigationAttributes}\n >\n <tbody>\n <CalendarMonthHeaderRow {...props} classNames={classNames} weeks={weeks} />\n <CalendarGridRow\n {...props}\n {...partialWeekProps}\n week={weeks[0]}\n weekIndex={-1}\n rowClassName={classNames.firstTransitionWeek}\n aria-role=\"presentation\"\n ariaHidden={true}\n />\n {weeks!.slice(1, weeks!.length - 1).map((week: DayInfo[], weekIndex: number) => (\n <CalendarGridRow\n {...props}\n {...partialWeekProps}\n key={weekIndex}\n week={week}\n weekIndex={weekIndex}\n rowClassName={classNames.weekRow}\n />\n ))}\n <CalendarGridRow\n {...props}\n {...partialWeekProps}\n week={weeks![weeks!.length - 1]}\n weekIndex={-2}\n rowClassName={classNames.lastTransitionWeek}\n aria-role=\"presentation\"\n ariaHidden={true}\n />\n </tbody>\n </table>\n );\n};\nCalendarDayGrid.displayName = 'CalendarDayGrid';\n\n/**\n * When given work week, if the days are non-contiguous, the hover states look really weird. So for non-contiguous\n * work weeks, we'll just show week view instead.\n */\nfunction getDateRangeTypeToUse(dateRangeType: DateRangeType, workWeekDays: DayOfWeek[] | undefined): DateRangeType {\n if (workWeekDays && dateRangeType === DateRangeType.WorkWeek) {\n const sortedWWDays = workWeekDays.slice().sort();\n let isContiguous = true;\n for (let i = 1; i < sortedWWDays.length; i++) {\n if (sortedWWDays[i] !== sortedWWDays[i - 1] + 1) {\n isContiguous = false;\n break;\n }\n }\n\n if (!isContiguous || workWeekDays.length === 0) {\n return DateRangeType.Week;\n }\n }\n\n return dateRangeType;\n}\n"],"names":["React","useArrowNavigationGroup","useId","getBoundedDateRange","getDateRangeArray","isRestrictedDate","DateRangeType","useCalendarDayGridStyles_unstable","CalendarMonthHeaderRow","CalendarGridRow","useWeeks","useWeekCornerStyles","mergeClasses","useDayRefs","daysRef","useRef","getSetRefCallback","dayKey","element","current","useAnimateBackwards","weeks","previousNavigatedDateRef","undefined","useEffect","originalDate","previousNavigatedDate","getTime","CalendarDayGrid","props","navigatedDayRef","activeDescendantId","onSelectDate","selectedDate","firstDayOfWeek","minDate","maxDate","workWeekDays","daysToSelectInDayView","restrictedDates","restrictedDatesOptions","dateRange","dateRangeType","filter","d","onNavigateDate","animateBackwards","getWeekCornerStyles","calculateRoundedStyles","useImperativeHandle","componentRef","focus","getDayInfosInRangeOfDay","dayToCompare","dateRangeHoverType","getDateRangeTypeToUse","map","date","dayInfosInRange","reduce","accumulatedValue","currentWeek","concat","weekDay","indexOf","getRefsFromDayInfos","dayRefs","dayInfo","key","gridLabel","showWeekNumbers","labelledBy","lightenDaysOutsideNavigatedMonth","animationDirection","classNames","weekCorners","partialWeekProps","arrowNavigationAttributes","axis","table","className","aria-multiselectable","aria-label","aria-labelledby","aria-activedescendant","role","tbody","week","weekIndex","rowClassName","firstTransitionWeek","aria-role","ariaHidden","slice","length","weekRow","lastTransitionWeek","displayName","WorkWeek","sortedWWDays","sort","isContiguous","i","Week"],"mappings":"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"}
1
+ {"version":3,"sources":["../src/components/CalendarDayGrid/CalendarDayGrid.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport { useId } from '@fluentui/react-utilities';\nimport { getBoundedDateRange, getDateRangeArray, isRestrictedDate, DateRangeType, DayOfWeek } from '../../utils';\nimport { useCalendarDayGridStyles_unstable } from './useCalendarDayGridStyles.styles';\nimport { CalendarMonthHeaderRow } from './CalendarMonthHeaderRow';\nimport { CalendarGridRow } from './CalendarGridRow';\nimport { useWeeks } from './useWeeks';\nimport { useWeekCornerStyles, WeekCorners } from './useWeekCornerStyles.styles';\nimport { mergeClasses } from '@griffel/react';\nimport type { Day } from '../../utils';\nimport type { CalendarDayGridProps } from './CalendarDayGrid.types';\n\nexport interface DayInfo extends Day {\n onSelected: () => void;\n setRef(element: HTMLElement | null): void;\n}\n\nfunction useDayRefs() {\n const daysRef = React.useRef<Record<string, HTMLElement>>({});\n\n const getSetRefCallback = (dayKey: string) => (element: HTMLElement | null) => {\n if (element === null) {\n delete daysRef.current[dayKey];\n } else {\n daysRef.current[dayKey] = element;\n }\n };\n\n return [daysRef, getSetRefCallback] as const;\n}\n\nfunction useAnimateBackwards(weeks: DayInfo[][]): boolean | undefined {\n const previousNavigatedDateRef = React.useRef<Date | undefined>(undefined);\n React.useEffect(() => {\n previousNavigatedDateRef.current = weeks[0][0].originalDate;\n });\n const previousNavigatedDate = previousNavigatedDateRef.current;\n\n if (!previousNavigatedDate || previousNavigatedDate.getTime() === weeks[0][0].originalDate.getTime()) {\n return undefined;\n } else if (previousNavigatedDate <= weeks[0][0].originalDate) {\n return false;\n } else {\n return true;\n }\n}\n\nexport const CalendarDayGrid: React.FunctionComponent<CalendarDayGridProps> = props => {\n const navigatedDayRef = React.useRef<HTMLTableCellElement>(\n null,\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n ) as React.MutableRefObject<HTMLTableCellElement | null>;\n\n const activeDescendantId = useId();\n\n const onSelectDate = (selectedDate: Date): void => {\n const { firstDayOfWeek, minDate, maxDate, workWeekDays, daysToSelectInDayView, restrictedDates } = props;\n const restrictedDatesOptions = { minDate, maxDate, restrictedDates };\n\n let dateRange = getDateRangeArray(selectedDate, dateRangeType, firstDayOfWeek, workWeekDays, daysToSelectInDayView);\n dateRange = getBoundedDateRange(dateRange, minDate, maxDate);\n\n dateRange = dateRange.filter((d: Date) => {\n return !isRestrictedDate(d, restrictedDatesOptions);\n });\n\n props.onSelectDate?.(selectedDate, dateRange);\n props.onNavigateDate?.(selectedDate, true);\n };\n\n const [daysRef, getSetRefCallback] = useDayRefs();\n\n const weeks = useWeeks(props, onSelectDate, getSetRefCallback);\n const animateBackwards = useAnimateBackwards(weeks);\n const [getWeekCornerStyles, calculateRoundedStyles] = useWeekCornerStyles(props);\n\n React.useImperativeHandle(\n props.componentRef,\n () => ({\n focus() {\n navigatedDayRef.current?.focus?.();\n },\n }),\n [],\n );\n\n /**\n *\n * Section for setting hover/pressed styles. Because we want arbitrary blobs of days to be selectable, to support\n * highlighting every day in the month for month view, css :hover style isn't enough, so we need mouse callbacks\n * to set classnames on all relevant child refs to apply the styling\n *\n */\n const getDayInfosInRangeOfDay = (dayToCompare: DayInfo): DayInfo[] => {\n // The hover state looks weird with non-contiguous days in work week view. In work week, show week hover state\n const dateRangeHoverType = getDateRangeTypeToUse(props.dateRangeType, props.workWeekDays);\n\n // gets all the dates for the given date range type that are in the same date range as the given day\n const dateRange = getDateRangeArray(\n dayToCompare.originalDate,\n dateRangeHoverType,\n props.firstDayOfWeek,\n props.workWeekDays,\n props.daysToSelectInDayView,\n ).map((date: Date) => date.getTime());\n\n // gets all the day refs for the given dates\n const dayInfosInRange = weeks.reduce((accumulatedValue: DayInfo[], currentWeek: DayInfo[]) => {\n return accumulatedValue.concat(\n currentWeek.filter((weekDay: DayInfo) => dateRange.indexOf(weekDay.originalDate.getTime()) !== -1),\n );\n }, []);\n\n return dayInfosInRange;\n };\n\n const getRefsFromDayInfos = (dayInfosInRange: DayInfo[]): (HTMLElement | null)[] => {\n let dayRefs: (HTMLElement | null)[] = [];\n dayRefs = dayInfosInRange.map((dayInfo: DayInfo) => daysRef.current[dayInfo.key]);\n\n return dayRefs;\n };\n\n const {\n gridLabel,\n dateRangeType,\n showWeekNumbers,\n labelledBy,\n lightenDaysOutsideNavigatedMonth,\n animationDirection,\n } = props;\n\n const classNames = useCalendarDayGridStyles_unstable({\n animateBackwards,\n animationDirection,\n dateRangeType,\n lightenDaysOutsideNavigatedMonth:\n lightenDaysOutsideNavigatedMonth === undefined ? true : lightenDaysOutsideNavigatedMonth,\n showWeekNumbers,\n });\n\n // When the month is highlighted get the corner dates so that styles can be added to them\n const weekCorners: WeekCorners = getWeekCornerStyles(weeks!);\n const partialWeekProps = {\n weeks,\n navigatedDayRef,\n calculateRoundedStyles,\n activeDescendantId,\n classNames,\n weekCorners,\n getDayInfosInRangeOfDay,\n getRefsFromDayInfos,\n } as const;\n\n const arrowNavigationAttributes = useArrowNavigationGroup({ axis: 'grid-linear' });\n\n return (\n <table\n className={mergeClasses(classNames.table, props.className)}\n aria-multiselectable=\"false\"\n aria-label={gridLabel}\n aria-labelledby={labelledBy}\n aria-activedescendant={activeDescendantId}\n role=\"grid\"\n {...arrowNavigationAttributes}\n >\n <tbody>\n <CalendarMonthHeaderRow {...props} classNames={classNames} weeks={weeks} />\n <CalendarGridRow\n {...props}\n {...partialWeekProps}\n week={weeks[0]}\n weekIndex={-1}\n rowClassName={classNames.firstTransitionWeek}\n aria-role=\"presentation\"\n ariaHidden={true}\n />\n {weeks!.slice(1, weeks!.length - 1).map((week: DayInfo[], weekIndex: number) => (\n <CalendarGridRow\n {...props}\n {...partialWeekProps}\n key={weekIndex}\n week={week}\n weekIndex={weekIndex}\n rowClassName={classNames.weekRow}\n />\n ))}\n <CalendarGridRow\n {...props}\n {...partialWeekProps}\n week={weeks![weeks!.length - 1]}\n weekIndex={-2}\n rowClassName={classNames.lastTransitionWeek}\n aria-role=\"presentation\"\n ariaHidden={true}\n />\n </tbody>\n </table>\n );\n};\nCalendarDayGrid.displayName = 'CalendarDayGrid';\n\n/**\n * When given work week, if the days are non-contiguous, the hover states look really weird. So for non-contiguous\n * work weeks, we'll just show week view instead.\n */\nfunction getDateRangeTypeToUse(dateRangeType: DateRangeType, workWeekDays: DayOfWeek[] | undefined): DateRangeType {\n if (workWeekDays && dateRangeType === DateRangeType.WorkWeek) {\n const sortedWWDays = workWeekDays.slice().sort();\n let isContiguous = true;\n for (let i = 1; i < sortedWWDays.length; i++) {\n if (sortedWWDays[i] !== sortedWWDays[i - 1] + 1) {\n isContiguous = false;\n break;\n }\n }\n\n if (!isContiguous || workWeekDays.length === 0) {\n return DateRangeType.Week;\n }\n }\n\n return dateRangeType;\n}\n"],"names":["React","useArrowNavigationGroup","useId","getBoundedDateRange","getDateRangeArray","isRestrictedDate","DateRangeType","useCalendarDayGridStyles_unstable","CalendarMonthHeaderRow","CalendarGridRow","useWeeks","useWeekCornerStyles","mergeClasses","useDayRefs","daysRef","useRef","getSetRefCallback","dayKey","element","current","useAnimateBackwards","weeks","previousNavigatedDateRef","undefined","useEffect","originalDate","previousNavigatedDate","getTime","CalendarDayGrid","props","navigatedDayRef","activeDescendantId","onSelectDate","selectedDate","firstDayOfWeek","minDate","maxDate","workWeekDays","daysToSelectInDayView","restrictedDates","restrictedDatesOptions","dateRange","dateRangeType","filter","d","onNavigateDate","animateBackwards","getWeekCornerStyles","calculateRoundedStyles","useImperativeHandle","componentRef","focus","getDayInfosInRangeOfDay","dayToCompare","dateRangeHoverType","getDateRangeTypeToUse","map","date","dayInfosInRange","reduce","accumulatedValue","currentWeek","concat","weekDay","indexOf","getRefsFromDayInfos","dayRefs","dayInfo","key","gridLabel","showWeekNumbers","labelledBy","lightenDaysOutsideNavigatedMonth","animationDirection","classNames","weekCorners","partialWeekProps","arrowNavigationAttributes","axis","table","className","aria-multiselectable","aria-label","aria-labelledby","aria-activedescendant","role","tbody","week","weekIndex","rowClassName","firstTransitionWeek","aria-role","ariaHidden","slice","length","weekRow","lastTransitionWeek","displayName","WorkWeek","sortedWWDays","sort","isContiguous","i","Week"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-calendar-compat",
3
- "version": "0.3.19",
3
+ "version": "0.3.21",
4
4
  "description": "Calendar compat component for Fluent UI v9",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",