@fluentui/react-calendar-compat 0.0.17 → 0.0.18

package/CHANGELOG.md

@@ -1,12 +1,24 @@
 # Change Log - @fluentui/react-calendar-compat
 
-This log was last generated on Thu, 18 Jan 2024 14:19:09 GMT and should not be manually modified.
+This log was last generated on Tue, 23 Jan 2024 15:06:23 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [0.0.18](https://github.com/microsoft/fluentui/tree/@fluentui/react-calendar-compat_v0.0.18)
+
+Tue, 23 Jan 2024 15:06:23 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-calendar-compat_v0.0.17..@fluentui/react-calendar-compat_v0.0.18)
+
+### Patches
+
+- feat: Add navigationIcons prop to allow customization of Calendar's navigation icons. ([PR #30329](https://github.com/microsoft/fluentui/pull/30329) by estebanmu@microsoft.com)
+- Bump @fluentui/react-jsx-runtime to v9.0.28 ([PR #30359](https://github.com/microsoft/fluentui/pull/30359) by beachball)
+- Bump @fluentui/react-tabster to v9.17.4 ([PR #30359](https://github.com/microsoft/fluentui/pull/30359) by beachball)
+- Bump @fluentui/react-utilities to v9.17.0 ([PR #30359](https://github.com/microsoft/fluentui/pull/30359) by beachball)
+
 ## [0.0.17](https://github.com/microsoft/fluentui/tree/@fluentui/react-calendar-compat_v0.0.17)
 
-Thu, 18 Jan 2024 14:19:09 GMT 
+Thu, 18 Jan 2024 14:25:03 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-calendar-compat_v0.0.16..@fluentui/react-calendar-compat_v0.0.17)
 
 ### Patches

package/dist/index.d.ts

@@ -1,3 +1,5 @@
+/// <reference types="react" />
+
 import * as React_2 from 'react';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 
@@ -373,6 +375,10 @@ export declare interface CalendarDayProps extends CalendarDayGridProps {
      * @default false
      */
     allFocusable?: boolean;
+    /**
+     * Custom navigation icons.
+     */
+    navigationIcons: CalendarNavigationIcons;
 }
 
 /**
@@ -507,6 +513,10 @@ export declare interface CalendarMonthProps {
      * The cardinal directions for animation to occur during transitions, either horizontal or veritcal
      */
     animationDirection?: AnimationDirection;
+    /**
+     * Custom navigation icons.
+     */
+    navigationIcons: CalendarNavigationIcons;
 }
 
 /**
@@ -521,6 +531,24 @@ export declare interface CalendarMonthStyleProps extends CalendarPickerStyleProp
 export declare interface CalendarMonthStyles extends CalendarPickerStyles {
 }
 
+declare type CalendarNavigationIcons = {
+    /**
+     * Icon to use for up arrow navigation. Default comes from \@fluentui\/react-icons
+     * @default ArrowUpRegular
+     */
+    upNavigation?: JSX.Element;
+    /**
+     * Icon to use for down arrow navigation. Default comes from \@fluentui\/react-icons
+     * @default ArrowDownRegular
+     */
+    downNavigation?: JSX.Element;
+    /**
+     * Icon to use for the dismiss button. Default comes from \@fluentui\/react-icons
+     * @default DismissRegular
+     */
+    dismiss?: JSX.Element;
+};
+
 /**
  * @internal
  */
@@ -915,6 +943,10 @@ export declare interface CalendarYearProps {
      * The cardinal directions for animation to occur during transitions, either horizontal or veritcal
      */
     animationDirection?: AnimationDirection;
+    /**
+     * Custom navigation icons.
+     */
+    navigationIcons: CalendarNavigationIcons;
 }
 
 /**

package/lib/components/Calendar/Calendar.js

@@ -5,6 +5,7 @@ import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts
 import { addMonths, addYears, DateRangeType, DayOfWeek, DEFAULT_CALENDAR_STRINGS, DEFAULT_DATE_FORMATTING, FirstWeekOfYear, focusAsync } from '../../utils';
 import { CalendarDay } from '../CalendarDay/CalendarDay';
 import { CalendarMonth } from '../CalendarMonth/CalendarMonth';
+import { defaultNavigationIcons } from './calendarNavigationIcons';
 import { useCalendarStyles_unstable } from './useCalendarStyles.styles';
 const MIN_SIZE_FORCE_OVERLAY = 440;
 const defaultWorkWeekDays = [
@@ -275,6 +276,7 @@ function useFocusLogic({ componentRef }, isDayPickerVisible, isMonthPickerVisibl
         showSixWeeksByDefault: showSixWeeksByDefault,
         minDate: minDate,
         maxDate: maxDate,
+        navigationIcons: defaultNavigationIcons,
         restrictedDates: restrictedDates,
         workWeekDays: workWeekDays,
         componentRef: dayPicker,
@@ -300,6 +302,7 @@ function useFocusLogic({ componentRef }, isDayPickerVisible, isMonthPickerVisibl
         minDate: minDate,
         maxDate: maxDate,
         componentRef: monthPicker,
+        navigationIcons: defaultNavigationIcons,
         ...calendarMonthProps
     }), renderGoToTodayButton()) : renderGoToTodayButton());
 });

package/lib/components/Calendar/Calendar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Calendar.tsx"],"sourcesContent":["import * 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 { 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(() => {\n    if (todayProp === undefined) {\n      return new Date();\n    }\n    return todayProp;\n  }, [todayProp]);\n\n  /** The currently selected date in the calendar */\n  const [selectedDate, setSelectedDate] = useControllableState({\n    defaultState: today,\n    initialState: today,\n    state: value,\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] = useControllableState({\n    defaultState: false,\n    initialState: true,\n    state: showMonthPickerAsOverlayState ? undefined : isMonthPickerVisibleProp,\n  });\n  /** State used to show/hide day picker */\n  const [isDayPickerVisible, setIsDayPickerVisible] = useControllableState({\n    defaultState: true,\n    initialState: true,\n    state: showMonthPickerAsOverlayState ? undefined : isDayPickerVisibleProp,\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 = new Date(),\n      value,\n      workWeekDays = defaultWorkWeekDays,\n    } = props;\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      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\n        id={id}\n        ref={forwardedRef}\n        role=\"group\"\n        aria-label={selectionAndTodayString}\n        className={classes.root}\n        onKeyDown={onDatePickerPopupKeyDown}\n      >\n        <div className={classes.liveRegion} aria-live=\"polite\" aria-atomic=\"true\">\n          <span>{selectedDateString}</span>\n        </div>\n        {isDayPickerVisible && (\n          <CalendarDay\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            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              {...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","useCalendarStyles_unstable","MIN_SIZE_FORCE_OVERLAY","defaultWorkWeekDays","Monday","Tuesday","Wednesday","Thursday","Friday","useDateState","props","value","today","todayProp","onSelectDate","useMemo","undefined","Date","selectedDate","setSelectedDate","defaultState","initialState","state","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","role","aria-label","root","liveRegion","aria-live","aria-atomic","span","navigatedDate","onNavigateDate","divider","monthPickerWrapper","displayName","innerWidth"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,SAAS,EAAEC,KAAK,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,MAAM,EAAEC,KAAK,QAAQ,0BAA0B;AAC5F,SAASC,oBAAoB,QAAQ,4BAA4B;AACjE,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SACEC,SAAS,EACTC,QAAQ,EACRC,aAAa,EACbC,SAAS,EACTC,wBAAwB,EACxBC,uBAAuB,EACvBC,eAAe,EACfC,UAAU,QACL,cAAc;AACrB,SAASC,WAAW,QAAQ,6BAA6B;AACzD,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,0BAA0B,QAAQ,6BAA6B;AAKxE,MAAMC,yBAAyB;AAE/B,MAAMC,sBAAmC;IACvCT,UAAUU,MAAM;IAChBV,UAAUW,OAAO;IACjBX,UAAUY,SAAS;IACnBZ,UAAUa,QAAQ;IAClBb,UAAUc,MAAM;CACjB;AAED,SAASC,aAAaC,KAAoB;IACxC,MAAM,EAAEC,KAAK,EAAEC,OAAOC,SAAS,EAAEC,YAAY,EAAE,GAAGJ;IAElD,MAAME,QAAQ/B,MAAMkC,OAAO,CAAC;QAC1B,IAAIF,cAAcG,WAAW;YAC3B,OAAO,IAAIC;QACb;QACA,OAAOJ;IACT,GAAG;QAACA;KAAU;IAEd,gDAAgD,GAChD,MAAM,CAACK,cAAcC,gBAAgB,GAAG/B,qBAAqB;QAC3DgC,cAAcR;QACdS,cAAcT;QACdU,OAAOX;IACT;IAEA,+EAA+E,GAC/E,MAAM,CAACY,eAAeX,KAAK,EAAEY,gBAAgB,GAAG3C,MAAM4C,QAAQ,CAACd;IAE/D,iFAAiF,GACjF,MAAM,CAACe,iBAAiBd,KAAK,EAAEe,kBAAkB,GAAG9C,MAAM4C,QAAQ,CAACd;IAEnE,gFAAgF,GAChF,MAAM,CAACiB,mBAAmBhB,KAAK,EAAEiB,oBAAoB,GAAGhD,MAAM4C,QAAQ,CAACd;IACvE,IAAIA,SAASiB,iBAAiBE,OAAO,OAAOnB,MAAMmB,OAAO,IAAI;QAC3DN,gBAAgBb;QAChBgB,kBAAkBhB;QAClBkB,oBAAoBlB;IACtB;IAEA,MAAMoB,gBAAgB,CAACC;QACrBL,kBAAkBK;IACpB;IAEA,MAAMC,cAAc,CAACD;QACnBL,kBAAkBK;QAClBR,gBAAgBQ;IAClB;IAEA,MAAME,iBAAiB,CAACF,MAAYG;QAClCR,kBAAkBK;QAClBR,gBAAgBQ;QAChBb,gBAAgBa;QAChBlB,yBAAAA,mCAAAA,aAAekB,MAAMG;IACvB;IAEA,OAAO;QAACjB;QAAcK;QAAcG;QAAgBQ;QAAgBD;QAAaF;KAAc;AACjG;AAEA,SAASK,mBAAmB,EAC1BC,oBAAoBC,sBAAsB,EAC1CC,sBAAsBC,wBAAwB,EAC9CC,wBAAwB,EACV;IACd,yCAAyC,GACzC,MAAMC,gCAAgCC,4BAA4B;QAChEN,oBAAoBC;QACpBG;IACF;IAEA,MAAM,CAACF,sBAAsBK,wBAAwB,GAAGxD,qBAAqB;QAC3EgC,cAAc;QACdC,cAAc;QACdC,OAAOoB,gCAAgC1B,YAAYwB;IACrD;IACA,uCAAuC,GACvC,MAAM,CAACH,oBAAoBQ,sBAAsB,GAAGzD,qBAAqB;QACvEgC,cAAc;QACdC,cAAc;QACdC,OAAOoB,gCAAgC1B,YAAYsB;IACrD;IAEA,MAAMQ,iCAAiC;QACrCF,wBAAwB,CAACL;QACzBM,sBAAsB,CAACR;IACzB;IAEA,OAAO;QAACE;QAAsBF;QAAoBS;KAA+B;AACnF;AAEA,SAASC,cAAc,EAAEC,YAAY,EAAiB,EAAEX,kBAA2B,EAAEE,oBAA6B;IAChH,MAAMU,YAAYpE,MAAMqE,MAAM,CAAe;IAC7C,MAAMC,cAActE,MAAMqE,MAAM,CAAiB;IACjD,MAAME,gBAAgBvE,MAAMqE,MAAM,CAAC;IACnC,MAAM,EAAEG,cAAc,EAAE,GAAG/D;IAC3B,MAAMgE,MAAMD,2BAAAA,qCAAAA,eAAgBE,WAAW;IAEvC,MAAMC,QAAQ3E,MAAM4E,WAAW,CAAC;QAC9B,IAAIpB,sBAAsBY,UAAUS,OAAO,EAAE;YAC3C5D,WAAWmD,UAAUS,OAAO,EAAEJ;QAChC,OAAO,IAAIf,wBAAwBY,YAAYO,OAAO,EAAE;YACtD5D,WAAWqD,YAAYO,OAAO,EAAEJ;QAClC;IACF,GAAG;QAACjB;QAAoBE;QAAsBe;KAAI;IAElDzE,MAAM8E,mBAAmB,CAACX,cAAc,IAAO,CAAA;YAAEQ;QAAM,CAAA,GAAI;QAACA;KAAM;IAElE3E,MAAM+E,SAAS,CAAC;QACd,IAAIR,cAAcM,OAAO,EAAE;YACzBF;YACAJ,cAAcM,OAAO,GAAG;QAC1B;IACF;IAEA,MAAMG,oBAAoB;QACxBT,cAAcM,OAAO,GAAG;IAC1B;IAEA,OAAO;QAACT;QAAWE;QAAaU;KAAkB;AACpD;AAEA;;CAEC,GACD,OAAO,MAAMC,yBAAmDjF,MAAMkF,UAAU,CAC9E,CAACrD,OAAOsD;IACN,MAAM,EACJC,eAAe,KAAK,EACpBC,gBAAgB,EAChBC,kBAAkB,EAClBC,SAAS,EACTpB,YAAY,EACZqB,gBAAgB5E,cAAc6E,GAAG,EACjCC,oBAAoB3E,uBAAuB,EAC3C4E,iBAAiB9E,UAAU+E,MAAM,EACjCC,kBAAkB7E,gBAAgB8E,QAAQ,EAC1CC,wBAAwB,KAAK,EAC7BC,yBAAyB,KAAK,EAC9BC,EAAE,EACFzC,oBAAoBC,yBAAyB,IAAI,EACjDC,sBAAsBC,2BAA2B,IAAI,EACrDuC,OAAO,EACPC,OAAO,EACPC,SAAS,EACTnE,YAAY,EACZoE,eAAe,EACfC,kBAAkB,KAAK,EACvBC,gBAAgB,IAAI,EACpB3C,0BAA0B4C,+BAA+B,KAAK,EAC9DC,wBAAwB,KAAK,EAC7BC,kBAAkB,KAAK,EACvBC,UAAU7F,wBAAwB,EAClCiB,QAAQ,IAAIK,MAAM,EAClBN,KAAK,EACL8E,eAAetF,mBAAmB,EACnC,GAAGO;IAEJ,MAAM,CAACQ,cAAcK,cAAcG,gBAAgBQ,gBAAgBD,aAAaF,cAAc,GAAGtB,aAAa;QAC5GK;QACAH;QACAC;IACF;IACA,MAAM,CAAC2B,sBAAsBF,oBAAoBS,+BAA+B,GAAGV,mBAAmB;QACpGC,oBAAoBC;QACpBC,sBAAsBC;QACtBC,0BAA0B4C;IAC5B;IACA,MAAM,CAACpC,WAAWE,aAAaU,kBAAkB,GAAGd,cAClD;QAAEC;IAAa,GACfX,oBACAE;IAGF,MAAMmD,wBAAwB;QAC5B,IAAIC,iBAAiBP;QAErB,IAAIO,kBAAkB/E,OAAO;YAC3B+E,iBACEpE,aAAaqE,WAAW,OAAOhF,MAAMgF,WAAW,MAChDrE,aAAasE,QAAQ,OAAOjF,MAAMiF,QAAQ,MAC1CnE,eAAekE,WAAW,OAAOhF,MAAMgF,WAAW,MAClDlE,eAAemE,QAAQ,OAAOjF,MAAMiF,QAAQ;QAChD;QAEA,OACET,+BACE,oBAACU;YACC1B,WAAW2B,QAAQC,aAAa;YAChCC,SAASC;YACTC,WAAWC,gBAAgBF;YAC3BG,MAAK;YACLC,UAAU,CAACX;WAEVH,QAASe,SAAS;IAI3B;IAEA,MAAMC,oBAAoB,CAACxE,MAAYyE;QACrCxE,YAAYD;QACZ,IAAIyE,qBAAqB;YACvB5C;QACF;IACF;IAEA,MAAM6C,sBAAsB,CAAC1E,MAAYyE;QACvC,IAAIA,qBAAqB;YACvB5C;QACF;QAEA,IAAI,CAAC4C,qBAAqB;YACxB1E,cAAcC;YACd;QACF;QAEA,IAAI2E,iBAAiB;YACnBzE,eAAeF;QACjB;QAEAC,YAAYD;IACd;IAEA,MAAMS,2BAA2BE,4BAA4B;QAC3DN,oBAAoBC;QACpBG,0BAA0B4C;IAC5B;IAEA,MAAMuB,iBAAiBnE,2BACnB;QACEK;QAEAe;IACF,IACA7C;IAEJ,MAAMkF,cAAc;QAClBjE,YAAYrB;QACZiD;IACF;IAEA,MAAMuC,kBAAkB,CAACS;QACvB,OAAO,CAACC;YACN,OAAQA,GAAGC,GAAG;gBACZ,KAAKhI;gBACL,KAAKI;oBACH0H;oBACA;YACJ;QACF;IACF;IAEA,MAAMG,2BAA2B,CAACF;QAChC,OAAQA,GAAGC,GAAG;YACZ,KAAKhI;gBACH+H,GAAGG,cAAc;gBACjB;YAEF,KAAKnI;gBACHgI,GAAGG,cAAc;gBACjB;YAEF,KAAKjI;gBACH8H,GAAGI,eAAe;gBAClBjC,sBAAAA,gCAAAA;gBACA;YAEF,KAAK/F;gBACH,IAAI4H,GAAGK,OAAO,EAAE;oBACd,kBAAkB;oBAClBlF,YAAYzC,SAAS+B,cAAc;gBACrC,OAAO;oBACL,mBAAmB;oBACnBU,YAAY1C,UAAUgC,cAAc;gBACtC;gBACAuF,GAAGG,cAAc;gBACjB;YACF,KAAKhI;gBACH,IAAI6H,GAAGK,OAAO,EAAE;oBACd,sBAAsB;oBACtBlF,YAAYzC,SAAS+B,cAAc,CAAC;gBACtC,OAAO;oBACL,uBAAuB;oBACvBU,YAAY1C,UAAUgC,cAAc,CAAC;gBACvC;gBACAuF,GAAGG,cAAc;gBACjB;YACF;gBACE;QACJ;IACF;IAEA,MAAMN,kBAAkB,CAAClE,4BAA4B,CAACJ;IAEtD,MAAM0D,UAAU9F,2BAA2B;QACzCmE;QACA/B;QACAE;QACAgD;IACF;IAEA,IAAI6B,kBAA0B;IAC9B,IAAIC,qBAA6B;IACjC,IAAI9C,qBAAqBiB,QAAS8B,qBAAqB,EAAE;QACvDF,kBAAkB5B,QAAS8B,qBAAqB,CAACC,OAAO,CACtD,OACAhD,kBAAkBiD,kBAAkB,CAAC5G,OAAO4E;IAEhD;IACA,IAAIjB,qBAAqBiB,QAASiC,wBAAwB,EAAE;QAC1D,MAAMC,sBAAsBf,kBACxBpC,kBAAkBoD,eAAe,GACjCpD,kBAAkBiD,kBAAkB;QACxCH,qBAAqB7B,QAASiC,wBAAwB,CAACF,OAAO,CAC5D,OACAG,oBAAoBxG,cAAcsE;IAEtC;IACA,MAAMoC,0BAA0BP,qBAAqB,OAAOD;IAE5D,qBACE,oBAACS;QACC/C,IAAIA;QACJgD,KAAK9D;QACL+D,MAAK;QACLC,cAAYJ;QACZxD,WAAW2B,QAAQkC,IAAI;QACvB9B,WAAWa;qBAEX,oBAACa;QAAIzD,WAAW2B,QAAQmC,UAAU;QAAEC,aAAU;QAASC,eAAY;qBACjE,oBAACC,cAAMhB,sBAERhF,oCACC,oBAACtC;QACCmB,cAAcA;QACdoH,eAAe/G;QACfX,OAAOA;QACPE,cAAcoB;QACd,6CAA6C;QAC7CqG,gBAAgB/B;QAChBvB,WAAWA;QACXT,gBAAgBA;QAChBH,eAAeA;QACfmB,SAASA;QACT,6CAA6C;QAC7CoB,gBAAgBA;QAChBrB,iBAAiBA;QACjBb,iBAAiBA;QACjBH,mBAAmBA;QACnBe,uBAAuBA;QACvBN,SAASA;QACTD,SAASA;QACTG,iBAAiBA;QACjBO,cAAcA;QACdzC,cAAcC;QACdkC,iBAAiBA;QACjBlB,cAAcA;QACb,GAAGC,gBAAgB;QAGvB7B,sBAAsBE,sCAAwB,oBAACsF;QAAIzD,WAAW2B,QAAQyC,OAAO;QAC7EjG,qCACC,oBAACsF;QAAIzD,WAAW2B,QAAQ0C,kBAAkB;qBACxC,oBAACzI;QACCsI,eAAe5G;QACfR,cAAcK;QACdiE,SAASA;QACT,6CAA6C;QAC7C+C,gBAAgB7B;QAChB9F,OAAOA;QACPgE,uBAAuBA;QACvBC,wBAAwBA;QACxB,6CAA6C;QAC7C+B,gBAAgBA;QAChBrC,mBAAmBA;QACnBS,SAASA;QACTD,SAASA;QACT/B,cAAcG;QACb,GAAGgB,kBAAkB;QAEvBuB,2BAGHA;AAIR,GACA;AACF5B,SAAS4E,WAAW,GAAG;AAEvB,MAAM/F,8BAA8B,CAAC,EAAEN,kBAAkB,EAAEI,wBAAwB,EAAiB;IAClG,MAAM,EAAEY,cAAc,EAAE,GAAG/D;IAC3B,MAAMgE,MAAMD,2BAAAA,qCAAAA,eAAgBE,WAAW;IACvC,OAAOd,4BAA6BJ,sBAAsBiB,OAAOA,IAAIqF,UAAU,IAAIzI;AACrF"}
+{"version":3,"sources":["Calendar.tsx"],"sourcesContent":["import * 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(() => {\n    if (todayProp === undefined) {\n      return new Date();\n    }\n    return todayProp;\n  }, [todayProp]);\n\n  /** The currently selected date in the calendar */\n  const [selectedDate, setSelectedDate] = useControllableState({\n    defaultState: today,\n    initialState: today,\n    state: value,\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] = useControllableState({\n    defaultState: false,\n    initialState: true,\n    state: showMonthPickerAsOverlayState ? undefined : isMonthPickerVisibleProp,\n  });\n  /** State used to show/hide day picker */\n  const [isDayPickerVisible, setIsDayPickerVisible] = useControllableState({\n    defaultState: true,\n    initialState: true,\n    state: showMonthPickerAsOverlayState ? undefined : isDayPickerVisibleProp,\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 = new Date(),\n      value,\n      workWeekDays = defaultWorkWeekDays,\n    } = props;\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      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\n        id={id}\n        ref={forwardedRef}\n        role=\"group\"\n        aria-label={selectionAndTodayString}\n        className={classes.root}\n        onKeyDown={onDatePickerPopupKeyDown}\n      >\n        <div className={classes.liveRegion} aria-live=\"polite\" aria-atomic=\"true\">\n          <span>{selectedDateString}</span>\n        </div>\n        {isDayPickerVisible && (\n          <CalendarDay\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","undefined","Date","selectedDate","setSelectedDate","defaultState","initialState","state","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","role","aria-label","root","liveRegion","aria-live","aria-atomic","span","navigatedDate","onNavigateDate","navigationIcons","divider","monthPickerWrapper","displayName","innerWidth"],"mappings":"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"}

package/lib/components/Calendar/calendarNavigationIcons.js

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { ArrowDownRegular, ArrowUpRegular, DismissRegular } from '@fluentui/react-icons';
+export const defaultNavigationIcons = {
+    dismiss: /*#__PURE__*/ React.createElement(DismissRegular, null),
+    downNavigation: /*#__PURE__*/ React.createElement(ArrowDownRegular, null),
+    upNavigation: /*#__PURE__*/ React.createElement(ArrowUpRegular, null)
+};

package/lib/components/Calendar/calendarNavigationIcons.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["calendarNavigationIcons.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ArrowDownRegular, ArrowUpRegular, DismissRegular } from '@fluentui/react-icons';\n\nexport type CalendarNavigationIcons = {\n  /**\n   * Icon to use for up arrow navigation. Default comes from \\@fluentui\\/react-icons\n   * @default ArrowUpRegular\n   */\n  upNavigation?: JSX.Element;\n\n  /**\n   * Icon to use for down arrow navigation. Default comes from \\@fluentui\\/react-icons\n   * @default ArrowDownRegular\n   */\n  downNavigation?: JSX.Element;\n\n  /**\n   * Icon to use for the dismiss button. Default comes from \\@fluentui\\/react-icons\n   * @default DismissRegular\n   */\n  dismiss?: JSX.Element;\n};\n\nexport const defaultNavigationIcons: CalendarNavigationIcons = {\n  dismiss: <DismissRegular />,\n  downNavigation: <ArrowDownRegular />,\n  upNavigation: <ArrowUpRegular />,\n};\n"],"names":["React","ArrowDownRegular","ArrowUpRegular","DismissRegular","defaultNavigationIcons","dismiss","downNavigation","upNavigation"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,gBAAgB,EAAEC,cAAc,EAAEC,cAAc,QAAQ,wBAAwB;AAsBzF,OAAO,MAAMC,yBAAkD;IAC7DC,uBAAS,oBAACF;IACVG,8BAAgB,oBAACL;IACjBM,4BAAc,oBAACL;AACjB,EAAE"}

package/lib/components/CalendarDay/CalendarDay.js

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { Enter } from '@fluentui/keyboard-keys';
-import { ArrowDownRegular, ArrowUpRegular, DismissRegular } from '@fluentui/react-icons';
 import { useId } from '@fluentui/react-utilities';
 import { mergeClasses } from '@griffel/react';
 import { addMonths, compareDatePart, getMonthEnd, getMonthStart } from '../../utils';
@@ -63,7 +62,7 @@ import { useCalendarDayStyles_unstable } from './useCalendarDayStyles.styles';
 };
 CalendarDay.displayName = 'CalendarDay';
 const CalendarDayNavigationButtons = (props)=>{
-    const { minDate, maxDate, navigatedDate, allFocusable, strings, showCloseButton, classNames, onNavigateDate, onDismiss } = props;
+    const { minDate, maxDate, navigatedDate, navigationIcons, allFocusable, strings, showCloseButton, classNames, onNavigateDate, onDismiss } = props;
     const onSelectNextMonth = ()=>{
         onNavigateDate(addMonths(navigatedDate, 1), false);
     };
@@ -85,7 +84,7 @@ const CalendarDayNavigationButtons = (props)=>{
         onKeyDown: prevMonthInBounds ? onButtonKeyDown(onSelectPrevMonth) : undefined,
         title: strings.prevMonthAriaLabel ? strings.prevMonthAriaLabel + ' ' + strings.months[addMonths(navigatedDate, -1).getMonth()] : undefined,
         type: "button"
-    }, /*#__PURE__*/ React.createElement(ArrowUpRegular, null)), /*#__PURE__*/ React.createElement("button", {
+    }, navigationIcons.upNavigation), /*#__PURE__*/ React.createElement("button", {
         className: mergeClasses(classNames.headerIconButton, !nextMonthInBounds && classNames.disabledStyle),
         tabIndex: nextMonthInBounds ? undefined : allFocusable ? 0 : -1,
         "aria-disabled": !nextMonthInBounds,
@@ -93,13 +92,13 @@ const CalendarDayNavigationButtons = (props)=>{
         onKeyDown: nextMonthInBounds ? onButtonKeyDown(onSelectNextMonth) : undefined,
         title: strings.nextMonthAriaLabel ? strings.nextMonthAriaLabel + ' ' + strings.months[addMonths(navigatedDate, 1).getMonth()] : undefined,
         type: "button"
-    }, /*#__PURE__*/ React.createElement(ArrowDownRegular, null)), showCloseButton && /*#__PURE__*/ React.createElement("button", {
+    }, navigationIcons.downNavigation), showCloseButton && /*#__PURE__*/ React.createElement("button", {
         className: classNames.headerIconButton,
         onClick: onDismiss,
         onKeyDown: onButtonKeyDown(onDismiss),
         title: strings.closeButtonAriaLabel,
         type: "button"
-    }, /*#__PURE__*/ React.createElement(DismissRegular, null)));
+    }, navigationIcons.dismiss));
 };
 CalendarDayNavigationButtons.displayName = 'CalendarDayNavigationButtons';
 const onButtonKeyDown = (callback)=>(ev)=>{

package/lib/components/CalendarDay/CalendarDay.js.map

@@ -1 +1 @@
-{"version":3,"sources":["CalendarDay.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Enter } from '@fluentui/keyboard-keys';\nimport { ArrowDownRegular, ArrowUpRegular, DismissRegular } from '@fluentui/react-icons';\nimport { useId } from '@fluentui/react-utilities';\nimport { mergeClasses } from '@griffel/react';\nimport { addMonths, compareDatePart, getMonthEnd, getMonthStart } from '../../utils';\nimport { CalendarDayGrid } from '../CalendarDayGrid/CalendarDayGrid';\nimport { useCalendarDayStyles_unstable } from './useCalendarDayStyles.styles';\nimport type { ICalendarDayGrid } from '../CalendarDayGrid/CalendarDayGrid.types';\nimport type { CalendarDayProps, CalendarDayStyles } from './CalendarDay.types';\n\n/**\n * @internal\n */\nexport const CalendarDay: React.FunctionComponent<CalendarDayProps> = props => {\n  const dayGrid = React.useRef<ICalendarDayGrid>(null);\n\n  React.useImperativeHandle(\n    props.componentRef,\n    () => ({\n      focus() {\n        dayGrid.current?.focus?.();\n      },\n    }),\n    [],\n  );\n\n  const {\n    strings,\n    navigatedDate,\n    dateTimeFormatter,\n    className,\n    onHeaderSelect,\n    showSixWeeksByDefault,\n    minDate,\n    maxDate,\n    restrictedDates,\n    onNavigateDate,\n    showWeekNumbers,\n    dateRangeType,\n    animationDirection,\n  } = props;\n  const monthAndYearId = useId();\n\n  const classNames = useCalendarDayStyles_unstable({\n    className,\n    headerIsClickable: !!onHeaderSelect,\n    showWeekNumbers,\n    animationDirection,\n  });\n\n  const monthAndYear = dateTimeFormatter.formatMonthYear(navigatedDate, strings);\n  const HeaderButtonComponentType = onHeaderSelect ? 'button' : 'div';\n  const headerAriaLabel = strings.yearPickerHeaderAriaLabel\n    ? strings.yearPickerHeaderAriaLabel.replace('{0}', monthAndYear)\n    : monthAndYear;\n\n  const { ...propsWithoutStyles } = props;\n\n  return (\n    <div className={classNames.root}>\n      <div className={classNames.header}>\n        <HeaderButtonComponentType\n          aria-label={onHeaderSelect ? headerAriaLabel : undefined}\n          className={classNames.monthAndYear}\n          onClick={onHeaderSelect}\n          tabIndex={onHeaderSelect ? 0 : -1} // prevent focus if there's no action for the button\n          onKeyDown={onButtonKeyDown(onHeaderSelect)}\n          type=\"button\"\n        >\n          <span id={monthAndYearId} aria-live=\"polite\" aria-atomic=\"true\">\n            {monthAndYear}\n          </span>\n        </HeaderButtonComponentType>\n        <CalendarDayNavigationButtons {...props} classNames={classNames} />\n      </div>\n      <CalendarDayGrid\n        {...propsWithoutStyles}\n        componentRef={dayGrid}\n        strings={strings}\n        navigatedDate={navigatedDate!}\n        weeksToShow={showSixWeeksByDefault ? 6 : undefined}\n        dateTimeFormatter={dateTimeFormatter!}\n        minDate={minDate}\n        maxDate={maxDate}\n        restrictedDates={restrictedDates}\n        onNavigateDate={onNavigateDate}\n        labelledBy={monthAndYearId}\n        dateRangeType={dateRangeType}\n      />\n    </div>\n  );\n};\nCalendarDay.displayName = 'CalendarDay';\n\ninterface CalendarDayNavigationButtonsProps extends CalendarDayProps {\n  classNames: Record<keyof CalendarDayStyles, string>;\n}\n\nconst CalendarDayNavigationButtons = (props: CalendarDayNavigationButtonsProps): JSX.Element => {\n  const {\n    minDate,\n    maxDate,\n    navigatedDate,\n    allFocusable,\n    strings,\n    showCloseButton,\n    classNames,\n    onNavigateDate,\n    onDismiss,\n  } = props;\n\n  const onSelectNextMonth = (): void => {\n    onNavigateDate(addMonths(navigatedDate, 1), false);\n  };\n\n  const onSelectPrevMonth = (): void => {\n    onNavigateDate(addMonths(navigatedDate, -1), false);\n  };\n\n  // determine if previous/next months are in bounds\n  const prevMonthInBounds = minDate ? compareDatePart(minDate, getMonthStart(navigatedDate)) < 0 : true;\n  const nextMonthInBounds = maxDate ? compareDatePart(getMonthEnd(navigatedDate), maxDate) < 0 : true;\n\n  // use aria-disabled instead of disabled so focus is not lost\n  // when a prev/next button becomes disabled after being clicked\n  return (\n    <div className={classNames.monthComponents}>\n      <button\n        className={mergeClasses(classNames.headerIconButton, !prevMonthInBounds && classNames.disabledStyle)}\n        tabIndex={prevMonthInBounds ? undefined : allFocusable ? 0 : -1}\n        aria-disabled={!prevMonthInBounds}\n        onClick={prevMonthInBounds ? onSelectPrevMonth : undefined}\n        onKeyDown={prevMonthInBounds ? onButtonKeyDown(onSelectPrevMonth) : undefined}\n        title={\n          strings.prevMonthAriaLabel\n            ? strings.prevMonthAriaLabel + ' ' + strings.months[addMonths(navigatedDate, -1).getMonth()]\n            : undefined\n        }\n        type=\"button\"\n      >\n        <ArrowUpRegular />\n      </button>\n      <button\n        className={mergeClasses(classNames.headerIconButton, !nextMonthInBounds && classNames.disabledStyle)}\n        tabIndex={nextMonthInBounds ? undefined : allFocusable ? 0 : -1}\n        aria-disabled={!nextMonthInBounds}\n        onClick={nextMonthInBounds ? onSelectNextMonth : undefined}\n        onKeyDown={nextMonthInBounds ? onButtonKeyDown(onSelectNextMonth) : undefined}\n        title={\n          strings.nextMonthAriaLabel\n            ? strings.nextMonthAriaLabel + ' ' + strings.months[addMonths(navigatedDate, 1).getMonth()]\n            : undefined\n        }\n        type=\"button\"\n      >\n        <ArrowDownRegular />\n      </button>\n      {showCloseButton && (\n        <button\n          className={classNames.headerIconButton}\n          onClick={onDismiss}\n          onKeyDown={onButtonKeyDown(onDismiss)}\n          title={strings.closeButtonAriaLabel}\n          type=\"button\"\n        >\n          <DismissRegular />\n        </button>\n      )}\n    </div>\n  );\n};\nCalendarDayNavigationButtons.displayName = 'CalendarDayNavigationButtons';\n\nconst onButtonKeyDown =\n  (callback?: () => void): ((ev: React.KeyboardEvent<HTMLButtonElement | HTMLDivElement>) => void) =>\n  (ev: React.KeyboardEvent<HTMLButtonElement | HTMLDivElement>) => {\n    switch (ev.key) {\n      case Enter:\n        callback?.();\n        break;\n    }\n  };\n"],"names":["React","Enter","ArrowDownRegular","ArrowUpRegular","DismissRegular","useId","mergeClasses","addMonths","compareDatePart","getMonthEnd","getMonthStart","CalendarDayGrid","useCalendarDayStyles_unstable","CalendarDay","props","dayGrid","useRef","useImperativeHandle","componentRef","focus","current","strings","navigatedDate","dateTimeFormatter","className","onHeaderSelect","showSixWeeksByDefault","minDate","maxDate","restrictedDates","onNavigateDate","showWeekNumbers","dateRangeType","animationDirection","monthAndYearId","classNames","headerIsClickable","monthAndYear","formatMonthYear","HeaderButtonComponentType","headerAriaLabel","yearPickerHeaderAriaLabel","replace","propsWithoutStyles","div","root","header","aria-label","undefined","onClick","tabIndex","onKeyDown","onButtonKeyDown","type","span","id","aria-live","aria-atomic","CalendarDayNavigationButtons","weeksToShow","labelledBy","displayName","allFocusable","showCloseButton","onDismiss","onSelectNextMonth","onSelectPrevMonth","prevMonthInBounds","nextMonthInBounds","monthComponents","button","headerIconButton","disabledStyle","aria-disabled","title","prevMonthAriaLabel","months","getMonth","nextMonthAriaLabel","closeButtonAriaLabel","callback","ev","key"],"mappings":"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"}
+{"version":3,"sources":["CalendarDay.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Enter } from '@fluentui/keyboard-keys';\nimport { useId } from '@fluentui/react-utilities';\nimport { mergeClasses } from '@griffel/react';\nimport { addMonths, compareDatePart, getMonthEnd, getMonthStart } from '../../utils';\nimport { CalendarDayGrid } from '../CalendarDayGrid/CalendarDayGrid';\nimport { useCalendarDayStyles_unstable } from './useCalendarDayStyles.styles';\nimport type { ICalendarDayGrid } from '../CalendarDayGrid/CalendarDayGrid.types';\nimport type { CalendarDayProps, CalendarDayStyles } from './CalendarDay.types';\n\n/**\n * @internal\n */\nexport const CalendarDay: React.FunctionComponent<CalendarDayProps> = props => {\n  const dayGrid = React.useRef<ICalendarDayGrid>(null);\n\n  React.useImperativeHandle(\n    props.componentRef,\n    () => ({\n      focus() {\n        dayGrid.current?.focus?.();\n      },\n    }),\n    [],\n  );\n\n  const {\n    strings,\n    navigatedDate,\n    dateTimeFormatter,\n    className,\n    onHeaderSelect,\n    showSixWeeksByDefault,\n    minDate,\n    maxDate,\n    restrictedDates,\n    onNavigateDate,\n    showWeekNumbers,\n    dateRangeType,\n    animationDirection,\n  } = props;\n  const monthAndYearId = useId();\n\n  const classNames = useCalendarDayStyles_unstable({\n    className,\n    headerIsClickable: !!onHeaderSelect,\n    showWeekNumbers,\n    animationDirection,\n  });\n\n  const monthAndYear = dateTimeFormatter.formatMonthYear(navigatedDate, strings);\n  const HeaderButtonComponentType = onHeaderSelect ? 'button' : 'div';\n  const headerAriaLabel = strings.yearPickerHeaderAriaLabel\n    ? strings.yearPickerHeaderAriaLabel.replace('{0}', monthAndYear)\n    : monthAndYear;\n\n  const { ...propsWithoutStyles } = props;\n\n  return (\n    <div className={classNames.root}>\n      <div className={classNames.header}>\n        <HeaderButtonComponentType\n          aria-label={onHeaderSelect ? headerAriaLabel : undefined}\n          className={classNames.monthAndYear}\n          onClick={onHeaderSelect}\n          tabIndex={onHeaderSelect ? 0 : -1} // prevent focus if there's no action for the button\n          onKeyDown={onButtonKeyDown(onHeaderSelect)}\n          type=\"button\"\n        >\n          <span id={monthAndYearId} aria-live=\"polite\" aria-atomic=\"true\">\n            {monthAndYear}\n          </span>\n        </HeaderButtonComponentType>\n        <CalendarDayNavigationButtons {...props} classNames={classNames} />\n      </div>\n      <CalendarDayGrid\n        {...propsWithoutStyles}\n        componentRef={dayGrid}\n        strings={strings}\n        navigatedDate={navigatedDate!}\n        weeksToShow={showSixWeeksByDefault ? 6 : undefined}\n        dateTimeFormatter={dateTimeFormatter!}\n        minDate={minDate}\n        maxDate={maxDate}\n        restrictedDates={restrictedDates}\n        onNavigateDate={onNavigateDate}\n        labelledBy={monthAndYearId}\n        dateRangeType={dateRangeType}\n      />\n    </div>\n  );\n};\nCalendarDay.displayName = 'CalendarDay';\n\ninterface CalendarDayNavigationButtonsProps extends CalendarDayProps {\n  classNames: Record<keyof CalendarDayStyles, string>;\n}\n\nconst CalendarDayNavigationButtons = (props: CalendarDayNavigationButtonsProps): JSX.Element => {\n  const {\n    minDate,\n    maxDate,\n    navigatedDate,\n    navigationIcons,\n    allFocusable,\n    strings,\n    showCloseButton,\n    classNames,\n    onNavigateDate,\n    onDismiss,\n  } = props;\n\n  const onSelectNextMonth = (): void => {\n    onNavigateDate(addMonths(navigatedDate, 1), false);\n  };\n\n  const onSelectPrevMonth = (): void => {\n    onNavigateDate(addMonths(navigatedDate, -1), false);\n  };\n\n  // determine if previous/next months are in bounds\n  const prevMonthInBounds = minDate ? compareDatePart(minDate, getMonthStart(navigatedDate)) < 0 : true;\n  const nextMonthInBounds = maxDate ? compareDatePart(getMonthEnd(navigatedDate), maxDate) < 0 : true;\n\n  // use aria-disabled instead of disabled so focus is not lost\n  // when a prev/next button becomes disabled after being clicked\n  return (\n    <div className={classNames.monthComponents}>\n      <button\n        className={mergeClasses(classNames.headerIconButton, !prevMonthInBounds && classNames.disabledStyle)}\n        tabIndex={prevMonthInBounds ? undefined : allFocusable ? 0 : -1}\n        aria-disabled={!prevMonthInBounds}\n        onClick={prevMonthInBounds ? onSelectPrevMonth : undefined}\n        onKeyDown={prevMonthInBounds ? onButtonKeyDown(onSelectPrevMonth) : undefined}\n        title={\n          strings.prevMonthAriaLabel\n            ? strings.prevMonthAriaLabel + ' ' + strings.months[addMonths(navigatedDate, -1).getMonth()]\n            : undefined\n        }\n        type=\"button\"\n      >\n        {navigationIcons.upNavigation}\n      </button>\n      <button\n        className={mergeClasses(classNames.headerIconButton, !nextMonthInBounds && classNames.disabledStyle)}\n        tabIndex={nextMonthInBounds ? undefined : allFocusable ? 0 : -1}\n        aria-disabled={!nextMonthInBounds}\n        onClick={nextMonthInBounds ? onSelectNextMonth : undefined}\n        onKeyDown={nextMonthInBounds ? onButtonKeyDown(onSelectNextMonth) : undefined}\n        title={\n          strings.nextMonthAriaLabel\n            ? strings.nextMonthAriaLabel + ' ' + strings.months[addMonths(navigatedDate, 1).getMonth()]\n            : undefined\n        }\n        type=\"button\"\n      >\n        {navigationIcons.downNavigation}\n      </button>\n      {showCloseButton && (\n        <button\n          className={classNames.headerIconButton}\n          onClick={onDismiss}\n          onKeyDown={onButtonKeyDown(onDismiss)}\n          title={strings.closeButtonAriaLabel}\n          type=\"button\"\n        >\n          {navigationIcons.dismiss}\n        </button>\n      )}\n    </div>\n  );\n};\nCalendarDayNavigationButtons.displayName = 'CalendarDayNavigationButtons';\n\nconst onButtonKeyDown =\n  (callback?: () => void): ((ev: React.KeyboardEvent<HTMLButtonElement | HTMLDivElement>) => void) =>\n  (ev: React.KeyboardEvent<HTMLButtonElement | HTMLDivElement>) => {\n    switch (ev.key) {\n      case Enter:\n        callback?.();\n        break;\n    }\n  };\n"],"names":["React","Enter","useId","mergeClasses","addMonths","compareDatePart","getMonthEnd","getMonthStart","CalendarDayGrid","useCalendarDayStyles_unstable","CalendarDay","props","dayGrid","useRef","useImperativeHandle","componentRef","focus","current","strings","navigatedDate","dateTimeFormatter","className","onHeaderSelect","showSixWeeksByDefault","minDate","maxDate","restrictedDates","onNavigateDate","showWeekNumbers","dateRangeType","animationDirection","monthAndYearId","classNames","headerIsClickable","monthAndYear","formatMonthYear","HeaderButtonComponentType","headerAriaLabel","yearPickerHeaderAriaLabel","replace","propsWithoutStyles","div","root","header","aria-label","undefined","onClick","tabIndex","onKeyDown","onButtonKeyDown","type","span","id","aria-live","aria-atomic","CalendarDayNavigationButtons","weeksToShow","labelledBy","displayName","navigationIcons","allFocusable","showCloseButton","onDismiss","onSelectNextMonth","onSelectPrevMonth","prevMonthInBounds","nextMonthInBounds","monthComponents","button","headerIconButton","disabledStyle","aria-disabled","title","prevMonthAriaLabel","months","getMonth","upNavigation","nextMonthAriaLabel","downNavigation","closeButtonAriaLabel","dismiss","callback","ev","key"],"mappings":"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"}

package/lib/components/CalendarDay/CalendarDay.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["CalendarDay.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { CalendarStrings, DateFormatting } from '../../utils';\nimport type { CalendarDayGridProps, CalendarDayGridStyleProps } from '../CalendarDayGrid/CalendarDayGrid.types';\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport interface ICalendarDay {\n  focus(): void;\n}\n\nexport interface CalendarDayProps extends CalendarDayGridProps {\n  /**\n   * Optional callback to access the ICalendarDay interface. Use this instead of ref for accessing\n   * the public methods and properties of the component.\n   */\n  componentRef?: React.RefObject<ICalendarDay>;\n\n  /**\n   * Additional CSS class(es) to apply to the CalendarDay.\n   */\n  className?: string;\n\n  /**\n   * Localized strings to use in the Calendar\n   */\n  strings: CalendarStrings;\n\n  /**\n   * The currently navigated date\n   */\n  navigatedDate: Date;\n\n  /**\n   * Callback issued when a date in the calendar is navigated\n   * @param date - The date that is navigated to\n   * @param focusOnNavigatedDay - Whether to set the focus to the navigated date.\n   */\n  onNavigateDate: (date: Date, focusOnNavigatedDay: boolean) => void;\n\n  /**\n   * Callback issued when calendar day is closed\n   */\n  onDismiss?: () => void;\n\n  /**\n   * Callback function when the header is selected\n   */\n  onHeaderSelect?: () => void;\n\n  /**\n   * Whether the calendar should show the week number (weeks 1 to 53) before each week row\n   * @default false\n   */\n  showWeekNumbers?: boolean;\n\n  /**\n   * Apply additional formatting to dates, for example localized date formatting.\n   */\n  dateTimeFormatter: DateFormatting;\n\n  /**\n   * Whether the calendar should show 6 weeks by default.\n   * @default false\n   */\n  showSixWeeksByDefault?: boolean;\n\n  /**\n   * If set the Calendar will not allow navigation to or selection of a date earlier than this value.\n   */\n  minDate?: Date;\n\n  /**\n   * If set the Calendar will not allow navigation to or selection of a date later than this value.\n   */\n  maxDate?: Date;\n\n  /**\n   * If set the Calendar will not allow selection of dates in this array.\n   */\n  restrictedDates?: Date[];\n\n  /**\n   * Whether the close button should be shown or not\n   * @default false\n   */\n  showCloseButton?: boolean;\n\n  /**\n   * Allows all dates and buttons to be focused, including disabled ones\n   * @default false\n   */\n  allFocusable?: boolean;\n}\n\n/**\n * @internal\n */\nexport interface CalendarDayStyleProps extends CalendarDayGridStyleProps {\n  /**\n   * Accept custom classNames\n   */\n  className?: string;\n\n  /**\n   * Whether the header is clickable\n   */\n  headerIsClickable?: boolean;\n\n  /**\n   * Whether week numbers are being shown\n   */\n  showWeekNumbers?: boolean;\n}\n\n/**\n * @internal\n */\nexport interface CalendarDayStyles {\n  /**\n   * Style for the root element.\n   */\n  root: string;\n\n  /**\n   * The style for the header button and forward/back navigation button container\n   */\n  header: string;\n\n  /**\n   * The style for the title text inside the header\n   */\n  monthAndYear: string;\n\n  /**\n   * The style for the wrapper around forward/back/close buttons\n   */\n  monthComponents: string;\n\n  /**\n   * The style for the forward/back/close buttons\n   */\n  headerIconButton: string;\n\n  /**\n   * The style to apply for disabled elements\n   */\n  disabledStyle: string;\n}\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}
+{"version":3,"sources":["CalendarDay.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { CalendarStrings, DateFormatting } from '../../utils';\nimport type { CalendarDayGridProps, CalendarDayGridStyleProps } from '../CalendarDayGrid/CalendarDayGrid.types';\nimport type { CalendarNavigationIcons } from '../Calendar/calendarNavigationIcons';\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport interface ICalendarDay {\n  focus(): void;\n}\n\nexport interface CalendarDayProps extends CalendarDayGridProps {\n  /**\n   * Optional callback to access the ICalendarDay interface. Use this instead of ref for accessing\n   * the public methods and properties of the component.\n   */\n  componentRef?: React.RefObject<ICalendarDay>;\n\n  /**\n   * Additional CSS class(es) to apply to the CalendarDay.\n   */\n  className?: string;\n\n  /**\n   * Localized strings to use in the Calendar\n   */\n  strings: CalendarStrings;\n\n  /**\n   * The currently navigated date\n   */\n  navigatedDate: Date;\n\n  /**\n   * Callback issued when a date in the calendar is navigated\n   * @param date - The date that is navigated to\n   * @param focusOnNavigatedDay - Whether to set the focus to the navigated date.\n   */\n  onNavigateDate: (date: Date, focusOnNavigatedDay: boolean) => void;\n\n  /**\n   * Callback issued when calendar day is closed\n   */\n  onDismiss?: () => void;\n\n  /**\n   * Callback function when the header is selected\n   */\n  onHeaderSelect?: () => void;\n\n  /**\n   * Whether the calendar should show the week number (weeks 1 to 53) before each week row\n   * @default false\n   */\n  showWeekNumbers?: boolean;\n\n  /**\n   * Apply additional formatting to dates, for example localized date formatting.\n   */\n  dateTimeFormatter: DateFormatting;\n\n  /**\n   * Whether the calendar should show 6 weeks by default.\n   * @default false\n   */\n  showSixWeeksByDefault?: boolean;\n\n  /**\n   * If set the Calendar will not allow navigation to or selection of a date earlier than this value.\n   */\n  minDate?: Date;\n\n  /**\n   * If set the Calendar will not allow navigation to or selection of a date later than this value.\n   */\n  maxDate?: Date;\n\n  /**\n   * If set the Calendar will not allow selection of dates in this array.\n   */\n  restrictedDates?: Date[];\n\n  /**\n   * Whether the close button should be shown or not\n   * @default false\n   */\n  showCloseButton?: boolean;\n\n  /**\n   * Allows all dates and buttons to be focused, including disabled ones\n   * @default false\n   */\n  allFocusable?: boolean;\n\n  /**\n   * Custom navigation icons.\n   */\n  navigationIcons: CalendarNavigationIcons;\n}\n\n/**\n * @internal\n */\nexport interface CalendarDayStyleProps extends CalendarDayGridStyleProps {\n  /**\n   * Accept custom classNames\n   */\n  className?: string;\n\n  /**\n   * Whether the header is clickable\n   */\n  headerIsClickable?: boolean;\n\n  /**\n   * Whether week numbers are being shown\n   */\n  showWeekNumbers?: boolean;\n}\n\n/**\n * @internal\n */\nexport interface CalendarDayStyles {\n  /**\n   * Style for the root element.\n   */\n  root: string;\n\n  /**\n   * The style for the header button and forward/back navigation button container\n   */\n  header: string;\n\n  /**\n   * The style for the title text inside the header\n   */\n  monthAndYear: string;\n\n  /**\n   * The style for the wrapper around forward/back/close buttons\n   */\n  monthComponents: string;\n\n  /**\n   * The style for the forward/back/close buttons\n   */\n  headerIconButton: string;\n\n  /**\n   * The style to apply for disabled elements\n   */\n  disabledStyle: string;\n}\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}

package/lib/components/CalendarMonth/CalendarMonth.js

@@ -1,7 +1,5 @@
 import * as React from 'react';
 import { Enter } from '@fluentui/keyboard-keys';
-import { ArrowDownRegular, ArrowUpRegular } from '@fluentui/react-icons';
-import { useFluent_unstable } from '@fluentui/react-shared-contexts';
 import { useArrowNavigationGroup } from '@fluentui/react-tabster';
 import { mergeClasses } from '@griffel/react';
 import { addYears, compareDatePart, getMonthEnd, getMonthStart, getYearEnd, getYearStart, setMonth, DEFAULT_DATE_FORMATTING } from '../../utils';
@@ -55,7 +53,7 @@ function useFocusLogic({ componentRef }) {
 /**
  * @internal
  */ export const CalendarMonth = (props)=>{
-    const { allFocusable, animationDirection, className, componentRef, dateTimeFormatter = DEFAULT_DATE_FORMATTING, highlightCurrentMonth, highlightSelectedMonth, maxDate, minDate, navigatedDate, onHeaderSelect: onUserHeaderSelect, onNavigateDate, selectedDate, strings, today = new Date(), yearPickerHidden = false } = props;
+    const { allFocusable, animationDirection, className, componentRef, dateTimeFormatter = DEFAULT_DATE_FORMATTING, highlightCurrentMonth, highlightSelectedMonth, maxDate, minDate, navigatedDate, navigationIcons, onHeaderSelect: onUserHeaderSelect, onNavigateDate, selectedDate, strings, today = new Date(), yearPickerHidden = false } = props;
     const [navigatedMonthRef, calendarYearRef, focusOnNextUpdate] = useFocusLogic({
         componentRef
     });
@@ -118,7 +116,6 @@ function useFocusLogic({ componentRef }) {
         animateBackwards,
         animationDirection
     });
-    const { dir } = useFluent_unstable();
     const arrowNavigationAttributes = useArrowNavigationGroup({
         axis: 'both'
     });
@@ -139,6 +136,7 @@ function useFocusLogic({ componentRef }) {
             onHeaderSelect: onYearPickerHeaderSelect,
             selectedYear: selectedDate ? selectedDate.getFullYear() : navigatedDate ? navigatedDate.getFullYear() : undefined,
             navigatedYear: navigatedDate.getFullYear(),
+            navigationIcons: navigationIcons,
             onRenderYear: onRenderYear,
             strings: yearStrings,
             componentRef: calendarYearRef,
@@ -177,7 +175,7 @@ function useFocusLogic({ componentRef }) {
         onKeyDown: isPrevYearInBounds ? onButtonKeyDown(onSelectPrevYear) : undefined,
         title: strings.prevYearAriaLabel ? strings.prevYearAriaLabel + ' ' + dateFormatter.formatYear(addYears(navigatedDate, -1)) : undefined,
         type: "button"
-    }, dir === 'ltr' ? /*#__PURE__*/ React.createElement(ArrowUpRegular, null) : /*#__PURE__*/ React.createElement(ArrowDownRegular, null)), /*#__PURE__*/ React.createElement("button", {
+    }, navigationIcons.upNavigation), /*#__PURE__*/ React.createElement("button", {
         className: mergeClasses(classNames.navigationButton, !isNextYearInBounds && classNames.disabled),
         "aria-disabled": !isNextYearInBounds,
         tabIndex: isNextYearInBounds ? undefined : allFocusable ? 0 : -1,
@@ -185,7 +183,7 @@ function useFocusLogic({ componentRef }) {
         onKeyDown: isNextYearInBounds ? onButtonKeyDown(onSelectNextYear) : undefined,
         title: strings.nextYearAriaLabel ? strings.nextYearAriaLabel + ' ' + dateFormatter.formatYear(addYears(navigatedDate, 1)) : undefined,
         type: "button"
-    }, dir === 'ltr' ? /*#__PURE__*/ React.createElement(ArrowDownRegular, null) : /*#__PURE__*/ React.createElement(ArrowUpRegular, null)))), /*#__PURE__*/ React.createElement("div", {
+    }, navigationIcons.downNavigation))), /*#__PURE__*/ React.createElement("div", {
         ...arrowNavigationAttributes,
         className: classNames.gridContainer,
         role: "grid",

package/lib/components/CalendarMonth/CalendarMonth.js.map

@@ -1 +1 @@
-{"version":3,"sources":["CalendarMonth.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Enter } from '@fluentui/keyboard-keys';\nimport { ArrowDownRegular, ArrowUpRegular } from '@fluentui/react-icons';\nimport { useFluent_unstable } from '@fluentui/react-shared-contexts';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport { mergeClasses } from '@griffel/react';\nimport {\n  addYears,\n  compareDatePart,\n  getMonthEnd,\n  getMonthStart,\n  getYearEnd,\n  getYearStart,\n  setMonth,\n  DEFAULT_DATE_FORMATTING,\n} from '../../utils';\nimport { CalendarYear } from '../CalendarYear/CalendarYear';\nimport { useCalendarMonthStyles_unstable } from './useCalendarMonthStyles';\nimport type { CalendarMonthProps } from './CalendarMonth.types';\nimport type { CalendarYearRange, ICalendarYear } from '../CalendarYear/CalendarYear.types';\n\nconst MONTHS_PER_ROW = 4;\n\nfunction useAnimateBackwards({ navigatedDate }: { navigatedDate: CalendarMonthProps['navigatedDate'] }) {\n  const currentYear = navigatedDate.getFullYear();\n\n  const previousYearRef = React.useRef<number | undefined>();\n  React.useEffect(() => {\n    previousYearRef.current = currentYear;\n  });\n  const previousYear = previousYearRef.current;\n\n  if (previousYear === undefined || previousYear === currentYear) {\n    return undefined;\n  } else {\n    return previousYear > currentYear;\n  }\n}\n\nfunction useFocusLogic({ componentRef }: { componentRef: CalendarMonthProps['componentRef'] }) {\n  const navigatedMonthRef = React.useRef<HTMLButtonElement>(null);\n  const calendarYearRef = React.useRef<ICalendarYear>(null);\n  const focusOnUpdate = React.useRef(false);\n\n  const focus = React.useCallback(() => {\n    if (calendarYearRef.current) {\n      calendarYearRef.current.focus();\n    } else if (navigatedMonthRef.current) {\n      navigatedMonthRef.current.focus();\n    }\n  }, []);\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 [navigatedMonthRef, calendarYearRef, focusOnNextUpdate] as const;\n}\n\n/**\n * @internal\n */\nexport const CalendarMonth: React.FunctionComponent<CalendarMonthProps> = props => {\n  const {\n    allFocusable,\n    animationDirection,\n    className,\n    componentRef,\n    dateTimeFormatter = DEFAULT_DATE_FORMATTING,\n    highlightCurrentMonth,\n    highlightSelectedMonth,\n    maxDate,\n    minDate,\n    navigatedDate,\n    onHeaderSelect: onUserHeaderSelect,\n    onNavigateDate,\n    selectedDate,\n    strings,\n    today = new Date(),\n    yearPickerHidden = false,\n  } = props;\n\n  const [navigatedMonthRef, calendarYearRef, focusOnNextUpdate] = useFocusLogic({ componentRef });\n  const [isYearPickerVisible, setIsYearPickerVisible] = React.useState(false);\n\n  const animateBackwards = useAnimateBackwards({ navigatedDate });\n\n  const selectMonthCallback = (newMonth: number): (() => void) => {\n    return () => onSelectMonth(newMonth);\n  };\n\n  const onSelectNextYear = (): void => {\n    onNavigateDate(addYears(navigatedDate, 1), false);\n  };\n\n  const onSelectPrevYear = (): void => {\n    onNavigateDate(addYears(navigatedDate, -1), false);\n  };\n\n  const onSelectMonth = (newMonth: number): void => {\n    // If header is clickable the calendars are overlayed, switch back to day picker when month is clicked\n    onUserHeaderSelect?.();\n    onNavigateDate(setMonth(navigatedDate, newMonth), true);\n  };\n\n  const onHeaderSelect = (): void => {\n    if (!yearPickerHidden) {\n      focusOnNextUpdate();\n      setIsYearPickerVisible(true);\n    } else {\n      onUserHeaderSelect?.();\n    }\n  };\n\n  const onSelectYear = (selectedYear: number) => {\n    focusOnNextUpdate();\n    const navYear = navigatedDate.getFullYear();\n    if (navYear !== selectedYear) {\n      let newNavigationDate = new Date(navigatedDate.getTime());\n      newNavigationDate.setFullYear(selectedYear);\n      // for min and max dates, adjust the new navigation date - perhaps this should be\n      // checked on the master navigation date handler (i.e. in Calendar)\n      if (maxDate && newNavigationDate > maxDate) {\n        newNavigationDate = setMonth(newNavigationDate, maxDate.getMonth());\n      } else if (minDate && newNavigationDate < minDate) {\n        newNavigationDate = setMonth(newNavigationDate, minDate.getMonth());\n      }\n      onNavigateDate(newNavigationDate, true);\n    }\n    setIsYearPickerVisible(false);\n  };\n\n  const onYearPickerHeaderSelect = (focus: boolean): void => {\n    focusOnNextUpdate();\n    setIsYearPickerVisible(false);\n  };\n\n  const dateFormatter = dateTimeFormatter!;\n\n  // determine if previous/next years are in bounds\n  const isPrevYearInBounds = minDate ? compareDatePart(minDate, getYearStart(navigatedDate)) < 0 : true;\n  const isNextYearInBounds = maxDate ? compareDatePart(getYearEnd(navigatedDate), maxDate) < 0 : true;\n\n  const classNames = useCalendarMonthStyles_unstable({\n    className,\n    hasHeaderClickCallback: !!onUserHeaderSelect || !yearPickerHidden,\n    highlightCurrent: highlightCurrentMonth,\n    highlightSelected: highlightSelectedMonth,\n    animateBackwards,\n    animationDirection,\n  });\n\n  const { dir } = useFluent_unstable();\n  const arrowNavigationAttributes = useArrowNavigationGroup({ axis: 'both' });\n\n  if (isYearPickerVisible) {\n    const [onRenderYear, yearStrings] = getYearStrings({ dateTimeFormatter, navigatedDate, strings });\n    // use navigated date for the year picker\n    return (\n      <CalendarYear\n        key={'calendarYear'}\n        minYear={minDate ? minDate.getFullYear() : undefined}\n        maxYear={maxDate ? maxDate.getFullYear() : undefined}\n        // eslint-disable-next-line react/jsx-no-bind\n        onSelectYear={onSelectYear}\n        // eslint-disable-next-line react/jsx-no-bind\n        onHeaderSelect={onYearPickerHeaderSelect}\n        selectedYear={\n          selectedDate ? selectedDate.getFullYear() : navigatedDate ? navigatedDate.getFullYear() : undefined\n        }\n        navigatedYear={navigatedDate.getFullYear()}\n        onRenderYear={onRenderYear}\n        strings={yearStrings}\n        componentRef={calendarYearRef}\n        highlightCurrentYear={highlightCurrentMonth}\n        highlightSelectedYear={highlightSelectedMonth}\n        animationDirection={animationDirection}\n      />\n    );\n  }\n\n  const rowIndexes = [];\n  for (let i = 0; i < strings.shortMonths.length / MONTHS_PER_ROW; i++) {\n    rowIndexes.push(i);\n  }\n\n  const yearString = dateFormatter.formatYear(navigatedDate);\n  const headerAriaLabel = strings.monthPickerHeaderAriaLabel\n    ? strings.monthPickerHeaderAriaLabel.replace('{0}', yearString)\n    : yearString;\n\n  return (\n    <div className={classNames.root}>\n      <div className={classNames.headerContainer}>\n        <button\n          className={classNames.currentItemButton}\n          onClick={onHeaderSelect}\n          onKeyDown={onButtonKeyDown(onHeaderSelect)}\n          aria-label={headerAriaLabel}\n          tabIndex={!!onUserHeaderSelect || !yearPickerHidden ? 0 : -1}\n          type=\"button\"\n        >\n          <span aria-live=\"polite\" aria-atomic=\"true\">\n            {yearString}\n          </span>\n        </button>\n        <div className={classNames.navigationButtonsContainer}>\n          <button\n            className={mergeClasses(classNames.navigationButton, !isPrevYearInBounds && classNames.disabled)}\n            aria-disabled={!isPrevYearInBounds}\n            tabIndex={isPrevYearInBounds ? undefined : allFocusable ? 0 : -1}\n            onClick={isPrevYearInBounds ? onSelectPrevYear : undefined}\n            onKeyDown={isPrevYearInBounds ? onButtonKeyDown(onSelectPrevYear) : undefined}\n            title={\n              strings.prevYearAriaLabel\n                ? strings.prevYearAriaLabel + ' ' + dateFormatter.formatYear(addYears(navigatedDate, -1))\n                : undefined\n            }\n            type=\"button\"\n          >\n            {dir === 'ltr' ? <ArrowUpRegular /> : <ArrowDownRegular />}\n          </button>\n          <button\n            className={mergeClasses(classNames.navigationButton, !isNextYearInBounds && classNames.disabled)}\n            aria-disabled={!isNextYearInBounds}\n            tabIndex={isNextYearInBounds ? undefined : allFocusable ? 0 : -1}\n            onClick={isNextYearInBounds ? onSelectNextYear : undefined}\n            onKeyDown={isNextYearInBounds ? onButtonKeyDown(onSelectNextYear) : undefined}\n            title={\n              strings.nextYearAriaLabel\n                ? strings.nextYearAriaLabel + ' ' + dateFormatter.formatYear(addYears(navigatedDate, 1))\n                : undefined\n            }\n            type=\"button\"\n          >\n            {dir === 'ltr' ? <ArrowDownRegular /> : <ArrowUpRegular />}\n          </button>\n        </div>\n      </div>\n      <div {...arrowNavigationAttributes} className={classNames.gridContainer} role=\"grid\" aria-label={yearString}>\n        {rowIndexes.map((rowNum: number) => {\n          const monthsForRow = strings!.shortMonths.slice(rowNum * MONTHS_PER_ROW, (rowNum + 1) * MONTHS_PER_ROW);\n          return (\n            <div key={'monthRow_' + rowNum + navigatedDate.getFullYear()} role=\"row\" className={classNames.buttonRow}>\n              {monthsForRow.map((month: string, index: number) => {\n                const monthIndex = rowNum * MONTHS_PER_ROW + index;\n                const indexedMonth = setMonth(navigatedDate, monthIndex);\n                const isNavigatedMonth = navigatedDate.getMonth() === monthIndex;\n                const isSelectedMonth = selectedDate.getMonth() === monthIndex;\n                const isSelectedYear = selectedDate.getFullYear() === navigatedDate.getFullYear();\n                const isInBounds =\n                  (minDate ? compareDatePart(minDate, getMonthEnd(indexedMonth)) < 1 : true) &&\n                  (maxDate ? compareDatePart(getMonthStart(indexedMonth), maxDate) < 1 : true);\n\n                return (\n                  <button\n                    ref={isNavigatedMonth ? navigatedMonthRef : undefined}\n                    role={'gridcell'}\n                    className={mergeClasses(\n                      classNames.itemButton,\n                      highlightCurrentMonth &&\n                        isCurrentMonth(monthIndex, navigatedDate.getFullYear(), today) &&\n                        classNames.current,\n                      highlightSelectedMonth && isSelectedMonth && isSelectedYear && classNames.selected,\n                      !isInBounds && classNames.disabled,\n                    )}\n                    disabled={!allFocusable && !isInBounds}\n                    key={monthIndex}\n                    onClick={isInBounds ? selectMonthCallback(monthIndex) : undefined}\n                    onKeyDown={isInBounds ? onButtonKeyDown(selectMonthCallback(monthIndex)) : undefined}\n                    aria-label={dateFormatter.formatMonth(indexedMonth, strings!)}\n                    aria-selected={isNavigatedMonth}\n                    tabIndex={isInBounds ? 0 : -1}\n                    type=\"button\"\n                  >\n                    {month}\n                  </button>\n                );\n              })}\n            </div>\n          );\n        })}\n      </div>\n    </div>\n  );\n};\nCalendarMonth.displayName = 'CalendarMonth';\n\nfunction getYearStrings({\n  dateTimeFormatter,\n  navigatedDate,\n  strings,\n}: Pick<CalendarMonthProps, 'dateTimeFormatter' | 'navigatedDate' | 'strings'>) {\n  const yearToString = (year: number) => {\n    if (dateTimeFormatter) {\n      // create a date based on the current nav date\n      const yearFormattingDate = new Date(navigatedDate.getTime());\n      yearFormattingDate.setFullYear(year);\n      return dateTimeFormatter.formatYear(yearFormattingDate);\n    }\n    return String(year);\n  };\n\n  const yearRangeToString = (yearRange: CalendarYearRange) => {\n    return `${yearToString(yearRange.fromYear)} - ${yearToString(yearRange.toYear)}`;\n  };\n\n  const yearRangeToNextDecadeLabel = (yearRange: CalendarYearRange) => {\n    return strings.nextYearRangeAriaLabel ? `${strings.nextYearRangeAriaLabel} ${yearRangeToString(yearRange)}` : '';\n  };\n\n  const yearRangeToPrevDecadeLabel = (yearRange: CalendarYearRange) => {\n    return strings.prevYearRangeAriaLabel ? `${strings.prevYearRangeAriaLabel} ${yearRangeToString(yearRange)}` : '';\n  };\n\n  return [\n    yearToString,\n    {\n      rangeAriaLabel: yearRangeToString,\n      prevRangeAriaLabel: yearRangeToPrevDecadeLabel,\n      nextRangeAriaLabel: yearRangeToNextDecadeLabel,\n      headerAriaLabelFormatString: strings.yearPickerHeaderAriaLabel,\n    } as const,\n  ] as const;\n}\n\nfunction isCurrentMonth(month: number, year: number, today: Date): boolean {\n  return today.getFullYear() === year && today.getMonth() === month;\n}\n\nfunction onButtonKeyDown(callback: () => void): (ev: React.KeyboardEvent<HTMLButtonElement>) => void {\n  return (ev: React.KeyboardEvent<HTMLButtonElement>) => {\n    switch (ev.key) {\n      case Enter:\n        callback();\n        break;\n    }\n  };\n}\n"],"names":["React","Enter","ArrowDownRegular","ArrowUpRegular","useFluent_unstable","useArrowNavigationGroup","mergeClasses","addYears","compareDatePart","getMonthEnd","getMonthStart","getYearEnd","getYearStart","setMonth","DEFAULT_DATE_FORMATTING","CalendarYear","useCalendarMonthStyles_unstable","MONTHS_PER_ROW","useAnimateBackwards","navigatedDate","currentYear","getFullYear","previousYearRef","useRef","useEffect","current","previousYear","undefined","useFocusLogic","componentRef","navigatedMonthRef","calendarYearRef","focusOnUpdate","focus","useCallback","useImperativeHandle","focusOnNextUpdate","CalendarMonth","props","allFocusable","animationDirection","className","dateTimeFormatter","highlightCurrentMonth","highlightSelectedMonth","maxDate","minDate","onHeaderSelect","onUserHeaderSelect","onNavigateDate","selectedDate","strings","today","Date","yearPickerHidden","isYearPickerVisible","setIsYearPickerVisible","useState","animateBackwards","selectMonthCallback","newMonth","onSelectMonth","onSelectNextYear","onSelectPrevYear","onSelectYear","selectedYear","navYear","newNavigationDate","getTime","setFullYear","getMonth","onYearPickerHeaderSelect","dateFormatter","isPrevYearInBounds","isNextYearInBounds","classNames","hasHeaderClickCallback","highlightCurrent","highlightSelected","dir","arrowNavigationAttributes","axis","onRenderYear","yearStrings","getYearStrings","key","minYear","maxYear","navigatedYear","highlightCurrentYear","highlightSelectedYear","rowIndexes","i","shortMonths","length","push","yearString","formatYear","headerAriaLabel","monthPickerHeaderAriaLabel","replace","div","root","headerContainer","button","currentItemButton","onClick","onKeyDown","onButtonKeyDown","aria-label","tabIndex","type","span","aria-live","aria-atomic","navigationButtonsContainer","navigationButton","disabled","aria-disabled","title","prevYearAriaLabel","nextYearAriaLabel","gridContainer","role","map","rowNum","monthsForRow","slice","buttonRow","month","index","monthIndex","indexedMonth","isNavigatedMonth","isSelectedMonth","isSelectedYear","isInBounds","ref","itemButton","isCurrentMonth","selected","formatMonth","aria-selected","displayName","yearToString","year","yearFormattingDate","String","yearRangeToString","yearRange","fromYear","toYear","yearRangeToNextDecadeLabel","nextYearRangeAriaLabel","yearRangeToPrevDecadeLabel","prevYearRangeAriaLabel","rangeAriaLabel","prevRangeAriaLabel","nextRangeAriaLabel","headerAriaLabelFormatString","yearPickerHeaderAriaLabel","callback","ev"],"mappings":"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"}
+{"version":3,"sources":["CalendarMonth.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Enter } from '@fluentui/keyboard-keys';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport { mergeClasses } from '@griffel/react';\nimport {\n  addYears,\n  compareDatePart,\n  getMonthEnd,\n  getMonthStart,\n  getYearEnd,\n  getYearStart,\n  setMonth,\n  DEFAULT_DATE_FORMATTING,\n} from '../../utils';\nimport { CalendarYear } from '../CalendarYear/CalendarYear';\nimport { useCalendarMonthStyles_unstable } from './useCalendarMonthStyles';\nimport type { CalendarMonthProps } from './CalendarMonth.types';\nimport type { CalendarYearRange, ICalendarYear } from '../CalendarYear/CalendarYear.types';\n\nconst MONTHS_PER_ROW = 4;\n\nfunction useAnimateBackwards({ navigatedDate }: { navigatedDate: CalendarMonthProps['navigatedDate'] }) {\n  const currentYear = navigatedDate.getFullYear();\n\n  const previousYearRef = React.useRef<number | undefined>();\n  React.useEffect(() => {\n    previousYearRef.current = currentYear;\n  });\n  const previousYear = previousYearRef.current;\n\n  if (previousYear === undefined || previousYear === currentYear) {\n    return undefined;\n  } else {\n    return previousYear > currentYear;\n  }\n}\n\nfunction useFocusLogic({ componentRef }: { componentRef: CalendarMonthProps['componentRef'] }) {\n  const navigatedMonthRef = React.useRef<HTMLButtonElement>(null);\n  const calendarYearRef = React.useRef<ICalendarYear>(null);\n  const focusOnUpdate = React.useRef(false);\n\n  const focus = React.useCallback(() => {\n    if (calendarYearRef.current) {\n      calendarYearRef.current.focus();\n    } else if (navigatedMonthRef.current) {\n      navigatedMonthRef.current.focus();\n    }\n  }, []);\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 [navigatedMonthRef, calendarYearRef, focusOnNextUpdate] as const;\n}\n\n/**\n * @internal\n */\nexport const CalendarMonth: React.FunctionComponent<CalendarMonthProps> = props => {\n  const {\n    allFocusable,\n    animationDirection,\n    className,\n    componentRef,\n    dateTimeFormatter = DEFAULT_DATE_FORMATTING,\n    highlightCurrentMonth,\n    highlightSelectedMonth,\n    maxDate,\n    minDate,\n    navigatedDate,\n    navigationIcons,\n    onHeaderSelect: onUserHeaderSelect,\n    onNavigateDate,\n    selectedDate,\n    strings,\n    today = new Date(),\n    yearPickerHidden = false,\n  } = props;\n\n  const [navigatedMonthRef, calendarYearRef, focusOnNextUpdate] = useFocusLogic({ componentRef });\n  const [isYearPickerVisible, setIsYearPickerVisible] = React.useState(false);\n\n  const animateBackwards = useAnimateBackwards({ navigatedDate });\n\n  const selectMonthCallback = (newMonth: number): (() => void) => {\n    return () => onSelectMonth(newMonth);\n  };\n\n  const onSelectNextYear = (): void => {\n    onNavigateDate(addYears(navigatedDate, 1), false);\n  };\n\n  const onSelectPrevYear = (): void => {\n    onNavigateDate(addYears(navigatedDate, -1), false);\n  };\n\n  const onSelectMonth = (newMonth: number): void => {\n    // If header is clickable the calendars are overlayed, switch back to day picker when month is clicked\n    onUserHeaderSelect?.();\n    onNavigateDate(setMonth(navigatedDate, newMonth), true);\n  };\n\n  const onHeaderSelect = (): void => {\n    if (!yearPickerHidden) {\n      focusOnNextUpdate();\n      setIsYearPickerVisible(true);\n    } else {\n      onUserHeaderSelect?.();\n    }\n  };\n\n  const onSelectYear = (selectedYear: number) => {\n    focusOnNextUpdate();\n    const navYear = navigatedDate.getFullYear();\n    if (navYear !== selectedYear) {\n      let newNavigationDate = new Date(navigatedDate.getTime());\n      newNavigationDate.setFullYear(selectedYear);\n      // for min and max dates, adjust the new navigation date - perhaps this should be\n      // checked on the master navigation date handler (i.e. in Calendar)\n      if (maxDate && newNavigationDate > maxDate) {\n        newNavigationDate = setMonth(newNavigationDate, maxDate.getMonth());\n      } else if (minDate && newNavigationDate < minDate) {\n        newNavigationDate = setMonth(newNavigationDate, minDate.getMonth());\n      }\n      onNavigateDate(newNavigationDate, true);\n    }\n    setIsYearPickerVisible(false);\n  };\n\n  const onYearPickerHeaderSelect = (focus: boolean): void => {\n    focusOnNextUpdate();\n    setIsYearPickerVisible(false);\n  };\n\n  const dateFormatter = dateTimeFormatter!;\n\n  // determine if previous/next years are in bounds\n  const isPrevYearInBounds = minDate ? compareDatePart(minDate, getYearStart(navigatedDate)) < 0 : true;\n  const isNextYearInBounds = maxDate ? compareDatePart(getYearEnd(navigatedDate), maxDate) < 0 : true;\n\n  const classNames = useCalendarMonthStyles_unstable({\n    className,\n    hasHeaderClickCallback: !!onUserHeaderSelect || !yearPickerHidden,\n    highlightCurrent: highlightCurrentMonth,\n    highlightSelected: highlightSelectedMonth,\n    animateBackwards,\n    animationDirection,\n  });\n\n  const arrowNavigationAttributes = useArrowNavigationGroup({ axis: 'both' });\n\n  if (isYearPickerVisible) {\n    const [onRenderYear, yearStrings] = getYearStrings({ dateTimeFormatter, navigatedDate, strings });\n    // use navigated date for the year picker\n    return (\n      <CalendarYear\n        key={'calendarYear'}\n        minYear={minDate ? minDate.getFullYear() : undefined}\n        maxYear={maxDate ? maxDate.getFullYear() : undefined}\n        // eslint-disable-next-line react/jsx-no-bind\n        onSelectYear={onSelectYear}\n        // eslint-disable-next-line react/jsx-no-bind\n        onHeaderSelect={onYearPickerHeaderSelect}\n        selectedYear={\n          selectedDate ? selectedDate.getFullYear() : navigatedDate ? navigatedDate.getFullYear() : undefined\n        }\n        navigatedYear={navigatedDate.getFullYear()}\n        navigationIcons={navigationIcons}\n        onRenderYear={onRenderYear}\n        strings={yearStrings}\n        componentRef={calendarYearRef}\n        highlightCurrentYear={highlightCurrentMonth}\n        highlightSelectedYear={highlightSelectedMonth}\n        animationDirection={animationDirection}\n      />\n    );\n  }\n\n  const rowIndexes = [];\n  for (let i = 0; i < strings.shortMonths.length / MONTHS_PER_ROW; i++) {\n    rowIndexes.push(i);\n  }\n\n  const yearString = dateFormatter.formatYear(navigatedDate);\n  const headerAriaLabel = strings.monthPickerHeaderAriaLabel\n    ? strings.monthPickerHeaderAriaLabel.replace('{0}', yearString)\n    : yearString;\n\n  return (\n    <div className={classNames.root}>\n      <div className={classNames.headerContainer}>\n        <button\n          className={classNames.currentItemButton}\n          onClick={onHeaderSelect}\n          onKeyDown={onButtonKeyDown(onHeaderSelect)}\n          aria-label={headerAriaLabel}\n          tabIndex={!!onUserHeaderSelect || !yearPickerHidden ? 0 : -1}\n          type=\"button\"\n        >\n          <span aria-live=\"polite\" aria-atomic=\"true\">\n            {yearString}\n          </span>\n        </button>\n        <div className={classNames.navigationButtonsContainer}>\n          <button\n            className={mergeClasses(classNames.navigationButton, !isPrevYearInBounds && classNames.disabled)}\n            aria-disabled={!isPrevYearInBounds}\n            tabIndex={isPrevYearInBounds ? undefined : allFocusable ? 0 : -1}\n            onClick={isPrevYearInBounds ? onSelectPrevYear : undefined}\n            onKeyDown={isPrevYearInBounds ? onButtonKeyDown(onSelectPrevYear) : undefined}\n            title={\n              strings.prevYearAriaLabel\n                ? strings.prevYearAriaLabel + ' ' + dateFormatter.formatYear(addYears(navigatedDate, -1))\n                : undefined\n            }\n            type=\"button\"\n          >\n            {navigationIcons.upNavigation}\n          </button>\n          <button\n            className={mergeClasses(classNames.navigationButton, !isNextYearInBounds && classNames.disabled)}\n            aria-disabled={!isNextYearInBounds}\n            tabIndex={isNextYearInBounds ? undefined : allFocusable ? 0 : -1}\n            onClick={isNextYearInBounds ? onSelectNextYear : undefined}\n            onKeyDown={isNextYearInBounds ? onButtonKeyDown(onSelectNextYear) : undefined}\n            title={\n              strings.nextYearAriaLabel\n                ? strings.nextYearAriaLabel + ' ' + dateFormatter.formatYear(addYears(navigatedDate, 1))\n                : undefined\n            }\n            type=\"button\"\n          >\n            {navigationIcons.downNavigation}\n          </button>\n        </div>\n      </div>\n      <div {...arrowNavigationAttributes} className={classNames.gridContainer} role=\"grid\" aria-label={yearString}>\n        {rowIndexes.map((rowNum: number) => {\n          const monthsForRow = strings!.shortMonths.slice(rowNum * MONTHS_PER_ROW, (rowNum + 1) * MONTHS_PER_ROW);\n          return (\n            <div key={'monthRow_' + rowNum + navigatedDate.getFullYear()} role=\"row\" className={classNames.buttonRow}>\n              {monthsForRow.map((month: string, index: number) => {\n                const monthIndex = rowNum * MONTHS_PER_ROW + index;\n                const indexedMonth = setMonth(navigatedDate, monthIndex);\n                const isNavigatedMonth = navigatedDate.getMonth() === monthIndex;\n                const isSelectedMonth = selectedDate.getMonth() === monthIndex;\n                const isSelectedYear = selectedDate.getFullYear() === navigatedDate.getFullYear();\n                const isInBounds =\n                  (minDate ? compareDatePart(minDate, getMonthEnd(indexedMonth)) < 1 : true) &&\n                  (maxDate ? compareDatePart(getMonthStart(indexedMonth), maxDate) < 1 : true);\n\n                return (\n                  <button\n                    ref={isNavigatedMonth ? navigatedMonthRef : undefined}\n                    role={'gridcell'}\n                    className={mergeClasses(\n                      classNames.itemButton,\n                      highlightCurrentMonth &&\n                        isCurrentMonth(monthIndex, navigatedDate.getFullYear(), today) &&\n                        classNames.current,\n                      highlightSelectedMonth && isSelectedMonth && isSelectedYear && classNames.selected,\n                      !isInBounds && classNames.disabled,\n                    )}\n                    disabled={!allFocusable && !isInBounds}\n                    key={monthIndex}\n                    onClick={isInBounds ? selectMonthCallback(monthIndex) : undefined}\n                    onKeyDown={isInBounds ? onButtonKeyDown(selectMonthCallback(monthIndex)) : undefined}\n                    aria-label={dateFormatter.formatMonth(indexedMonth, strings!)}\n                    aria-selected={isNavigatedMonth}\n                    tabIndex={isInBounds ? 0 : -1}\n                    type=\"button\"\n                  >\n                    {month}\n                  </button>\n                );\n              })}\n            </div>\n          );\n        })}\n      </div>\n    </div>\n  );\n};\nCalendarMonth.displayName = 'CalendarMonth';\n\nfunction getYearStrings({\n  dateTimeFormatter,\n  navigatedDate,\n  strings,\n}: Pick<CalendarMonthProps, 'dateTimeFormatter' | 'navigatedDate' | 'strings'>) {\n  const yearToString = (year: number) => {\n    if (dateTimeFormatter) {\n      // create a date based on the current nav date\n      const yearFormattingDate = new Date(navigatedDate.getTime());\n      yearFormattingDate.setFullYear(year);\n      return dateTimeFormatter.formatYear(yearFormattingDate);\n    }\n    return String(year);\n  };\n\n  const yearRangeToString = (yearRange: CalendarYearRange) => {\n    return `${yearToString(yearRange.fromYear)} - ${yearToString(yearRange.toYear)}`;\n  };\n\n  const yearRangeToNextDecadeLabel = (yearRange: CalendarYearRange) => {\n    return strings.nextYearRangeAriaLabel ? `${strings.nextYearRangeAriaLabel} ${yearRangeToString(yearRange)}` : '';\n  };\n\n  const yearRangeToPrevDecadeLabel = (yearRange: CalendarYearRange) => {\n    return strings.prevYearRangeAriaLabel ? `${strings.prevYearRangeAriaLabel} ${yearRangeToString(yearRange)}` : '';\n  };\n\n  return [\n    yearToString,\n    {\n      rangeAriaLabel: yearRangeToString,\n      prevRangeAriaLabel: yearRangeToPrevDecadeLabel,\n      nextRangeAriaLabel: yearRangeToNextDecadeLabel,\n      headerAriaLabelFormatString: strings.yearPickerHeaderAriaLabel,\n    } as const,\n  ] as const;\n}\n\nfunction isCurrentMonth(month: number, year: number, today: Date): boolean {\n  return today.getFullYear() === year && today.getMonth() === month;\n}\n\nfunction onButtonKeyDown(callback: () => void): (ev: React.KeyboardEvent<HTMLButtonElement>) => void {\n  return (ev: React.KeyboardEvent<HTMLButtonElement>) => {\n    switch (ev.key) {\n      case Enter:\n        callback();\n        break;\n    }\n  };\n}\n"],"names":["React","Enter","useArrowNavigationGroup","mergeClasses","addYears","compareDatePart","getMonthEnd","getMonthStart","getYearEnd","getYearStart","setMonth","DEFAULT_DATE_FORMATTING","CalendarYear","useCalendarMonthStyles_unstable","MONTHS_PER_ROW","useAnimateBackwards","navigatedDate","currentYear","getFullYear","previousYearRef","useRef","useEffect","current","previousYear","undefined","useFocusLogic","componentRef","navigatedMonthRef","calendarYearRef","focusOnUpdate","focus","useCallback","useImperativeHandle","focusOnNextUpdate","CalendarMonth","props","allFocusable","animationDirection","className","dateTimeFormatter","highlightCurrentMonth","highlightSelectedMonth","maxDate","minDate","navigationIcons","onHeaderSelect","onUserHeaderSelect","onNavigateDate","selectedDate","strings","today","Date","yearPickerHidden","isYearPickerVisible","setIsYearPickerVisible","useState","animateBackwards","selectMonthCallback","newMonth","onSelectMonth","onSelectNextYear","onSelectPrevYear","onSelectYear","selectedYear","navYear","newNavigationDate","getTime","setFullYear","getMonth","onYearPickerHeaderSelect","dateFormatter","isPrevYearInBounds","isNextYearInBounds","classNames","hasHeaderClickCallback","highlightCurrent","highlightSelected","arrowNavigationAttributes","axis","onRenderYear","yearStrings","getYearStrings","key","minYear","maxYear","navigatedYear","highlightCurrentYear","highlightSelectedYear","rowIndexes","i","shortMonths","length","push","yearString","formatYear","headerAriaLabel","monthPickerHeaderAriaLabel","replace","div","root","headerContainer","button","currentItemButton","onClick","onKeyDown","onButtonKeyDown","aria-label","tabIndex","type","span","aria-live","aria-atomic","navigationButtonsContainer","navigationButton","disabled","aria-disabled","title","prevYearAriaLabel","upNavigation","nextYearAriaLabel","downNavigation","gridContainer","role","map","rowNum","monthsForRow","slice","buttonRow","month","index","monthIndex","indexedMonth","isNavigatedMonth","isSelectedMonth","isSelectedYear","isInBounds","ref","itemButton","isCurrentMonth","selected","formatMonth","aria-selected","displayName","yearToString","year","yearFormattingDate","String","yearRangeToString","yearRange","fromYear","toYear","yearRangeToNextDecadeLabel","nextYearRangeAriaLabel","yearRangeToPrevDecadeLabel","prevYearRangeAriaLabel","rangeAriaLabel","prevRangeAriaLabel","nextRangeAriaLabel","headerAriaLabelFormatString","yearPickerHeaderAriaLabel","callback","ev"],"mappings":"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"}

package/lib/components/CalendarMonth/CalendarMonth.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["CalendarMonth.types.ts"],"sourcesContent":["import * as React from 'react';\nimport { AnimationDirection } from '../Calendar/Calendar.types';\nimport type { CalendarStrings, DateFormatting } from '../../utils';\nimport type { CalendarPickerStyleProps, CalendarPickerStyles } from '../CalendarPicker/CalendarPicker.types';\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport interface ICalendarMonth {\n  focus(): void;\n}\n\nexport interface CalendarMonthProps {\n  /**\n   * Optional callback to access the ICalendarMonth interface. Use this instead of ref for accessing\n   * the public methods and properties of the component.\n   */\n  componentRef?: React.RefObject<ICalendarMonth>;\n\n  /**\n   * Localized strings to use in the Calendar\n   */\n  strings: CalendarStrings;\n\n  /**\n   * The currently selected date\n   */\n  selectedDate: Date;\n\n  /**\n   * The currently navigated date\n   */\n  navigatedDate: Date;\n\n  /**\n   * Callback issued when a month is selected\n   * @param date - The date the user selected\n   * @param selectedDateRangeArray - The resultant list of dates that are selected based on the date range type set\n   * for the component.\n   */\n  onSelectDate?: (date: Date, selectedDateRangeArray?: Date[]) => void;\n\n  /**\n   * Callback issued when the year is navigated\n   * @param date - The date that is navigated to\n   * @param focusOnNavigatedDay - Whether to set the focus to the navigated date.\n   */\n  onNavigateDate: (date: Date, focusOnNavigatedDay: boolean) => void;\n\n  /**\n   * Value of today. If unspecified, current time in client machine will be used.\n   */\n  today?: Date;\n\n  /**\n   * Callback function when the header is selected\n   */\n  onHeaderSelect?: () => void;\n\n  /**\n   * Apply additional formatting to dates, for example localized date formatting.\n   */\n  dateTimeFormatter?: DateFormatting;\n\n  /**\n   * If set the Calendar will not allow navigation to or selection of a date earlier than this value.\n   */\n  minDate?: Date;\n\n  /**\n   * If set the Calendar will not allow navigation to or selection of a date later than this value.\n   */\n  maxDate?: Date;\n\n  /**\n   * Whether the month picker should highlight the current month\n   * @default false\n   */\n  highlightCurrentMonth?: boolean;\n\n  /**\n   * Whether the month picker should highlight the selected month\n   * @default false\n   */\n  highlightSelectedMonth?: boolean;\n\n  /**\n   * Allows all dates and buttons to be focused, including disabled ones\n   * @default false\n   */\n  allFocusable?: boolean;\n\n  /**\n   * Additional CSS class(es) to apply to the CalendarMonth.\n   */\n  className?: string;\n\n  /**\n   * Whether the year picker is hidden\n   * @default false\n   */\n  yearPickerHidden?: boolean;\n\n  /**\n   * The cardinal directions for animation to occur during transitions, either horizontal or veritcal\n   */\n  animationDirection?: AnimationDirection;\n}\n\n/**\n * @internal\n */\nexport interface CalendarMonthStyleProps extends CalendarPickerStyleProps {}\n\n/**\n * @internal\n */\nexport interface CalendarMonthStyles extends CalendarPickerStyles {}\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}
+{"version":3,"sources":["CalendarMonth.types.ts"],"sourcesContent":["import * as React from 'react';\nimport { AnimationDirection } from '../Calendar/Calendar.types';\nimport type { CalendarNavigationIcons } from '../Calendar/calendarNavigationIcons';\nimport type { CalendarStrings, DateFormatting } from '../../utils';\nimport type { CalendarPickerStyleProps, CalendarPickerStyles } from '../CalendarPicker/CalendarPicker.types';\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport interface ICalendarMonth {\n  focus(): void;\n}\n\nexport interface CalendarMonthProps {\n  /**\n   * Optional callback to access the ICalendarMonth interface. Use this instead of ref for accessing\n   * the public methods and properties of the component.\n   */\n  componentRef?: React.RefObject<ICalendarMonth>;\n\n  /**\n   * Localized strings to use in the Calendar\n   */\n  strings: CalendarStrings;\n\n  /**\n   * The currently selected date\n   */\n  selectedDate: Date;\n\n  /**\n   * The currently navigated date\n   */\n  navigatedDate: Date;\n\n  /**\n   * Callback issued when a month is selected\n   * @param date - The date the user selected\n   * @param selectedDateRangeArray - The resultant list of dates that are selected based on the date range type set\n   * for the component.\n   */\n  onSelectDate?: (date: Date, selectedDateRangeArray?: Date[]) => void;\n\n  /**\n   * Callback issued when the year is navigated\n   * @param date - The date that is navigated to\n   * @param focusOnNavigatedDay - Whether to set the focus to the navigated date.\n   */\n  onNavigateDate: (date: Date, focusOnNavigatedDay: boolean) => void;\n\n  /**\n   * Value of today. If unspecified, current time in client machine will be used.\n   */\n  today?: Date;\n\n  /**\n   * Callback function when the header is selected\n   */\n  onHeaderSelect?: () => void;\n\n  /**\n   * Apply additional formatting to dates, for example localized date formatting.\n   */\n  dateTimeFormatter?: DateFormatting;\n\n  /**\n   * If set the Calendar will not allow navigation to or selection of a date earlier than this value.\n   */\n  minDate?: Date;\n\n  /**\n   * If set the Calendar will not allow navigation to or selection of a date later than this value.\n   */\n  maxDate?: Date;\n\n  /**\n   * Whether the month picker should highlight the current month\n   * @default false\n   */\n  highlightCurrentMonth?: boolean;\n\n  /**\n   * Whether the month picker should highlight the selected month\n   * @default false\n   */\n  highlightSelectedMonth?: boolean;\n\n  /**\n   * Allows all dates and buttons to be focused, including disabled ones\n   * @default false\n   */\n  allFocusable?: boolean;\n\n  /**\n   * Additional CSS class(es) to apply to the CalendarMonth.\n   */\n  className?: string;\n\n  /**\n   * Whether the year picker is hidden\n   * @default false\n   */\n  yearPickerHidden?: boolean;\n\n  /**\n   * The cardinal directions for animation to occur during transitions, either horizontal or veritcal\n   */\n  animationDirection?: AnimationDirection;\n\n  /**\n   * Custom navigation icons.\n   */\n  navigationIcons: CalendarNavigationIcons;\n}\n\n/**\n * @internal\n */\nexport interface CalendarMonthStyleProps extends CalendarPickerStyleProps {}\n\n/**\n * @internal\n */\nexport interface CalendarMonthStyles extends CalendarPickerStyles {}\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}

package/lib/components/CalendarYear/CalendarYear.js

@@ -1,7 +1,5 @@
 import * as React from 'react';
 import { Enter, Space } from '@fluentui/keyboard-keys';
-import { ArrowDownRegular, ArrowUpRegular } from '@fluentui/react-icons';
-import { useFluent_unstable } from '@fluentui/react-shared-contexts';
 import { useArrowNavigationGroup } from '@fluentui/react-tabster';
 import { mergeClasses } from '@griffel/react';
 import { useCalendarYearStyles_unstable } from './useCalendarYearStyles.styles';
@@ -112,7 +110,7 @@ const CalendarYearNavDirection = {
     Next: 1
 };
 const CalendarYearNavArrow = (props)=>{
-    const { className, strings = DefaultCalendarYearStrings, direction, onSelectPrev, onSelectNext, fromYear, toYear, maxYear, minYear } = props;
+    const { className, strings = DefaultCalendarYearStrings, direction, onSelectPrev, onSelectNext, fromYear, toYear, maxYear, minYear, navigationIcons } = props;
     const classNames = useCalendarYearStyles_unstable({
         className
     });
@@ -132,9 +130,6 @@ const CalendarYearNavArrow = (props)=>{
             onNavigate();
         }
     };
-    const { dir } = useFluent_unstable();
-    // can be condensed, but leaving verbose for clarity due to regressions
-    const isLeftNavigation = dir === 'rtl' ? direction === CalendarYearNavDirection.Next : direction === CalendarYearNavDirection.Previous;
     return /*#__PURE__*/ React.createElement("button", {
         className: mergeClasses(classNames.navigationButton, disabled && classNames.disabled),
         onClick: !disabled ? onNavigate : undefined,
@@ -142,7 +137,7 @@ const CalendarYearNavArrow = (props)=>{
         type: "button",
         title: ariaLabelString,
         disabled: disabled
-    }, isLeftNavigation ? /*#__PURE__*/ React.createElement(ArrowUpRegular, null) : /*#__PURE__*/ React.createElement(ArrowDownRegular, null));
+    }, direction === CalendarYearNavDirection.Previous ? navigationIcons.upNavigation : navigationIcons.downNavigation);
 };
 CalendarYearNavArrow.displayName = 'CalendarYearNavArrow';
 const CalendarYearNav = (props)=>{