@fluentui/react-datepicker-compat 0.1.4 → 0.1.5

package/lib/components/CalendarMonth/CalendarMonth.js

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

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

@@ -1 +1 @@
-{"version":3,"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","createElement","key","minYear","maxYear","highlightCurrentYear","highlightSelectedYear","rowIndexes","i","shortMonths","length","push","yearString","formatYear","headerAriaLabel","monthPickerHeaderAriaLabel","replace","root","headerContainer","currentItemButton","onClick","onKeyDown","onButtonKeyDown","tabIndex","type","navigationButtonsContainer","navigationButton","disabled","title","prevYearAriaLabel","nextYearAriaLabel","gridContainer","role","map","rowNum","monthsForRow","slice","buttonRow","month","index","monthIndex","indexedMonth","isNavigatedMonth","isSelectedMonth","isSelectedYear","isInBounds","ref","itemButton","isCurrentMonth","selected","formatMonth","displayName","yearToString","year","yearFormattingDate","String","yearRangeToString","yearRange","fromYear","toYear","yearRangeToNextDecadeLabel","nextYearRangeAriaLabel","yearRangeToPrevDecadeLabel","prevYearRangeAriaLabel","rangeAriaLabel","prevRangeAriaLabel","nextRangeAriaLabel","headerAriaLabelFormatString","yearPickerHeaderAriaLabel","callback","ev"],"sources":["../../../src/components/CalendarMonth/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        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"],"mappings":"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"}
+{"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        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","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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"}