@fluentui/react-datepicker-compat 0.0.0-nightly-20230424-0419.1 → 0.0.0

package/lib/components/CalendarDayGrid/useWeeks.js

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import { compareDates, DAYS_IN_WEEK, getDayGrid } from '../../utils/index';
+/**
+ * @internal
+ */
+export function useWeeks(props, onSelectDate, getSetRefCallback) {
+  /**
+  * Initial parsing of the given props to generate IDayInfo two dimensional array, which contains a representation
+  * of every day in the grid. Convenient for helping with conversions between day refs and Date objects in callbacks.
+  */
+  const weeks = React.useMemo(() => {
+    var _props_getMarkedDays;
+    const weeksGrid = getDayGrid(props);
+    const firstVisibleDay = weeksGrid[1][0].originalDate;
+    const lastVisibleDay = weeksGrid[weeksGrid.length - 1][6].originalDate;
+    const markedDays = ((_props_getMarkedDays = props.getMarkedDays) === null || _props_getMarkedDays === void 0 ? void 0 : _props_getMarkedDays.call(props, firstVisibleDay, lastVisibleDay)) || [];
+    /**
+    * Weeks is a 2D array. Weeks[0] contains the last week of the prior range,
+    * Weeks[weeks.length - 1] contains first week of next range. These are for transition states.
+    *
+    * Weeks[1... weeks.length - 2] contains the actual visible data
+    */
+    const returnValue = [];
+    for (let weekIndex = 0; weekIndex < weeksGrid.length; weekIndex++) {
+      const week = [];
+      for (let dayIndex = 0; dayIndex < DAYS_IN_WEEK; dayIndex++) {
+        const day = weeksGrid[weekIndex][dayIndex];
+        const dayInfo = {
+          onSelected: () => onSelectDate(day.originalDate),
+          setRef: getSetRefCallback(day.key),
+          ...day,
+          isMarked: day.isMarked || (markedDays === null || markedDays === void 0 ? void 0 : markedDays.some(markedDay => compareDates(day.originalDate, markedDay)))
+        };
+        week.push(dayInfo);
+      }
+      returnValue.push(week);
+    }
+    return returnValue;
+    // TODO: this is missing deps on getSetRefCallback and onSelectDate (and depending on the entire
+    // props object may not be a good idea due to likely frequent mutation). It would be easy to
+    // fix getSetRefCallback to not mutate every render, but onSelectDate is passed down from
+    // Calendar and trying to fix it requires a huge cascade of changes.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [props]);
+  return weeks;
+}
+//# sourceMappingURL=useWeeks.js.map

package/lib/components/CalendarDayGrid/useWeeks.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","compareDates","DAYS_IN_WEEK","getDayGrid","useWeeks","props","onSelectDate","getSetRefCallback","weeks","useMemo","_props_getMarkedDays","weeksGrid","firstVisibleDay","originalDate","lastVisibleDay","length","markedDays","getMarkedDays","call","returnValue","weekIndex","week","dayIndex","day","dayInfo","onSelected","setRef","key","isMarked","some","markedDay","push"],"sources":["../../../src/components/CalendarDayGrid/useWeeks.ts"],"sourcesContent":["import * as React from 'react';\nimport { compareDates, DAYS_IN_WEEK, getDayGrid } from '../../utils/index';\nimport { DayInfo } from './CalendarDayGrid';\nimport { CalendarDayGridProps } from './CalendarDayGrid.types';\n\n/**\n * @internal\n */\nexport function useWeeks(\n  props: CalendarDayGridProps,\n  onSelectDate: (date: Date) => void,\n  getSetRefCallback: (dayKey: string) => (element: HTMLElement | null) => void,\n): DayInfo[][] {\n  /**\n   * Initial parsing of the given props to generate IDayInfo two dimensional array, which contains a representation\n   * of every day in the grid. Convenient for helping with conversions between day refs and Date objects in callbacks.\n   */\n  const weeks = React.useMemo((): DayInfo[][] => {\n    const weeksGrid = getDayGrid(props);\n\n    const firstVisibleDay = weeksGrid[1][0].originalDate;\n    const lastVisibleDay = weeksGrid[weeksGrid.length - 1][6].originalDate;\n    const markedDays = props.getMarkedDays?.(firstVisibleDay, lastVisibleDay) || [];\n\n    /**\n     * Weeks is a 2D array. Weeks[0] contains the last week of the prior range,\n     * Weeks[weeks.length - 1] contains first week of next range. These are for transition states.\n     *\n     * Weeks[1... weeks.length - 2] contains the actual visible data\n     */\n    const returnValue: DayInfo[][] = [];\n\n    for (let weekIndex = 0; weekIndex < weeksGrid.length; weekIndex++) {\n      const week: DayInfo[] = [];\n      for (let dayIndex = 0; dayIndex < DAYS_IN_WEEK; dayIndex++) {\n        const day = weeksGrid[weekIndex][dayIndex];\n        const dayInfo: DayInfo = {\n          onSelected: () => onSelectDate(day.originalDate),\n          setRef: getSetRefCallback(day.key),\n          ...day,\n          isMarked: day.isMarked || markedDays?.some(markedDay => compareDates(day.originalDate, markedDay)),\n        };\n\n        week.push(dayInfo);\n      }\n      returnValue.push(week);\n    }\n\n    return returnValue;\n    // TODO: this is missing deps on getSetRefCallback and onSelectDate (and depending on the entire\n    // props object may not be a good idea due to likely frequent mutation). It would be easy to\n    // fix getSetRefCallback to not mutate every render, but onSelectDate is passed down from\n    // Calendar and trying to fix it requires a huge cascade of changes.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [props]);\n\n  return weeks;\n}\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,YAAY,EAAEC,YAAY,EAAEC,UAAU,QAAQ;AAIvD;;;AAGA,OAAO,SAASC,SACdC,KAA2B,EAC3BC,YAAkC,EAClCC,iBAA4E,EAC/D;EACb;;;;EAIA,MAAMC,KAAA,GAAQR,KAAA,CAAMS,OAAO,CAAC,MAAmB;QAK1BC,oBAAA;IAJnB,MAAMC,SAAA,GAAYR,UAAA,CAAWE,KAAA;IAE7B,MAAMO,eAAA,GAAkBD,SAAS,CAAC,EAAE,CAAC,EAAE,CAACE,YAAY;IACpD,MAAMC,cAAA,GAAiBH,SAAS,CAACA,SAAA,CAAUI,MAAM,GAAG,EAAE,CAAC,EAAE,CAACF,YAAY;IACtE,MAAMG,UAAA,GAAa,EAAAN,oBAAA,GAAAL,KAAA,CAAMY,aAAa,cAAnBP,oBAAA,uBAAAA,oBAAA,CAAAQ,IAAA,CAAAb,KAAA,EAAsBO,eAAA,EAAiBE,cAAA,MAAmB,EAAE;IAE/E;;;;;;IAMA,MAAMK,WAAA,GAA2B,EAAE;IAEnC,KAAK,IAAIC,SAAA,GAAY,GAAGA,SAAA,GAAYT,SAAA,CAAUI,MAAM,EAAEK,SAAA,IAAa;MACjE,MAAMC,IAAA,GAAkB,EAAE;MAC1B,KAAK,IAAIC,QAAA,GAAW,GAAGA,QAAA,GAAWpB,YAAA,EAAcoB,QAAA,IAAY;QAC1D,MAAMC,GAAA,GAAMZ,SAAS,CAACS,SAAA,CAAU,CAACE,QAAA,CAAS;QAC1C,MAAME,OAAA,GAAmB;UACvBC,UAAA,EAAYA,CAAA,KAAMnB,YAAA,CAAaiB,GAAA,CAAIV,YAAY;UAC/Ca,MAAA,EAAQnB,iBAAA,CAAkBgB,GAAA,CAAII,GAAG;UACjC,GAAGJ,GAAG;UACNK,QAAA,EAAUL,GAAA,CAAIK,QAAQ,KAAIZ,UAAA,aAAAA,UAAA,uBAAAA,UAAA,CAAYa,IAAI,CAACC,SAAA,IAAa7B,YAAA,CAAasB,GAAA,CAAIV,YAAY,EAAEiB,SAAA;QACzF;QAEAT,IAAA,CAAKU,IAAI,CAACP,OAAA;MACZ;MACAL,WAAA,CAAYY,IAAI,CAACV,IAAA;IACnB;IAEA,OAAOF,WAAA;IACP;IACA;IACA;IACA;IACA;EACF,GAAG,CAACd,KAAA,CAAM;EAEV,OAAOG,KAAA;AACT"}

package/lib/components/CalendarMonth/CalendarMonth.js

@@ -0,0 +1,282 @@
+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';
+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;
+    }
+  });
+  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
+    });
+    // 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"
+  }, /*#__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 isCurrentMonth(month, year, today) {
+  return today.getFullYear() === year && today.getMonth() === month;
+}
+function onButtonKeyDown(callback) {
+  return ev => {
+    switch (ev.key) {
+      case Enter:
+        callback();
+        break;
+    }
+  };
+}
+//# sourceMappingURL=CalendarMonth.js.map

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

@@ -0,0 +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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"}

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

@@ -0,0 +1,2 @@
+import * as React from 'react';
+//# sourceMappingURL=CalendarMonth.types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React"],"sources":["../../../src/components/CalendarMonth/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"],"mappings":"AAAA,YAAYA,KAAA,MAAW"}

package/lib/components/CalendarMonth/index.js

@@ -0,0 +1,4 @@
+export * from './CalendarMonth';
+export * from './CalendarMonth.types';
+export * from './useCalendarMonthStyles';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["../../../src/components/CalendarMonth/index.ts"],"sourcesContent":["export * from './CalendarMonth';\nexport * from './CalendarMonth.types';\nexport * from './useCalendarMonthStyles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc"}

package/lib/components/CalendarMonth/useCalendarMonthStyles.js

@@ -0,0 +1,10 @@
+import { useCalendarPickerStyles_unstable } from '../CalendarPicker/useCalendarPickerStyles';
+/**
+ *  @internal
+ *
+ * Apply styling to the CalendarMonth slots based on the state
+ */
+export const useCalendarMonthStyles_unstable = props => {
+  return useCalendarPickerStyles_unstable(props);
+};
+//# sourceMappingURL=useCalendarMonthStyles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["useCalendarPickerStyles_unstable","useCalendarMonthStyles_unstable","props"],"sources":["../../../src/components/CalendarMonth/useCalendarMonthStyles.ts"],"sourcesContent":["import { useCalendarPickerStyles_unstable } from '../CalendarPicker/useCalendarPickerStyles';\nimport type { CalendarMonthStyleProps, CalendarMonthStyles } from './CalendarMonth.types';\n\n/**\n *  @internal\n *\n * Apply styling to the CalendarMonth slots based on the state\n */\nexport const useCalendarMonthStyles_unstable = (props: CalendarMonthStyleProps): CalendarMonthStyles => {\n  return useCalendarPickerStyles_unstable(props);\n};\n"],"mappings":"AAAA,SAASA,gCAAgC,QAAQ;AAGjD;;;;;AAKA,OAAO,MAAMC,+BAAA,GAAmCC,KAAA,IAAwD;EACtG,OAAOF,gCAAA,CAAiCE,KAAA;AAC1C"}

package/lib/components/CalendarPicker/CalendarPicker.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=CalendarPicker.types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["../../../src/components/CalendarPicker/CalendarPicker.types.ts"],"sourcesContent":["import { AnimationDirection } from '../Calendar/Calendar.types';\n\n/**\n * @internal\n */\nexport interface CalendarPickerStyleProps {\n  /**\n   * Accept custom classNames\n   */\n  className?: string;\n\n  /**\n   * Whether the header can be clicked\n   */\n  hasHeaderClickCallback?: boolean;\n\n  /**\n   * Whether the picker should highlight the current item\n   */\n  highlightCurrent?: boolean;\n\n  /**\n   * Whether the picker should highlight the selected item\n   */\n  highlightSelected?: boolean;\n\n  /**\n   * The cardinal directions for animation to occur during transitions, either horizontal or veritcal\n   */\n  animationDirection?: AnimationDirection;\n\n  /**\n   * Whether grid entering animation should be forwards or backwards\n   */\n  animateBackwards?: boolean;\n}\n\n/**\n * @internal\n */\nexport interface CalendarPickerStyles {\n  /**\n   * Style for the root element.\n   */\n  root: string;\n\n  headerContainer: string;\n\n  currentItemButton: string;\n\n  navigationButtonsContainer: string;\n\n  navigationButton: string;\n\n  gridContainer: string;\n\n  buttonRow: string;\n\n  itemButton: string;\n\n  current: string;\n\n  selected: string;\n\n  disabled: string;\n}\n"],"mappings":"AAAA"}

package/lib/components/CalendarPicker/index.js

@@ -0,0 +1,3 @@
+export * from './CalendarPicker.types';
+export * from './useCalendarPickerStyles';
+//# sourceMappingURL=index.js.map

package/lib/components/CalendarPicker/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["../../../src/components/CalendarPicker/index.ts"],"sourcesContent":["export * from './CalendarPicker.types';\nexport * from './useCalendarPickerStyles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc"}